[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

Configure Feed

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

fix shaders, fix cn imports, update cli test

Florian (Mar 24, 2025, 7:21 AM +0100) dc6d71f9 98f4c0fd

+126 -81
+6 -3
package.json
··· 1 1 { 2 2 "name": "fuchs", 3 - "version": "0.0.18", 3 + "version": "0.0.22", 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", ··· 16 16 "build:package": "vite build && npm run prepack", 17 17 "preview": "vite preview", 18 18 "prepare": "svelte-kit sync || echo ''", 19 + "shaders": "vite build --config vite.shaders.ts", 19 20 "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 20 - "prepack": "svelte-kit sync && svelte-package && publint", 21 + "prepack": "svelte-kit sync && svelte-package && npm run shaders && publint", 21 22 "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", 22 23 "format": "prettier --write .", 23 24 "lint": "prettier --check . && eslint ." ··· 104 105 "wavesurfer.js": "^7.9.1" 105 106 }, 106 107 "license": "MIT", 107 - "bin": "dist/cli.js" 108 + "bin": { 109 + "fuchs": "dist/cli.js" 110 + } 108 111 }
+1 -1
src/docs/site-components/ThemeSelectDropdown.svelte
··· 2 2 import { buttonVariants } from '$lib/components/base/button'; 3 3 import * as Popover from '$lib/components/base/popover'; 4 4 import SelectTheme from './SelectTheme.svelte'; 5 - import { cn } from '$lib/utils'; 5 + import { cn } from '$lib'; 6 6 </script> 7 7 8 8 <Popover.Root>
+39 -15
src/lib/cli.ts
··· 47 47 console.log('Download complete.'); 48 48 } 49 49 50 + function copyRecursive(src: string, dest: string) { 51 + const stats = fs.statSync(src); 52 + if (stats.isDirectory()) { 53 + if (!fs.existsSync(dest)) { 54 + fs.mkdirSync(dest); 55 + } 56 + const entries = fs.readdirSync(src); 57 + for (const entry of entries) { 58 + copyRecursive(path.join(src, entry), path.join(dest, entry)); 59 + } 60 + } else { 61 + fs.copyFileSync(src, dest); 62 + } 63 + } 64 + 65 + function replaceInFiles(dir: string, searchStr: string, replaceStr: string) { 66 + const entries = fs.readdirSync(dir, { withFileTypes: true }); 67 + for (const entry of entries) { 68 + const fullPath = path.join(dir, entry.name); 69 + if (entry.isDirectory()) { 70 + replaceInFiles(fullPath, searchStr, replaceStr); 71 + } else { 72 + try { 73 + const content = fs.readFileSync(fullPath, 'utf8'); 74 + if (content.includes(searchStr)) { 75 + const newContent = content.split(searchStr).join(replaceStr); 76 + fs.writeFileSync(fullPath, newContent, 'utf8'); 77 + console.log(`Updated ${fullPath}`); 78 + } 79 + } catch (err) { 80 + console.error('Error:', (err as Error).message); 81 + } 82 + } 83 + } 84 + } 85 + 50 86 try { 51 87 await downloadZip(zipUrl, zipPath); 52 88 ··· 71 107 fs.mkdirSync(destDir, { recursive: true }); 72 108 } 73 109 74 - function copyRecursive(src: string, dest: string) { 75 - const stats = fs.statSync(src); 76 - if (stats.isDirectory()) { 77 - if (!fs.existsSync(dest)) { 78 - fs.mkdirSync(dest); 79 - } 80 - const entries = fs.readdirSync(src); 81 - for (const entry of entries) { 82 - copyRecursive(path.join(src, entry), path.join(dest, entry)); 83 - } 84 - } else { 85 - fs.copyFileSync(src, dest); 86 - } 87 - } 88 - 89 110 copyRecursive(sourcePath, destDir); 90 111 console.log(`Component "${componentName}" successfully copied to ${destDir}`); 91 112 113 + replaceInFiles(destDir, '$lib', 'fuchs'); 114 + 115 + // Optionally, clean up temporary files 92 116 // fs.rmSync(tmpDir, { recursive: true, force: true }); 93 117 } catch (err) { 94 118 console.error('Error:', (err as Error).message);
+1 -1
src/lib/components/3d/depth3d/Depth3D.svelte
··· 3 3 import Scene, { type Props } from './Scene.svelte'; 4 4 import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui'; 5 5 import type { HTMLAttributes } from 'svelte/elements'; 6 - import { cn } from '$lib/utils'; 6 + import { cn } from '$lib'; 7 7 8 8 const { 9 9 class: className,
+1 -1
src/lib/components/audio/audio-visualizations/BarVisualizer.svelte
··· 1 1 <script lang="ts"> 2 2 import { ThemeWatcher } from '$lib/helper/ThemeWatcher.svelte'; 3 - import { cn } from '$lib/utils'; 3 + import { cn } from '$lib'; 4 4 import { onMount } from 'svelte'; 5 5 6 6 let {
+1 -1
src/lib/components/base/accordion/accordion-content.svelte
··· 1 1 <script lang="ts"> 2 2 import { Accordion as AccordionPrimitive, type WithoutChild } from 'bits-ui'; 3 - import { cn } from '$lib/utils'; 3 + import { cn } from '$lib'; 4 4 5 5 let { 6 6 ref = $bindable(null),
+1 -1
src/lib/components/base/accordion/accordion-item.svelte
··· 1 1 <script lang="ts"> 2 2 import { Accordion as AccordionPrimitive } from 'bits-ui'; 3 - import { cn } from '$lib/utils'; 3 + import { cn } from '$lib'; 4 4 import AccordionContent from './accordion-content.svelte'; 5 5 import { AccordionTrigger } from '.'; 6 6
+1 -1
src/lib/components/base/accordion/accordion-trigger.svelte
··· 1 1 <script lang="ts"> 2 2 import { Accordion as AccordionPrimitive, type WithoutChild } from 'bits-ui'; 3 - import { cn } from '$lib/utils.js'; 3 + import { cn } from '$lib'; 4 4 5 5 let { 6 6 ref = $bindable(null),
+1 -1
src/lib/components/base/alert/alert-description.svelte
··· 1 1 <script lang="ts"> 2 - import { cn } from '$lib/utils'; 2 + import { cn } from '$lib'; 3 3 import type { WithElementRef } from 'bits-ui'; 4 4 import type { HTMLAttributes } from 'svelte/elements'; 5 5
+1 -1
src/lib/components/base/alert/alert-title.svelte
··· 1 1 <script lang="ts"> 2 2 import type { HTMLAttributes } from 'svelte/elements'; 3 3 import type { WithElementRef } from 'bits-ui'; 4 - import { cn } from '$lib/utils'; 4 + import { cn } from '$lib'; 5 5 6 6 let { 7 7 ref = $bindable(null),
+1 -1
src/lib/components/base/alert/alert.svelte
··· 49 49 import type { HTMLAttributes } from 'svelte/elements'; 50 50 import type { WithElementRef } from 'bits-ui'; 51 51 import { AlertTitle } from '.'; 52 - import { cn } from '$lib/utils'; 52 + import { cn } from '$lib'; 53 53 54 54 let { 55 55 ref = $bindable(null),
+1 -1
src/lib/components/base/avatar/Avatar.svelte
··· 1 1 <script lang="ts"> 2 - import { cn } from '$lib/utils'; 2 + import { cn } from '$lib'; 3 3 import { Avatar as AvatarPrimitive, type WithoutChildrenOrChild } from 'bits-ui'; 4 4 import Image from '../image/Image.svelte'; 5 5
+1 -1
src/lib/components/base/avatar/AvatarGroup.svelte
··· 2 2 import type { WithElementRef } from 'bits-ui'; 3 3 import type { HTMLAttributes } from 'svelte/elements'; 4 4 import { Avatar } from '.'; 5 - import { cn } from '$lib/utils'; 5 + import { cn } from '$lib'; 6 6 7 7 let { 8 8 users,
+1 -1
src/lib/components/base/badge/Badge.svelte
··· 1 1 <script lang="ts" module> 2 2 import { type VariantProps, tv } from 'tailwind-variants'; 3 - import { cn } from '$lib/utils'; 3 + import { cn } from '$lib'; 4 4 5 5 export const badgeVariants = tv({ 6 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',
+1 -1
src/lib/components/base/box/Box.svelte
··· 1 1 <script lang="ts"> 2 - import { cn } from '$lib/utils'; 2 + import { cn } from '$lib'; 3 3 import type { WithChildren, WithElementRef } from 'bits-ui'; 4 4 import type { HTMLAttributes } from 'svelte/elements'; 5 5
+1 -1
src/lib/components/base/button/Button.svelte
··· 2 2 import type { WithElementRef } from 'bits-ui'; 3 3 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'; 4 4 import { type VariantProps, tv } from 'tailwind-variants'; 5 - import { cn } from '$lib/utils'; 5 + import { cn } from '$lib'; 6 6 7 7 export const buttonVariants = tv({ 8 8 base: 'touch-manipulation hover:cursor-pointer backdrop-blur-md motion-safe:focus-visible:transition-transform focus-visible:outline-2 outline-offset-2 inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-2xl active:scale-95 text-sm font-medium motion-safe:transition-all disabled:pointer-events-none disabled:opacity-50 duration-300 active:duration-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+1 -1
src/lib/components/base/card/ImageCard.svelte
··· 1 1 <script lang="ts"> 2 - import { cn } from '$lib/utils'; 2 + import { cn } from '$lib'; 3 3 import ImageContainer from '../image-container/ImageContainer.svelte'; 4 4 5 5 const {
+1 -1
src/lib/components/base/chat-bubble/ChatBubble.svelte
··· 1 1 <script lang="ts" module> 2 2 import { type VariantProps, tv } from 'tailwind-variants'; 3 - import { cn } from '$lib/utils'; 3 + import { cn } from '$lib'; 4 4 5 5 export const badgeVariants = tv({ 6 6 base: 'inline-flex items-center flex-col justify-start items-start 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',
+1 -1
src/lib/components/base/checkbox/checkbox.svelte
··· 1 1 <script lang="ts" module> 2 2 import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from 'bits-ui'; 3 3 import { type VariantProps, tv } from 'tailwind-variants'; 4 - import { cn } from '$lib/utils'; 4 + import { cn } from '$lib'; 5 5 6 6 export const checkboxVariants = tv({ 7 7 base: 'peer cursor-pointer box-content size-4 shrink-0 inline-flex items-center justify-center rounded-2xl border outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent-500 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
+1 -1
src/lib/components/base/heading/Heading.svelte
··· 1 1 <script lang="ts"> 2 2 import type { WithElementRef } from 'bits-ui'; 3 3 import type { HTMLBaseAttributes } from 'svelte/elements'; 4 - import { cn } from '$lib/utils'; 4 + import { cn } from '$lib'; 5 5 6 6 let { 7 7 ref = $bindable(null),
+1 -1
src/lib/components/base/heading/Subheading.svelte
··· 1 1 <script lang="ts"> 2 2 import type { WithElementRef } from 'bits-ui'; 3 3 import type { HTMLBaseAttributes } from 'svelte/elements'; 4 - import { cn } from '$lib/utils'; 4 + import { cn } from '$lib'; 5 5 6 6 let { 7 7 ref = $bindable(null),
+1 -1
src/lib/components/base/image-container/ImageContainer.svelte
··· 1 1 <script lang="ts"> 2 - import { cn } from '$lib/utils'; 2 + import { cn } from '$lib'; 3 3 import Image, { type ImageProps } from '../image/Image.svelte'; 4 4 5 5 let { ref = $bindable(null), containerClasses, ...restProps }: ImageProps = $props();
+1 -1
src/lib/components/base/image/Image.svelte
··· 1 1 <script lang="ts" module> 2 - import { cn } from '$lib/utils'; 2 + import { cn } from '$lib'; 3 3 import type { HTMLImgAttributes } from 'svelte/elements'; 4 4 import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui'; 5 5
+1 -1
src/lib/components/base/input/Input.svelte
··· 1 1 <script lang="ts" module> 2 2 import type { WithElementRef } from 'bits-ui'; 3 3 import { type VariantProps, tv } from 'tailwind-variants'; 4 - import { cn } from '$lib/utils'; 4 + import { cn } from '$lib'; 5 5 6 6 import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements'; 7 7
+1 -1
src/lib/components/base/label/Label.svelte
··· 1 1 <script lang="ts"> 2 2 import { Label as LabelPrimitive } from 'bits-ui'; 3 - import { cn } from '$lib/utils'; 3 + import { cn } from '$lib'; 4 4 5 5 let { 6 6 ref = $bindable(null),
+1 -1
src/lib/components/base/modal/Modal.svelte
··· 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 '$lib/utils'; 5 + import { cn } from '$lib'; 6 6 7 7 type Props = Dialog.RootProps & { 8 8 title?: string;
+1 -1
src/lib/components/base/navbar/Navbar.svelte
··· 1 1 <script lang="ts"> 2 2 import type { WithElementRef } from 'bits-ui'; 3 3 import type { HTMLAttributes } from 'svelte/elements'; 4 - import { cn } from '$lib/utils'; 4 + import { cn } from '$lib'; 5 5 6 6 const { 7 7 class: className,
+1 -1
src/lib/components/base/number-input/NumberInput.svelte
··· 2 2 import type { WithElementRef } from 'bits-ui'; 3 3 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'; 4 4 import { type VariantProps, tv } from 'tailwind-variants'; 5 - import { cn } from '$lib/utils'; 5 + import { cn } from '$lib'; 6 6 7 7 export const numberInputVariants = tv({ 8 8 base: 'group flex w-full max-w-44 touch-manipulation items-stretch justify-between rounded-2xl ring focus-within:ring-2',
+1 -1
src/lib/components/base/paragraph/Paragraph.svelte
··· 1 1 <script lang="ts"> 2 2 import type { WithElementRef } from 'bits-ui'; 3 3 import type { HTMLAttributes } from 'svelte/elements'; 4 - import { cn } from '$lib/utils'; 4 + import { cn } from '$lib'; 5 5 6 6 let { 7 7 ref = $bindable(null),
+1 -1
src/lib/components/base/popover/popover-content.svelte
··· 1 1 <script lang="ts"> 2 - import { cn } from '$lib/utils.js'; 2 + import { cn } from '$lib'; 3 3 import { Popover as PopoverPrimitive } from 'bits-ui'; 4 4 5 5 let {
+1 -1
src/lib/components/base/scroll-area/ScrollArea.svelte
··· 1 1 <script lang="ts"> 2 2 import { type WithElementRef } from 'bits-ui'; 3 - import { cn } from '$lib/utils'; 3 + import { cn } from '$lib'; 4 4 import type { HTMLAttributes } from 'svelte/elements'; 5 5 6 6 type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+1 -1
src/lib/components/base/select/Select.svelte
··· 1 1 <script lang="ts"> 2 2 import { Toolbar, type WithoutChildrenOrChild } from 'bits-ui'; 3 - import { cn } from '$lib/utils'; 3 + import { cn } from '$lib'; 4 4 5 5 type Item = 6 6 | {
+1 -1
src/lib/components/base/sidebar/Sidebar.svelte
··· 2 2 import type { WithElementRef } from 'bits-ui'; 3 3 import type { HTMLAttributes } from 'svelte/elements'; 4 4 import ScrollArea from '../scroll-area/ScrollArea.svelte'; 5 - import { cn } from '$lib/utils'; 5 + import { cn } from '$lib'; 6 6 7 7 const { 8 8 class: className,
+1 -1
src/lib/components/base/slider/Slider.svelte
··· 1 1 <script lang="ts"> 2 2 import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from 'bits-ui'; 3 - import { cn } from '$lib/utils'; 3 + import { cn } from '$lib'; 4 4 5 5 let { 6 6 ref = $bindable(null),
+1 -1
src/lib/components/base/slider/SliderNumber.svelte
··· 1 1 <script lang="ts"> 2 2 import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from 'bits-ui'; 3 3 import { Slider } from '.'; 4 - import { cn } from '$lib/utils'; 4 + import { cn } from '$lib'; 5 5 import NumberFlow from '@number-flow/svelte'; 6 6 7 7 let {
+1 -1
src/lib/components/base/switch/switch.svelte
··· 1 1 <script lang="ts"> 2 2 import { Switch as SwitchPrimitive, type WithoutChildrenOrChild } from 'bits-ui'; 3 - import { cn } from '$lib/utils'; 3 + import { cn } from '$lib'; 4 4 5 5 let { 6 6 ref = $bindable(null),
+1 -1
src/lib/components/base/textarea/textarea.svelte
··· 1 1 <script lang="ts" module> 2 2 import type { WithElementRef, WithoutChildren } from 'bits-ui'; 3 3 import { type VariantProps, tv } from 'tailwind-variants'; 4 - import { cn } from '$lib/utils'; 4 + import { cn } from '$lib'; 5 5 6 6 import type { HTMLTextareaAttributes } from 'svelte/elements'; 7 7
+1 -1
src/lib/components/base/theme-toggle/ThemeToggle.svelte
··· 7 7 <script lang="ts"> 8 8 import { onMount } from 'svelte'; 9 9 import Button, { type ButtonProps } from '../button/Button.svelte'; 10 - import { cn } from '$lib/utils'; 10 + import { cn } from '$lib'; 11 11 12 12 onMount(() => { 13 13 // load from local storage
+1 -1
src/lib/components/base/tooltip/tooltip-content.svelte
··· 1 1 <script lang="ts"> 2 2 import { Tooltip as TooltipPrimitive } from 'bits-ui'; 3 - import { cn } from '$lib/utils'; 3 + import { cn } from '$lib'; 4 4 5 5 let { 6 6 ref = $bindable(null),
+1 -1
src/lib/components/charts/line-graph/LineGraph.svelte
··· 6 6 import { scaleTime } from 'd3-scale'; 7 7 import { formatDate, PeriodType } from '@layerstack/utils'; 8 8 import { format } from 'date-fns'; 9 - import { cn } from '$lib/utils'; 9 + import { cn } from '$lib'; 10 10 11 11 const defaultValueFormat = (value: any) => { 12 12 return formatDate(value, PeriodType.Month, { variant: 'short' });
+1 -1
src/lib/components/charts/ring-chart/RingChart.svelte
··· 2 2 import { PieChart, Tooltip } from 'layerchart'; 3 3 import type { HTMLAttributes } from 'svelte/elements'; 4 4 import type { WithElementRef } from 'bits-ui'; 5 - import { cn } from '$lib/utils'; 5 + import { cn } from '$lib'; 6 6 7 7 const defaultColors = [ 8 8 { key: 0, color: 'var(--color-accent-800)' },
+2 -2
src/lib/components/colors/color-picker/base/shaders.ts
··· 1 1 /// <reference types="vite-plugin-glsl/ext" /> 2 2 3 - import f_shader_src from './shaders/f_shader.glsl'; 4 - import v_shader_src from './shaders/v_shader.glsl'; 3 + import f_shader_src from '../../../../../docs/shaders/f_shader.glsl'; 4 + import v_shader_src from '../../../../../docs/shaders/v_shader.glsl'; 5 5 6 6 export const f_shader = f_shader_src; 7 7 export const v_shader = v_shader_src;
src/lib/components/colors/color-picker/base/shaders/f_shader.glsl src/docs/shaders/f_shader.glsl
src/lib/components/colors/color-picker/base/shaders/library.glsl src/docs/shaders/library.glsl
src/lib/components/colors/color-picker/base/shaders/readme.md src/docs/shaders/readme.md
src/lib/components/colors/color-picker/base/shaders/v_shader.glsl src/docs/shaders/v_shader.glsl
+1 -1
src/lib/components/colors/color-select/ColorSelect.svelte
··· 1 1 <script lang="ts"> 2 2 import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui'; 3 3 import type { HTMLAttributes } from 'svelte/elements'; 4 - import { cn } from '$lib/utils'; 4 + import { cn } from '$lib'; 5 5 6 6 type Color = { class?: string; label: string; value?: string } | string; 7 7
+1 -1
src/lib/components/extra/countdown/Countdown.svelte
··· 3 3 import { TimerState } from '$lib'; 4 4 import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui'; 5 5 import type { HTMLAttributes } from 'svelte/elements'; 6 - import { cn } from '$lib/utils.js'; 6 + import { cn } from '$lib'; 7 7 8 8 let { 9 9 timer = $bindable(),
+1 -1
src/lib/components/extra/excalidraw/Excalidraw.svelte
··· 1 1 <script lang="ts"> 2 2 import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui'; 3 3 import type { HTMLAttributes } from 'svelte/elements'; 4 - import { cn } from '$lib/utils'; 4 + import { cn } from '$lib'; 5 5 6 6 import { load } from 'cheerio'; 7 7
+1 -1
src/lib/components/extra/following-pointer/FollowingPointer.svelte
··· 1 1 <script lang="ts"> 2 - import { cn } from '$lib/utils'; 2 + import { cn } from '$lib'; 3 3 import { Portal } from 'bits-ui'; 4 4 import { onMount, type Snippet } from 'svelte'; 5 5
+1 -1
src/lib/components/extra/post/Post.svelte
··· 1 1 <script lang="ts"> 2 2 import RelativeTime from './relative-time'; 3 3 import Embed from './embeds/Embed.svelte'; 4 - import { cn } from '$lib/utils'; 4 + import { cn } from '$lib'; 5 5 import Avatar from '../../base/avatar/Avatar.svelte'; 6 6 import type { WithChildren, WithElementRef } from 'bits-ui'; 7 7 import type { HTMLAttributes } from 'svelte/elements';
+1 -1
src/lib/components/extra/progress/Progress.svelte
··· 1 1 <script lang="ts"> 2 2 import { Progress as ProgressPrimitive, type WithoutChildrenOrChild } from 'bits-ui'; 3 - import { cn } from '$lib/utils'; 3 + import { cn } from '$lib'; 4 4 5 5 let { 6 6 ref = $bindable(null),
+1 -1
src/lib/components/extra/pulse-loader/PulseLoader.svelte
··· 1 1 <script lang="ts"> 2 2 import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui'; 3 3 import type { HTMLAttributes } from 'svelte/elements'; 4 - import { cn } from '$lib/utils'; 4 + import { cn } from '$lib'; 5 5 6 6 let { 7 7 ref = $bindable(null),
+1 -1
src/lib/components/extra/quote/Quote.svelte
··· 5 5 type WithoutChildrenOrChild 6 6 } from 'bits-ui'; 7 7 import type { HTMLAttributes } from 'svelte/elements'; 8 - import { cn } from '$lib/utils'; 8 + import { cn } from '$lib'; 9 9 import Avatar from '$lib/components/base/avatar/Avatar.svelte'; 10 10 11 11 let {
+1 -1
src/lib/components/extra/social-icons/Bluesky.svelte
··· 1 1 <script lang="ts"> 2 2 import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui'; 3 3 import type { HTMLAnchorAttributes } from 'svelte/elements'; 4 - import { cn } from '$lib/utils'; 4 + import { cn } from '$lib'; 5 5 6 6 const { 7 7 class: className,
+1 -1
src/lib/components/extra/social-icons/Discord.svelte
··· 1 1 <script lang="ts"> 2 2 import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui'; 3 3 import type { HTMLAnchorAttributes } from 'svelte/elements'; 4 - import { cn } from '$lib/utils'; 4 + import { cn } from '$lib'; 5 5 6 6 const { 7 7 class: className,
+1 -1
src/lib/components/extra/social-icons/Facebook.svelte
··· 1 1 <script lang="ts"> 2 2 import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui'; 3 3 import type { HTMLAnchorAttributes } from 'svelte/elements'; 4 - import { cn } from '$lib/utils'; 4 + import { cn } from '$lib'; 5 5 6 6 const { 7 7 class: className,
+1 -1
src/lib/components/extra/social-icons/Github.svelte
··· 1 1 <script lang="ts"> 2 2 import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui'; 3 3 import type { HTMLAnchorAttributes } from 'svelte/elements'; 4 - import { cn } from '$lib/utils'; 4 + import { cn } from '$lib'; 5 5 6 6 const { 7 7 class: className,
+1 -1
src/lib/components/extra/social-icons/Twitter.svelte
··· 1 1 <script lang="ts"> 2 2 import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui'; 3 3 import type { HTMLAnchorAttributes } from 'svelte/elements'; 4 - import { cn } from '$lib/utils'; 4 + import { cn } from '$lib'; 5 5 6 6 const { 7 7 class: className,
+1 -1
src/lib/components/extra/social-icons/Youtube.svelte
··· 1 1 <script lang="ts"> 2 2 import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui'; 3 3 import type { HTMLAnchorAttributes } from 'svelte/elements'; 4 - import { cn } from '$lib/utils'; 4 + import { cn } from '$lib'; 5 5 6 6 const { 7 7 class: className,
+1 -1
src/lib/components/extra/star-rating/StarRating.svelte
··· 1 1 <script lang="ts"> 2 2 // todo convert to radio group 3 - import { cn } from '$lib/utils'; 3 + import { cn } from '$lib'; 4 4 import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui'; 5 5 import type { HTMLAttributes } from 'svelte/elements'; 6 6
+1 -1
src/lib/components/extra/stopwatch/Stopwatch.svelte
··· 3 3 import { StopwatchState } from './StopwatchState.svelte'; 4 4 import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui'; 5 5 import type { HTMLAttributes } from 'svelte/elements'; 6 - import { cn } from '$lib/utils.js'; 6 + import { cn } from '$lib'; 7 7 8 8 let { 9 9 stopwatch = $bindable(),
+1 -1
src/lib/components/extra/timer/Timer.svelte
··· 3 3 import { TimerState } from './TimerState.svelte'; 4 4 import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui'; 5 5 import type { HTMLAttributes } from 'svelte/elements'; 6 - import { cn } from '$lib/utils.js'; 6 + import { cn } from '$lib'; 7 7 8 8 let { 9 9 timer = $bindable(),
+1 -1
src/lib/components/extra/undraw/Undraw.svelte
··· 1 1 <script lang="ts"> 2 2 import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui'; 3 3 import type { HTMLAttributes } from 'svelte/elements'; 4 - import { cn } from '$lib/utils'; 4 + import { cn } from '$lib'; 5 5 6 6 import { load, type CheerioAPI } from 'cheerio'; 7 7
+1 -1
src/lib/components/extra/video-player/VideoPlayer.svelte
··· 1 1 <script lang="ts"> 2 2 import { onMount } from 'svelte'; 3 - import { cn } from '$lib/utils'; 3 + import { cn } from '$lib'; 4 4 5 5 const { class: className, id }: { class?: string; id?: string } = $props(); 6 6
+1 -1
src/lib/components/github-corner/GithubCorner.svelte
··· 1 1 <script lang="ts"> 2 - import { cn } from '$lib/utils'; 2 + import { cn } from '$lib'; 3 3 import type { HTMLAnchorAttributes } from 'svelte/elements'; 4 4 5 5 type Props = HTMLAnchorAttributes;
+1 -1
src/lib/sections/bento/Bento.svelte
··· 1 1 <script lang="ts"> 2 2 import ScrollArea from '$lib/components/base/scroll-area/ScrollArea.svelte'; 3 - import { cn } from '$lib/utils'; 3 + import { cn } from '$lib'; 4 4 5 5 let background = 'bg-base-100 dark:bg-base-900 border border-base-200 dark:border-base-800'; 6 6 let accentBackground =
+1 -1
src/lib/sections/wavy-background/WavyBackground.svelte
··· 1 1 <script lang="ts"> 2 - import { cn } from '$lib/utils'; 2 + import { cn } from '$lib'; 3 3 import type { WithChildren, WithElementRef } from 'bits-ui'; 4 4 import { createNoise3D } from 'simplex-noise'; 5 5 import { onMount } from 'svelte';
+18
vite.shaders.ts
··· 1 + import glsl from 'vite-plugin-glsl'; 2 + import { defineConfig } from 'vite'; 3 + 4 + // why this extra vite config? I couldn't get svelte-package to include the compressed glsl files (or even the raw text) in the output 5 + // and requiring consumers to add the vite-plugin-glsl seems like a chore, so we have an extra build step to replace the shaders.js file 6 + // hey, it works ... 7 + 8 + export default defineConfig({ 9 + build: { 10 + emptyOutDir: false, 11 + lib: { 12 + entry: 'src/lib/components/colors/color-picker/base/shaders.ts', 13 + formats: ['es'], 14 + fileName: 'components/colors/color-picker/base/shaders' 15 + } 16 + }, 17 + plugins: [glsl({ compress: true })] 18 + });