mirror of
https://github.com/anotherhadi/awesome-wallpapers.git
synced 2026-10-05 10:18:26 +02:00
Full rewrite
This commit is contained in:
Hadi
Executable
+62
@@ -0,0 +1,62 @@
|
||||
#!/usr/bin/env bash
|
||||
# Validate wallpaper filenames against the naming convention described in README.md:
|
||||
# wallpaper-name_tag1_tag2.png
|
||||
# - name: lowercase letters/digits, words separated by "-"
|
||||
# - tags: lowercase letters, words separated by "-", tags separated by "_"
|
||||
# - only .png and .gif are accepted
|
||||
# - gifs must carry the "animated" tag
|
||||
# - every gif must have a same-named .png counterpart
|
||||
|
||||
set -uo pipefail
|
||||
|
||||
wallpapers_dir="wallpapers"
|
||||
name_re='^[a-z0-9]+(-[a-z0-9]+)*(_[a-z]+(-[a-z]+)*)*$'
|
||||
status=0
|
||||
|
||||
if [[ ! -d "$wallpapers_dir" ]]; then
|
||||
echo "No $wallpapers_dir directory found, skipping."
|
||||
exit 0
|
||||
fi
|
||||
|
||||
shopt -s nullglob
|
||||
for file in "$wallpapers_dir"/*; do
|
||||
[[ -f "$file" ]] || continue
|
||||
filename=$(basename "$file")
|
||||
basename="${filename%.*}"
|
||||
ext="${filename##*.}"
|
||||
|
||||
if [[ "$ext" != "png" && "$ext" != "gif" ]]; then
|
||||
echo "❌ $filename: only .png and .gif files are accepted"
|
||||
status=1
|
||||
continue
|
||||
fi
|
||||
|
||||
if [[ ! "$basename" =~ $name_re ]]; then
|
||||
echo "❌ $filename: invalid name/tags, expected wallpaper-name_tag1_tag2 (lowercase, '-' separated words, '_' separated tags)"
|
||||
status=1
|
||||
continue
|
||||
fi
|
||||
|
||||
if [[ "$ext" == "gif" ]]; then
|
||||
IFS='_' read -r -a parts <<<"$basename"
|
||||
has_animated=0
|
||||
for tag in "${parts[@]:1}"; do
|
||||
[[ "$tag" == "animated" ]] && has_animated=1
|
||||
done
|
||||
if [[ "$has_animated" -eq 0 ]]; then
|
||||
echo "❌ $filename: gif files must include the 'animated' tag"
|
||||
status=1
|
||||
fi
|
||||
|
||||
if [[ ! -f "$wallpapers_dir/$basename.png" ]]; then
|
||||
echo "❌ $filename: missing matching static $basename.png"
|
||||
status=1
|
||||
fi
|
||||
fi
|
||||
done
|
||||
|
||||
if [[ "$status" -eq 0 ]]; then
|
||||
echo "✅ All wallpaper filenames are valid."
|
||||
fi
|
||||
|
||||
exit "$status"
|
||||
Executable
+57
@@ -0,0 +1,57 @@
|
||||
#!/usr/bin/env bash
|
||||
# Losslessly compress wallpapers before they are committed, so the repo
|
||||
# doesn't grow larger than it needs to. Only files staged in this commit
|
||||
# are touched, to keep the hook fast.
|
||||
|
||||
set -uo pipefail
|
||||
|
||||
wallpapers_dir="wallpapers"
|
||||
changed=0
|
||||
|
||||
if [[ ! -d "$wallpapers_dir" ]]; then
|
||||
exit 0
|
||||
fi
|
||||
|
||||
if ! command -v oxipng >/dev/null 2>&1; then
|
||||
echo "❌ oxipng is required but was not found in PATH"
|
||||
exit 1
|
||||
fi
|
||||
if ! command -v gifsicle >/dev/null 2>&1; then
|
||||
echo "❌ gifsicle is required but was not found in PATH"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
mapfile -t staged < <(git diff --cached --name-only --diff-filter=ACM -- "$wallpapers_dir")
|
||||
|
||||
for file in "${staged[@]}"; do
|
||||
[[ -f "$file" ]] || continue
|
||||
ext="${file##*.}"
|
||||
|
||||
before=$(stat -c%s "$file")
|
||||
|
||||
case "$ext" in
|
||||
png)
|
||||
oxipng -o max --strip safe -q "$file" >/dev/null
|
||||
;;
|
||||
gif)
|
||||
gifsicle -O3 --batch "$file"
|
||||
;;
|
||||
*)
|
||||
continue
|
||||
;;
|
||||
esac
|
||||
|
||||
after=$(stat -c%s "$file")
|
||||
if [[ "$after" -ne "$before" ]]; then
|
||||
echo "Compressed $file ($before -> $after bytes)"
|
||||
git add "$file"
|
||||
changed=1
|
||||
fi
|
||||
done
|
||||
|
||||
if [[ "$changed" -eq 1 ]]; then
|
||||
echo "Image(s) were compressed and re-staged, please commit again."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
exit 0
|
||||
Executable
+44
@@ -0,0 +1,44 @@
|
||||
#!/usr/bin/env bash
|
||||
# Every gif in wallpapers/ must have a same-named static .png counterpart
|
||||
# (see README.md). This hook generates the missing ones from the gif's
|
||||
# first frame and stages them, so a commit adding a gif automatically
|
||||
# gets its png alongside it.
|
||||
|
||||
set -uo pipefail
|
||||
|
||||
wallpapers_dir="wallpapers"
|
||||
changed=0
|
||||
|
||||
if [[ ! -d "$wallpapers_dir" ]]; then
|
||||
exit 0
|
||||
fi
|
||||
|
||||
if ! command -v magick >/dev/null 2>&1; then
|
||||
echo "❌ imagemagick (magick) is required but was not found in PATH"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
shopt -s nullglob
|
||||
for gif in "$wallpapers_dir"/*.gif; do
|
||||
basename="${gif%.gif}"
|
||||
png="$basename.png"
|
||||
|
||||
if [[ -f "$png" ]]; then
|
||||
continue
|
||||
fi
|
||||
|
||||
echo "Generating $png from $(basename "$gif")"
|
||||
if ! magick "${gif}[0]" "$png"; then
|
||||
echo "❌ Failed to generate $png"
|
||||
exit 1
|
||||
fi
|
||||
git add "$png"
|
||||
changed=1
|
||||
done
|
||||
|
||||
if [[ "$changed" -eq 1 ]]; then
|
||||
echo "New static png(s) were generated and staged, please commit again."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
exit 0
|
||||
Executable
+218
@@ -0,0 +1,218 @@
|
||||
#!/usr/bin/env bash
|
||||
# Regenerate WALLPAPERS.md (and its 2/3-column variants, and tags/*.md)
|
||||
# from the contents of wallpapers/.
|
||||
# When a wallpaper has both a static png and an animated gif (same
|
||||
# basename), only one row is emitted, previewed with the gif.
|
||||
|
||||
set -uo pipefail
|
||||
|
||||
wallpapers_dir="wallpapers"
|
||||
tags_dir="tags"
|
||||
|
||||
if [[ ! -d "$wallpapers_dir" ]]; then
|
||||
exit 0
|
||||
fi
|
||||
|
||||
# Each entry: name<TAB>basename<TAB>preview<TAB>raw_tags(underscore-joined)
|
||||
build_entries() {
|
||||
shopt -s nullglob
|
||||
declare -A seen
|
||||
for file in "$wallpapers_dir"/*.png "$wallpapers_dir"/*.gif; do
|
||||
filename=$(basename "$file")
|
||||
base="${filename%.*}"
|
||||
|
||||
[[ -n "${seen[$base]:-}" ]] && continue
|
||||
seen[$base]=1
|
||||
|
||||
preview="$file"
|
||||
if [[ -f "$wallpapers_dir/$base.gif" ]]; then
|
||||
preview="$wallpapers_dir/$base.gif"
|
||||
fi
|
||||
|
||||
name="${base%%_*}"
|
||||
tags=""
|
||||
if [[ "$base" == *_* ]]; then
|
||||
tags="${base#*_}"
|
||||
fi
|
||||
|
||||
printf '%s\t%s\t%s\t%s\n' "$name" "$base" "$preview" "$tags"
|
||||
done | sort -t $'\t' -k1,1
|
||||
}
|
||||
|
||||
mapfile -t entries < <(build_entries)
|
||||
|
||||
# Collect the sorted, de-duplicated list of tags, and which entries have them.
|
||||
declare -A tag_seen
|
||||
all_tags=()
|
||||
for entry in "${entries[@]}"; do
|
||||
IFS=$'\t' read -r _ _ _ tags_raw <<<"$entry"
|
||||
[[ -z "$tags_raw" ]] && continue
|
||||
IFS='_' read -ra tokens <<<"$tags_raw"
|
||||
for t in "${tokens[@]}"; do
|
||||
if [[ -z "${tag_seen[$t]:-}" ]]; then
|
||||
tag_seen[$t]=1
|
||||
all_tags+=("$t")
|
||||
fi
|
||||
done
|
||||
done
|
||||
mapfile -t sorted_tags < <(printf '%s\n' "${all_tags[@]}" | sort)
|
||||
|
||||
entry_has_tag() {
|
||||
local tags_raw="$1" tag="$2" t
|
||||
IFS='_' read -ra tokens <<<"$tags_raw"
|
||||
for t in "${tokens[@]}"; do
|
||||
[[ "$t" == "$tag" ]] && return 0
|
||||
done
|
||||
return 1
|
||||
}
|
||||
|
||||
# tags_links <raw_tags> <tag-link-prefix>
|
||||
# Turns "foo_bar-baz" into "[foo](<prefix>foo.md), [bar-baz](<prefix>bar-baz.md)"
|
||||
tags_links() {
|
||||
local tags_raw="$1" tag_prefix="$2"
|
||||
[[ -z "$tags_raw" ]] && return
|
||||
local -a tokens
|
||||
IFS='_' read -ra tokens <<<"$tags_raw"
|
||||
local out="" t first=1
|
||||
for t in "${tokens[@]}"; do
|
||||
((first)) || out+=", "
|
||||
first=0
|
||||
out+="[${t}](${tag_prefix}${t}.md)"
|
||||
done
|
||||
printf '%s' "$out"
|
||||
}
|
||||
|
||||
# render_table <cols> <preview-prefix> <tag-link-prefix> <entries...>
|
||||
render_table() {
|
||||
local cols="$1" prefix="$2" tag_prefix="$3"
|
||||
shift 3
|
||||
local -a items=("$@")
|
||||
|
||||
local header="|" sep="|"
|
||||
local i
|
||||
for ((i = 0; i < cols; i++)); do
|
||||
header+=" Preview | Name | Tags |"
|
||||
sep+="---------|------|------|"
|
||||
done
|
||||
echo "$header"
|
||||
echo "$sep"
|
||||
|
||||
local total=${#items[@]}
|
||||
local idx=0
|
||||
while ((idx < total)); do
|
||||
local line="|"
|
||||
local c
|
||||
for ((c = 0; c < cols; c++)); do
|
||||
if ((idx < total)); then
|
||||
local name base preview tags_raw tags_display
|
||||
IFS=$'\t' read -r name base preview tags_raw <<<"${items[idx]}"
|
||||
tags_display="$(tags_links "$tags_raw" "$tag_prefix")"
|
||||
line+="  | ${name} | ${tags_display} |"
|
||||
((idx++))
|
||||
else
|
||||
line+=" | | |"
|
||||
fi
|
||||
done
|
||||
echo "$line"
|
||||
done
|
||||
}
|
||||
|
||||
# render_grid <cols> <preview-prefix> <tag-link-prefix> <entries...>
|
||||
# Like render_table, but each cell stacks the image with its name and
|
||||
# tags underneath instead of using separate Name/Tags columns.
|
||||
render_grid() {
|
||||
local cols="$1" prefix="$2" tag_prefix="$3"
|
||||
shift 3
|
||||
local -a items=("$@")
|
||||
|
||||
local header="|" sep="|"
|
||||
local i
|
||||
for ((i = 0; i < cols; i++)); do
|
||||
header+=" |"
|
||||
sep+=":---:|"
|
||||
done
|
||||
echo "$header"
|
||||
echo "$sep"
|
||||
|
||||
local total=${#items[@]}
|
||||
local idx=0
|
||||
while ((idx < total)); do
|
||||
local line="|"
|
||||
local c
|
||||
for ((c = 0; c < cols; c++)); do
|
||||
if ((idx < total)); then
|
||||
local name base preview tags_raw tags_display cell
|
||||
IFS=$'\t' read -r name base preview tags_raw <<<"${items[idx]}"
|
||||
tags_display="$(tags_links "$tags_raw" "$tag_prefix")"
|
||||
cell="<br>${name}"
|
||||
[[ -n "$tags_display" ]] && cell+="<br>${tags_display}"
|
||||
line+=" ${cell} |"
|
||||
((idx++))
|
||||
else
|
||||
line+=" |"
|
||||
fi
|
||||
done
|
||||
echo "$line"
|
||||
done
|
||||
}
|
||||
|
||||
nav_block() {
|
||||
echo "[1 Column](WALLPAPERS.md) · [2 Columns](WALLPAPERS-2COL.md) · [3 Columns](WALLPAPERS-3COL.md)"
|
||||
}
|
||||
|
||||
tags_block() {
|
||||
local prefix="$1"
|
||||
echo "<details>"
|
||||
echo "<summary>Tags</summary>"
|
||||
echo
|
||||
local t
|
||||
for t in "${sorted_tags[@]}"; do
|
||||
echo "- [${t}](${prefix}${tags_dir}/${t}.md)"
|
||||
done
|
||||
echo
|
||||
echo "</details>"
|
||||
}
|
||||
|
||||
generate_main() {
|
||||
local file="$1" cols="$2"
|
||||
{
|
||||
echo "# Wallpapers"
|
||||
echo
|
||||
nav_block
|
||||
echo
|
||||
tags_block ""
|
||||
echo
|
||||
if ((cols > 1)); then
|
||||
render_grid "$cols" "" "${tags_dir}/" "${entries[@]}"
|
||||
else
|
||||
render_table "$cols" "" "${tags_dir}/" "${entries[@]}"
|
||||
fi
|
||||
} >"$file"
|
||||
git add "$file"
|
||||
}
|
||||
|
||||
generate_main "WALLPAPERS.md" 1
|
||||
generate_main "WALLPAPERS-2COL.md" 2
|
||||
generate_main "WALLPAPERS-3COL.md" 3
|
||||
|
||||
rm -rf "$tags_dir"
|
||||
mkdir -p "$tags_dir"
|
||||
for t in "${sorted_tags[@]}"; do
|
||||
tag_items=()
|
||||
for entry in "${entries[@]}"; do
|
||||
IFS=$'\t' read -r _ _ _ tags_raw <<<"$entry"
|
||||
if entry_has_tag "$tags_raw" "$t"; then
|
||||
tag_items+=("$entry")
|
||||
fi
|
||||
done
|
||||
{
|
||||
echo "# Tag: ${t}"
|
||||
echo
|
||||
echo "[← All wallpapers](../WALLPAPERS.md)"
|
||||
echo
|
||||
render_table 1 "../" "" "${tag_items[@]}"
|
||||
} >"$tags_dir/$t.md"
|
||||
done
|
||||
git add "$tags_dir"
|
||||
|
||||
echo "Generated WALLPAPERS.md, WALLPAPERS-2COL.md, WALLPAPERS-3COL.md and $tags_dir/"
|
||||
@@ -1,65 +0,0 @@
|
||||
name: Check Wallpapers Format
|
||||
|
||||
on:
|
||||
push:
|
||||
paths:
|
||||
- 'app/static/wallpapers/**'
|
||||
pull_request:
|
||||
paths:
|
||||
- 'app/static/wallpapers/**'
|
||||
|
||||
jobs:
|
||||
check-extensions:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Validate file format and naming conventions
|
||||
run: |
|
||||
# Loop through all wallpaper files
|
||||
cd "./app/static/wallpapers"
|
||||
for file in *; do
|
||||
if [[ -f "$file" ]]; then
|
||||
filename=$file
|
||||
basename=$(echo "$file" | cut -d. -f1)
|
||||
|
||||
# Check if .png, .jpg or .gif
|
||||
if [[ ! $filename =~ \.(png|jpg|gif)$ ]]; then
|
||||
echo "❌ Error: $file is not a PNG, JPG or GIF file"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Check if only lowercase letters, - and _ are used
|
||||
echo "$basename" | grep -qE '^[a-z0-9][a-z0-9_-]*$' || {
|
||||
echo "❌ Error: $file contains invalid characters"
|
||||
exit 1
|
||||
}
|
||||
|
||||
if [[ $basename == *-_* ]]; then
|
||||
echo "❌ Error: $file contains a tag with a leading or trailing _"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
if [[ $basename == *"_static"* ]]; then
|
||||
t=$(echo "$basename" | sed 's/_static/_animated/')
|
||||
if [ ! -f "${t}.gif" ] ; then
|
||||
echo "❌ Error: $file has a static tag but no gif file"
|
||||
exit 1
|
||||
fi
|
||||
fi
|
||||
|
||||
if [[ $basename == *"_animated"* ]]; then
|
||||
t=$(echo "$basename" | sed 's/_animated/_static/')
|
||||
if [ ! -f "${t}.png" ] && [ ! -f "${t}.jpg" ]; then
|
||||
echo "❌ Error: $file has a animated tag but no png or jpg file"
|
||||
exit 1
|
||||
fi
|
||||
fi
|
||||
|
||||
if [[ $filename == *.gif && $basename != *"_animated"* ]]; then
|
||||
echo "❌ Error: $file is a gif file but doesn't contain _static or _animated"
|
||||
exit 1
|
||||
fi
|
||||
fi
|
||||
done
|
||||
@@ -1,49 +0,0 @@
|
||||
name: Create Wallpapers Markdown
|
||||
|
||||
on:
|
||||
workflow_run:
|
||||
workflows: ["Check Wallpapers Format"]
|
||||
types:
|
||||
- completed
|
||||
permissions:
|
||||
contents: write
|
||||
jobs:
|
||||
generate-md:
|
||||
runs-on: ubuntu-latest
|
||||
if: ${{ github.event.workflow_run.conclusion == 'success' }} # Only run if the first workflow was successful
|
||||
steps:
|
||||
- name: Checkout repository
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Create WALLPAPERS.md
|
||||
run: |
|
||||
# Set the output file
|
||||
OUTPUT_FILE="WALLPAPERS.md"
|
||||
|
||||
# Start the markdown file content
|
||||
echo "# Wallpapers" > $OUTPUT_FILE
|
||||
echo "" >> $OUTPUT_FILE
|
||||
|
||||
# Create a table with 2 columns for the wallpapers and their names
|
||||
echo "| Wallpaper | Name |" >> $OUTPUT_FILE
|
||||
echo "|-----------|------|" >> $OUTPUT_FILE
|
||||
|
||||
# Loop through the wallpapers directory
|
||||
for file in app/static/wallpapers/*.{png,jpg,gif}; do
|
||||
if [[ -f "$file" ]]; then
|
||||
# Get the filename without the path
|
||||
FILENAME=$(basename "$file")
|
||||
# Get the name of the wallpaper (without extension)
|
||||
NAME="${FILENAME%.*}"
|
||||
|
||||
# Create the markdown table entry for the wallpaper
|
||||
echo "|  | ${NAME} |" >> $OUTPUT_FILE
|
||||
fi
|
||||
done
|
||||
|
||||
# Commit the changes
|
||||
git config user.name github-actions
|
||||
git config user.email [email protected]
|
||||
git add $OUTPUT_FILE
|
||||
git commit -m "Generate WALLPAPERS.md" && git push
|
||||
exit 0
|
||||
+2
-1
@@ -1 +1,2 @@
|
||||
todo.md
|
||||
.claude/
|
||||
.pre-commit-config.yaml
|
||||
|
||||
@@ -19,17 +19,12 @@
|
||||
</p>
|
||||
|
||||
A curated collection of high-quality wallpapers, organized by tags.
|
||||
|
||||
✨ **Browse & Download** wallpapers easily using the web app: [wallpapers.hadi.icu](https://wallpapers.hadi.icu)
|
||||
📄 **See the full list** of wallpapers in [WALLPAPERS.md](./WALLPAPERS.md)
|
||||
📋 **Useful buttons** to copy the lib.fetchUrl() function for NixOS users
|
||||
|
||||
---
|
||||
**See the full list** of wallpapers in [WALLPAPERS.md](./WALLPAPERS.md)
|
||||
|
||||
## **Contributing Guidelines**
|
||||
|
||||
To maintain quality and consistency, please follow these rules when adding wallpapers:
|
||||
Wallpapers are stored in the `./app/static/wallpapers` directory.
|
||||
Wallpapers are stored in the `./wallpapers` directory.
|
||||
|
||||
### **File Naming Convention**
|
||||
|
||||
@@ -39,13 +34,12 @@ Each wallpaper file must follow this format:
|
||||
wallpaper-name_tag1_tag2.png
|
||||
```
|
||||
|
||||
✅ **Rules:**
|
||||
|
||||
- **Rules:**
|
||||
- The wallpaper name must be lowercase letters only, using `-` as a separator.
|
||||
- Tags (if present) must be **lowercase**, separated by `_`, and can only contain letters and `-`.
|
||||
- **GIFs must include the "animated" tag.**
|
||||
- If a GIF version exists, a **static PNG version must also exist**, using the same name with a `"static"` tag.
|
||||
- **Accepted formats:** PNG, JPG, and GIF only.
|
||||
- If a GIF version exists, a **static PNG version must also exist**, using the same name.
|
||||
- **Accepted formats:** PNG and GIF only.
|
||||
|
||||
### **Content Requirements**
|
||||
|
||||
|
||||
@@ -0,0 +1,126 @@
|
||||
# Wallpapers
|
||||
|
||||
[1 Column](WALLPAPERS.md) · [2 Columns](WALLPAPERS-2COL.md) · [3 Columns](WALLPAPERS-3COL.md)
|
||||
|
||||
<details>
|
||||
<summary>Tags</summary>
|
||||
|
||||
- [animated](tags/animated.md)
|
||||
- [art](tags/art.md)
|
||||
- [black](tags/black.md)
|
||||
- [black-and-white](tags/black-and-white.md)
|
||||
- [blue](tags/blue.md)
|
||||
- [catppuccin](tags/catppuccin.md)
|
||||
- [dark](tags/dark.md)
|
||||
- [flat](tags/flat.md)
|
||||
- [green](tags/green.md)
|
||||
- [grey](tags/grey.md)
|
||||
- [light](tags/light.md)
|
||||
- [minimalist](tags/minimalist.md)
|
||||
- [orange](tags/orange.md)
|
||||
- [pink](tags/pink.md)
|
||||
- [pixel](tags/pixel.md)
|
||||
- [pixelart](tags/pixelart.md)
|
||||
- [purple](tags/purple.md)
|
||||
- [red](tags/red.md)
|
||||
- [rose](tags/rose.md)
|
||||
- [static](tags/static.md)
|
||||
- [white](tags/white.md)
|
||||
|
||||
</details>
|
||||
|
||||
| | |
|
||||
|:---:|:---:|
|
||||
| <br>abstract<br>[green](tags/green.md) | <br>abstract-colorful |
|
||||
| <br>a-car-and-a-cloud | <br>acrylic |
|
||||
| <br>alone-cloud<br>[dark](tags/dark.md) | <br>anime-skyline<br>[purple](tags/purple.md) |
|
||||
| <br>another-mountain | <br>another-one |
|
||||
| <br>another-planet-with-grass<br>[blue](tags/blue.md) | <br>another-sky<br>[light](tags/light.md) |
|
||||
| <br>a-purple-planet<br>[purple](tags/purple.md) | <br>aquarium<br>[blue](tags/blue.md) |
|
||||
| <br>art-lake | <br>a-street-in-the-dark |
|
||||
| <br>astronaut | <br>aurora |
|
||||
| <br>a-violet-blur | <br>barcode<br>[minimalist](tags/minimalist.md), [dark](tags/dark.md) |
|
||||
| <br>beach-landscape | <br>beach-path |
|
||||
| <br>bike-and-a-cat | <br>black-and-white-forest<br>[minimalist](tags/minimalist.md), [black-and-white](tags/black-and-white.md) |
|
||||
| <br>black-grey-and-white | <br>black-moutains-and-a-city |
|
||||
| <br>black-oil<br>[dark](tags/dark.md) | <br>black-oil-2<br>[dark](tags/dark.md) |
|
||||
| <br>black-oil-3<br>[dark](tags/dark.md) | <br>black-waves<br>[black-and-white](tags/black-and-white.md) |
|
||||
| <br>blue-galaxy-waves | <br>blue-waves<br>[blue](tags/blue.md) |
|
||||
| <br>boat-and-purple | <br>borrowed-time |
|
||||
| <br>catstraunaut<br>[blue](tags/blue.md) | <br>cat-vibin |
|
||||
| <br>cat-watching-the-star<br>[pixelart](tags/pixelart.md), [purple](tags/purple.md), [animated](tags/animated.md) | <br>cat-watching-the-star<br>[pixelart](tags/pixelart.md), [purple](tags/purple.md), [static](tags/static.md) |
|
||||
| <br>cerf<br>[dark](tags/dark.md), [pixelart](tags/pixelart.md) | <br>city-at-night |
|
||||
| <br>city-on-water | <br>cloud-in-the-sky<br>[purple](tags/purple.md) |
|
||||
| <br>clouds-dodge-the-moon-2 | <br>clouds-in-the-sky |
|
||||
| <br>clouds-in-the-sky-2 | <br>clouds-in-the-sky-3 |
|
||||
| <br>clouds-in-the-sky-4<br>[light](tags/light.md) | <br>coffee-shop |
|
||||
| <br>colorful-planets | <br>couch<br>[orange](tags/orange.md) |
|
||||
| <br>cyber-ascii | <br>dark-forest<br>[dark](tags/dark.md) |
|
||||
| <br>dark-magical-forest | <br>dark-magical-forest-desktop-wallpaper |
|
||||
| <br>dark-starfields | <br>degirled |
|
||||
| <br>diner-lonely-road | <br>drawing<br>[art](tags/art.md), [dark](tags/dark.md) |
|
||||
| <br>dry-your-laundry | <br>evil-corp-keyboard<br>[purple](tags/purple.md) |
|
||||
| <br>flying-comets-clouds | <br>forest-bridge |
|
||||
| <br>forest-mountains-and-cloud<br>[dark](tags/dark.md), [black-and-white](tags/black-and-white.md) | <br>forest-under-the-clouds |
|
||||
| <br>fractal | <br>free-astronaut<br>[catppuccin](tags/catppuccin.md) |
|
||||
| <br>fsociety<br>[red](tags/red.md) | <br>fsociety |
|
||||
| <br>fuck-society | <br>fuck-society-no-text |
|
||||
| <br>fuji<br>[dark](tags/dark.md) | <br>fuji<br>[light](tags/light.md) |
|
||||
| <br>galaxy<br>[dark](tags/dark.md) | <br>galaxy<br>[pixelart](tags/pixelart.md), [purple](tags/purple.md) |
|
||||
| <br>galaxy-grey<br>[pixelart](tags/pixelart.md) | <br>girl-watching-the-cloud<br>[blue](tags/blue.md) |
|
||||
| <br>glacier | <br>glacier-2 |
|
||||
| <br>glacier-3 | <br>glitches |
|
||||
| <br>gradient-pb | <br>grey-mountains<br>[grey](tags/grey.md) |
|
||||
| <br>grey-road<br>[grey](tags/grey.md) | <br>grue<br>[blue](tags/blue.md) |
|
||||
| <br>hand-blocking-the-sun<br>[blue](tags/blue.md) | <br>hands<br>[black-and-white](tags/black-and-white.md) |
|
||||
| <br>hello-friend<br>[black-and-white](tags/black-and-white.md) | <br>horizon |
|
||||
| <br>hue-1<br>[minimalist](tags/minimalist.md) | <br>hue-2<br>[minimalist](tags/minimalist.md) |
|
||||
| <br>hue-3<br>[minimalist](tags/minimalist.md) | <br>hue-4<br>[minimalist](tags/minimalist.md) |
|
||||
| <br>hue-5<br>[minimalist](tags/minimalist.md) | <br>hue-6<br>[minimalist](tags/minimalist.md), [dark](tags/dark.md) |
|
||||
| <br>hue-7<br>[minimalist](tags/minimalist.md), [dark](tags/dark.md) | <br>it-is-some-waves<br>[dark](tags/dark.md) |
|
||||
| <br>it-is-the-ocean | <br>japan-houses |
|
||||
| <br>japan-moutains<br>[black-and-white](tags/black-and-white.md) | <br>lana-silhouette |
|
||||
| <br>landscape<br>[purple](tags/purple.md) | <br>lavender-cat<br>[purple](tags/purple.md) |
|
||||
| <br>leef<br>[dark](tags/dark.md), [purple](tags/purple.md), [minimalist](tags/minimalist.md) | <br>lights-in-the-dark<br>[dark](tags/dark.md) |
|
||||
| <br>lofi-setup<br>[blue](tags/blue.md), [purple](tags/purple.md) | <br>lofi-urban<br>[blue](tags/blue.md) |
|
||||
| <br>magma | <br>medusa<br>[art](tags/art.md), [dark](tags/dark.md) |
|
||||
| <br>moroco | <br>mosaic<br>[dark](tags/dark.md) |
|
||||
| <br>moutain | <br>moutains-and-a-lac<br>[black-and-white](tags/black-and-white.md) |
|
||||
| <br>moutains-and-a-lac<br>[blue](tags/blue.md) | <br>moutains-and-a-lac-night<br>[purple](tags/purple.md) |
|
||||
| <br>moutains-and-an-orange-sun | <br>moutains-and-stars<br>[black](tags/black.md) |
|
||||
| <br>moutains-justin<br>[white](tags/white.md) | <br>moutains-on-top-of-clouds |
|
||||
| <br>nasa-japan<br>[dark](tags/dark.md) | <br>nepal |
|
||||
| <br>night-fairycore-forest | <br>night-forest<br>[dark](tags/dark.md) |
|
||||
| <br>night-road<br>[purple](tags/purple.md) | <br>night-sky-with-snowflakes |
|
||||
| <br>nix<br>[minimalist](tags/minimalist.md), [purple](tags/purple.md) | <br>not-earth<br>[dark](tags/dark.md) |
|
||||
| <br>nothin-to-see-here<br>[pink](tags/pink.md), [dark](tags/dark.md) | <br>oled-mountains |
|
||||
| <br>oneway-street<br>[purple](tags/purple.md) | <br>openbox<br>[dark](tags/dark.md) |
|
||||
| <br>paint-loop<br>[art](tags/art.md) | <br>pastel-car |
|
||||
| <br>pastel-window | <br>pink-clouds |
|
||||
| <br>pink-sea | <br>pink-sky-moutains<br>[minimalist](tags/minimalist.md) |
|
||||
| <br>purple-japan<br>[purple](tags/purple.md) | <br>purple-moon<br>[purple](tags/purple.md) |
|
||||
| <br>railroad-cat | <br>rain-pixel |
|
||||
| <br>rains-dark<br>[dark](tags/dark.md) | <br>rocket-launch<br>[light](tags/light.md) |
|
||||
| <br>rocks-misty<br>[light](tags/light.md) | <br>rose-sky<br>[rose](tags/rose.md) |
|
||||
| <br>sakura<br>[pixelart](tags/pixelart.md), [light](tags/light.md), [animated](tags/animated.md) | <br>sakura<br>[pixelart](tags/pixelart.md), [light](tags/light.md), [static](tags/static.md) |
|
||||
| <br>samurai<br>[pixel](tags/pixel.md), [white](tags/white.md) | <br>saturn-rings |
|
||||
| <br>sea<br>[blue](tags/blue.md) | <br>sea-waves-pink-sunset |
|
||||
| <br>snow-and-a-tree<br>[white](tags/white.md) | <br>snowy-japan-street |
|
||||
| <br>space<br>[dark](tags/dark.md) | <br>space-2 |
|
||||
| <br>space-portal-galaxy | <br>strange-forms<br>[blue](tags/blue.md), [purple](tags/purple.md) |
|
||||
| <br>sun-is-shining | <br>sunny-winter-forest-river |
|
||||
| <br>sushi-keycap<br>[dark](tags/dark.md) | <br>swirls |
|
||||
| <br>thats-a-lot-of-stars | <br>the-cloud-is-hidding-the-moon<br>[dark](tags/dark.md) |
|
||||
| <br>the-cpu<br>[animated](tags/animated.md), [black](tags/black.md) | <br>the-cpu<br>[static](tags/static.md), [black](tags/black.md) |
|
||||
| <br>the-cpu-border<br>[animated](tags/animated.md), [black](tags/black.md) | <br>the-cpu-border<br>[static](tags/static.md), [black](tags/black.md) |
|
||||
| <br>time-to-ski<br>[blue](tags/blue.md) | <br>tokyo |
|
||||
| <br>tokyonight-skyline | <br>tokyo-skyscraper<br>[dark](tags/dark.md) |
|
||||
| <br>topology<br>[dark](tags/dark.md) | <br>train<br>[light](tags/light.md) |
|
||||
| <br>train-and-lake<br>[blue](tags/blue.md) | <br>train-on-a-bridge<br>[purple](tags/purple.md) |
|
||||
| <br>under-the-bridge<br>[blue](tags/blue.md) | <br>vanilla<br>[pink](tags/pink.md), [purple](tags/purple.md) |
|
||||
| <br>vector-moutains<br>[blue](tags/blue.md), [dark](tags/dark.md) | <br>velvet-moutains<br>[minimalist](tags/minimalist.md), [dark](tags/dark.md) |
|
||||
| <br>voyager-9 | <br>warm-textured-gradient |
|
||||
| <br>wave-dark<br>[minimalist](tags/minimalist.md), [black-and-white](tags/black-and-white.md) | <br>white-samurai |
|
||||
| <br>white-snow-and-a-tree<br>[light](tags/light.md) | <br>white-sphere<br>[black-and-white](tags/black-and-white.md) |
|
||||
| <br>wide-tokyonight-skyline | <br>windows-by-night<br>[dark](tags/dark.md) |
|
||||
| <br>windows-problems<br>[flat](tags/flat.md), [minimalist](tags/minimalist.md) | <br>winter-snow-covered-forest |
|
||||
@@ -0,0 +1,95 @@
|
||||
# Wallpapers
|
||||
|
||||
[1 Column](WALLPAPERS.md) · [2 Columns](WALLPAPERS-2COL.md) · [3 Columns](WALLPAPERS-3COL.md)
|
||||
|
||||
<details>
|
||||
<summary>Tags</summary>
|
||||
|
||||
- [animated](tags/animated.md)
|
||||
- [art](tags/art.md)
|
||||
- [black](tags/black.md)
|
||||
- [black-and-white](tags/black-and-white.md)
|
||||
- [blue](tags/blue.md)
|
||||
- [catppuccin](tags/catppuccin.md)
|
||||
- [dark](tags/dark.md)
|
||||
- [flat](tags/flat.md)
|
||||
- [green](tags/green.md)
|
||||
- [grey](tags/grey.md)
|
||||
- [light](tags/light.md)
|
||||
- [minimalist](tags/minimalist.md)
|
||||
- [orange](tags/orange.md)
|
||||
- [pink](tags/pink.md)
|
||||
- [pixel](tags/pixel.md)
|
||||
- [pixelart](tags/pixelart.md)
|
||||
- [purple](tags/purple.md)
|
||||
- [red](tags/red.md)
|
||||
- [rose](tags/rose.md)
|
||||
- [static](tags/static.md)
|
||||
- [white](tags/white.md)
|
||||
|
||||
</details>
|
||||
|
||||
| | | |
|
||||
|:---:|:---:|:---:|
|
||||
| <br>abstract<br>[green](tags/green.md) | <br>abstract-colorful | <br>a-car-and-a-cloud |
|
||||
| <br>acrylic | <br>alone-cloud<br>[dark](tags/dark.md) | <br>anime-skyline<br>[purple](tags/purple.md) |
|
||||
| <br>another-mountain | <br>another-one | <br>another-planet-with-grass<br>[blue](tags/blue.md) |
|
||||
| <br>another-sky<br>[light](tags/light.md) | <br>a-purple-planet<br>[purple](tags/purple.md) | <br>aquarium<br>[blue](tags/blue.md) |
|
||||
| <br>art-lake | <br>a-street-in-the-dark | <br>astronaut |
|
||||
| <br>aurora | <br>a-violet-blur | <br>barcode<br>[minimalist](tags/minimalist.md), [dark](tags/dark.md) |
|
||||
| <br>beach-landscape | <br>beach-path | <br>bike-and-a-cat |
|
||||
| <br>black-and-white-forest<br>[minimalist](tags/minimalist.md), [black-and-white](tags/black-and-white.md) | <br>black-grey-and-white | <br>black-moutains-and-a-city |
|
||||
| <br>black-oil<br>[dark](tags/dark.md) | <br>black-oil-2<br>[dark](tags/dark.md) | <br>black-oil-3<br>[dark](tags/dark.md) |
|
||||
| <br>black-waves<br>[black-and-white](tags/black-and-white.md) | <br>blue-galaxy-waves | <br>blue-waves<br>[blue](tags/blue.md) |
|
||||
| <br>boat-and-purple | <br>borrowed-time | <br>catstraunaut<br>[blue](tags/blue.md) |
|
||||
| <br>cat-vibin | <br>cat-watching-the-star<br>[pixelart](tags/pixelart.md), [purple](tags/purple.md), [animated](tags/animated.md) | <br>cat-watching-the-star<br>[pixelart](tags/pixelart.md), [purple](tags/purple.md), [static](tags/static.md) |
|
||||
| <br>cerf<br>[dark](tags/dark.md), [pixelart](tags/pixelart.md) | <br>city-at-night | <br>city-on-water |
|
||||
| <br>cloud-in-the-sky<br>[purple](tags/purple.md) | <br>clouds-dodge-the-moon-2 | <br>clouds-in-the-sky |
|
||||
| <br>clouds-in-the-sky-2 | <br>clouds-in-the-sky-3 | <br>clouds-in-the-sky-4<br>[light](tags/light.md) |
|
||||
| <br>coffee-shop | <br>colorful-planets | <br>couch<br>[orange](tags/orange.md) |
|
||||
| <br>cyber-ascii | <br>dark-forest<br>[dark](tags/dark.md) | <br>dark-magical-forest |
|
||||
| <br>dark-magical-forest-desktop-wallpaper | <br>dark-starfields | <br>degirled |
|
||||
| <br>diner-lonely-road | <br>drawing<br>[art](tags/art.md), [dark](tags/dark.md) | <br>dry-your-laundry |
|
||||
| <br>evil-corp-keyboard<br>[purple](tags/purple.md) | <br>flying-comets-clouds | <br>forest-bridge |
|
||||
| <br>forest-mountains-and-cloud<br>[dark](tags/dark.md), [black-and-white](tags/black-and-white.md) | <br>forest-under-the-clouds | <br>fractal |
|
||||
| <br>free-astronaut<br>[catppuccin](tags/catppuccin.md) | <br>fsociety<br>[red](tags/red.md) | <br>fsociety |
|
||||
| <br>fuck-society | <br>fuck-society-no-text | <br>fuji<br>[dark](tags/dark.md) |
|
||||
| <br>fuji<br>[light](tags/light.md) | <br>galaxy<br>[dark](tags/dark.md) | <br>galaxy<br>[pixelart](tags/pixelart.md), [purple](tags/purple.md) |
|
||||
| <br>galaxy-grey<br>[pixelart](tags/pixelart.md) | <br>girl-watching-the-cloud<br>[blue](tags/blue.md) | <br>glacier |
|
||||
| <br>glacier-2 | <br>glacier-3 | <br>glitches |
|
||||
| <br>gradient-pb | <br>grey-mountains<br>[grey](tags/grey.md) | <br>grey-road<br>[grey](tags/grey.md) |
|
||||
| <br>grue<br>[blue](tags/blue.md) | <br>hand-blocking-the-sun<br>[blue](tags/blue.md) | <br>hands<br>[black-and-white](tags/black-and-white.md) |
|
||||
| <br>hello-friend<br>[black-and-white](tags/black-and-white.md) | <br>horizon | <br>hue-1<br>[minimalist](tags/minimalist.md) |
|
||||
| <br>hue-2<br>[minimalist](tags/minimalist.md) | <br>hue-3<br>[minimalist](tags/minimalist.md) | <br>hue-4<br>[minimalist](tags/minimalist.md) |
|
||||
| <br>hue-5<br>[minimalist](tags/minimalist.md) | <br>hue-6<br>[minimalist](tags/minimalist.md), [dark](tags/dark.md) | <br>hue-7<br>[minimalist](tags/minimalist.md), [dark](tags/dark.md) |
|
||||
| <br>it-is-some-waves<br>[dark](tags/dark.md) | <br>it-is-the-ocean | <br>japan-houses |
|
||||
| <br>japan-moutains<br>[black-and-white](tags/black-and-white.md) | <br>lana-silhouette | <br>landscape<br>[purple](tags/purple.md) |
|
||||
| <br>lavender-cat<br>[purple](tags/purple.md) | <br>leef<br>[dark](tags/dark.md), [purple](tags/purple.md), [minimalist](tags/minimalist.md) | <br>lights-in-the-dark<br>[dark](tags/dark.md) |
|
||||
| <br>lofi-setup<br>[blue](tags/blue.md), [purple](tags/purple.md) | <br>lofi-urban<br>[blue](tags/blue.md) | <br>magma |
|
||||
| <br>medusa<br>[art](tags/art.md), [dark](tags/dark.md) | <br>moroco | <br>mosaic<br>[dark](tags/dark.md) |
|
||||
| <br>moutain | <br>moutains-and-a-lac<br>[black-and-white](tags/black-and-white.md) | <br>moutains-and-a-lac<br>[blue](tags/blue.md) |
|
||||
| <br>moutains-and-a-lac-night<br>[purple](tags/purple.md) | <br>moutains-and-an-orange-sun | <br>moutains-and-stars<br>[black](tags/black.md) |
|
||||
| <br>moutains-justin<br>[white](tags/white.md) | <br>moutains-on-top-of-clouds | <br>nasa-japan<br>[dark](tags/dark.md) |
|
||||
| <br>nepal | <br>night-fairycore-forest | <br>night-forest<br>[dark](tags/dark.md) |
|
||||
| <br>night-road<br>[purple](tags/purple.md) | <br>night-sky-with-snowflakes | <br>nix<br>[minimalist](tags/minimalist.md), [purple](tags/purple.md) |
|
||||
| <br>not-earth<br>[dark](tags/dark.md) | <br>nothin-to-see-here<br>[pink](tags/pink.md), [dark](tags/dark.md) | <br>oled-mountains |
|
||||
| <br>oneway-street<br>[purple](tags/purple.md) | <br>openbox<br>[dark](tags/dark.md) | <br>paint-loop<br>[art](tags/art.md) |
|
||||
| <br>pastel-car | <br>pastel-window | <br>pink-clouds |
|
||||
| <br>pink-sea | <br>pink-sky-moutains<br>[minimalist](tags/minimalist.md) | <br>purple-japan<br>[purple](tags/purple.md) |
|
||||
| <br>purple-moon<br>[purple](tags/purple.md) | <br>railroad-cat | <br>rain-pixel |
|
||||
| <br>rains-dark<br>[dark](tags/dark.md) | <br>rocket-launch<br>[light](tags/light.md) | <br>rocks-misty<br>[light](tags/light.md) |
|
||||
| <br>rose-sky<br>[rose](tags/rose.md) | <br>sakura<br>[pixelart](tags/pixelart.md), [light](tags/light.md), [animated](tags/animated.md) | <br>sakura<br>[pixelart](tags/pixelart.md), [light](tags/light.md), [static](tags/static.md) |
|
||||
| <br>samurai<br>[pixel](tags/pixel.md), [white](tags/white.md) | <br>saturn-rings | <br>sea<br>[blue](tags/blue.md) |
|
||||
| <br>sea-waves-pink-sunset | <br>snow-and-a-tree<br>[white](tags/white.md) | <br>snowy-japan-street |
|
||||
| <br>space<br>[dark](tags/dark.md) | <br>space-2 | <br>space-portal-galaxy |
|
||||
| <br>strange-forms<br>[blue](tags/blue.md), [purple](tags/purple.md) | <br>sun-is-shining | <br>sunny-winter-forest-river |
|
||||
| <br>sushi-keycap<br>[dark](tags/dark.md) | <br>swirls | <br>thats-a-lot-of-stars |
|
||||
| <br>the-cloud-is-hidding-the-moon<br>[dark](tags/dark.md) | <br>the-cpu<br>[animated](tags/animated.md), [black](tags/black.md) | <br>the-cpu<br>[static](tags/static.md), [black](tags/black.md) |
|
||||
| <br>the-cpu-border<br>[animated](tags/animated.md), [black](tags/black.md) | <br>the-cpu-border<br>[static](tags/static.md), [black](tags/black.md) | <br>time-to-ski<br>[blue](tags/blue.md) |
|
||||
| <br>tokyo | <br>tokyonight-skyline | <br>tokyo-skyscraper<br>[dark](tags/dark.md) |
|
||||
| <br>topology<br>[dark](tags/dark.md) | <br>train<br>[light](tags/light.md) | <br>train-and-lake<br>[blue](tags/blue.md) |
|
||||
| <br>train-on-a-bridge<br>[purple](tags/purple.md) | <br>under-the-bridge<br>[blue](tags/blue.md) | <br>vanilla<br>[pink](tags/pink.md), [purple](tags/purple.md) |
|
||||
| <br>vector-moutains<br>[blue](tags/blue.md), [dark](tags/dark.md) | <br>velvet-moutains<br>[minimalist](tags/minimalist.md), [dark](tags/dark.md) | <br>voyager-9 |
|
||||
| <br>warm-textured-gradient | <br>wave-dark<br>[minimalist](tags/minimalist.md), [black-and-white](tags/black-and-white.md) | <br>white-samurai |
|
||||
| <br>white-snow-and-a-tree<br>[light](tags/light.md) | <br>white-sphere<br>[black-and-white](tags/black-and-white.md) | <br>wide-tokyonight-skyline |
|
||||
| <br>windows-by-night<br>[dark](tags/dark.md) | <br>windows-problems<br>[flat](tags/flat.md), [minimalist](tags/minimalist.md) | <br>winter-snow-covered-forest |
|
||||
+217
-188
@@ -1,190 +1,219 @@
|
||||
# Wallpapers
|
||||
|
||||
| Wallpaper | Name |
|
||||
|-----------|------|
|
||||
|  | a-car-and-a-cloud |
|
||||
|  | a-purple-planet_purple |
|
||||
|  | a-street-in-the-dark |
|
||||
|  | a-violet-blur |
|
||||
|  | abstract-colorful |
|
||||
|  | abstract_green |
|
||||
|  | acrylic |
|
||||
|  | alone-cloud_dark |
|
||||
|  | anime-skyline_purple |
|
||||
|  | another-mountain |
|
||||
|  | another-one |
|
||||
|  | another-planet-with-grass_blue |
|
||||
|  | another-sky_light |
|
||||
|  | aquarium_blue |
|
||||
|  | art-lake |
|
||||
|  | astronaut |
|
||||
|  | aurora |
|
||||
|  | barcode_minimalist_dark |
|
||||
|  | beach-landscape |
|
||||
|  | beach-path |
|
||||
|  | bike-and-a-cat |
|
||||
|  | black-and-white-forest_minimalist_black-and-white |
|
||||
|  | black-grey-and-white |
|
||||
|  | black-moutains-and-a-city |
|
||||
|  | black-oil-2_dark |
|
||||
|  | black-oil-3_dark |
|
||||
|  | black-oil_dark |
|
||||
|  | black-waves_black-and-white |
|
||||
|  | blue-galaxy-waves |
|
||||
|  | blue-waves_blue |
|
||||
|  | boat-and-purple |
|
||||
|  | borrowed-time |
|
||||
|  | cat-vibin |
|
||||
|  | cat-watching-the-star_pixelart_purple_static |
|
||||
|  | catstraunaut_blue |
|
||||
|  | cerf_dark_pixelart |
|
||||
|  | city-at-night |
|
||||
|  | city-on-water |
|
||||
|  | cloud-in-the-sky_purple |
|
||||
|  | clouds-dodge-the-moon-2 |
|
||||
|  | clouds-in-the-sky-2 |
|
||||
|  | clouds-in-the-sky-3 |
|
||||
|  | clouds-in-the-sky-4_light |
|
||||
|  | clouds-in-the-sky |
|
||||
|  | coffee-shop |
|
||||
|  | colorful-planets |
|
||||
|  | couch_orange |
|
||||
|  | cyber-ascii |
|
||||
|  | dark-forest_dark |
|
||||
|  | dark-magical-forest-desktop-wallpaper |
|
||||
|  | dark-magical-forest |
|
||||
|  | dark-starfields |
|
||||
|  | degirled |
|
||||
|  | diner-lonely-road |
|
||||
|  | drawing_art_dark |
|
||||
|  | dry-your-laundry |
|
||||
|  | evil-corp-keyboard_purple |
|
||||
|  | flying-comets-clouds |
|
||||
|  | forest-bridge |
|
||||
|  | forest-mountains-and-cloud_dark_black-and-white |
|
||||
|  | forest-under-the-clouds |
|
||||
|  | fractal |
|
||||
|  | free-astronaut_catppuccin |
|
||||
|  | fsociety |
|
||||
|  | fsociety_red |
|
||||
|  | fuck-society-no-text |
|
||||
|  | fuck-society |
|
||||
|  | fuji_dark |
|
||||
|  | fuji_light |
|
||||
|  | galaxy-grey_pixelart |
|
||||
|  | galaxy_dark |
|
||||
|  | galaxy_pixelart_purple |
|
||||
|  | girl-watching-the-cloud_blue |
|
||||
|  | glacier-2 |
|
||||
|  | glacier-3 |
|
||||
|  | glacier |
|
||||
|  | glitches |
|
||||
|  | gradient-pb |
|
||||
|  | grey-mountains_grey |
|
||||
|  | grey-road_grey |
|
||||
|  | grue_blue |
|
||||
|  | hand-blocking-the-sun_blue |
|
||||
|  | hands_black-and-white |
|
||||
|  | hello-friend_black-and-white |
|
||||
|  | horizon |
|
||||
|  | hue-1_minimalist |
|
||||
|  | hue-2_minimalist |
|
||||
|  | hue-3_minimalist |
|
||||
|  | hue-4_minimalist |
|
||||
|  | hue-5_minimalist |
|
||||
|  | hue-6_minimalist_dark |
|
||||
|  | hue-7_minimalist_dark |
|
||||
|  | it-is-some-waves_dark |
|
||||
|  | it-is-the-ocean |
|
||||
|  | japan-houses |
|
||||
|  | japan-moutains_black-and-white |
|
||||
|  | lana-silhouette |
|
||||
|  | landscape_purple |
|
||||
|  | lavender-cat_purple |
|
||||
|  | leef_dark_purple_minimalist |
|
||||
|  | lights-in-the-dark_dark |
|
||||
|  | lofi-setup_blue_purple |
|
||||
|  | lofi-urban_blue |
|
||||
|  | magma |
|
||||
|  | medusa_art_dark |
|
||||
|  | moroco |
|
||||
|  | mosaic_dark |
|
||||
|  | moutain |
|
||||
|  | moutains-and-a-lac-night_purple |
|
||||
|  | moutains-and-a-lac_black-and-white |
|
||||
|  | moutains-and-a-lac_blue |
|
||||
|  | moutains-and-an-orange-sun |
|
||||
|  | moutains-and-stars_black |
|
||||
|  | moutains-justin_white |
|
||||
|  | moutains-on-top-of-clouds |
|
||||
|  | nasa-japan_dark |
|
||||
|  | nepal |
|
||||
|  | night-fairycore-forest |
|
||||
|  | night-forest_dark |
|
||||
|  | night-road_purple |
|
||||
|  | night-sky-with-snowflakes |
|
||||
|  | nix_minimalist_purple |
|
||||
|  | not-earth_dark |
|
||||
|  | nothin-to-see-here_pink_dark |
|
||||
|  | oled-mountains |
|
||||
|  | oneway-street_purple |
|
||||
|  | openbox_dark |
|
||||
|  | paint-loop_art |
|
||||
|  | pastel-car |
|
||||
|  | pastel-window |
|
||||
|  | pink-clouds |
|
||||
|  | pink-sea |
|
||||
|  | pink-sky-moutains_minimalist |
|
||||
|  | purple-japan_purple |
|
||||
|  | purple-moon_purple |
|
||||
|  | railroad-cat |
|
||||
|  | rain-pixel |
|
||||
|  | rains-dark_dark |
|
||||
|  | rocket-launch_light |
|
||||
|  | rocks-misty_light |
|
||||
|  | rose-sky_rose |
|
||||
|  | sakura_pixelart_light_static |
|
||||
|  | samurai_pixel_white |
|
||||
|  | saturn-rings |
|
||||
|  | sea-waves-pink-sunset |
|
||||
|  | sea_blue |
|
||||
|  | snow-and-a-tree_white |
|
||||
|  | snowy-japan-street |
|
||||
|  | space-2 |
|
||||
|  | space-portal-galaxy |
|
||||
|  | space_dark |
|
||||
|  | strange-forms_blue_purple |
|
||||
|  | sun-is-shining |
|
||||
|  | sunny-winter-forest-river |
|
||||
|  | sushi-keycap_dark |
|
||||
|  | swirls |
|
||||
|  | thats-a-lot-of-stars |
|
||||
|  | the-cloud-is-hidding-the-moon_dark |
|
||||
|  | the-cpu-border_static_black |
|
||||
|  | the-cpu_static_black |
|
||||
|  | time-to-ski_blue |
|
||||
|  | tokyo-skyscraper_dark |
|
||||
|  | tokyo |
|
||||
|  | tokyonight-skyline |
|
||||
|  | topology_dark |
|
||||
|  | train-and-lake_blue |
|
||||
|  | train-on-a-bridge_purple |
|
||||
|  | train_light |
|
||||
|  | under-the-bridge_blue |
|
||||
|  | vanilla_pink_purple |
|
||||
|  | vector-moutains_blue_dark |
|
||||
|  | velvet-moutains_minimalist_dark |
|
||||
|  | voyager-9 |
|
||||
|  | warm-textured-gradient |
|
||||
|  | wave-dark_minimalist_black-and-white |
|
||||
|  | white-samurai |
|
||||
|  | white-snow-and-a-tree_light |
|
||||
|  | white-sphere_black-and-white |
|
||||
|  | wide-tokyonight-skyline |
|
||||
|  | windows-by-night_dark |
|
||||
|  | windows-problems_flat_minimalist |
|
||||
|  | winter-snow-covered-forest |
|
||||
|  | cat-watching-the-star_pixelart_purple_animated |
|
||||
|  | sakura_pixelart_light_animated |
|
||||
|  | the-cpu-border_animated_black |
|
||||
|  | the-cpu_animated_black |
|
||||
[1 Column](WALLPAPERS.md) · [2 Columns](WALLPAPERS-2COL.md) · [3 Columns](WALLPAPERS-3COL.md)
|
||||
|
||||
<details>
|
||||
<summary>Tags</summary>
|
||||
|
||||
- [animated](tags/animated.md)
|
||||
- [art](tags/art.md)
|
||||
- [black](tags/black.md)
|
||||
- [black-and-white](tags/black-and-white.md)
|
||||
- [blue](tags/blue.md)
|
||||
- [catppuccin](tags/catppuccin.md)
|
||||
- [dark](tags/dark.md)
|
||||
- [flat](tags/flat.md)
|
||||
- [green](tags/green.md)
|
||||
- [grey](tags/grey.md)
|
||||
- [light](tags/light.md)
|
||||
- [minimalist](tags/minimalist.md)
|
||||
- [orange](tags/orange.md)
|
||||
- [pink](tags/pink.md)
|
||||
- [pixel](tags/pixel.md)
|
||||
- [pixelart](tags/pixelart.md)
|
||||
- [purple](tags/purple.md)
|
||||
- [red](tags/red.md)
|
||||
- [rose](tags/rose.md)
|
||||
- [static](tags/static.md)
|
||||
- [white](tags/white.md)
|
||||
|
||||
</details>
|
||||
|
||||
| Preview | Name | Tags |
|
||||
|---------|------|------|
|
||||
|  | abstract | [green](tags/green.md) |
|
||||
|  | abstract-colorful | |
|
||||
|  | a-car-and-a-cloud | |
|
||||
|  | acrylic | |
|
||||
|  | alone-cloud | [dark](tags/dark.md) |
|
||||
|  | anime-skyline | [purple](tags/purple.md) |
|
||||
|  | another-mountain | |
|
||||
|  | another-one | |
|
||||
|  | another-planet-with-grass | [blue](tags/blue.md) |
|
||||
|  | another-sky | [light](tags/light.md) |
|
||||
|  | a-purple-planet | [purple](tags/purple.md) |
|
||||
|  | aquarium | [blue](tags/blue.md) |
|
||||
|  | art-lake | |
|
||||
|  | a-street-in-the-dark | |
|
||||
|  | astronaut | |
|
||||
|  | aurora | |
|
||||
|  | a-violet-blur | |
|
||||
|  | barcode | [minimalist](tags/minimalist.md), [dark](tags/dark.md) |
|
||||
|  | beach-landscape | |
|
||||
|  | beach-path | |
|
||||
|  | bike-and-a-cat | |
|
||||
|  | black-and-white-forest | [minimalist](tags/minimalist.md), [black-and-white](tags/black-and-white.md) |
|
||||
|  | black-grey-and-white | |
|
||||
|  | black-moutains-and-a-city | |
|
||||
|  | black-oil | [dark](tags/dark.md) |
|
||||
|  | black-oil-2 | [dark](tags/dark.md) |
|
||||
|  | black-oil-3 | [dark](tags/dark.md) |
|
||||
|  | black-waves | [black-and-white](tags/black-and-white.md) |
|
||||
|  | blue-galaxy-waves | |
|
||||
|  | blue-waves | [blue](tags/blue.md) |
|
||||
|  | boat-and-purple | |
|
||||
|  | borrowed-time | |
|
||||
|  | catstraunaut | [blue](tags/blue.md) |
|
||||
|  | cat-vibin | |
|
||||
|  | cat-watching-the-star | [pixelart](tags/pixelart.md), [purple](tags/purple.md), [animated](tags/animated.md) |
|
||||
|  | cat-watching-the-star | [pixelart](tags/pixelart.md), [purple](tags/purple.md), [static](tags/static.md) |
|
||||
|  | cerf | [dark](tags/dark.md), [pixelart](tags/pixelart.md) |
|
||||
|  | city-at-night | |
|
||||
|  | city-on-water | |
|
||||
|  | cloud-in-the-sky | [purple](tags/purple.md) |
|
||||
|  | clouds-dodge-the-moon-2 | |
|
||||
|  | clouds-in-the-sky | |
|
||||
|  | clouds-in-the-sky-2 | |
|
||||
|  | clouds-in-the-sky-3 | |
|
||||
|  | clouds-in-the-sky-4 | [light](tags/light.md) |
|
||||
|  | coffee-shop | |
|
||||
|  | colorful-planets | |
|
||||
|  | couch | [orange](tags/orange.md) |
|
||||
|  | cyber-ascii | |
|
||||
|  | dark-forest | [dark](tags/dark.md) |
|
||||
|  | dark-magical-forest | |
|
||||
|  | dark-magical-forest-desktop-wallpaper | |
|
||||
|  | dark-starfields | |
|
||||
|  | degirled | |
|
||||
|  | diner-lonely-road | |
|
||||
|  | drawing | [art](tags/art.md), [dark](tags/dark.md) |
|
||||
|  | dry-your-laundry | |
|
||||
|  | evil-corp-keyboard | [purple](tags/purple.md) |
|
||||
|  | flying-comets-clouds | |
|
||||
|  | forest-bridge | |
|
||||
|  | forest-mountains-and-cloud | [dark](tags/dark.md), [black-and-white](tags/black-and-white.md) |
|
||||
|  | forest-under-the-clouds | |
|
||||
|  | fractal | |
|
||||
|  | free-astronaut | [catppuccin](tags/catppuccin.md) |
|
||||
|  | fsociety | [red](tags/red.md) |
|
||||
|  | fsociety | |
|
||||
|  | fuck-society | |
|
||||
|  | fuck-society-no-text | |
|
||||
|  | fuji | [dark](tags/dark.md) |
|
||||
|  | fuji | [light](tags/light.md) |
|
||||
|  | galaxy | [dark](tags/dark.md) |
|
||||
|  | galaxy | [pixelart](tags/pixelart.md), [purple](tags/purple.md) |
|
||||
|  | galaxy-grey | [pixelart](tags/pixelart.md) |
|
||||
|  | girl-watching-the-cloud | [blue](tags/blue.md) |
|
||||
|  | glacier | |
|
||||
|  | glacier-2 | |
|
||||
|  | glacier-3 | |
|
||||
|  | glitches | |
|
||||
|  | gradient-pb | |
|
||||
|  | grey-mountains | [grey](tags/grey.md) |
|
||||
|  | grey-road | [grey](tags/grey.md) |
|
||||
|  | grue | [blue](tags/blue.md) |
|
||||
|  | hand-blocking-the-sun | [blue](tags/blue.md) |
|
||||
|  | hands | [black-and-white](tags/black-and-white.md) |
|
||||
|  | hello-friend | [black-and-white](tags/black-and-white.md) |
|
||||
|  | horizon | |
|
||||
|  | hue-1 | [minimalist](tags/minimalist.md) |
|
||||
|  | hue-2 | [minimalist](tags/minimalist.md) |
|
||||
|  | hue-3 | [minimalist](tags/minimalist.md) |
|
||||
|  | hue-4 | [minimalist](tags/minimalist.md) |
|
||||
|  | hue-5 | [minimalist](tags/minimalist.md) |
|
||||
|  | hue-6 | [minimalist](tags/minimalist.md), [dark](tags/dark.md) |
|
||||
|  | hue-7 | [minimalist](tags/minimalist.md), [dark](tags/dark.md) |
|
||||
|  | it-is-some-waves | [dark](tags/dark.md) |
|
||||
|  | it-is-the-ocean | |
|
||||
|  | japan-houses | |
|
||||
|  | japan-moutains | [black-and-white](tags/black-and-white.md) |
|
||||
|  | lana-silhouette | |
|
||||
|  | landscape | [purple](tags/purple.md) |
|
||||
|  | lavender-cat | [purple](tags/purple.md) |
|
||||
|  | leef | [dark](tags/dark.md), [purple](tags/purple.md), [minimalist](tags/minimalist.md) |
|
||||
|  | lights-in-the-dark | [dark](tags/dark.md) |
|
||||
|  | lofi-setup | [blue](tags/blue.md), [purple](tags/purple.md) |
|
||||
|  | lofi-urban | [blue](tags/blue.md) |
|
||||
|  | magma | |
|
||||
|  | medusa | [art](tags/art.md), [dark](tags/dark.md) |
|
||||
|  | moroco | |
|
||||
|  | mosaic | [dark](tags/dark.md) |
|
||||
|  | moutain | |
|
||||
|  | moutains-and-a-lac | [black-and-white](tags/black-and-white.md) |
|
||||
|  | moutains-and-a-lac | [blue](tags/blue.md) |
|
||||
|  | moutains-and-a-lac-night | [purple](tags/purple.md) |
|
||||
|  | moutains-and-an-orange-sun | |
|
||||
|  | moutains-and-stars | [black](tags/black.md) |
|
||||
|  | moutains-justin | [white](tags/white.md) |
|
||||
|  | moutains-on-top-of-clouds | |
|
||||
|  | nasa-japan | [dark](tags/dark.md) |
|
||||
|  | nepal | |
|
||||
|  | night-fairycore-forest | |
|
||||
|  | night-forest | [dark](tags/dark.md) |
|
||||
|  | night-road | [purple](tags/purple.md) |
|
||||
|  | night-sky-with-snowflakes | |
|
||||
|  | nix | [minimalist](tags/minimalist.md), [purple](tags/purple.md) |
|
||||
|  | not-earth | [dark](tags/dark.md) |
|
||||
|  | nothin-to-see-here | [pink](tags/pink.md), [dark](tags/dark.md) |
|
||||
|  | oled-mountains | |
|
||||
|  | oneway-street | [purple](tags/purple.md) |
|
||||
|  | openbox | [dark](tags/dark.md) |
|
||||
|  | paint-loop | [art](tags/art.md) |
|
||||
|  | pastel-car | |
|
||||
|  | pastel-window | |
|
||||
|  | pink-clouds | |
|
||||
|  | pink-sea | |
|
||||
|  | pink-sky-moutains | [minimalist](tags/minimalist.md) |
|
||||
|  | purple-japan | [purple](tags/purple.md) |
|
||||
|  | purple-moon | [purple](tags/purple.md) |
|
||||
|  | railroad-cat | |
|
||||
|  | rain-pixel | |
|
||||
|  | rains-dark | [dark](tags/dark.md) |
|
||||
|  | rocket-launch | [light](tags/light.md) |
|
||||
|  | rocks-misty | [light](tags/light.md) |
|
||||
|  | rose-sky | [rose](tags/rose.md) |
|
||||
|  | sakura | [pixelart](tags/pixelart.md), [light](tags/light.md), [animated](tags/animated.md) |
|
||||
|  | sakura | [pixelart](tags/pixelart.md), [light](tags/light.md), [static](tags/static.md) |
|
||||
|  | samurai | [pixel](tags/pixel.md), [white](tags/white.md) |
|
||||
|  | saturn-rings | |
|
||||
|  | sea | [blue](tags/blue.md) |
|
||||
|  | sea-waves-pink-sunset | |
|
||||
|  | snow-and-a-tree | [white](tags/white.md) |
|
||||
|  | snowy-japan-street | |
|
||||
|  | space | [dark](tags/dark.md) |
|
||||
|  | space-2 | |
|
||||
|  | space-portal-galaxy | |
|
||||
|  | strange-forms | [blue](tags/blue.md), [purple](tags/purple.md) |
|
||||
|  | sun-is-shining | |
|
||||
|  | sunny-winter-forest-river | |
|
||||
|  | sushi-keycap | [dark](tags/dark.md) |
|
||||
|  | swirls | |
|
||||
|  | thats-a-lot-of-stars | |
|
||||
|  | the-cloud-is-hidding-the-moon | [dark](tags/dark.md) |
|
||||
|  | the-cpu | [animated](tags/animated.md), [black](tags/black.md) |
|
||||
|  | the-cpu | [static](tags/static.md), [black](tags/black.md) |
|
||||
|  | the-cpu-border | [animated](tags/animated.md), [black](tags/black.md) |
|
||||
|  | the-cpu-border | [static](tags/static.md), [black](tags/black.md) |
|
||||
|  | time-to-ski | [blue](tags/blue.md) |
|
||||
|  | tokyo | |
|
||||
|  | tokyonight-skyline | |
|
||||
|  | tokyo-skyscraper | [dark](tags/dark.md) |
|
||||
|  | topology | [dark](tags/dark.md) |
|
||||
|  | train | [light](tags/light.md) |
|
||||
|  | train-and-lake | [blue](tags/blue.md) |
|
||||
|  | train-on-a-bridge | [purple](tags/purple.md) |
|
||||
|  | under-the-bridge | [blue](tags/blue.md) |
|
||||
|  | vanilla | [pink](tags/pink.md), [purple](tags/purple.md) |
|
||||
|  | vector-moutains | [blue](tags/blue.md), [dark](tags/dark.md) |
|
||||
|  | velvet-moutains | [minimalist](tags/minimalist.md), [dark](tags/dark.md) |
|
||||
|  | voyager-9 | |
|
||||
|  | warm-textured-gradient | |
|
||||
|  | wave-dark | [minimalist](tags/minimalist.md), [black-and-white](tags/black-and-white.md) |
|
||||
|  | white-samurai | |
|
||||
|  | white-snow-and-a-tree | [light](tags/light.md) |
|
||||
|  | white-sphere | [black-and-white](tags/black-and-white.md) |
|
||||
|  | wide-tokyonight-skyline | |
|
||||
|  | windows-by-night | [dark](tags/dark.md) |
|
||||
|  | windows-problems | [flat](tags/flat.md), [minimalist](tags/minimalist.md) |
|
||||
|  | winter-snow-covered-forest | |
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
node_modules
|
||||
|
||||
# Output
|
||||
.output
|
||||
.vercel
|
||||
.netlify
|
||||
.wrangler
|
||||
/.svelte-kit
|
||||
/build
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Env
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
!.env.test
|
||||
|
||||
# Vite
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
@@ -1 +0,0 @@
|
||||
engine-strict=true
|
||||
@@ -1,4 +0,0 @@
|
||||
# Package Managers
|
||||
package-lock.json
|
||||
pnpm-lock.yaml
|
||||
yarn.lock
|
||||
@@ -1,15 +0,0 @@
|
||||
{
|
||||
"useTabs": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100,
|
||||
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": "*.svelte",
|
||||
"options": {
|
||||
"parser": "svelte"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
# sv
|
||||
|
||||
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
|
||||
|
||||
## Creating a project
|
||||
|
||||
If you're seeing this, you've probably already done this step. Congrats!
|
||||
|
||||
```bash
|
||||
# create a new project in the current directory
|
||||
npx sv create
|
||||
|
||||
# create a new project in my-app
|
||||
npx sv create my-app
|
||||
```
|
||||
|
||||
## Developing
|
||||
|
||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
|
||||
# or start the server and open the app in a new browser tab
|
||||
npm run dev -- --open
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To create a production version of your app:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
You can preview the production build with `npm run preview`.
|
||||
|
||||
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
|
||||
@@ -1,17 +0,0 @@
|
||||
{
|
||||
"$schema": "https://next.shadcn-svelte.com/schema.json",
|
||||
"style": "default",
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.ts",
|
||||
"css": "src/app.css",
|
||||
"baseColor": "slate"
|
||||
},
|
||||
"aliases": {
|
||||
"components": "$lib/components",
|
||||
"utils": "$lib/utils",
|
||||
"ui": "$lib/components/ui",
|
||||
"hooks": "$lib/hooks"
|
||||
},
|
||||
"typescript": true,
|
||||
"registry": "https://next.shadcn-svelte.com/registry"
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import prettier from 'eslint-config-prettier';
|
||||
import js from '@eslint/js';
|
||||
import { includeIgnoreFile } from '@eslint/compat';
|
||||
import svelte from 'eslint-plugin-svelte';
|
||||
import globals from 'globals';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import ts from 'typescript-eslint';
|
||||
const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
|
||||
|
||||
export default ts.config(
|
||||
includeIgnoreFile(gitignorePath),
|
||||
js.configs.recommended,
|
||||
...ts.configs.recommended,
|
||||
...svelte.configs['flat/recommended'],
|
||||
prettier,
|
||||
...svelte.configs['flat/prettier'],
|
||||
{
|
||||
languageOptions: {
|
||||
globals: {
|
||||
...globals.browser,
|
||||
...globals.node
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
files: ['**/*.svelte'],
|
||||
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
parser: ts.parser
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -1,34 +0,0 @@
|
||||
import { readdirSync, readFileSync, statSync, writeFileSync } from 'fs';
|
||||
import { join, extname } from 'path';
|
||||
import { imageSize } from 'image-size';
|
||||
|
||||
const staticDir = './static/wallpapers';
|
||||
const outputFile = './static/files.json';
|
||||
|
||||
function getFiles(dir) {
|
||||
return readdirSync(dir)
|
||||
.filter(file => !file.startsWith('.'))
|
||||
.map(file => {
|
||||
const filePath = join(dir, file);
|
||||
const stats = statSync(filePath);
|
||||
const sizeInMB = (stats.size / (1024 * 1024)).toFixed(2); // Taille en MB
|
||||
|
||||
let dimensions = { width: 0, height: 0 };
|
||||
if (['.jpg', '.png', '.gif'].includes(extname(file).toLowerCase())) {
|
||||
const buffer = readFileSync(filePath);
|
||||
dimensions = imageSize(buffer);
|
||||
}
|
||||
|
||||
return {
|
||||
filename: file,
|
||||
size: sizeInMB,
|
||||
width: dimensions.width || 0,
|
||||
height: dimensions.height || 0
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
const files = getFiles(staticDir);
|
||||
writeFileSync(outputFile, JSON.stringify(files, null, 2));
|
||||
|
||||
console.log(`✅ Liste des fichiers générée dans ${outputFile}`);
|
||||
@@ -1,60 +0,0 @@
|
||||
{
|
||||
"name": "app",
|
||||
"private": false,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"prebuild": "node generateFileList.js",
|
||||
"preview": "vite preview",
|
||||
"prepare": "svelte-kit sync || echo ''",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"format": "prettier --write .",
|
||||
"lint": "prettier --check . && eslint ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/compat": "^1.2.5",
|
||||
"@eslint/js": "^9.18.0",
|
||||
"@internationalized/date": "^3.7.0",
|
||||
"@lucide/svelte": "^0.483.0",
|
||||
"@sveltejs/adapter-static": "^3.0.8",
|
||||
"@sveltejs/kit": "^2.60.1",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
||||
"@tailwindcss/container-queries": "^0.1.1",
|
||||
"@tailwindcss/forms": "^0.5.10",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"bits-ui": "^1.3.13",
|
||||
"clsx": "^2.1.1",
|
||||
"embla-carousel-svelte": "^8.5.2",
|
||||
"eslint": "^9.18.0",
|
||||
"eslint-config-prettier": "^10.0.1",
|
||||
"eslint-plugin-svelte": "^2.46.1",
|
||||
"formsnap": "^2.0.0",
|
||||
"globals": "^15.14.0",
|
||||
"mode-watcher": "^0.5.1",
|
||||
"paneforge": "1.0.0-next.4",
|
||||
"prettier": "^3.4.2",
|
||||
"prettier-plugin-svelte": "^3.3.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.10",
|
||||
"svelte": "^5.55.7",
|
||||
"svelte-check": "^4.0.0",
|
||||
"svelte-sonner": "^0.3.28",
|
||||
"sveltekit-superforms": "^2.27.4",
|
||||
"tailwind-merge": "^3.0.2",
|
||||
"tailwind-variants": "^1.0.0",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"typescript": "^5.0.0",
|
||||
"typescript-eslint": "^8.20.0",
|
||||
"vaul-svelte": "1.0.0-next.6",
|
||||
"vite": "^6.4.2",
|
||||
"zod": "^3.24.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.18.0",
|
||||
"image-size": "^2.0.2"
|
||||
}
|
||||
}
|
||||
Generated
-3917
File diff suppressed because it is too large
Load Diff
@@ -1,6 +0,0 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {}
|
||||
}
|
||||
};
|
||||
-116
@@ -1,116 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 98%;
|
||||
--foreground: 240 8% 5%;
|
||||
--card: 240 8% 97%;
|
||||
--card-foreground: 240 8% 5%;
|
||||
--popover: 240 8% 97%;
|
||||
--popover-foreground: 240 8% 5%;
|
||||
--primary: 253 90% 16%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 270 6% 93%;
|
||||
--secondary-foreground: 240 8% 5%;
|
||||
--muted: 270 6% 93%;
|
||||
--muted-foreground: 253 6% 45%;
|
||||
--accent: 270 6% 93%;
|
||||
--accent-foreground: 240 8% 5%;
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 6% 90%;
|
||||
--input: 260 7% 82%;
|
||||
--ring: 253 24% 74%;
|
||||
--radius: 0.5rem;
|
||||
|
||||
--sidebar-background: 240 8% 97%;
|
||||
--sidebar-foreground: 240 8% 5%;
|
||||
--sidebar-primary: 253 90% 16%;
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
--sidebar-accent: 270 6% 93%;
|
||||
--sidebar-accent-foreground: 240 8% 5%;
|
||||
--sidebar-border: 240 6% 90%;
|
||||
--sidebar-ring: 253 24% 74%;
|
||||
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 240 3% 6%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 270 6% 7%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 270 6% 7%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 249 16% 50%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 240 5% 15%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 250 5% 22%;
|
||||
--muted-foreground: 250 5% 49%;
|
||||
--accent: 249 13% 20%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 260 5% 12%;
|
||||
--input: 240 4% 18%;
|
||||
--ring: 248 16% 40%;
|
||||
|
||||
--sidebar-background: 270 6% 7%;
|
||||
--sidebar-foreground: 0 0% 98%;
|
||||
--sidebar-primary: 249 16% 50%;
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
--sidebar-accent: 249 13% 20%;
|
||||
--sidebar-accent-foreground: 0 0% 98%;
|
||||
--sidebar-border: 260 5% 12%;
|
||||
--sidebar-ring: 248 16% 40%;
|
||||
}
|
||||
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply scroll-m-20 text-4xl sm:text-5xl font-extrabold tracking-tight lg:text-5xl mb-6;
|
||||
}
|
||||
h2 {
|
||||
@apply scroll-m-20 text-3xl sm:text-4xl font-semibold tracking-tight transition-colors my-10 mb-5;
|
||||
}
|
||||
h3 {
|
||||
@apply scroll-m-20 text-2xl font-semibold tracking-tight transition-colors mb-4;
|
||||
}
|
||||
h4 {
|
||||
@apply scroll-m-20 text-xl font-semibold tracking-tight transition-colors mb-2;
|
||||
}
|
||||
h5 {
|
||||
@apply scroll-m-20 text-lg font-semibold tracking-tight transition-colors;
|
||||
}
|
||||
h6 {
|
||||
@apply scroll-m-20 text-base font-semibold tracking-tight transition-colors;
|
||||
}
|
||||
hr {
|
||||
@apply my-6 mx-auto w-4/5;
|
||||
}
|
||||
p {
|
||||
@apply leading-7;
|
||||
}
|
||||
p > a {
|
||||
@apply opacity-75 transition-opacity hover:underline underline-offset-4;
|
||||
}
|
||||
p > a.active {
|
||||
@apply opacity-100 font-medium;
|
||||
}
|
||||
blockquote {
|
||||
@apply mt-6 border-l-2 pl-6 italic;
|
||||
}
|
||||
code {
|
||||
@apply bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
|
||||
}
|
||||
main {
|
||||
@apply mx-auto w-full px-4 py-2;
|
||||
}
|
||||
}
|
||||
Vendored
-13
@@ -1,13 +0,0 @@
|
||||
// See https://svelte.dev/docs/kit/types#app.d.ts
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
@@ -1,13 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script defer src="https://umami.hadi.icu/script.js" data-website-id="4d6cb902-31eb-45b8-93eb-a7552e83fd2a"></script>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,24 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
|
||||
</script>
|
||||
|
||||
<AccordionPrimitive.Content
|
||||
bind:ref
|
||||
class={cn(
|
||||
"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
>
|
||||
<div class="pb-4 pt-0">
|
||||
{@render children?.()}
|
||||
</div>
|
||||
</AccordionPrimitive.Content>
|
||||
@@ -1,12 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Accordion as AccordionPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: AccordionPrimitive.ItemProps = $props();
|
||||
</script>
|
||||
|
||||
<AccordionPrimitive.Item bind:ref class={cn("border-b", className)} {...restProps} />
|
||||
@@ -1,29 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
|
||||
import ChevronDown from "@lucide/svelte/icons/chevron-down";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
level = 3,
|
||||
children,
|
||||
...restProps
|
||||
}: WithoutChild<AccordionPrimitive.TriggerProps> & {
|
||||
level?: AccordionPrimitive.HeaderProps["level"];
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<AccordionPrimitive.Header {level} class="flex">
|
||||
<AccordionPrimitive.Trigger
|
||||
bind:ref
|
||||
class={cn(
|
||||
"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
<ChevronDown class="size-4 shrink-0 transition-transform duration-200" />
|
||||
</AccordionPrimitive.Trigger>
|
||||
</AccordionPrimitive.Header>
|
||||
@@ -1,17 +0,0 @@
|
||||
import { Accordion as AccordionPrimitive } from "bits-ui";
|
||||
import Content from "./accordion-content.svelte";
|
||||
import Item from "./accordion-item.svelte";
|
||||
import Trigger from "./accordion-trigger.svelte";
|
||||
const Root = AccordionPrimitive.Root;
|
||||
|
||||
export {
|
||||
Root,
|
||||
Content,
|
||||
Item,
|
||||
Trigger,
|
||||
//
|
||||
Root as Accordion,
|
||||
Content as AccordionContent,
|
||||
Item as AccordionItem,
|
||||
Trigger as AccordionTrigger,
|
||||
};
|
||||
@@ -1,13 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
|
||||
import { buttonVariants } from "$lib/components/ui/button/index.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: AlertDialogPrimitive.ActionProps = $props();
|
||||
</script>
|
||||
|
||||
<AlertDialogPrimitive.Action bind:ref class={cn(buttonVariants(), className)} {...restProps} />
|
||||
@@ -1,17 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
|
||||
import { buttonVariants } from "$lib/components/ui/button/index.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: AlertDialogPrimitive.CancelProps = $props();
|
||||
</script>
|
||||
|
||||
<AlertDialogPrimitive.Cancel
|
||||
bind:ref
|
||||
class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
|
||||
{...restProps}
|
||||
/>
|
||||
@@ -1,26 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from "bits-ui";
|
||||
import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
portalProps,
|
||||
...restProps
|
||||
}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
|
||||
portalProps?: AlertDialogPrimitive.PortalProps;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<AlertDialogPrimitive.Portal {...portalProps}>
|
||||
<AlertDialogOverlay />
|
||||
<AlertDialogPrimitive.Content
|
||||
bind:ref
|
||||
class={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
/>
|
||||
</AlertDialogPrimitive.Portal>
|
||||
@@ -1,16 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: AlertDialogPrimitive.DescriptionProps = $props();
|
||||
</script>
|
||||
|
||||
<AlertDialogPrimitive.Description
|
||||
bind:ref
|
||||
class={cn("text-muted-foreground text-sm", className)}
|
||||
{...restProps}
|
||||
/>
|
||||
@@ -1,20 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
@@ -1,20 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
@@ -1,19 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: AlertDialogPrimitive.OverlayProps = $props();
|
||||
</script>
|
||||
|
||||
<AlertDialogPrimitive.Overlay
|
||||
bind:ref
|
||||
class={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
/>
|
||||
@@ -1,18 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
level = 3,
|
||||
...restProps
|
||||
}: AlertDialogPrimitive.TitleProps = $props();
|
||||
</script>
|
||||
|
||||
<AlertDialogPrimitive.Title
|
||||
bind:ref
|
||||
class={cn("text-lg font-semibold", className)}
|
||||
{level}
|
||||
{...restProps}
|
||||
/>
|
||||
@@ -1,39 +0,0 @@
|
||||
import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
|
||||
import Title from "./alert-dialog-title.svelte";
|
||||
import Action from "./alert-dialog-action.svelte";
|
||||
import Cancel from "./alert-dialog-cancel.svelte";
|
||||
import Footer from "./alert-dialog-footer.svelte";
|
||||
import Header from "./alert-dialog-header.svelte";
|
||||
import Overlay from "./alert-dialog-overlay.svelte";
|
||||
import Content from "./alert-dialog-content.svelte";
|
||||
import Description from "./alert-dialog-description.svelte";
|
||||
|
||||
const Root = AlertDialogPrimitive.Root;
|
||||
const Trigger = AlertDialogPrimitive.Trigger;
|
||||
const Portal = AlertDialogPrimitive.Portal;
|
||||
|
||||
export {
|
||||
Root,
|
||||
Title,
|
||||
Action,
|
||||
Cancel,
|
||||
Portal,
|
||||
Footer,
|
||||
Header,
|
||||
Trigger,
|
||||
Overlay,
|
||||
Content,
|
||||
Description,
|
||||
//
|
||||
Root as AlertDialog,
|
||||
Title as AlertDialogTitle,
|
||||
Action as AlertDialogAction,
|
||||
Cancel as AlertDialogCancel,
|
||||
Portal as AlertDialogPortal,
|
||||
Footer as AlertDialogFooter,
|
||||
Header as AlertDialogHeader,
|
||||
Trigger as AlertDialogTrigger,
|
||||
Overlay as AlertDialogOverlay,
|
||||
Content as AlertDialogContent,
|
||||
Description as AlertDialogDescription,
|
||||
};
|
||||
@@ -1,16 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
</script>
|
||||
|
||||
<div bind:this={ref} class={cn("text-sm [&_p]:leading-relaxed", className)} {...restProps}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
@@ -1,25 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
level = 5,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
|
||||
level?: 1 | 2 | 3 | 4 | 5 | 6;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
role="heading"
|
||||
aria-level={level}
|
||||
bind:this={ref}
|
||||
class={cn("mb-1 font-medium leading-none tracking-tight", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
@@ -1,39 +0,0 @@
|
||||
<script lang="ts" module>
|
||||
import { type VariantProps, tv } from "tailwind-variants";
|
||||
|
||||
export const alertVariants = tv({
|
||||
base: "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-background text-foreground",
|
||||
destructive:
|
||||
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
});
|
||||
|
||||
export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
variant = "default",
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
|
||||
variant?: AlertVariant;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div bind:this={ref} class={cn(alertVariants({ variant }), className)} {...restProps} role="alert">
|
||||
{@render children?.()}
|
||||
</div>
|
||||
@@ -1,14 +0,0 @@
|
||||
import Root from "./alert.svelte";
|
||||
import Description from "./alert-description.svelte";
|
||||
import Title from "./alert-title.svelte";
|
||||
export { alertVariants, type AlertVariant } from "./alert.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
Description,
|
||||
Title,
|
||||
//
|
||||
Root as Alert,
|
||||
Description as AlertDescription,
|
||||
Title as AlertTitle,
|
||||
};
|
||||
@@ -1,5 +0,0 @@
|
||||
import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
|
||||
|
||||
const Root = AspectRatioPrimitive.Root;
|
||||
|
||||
export { Root, Root as AspectRatio };
|
||||
@@ -1,16 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Avatar as AvatarPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: AvatarPrimitive.FallbackProps = $props();
|
||||
</script>
|
||||
|
||||
<AvatarPrimitive.Fallback
|
||||
bind:ref
|
||||
class={cn("bg-muted flex size-full items-center justify-center", className)}
|
||||
{...restProps}
|
||||
/>
|
||||
@@ -1,12 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Avatar as AvatarPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: AvatarPrimitive.ImageProps = $props();
|
||||
</script>
|
||||
|
||||
<AvatarPrimitive.Image bind:ref class={cn("aspect-square size-full", className)} {...restProps} />
|
||||
@@ -1,16 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Avatar as AvatarPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: AvatarPrimitive.RootProps = $props();
|
||||
</script>
|
||||
|
||||
<AvatarPrimitive.Root
|
||||
bind:ref
|
||||
class={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
|
||||
{...restProps}
|
||||
/>
|
||||
@@ -1,13 +0,0 @@
|
||||
import Root from "./avatar.svelte";
|
||||
import Image from "./avatar-image.svelte";
|
||||
import Fallback from "./avatar-fallback.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
Image,
|
||||
Fallback,
|
||||
//
|
||||
Root as Avatar,
|
||||
Image as AvatarImage,
|
||||
Fallback as AvatarFallback,
|
||||
};
|
||||
@@ -1,50 +0,0 @@
|
||||
<script lang="ts" module>
|
||||
import { type VariantProps, tv } from "tailwind-variants";
|
||||
|
||||
export const badgeVariants = tv({
|
||||
base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
|
||||
outline: "text-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
});
|
||||
|
||||
export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLAnchorAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
href,
|
||||
class: className,
|
||||
variant = "default",
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAnchorAttributes> & {
|
||||
variant?: BadgeVariant;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<svelte:element
|
||||
this={href ? "a" : "span"}
|
||||
bind:this={ref}
|
||||
{href}
|
||||
class={cn(badgeVariants({ variant }), className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</svelte:element>
|
||||
@@ -1,2 +0,0 @@
|
||||
export { default as Badge } from "./badge.svelte";
|
||||
export { badgeVariants, type BadgeVariant } from "./badge.svelte";
|
||||
@@ -1,23 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Ellipsis from "@lucide/svelte/icons/ellipsis";
|
||||
import type { WithElementRef, WithoutChildren } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
|
||||
</script>
|
||||
|
||||
<span
|
||||
bind:this={ref}
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
class={cn("flex size-9 items-center justify-center", className)}
|
||||
{...restProps}
|
||||
>
|
||||
<Ellipsis class="size-4" />
|
||||
<span class="sr-only">More</span>
|
||||
</span>
|
||||
@@ -1,16 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLLiAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLLiAttributes> = $props();
|
||||
</script>
|
||||
|
||||
<li bind:this={ref} class={cn("inline-flex items-center gap-1.5", className)} {...restProps}>
|
||||
{@render children?.()}
|
||||
</li>
|
||||
@@ -1,31 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { HTMLAnchorAttributes } from "svelte/elements";
|
||||
import type { Snippet } from "svelte";
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
href = undefined,
|
||||
child,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAnchorAttributes> & {
|
||||
child?: Snippet<[{ props: HTMLAnchorAttributes }]>;
|
||||
} = $props();
|
||||
|
||||
const attrs = $derived({
|
||||
class: cn("hover:text-foreground transition-colors", className),
|
||||
href,
|
||||
...restProps,
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if child}
|
||||
{@render child({ props: attrs })}
|
||||
{:else}
|
||||
<a bind:this={ref} {...attrs}>
|
||||
{@render children?.()}
|
||||
</a>
|
||||
{/if}
|
||||
@@ -1,23 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLOlAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLOlAttributes> = $props();
|
||||
</script>
|
||||
|
||||
<ol
|
||||
bind:this={ref}
|
||||
class={cn(
|
||||
"text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</ol>
|
||||
@@ -1,23 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
|
||||
</script>
|
||||
|
||||
<span
|
||||
bind:this={ref}
|
||||
role="link"
|
||||
aria-disabled="true"
|
||||
aria-current="page"
|
||||
class={cn("text-foreground font-normal", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</span>
|
||||
@@ -1,27 +0,0 @@
|
||||
<script lang="ts">
|
||||
import ChevronRight from "@lucide/svelte/icons/chevron-right";
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLLiAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLLiAttributes> = $props();
|
||||
</script>
|
||||
|
||||
<li
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
class={cn("[&>svg]:size-3.5", className)}
|
||||
bind:this={ref}
|
||||
{...restProps}
|
||||
>
|
||||
{#if children}
|
||||
{@render children?.()}
|
||||
{:else}
|
||||
<ChevronRight />
|
||||
{/if}
|
||||
</li>
|
||||
@@ -1,15 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
|
||||
let {
|
||||
ref = $bindable(),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
|
||||
</script>
|
||||
|
||||
<nav bind:this={ref} class={className} aria-label="breadcrumb" {...restProps}>
|
||||
{@render children?.()}
|
||||
</nav>
|
||||
@@ -1,25 +0,0 @@
|
||||
import Root from "./breadcrumb.svelte";
|
||||
import Ellipsis from "./breadcrumb-ellipsis.svelte";
|
||||
import Item from "./breadcrumb-item.svelte";
|
||||
import Separator from "./breadcrumb-separator.svelte";
|
||||
import Link from "./breadcrumb-link.svelte";
|
||||
import List from "./breadcrumb-list.svelte";
|
||||
import Page from "./breadcrumb-page.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
Ellipsis,
|
||||
Item,
|
||||
Separator,
|
||||
Link,
|
||||
List,
|
||||
Page,
|
||||
//
|
||||
Root as Breadcrumb,
|
||||
Ellipsis as BreadcrumbEllipsis,
|
||||
Item as BreadcrumbItem,
|
||||
Separator as BreadcrumbSeparator,
|
||||
Link as BreadcrumbLink,
|
||||
List as BreadcrumbList,
|
||||
Page as BreadcrumbPage,
|
||||
};
|
||||
@@ -1,74 +0,0 @@
|
||||
<script lang="ts" module>
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
|
||||
import { type VariantProps, tv } from "tailwind-variants";
|
||||
|
||||
export const buttonVariants = tv({
|
||||
base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||
outline:
|
||||
"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
|
||||
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-11 rounded-md px-8",
|
||||
icon: "h-10 w-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
});
|
||||
|
||||
export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
|
||||
export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
|
||||
|
||||
export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
|
||||
WithElementRef<HTMLAnchorAttributes> & {
|
||||
variant?: ButtonVariant;
|
||||
size?: ButtonSize;
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
class: className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
ref = $bindable(null),
|
||||
href = undefined,
|
||||
type = "button",
|
||||
children,
|
||||
...restProps
|
||||
}: ButtonProps = $props();
|
||||
</script>
|
||||
|
||||
{#if href}
|
||||
<a
|
||||
bind:this={ref}
|
||||
class={cn(buttonVariants({ variant, size }), className)}
|
||||
{href}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
bind:this={ref}
|
||||
class={cn(buttonVariants({ variant, size }), className)}
|
||||
{type}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</button>
|
||||
{/if}
|
||||
@@ -1,17 +0,0 @@
|
||||
import Root, {
|
||||
type ButtonProps,
|
||||
type ButtonSize,
|
||||
type ButtonVariant,
|
||||
buttonVariants,
|
||||
} from "./button.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
type ButtonProps as Props,
|
||||
//
|
||||
Root as Button,
|
||||
buttonVariants,
|
||||
type ButtonProps,
|
||||
type ButtonSize,
|
||||
type ButtonVariant,
|
||||
};
|
||||
@@ -1,19 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Calendar as CalendarPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: CalendarPrimitive.CellProps = $props();
|
||||
</script>
|
||||
|
||||
<CalendarPrimitive.Cell
|
||||
bind:ref
|
||||
class={cn(
|
||||
"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
/>
|
||||
@@ -1,30 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { buttonVariants } from "$lib/components/ui/button/index.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { Calendar as CalendarPrimitive } from "bits-ui";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: CalendarPrimitive.DayProps = $props();
|
||||
</script>
|
||||
|
||||
<CalendarPrimitive.Day
|
||||
bind:ref
|
||||
class={cn(
|
||||
buttonVariants({ variant: "ghost" }),
|
||||
"size-9 p-0 font-normal",
|
||||
"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
|
||||
// Selected
|
||||
"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground data-[selected]:opacity-100",
|
||||
// Disabled
|
||||
"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
|
||||
// Unavailable
|
||||
"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
|
||||
// Outside months
|
||||
"data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
/>
|
||||
@@ -1,12 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Calendar as CalendarPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: CalendarPrimitive.GridBodyProps = $props();
|
||||
</script>
|
||||
|
||||
<CalendarPrimitive.GridBody bind:ref class={cn(className)} {...restProps} />
|
||||
@@ -1,12 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Calendar as CalendarPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: CalendarPrimitive.GridHeadProps = $props();
|
||||
</script>
|
||||
|
||||
<CalendarPrimitive.GridHead bind:ref class={cn(className)} {...restProps} />
|
||||
@@ -1,12 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Calendar as CalendarPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: CalendarPrimitive.GridRowProps = $props();
|
||||
</script>
|
||||
|
||||
<CalendarPrimitive.GridRow bind:ref class={cn("flex", className)} {...restProps} />
|
||||
@@ -1,16 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Calendar as CalendarPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: CalendarPrimitive.GridProps = $props();
|
||||
</script>
|
||||
|
||||
<CalendarPrimitive.Grid
|
||||
bind:ref
|
||||
class={cn("w-full border-collapse space-y-1", className)}
|
||||
{...restProps}
|
||||
/>
|
||||
@@ -1,16 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Calendar as CalendarPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: CalendarPrimitive.HeadCellProps = $props();
|
||||
</script>
|
||||
|
||||
<CalendarPrimitive.HeadCell
|
||||
bind:ref
|
||||
class={cn("text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal", className)}
|
||||
{...restProps}
|
||||
/>
|
||||
@@ -1,16 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Calendar as CalendarPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: CalendarPrimitive.HeaderProps = $props();
|
||||
</script>
|
||||
|
||||
<CalendarPrimitive.Header
|
||||
bind:ref
|
||||
class={cn("relative flex w-full items-center justify-between pt-1", className)}
|
||||
{...restProps}
|
||||
/>
|
||||
@@ -1,12 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Calendar as CalendarPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: CalendarPrimitive.HeadingProps = $props();
|
||||
</script>
|
||||
|
||||
<CalendarPrimitive.Heading bind:ref class={cn("text-sm font-medium", className)} {...restProps} />
|
||||
@@ -1,20 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
@@ -1,28 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Calendar as CalendarPrimitive } from "bits-ui";
|
||||
import ChevronRight from "@lucide/svelte/icons/chevron-right";
|
||||
import { buttonVariants } from "$lib/components/ui/button/index.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: CalendarPrimitive.PrevButtonProps = $props();
|
||||
</script>
|
||||
|
||||
{#snippet Fallback()}
|
||||
<ChevronRight class="size-4" />
|
||||
{/snippet}
|
||||
|
||||
<CalendarPrimitive.NextButton
|
||||
bind:ref
|
||||
class={cn(
|
||||
buttonVariants({ variant: "outline" }),
|
||||
"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
|
||||
className
|
||||
)}
|
||||
children={children || Fallback}
|
||||
{...restProps}
|
||||
/>
|
||||
@@ -1,28 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Calendar as CalendarPrimitive } from "bits-ui";
|
||||
import ChevronLeft from "@lucide/svelte/icons/chevron-left";
|
||||
import { buttonVariants } from "$lib/components/ui/button/index.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: CalendarPrimitive.PrevButtonProps = $props();
|
||||
</script>
|
||||
|
||||
{#snippet Fallback()}
|
||||
<ChevronLeft class="size-4" />
|
||||
{/snippet}
|
||||
|
||||
<CalendarPrimitive.PrevButton
|
||||
bind:ref
|
||||
class={cn(
|
||||
buttonVariants({ variant: "outline" }),
|
||||
"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
|
||||
className
|
||||
)}
|
||||
children={children || Fallback}
|
||||
{...restProps}
|
||||
/>
|
||||
@@ -1,61 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Calendar as CalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
|
||||
import * as Calendar from "./index.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
value = $bindable(),
|
||||
placeholder = $bindable(),
|
||||
class: className,
|
||||
weekdayFormat = "short",
|
||||
...restProps
|
||||
}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> = $props();
|
||||
</script>
|
||||
|
||||
<!--
|
||||
Discriminated Unions + Destructing (required for bindable) do not
|
||||
get along, so we shut typescript up by casting `value` to `never`.
|
||||
-->
|
||||
<CalendarPrimitive.Root
|
||||
bind:value={value as never}
|
||||
bind:ref
|
||||
bind:placeholder
|
||||
{weekdayFormat}
|
||||
class={cn("p-3", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{#snippet children({ months, weekdays })}
|
||||
<Calendar.Header>
|
||||
<Calendar.PrevButton />
|
||||
<Calendar.Heading />
|
||||
<Calendar.NextButton />
|
||||
</Calendar.Header>
|
||||
<Calendar.Months>
|
||||
{#each months as month (month)}
|
||||
<Calendar.Grid>
|
||||
<Calendar.GridHead>
|
||||
<Calendar.GridRow class="flex">
|
||||
{#each weekdays as weekday (weekday)}
|
||||
<Calendar.HeadCell>
|
||||
{weekday.slice(0, 2)}
|
||||
</Calendar.HeadCell>
|
||||
{/each}
|
||||
</Calendar.GridRow>
|
||||
</Calendar.GridHead>
|
||||
<Calendar.GridBody>
|
||||
{#each month.weeks as weekDates (weekDates)}
|
||||
<Calendar.GridRow class="mt-2 w-full">
|
||||
{#each weekDates as date (date)}
|
||||
<Calendar.Cell {date} month={month.value}>
|
||||
<Calendar.Day />
|
||||
</Calendar.Cell>
|
||||
{/each}
|
||||
</Calendar.GridRow>
|
||||
{/each}
|
||||
</Calendar.GridBody>
|
||||
</Calendar.Grid>
|
||||
{/each}
|
||||
</Calendar.Months>
|
||||
{/snippet}
|
||||
</CalendarPrimitive.Root>
|
||||
@@ -1,30 +0,0 @@
|
||||
import Root from "./calendar.svelte";
|
||||
import Cell from "./calendar-cell.svelte";
|
||||
import Day from "./calendar-day.svelte";
|
||||
import Grid from "./calendar-grid.svelte";
|
||||
import Header from "./calendar-header.svelte";
|
||||
import Months from "./calendar-months.svelte";
|
||||
import GridRow from "./calendar-grid-row.svelte";
|
||||
import Heading from "./calendar-heading.svelte";
|
||||
import GridBody from "./calendar-grid-body.svelte";
|
||||
import GridHead from "./calendar-grid-head.svelte";
|
||||
import HeadCell from "./calendar-head-cell.svelte";
|
||||
import NextButton from "./calendar-next-button.svelte";
|
||||
import PrevButton from "./calendar-prev-button.svelte";
|
||||
|
||||
export {
|
||||
Day,
|
||||
Cell,
|
||||
Grid,
|
||||
Header,
|
||||
Months,
|
||||
GridRow,
|
||||
Heading,
|
||||
GridBody,
|
||||
GridHead,
|
||||
HeadCell,
|
||||
NextButton,
|
||||
PrevButton,
|
||||
//
|
||||
Root as Calendar,
|
||||
};
|
||||
@@ -1,16 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
</script>
|
||||
|
||||
<div bind:this={ref} class={cn("p-6", className)} {...restProps}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
@@ -1,16 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
|
||||
</script>
|
||||
|
||||
<p bind:this={ref} class={cn("text-muted-foreground text-sm", className)} {...restProps}>
|
||||
{@render children?.()}
|
||||
</p>
|
||||
@@ -1,16 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
</script>
|
||||
|
||||
<div bind:this={ref} class={cn("flex items-center p-6 pt-0", className)} {...restProps}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
@@ -1,16 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
</script>
|
||||
|
||||
<div bind:this={ref} class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...restProps}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
@@ -1,25 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
level = 3,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
|
||||
level?: 1 | 2 | 3 | 4 | 5 | 6;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
role="heading"
|
||||
aria-level={level}
|
||||
bind:this={ref}
|
||||
class={cn("text-2xl font-semibold leading-none tracking-tight", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
@@ -1,20 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
class={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
@@ -1,22 +0,0 @@
|
||||
import Root from "./card.svelte";
|
||||
import Content from "./card-content.svelte";
|
||||
import Description from "./card-description.svelte";
|
||||
import Footer from "./card-footer.svelte";
|
||||
import Header from "./card-header.svelte";
|
||||
import Title from "./card-title.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
Content,
|
||||
Description,
|
||||
Footer,
|
||||
Header,
|
||||
Title,
|
||||
//
|
||||
Root as Card,
|
||||
Content as CardContent,
|
||||
Description as CardDescription,
|
||||
Footer as CardFooter,
|
||||
Header as CardHeader,
|
||||
Title as CardTitle,
|
||||
};
|
||||
@@ -1,44 +0,0 @@
|
||||
<script lang="ts">
|
||||
import emblaCarouselSvelte from "embla-carousel-svelte";
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { getEmblaContext } from "./context.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
|
||||
const emblaCtx = getEmblaContext("<Carousel.Content/>");
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore event_directive_deprecated -->
|
||||
<div
|
||||
class="overflow-hidden"
|
||||
use:emblaCarouselSvelte={{
|
||||
options: {
|
||||
container: "[data-embla-container]",
|
||||
slides: "[data-embla-slide]",
|
||||
...emblaCtx.options,
|
||||
axis: emblaCtx.orientation === "horizontal" ? "x" : "y",
|
||||
},
|
||||
plugins: emblaCtx.plugins,
|
||||
}}
|
||||
on:emblaInit={emblaCtx.onInit}
|
||||
>
|
||||
<div
|
||||
bind:this={ref}
|
||||
class={cn(
|
||||
"flex",
|
||||
emblaCtx.orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
||||
className
|
||||
)}
|
||||
data-embla-container=""
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,30 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { getEmblaContext } from "./context.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
||||
|
||||
const emblaCtx = getEmblaContext("<Carousel.Item/>");
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
role="group"
|
||||
aria-roledescription="slide"
|
||||
class={cn(
|
||||
"min-w-0 shrink-0 grow-0 basis-full",
|
||||
emblaCtx.orientation === "horizontal" ? "pl-4" : "pt-4",
|
||||
className
|
||||
)}
|
||||
data-embla-slide=""
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
@@ -1,37 +0,0 @@
|
||||
<script lang="ts">
|
||||
import ArrowRight from "@lucide/svelte/icons/arrow-right";
|
||||
import type { WithoutChildren } from "bits-ui";
|
||||
import { getEmblaContext } from "./context.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { Button, type Props } from "$lib/components/ui/button/index.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
variant = "outline",
|
||||
size = "icon",
|
||||
...restProps
|
||||
}: WithoutChildren<Props> = $props();
|
||||
|
||||
const emblaCtx = getEmblaContext("<Carousel.Next/>");
|
||||
</script>
|
||||
|
||||
<Button
|
||||
{variant}
|
||||
{size}
|
||||
class={cn(
|
||||
"absolute size-8 touch-manipulation rounded-full",
|
||||
emblaCtx.orientation === "horizontal"
|
||||
? "-right-12 top-1/2 -translate-y-1/2"
|
||||
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||
className
|
||||
)}
|
||||
disabled={!emblaCtx.canScrollNext}
|
||||
onclick={emblaCtx.scrollNext}
|
||||
onkeydown={emblaCtx.handleKeyDown}
|
||||
bind:ref
|
||||
{...restProps}
|
||||
>
|
||||
<ArrowRight class="size-4" />
|
||||
<span class="sr-only">Next slide</span>
|
||||
</Button>
|
||||
@@ -1,37 +0,0 @@
|
||||
<script lang="ts">
|
||||
import ArrowLeft from "@lucide/svelte/icons/arrow-left";
|
||||
import type { WithoutChildren } from "bits-ui";
|
||||
import { getEmblaContext } from "./context.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { Button, type Props } from "$lib/components/ui/button/index.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
variant = "outline",
|
||||
size = "icon",
|
||||
...restProps
|
||||
}: WithoutChildren<Props> = $props();
|
||||
|
||||
const emblaCtx = getEmblaContext("<Carousel.Previous/>");
|
||||
</script>
|
||||
|
||||
<Button
|
||||
{variant}
|
||||
{size}
|
||||
class={cn(
|
||||
"absolute size-8 touch-manipulation rounded-full",
|
||||
emblaCtx.orientation === "horizontal"
|
||||
? "-left-12 top-1/2 -translate-y-1/2"
|
||||
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||
className
|
||||
)}
|
||||
disabled={!emblaCtx.canScrollPrev}
|
||||
onclick={emblaCtx.scrollPrev}
|
||||
onkeydown={emblaCtx.handleKeyDown}
|
||||
{...restProps}
|
||||
bind:ref
|
||||
>
|
||||
<ArrowLeft class="size-4" />
|
||||
<span class="sr-only">Previous slide</span>
|
||||
</Button>
|
||||
@@ -1,92 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
type CarouselAPI,
|
||||
type CarouselProps,
|
||||
type EmblaContext,
|
||||
setEmblaContext,
|
||||
} from "./context.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
opts = {},
|
||||
plugins = [],
|
||||
setApi = () => {},
|
||||
orientation = "horizontal",
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: CarouselProps = $props();
|
||||
|
||||
let carouselState = $state<EmblaContext>({
|
||||
api: undefined,
|
||||
scrollPrev,
|
||||
scrollNext,
|
||||
orientation,
|
||||
canScrollNext: false,
|
||||
canScrollPrev: false,
|
||||
handleKeyDown,
|
||||
options: opts,
|
||||
plugins,
|
||||
onInit,
|
||||
scrollSnaps: [],
|
||||
selectedIndex: 0,
|
||||
scrollTo,
|
||||
});
|
||||
|
||||
setEmblaContext(carouselState);
|
||||
|
||||
function scrollPrev() {
|
||||
carouselState.api?.scrollPrev();
|
||||
}
|
||||
function scrollNext() {
|
||||
carouselState.api?.scrollNext();
|
||||
}
|
||||
function scrollTo(index: number, jump?: boolean) {
|
||||
carouselState.api?.scrollTo(index, jump);
|
||||
}
|
||||
|
||||
function onSelect(api: CarouselAPI) {
|
||||
if (!api) return;
|
||||
carouselState.canScrollPrev = api.canScrollPrev();
|
||||
carouselState.canScrollNext = api.canScrollNext();
|
||||
carouselState.selectedIndex = api.selectedScrollSnap();
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (carouselState.api) {
|
||||
onSelect(carouselState.api);
|
||||
carouselState.api.on("select", onSelect);
|
||||
carouselState.api.on("reInit", onSelect);
|
||||
}
|
||||
});
|
||||
|
||||
function handleKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === "ArrowLeft") {
|
||||
e.preventDefault();
|
||||
scrollPrev();
|
||||
} else if (e.key === "ArrowRight") {
|
||||
e.preventDefault();
|
||||
scrollNext();
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
setApi(carouselState.api);
|
||||
});
|
||||
|
||||
function onInit(event: CustomEvent<CarouselAPI>) {
|
||||
carouselState.api = event.detail;
|
||||
|
||||
carouselState.scrollSnaps = carouselState.api.scrollSnapList();
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
return () => {
|
||||
carouselState.api?.off("select", onSelect);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class={cn("relative", className)} role="region" aria-roledescription="carousel" {...restProps}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
@@ -1,56 +0,0 @@
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { EmblaCarouselSvelteType } from "embla-carousel-svelte";
|
||||
import type emblaCarouselSvelte from "embla-carousel-svelte";
|
||||
import { getContext, hasContext, setContext } from "svelte";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
|
||||
export type CarouselAPI =
|
||||
NonNullable<NonNullable<EmblaCarouselSvelteType["$$_attributes"]>["on:emblaInit"]> extends (
|
||||
evt: CustomEvent<infer CarouselAPI>
|
||||
) => void
|
||||
? CarouselAPI
|
||||
: never;
|
||||
|
||||
type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSvelte>[1]>;
|
||||
|
||||
export type CarouselOptions = EmblaCarouselConfig["options"];
|
||||
export type CarouselPlugins = EmblaCarouselConfig["plugins"];
|
||||
|
||||
////
|
||||
|
||||
export type CarouselProps = {
|
||||
opts?: CarouselOptions;
|
||||
plugins?: CarouselPlugins;
|
||||
setApi?: (api: CarouselAPI | undefined) => void;
|
||||
orientation?: "horizontal" | "vertical";
|
||||
} & WithElementRef<HTMLAttributes<HTMLDivElement>>;
|
||||
|
||||
const EMBLA_CAROUSEL_CONTEXT = Symbol("EMBLA_CAROUSEL_CONTEXT");
|
||||
|
||||
export type EmblaContext = {
|
||||
api: CarouselAPI | undefined;
|
||||
orientation: "horizontal" | "vertical";
|
||||
scrollNext: () => void;
|
||||
scrollPrev: () => void;
|
||||
canScrollNext: boolean;
|
||||
canScrollPrev: boolean;
|
||||
handleKeyDown: (e: KeyboardEvent) => void;
|
||||
options: CarouselOptions;
|
||||
plugins: CarouselPlugins;
|
||||
onInit: (e: CustomEvent<CarouselAPI>) => void;
|
||||
scrollTo: (index: number, jump?: boolean) => void;
|
||||
scrollSnaps: number[];
|
||||
selectedIndex: number;
|
||||
};
|
||||
|
||||
export function setEmblaContext(config: EmblaContext): EmblaContext {
|
||||
setContext(EMBLA_CAROUSEL_CONTEXT, config);
|
||||
return config;
|
||||
}
|
||||
|
||||
export function getEmblaContext(name = "This component") {
|
||||
if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) {
|
||||
throw new Error(`${name} must be used within a <Carousel.Root> component`);
|
||||
}
|
||||
return getContext<ReturnType<typeof setEmblaContext>>(EMBLA_CAROUSEL_CONTEXT);
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
import Root from "./carousel.svelte";
|
||||
import Content from "./carousel-content.svelte";
|
||||
import Item from "./carousel-item.svelte";
|
||||
import Previous from "./carousel-previous.svelte";
|
||||
import Next from "./carousel-next.svelte";
|
||||
|
||||
export {
|
||||
Root,
|
||||
Content,
|
||||
Item,
|
||||
Previous,
|
||||
Next,
|
||||
//
|
||||
Root as Carousel,
|
||||
Content as CarouselContent,
|
||||
Item as CarouselItem,
|
||||
Previous as CarouselPrevious,
|
||||
Next as CarouselNext,
|
||||
};
|
||||
@@ -1,35 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from "bits-ui";
|
||||
import Check from "@lucide/svelte/icons/check";
|
||||
import Minus from "@lucide/svelte/icons/minus";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
checked = $bindable(false),
|
||||
indeterminate = $bindable(false),
|
||||
class: className,
|
||||
...restProps
|
||||
}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
|
||||
</script>
|
||||
|
||||
<CheckboxPrimitive.Root
|
||||
bind:ref
|
||||
class={cn(
|
||||
"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
|
||||
className
|
||||
)}
|
||||
bind:checked
|
||||
bind:indeterminate
|
||||
{...restProps}
|
||||
>
|
||||
{#snippet children({ checked, indeterminate })}
|
||||
<div class="flex size-4 items-center justify-center text-current">
|
||||
{#if indeterminate}
|
||||
<Minus class="size-3.5" />
|
||||
{:else}
|
||||
<Check class={cn("size-3.5", !checked && "text-transparent")} />
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
</CheckboxPrimitive.Root>
|
||||
@@ -1,6 +0,0 @@
|
||||
import Root from "./checkbox.svelte";
|
||||
export {
|
||||
Root,
|
||||
//
|
||||
Root as Checkbox,
|
||||
};
|
||||
@@ -1,15 +0,0 @@
|
||||
import { Collapsible as CollapsiblePrimitive } from "bits-ui";
|
||||
|
||||
const Root = CollapsiblePrimitive.Root;
|
||||
const Trigger = CollapsiblePrimitive.Trigger;
|
||||
const Content = CollapsiblePrimitive.Content;
|
||||
|
||||
export {
|
||||
Root,
|
||||
Content,
|
||||
Trigger,
|
||||
//
|
||||
Root as Collapsible,
|
||||
Content as CollapsibleContent,
|
||||
Trigger as CollapsibleTrigger,
|
||||
};
|
||||
@@ -1,35 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type {
|
||||
Command as CommandPrimitive,
|
||||
Dialog as DialogPrimitive,
|
||||
WithoutChildrenOrChild,
|
||||
} from "bits-ui";
|
||||
import type { Snippet } from "svelte";
|
||||
import Command from "./command.svelte";
|
||||
import * as Dialog from "$lib/components/ui/dialog/index.js";
|
||||
|
||||
let {
|
||||
open = $bindable(false),
|
||||
ref = $bindable(null),
|
||||
value = $bindable(""),
|
||||
portalProps,
|
||||
children,
|
||||
...restProps
|
||||
}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
|
||||
WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
|
||||
portalProps?: DialogPrimitive.PortalProps;
|
||||
children: Snippet;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<Dialog.Root bind:open {...restProps}>
|
||||
<Dialog.Content class="overflow-hidden p-0 shadow-lg" {portalProps}>
|
||||
<Command
|
||||
class="[&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-group]]:px-2 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
|
||||
{...restProps}
|
||||
bind:value
|
||||
bind:ref
|
||||
{children}
|
||||
/>
|
||||
</Dialog.Content>
|
||||
</Dialog.Root>
|
||||
@@ -1,12 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Command as CommandPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: CommandPrimitive.EmptyProps = $props();
|
||||
</script>
|
||||
|
||||
<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...restProps} />
|
||||
@@ -1,29 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Command as CommandPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
heading,
|
||||
...restProps
|
||||
}: CommandPrimitive.GroupProps & {
|
||||
heading?: string;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<CommandPrimitive.Group
|
||||
class={cn("text-foreground overflow-hidden p-1", className)}
|
||||
bind:ref
|
||||
{...restProps}
|
||||
>
|
||||
{#if heading}
|
||||
<CommandPrimitive.GroupHeading
|
||||
class="text-muted-foreground px-2 py-1.5 text-xs font-medium"
|
||||
>
|
||||
{heading}
|
||||
</CommandPrimitive.GroupHeading>
|
||||
{/if}
|
||||
<CommandPrimitive.GroupItems {children} />
|
||||
</CommandPrimitive.Group>
|
||||
@@ -1,25 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Command as CommandPrimitive } from "bits-ui";
|
||||
import Search from "@lucide/svelte/icons/search";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
value = $bindable(""),
|
||||
...restProps
|
||||
}: CommandPrimitive.InputProps = $props();
|
||||
</script>
|
||||
|
||||
<div class="flex items-center border-b px-2" data-command-input-wrapper="">
|
||||
<Search class="mr-2 size-4 shrink-0 opacity-50" />
|
||||
<CommandPrimitive.Input
|
||||
class={cn(
|
||||
"placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-base outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
className
|
||||
)}
|
||||
bind:ref
|
||||
{...restProps}
|
||||
bind:value
|
||||
/>
|
||||
</div>
|
||||
@@ -1,19 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Command as CommandPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: CommandPrimitive.ItemProps = $props();
|
||||
</script>
|
||||
|
||||
<CommandPrimitive.Item
|
||||
class={cn(
|
||||
"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
bind:ref
|
||||
{...restProps}
|
||||
/>
|
||||
@@ -1,19 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Command as CommandPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: CommandPrimitive.LinkItemProps = $props();
|
||||
</script>
|
||||
|
||||
<CommandPrimitive.LinkItem
|
||||
class={cn(
|
||||
"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
bind:ref
|
||||
{...restProps}
|
||||
/>
|
||||
@@ -1,16 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Command as CommandPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: CommandPrimitive.ListProps = $props();
|
||||
</script>
|
||||
|
||||
<CommandPrimitive.List
|
||||
class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
|
||||
{...restProps}
|
||||
bind:ref
|
||||
/>
|
||||
@@ -1,12 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Command as CommandPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: CommandPrimitive.SeparatorProps = $props();
|
||||
</script>
|
||||
|
||||
<CommandPrimitive.Separator class={cn("bg-border -mx-1 h-px", className)} bind:ref {...restProps} />
|
||||
@@ -1,20 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { WithElementRef } from "bits-ui";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
|
||||
</script>
|
||||
|
||||
<span
|
||||
bind:this={ref}
|
||||
class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</span>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user