flo-bit.dev / ui-kit
[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4 flo-bit.dev/ui-kit/
svelte tailwindcss ui-components
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

add first undraw version

Florian (Mar 16, 2025, 8:26 PM +0100) 6bf44adf e159c615

+532 -65
+260 -4
package-lock.json
··· 1 1 { 2 - "name": "fox-ui-svelte", 3 - "version": "0.0.2", 2 + "name": "duckui", 3 + "version": "0.0.5", 4 4 "lockfileVersion": 3, 5 5 "requires": true, 6 6 "packages": { 7 7 "": { 8 - "name": "fox-ui-svelte", 9 - "version": "0.0.2", 8 + "name": "duckui", 9 + "version": "0.0.5", 10 + "license": "MIT", 10 11 "dependencies": { 11 12 "@atproto/api": "^0.14.7", 12 13 "@number-flow/svelte": "^0.3.3", ··· 17 18 "@threlte/extras": "^9.0.1", 18 19 "@types/three": "^0.173.0", 19 20 "bits-ui": "^1.3.4", 21 + "cheerio": "^1.0.0", 20 22 "hls.js": "^1.5.20", 21 23 "layerchart": "^1.0.0", 22 24 "paneforge": "^0.0.6", ··· 2818 2820 "svelte": "^5.11.0" 2819 2821 } 2820 2822 }, 2823 + "node_modules/boolbase": { 2824 + "version": "1.0.0", 2825 + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", 2826 + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", 2827 + "license": "ISC" 2828 + }, 2821 2829 "node_modules/brace-expansion": { 2822 2830 "version": "1.1.11", 2823 2831 "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", ··· 2884 2892 }, 2885 2893 "funding": { 2886 2894 "url": "https://github.com/chalk/chalk?sponsor=1" 2895 + } 2896 + }, 2897 + "node_modules/cheerio": { 2898 + "version": "1.0.0", 2899 + "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0.tgz", 2900 + "integrity": "sha512-quS9HgjQpdaXOvsZz82Oz7uxtXiy6UIsIQcpBj7HRw2M63Skasm9qlDocAM7jNuaxdhpPU7c4kJN+gA5MCu4ww==", 2901 + "license": "MIT", 2902 + "dependencies": { 2903 + "cheerio-select": "^2.1.0", 2904 + "dom-serializer": "^2.0.0", 2905 + "domhandler": "^5.0.3", 2906 + "domutils": "^3.1.0", 2907 + "encoding-sniffer": "^0.2.0", 2908 + "htmlparser2": "^9.1.0", 2909 + "parse5": "^7.1.2", 2910 + "parse5-htmlparser2-tree-adapter": "^7.0.0", 2911 + "parse5-parser-stream": "^7.1.2", 2912 + "undici": "^6.19.5", 2913 + "whatwg-mimetype": "^4.0.0" 2914 + }, 2915 + "engines": { 2916 + "node": ">=18.17" 2917 + }, 2918 + "funding": { 2919 + "url": "https://github.com/cheeriojs/cheerio?sponsor=1" 2920 + } 2921 + }, 2922 + "node_modules/cheerio-select": { 2923 + "version": "2.1.0", 2924 + "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz", 2925 + "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==", 2926 + "license": "BSD-2-Clause", 2927 + "dependencies": { 2928 + "boolbase": "^1.0.0", 2929 + "css-select": "^5.1.0", 2930 + "css-what": "^6.1.0", 2931 + "domelementtype": "^2.3.0", 2932 + "domhandler": "^5.0.3", 2933 + "domutils": "^3.0.1" 2934 + }, 2935 + "funding": { 2936 + "url": "https://github.com/sponsors/fb55" 2887 2937 } 2888 2938 }, 2889 2939 "node_modules/chokidar": { ··· 3002 3052 }, 3003 3053 "engines": { 3004 3054 "node": ">= 8" 3055 + } 3056 + }, 3057 + "node_modules/css-select": { 3058 + "version": "5.1.0", 3059 + "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", 3060 + "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", 3061 + "license": "BSD-2-Clause", 3062 + "dependencies": { 3063 + "boolbase": "^1.0.0", 3064 + "css-what": "^6.1.0", 3065 + "domhandler": "^5.0.2", 3066 + "domutils": "^3.0.1", 3067 + "nth-check": "^2.0.1" 3068 + }, 3069 + "funding": { 3070 + "url": "https://github.com/sponsors/fb55" 3071 + } 3072 + }, 3073 + "node_modules/css-what": { 3074 + "version": "6.1.0", 3075 + "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", 3076 + "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", 3077 + "license": "BSD-2-Clause", 3078 + "engines": { 3079 + "node": ">= 6" 3080 + }, 3081 + "funding": { 3082 + "url": "https://github.com/sponsors/fb55" 3005 3083 } 3006 3084 }, 3007 3085 "node_modules/cssesc": { ··· 3428 3506 "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", 3429 3507 "license": "MIT" 3430 3508 }, 3509 + "node_modules/dom-serializer": { 3510 + "version": "2.0.0", 3511 + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", 3512 + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", 3513 + "license": "MIT", 3514 + "dependencies": { 3515 + "domelementtype": "^2.3.0", 3516 + "domhandler": "^5.0.2", 3517 + "entities": "^4.2.0" 3518 + }, 3519 + "funding": { 3520 + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" 3521 + } 3522 + }, 3523 + "node_modules/domelementtype": { 3524 + "version": "2.3.0", 3525 + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", 3526 + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", 3527 + "funding": [ 3528 + { 3529 + "type": "github", 3530 + "url": "https://github.com/sponsors/fb55" 3531 + } 3532 + ], 3533 + "license": "BSD-2-Clause" 3534 + }, 3535 + "node_modules/domhandler": { 3536 + "version": "5.0.3", 3537 + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", 3538 + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", 3539 + "license": "BSD-2-Clause", 3540 + "dependencies": { 3541 + "domelementtype": "^2.3.0" 3542 + }, 3543 + "engines": { 3544 + "node": ">= 4" 3545 + }, 3546 + "funding": { 3547 + "url": "https://github.com/fb55/domhandler?sponsor=1" 3548 + } 3549 + }, 3550 + "node_modules/domutils": { 3551 + "version": "3.2.2", 3552 + "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz", 3553 + "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==", 3554 + "license": "BSD-2-Clause", 3555 + "dependencies": { 3556 + "dom-serializer": "^2.0.0", 3557 + "domelementtype": "^2.3.0", 3558 + "domhandler": "^5.0.3" 3559 + }, 3560 + "funding": { 3561 + "url": "https://github.com/fb55/domutils?sponsor=1" 3562 + } 3563 + }, 3431 3564 "node_modules/earcut": { 3432 3565 "version": "2.2.4", 3433 3566 "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz", ··· 3446 3579 "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", 3447 3580 "license": "MIT" 3448 3581 }, 3582 + "node_modules/encoding-sniffer": { 3583 + "version": "0.2.0", 3584 + "resolved": "https://registry.npmjs.org/encoding-sniffer/-/encoding-sniffer-0.2.0.tgz", 3585 + "integrity": "sha512-ju7Wq1kg04I3HtiYIOrUrdfdDvkyO9s5XM8QAj/bN61Yo/Vb4vgJxy5vi4Yxk01gWHbrofpPtpxM8bKger9jhg==", 3586 + "license": "MIT", 3587 + "dependencies": { 3588 + "iconv-lite": "^0.6.3", 3589 + "whatwg-encoding": "^3.1.1" 3590 + }, 3591 + "funding": { 3592 + "url": "https://github.com/fb55/encoding-sniffer?sponsor=1" 3593 + } 3594 + }, 3449 3595 "node_modules/enhanced-resolve": { 3450 3596 "version": "5.18.1", 3451 3597 "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz", ··· 3458 3604 }, 3459 3605 "engines": { 3460 3606 "node": ">=10.13.0" 3607 + } 3608 + }, 3609 + "node_modules/entities": { 3610 + "version": "4.5.0", 3611 + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", 3612 + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", 3613 + "license": "BSD-2-Clause", 3614 + "engines": { 3615 + "node": ">=0.12" 3616 + }, 3617 + "funding": { 3618 + "url": "https://github.com/fb55/entities?sponsor=1" 3461 3619 } 3462 3620 }, 3463 3621 "node_modules/esbuild": { ··· 4066 4224 "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.5.20.tgz", 4067 4225 "integrity": "sha512-uu0VXUK52JhihhnN/MVVo1lvqNNuhoxkonqgO3IpjvQiGpJBdIXMGkofjQb/j9zvV7a1SW8U9g1FslWx/1HOiQ==", 4068 4226 "license": "Apache-2.0" 4227 + }, 4228 + "node_modules/htmlparser2": { 4229 + "version": "9.1.0", 4230 + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz", 4231 + "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==", 4232 + "funding": [ 4233 + "https://github.com/fb55/htmlparser2?sponsor=1", 4234 + { 4235 + "type": "github", 4236 + "url": "https://github.com/sponsors/fb55" 4237 + } 4238 + ], 4239 + "license": "MIT", 4240 + "dependencies": { 4241 + "domelementtype": "^2.3.0", 4242 + "domhandler": "^5.0.3", 4243 + "domutils": "^3.1.0", 4244 + "entities": "^4.5.0" 4245 + } 4069 4246 }, 4070 4247 "node_modules/iconv-lite": { 4071 4248 "version": "0.6.3", ··· 4928 5105 "node": ">=0.10.0" 4929 5106 } 4930 5107 }, 5108 + "node_modules/nth-check": { 5109 + "version": "2.1.1", 5110 + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", 5111 + "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", 5112 + "license": "BSD-2-Clause", 5113 + "dependencies": { 5114 + "boolbase": "^1.0.0" 5115 + }, 5116 + "funding": { 5117 + "url": "https://github.com/fb55/nth-check?sponsor=1" 5118 + } 5119 + }, 4931 5120 "node_modules/number-flow": { 4932 5121 "version": "0.5.5", 4933 5122 "resolved": "https://registry.npmjs.org/number-flow/-/number-flow-0.5.5.tgz", ··· 5044 5233 }, 5045 5234 "engines": { 5046 5235 "node": ">=6" 5236 + } 5237 + }, 5238 + "node_modules/parse5": { 5239 + "version": "7.2.1", 5240 + "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz", 5241 + "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==", 5242 + "license": "MIT", 5243 + "dependencies": { 5244 + "entities": "^4.5.0" 5245 + }, 5246 + "funding": { 5247 + "url": "https://github.com/inikulin/parse5?sponsor=1" 5248 + } 5249 + }, 5250 + "node_modules/parse5-htmlparser2-tree-adapter": { 5251 + "version": "7.1.0", 5252 + "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.1.0.tgz", 5253 + "integrity": "sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==", 5254 + "license": "MIT", 5255 + "dependencies": { 5256 + "domhandler": "^5.0.3", 5257 + "parse5": "^7.0.0" 5258 + }, 5259 + "funding": { 5260 + "url": "https://github.com/inikulin/parse5?sponsor=1" 5261 + } 5262 + }, 5263 + "node_modules/parse5-parser-stream": { 5264 + "version": "7.1.2", 5265 + "resolved": "https://registry.npmjs.org/parse5-parser-stream/-/parse5-parser-stream-7.1.2.tgz", 5266 + "integrity": "sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==", 5267 + "license": "MIT", 5268 + "dependencies": { 5269 + "parse5": "^7.0.0" 5270 + }, 5271 + "funding": { 5272 + "url": "https://github.com/inikulin/parse5?sponsor=1" 5047 5273 } 5048 5274 }, 5049 5275 "node_modules/pascal-case": { ··· 6622 6848 "multiformats": "^9.4.2" 6623 6849 } 6624 6850 }, 6851 + "node_modules/undici": { 6852 + "version": "6.21.2", 6853 + "resolved": "https://registry.npmjs.org/undici/-/undici-6.21.2.tgz", 6854 + "integrity": "sha512-uROZWze0R0itiAKVPsYhFov9LxrPMHLMEQFszeI2gCN6bnIIZ8twzBCJcN2LJrBBLfrP0t1FW0g+JmKVl8Vk1g==", 6855 + "license": "MIT", 6856 + "engines": { 6857 + "node": ">=18.17" 6858 + } 6859 + }, 6625 6860 "node_modules/unist-util-stringify-position": { 6626 6861 "version": "2.0.3", 6627 6862 "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz", ··· 6803 7038 "resolved": "https://registry.npmjs.org/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz", 6804 7039 "integrity": "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==", 6805 7040 "license": "MIT" 7041 + }, 7042 + "node_modules/whatwg-encoding": { 7043 + "version": "3.1.1", 7044 + "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz", 7045 + "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==", 7046 + "license": "MIT", 7047 + "dependencies": { 7048 + "iconv-lite": "0.6.3" 7049 + }, 7050 + "engines": { 7051 + "node": ">=18" 7052 + } 7053 + }, 7054 + "node_modules/whatwg-mimetype": { 7055 + "version": "4.0.0", 7056 + "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz", 7057 + "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==", 7058 + "license": "MIT", 7059 + "engines": { 7060 + "node": ">=18" 7061 + } 6806 7062 }, 6807 7063 "node_modules/which": { 6808 7064 "version": "2.0.2",
+4 -3
package.json
··· 1 1 { 2 - "name": "fox-ui-svelte", 2 + "name": "duckui", 3 3 "version": "0.0.5", 4 4 "type": "module", 5 5 "description": "Beautiful UI components built with Tailwind 4 and Svelte 5", ··· 70 70 "ui-kit" 71 71 ], 72 72 "peerDependencies": { 73 - "svelte": "^5.0.0", 74 - "@sveltejs/kit": "^2.16.0" 73 + "@sveltejs/kit": "^2.16.0", 74 + "svelte": "^5.0.0" 75 75 }, 76 76 "dependencies": { 77 77 "@atproto/api": "^0.14.7", ··· 83 83 "@threlte/extras": "^9.0.1", 84 84 "@types/three": "^0.173.0", 85 85 "bits-ui": "^1.3.4", 86 + "cheerio": "^1.0.0", 86 87 "hls.js": "^1.5.20", 87 88 "layerchart": "^1.0.0", 88 89 "paneforge": "^0.0.6",
+1
src/docs/assets/undraw_wireframing.svg
··· 1 + <svg xmlns="http://www.w3.org/2000/svg" width="860.24803" height="688" viewBox="0 0 860.24803 688" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"><path d="M386.98267,492H174.876a5.00581,5.00581,0,0,1-5-5V233a5.00581,5.00581,0,0,1,5-5H386.98267a5.00573,5.00573,0,0,1,5,5V487A5.00573,5.00573,0,0,1,386.98267,492ZM174.876,230a3.00336,3.00336,0,0,0-3,3V487a3.00336,3.00336,0,0,0,3,3H386.98267a3.00328,3.00328,0,0,0,3-3V233a3.00328,3.00328,0,0,0-3-3Z" transform="translate(-169.87598 -106)" fill="#cacaca"/><rect x="33.55334" y="176" width="155" height="96" fill="#6c63ff"/><rect x="33.55334" y="308" width="39" height="24" fill="#e4e4e4"/><rect x="149.55334" y="308" width="39" height="24" fill="#e4e4e4"/><rect x="91.55334" y="308" width="39" height="24" fill="#e4e4e4"/><path d="M678.98267,370H466.876a5.00573,5.00573,0,0,1-5-5V111a5.00573,5.00573,0,0,1,5-5H678.98267a5.00573,5.00573,0,0,1,5,5V365A5.00573,5.00573,0,0,1,678.98267,370ZM466.876,108a3.00328,3.00328,0,0,0-3,3V365a3.00328,3.00328,0,0,0,3,3H678.98267a3.00328,3.00328,0,0,0,3-3V111a3.00328,3.00328,0,0,0-3-3Z" transform="translate(-169.87598 -106)" fill="#cacaca"/><path d="M681.51612,531H469.40968a5.00573,5.00573,0,0,1-5-5V451a5.00573,5.00573,0,0,1,5-5H681.51612a5.00573,5.00573,0,0,1,5,5v75A5.00573,5.00573,0,0,1,681.51612,531ZM469.40968,448a3.00328,3.00328,0,0,0-3,3v75a3.00328,3.00328,0,0,0,3,3H681.51612a3.00328,3.00328,0,0,0,3-3V451a3.00328,3.00328,0,0,0-3-3Z" transform="translate(-169.87598 -106)" fill="#cacaca"/><rect x="326.05334" y="170.5" width="154" height="24" rx="11.99999" fill="#e4e4e4"/><rect x="326.05334" y="208.5" width="154" height="24" rx="11.99999" fill="#e4e4e4"/><circle cx="403.05334" cy="87.5" r="56" fill="#6c63ff"/><rect x="397.08691" y="370.5" width="81" height="24" rx="11.99999" fill="#e4e4e4"/><circle cx="355.08691" cy="382.5" r="22" fill="#6c63ff"/><path d="M1029.124,794h-381a1,1,0,0,1,0-2h381a1,1,0,0,1,0,2Z" transform="translate(-169.87598 -106)" fill="#cacaca"/><path d="M916.25519,578.045a8.32992,8.32992,0,0,1,3.3269-12.332l-2.94428-29.45488,13.62031,7.14918.70781,26.87481a8.375,8.375,0,0,1-14.71074,7.76292Z" transform="translate(-169.87598 -106)" fill="#ffb6b6"/><path d="M796.96992,573.90315a8.32989,8.32989,0,0,1,3.3269-12.332l-2.94429-29.45488,13.62032,7.14918.7078,26.87481a8.375,8.375,0,0,1-14.71073,7.76292Z" transform="translate(-169.87598 -106)" fill="#ffb6b6"/><polygon points="717.949 675.734 707.794 675.734 702.962 636.562 717.951 636.562 717.949 675.734" fill="#ffb6b6"/><path d="M890.41517,791.57838l-32.7461-.00121V791.163a12.74639,12.74639,0,0,1,12.74569-12.7455h.00081l20.0002.00081Z" transform="translate(-169.87598 -106)" fill="#2f2e41"/><polygon points="642.568 675.734 632.412 675.734 627.581 636.562 642.569 636.562 642.568 675.734" fill="#ffb6b6"/><path d="M815.0335,791.57838l-32.7461-.00121V791.163a12.74639,12.74639,0,0,1,12.7457-12.7455h.0008l20.00021.00081Z" transform="translate(-169.87598 -106)" fill="#2f2e41"/><circle cx="867.65097" cy="350.90583" r="26.81916" transform="translate(-231.86478 353.17866) rotate(-28.66315)" fill="#ffb8b8"/><polygon points="638.578 453.984 633.608 461.857 623.668 666.875 644.377 666.047 685.796 492.917 702.363 667.703 720.587 668.532 735.374 465.271 638.578 453.984" fill="#2f2e41"/><path d="M916.9709,405.07886l-33.96317-18.22414-38.105-2.48511-33.57833,20.70925s29.43648,86.97885-2.87,137.50942L803.48422,566.611l102.71787,7.45533s-6.627-107.6881,2.48511-120.942S916.9709,405.07886,916.9709,405.07886Z" transform="translate(-169.87598 -106)" fill="#3f3d56"/><path d="M905.24979,409.5925l11.72111-4.51364s20.70925,18.22414,19.88088,62.12775-5.30287,92.77744-5.30287,92.77744l-15.40638,2.48511-8.2837-71.23982-11.59718-62.12775Z" transform="translate(-169.87598 -106)" fill="#3f3d56"/><path d="M823.489,409.5925l-11.72111-4.51364S791.05867,423.303,791.887,467.20661s5.30287,92.77744,5.30287,92.77744l15.40637,2.48511,8.2837-71.23982,11.59718-62.12775Z" transform="translate(-169.87598 -106)" fill="#3f3d56"/><path d="M887.03875,323.84926a23.13651,23.13651,0,0,0-17.91633-6.55764c-5.7723.46641-6.14806.60621-11.33346,3.18485a91.52876,91.52876,0,0,0-9.39925,5.141c-.02831-1.23173-5.14414-5.9448-5.97211-5.0323-.82756.9125,2.13484,6.84138,1.47311,7.88064s-6.64637-2.67719-7.2717-3.73879c4.62278,6.37542,10.72675,18.97894,9.26213,26.7165a7.71584,7.71584,0,0,1,13.47639,4.64183c.32641,5.29026-4.57626,11.09012-1.37037,15.311,1.8339,2.41483,5.32737,2.61556,8.35974,2.6014l22.43475-2.50109c4.82016-7.68153,7.825-13.77387,9.13674-22.747C899.23011,339.77657,893.47076,330.24213,887.03875,323.84926Z" transform="translate(-169.87598 -106)" fill="#2f2e41"/></svg>
+33
src/docs/assets/undraw_yoga.svg
··· 1 + <svg xmlns="http://www.w3.org/2000/svg" width="802.704" height="751.589" viewBox="0 0 802.704 751.589" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" artist="Katerina Limpitsouni" source="https://undraw.co/"> 2 + <g id="Group_188" data-name="Group 188" transform="translate(-591 -185.668)"> 3 + <path id="Path_3038-1628" data-name="Path 3038" d="M1025.138,691.957H224.566c-.589,0-1.066-.779-1.066-1.741s.477-1.741,1.066-1.741h800.572c.589,0,1.066.779,1.066,1.741S1025.726,691.957,1025.138,691.957Z" transform="translate(367.5 226.498)" fill="#cacaca"/> 4 + <ellipse id="Ellipse_493" data-name="Ellipse 493" cx="11.689" cy="11.689" rx="11.689" ry="11.689" transform="translate(687.22 666.759)" fill="#6c63ff"/> 5 + <ellipse id="Ellipse_494" data-name="Ellipse 494" cx="11.689" cy="11.689" rx="11.689" ry="11.689" transform="translate(738.472 750.083)" fill="#6c63ff"/> 6 + <ellipse id="Ellipse_495" data-name="Ellipse 495" cx="11.689" cy="11.689" rx="11.689" ry="11.689" transform="translate(698.909 738.689)" fill="#6c63ff"/> 7 + <path id="Path_3079-1629" data-name="Path 3079" d="M351.649,672.223c-.206-.337-5.072-8.461-6.758-25.33-1.547-15.477-.552-41.563,12.977-77.952,25.63-68.936-5.907-124.558-6.229-125.112l1.556-.9c.082.14,8.219,14.322,13.027,36.9a161,161,0,0,1-6.668,89.738c-25.586,68.819-6.564,101.4-6.369,101.718Z" transform="translate(362.676 244.062)" fill="#cfcce0"/> 8 + <path id="Path_3080-1630" data-name="Path 3080" d="M336.4,431.319a12.588,12.588,0,1,1,12.588-12.588A12.588,12.588,0,0,1,336.4,431.319Zm0-23.377a10.789,10.789,0,1,0,10.789,10.789A10.789,10.789,0,0,0,336.4,407.942Z" transform="translate(367.902 253.423)" fill="#cfcce0"/> 9 + <ellipse id="Ellipse_496" data-name="Ellipse 496" cx="11.689" cy="11.689" rx="11.689" ry="11.689" transform="translate(729.481 703.624)" fill="#cfcce0"/> 10 + <path id="Path_3081-1631" data-name="Path 3081" d="M352.081,527.8a12.588,12.588,0,1,1,12.588-12.588A12.588,12.588,0,0,1,352.081,527.8Zm0-23.377a10.789,10.789,0,1,0,10.79,10.789,10.789,10.789,0,0,0-10.79-10.789Z" transform="translate(363.911 228.869)" fill="#cfcce0"/> 11 + <path id="Path_3082-1632" data-name="Path 3082" d="M393.087,560.367a12.588,12.588,0,1,1,12.588-12.588,12.588,12.588,0,0,1-12.588,12.588Zm0-23.377a10.789,10.789,0,1,0,10.789,10.789A10.79,10.79,0,0,0,393.087,536.989Z" transform="translate(353.474 207.698)" fill="#cfcce0"/> 12 + <ellipse id="Ellipse_497" data-name="Ellipse 497" cx="11.689" cy="11.689" rx="11.689" ry="11.689" transform="translate(695.314 794.434)" fill="#cfcce0"/> 13 + <path id="Path_3083-1633" data-name="Path 3083" d="M362.976,733.886s-11.689-28.772,23.377-50.351Z" transform="translate(358.41 182.829)" fill="#cfcce0"/> 14 + <path id="Path_3084-1634" data-name="Path 3084" d="M328.462,740.018s-5.32-30.6-46.492-30.334Z" transform="translate(378.55 176.175)" fill="#cfcce0"/> 15 + <path id="Path_3085-1635" data-name="Path 3085" d="M781.489,701.255H643.328s-2.8-41.075,13.769-41.541,14.7,18.2,35.474-7.468,45.976-24.271,49.243-9.1-6.3,27.305,11.2,23.571S795.725,672.783,781.489,701.255Z" transform="translate(536.137 213.093)" fill="#d6d6e3"/> 16 + <path id="Path_3086-1636" data-name="Path 3086" d="M771.989,701.04l-.466-.019c1.088-27.043,6.751-44.419,11.311-54.233,4.951-10.656,9.722-14.97,9.769-15.013l.31.349c-.047.042-4.762,4.313-9.673,14.9C778.705,656.794,773.072,674.1,771.989,701.04Z" transform="translate(474.224 213.318)" fill="#f2f2f2"/> 17 + <path id="Path_3087-1637" data-name="Path 3087" d="M868.592,737.3l-.448-.13a72.406,72.406,0,0,1,18.229-30.328l.314.345A71.914,71.914,0,0,0,868.592,737.3Z" transform="translate(427.626 177.116)" fill="#f2f2f2"/> 18 + <path id="Path_3088-1638" data-name="Path 3088" d="M687.58,772.42l-.971-.135c3.843-27.714-3.1-49.216-9.6-62.373-7.038-14.246-15.068-22.027-15.148-22.1l.678-.707c.082.078,8.236,7.979,15.349,22.377C684.45,722.759,691.457,744.459,687.58,772.42Z" transform="translate(397.38 141.311)" fill="#f2f2f2"/> 19 + <path id="Path_3089-1639" data-name="Path 3089" d="M786.263,686.114H614.45l-.04-.582c-.1-1.448-2.29-35.6,8.775-47.785a12.12,12.12,0,0,1,8.857-4.25c7.213-.205,11.746,2.5,15.4,4.665,6.891,4.088,11.444,6.789,28-13.669,17.931-22.162,37.278-26.93,48.4-24.279,7.186,1.713,12.139,6.556,13.588,13.286,1.373,6.372.935,12.36.584,17.171-.376,5.148-.673,9.214,1.441,11.057,1.765,1.538,5.288,1.677,11.086.44,11.794-2.516,28.249-.363,36.509,10.309,4.444,5.741,7.945,16.178-.612,33.292Zm-170.641-1.249H785.49c6.376-12.937,6.576-23.866.571-31.624-7.577-9.79-23.474-12.367-35.261-9.852-6.3,1.344-10.053,1.122-12.167-.72-2.585-2.252-2.268-6.593-1.867-12.089.346-4.732.776-10.62-.559-16.818-1.344-6.241-5.958-10.736-12.657-12.333-10.767-2.569-29.573,2.139-47.139,23.849-17.23,21.3-22.421,18.218-29.6,13.958-3.7-2.2-7.9-4.685-14.73-4.491a10.916,10.916,0,0,0-7.968,3.841C614.165,649.537,615.379,680.248,615.623,684.865Z" transform="translate(550.113 228.86)" fill="#cfcce0"/> 20 + <path id="Path_3090-1640" data-name="Path 3090" d="M613.505,191.765s-20.247-7.231-33.263,21.694S546.979,274.2,546.979,274.2l11.57,2.892s2.892-20.247,10.124-23.14l-2.892,26.032s74.41,30.371,113.458-2.892l4.339-10.362v10.362l10.124-4.577s-4.339-8.677-17.355-20.247a40.264,40.264,0,0,1-13.217-26.229,37.6,37.6,0,0,0-8.657-20.478C645.822,195.537,637.368,180.276,613.505,191.765Z" transform="translate(387.413 97.981)" fill="#090814"/> 21 + <path id="Path_3091-1641" data-name="Path 3091" d="M593.774,311.075,572.8,284.861l-15.728-53.738L617.366,166.9s13.107-49.806,1.311-47.184-14.417,39.32-14.417,39.32l-76.02,58.981s7.864,82.573,30.146,111.408l17.039,53.738Z" transform="translate(385.788 92.078)" fill="#ffb9b9"/> 22 + <path id="Path_3092-1642" data-name="Path 3092" d="M643.99,311.075l20.971-26.214,15.728-53.738L620.4,166.9s-13.107-49.806-1.311-47.184,14.417,39.32,14.417,39.32l76.02,58.981s-7.864,82.573-30.146,111.408l-17.039,53.738Z" transform="translate(393.242 92.078)" fill="#ffb9b9"/> 23 + <circle id="Ellipse_499" data-name="Ellipse 499" cx="31.436" cy="31.436" r="31.436" transform="translate(977.951 314.889)" fill="#ffb9b9"/> 24 + <path id="Path_3093-1643" data-name="Path 3093" d="M601.646,260.815s1.311,27.524-6.553,36.7-15.728,56.359,22.282,57.67,34.078-39.32,34.078-39.32l-7.864-22.282s-11.8-17.039-7.864-32.767Z" transform="translate(391.023 104.328)" fill="#ffb9b9"/> 25 + <path id="Path_3094-1644" data-name="Path 3094" d="M568.354,541.824l28.18,8.519s22.937-13.762,22.937-.655-7.864,30.146-5.243,41.942,7.864,40.631,0,40.631-23.592-51.117-23.592-51.117l-26.214-14.417Z" transform="translate(388.927 128.707)" fill="#ffb9b9"/> 26 + <path id="Path_3095-1645" data-name="Path 3095" d="M601.766,710.671,591.28,751.3s-9.175,11.8,0,17.039c4.305,2.46,7.456,7.518,9.588,12.193a22.417,22.417,0,0,0,22.012,13.317c4.474-.371,8.242-2.14,9.159-6.736a10.547,10.547,0,0,0-2.03-8.26c-9.668-13.065-11.86-21.655-11.86-21.655l3.932-45.874Z" transform="translate(390.903 143.356)" fill="#ffb9b9"/> 27 + <path id="Path_3096-1646" data-name="Path 3096" d="M577.365,253.31s13.026-25.689,23.149-28.582,13.628,0,13.628,0,22.518,11.57,38.427,13.016,1.446-24.929,1.446-24.929l-28.925-7.231-27.478,2.892-21.694,14.462Z" transform="translate(389.924 99.536)" fill="#090814"/> 28 + <path id="Path_3097-1647" data-name="Path 3097" d="M566.965,451.278l-5.243,10.485S434.586,502.395,445.072,540.4s69.466,27.524,69.466,27.524l65.534,11.8,6.553-28.835-45.874-11.8,78.641-28.835,2.621,133.689-10.485,95.68,26.214,2.621s28.835-87.816,24.9-124.515c0,0,48.5-149.418,20.971-171.7S566.965,451.278,566.965,451.278Z" transform="translate(378.519 119.641)" fill="#090814"/> 29 + <path id="Path_3098-1648" data-name="Path 3098" d="M622.053,313.59,601.6,288.874l-13.852,6.349L573.332,341.1s-11.8,22.282,2.621,45.874c0,0,2.621,15.728-1.311,19.66s-5.243,28.835-5.243,28.835l-17.039,32.767s96.99,17.039,125.825-6.553c0,0-15.131-55.784-5.956-72.823s10.485-43.16,0-54.956-21.568-42.609-21.568-42.609l-6.347-4.06Z" transform="translate(387.88 106.619)" fill="#6c63ff"/> 30 + <path id="Path_3099-1649" data-name="Path 3099" d="M461.613,88.424H449.043V75.853H447.9V88.424H435.33v1.142H447.9v12.571h1.142V89.566h12.571Z" transform="translate(624.782 136.098)" fill="#cfcce0"/> 31 + <path id="Path_3100-1650" data-name="Path 3100" d="M351.681,64.239H339.111V51.668h-1.142V64.239H325.4v1.142h12.57V77.951h1.142V65.381h12.571Z" transform="translate(615.244 134)" fill="#cfcce0"/> 32 + </g> 33 + </svg>
+53
src/docs/site-components/Cards.svelte
··· 26 26 import CardProse from '$docs/cards/base/CardProse.svelte'; 27 27 import CardAccordion from '$docs/cards/base/CardAccordion.svelte'; 28 28 import { cn } from '$lib/utils'; 29 + import CardExcalidraw from '$docs/cards/illustrations/CardExcalidraw.svelte'; 30 + import CardUndraw from '$docs/cards/illustrations/CardUndraw.svelte'; 29 31 30 32 let baseCards = [ 31 33 { ··· 193 195 href: 'github-corner' 194 196 } 195 197 ]; 198 + 199 + let illustrationsCards = [ 200 + { 201 + component: CardExcalidraw, 202 + className: '', 203 + label: 'Excalidraw', 204 + href: 'excalidraw' 205 + }, 206 + { 207 + component: CardUndraw, 208 + className: '', 209 + label: 'Undraw', 210 + href: 'undraw' 211 + } 212 + ]; 213 + 214 + // sort extraCards by label 215 + illustrationsCards.sort((a, b) => a.label.localeCompare(b.label)); 196 216 </script> 197 217 198 218 <h2 class="text-base-800 dark:text-base-200 mb-4 text-xl font-semibold">Base components</h2> ··· 225 245 </div> 226 246 {/each} 227 247 </div> 248 + 249 + 250 + <h2 class="hidden text-base-800 dark:text-base-200 mb-4 text-xl font-semibold mt-24">Illustrations components</h2> 251 + <div class="hidden w-full grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 md:gap-8 lg:grid-cols-4"> 252 + {#each illustrationsCards as card} 253 + <div 254 + class="group relative flex flex-col items-start gap-3 transition-opacity duration-150 hover:opacity-90 md:gap-4" 255 + > 256 + <div 257 + class="bg-base-100 dark:bg-base-900/30 border-base-200 dark:border-base-900 pointer-events-none relative h-44 w-full overflow-hidden rounded-2xl border" 258 + > 259 + <div 260 + class={cn( 261 + 'absolute inset-0 flex h-full w-full flex-col items-center justify-center gap-2 p-6 transition-transform duration-300 will-change-transform group-hover:scale-103', 262 + card.className 263 + )} 264 + aria-hidden="true" 265 + tabindex="-1" 266 + > 267 + <card.component /> 268 + </div> 269 + </div> 270 + <a 271 + href={base + `/components/extras/${card.href}`} 272 + class="focus-visible:outline-accent-500 rounded-xl focus-visible:outline-2 focus-visible:outline-offset-2" 273 + > 274 + <span class="text-base-900 dark:text-base-50 mx-2 text-sm font-semibold">{card.label}</span> 275 + <span class="absolute inset-0"></span> 276 + </a> 277 + </div> 278 + {/each} 279 + </div> 280 + 228 281 229 282 <!-- 230 283 <h2 class="text-base-800 dark:text-base-200 mt-24 mb-4 text-xl font-semibold">Graph components</h2>
+6
src/docs/cards/illustrations/CardExcalidraw.svelte
··· 1 + <script> 2 + import Excalidraw from '$lib/components/extra/excalidraw/Excalidraw.svelte'; 3 + import svg from '$docs/assets/demo.svg?raw'; 4 + </script> 5 + 6 + <Excalidraw {svg} alt="Excalidraw Demo" />
+16
src/docs/cards/illustrations/CardUndraw.svelte
··· 1 + <script lang="ts"> 2 + import Undraw from '$lib/components/extra/undraw/Undraw.svelte'; 3 + 4 + import svg from '$docs/assets/undraw_wireframing.svg?raw'; 5 + </script> 6 + 7 + 8 + <div class="max-h-full"> 9 + <Undraw svg={svg} alt="Undraw" colorMap={{ 10 + '#3f3d56': 'fill-base-950 dark:fill-base-600', 11 + '#2f2e41': 'fill-base-800 dark:fill-base-800', 12 + '#e4e4e4': 'fill-base-300 dark:fill-base-700', 13 + '#cacaca': 'fill-base-400 dark:fill-base-600', 14 + }} /> 15 + </div> 16 +
+23 -58
src/lib/components/extra/excalidraw/Excalidraw.svelte
··· 1 1 <script lang="ts"> 2 2 import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui'; 3 - import { onMount } from 'svelte'; 4 3 import type { HTMLAttributes } from 'svelte/elements'; 5 4 import { cn } from '$lib/utils'; 5 + 6 + import { load } from 'cheerio'; 6 7 7 8 let { 8 9 ref = $bindable(null), ··· 19 20 captionClass?: string; 20 21 } = $props(); 21 22 22 - let modifiedSvg = $state(''); 23 + function modifySvg(svgString: string): string { 24 + const loadedSvg = load(svgString, { xmlMode: true }); 23 25 24 - // Function to modify the SVG using the DOM API 25 - function modifySvg(svgString: string) { 26 - // Create a DOM parser 27 - const parser = new DOMParser(); 28 - const doc = parser.parseFromString(svgString, 'image/svg+xml'); 29 - const svg = doc.documentElement; 26 + const svg = loadedSvg('svg'); 27 + svg.attr('width', '100%'); 28 + svg.attr('height', '100%'); 29 + svg.addClass('w-full h-auto'); 30 + svg.removeAttr('filter'); 30 31 31 - // Modify the SVG element 32 - svg.setAttribute('width', '100%'); 33 - svg.setAttribute('height', '100%'); 34 - svg.classList.add('w-full', 'h-auto'); 35 - svg.removeAttribute('filter'); 36 - 37 - // Modify text elements 38 - const textElements = svg.querySelectorAll('text'); 39 - textElements.forEach((el) => { 40 - el.removeAttribute('fill'); 41 - el.classList.add('fill-base-800', 'dark:fill-base-100'); 32 + loadedSvg('text').each((_, el) => { 33 + loadedSvg(el).removeAttr('fill'); 34 + loadedSvg(el).addClass('fill-base-800 dark:fill-base-100'); 42 35 }); 43 36 44 - // Modify rect elements 45 - const rectElements = svg.querySelectorAll('rect'); 46 - rectElements.forEach((el) => { 47 - el.removeAttribute('fill'); 48 - el.classList.add('fill-accent-600', 'dark:fill-accent-500'); 37 + loadedSvg('rect').each((_, el) => { 38 + loadedSvg(el).removeAttr('fill'); 39 + loadedSvg(el).addClass('fill-accent-600 dark:fill-accent-500'); 49 40 }); 50 41 51 - // Modify path elements 52 - const pathElements = svg.querySelectorAll('path'); 53 - pathElements.forEach((el) => { 54 - el.removeAttribute('stroke'); 55 - el.classList.add('stroke-accent-600', 'dark:stroke-accent-500'); 56 - if (el.getAttribute('fill') !== 'none') { 57 - el.classList.add('fill-accent-600', 'dark:fill-accent-500'); 58 - el.removeAttribute('fill'); 42 + loadedSvg('path').each((_, el) => { 43 + loadedSvg(el).removeAttr('stroke'); 44 + loadedSvg(el).addClass('stroke-accent-600 dark:stroke-accent-500'); 45 + if (loadedSvg(el).attr('fill') !== 'none') { 46 + loadedSvg(el).addClass('fill-accent-600 dark:fill-accent-500'); 47 + loadedSvg(el).removeAttr('fill'); 59 48 } 60 49 }); 61 50 62 - // Modify group elements 63 - const groupElements = svg.querySelectorAll('g'); 64 - groupElements.forEach((el) => { 65 - el.classList.add('excalidraw-element'); 66 - }); 67 - 68 - // Convert back to string 69 - return new XMLSerializer().serializeToString(svg); 51 + return loadedSvg.html(); 70 52 } 71 53 72 - onMount(async () => { 73 - modifiedSvg = modifySvg(svg); 74 - }); 75 54 </script> 76 55 77 56 <figure ··· 80 59 {...restProps} 81 60 > 82 61 <div class="excalidraw-svg w-full" aria-label={alt}> 83 - {@html modifiedSvg} 62 + {@html modifySvg(svg)} 84 63 </div> 85 64 {#if caption} 86 65 <figcaption ··· 90 69 </figcaption> 91 70 {/if} 92 71 </figure> 93 - 94 - <noscript> 95 - <div 96 - class="border-base-200 bg-base-100 text-base-700 dark:border-base-700 dark:bg-base-900 dark:text-base-300 w-full rounded-2xl border p-4 text-sm" 97 - > 98 - JavaScript is required to view this content. 99 - </div> 100 - 101 - <style> 102 - .excalidraw-container { 103 - display: none; 104 - } 105 - </style> 106 - </noscript>
+117
src/lib/components/extra/undraw/Undraw.svelte
··· 1 + <script lang="ts"> 2 + import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui'; 3 + import type { HTMLAttributes } from 'svelte/elements'; 4 + import { cn } from '$lib/utils'; 5 + 6 + import { load, type CheerioAPI } from 'cheerio'; 7 + import { okhsv_to_rgb, rgb_to_hex, rgb_to_okhsv } from '../color-picker/base/color'; 8 + 9 + let { 10 + ref = $bindable(null), 11 + svg, 12 + alt, 13 + caption, 14 + class: className, 15 + captionClass, 16 + autoInvert = false, 17 + colorMap = {}, 18 + ...restProps 19 + }: WithElementRef<WithoutChildrenOrChild<HTMLAttributes<HTMLElement>>> & { 20 + svg: string; 21 + alt: string; 22 + caption?: string; 23 + captionClass?: string; 24 + autoInvert?: boolean; 25 + colorMap?: Record<string, string>; 26 + } = $props(); 27 + 28 + function applyClasses(loadedSvg: CheerioAPI, el: any) { 29 + let fill = loadedSvg(el).attr('fill'); 30 + if(!fill) return; 31 + 32 + if (fill === '#6c63ff') { 33 + loadedSvg(el).removeAttr('fill'); 34 + loadedSvg(el).addClass('fill-accent-600 dark:fill-accent-500'); 35 + } else if ( 36 + fill.startsWith('#') && 37 + !fill.includes('url') && 38 + autoInvert 39 + ) { 40 + loadedSvg(el).addClass('dark:invert dark:hue-rotate-180'); 41 + } else if (colorMap[fill]) { 42 + loadedSvg(el).removeAttr('fill'); 43 + loadedSvg(el).addClass(colorMap[fill]); 44 + } 45 + } 46 + 47 + function modifySvg(svgString: string): string { 48 + const loadedSvg = load(svgString, { xmlMode: true }); 49 + 50 + const svg = loadedSvg('svg'); 51 + svg.attr('width', '100%'); 52 + svg.attr('height', '100%'); 53 + svg.addClass('w-full h-auto'); 54 + svg.removeAttr('filter'); 55 + 56 + loadedSvg('path').each((_, el) => { 57 + applyClasses(loadedSvg, el); 58 + }); 59 + loadedSvg('text').each((_, el) => { 60 + applyClasses(loadedSvg, el); 61 + }); 62 + loadedSvg('rect').each((_, el) => { 63 + applyClasses(loadedSvg, el); 64 + }); 65 + loadedSvg('circle').each((_, el) => { 66 + applyClasses(loadedSvg, el); 67 + }); 68 + loadedSvg('ellipse').each((_, el) => { 69 + applyClasses(loadedSvg, el); 70 + }); 71 + loadedSvg('polygon').each((_, el) => { 72 + applyClasses(loadedSvg, el); 73 + }); 74 + loadedSvg('line').each((_, el) => { 75 + applyClasses(loadedSvg, el); 76 + }); 77 + 78 + 79 + // loadedSvg('text').each((_, el) => { 80 + // loadedSvg(el).removeAttr('fill'); 81 + // loadedSvg(el).addClass('fill-base-800 dark:fill-base-100'); 82 + // }); 83 + 84 + // loadedSvg('rect').each((_, el) => { 85 + // loadedSvg(el).removeAttr('fill'); 86 + // loadedSvg(el).addClass('fill-accent-600 dark:fill-accent-500'); 87 + // }); 88 + 89 + // loadedSvg('path').each((_, el) => { 90 + // loadedSvg(el).removeAttr('stroke'); 91 + // loadedSvg(el).addClass('stroke-accent-600 dark:stroke-accent-500'); 92 + // if (loadedSvg(el).attr('fill') !== 'none') { 93 + // loadedSvg(el).addClass('fill-accent-600 dark:fill-accent-500'); 94 + // loadedSvg(el).removeAttr('fill'); 95 + // } 96 + // }); 97 + 98 + return loadedSvg.html(); 99 + } 100 + </script> 101 + 102 + <figure 103 + bind:this={ref} 104 + class={cn('excalidraw-container mx-auto w-full max-w-full overflow-hidden', className)} 105 + {...restProps} 106 + > 107 + <div class="excalidraw-svg w-full" aria-label={alt}> 108 + {@html modifySvg(svg)} 109 + </div> 110 + {#if caption} 111 + <figcaption 112 + class={cn('text-base-700 dark:text-base-300 mt-4 text-center text-xs', captionClass)} 113 + > 114 + {caption} 115 + </figcaption> 116 + {/if} 117 + </figure>
+19
src/routes/components/extras/undraw/+page.svelte
··· 1 + <script lang="ts"> 2 + import Undraw from '$lib/components/extra/undraw/Undraw.svelte'; 3 + 4 + import svg from '$docs/assets/undraw_yoga.svg?raw'; 5 + </script> 6 + 7 + <div class="w-full max-w-md mx-auto"> 8 + <Undraw 9 + {svg} 10 + alt="Undraw" 11 + colorMap={{ 12 + '#090814': 'fill-base-950 dark:fill-accent-950', 13 + '#d6d6e3': 'fill-base-300 dark:fill-base-700', 14 + '#cacaca': 'fill-base-400 dark:fill-base-600', 15 + '#cfcce0': 'fill-base-500 dark:fill-base-500', 16 + '#f2f2f2': 'fill-base-200 dark:fill-base-800' 17 + }} 18 + /> 19 + </div>