Merge pull request #4 from flo-bit/main · flo-bit.dev/ui-kit@179f988

+18 -2

package-lock.json

··· 1 1 { 2 2 "name": "fuchs", 3 - "version": "0.0.9", 3 + "version": "0.0.11", 4 4 "lockfileVersion": 3, 5 5 "requires": true, 6 6 "packages": { 7 7 "": { 8 8 "name": "fuchs", 9 - "version": "0.0.9", 9 + "version": "0.0.11", 10 10 "license": "MIT", 11 11 "dependencies": { 12 12 "@atproto/api": "^0.14.7", ··· 17 17 "@threlte/core": "^8.0.1", 18 18 "@threlte/extras": "^9.0.1", 19 19 "@types/three": "^0.173.0", 20 + "@use-gesture/vanilla": "^10.3.1", 20 21 "bits-ui": "^1.3.4", 21 22 "cheerio": "^1.0.0", 22 23 "hls.js": "^1.5.20", ··· 2790 2791 "funding": { 2791 2792 "type": "opencollective", 2792 2793 "url": "https://opencollective.com/typescript-eslint" 2794 + } 2795 + }, 2796 + "node_modules/@use-gesture/core": { 2797 + "version": "10.3.1", 2798 + "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz", 2799 + "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==", 2800 + "license": "MIT" 2801 + }, 2802 + "node_modules/@use-gesture/vanilla": { 2803 + "version": "10.3.1", 2804 + "resolved": "https://registry.npmjs.org/@use-gesture/vanilla/-/vanilla-10.3.1.tgz", 2805 + "integrity": "sha512-lT4scGLu59ovA3zmtUonukAGcA0AdOOh+iwNDS05Bsu7Lq9aZToDHhI6D8Q2qvsVraovtsLLYwPrWdG/noMAKw==", 2806 + "license": "MIT", 2807 + "dependencies": { 2808 + "@use-gesture/core": "10.3.1" 2793 2809 } 2794 2810 }, 2795 2811 "node_modules/@webgpu/types": {

+2 -1

package.json

··· 1 1 { 2 2 "name": "fuchs", 3 - "version": "0.0.11", 3 + "version": "0.0.12", 4 4 "type": "module", 5 5 "description": "Beautiful UI components built with Tailwind 4 and Svelte 5", 6 6 "homepage": "https://flo-bit.dev/ui-kit", ··· 82 82 "@threlte/core": "^8.0.1", 83 83 "@threlte/extras": "^9.0.1", 84 84 "@types/three": "^0.173.0", 85 + "@use-gesture/vanilla": "^10.3.1", 85 86 "bits-ui": "^1.3.4", 86 87 "cheerio": "^1.0.0", 87 88 "hls.js": "^1.5.20",

+1 -1

src/app.html

··· 45 45 </head> 46 46 <body 47 47 data-sveltekit-preload-data="hover" 48 - class="bg-base-50 dark:bg-base-950 motion-safe:transition-colors" 48 + class="bg-base-50 dark:bg-base-950 overflow-x-hidden motion-safe:transition-colors" 49 49 > 50 50 <div style="display: contents">%sveltekit.body%</div> 51 51 </body>

+1

src/lib/index.ts

··· 31 31 export { Tooltip } from '$lib/components/base/tooltip'; 32 32 33 33 // extra components 34 + export { default as ColorGradientPicker } from '$lib/components/extra/color-gradient-picker/ColorGradientPicker.svelte'; 34 35 export { ColorPicker, PopoverColorPicker } from '$lib/components/extra/color-picker/'; 35 36 export { default as Excalidraw } from '$lib/components/extra/excalidraw/Excalidraw.svelte'; 36 37 export { default as Undraw } from '$lib/components/extra/undraw/Undraw.svelte';

+2 -2

src/docs/site-components/Cards.svelte

··· 44 44 </script> 45 45 46 46 <h2 class="text-base-800 dark:text-base-200 mb-4 text-xl font-semibold">Base components</h2> 47 - <div class="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 md:gap-8 lg:grid-cols-4"> 47 + <div class="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8 xl:grid-cols-4"> 48 48 {#each baseComponents as card} 49 49 <div 50 50 class="group relative flex flex-col items-start gap-3 transition-opacity duration-150 hover:opacity-90 md:gap-4" ··· 76 76 77 77 78 78 <h2 class="text-base-800 dark:text-base-200 mb-4 text-xl font-semibold mt-24">Extra components</h2> 79 - <div class="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 md:gap-8 lg:grid-cols-4"> 79 + <div class="grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8 xl:grid-cols-4"> 80 80 {#each extraComponents as card} 81 81 <div 82 82 class="group relative flex flex-col items-start gap-3 transition-opacity duration-150 hover:opacity-90 md:gap-4"

+1 -1

src/docs/site-components/Navbar.svelte

···

+7

src/docs/site-components/components_extra.ts

··· 6 6 import CardTimer from '$docs/cards/extras/CardTimer.svelte'; 7 7 import CardPhone from '$docs/cards/extras/CardPhone.svelte'; 8 8 import CardQuote from '$docs/cards/extras/CardQuote.svelte'; 9 + import CardColorGradientPicker from '$docs/cards/extras/CardColorGradientPicker.svelte'; 9 10 10 11 export const extraComponents = [ 11 12 { ··· 55 56 className: '', 56 57 label: 'Quote', 57 58 href: 'quote' 59 + }, 60 + { 61 + component: CardColorGradientPicker, 62 + className: '', 63 + label: 'Color Gradient Picker', 64 + href: 'color-gradient-picker' 58 65 } 59 66 ].sort((a, b) => a.label.localeCompare(b.label));

+14

src/routes/(main)/+layout.svelte

··· 1 + <script lang="ts"> 2 + import Navbar from '$docs/site-components/Navbar.svelte'; 3 + import Sidebar from '$docs/site-components/Sidebar.svelte'; 4 + import Container from '$docs/site-components/Container.svelte'; 5 + 6 + let { children } = $props(); 7 + </script> 8 + 9 + <Navbar hasSidebar showLogo={false} /> 10 + <Sidebar /> 11 + 12 + <Container id="content"> 13 + {@render children()} 14 + </Container>

-14

src/routes/components/+layout.svelte

··· 1 - <script lang="ts"> 2 - import Navbar from '$docs/site-components/Navbar.svelte'; 3 - import Sidebar from '$docs/site-components/Sidebar.svelte'; 4 - import Container from '$docs/site-components/Container.svelte'; 5 - 6 - let { children } = $props(); 7 - </script> 8 - 9 - <Navbar hasSidebar showLogo={false} /> 10 - <Sidebar /> 11 - 12 - <Container id="content"> 13 - {@render children()} 14 - </Container>

-15

src/routes/docs/+layout.svelte

··· 1 - <script lang="ts"> 2 - import Navbar from '$docs/site-components/Navbar.svelte'; 3 - import Sidebar from '$docs/site-components/Sidebar.svelte'; 4 - import Container from '$docs/site-components/Container.svelte'; 5 - import { Button } from '$lib'; 6 - 7 - let { children } = $props(); 8 - </script> 9 - 10 - <Navbar hasSidebar showLogo={false} /> 11 - <Sidebar /> 12 - 13 - <Container id="content"> 14 - {@render children()} 15 - </Container>

src/docs/assets/profiles/0.webp