[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
fixes, add social package
+3131
-277
+1
package.json
+1
package.json
+199
-2
pnpm-lock.yaml
+199
-2
pnpm-lock.yaml
···
57
57
'@fuxui/colors':
58
58
specifier: workspace:*
59
59
version: link:../../packages/colors
60
+
'@fuxui/social':
61
+
specifier: workspace:*
62
+
version: link:../../packages/social
60
63
'@fuxui/time':
61
64
specifier: workspace:*
62
65
version: link:../../packages/time
···
391
394
specifier: ^1.4.1
392
395
version: 1.4.1(vite@6.3.2)
393
396
397
+
packages/social:
398
+
dependencies:
399
+
'@atproto/api':
400
+
specifier: ^0.15.5
401
+
version: 0.15.5
402
+
'@fuxui/base':
403
+
specifier: workspace:*
404
+
version: link:../base
405
+
'@use-gesture/vanilla':
406
+
specifier: ^10.3.1
407
+
version: 10.3.1
408
+
bits-ui:
409
+
specifier: ^1.4.3
410
+
version: 1.4.3(svelte@5.28.1)
411
+
hls.js:
412
+
specifier: ^1.6.2
413
+
version: 1.6.2
414
+
plyr:
415
+
specifier: ^3.7.8
416
+
version: 3.7.8
417
+
devDependencies:
418
+
'@eslint/compat':
419
+
specifier: ^1.2.5
420
+
version: 1.2.5(eslint@9.25.0)
421
+
'@eslint/js':
422
+
specifier: ^9.18.0
423
+
version: 9.25.0
424
+
'@sveltejs/adapter-auto':
425
+
specifier: ^6.0.0
426
+
version: 6.0.0(@sveltejs/kit@2.20.0)
427
+
'@sveltejs/adapter-static':
428
+
specifier: ^3.0.8
429
+
version: 3.0.8(@sveltejs/kit@2.20.0)
430
+
'@sveltejs/kit':
431
+
specifier: ^2.16.0
432
+
version: 2.20.0(@sveltejs/vite-plugin-svelte@5.0.3)(svelte@5.28.1)(vite@6.3.2)
433
+
'@sveltejs/package':
434
+
specifier: ^2.3.11
435
+
version: 2.3.11(svelte@5.28.1)(typescript@5.8.2)
436
+
'@sveltejs/vite-plugin-svelte':
437
+
specifier: ^5.0.0
438
+
version: 5.0.3(svelte@5.28.1)(vite@6.3.2)
439
+
'@tailwindcss/forms':
440
+
specifier: ^0.5.9
441
+
version: 0.5.9(tailwindcss@4.1.5)
442
+
'@tailwindcss/typography':
443
+
specifier: ^0.5.15
444
+
version: 0.5.15(tailwindcss@4.1.5)
445
+
'@tailwindcss/vite':
446
+
specifier: ^4.1.5
447
+
version: 4.1.5(vite@6.3.2)
448
+
eslint:
449
+
specifier: ^9.18.0
450
+
version: 9.25.0
451
+
eslint-config-prettier:
452
+
specifier: ^10.0.1
453
+
version: 10.1.1(eslint@9.25.0)
454
+
eslint-plugin-svelte:
455
+
specifier: ^3.0.0
456
+
version: 3.0.0(eslint@9.25.0)(svelte@5.28.1)
457
+
globals:
458
+
specifier: ^16.0.0
459
+
version: 16.0.0
460
+
prettier:
461
+
specifier: ^3.4.2
462
+
version: 3.5.2
463
+
prettier-plugin-svelte:
464
+
specifier: ^3.3.3
465
+
version: 3.3.3(prettier@3.5.2)(svelte@5.28.1)
466
+
prettier-plugin-tailwindcss:
467
+
specifier: ^0.6.11
468
+
version: 0.6.11(prettier-plugin-svelte@3.3.3)(prettier@3.5.2)
469
+
svelte:
470
+
specifier: ^5.0.0
471
+
version: 5.28.1
472
+
svelte-check:
473
+
specifier: ^4.0.0
474
+
version: 4.1.4(svelte@5.28.1)(typescript@5.8.2)
475
+
tailwindcss:
476
+
specifier: ^4.1.5
477
+
version: 4.1.5
478
+
typescript:
479
+
specifier: ^5.0.0
480
+
version: 5.8.2
481
+
typescript-eslint:
482
+
specifier: ^8.20.0
483
+
version: 8.30.1(eslint@9.25.0)(typescript@5.8.2)
484
+
vite:
485
+
specifier: ^6.2.6
486
+
version: 6.3.2
487
+
394
488
packages/time:
395
489
dependencies:
396
490
'@fuxui/base':
···
563
657
dependencies:
564
658
'@jridgewell/gen-mapping': 0.3.8
565
659
'@jridgewell/trace-mapping': 0.3.25
660
+
661
+
/@atproto/api@0.15.5:
662
+
resolution: {integrity: sha512-GiKOrjSXMm8OSpc+pfjFTBYQGX62jmorECkTx2VZbS6KtFKFY0cRQAI+JnQoOLF/8TvzpaAZB7+it73uIqDM7A==, tarball: https://registry.npmjs.org/@atproto/api/-/api-0.15.5.tgz}
663
+
dependencies:
664
+
'@atproto/common-web': 0.4.1
665
+
'@atproto/lexicon': 0.4.10
666
+
'@atproto/syntax': 0.4.0
667
+
'@atproto/xrpc': 0.6.12
668
+
await-lock: 2.2.2
669
+
multiformats: 9.9.0
670
+
tlds: 1.258.0
671
+
zod: 3.24.3
672
+
dev: false
673
+
674
+
/@atproto/common-web@0.4.1:
675
+
resolution: {integrity: sha512-Ghh+djHYMAUCktLKwr2IuGgtjcwSWGudp+K7+N7KBA9pDDloOXUEY8Agjc5SHSo9B1QIEFkegClU5n+apn2e0w==, tarball: https://registry.npmjs.org/@atproto/common-web/-/common-web-0.4.1.tgz}
676
+
dependencies:
677
+
graphemer: 1.4.0
678
+
multiformats: 9.9.0
679
+
uint8arrays: 3.0.0
680
+
zod: 3.24.3
681
+
dev: false
682
+
683
+
/@atproto/lexicon@0.4.10:
684
+
resolution: {integrity: sha512-uDbP20vetBgtXPuxoyRcvOGBt2gNe1dFc9yYKcb6jWmXfseHiGTnIlORJOLBXIT2Pz15Eap4fLxAu6zFAykD5A==, tarball: https://registry.npmjs.org/@atproto/lexicon/-/lexicon-0.4.10.tgz}
685
+
dependencies:
686
+
'@atproto/common-web': 0.4.1
687
+
'@atproto/syntax': 0.4.0
688
+
iso-datestring-validator: 2.2.2
689
+
multiformats: 9.9.0
690
+
zod: 3.24.3
691
+
dev: false
692
+
693
+
/@atproto/syntax@0.4.0:
694
+
resolution: {integrity: sha512-b9y5ceHS8YKOfP3mdKmwAx5yVj9294UN7FG2XzP6V5aKUdFazEYRnR9m5n5ZQFKa3GNvz7de9guZCJ/sUTcOAA==, tarball: https://registry.npmjs.org/@atproto/syntax/-/syntax-0.4.0.tgz}
695
+
dev: false
696
+
697
+
/@atproto/xrpc@0.6.12:
698
+
resolution: {integrity: sha512-Ut3iISNLujlmY9Gu8sNU+SPDJDvqlVzWddU8qUr0Yae5oD4SguaUFjjhireMGhQ3M5E0KljQgDbTmnBo1kIZ3w==, tarball: https://registry.npmjs.org/@atproto/xrpc/-/xrpc-0.6.12.tgz}
699
+
dependencies:
700
+
'@atproto/lexicon': 0.4.10
701
+
zod: 3.24.3
702
+
dev: false
566
703
567
704
/@babel/runtime@7.27.1:
568
705
resolution: {integrity: sha512-1x3D2xEk2fRo3PAhwQwu5UubzgiVWSXTBfWpVd2Mx2AzRqJuDJCsgaDVZ7HB5iGzDW1Hl1sWN2mFyKjmR9uAog==, tarball: https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.1.tgz}
···
1841
1978
engines: {node: '>=8'}
1842
1979
dev: true
1843
1980
1981
+
/await-lock@2.2.2:
1982
+
resolution: {integrity: sha512-aDczADvlvTGajTDjcjpJMqRkOF6Qdz3YbPZm/PyW6tKPkx2hlYBzxMhEywM/tU72HrVZjgl5VCdRuMlA7pZ8Gw==, tarball: https://registry.npmjs.org/await-lock/-/await-lock-2.2.2.tgz}
1983
+
dev: false
1984
+
1844
1985
/axobject-query@4.1.0:
1845
1986
resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==, tarball: https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz}
1846
1987
engines: {node: '>= 0.4'}
···
1990
2131
resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==, tarball: https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz}
1991
2132
engines: {node: '>= 0.6'}
1992
2133
2134
+
/core-js@3.42.0:
2135
+
resolution: {integrity: sha512-Sz4PP4ZA+Rq4II21qkNqOEDTDrCvcANId3xpIgB34NDkWc3UduWj2dqEtN9yZIq8Dk3HyPI33x9sqqU5C8sr0g==, tarball: https://registry.npmjs.org/core-js/-/core-js-3.42.0.tgz}
2136
+
dev: false
2137
+
1993
2138
/cross-spawn@7.0.6:
1994
2139
resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
1995
2140
engines: {node: '>= 8'}
···
2018
2163
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
2019
2164
engines: {node: '>=4'}
2020
2165
dev: true
2166
+
2167
+
/custom-event-polyfill@1.0.7:
2168
+
resolution: {integrity: sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==, tarball: https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz}
2169
+
dev: false
2021
2170
2022
2171
/dataloader@1.4.0:
2023
2172
resolution: {integrity: sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==, tarball: https://registry.npmjs.org/dataloader/-/dataloader-1.4.0.tgz}
···
2501
2650
2502
2651
/graphemer@1.4.0:
2503
2652
resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
2504
-
dev: true
2505
2653
2506
2654
/has-flag@4.0.0:
2507
2655
resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
2508
2656
engines: {node: '>=8'}
2509
2657
dev: true
2658
+
2659
+
/hls.js@1.6.2:
2660
+
resolution: {integrity: sha512-rx+pETSCJEDThm/JCm8CuadcAC410cVjb1XVXFNDKFuylaayHk1+tFxhkjvnMDAfqsJHxZXDAJ3Uc2d5xQyWlQ==, tarball: https://registry.npmjs.org/hls.js/-/hls.js-1.6.2.tgz}
2661
+
dev: false
2510
2662
2511
2663
/htmlparser2@9.1.0:
2512
2664
resolution: {integrity: sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==, tarball: https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz}
···
2598
2750
/isexe@2.0.0:
2599
2751
resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
2600
2752
dev: true
2753
+
2754
+
/iso-datestring-validator@2.2.2:
2755
+
resolution: {integrity: sha512-yLEMkBbLZTlVQqOnQ4FiMujR6T4DEcCb1xizmvXS+OxuhwcbtynoosRzdMA69zZCShCNAbi+gJ71FxZBBXx1SA==, tarball: https://registry.npmjs.org/iso-datestring-validator/-/iso-datestring-validator-2.2.2.tgz}
2756
+
dev: false
2601
2757
2602
2758
/jiti@2.4.2:
2603
2759
resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==, tarball: https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz}
···
2761
2917
engines: {node: '>=10'}
2762
2918
dev: true
2763
2919
2920
+
/loadjs@4.3.0:
2921
+
resolution: {integrity: sha512-vNX4ZZLJBeDEOBvdr2v/F+0aN5oMuPu7JTqrMwp+DtgK+AryOlpy6Xtm2/HpNr+azEa828oQjOtWsB6iDtSfSQ==, tarball: https://registry.npmjs.org/loadjs/-/loadjs-4.3.0.tgz}
2922
+
dev: false
2923
+
2764
2924
/locate-character@3.0.0:
2765
2925
resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
2766
2926
···
2858
3018
dev: true
2859
3019
2860
3020
/minimatch@9.0.5:
2861
-
resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
3021
+
resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==, tarball: https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz}
2862
3022
engines: {node: '>=16 || 14 >=14.17'}
2863
3023
dependencies:
2864
3024
brace-expansion: 2.0.1
···
2878
3038
2879
3039
/ms@2.1.3:
2880
3040
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
3041
+
3042
+
/multiformats@9.9.0:
3043
+
resolution: {integrity: sha512-HoMUjhH9T8DDBNT+6xzkrd9ga/XiBI4xLr58LJACwK6G3HTOPeMz4nB4KJs33L2BelrIJa7P0VuNaVF3hMYfjg==, tarball: https://registry.npmjs.org/multiformats/-/multiformats-9.9.0.tgz}
3044
+
dev: false
2881
3045
2882
3046
/nanoid@3.3.8:
2883
3047
resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
···
3055
3219
engines: {node: '>=6'}
3056
3220
dev: true
3057
3221
3222
+
/plyr@3.7.8:
3223
+
resolution: {integrity: sha512-yG/EHDobwbB/uP+4Bm6eUpJ93f8xxHjjk2dYcD1Oqpe1EcuQl5tzzw9Oq+uVAzd2lkM11qZfydSiyIpiB8pgdA==, tarball: https://registry.npmjs.org/plyr/-/plyr-3.7.8.tgz}
3224
+
dependencies:
3225
+
core-js: 3.42.0
3226
+
custom-event-polyfill: 1.0.7
3227
+
loadjs: 4.3.0
3228
+
rangetouch: 2.0.1
3229
+
url-polyfill: 1.1.13
3230
+
dev: false
3231
+
3058
3232
/postcss-load-config@3.1.4(postcss@8.5.3):
3059
3233
resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
3060
3234
engines: {node: '>= 10'}
···
3220
3394
/queue-microtask@1.2.3:
3221
3395
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
3222
3396
dev: true
3397
+
3398
+
/rangetouch@2.0.1:
3399
+
resolution: {integrity: sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA==, tarball: https://registry.npmjs.org/rangetouch/-/rangetouch-2.0.1.tgz}
3400
+
dev: false
3223
3401
3224
3402
/read-yaml-file@1.1.0:
3225
3403
resolution: {integrity: sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA==, tarball: https://registry.npmjs.org/read-yaml-file/-/read-yaml-file-1.1.0.tgz}
···
3550
3728
fdir: 6.4.4(picomatch@4.0.2)
3551
3729
picomatch: 4.0.2
3552
3730
3731
+
/tlds@1.258.0:
3732
+
resolution: {integrity: sha512-XGhStWuOlBA5D8QnyN2xtgB2cUOdJ3ztisne1DYVWMcVH29qh8eQIpRmP3HnuJLdgyzG0HpdGzRMu1lm/Oictw==, tarball: https://registry.npmjs.org/tlds/-/tlds-1.258.0.tgz}
3733
+
hasBin: true
3734
+
dev: false
3735
+
3553
3736
/tmp@0.0.33:
3554
3737
resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==, tarball: https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz}
3555
3738
engines: {node: '>=0.6.0'}
···
3694
3877
engines: {node: '>=14.17'}
3695
3878
dev: true
3696
3879
3880
+
/uint8arrays@3.0.0:
3881
+
resolution: {integrity: sha512-HRCx0q6O9Bfbp+HHSfQQKD7wU70+lydKVt4EghkdOvlK/NlrF90z+eXV34mUd48rNvVJXwkrMSPpCATkct8fJA==, tarball: https://registry.npmjs.org/uint8arrays/-/uint8arrays-3.0.0.tgz}
3882
+
dependencies:
3883
+
multiformats: 9.9.0
3884
+
dev: false
3885
+
3697
3886
/undici@6.21.2:
3698
3887
resolution: {integrity: sha512-uROZWze0R0itiAKVPsYhFov9LxrPMHLMEQFszeI2gCN6bnIIZ8twzBCJcN2LJrBBLfrP0t1FW0g+JmKVl8Vk1g==, tarball: https://registry.npmjs.org/undici/-/undici-6.21.2.tgz}
3699
3888
engines: {node: '>=18.17'}
···
3734
3923
dependencies:
3735
3924
punycode: 2.3.1
3736
3925
dev: true
3926
+
3927
+
/url-polyfill@1.1.13:
3928
+
resolution: {integrity: sha512-tXzkojrv2SujumYthZ/WjF7jaSfNhSXlYMpE5AYdL2I3D7DCeo+mch8KtW2rUuKjDg+3VXODXHVgipt8yGY/eQ==, tarball: https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.13.tgz}
3929
+
dev: false
3737
3930
3738
3931
/util-deprecate@1.0.2:
3739
3932
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
···
3867
4060
3868
4061
/zimmerframe@1.1.2:
3869
4062
resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}
4063
+
4064
+
/zod@3.24.3:
4065
+
resolution: {integrity: sha512-HhY1oqzWCQWuUqvBFnsyrtZRhyPeR7SUGv+C4+MsisMuVfSPx8HpwWqH8tRahSlt6M3PiFAcoeFhZAqIXTxoSg==, tarball: https://registry.npmjs.org/zod/-/zod-3.24.3.tgz}
4066
+
dev: false
3870
4067
3871
4068
github.com/jerzakm/three-perf/322d7d38a17069f2b6e9734913edad0fc4a29169(three@0.176.0):
3872
4069
resolution: {tarball: https://codeload.github.com/jerzakm/three-perf/tar.gz/322d7d38a17069f2b6e9734913edad0fc4a29169}
+1
apps/docs/package.json
+1
apps/docs/package.json
apps/docs/static/opengraph.png
apps/docs/static/opengraph.png
This is a binary file and will not be displayed.
+8
-1
apps/docs/src/routes/+layout.svelte
+8
-1
apps/docs/src/routes/+layout.svelte
···
2
2
import { Head, Toaster } from '@fuxui/base';
3
3
import '../app.css';
4
4
import '../prism.css';
5
+
import { base } from '$app/paths';
5
6
6
7
let { children } = $props();
7
8
</script>
8
9
9
10
{@render children()}
10
11
11
-
<Head title="fox ui" emojiFavicon="🦊" />
12
+
<Head
13
+
title="fox ui"
14
+
description="🦊 fox ui, svelte 5 & tailwind 4"
15
+
image={base + '/opengraph.png'}
16
+
url="https://flo-bit.dev/ui-kit"
17
+
emojiFavicon="🦊"
18
+
/>
12
19
13
20
<Toaster />
+6
apps/docs/src/lib/site-components/components_all.ts
+6
apps/docs/src/lib/site-components/components_all.ts
···
1
1
import { threeDComponents } from './components_3d';
2
2
import { type ComponentCard, baseComponents } from './components_base';
3
3
import { colorsComponents } from './components_colors';
4
+
import { socialComponents } from './components_social';
4
5
import { timeComponents } from './components_time';
5
6
import { visualComponents } from './components_visual';
6
7
···
18
19
name: 'Colors',
19
20
components: colorsComponents,
20
21
href: 'colors'
22
+
},
23
+
{
24
+
name: 'Social',
25
+
components: socialComponents,
26
+
href: 'social'
21
27
},
22
28
{
23
29
name: '3D',
+6
apps/docs/src/lib/site-components/components_visual.ts
+6
apps/docs/src/lib/site-components/components_visual.ts
···
3
3
import CardPhone from '$lib/cards/visual/CardPhone.svelte';
4
4
import CardQuote from '$lib/cards/visual/CardQuote.svelte';
5
5
import CardUndraw from '$lib/cards/visual/CardUndraw.svelte';
6
+
import CardImageMasonry from '$lib/cards/visual/CardImageMasonry.svelte';
6
7
7
8
export const visualComponents: ComponentCard[] = [
8
9
{
···
24
25
component: CardUndraw,
25
26
label: 'Undraw',
26
27
href: 'undraw'
28
+
},
29
+
{
30
+
component: CardImageMasonry,
31
+
label: 'Image Masonry',
32
+
href: 'image-masonry'
27
33
}
28
34
].sort((a, b) => a.label.localeCompare(b.label));
+32
-47
packages/base/src/lib/components/index.ts
+32
-47
packages/base/src/lib/components/index.ts
···
1
-
export { Accordion, AccordionItem } from './accordion';
2
-
export { Alert, AlertDescription, AlertTitle } from './alert';
3
-
export { Avatar, AvatarGroup } from './avatar';
4
-
export { Badge } from './badge';
5
-
6
-
export { Button } from './button';
7
-
export { type ButtonProps } from './button/Button.svelte';
8
-
export { type ButtonSize, type ButtonVariant, buttonVariants } from './button/';
9
-
10
-
export { default as Box } from './box/Box.svelte';
11
-
export { default as ImageCard } from './card/ImageCard.svelte';
12
-
export { default as ChatBubble } from './chat-bubble/ChatBubble.svelte';
13
-
export { Checkbox } from './checkbox';
14
-
export { default as Head } from './head/Head.svelte';
15
-
export { default as Heading } from './heading/Heading.svelte';
16
-
export { default as Image } from './image/Image.svelte';
17
-
export { type ImageProps } from './image/Image.svelte';
18
-
export { default as ImageContainer } from './image-container/ImageContainer.svelte';
19
-
export { Input } from './input/';
20
-
export { Label } from './label/';
21
-
export { default as Modal } from './modal/Modal.svelte';
22
-
export { default as NumberInput } from './number-input/NumberInput.svelte';
23
-
export { default as Prose } from './prose/Prose.svelte';
24
-
export { default as ScrollArea } from './scroll-area/ScrollArea.svelte';
25
-
export { Slider } from './slider';
26
-
export { Select } from './select/';
27
-
export { default as SliderNumber } from './slider/SliderNumber.svelte';
28
-
export { Toaster } from './sonner/';
29
-
export { toast } from 'svelte-sonner';
30
-
export { Switch } from './switch/';
31
-
export { Paragraph } from './paragraph/';
32
-
export { Textarea } from './textarea';
33
-
export { Tooltip } from './tooltip';
34
-
export { default as Popover } from './popover/Popover.svelte';
35
-
export { default as Subheading } from './heading/Subheading.svelte';
36
-
37
-
export { default as AddCopyCodeButtons } from './copy-code-button/AddCopyCodeButtons.svelte';
38
-
39
-
export { Toggle } from './toggle';
40
-
export { ToggleGroup, ToggleGroupItem } from './toggle-group';
41
-
42
-
export { default as BlueskyLoginModal } from './modal/BlueskyLoginModal.svelte';
43
-
export { blueskyLoginModalState } from './modal/BlueskyLoginModal.svelte';
44
-
45
-
export { default as ThemeToggle } from './theme-toggle/ThemeToggle.svelte';
46
-
export { default as Navbar } from './navbar/Navbar.svelte';
47
-
export { default as Sidebar } from './sidebar/Sidebar.svelte';
1
+
export * from './accordion';
2
+
export * from './alert';
3
+
export * from './avatar';
4
+
export * from './badge';
5
+
export * from './box';
6
+
export * from './button';
7
+
export * from './card';
8
+
export * from './chat-bubble';
9
+
export * from './checkbox';
10
+
export * from './head';
11
+
export * from './heading';
12
+
export * from './image';
13
+
export * from './image-container';
14
+
export * from './input';
15
+
export * from './label';
16
+
export * from './modal';
17
+
export * from './navbar';
18
+
export * from './number-input';
19
+
export * from './paragraph';
20
+
export * from './popover';
21
+
export * from './prose';
22
+
export * from './scroll-area';
23
+
export * from './select';
24
+
export * from './sidebar';
25
+
export * from './slider';
26
+
export * from './sonner';
27
+
export * from './switch';
28
+
export * from './textarea';
29
+
export * from './theme-toggle';
30
+
export * from './toggle';
31
+
export * from './toggle-group';
32
+
export * from './tooltip';
+1
packages/visual/src/lib/components/index.ts
+1
packages/visual/src/lib/components/index.ts
+64
apps/docs/src/lib/cards/visual/CardImageMasonry.svelte
+64
apps/docs/src/lib/cards/visual/CardImageMasonry.svelte
···
1
+
<script>
2
+
import { ImageMasonry } from '@fuxui/visual';
3
+
4
+
import profile1 from '$lib/assets/profiles/0.webp';
5
+
import profile2 from '$lib/assets/profiles/1.webp';
6
+
import profile3 from '$lib/assets/profiles/2.webp';
7
+
import profile4 from '$lib/assets/profiles/3.webp';
8
+
import profile5 from '$lib/assets/profiles/4.webp';
9
+
import profile6 from '$lib/assets/profiles/5.webp';
10
+
import profile7 from '$lib/assets/profiles/6.webp';
11
+
import profile8 from '$lib/assets/profiles/7.webp';
12
+
import profile9 from '$lib/assets/profiles/8.webp';
13
+
import profile10 from '$lib/assets/profiles/9.webp';
14
+
import { toast } from '@fuxui/base';
15
+
16
+
const images = [
17
+
{
18
+
src: profile1,
19
+
name: 'Image 1',
20
+
width: 200,
21
+
height: 300
22
+
},
23
+
{
24
+
src: profile2,
25
+
name: 'Image 2',
26
+
width: 200,
27
+
height: 130
28
+
},
29
+
{
30
+
src: profile3,
31
+
name: 'Image 3',
32
+
width: 200,
33
+
height: 200
34
+
},
35
+
{
36
+
src: profile4,
37
+
name: 'Image 4',
38
+
width: 0.8
39
+
},
40
+
{
41
+
src: profile5,
42
+
name: 'Image 5',
43
+
height: 1.5
44
+
},
45
+
{
46
+
src: profile6,
47
+
name: 'Image 6'
48
+
},
49
+
{
50
+
src: profile7,
51
+
name: 'Image 7',
52
+
height: 0.7
53
+
},
54
+
{
55
+
src: profile8,
56
+
name: 'Image 8',
57
+
height: 1.2
58
+
}
59
+
];
60
+
</script>
61
+
62
+
<div class="inset-0 flex h-full w-full items-center justify-center">
63
+
<ImageMasonry {images} class="scale-90 h-[200%] w-[200%] columns-4 max-h-fit" showNames={false} />
64
+
</div>
-5
packages/base/src/lib/components/accordion/index.ts
-5
packages/base/src/lib/components/accordion/index.ts
+1
-9
packages/base/src/lib/components/alert/index.ts
+1
-9
packages/base/src/lib/components/alert/index.ts
···
3
3
import Title from './alert-title.svelte';
4
4
export { alertVariants, type AlertVariant } from './alert.svelte';
5
5
6
-
export {
7
-
Root,
8
-
Description,
9
-
Title,
10
-
//
11
-
Root as Alert,
12
-
Description as AlertDescription,
13
-
Title as AlertTitle
14
-
};
6
+
export { Root as Alert, Description as AlertDescription, Title as AlertTitle };
+1
-1
packages/base/src/lib/components/badge/Badge.svelte
+1
-1
packages/base/src/lib/components/badge/Badge.svelte
···
3
3
import { cn } from '../../utils';
4
4
5
5
export const badgeVariants = tv({
6
-
base: 'inline-flex items-center justify-center whitespace-nowrap rounded-2xl text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 duration-300 active:duration-100 [&_svg]:pointer-events-none [&_svg]:shrink-0',
6
+
base: 'inline-flex items-center backdrop-blur-sm justify-center whitespace-nowrap rounded-2xl text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 duration-300 active:duration-100 [&_svg]:pointer-events-none [&_svg]:shrink-0',
7
7
variants: {
8
8
variant: {
9
9
primary:
+1
packages/base/src/lib/components/box/index.ts
+1
packages/base/src/lib/components/box/index.ts
···
1
+
export { default as Box } from './Box.svelte';
+1
packages/base/src/lib/components/chat-bubble/index.ts
+1
packages/base/src/lib/components/chat-bubble/index.ts
···
1
+
export { default as ChatBubble } from './ChatBubble.svelte';
+1
-6
packages/base/src/lib/components/checkbox/index.ts
+1
-6
packages/base/src/lib/components/checkbox/index.ts
+1
packages/base/src/lib/components/head/index.ts
+1
packages/base/src/lib/components/head/index.ts
···
1
+
export { default as Head } from './Head.svelte';
+1
-9
packages/base/src/lib/components/input/index.ts
+1
-9
packages/base/src/lib/components/input/index.ts
···
5
5
inputVariants
6
6
} from './Input.svelte';
7
7
8
-
export {
9
-
Root,
10
-
type InputProps as Props,
11
-
Root as Input,
12
-
inputVariants,
13
-
type InputProps,
14
-
type InputSize,
15
-
type InputVariant
16
-
};
8
+
export { type InputProps, Root as Input, inputVariants, type InputSize, type InputVariant };
+1
-7
packages/base/src/lib/components/label/index.ts
+1
-7
packages/base/src/lib/components/label/index.ts
-105
packages/base/src/lib/components/modal/BlueskyLoginModal.svelte
-105
packages/base/src/lib/components/modal/BlueskyLoginModal.svelte
···
1
-
<script lang="ts" module>
2
-
export const blueskyLoginModalState = $state({
3
-
open: false,
4
-
show: () => (blueskyLoginModalState.open = true),
5
-
hide: () => (blueskyLoginModalState.open = false)
6
-
});
7
-
</script>
8
-
9
-
<script lang="ts">
10
-
import { Button } from '../button';
11
-
import Modal from './Modal.svelte';
12
-
import { Subheading } from '../heading';
13
-
import { Label } from '../label';
14
-
import Input from '../input/Input.svelte';
15
-
16
-
let value = $state('');
17
-
let error: string | null = $state(null);
18
-
let loading = $state(false);
19
-
20
-
let {
21
-
login
22
-
}: {
23
-
login: (handle: string) => Promise<void>;
24
-
} = $props();
25
-
26
-
async function onSubmit(evt: Event) {
27
-
evt.preventDefault();
28
-
if (loading) return;
29
-
30
-
error = null;
31
-
loading = true;
32
-
33
-
try {
34
-
await login(value);
35
-
} catch (err) {
36
-
error = err instanceof Error ? err.message : String(err);
37
-
} finally {
38
-
loading = false;
39
-
}
40
-
}
41
-
42
-
let input: HTMLInputElement | null = $state(null);
43
-
</script>
44
-
45
-
<Modal
46
-
bind:open={blueskyLoginModalState.open}
47
-
class="max-w-sm gap-2 p-4 sm:p-6"
48
-
onOpenAutoFocus={(e) => {
49
-
e.preventDefault();
50
-
input?.focus();
51
-
}}
52
-
>
53
-
<form onsubmit={onSubmit} class="flex flex-col gap-2">
54
-
<Subheading class="mb-1 inline-flex items-center gap-2 text-xl font-bold">
55
-
<svg
56
-
fill="currentColor"
57
-
xmlns="http://www.w3.org/2000/svg"
58
-
viewBox="-40 -40 680 620"
59
-
version="1.1"
60
-
class={['text-accent-600 dark:text-accent-400 size-6']}
61
-
aria-hidden="true"
62
-
>
63
-
<path
64
-
d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z"
65
-
/>
66
-
</svg>
67
-
Login with Bluesky</Subheading
68
-
>
69
-
70
-
<div class="text-base-600 dark:text-base-400 text-xs leading-5">
71
-
Don't have an account?
72
-
<br />
73
-
<a
74
-
href="https://bsky.app"
75
-
target="_blank"
76
-
class="text-accent-600 dark:text-accent-400 dark:hover:text-accent-500 hover:text-accent-500 font-medium transition-colors"
77
-
>
78
-
Sign up on bluesky
79
-
</a>, then come back here.
80
-
</div>
81
-
82
-
<div class="mt-4 w-full">
83
-
<Label for="bluesky-handle" class="text-sm">Your handle</Label>
84
-
<div class="mt-2">
85
-
<Input
86
-
bind:ref={input}
87
-
type="text"
88
-
name="bluesky-handle"
89
-
id="bluesky-handle"
90
-
placeholder="yourname.bsky.social"
91
-
class="w-full"
92
-
bind:value
93
-
/>
94
-
</div>
95
-
</div>
96
-
97
-
{#if error}
98
-
<p class="text-accent-500 mt-2 text-sm font-medium">{error}</p>
99
-
{/if}
100
-
101
-
<Button type="submit" class="mt-2 ml-auto w-full md:w-auto" disabled={loading}
102
-
>{loading ? 'Loading...' : 'Login'}</Button
103
-
>
104
-
</form>
105
-
</Modal>
+9
-6
packages/base/src/lib/components/modal/Modal.svelte
+9
-6
packages/base/src/lib/components/modal/Modal.svelte
···
1
-
<script lang="ts">
1
+
<script lang="ts" module>
2
2
import type { Snippet } from 'svelte';
3
3
import { Dialog, type WithoutChild } from 'bits-ui';
4
4
import { Button, type ButtonProps } from '../button';
5
-
import { cn } from '../../utils';
6
5
7
-
type Props = Dialog.RootProps & {
6
+
export type ModalProps = Dialog.RootProps & {
8
7
title?: string;
9
8
titleSnippet?: Snippet;
10
9
titleClass?: string;
···
39
38
40
39
onOpenAutoFocus?: (event: Event) => void;
41
40
};
41
+
</script>
42
+
43
+
<script lang="ts">
44
+
import { cn } from '../../utils';
42
45
43
46
let {
44
47
open = $bindable(false),
···
57
60
class: className,
58
61
onOpenAutoFocus,
59
62
...restProps
60
-
}: Props = $props();
63
+
}: ModalProps = $props();
61
64
62
65
let yesButtonRef = $state<HTMLButtonElement | null>(null);
63
66
</script>
···
73
76
{...contentProps}
74
77
class={cn(
75
78
'motion-safe:data-[state=open]:animate-in motion-safe: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-bottom-1/2 data-[state=open]:slide-in-from-bottom-1/2',
76
-
'fixed top-[50%] left-[50%] z-50 grid w-[calc(100%-1rem)] max-w-lg translate-x-[-50%] translate-y-[-50%]',
79
+
'fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-1rem)] max-w-lg translate-x-[-50%] translate-y-[-50%]',
77
80
'bg-base-50 dark:bg-base-900 border-base-200/80 dark:border-base-800 gap-4 rounded-2xl border p-6',
78
81
className
79
82
)}
···
141
144
142
145
{#if closeButton}
143
146
<Dialog.Close
144
-
class="text-base-900 dark:text-base-500 hover:text-base-800 dark:hover:text-base-200 hover:bg-base-200 dark:hover:bg-base-800 focus:outline-base-900 dark:focus:outline-base-50 focus:bg-base-200 dark:focus:bg-base-800 focus:text-base-800 dark:focus:text-base-200 absolute top-2 right-2 cursor-pointer rounded-xl p-1 transition-colors focus:outline-2 focus:outline-offset-2"
147
+
class="text-base-900 dark:text-base-500 hover:text-base-800 dark:hover:text-base-200 hover:bg-base-200 dark:hover:bg-base-800 focus:outline-base-900 dark:focus:outline-base-50 focus:bg-base-200 dark:focus:bg-base-800 focus:text-base-800 dark:focus:text-base-200 absolute right-2 top-2 cursor-pointer rounded-xl p-1 transition-colors focus:outline-2 focus:outline-offset-2"
145
148
>
146
149
<svg
147
150
xmlns="http://www.w3.org/2000/svg"
+2
packages/base/src/lib/components/modal/index.ts
+2
packages/base/src/lib/components/modal/index.ts
+2
packages/base/src/lib/components/number-input/index.ts
+2
packages/base/src/lib/components/number-input/index.ts
+12
-10
packages/base/src/lib/components/popover/Popover.svelte
+12
-10
packages/base/src/lib/components/popover/Popover.svelte
···
1
-
<script lang="ts">
2
-
import { buttonVariants, type ButtonSize, type ButtonVariant } from '../button';
3
-
import { Popover as PopoverPrimitive } from 'bits-ui';
4
-
import { Content } from '.';
5
-
import { cn } from '../../utils';
6
-
1
+
<script lang="ts" module>
7
2
const Root = PopoverPrimitive.Root;
8
3
const Trigger = PopoverPrimitive.Trigger;
9
4
10
-
type Props = PopoverPrimitive.RootProps & {
5
+
export type PopoverProps = PopoverPrimitive.RootProps & {
11
6
triggerProps?: PopoverPrimitive.TriggerProps;
12
7
text?: string;
13
8
···
19
14
triggerRef?: HTMLButtonElement | null;
20
15
} & PopoverPrimitive.ContentProps &
21
16
PopoverPrimitive.TriggerProps;
17
+
</script>
18
+
19
+
<script lang="ts">
20
+
import { buttonVariants, type ButtonSize, type ButtonVariant } from '../button';
21
+
import { Popover as PopoverPrimitive } from 'bits-ui';
22
+
import { PopoverContent } from '.';
23
+
import { cn } from '../../utils';
22
24
23
25
let {
24
26
open = $bindable(false),
···
37
39
child: myChild,
38
40
class: className,
39
41
...restProps
40
-
}: Props = $props();
42
+
}: PopoverProps = $props();
41
43
</script>
42
44
43
45
<Root bind:open {onOpenChange}>
···
55
57
{triggerText}
56
58
</Trigger>
57
59
{/if}
58
-
<Content {side} {sideOffset} class={className} {...restProps}>
60
+
<PopoverContent {side} {sideOffset} class={className} {...restProps}>
59
61
{@render children?.()}
60
-
</Content>
62
+
</PopoverContent>
61
63
</Root>
+1
-5
packages/base/src/lib/components/popover/index.ts
+1
-5
packages/base/src/lib/components/popover/index.ts
···
5
5
const Close = PopoverPrimitive.Close;
6
6
7
7
export {
8
-
Root,
9
-
Content,
10
-
Trigger,
11
-
Close,
12
-
//
13
8
Root as PopoverRoot,
14
9
Content as PopoverContent,
15
10
Trigger as PopoverTrigger,
···
17
12
};
18
13
19
14
export { default as Popover } from './Popover.svelte';
15
+
export type { PopoverProps } from './Popover.svelte';
+1
packages/base/src/lib/components/prose/index.ts
+1
packages/base/src/lib/components/prose/index.ts
···
1
+
export { default as Prose } from './Prose.svelte';
+1
-5
packages/base/src/lib/components/slider/index.ts
+1
-5
packages/base/src/lib/components/slider/index.ts
+1
packages/base/src/lib/components/sonner/index.ts
+1
packages/base/src/lib/components/sonner/index.ts
+1
-5
packages/base/src/lib/components/switch/index.ts
+1
-5
packages/base/src/lib/components/switch/index.ts
+1
-7
packages/base/src/lib/components/textarea/index.ts
+1
-7
packages/base/src/lib/components/textarea/index.ts
+2
-7
packages/base/src/lib/components/theme-toggle/index.ts
+2
-7
packages/base/src/lib/components/theme-toggle/index.ts
+1
-7
packages/base/src/lib/components/toggle-group/index.ts
+1
-7
packages/base/src/lib/components/toggle-group/index.ts
+1
-5
packages/base/src/lib/components/toggle/index.ts
+1
-5
packages/base/src/lib/components/toggle/index.ts
+1
-5
packages/base/src/lib/components/tooltip/index.ts
+1
-5
packages/base/src/lib/components/tooltip/index.ts
+95
packages/visual/src/lib/components/image-masonry/ImageMasonry.svelte
+95
packages/visual/src/lib/components/image-masonry/ImageMasonry.svelte
···
1
+
<script lang="ts">
2
+
import { Badge, cn } from '@fuxui/base';
3
+
4
+
type Props = {
5
+
images: {
6
+
src: string;
7
+
8
+
name: string;
9
+
href?: string;
10
+
width?: number;
11
+
height?: number;
12
+
onclick?: () => void;
13
+
alt?: string;
14
+
}[];
15
+
interactive?: boolean;
16
+
maxColumns?: number;
17
+
showNames?: boolean;
18
+
class?: string;
19
+
};
20
+
21
+
const { images, interactive = true, maxColumns = 4, showNames = true, class: className }: Props = $props();
22
+
</script>
23
+
24
+
{#snippet backgroundTitle(name?: string)}
25
+
{#if showNames}
26
+
<div
27
+
class={cn(
28
+
'from-base-950/80 absolute inset-0 z-10 h-full w-full bg-gradient-to-t via-transparent opacity-80',
29
+
interactive
30
+
? 'transition-opacity duration-200 group-hover:opacity-90 group-focus:opacity-100 [@media(pointer:fine)]:opacity-0'
31
+
: ''
32
+
)}
33
+
></div>
34
+
35
+
<div
36
+
class={cn(
37
+
'pointer-events-none absolute inset-0 z-20 flex h-full w-full items-end overflow-hidden px-3 py-2 text-xl font-semibold leading-6 tracking-tight text-white md:px-4 md:py-3',
38
+
interactive
39
+
? 'transition-translation duration-200 group-hover:translate-y-0 [@media(pointer:fine)]:translate-y-20'
40
+
: ''
41
+
)}
42
+
>
43
+
<div class="mt-1 text-sm sm:text-lg">{name}</div>
44
+
</div>
45
+
{:else}
46
+
<div class="absolute inset-0 z-10 h-full w-full"></div>
47
+
<span class="sr-only">{name}</span>
48
+
{/if}
49
+
{/snippet}
50
+
51
+
<div
52
+
class={cn(
53
+
'not-prose gap-x-4',
54
+
maxColumns === 2 ? 'columns-2' : '',
55
+
maxColumns === 3 ? 'columns-2 sm:columns-3' : '',
56
+
maxColumns === 4 ? 'columns-2 sm:columns-3 md:columns-4' : '',
57
+
className
58
+
)}
59
+
>
60
+
{#each images as image}
61
+
<div
62
+
class="group relative mb-4 w-full break-inside-avoid-column overflow-hidden rounded-2xl border border-white/15"
63
+
style={`aspect-ratio: ${image.width ?? 1} / ${image.height ?? 1}`}
64
+
>
65
+
<img
66
+
src={image.src}
67
+
alt={image.alt}
68
+
class={cn(
69
+
'absolute inset-0 h-full w-full rounded-2xl object-cover',
70
+
image.onclick || image.href ? 'transition-all duration-300 group-hover:scale-105' : ''
71
+
)}
72
+
loading="lazy"
73
+
width="270"
74
+
/>
75
+
76
+
{#if image.href}
77
+
<a href={image.href} class="z-20">
78
+
{@render backgroundTitle(image.name)}
79
+
</a>
80
+
{:else if image.onclick}
81
+
<button
82
+
class="z-20 cursor-pointer"
83
+
onclick={() => {
84
+
console.log('clicked');
85
+
image.onclick?.();
86
+
}}
87
+
>
88
+
{@render backgroundTitle(image.name)}
89
+
</button>
90
+
{:else}
91
+
{@render backgroundTitle(image.name)}
92
+
{/if}
93
+
</div>
94
+
{/each}
95
+
</div>
+1
packages/visual/src/lib/components/image-masonry/index.ts
+1
packages/visual/src/lib/components/image-masonry/index.ts
···
1
+
export { default as ImageMasonry } from './ImageMasonry.svelte';
+2
-8
apps/docs/src/routes/(main)/docs/philosophy/Philosophy.md
+2
-8
apps/docs/src/routes/(main)/docs/philosophy/Philosophy.md
···
31
31
32
32
So the plan is to have both options (usually you start by just using the package and if you
33
33
eventually need to customize a component you add it to your project),
34
-
currently the recommended way to use it is installing as a package,
35
-
but a cli tool is in the works and can already be tested with the base components by running:
36
-
37
-
```bash
38
-
npx fuchs add [component-name]
39
-
```
40
-
41
-
(Note: this still needs you to install `fuchs` as a package first).
34
+
currently the only way to use it is installing as a package,
35
+
but a cli tool is in the works.
42
36
43
37
## Lots of components
44
38
+1
-1
apps/docs/src/routes/(main)/components/visual/excalidraw/Excalidraw.md
+1
-1
apps/docs/src/routes/(main)/components/visual/excalidraw/Excalidraw.md
+8
apps/docs/src/routes/(main)/components/visual/image-masonry/+page.svelte
+8
apps/docs/src/routes/(main)/components/visual/image-masonry/+page.svelte
+69
apps/docs/src/routes/(main)/components/visual/image-masonry/Example.svelte
+69
apps/docs/src/routes/(main)/components/visual/image-masonry/Example.svelte
···
1
+
<script>
2
+
import { ImageMasonry } from '@fuxui/visual';
3
+
4
+
import profile1 from '$lib/assets/profiles/0.webp';
5
+
import profile2 from '$lib/assets/profiles/1.webp';
6
+
import profile3 from '$lib/assets/profiles/2.webp';
7
+
import profile4 from '$lib/assets/profiles/3.webp';
8
+
import profile5 from '$lib/assets/profiles/4.webp';
9
+
import profile6 from '$lib/assets/profiles/5.webp';
10
+
import profile7 from '$lib/assets/profiles/6.webp';
11
+
import profile8 from '$lib/assets/profiles/7.webp';
12
+
import profile9 from '$lib/assets/profiles/8.webp';
13
+
import profile10 from '$lib/assets/profiles/9.webp';
14
+
import { toast } from '@fuxui/base';
15
+
16
+
const images = [
17
+
{
18
+
src: profile1,
19
+
name: 'Image 1',
20
+
width: 200,
21
+
height: 300,
22
+
},
23
+
{
24
+
src: profile2,
25
+
name: 'Image 2',
26
+
width: 200,
27
+
height: 130
28
+
},
29
+
{
30
+
src: profile3,
31
+
name: 'Image 3',
32
+
width: 200,
33
+
height: 200,
34
+
},
35
+
{
36
+
src: profile4,
37
+
name: 'Image 4',
38
+
width: 0.8
39
+
},
40
+
{
41
+
src: profile5,
42
+
name: 'Image 5',
43
+
height: 1.5
44
+
},
45
+
{
46
+
src: profile6,
47
+
name: 'Image 6',
48
+
},
49
+
{
50
+
src: profile7,
51
+
name: 'Image 7',
52
+
height: 0.7
53
+
},
54
+
{
55
+
src: profile8,
56
+
name: 'Image 8',
57
+
height: 1.2
58
+
}
59
+
].map((image) => ({
60
+
...image,
61
+
onclick: () => {
62
+
toast.success('clicked');
63
+
}
64
+
}));
65
+
66
+
console.log(images);
67
+
</script>
68
+
69
+
<ImageMasonry {images} />
+46
apps/docs/src/routes/(main)/components/visual/image-masonry/ImageMasonry.md
+46
apps/docs/src/routes/(main)/components/visual/image-masonry/ImageMasonry.md
···
1
+
<script lang="ts">
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Image Masonry
6
+
7
+
## Example
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script lang="ts">
15
+
import { ImageMasonry } from '@fuxui/visual';
16
+
17
+
const images = [
18
+
{
19
+
src: 'https://picsum.photos/200/300',
20
+
name: 'Image 1',
21
+
width: 200,
22
+
height: 300,
23
+
// optional either onclick
24
+
onclick: () => {
25
+
console.log('clicked');
26
+
}
27
+
},
28
+
{
29
+
src: 'https://picsum.photos/200/300',
30
+
name: 'Image 2',
31
+
width: 200,
32
+
height: 150,
33
+
// or href
34
+
href: '#'
35
+
},
36
+
{
37
+
src: 'https://picsum.photos/200/300',
38
+
name: 'Image 3',
39
+
width: 100,
40
+
height: 100
41
+
},
42
+
];
43
+
</script>
44
+
45
+
<ImageMasonry {images} />
46
+
```
+1
-1
apps/docs/src/routes/(main)/components/visual/phone/Phone.md
+1
-1
apps/docs/src/routes/(main)/components/visual/phone/Phone.md
+1
-1
apps/docs/src/routes/(main)/components/visual/quote/Quote.md
+1
-1
apps/docs/src/routes/(main)/components/visual/quote/Quote.md