@foxui/visual 0.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License Copyright (c) 2025 flo-bit
+
+Permission is hereby granted, free of
+charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice
+(including the next paragraph) shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
+EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,20 @@
+# 🦊 fox ui
+
+svelte 5 + tailwind 4 ui kit, visual components
+
+- [Confetti](https://flo-bit.dev/ui-kit/components/visual/confetti)
+- [Excalidraw](https://flo-bit.dev/ui-kit/components/visual/excalidraw)
+- [Image Masonry](https://flo-bit.dev/ui-kit/components/visual/image-masonry)
+- [Phone](https://flo-bit.dev/ui-kit/components/visual/phone)
+- [Quote](https://flo-bit.dev/ui-kit/components/visual/quote)
+- [Undraw](https://flo-bit.dev/ui-kit/components/visual/undraw)
+
+> **This is a public alpha release. Expect bugs and breaking changes.**
+
+[See all components here](https://flo-bit.dev/ui-kit)
+
+For a guide on how to use this ui kit, see the [Quickstart Guide](https://flo-bit.dev/ui-kit/docs/quick-start).
+
+Read more about [the philosophy/aim of this project here](https://flo-bit.dev/ui-kit/docs/philosophy).
+
+For more information about development, contributing and the like, see the main [README](https://github.com/flo-bit/ui-kit/blob/main/README.md).

package/dist/components/confetti/index.d.ts

@@ -0,0 +1 @@
+export declare const launchConfetti: (color?: string, brightnesses?: (50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950)[]) => void;

package/dist/components/confetti/index.js

@@ -0,0 +1,50 @@
+import confetti from 'canvas-confetti';
+import { convertCSSToHex } from '@foxui/colors';
+function getCSSVar(variable) {
+    return getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+}
+export const launchConfetti = (color = 'accent', brightnesses = [
+    300, 400, 500, 800
+]) => {
+    const count = 200;
+    const defaults = {
+        origin: { y: 0.7 }
+    };
+    const colors = [];
+    for (const b of brightnesses) {
+        const c = getCSSVar(`--color-${color}-${b}`);
+        if (c) {
+            colors.push(convertCSSToHex(c));
+        }
+    }
+    function fire(particleRatio, opts) {
+        confetti({
+            ...defaults,
+            ...opts,
+            particleCount: Math.floor(count * particleRatio),
+            colors
+        });
+    }
+    fire(0.25, {
+        spread: 26,
+        startVelocity: 55
+    });
+    fire(0.2, {
+        spread: 60
+    });
+    fire(0.35, {
+        spread: 100,
+        decay: 0.91,
+        scalar: 0.8
+    });
+    fire(0.1, {
+        spread: 120,
+        startVelocity: 25,
+        decay: 0.92,
+        scalar: 1.2
+    });
+    fire(0.1, {
+        spread: 120,
+        startVelocity: 45
+    });
+};

package/dist/components/excalidraw/Excalidraw.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '@foxui/core';
+
+	import { load } from 'cheerio';
+
+	let {
+		ref = $bindable(null),
+		svg,
+		alt,
+		caption,
+		class: className,
+		captionClass,
+		...restProps
+	}: WithElementRef<WithoutChildrenOrChild<HTMLAttributes<HTMLElement>>> & {
+		svg: string;
+		alt: string;
+		caption?: string;
+		captionClass?: string;
+	} = $props();
+
+	function modifySvg(svgString: string): string {
+		const loadedSvg = load(svgString, { xmlMode: true });
+
+		const svg = loadedSvg('svg');
+		svg.attr('width', '100%');
+		svg.attr('height', '100%');
+		svg.addClass('w-full h-auto');
+		svg.removeAttr('filter');
+
+		loadedSvg('text').each((_, el) => {
+			loadedSvg(el).removeAttr('fill');
+			loadedSvg(el).addClass('fill-base-800 dark:fill-base-100');
+		});
+
+		loadedSvg('rect').each((_, el) => {
+			loadedSvg(el).removeAttr('fill');
+			loadedSvg(el).addClass('fill-accent-600 dark:fill-accent-500');
+		});
+
+		loadedSvg('path').each((_, el) => {
+			loadedSvg(el).removeAttr('stroke');
+			loadedSvg(el).addClass('stroke-accent-600 dark:stroke-accent-500');
+			if (loadedSvg(el).attr('fill') !== 'none') {
+				loadedSvg(el).addClass('fill-accent-600 dark:fill-accent-500');
+				loadedSvg(el).removeAttr('fill');
+			}
+		});
+
+		return loadedSvg.html();
+	}
+</script>
+
+<figure
+	bind:this={ref}
+	class={cn('excalidraw-container mx-auto w-full max-w-full overflow-hidden', className)}
+	{...restProps}
+>
+	<div class="excalidraw-svg w-full" aria-label={alt}>
+		{@html modifySvg(svg)}
+	</div>
+	{#if caption}
+		<figcaption
+			class={cn('text-base-700 dark:text-base-300 mt-4 text-center text-xs', captionClass)}
+		>
+			{caption}
+		</figcaption>
+	{/if}
+</figure>

package/dist/components/excalidraw/Excalidraw.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<WithoutChildrenOrChild<HTMLAttributes<HTMLElement>>> & {
+    svg: string;
+    alt: string;
+    caption?: string;
+    captionClass?: string;
+};
+declare const Excalidraw: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Excalidraw = ReturnType<typeof Excalidraw>;
+export default Excalidraw;

package/dist/components/excalidraw/index.d.ts

@@ -0,0 +1 @@
+export { default as Excalidraw } from './Excalidraw.svelte';

package/dist/components/excalidraw/index.js

@@ -0,0 +1 @@
+export { default as Excalidraw } from './Excalidraw.svelte';

package/dist/components/gradient/Gradient.svelte

@@ -0,0 +1,8 @@
+<div
+	class="absolute right-0 bottom-0 left-0 flex translate-y-100 items-center justify-center"
+	aria-hidden="true"
+>
+	<div
+		class="from-accent-500/50 via-accent-300/0 dark:via-accent-800/0 size-[75rem] shrink-0 translate-y-100 bg-radial"
+	></div>
+</div>

package/dist/components/gradient/Gradient.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Gradient;
+type Gradient = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Gradient: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/gradient/index.d.ts

@@ -0,0 +1 @@
+export { default as Gradient } from './Gradient.svelte';

package/dist/components/gradient/index.js

@@ -0,0 +1 @@
+export { default as Gradient } from './Gradient.svelte';

package/dist/components/image-masonry/ImageMasonry.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { Badge, cn } from '@foxui/core';
+
+	type Props = {
+		images: {
+			src: string;
+
+			name: string;
+			href?: string;
+			width?: number;
+			height?: number;
+			onclick?: () => void;
+			alt?: string;
+		}[];
+		interactive?: boolean;
+		maxColumns?: number;
+		showNames?: boolean;
+		class?: string;
+	};
+
+	const { images, interactive = true, maxColumns = 4, showNames = true, class: className }: Props = $props();
+</script>
+
+{#snippet backgroundTitle(name?: string)}
+	{#if showNames}
+		<div
+			class={cn(
+				'from-base-950/80 absolute inset-0 z-10 h-full w-full bg-gradient-to-t via-transparent opacity-80',
+				interactive
+					? 'transition-opacity duration-200 group-hover:opacity-90 group-focus:opacity-100 [@media(pointer:fine)]:opacity-0'
+					: ''
+			)}
+		></div>
+
+		<div
+			class={cn(
+				'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',
+				interactive
+					? 'transition-translation duration-200 group-hover:translate-y-0 [@media(pointer:fine)]:translate-y-20'
+					: ''
+			)}
+		>
+			<div class="mt-1 text-sm sm:text-lg">{name}</div>
+		</div>
+	{:else}
+		<div class="absolute inset-0 z-10 h-full w-full"></div>
+		<span class="sr-only">{name}</span>
+	{/if}
+{/snippet}
+
+<div
+	class={cn(
+		'not-prose gap-x-4',
+		maxColumns === 2 ? 'columns-2' : '',
+		maxColumns === 3 ? 'columns-2 sm:columns-3' : '',
+		maxColumns === 4 ? 'columns-2 sm:columns-3 md:columns-4' : '',
+		className
+	)}
+>
+	{#each images as image}
+		<div
+			class="group relative mb-4 w-full break-inside-avoid-column overflow-hidden rounded-2xl border border-white/15"
+			style={`aspect-ratio: ${image.width ?? 1} / ${image.height ?? 1}`}
+		>
+			<img
+				src={image.src}
+				alt={image.alt}
+				class={cn(
+					'absolute inset-0 h-full w-full rounded-2xl object-cover',
+					image.onclick || image.href ? 'transition-all duration-300 group-hover:scale-105' : ''
+				)}
+				loading="lazy"
+				width="270"
+			/>
+
+			{#if image.href}
+				<a href={image.href} class="z-20">
+					{@render backgroundTitle(image.name)}
+				</a>
+			{:else if image.onclick}
+				<button
+					class="z-20 cursor-pointer"
+					onclick={() => {
+						image.onclick?.();
+					}}
+				>
+					{@render backgroundTitle(image.name)}
+				</button>
+			{:else}
+				{@render backgroundTitle(image.name)}
+			{/if}
+		</div>
+	{/each}
+</div>

package/dist/components/image-masonry/ImageMasonry.svelte.d.ts

@@ -0,0 +1,18 @@
+type Props = {
+    images: {
+        src: string;
+        name: string;
+        href?: string;
+        width?: number;
+        height?: number;
+        onclick?: () => void;
+        alt?: string;
+    }[];
+    interactive?: boolean;
+    maxColumns?: number;
+    showNames?: boolean;
+    class?: string;
+};
+declare const ImageMasonry: import("svelte").Component<Props, {}, "">;
+type ImageMasonry = ReturnType<typeof ImageMasonry>;
+export default ImageMasonry;

package/dist/components/image-masonry/index.d.ts

@@ -0,0 +1 @@
+export { default as ImageMasonry } from './ImageMasonry.svelte';

package/dist/components/image-masonry/index.js

@@ -0,0 +1 @@
+export { default as ImageMasonry } from './ImageMasonry.svelte';

package/dist/components/index.d.ts

@@ -0,0 +1,7 @@
+export * from './excalidraw';
+export * from './gradient';
+export * from './phone';
+export * from './quote';
+export * from './undraw';
+export * from './image-masonry';
+export * from './confetti';

package/dist/components/index.js

@@ -0,0 +1,7 @@
+export * from './excalidraw';
+export * from './gradient';
+export * from './phone';
+export * from './quote';
+export * from './undraw';
+export * from './image-masonry';
+export * from './confetti';

package/dist/components/phone/Phone.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { cn } from '@foxui/core';
+	import type { Snippet } from 'svelte';
+
+	const { children, class: className }: { children: Snippet; class?: string } = $props();
+</script>
+
+<div
+	class={cn(
+		'bg-accent-500 relative isolate aspect-[350/712] h-[712px] w-[350px] max-w-full rounded-[60px]',
+		className
+	)}
+>
+	<div class="bg-accent-500 absolute top-20 -left-0.5 h-8 w-3 rounded-xs"></div>
+	<div class="bg-accent-500 absolute top-[140px] -left-[3px] h-14 w-3 rounded-xs"></div>
+	<div class="bg-accent-500 absolute top-[210px] -left-[3px] h-14 w-3 rounded-xs"></div>
+	<div class="bg-accent-500 absolute top-[180px] -right-[3px] h-20 w-3 rounded-xs"></div>
+
+	<div class="absolute top-[18px] z-10 flex w-full justify-center">
+		<div class="h-7 w-24 rounded-full bg-black"></div>
+	</div>
+
+	<div class="bg-accent-500 absolute top-[180px] -right-[3px] h-20 w-3 rounded-xs"></div>
+
+	<div class="absolute inset-0 h-full w-full p-3">
+		<div class="bg-accent-200 relative h-full w-full overflow-hidden rounded-[50px]">
+			{@render children?.()}
+		</div>
+	</div>
+</div>

package/dist/components/phone/Phone.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    class?: string;
+};
+declare const Phone: import("svelte").Component<$$ComponentProps, {}, "">;
+type Phone = ReturnType<typeof Phone>;
+export default Phone;

package/dist/components/phone/index.d.ts

@@ -0,0 +1 @@
+export { default as Phone } from './Phone.svelte';

package/dist/components/phone/index.js

@@ -0,0 +1 @@
+export { default as Phone } from './Phone.svelte';

package/dist/components/quote/Quote.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import {
+		type WithElementRef,
+		type WithoutChildrenOrChild
+	} from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, Avatar } from '@foxui/core';
+
+	let {
+		quote,
+		author,
+		role,
+
+		ref = $bindable(null),
+
+		useThemeColor = false,
+
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
+		quote?: string;
+		author?: {
+			src?: string;
+			alt?: string;
+			fallback?: string;
+
+			role?: string;
+			name?: string;
+
+			avatarClass?: string;
+			fallbackClass?: string;
+			imageClass?: string;
+		};
+
+		useThemeColor?: boolean;
+	} = $props();
+</script>
+
+<div
+	class={cn(
+		'flex flex-col items-start justify-between gap-4 md:flex-row md:items-center md:gap-6',
+		className
+	)}
+	bind:this={ref}
+	{...restProps}
+>
+	<div class="h-24 w-24 shrink-0 md:h-32 md:w-32">
+		<Avatar
+			{useThemeColor}
+			fallback={author?.fallback}
+			src={author?.src}
+			alt={author?.alt}
+			class="size-24 rounded-2xl object-cover text-3xl md:size-32"
+		/>
+	</div>
+	<div class="flex flex-col gap-2">
+		<blockquote class="text-base-900 dark:text-base-50 text-lg font-medium">
+			<p>
+				"{quote}"
+			</p>
+		</blockquote>
+
+		<div class="flex items-center gap-2 text-sm">
+			<div class="text-accent-600 dark:text-accent-500 font-medium">{author?.name}</div>
+
+			<div class="text-base-600 dark:text-base-400">{author?.role}</div>
+		</div>
+	</div>
+</div>

package/dist/components/quote/Quote.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type WithElementRef, type WithoutChildrenOrChild } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithoutChildrenOrChild<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
+    quote?: string;
+    author?: {
+        src?: string;
+        alt?: string;
+        fallback?: string;
+        role?: string;
+        name?: string;
+        avatarClass?: string;
+        fallbackClass?: string;
+        imageClass?: string;
+    };
+    useThemeColor?: boolean;
+};
+declare const Quote: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Quote = ReturnType<typeof Quote>;
+export default Quote;

package/dist/components/quote/index.d.ts

@@ -0,0 +1 @@
+export { default as Quote } from './Quote.svelte';

package/dist/components/quote/index.js

@@ -0,0 +1 @@
+export { default as Quote } from './Quote.svelte';

package/dist/components/undraw/Undraw.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '@foxui/core';
+
+	import { load, type CheerioAPI } from 'cheerio';
+
+	let {
+		ref = $bindable(null),
+		svg,
+		alt,
+		caption,
+		class: className,
+		captionClass,
+		autoInvert = false,
+		colorMap = {},
+		...restProps
+	}: WithElementRef<WithoutChildrenOrChild<HTMLAttributes<HTMLElement>>> & {
+		svg: string;
+		alt: string;
+		caption?: string;
+		captionClass?: string;
+		autoInvert?: boolean;
+		colorMap?: Record<string, string>;
+	} = $props();
+
+	function applyClasses(loadedSvg: CheerioAPI, el: any) {
+		let fill = loadedSvg(el).attr('fill');
+		if (!fill) return;
+
+		if (fill === '#6c63ff') {
+			loadedSvg(el).removeAttr('fill');
+			loadedSvg(el).addClass('fill-accent-600 dark:fill-accent-500');
+		} else if (fill.startsWith('#') && !fill.includes('url') && autoInvert) {
+			loadedSvg(el).addClass('dark:invert dark:hue-rotate-180');
+		} else if (colorMap[fill]) {
+			loadedSvg(el).removeAttr('fill');
+			loadedSvg(el).addClass(colorMap[fill]);
+		}
+	}
+
+	function modifySvg(svgString: string): string {
+		const loadedSvg = load(svgString, { xmlMode: true });
+
+		const svg = loadedSvg('svg');
+		svg.attr('width', '100%');
+		svg.attr('height', '100%');
+		svg.addClass('w-full h-auto');
+		svg.removeAttr('filter');
+
+		loadedSvg('path').each((_, el) => {
+			applyClasses(loadedSvg, el);
+		});
+		loadedSvg('text').each((_, el) => {
+			applyClasses(loadedSvg, el);
+		});
+		loadedSvg('rect').each((_, el) => {
+			applyClasses(loadedSvg, el);
+		});
+		loadedSvg('circle').each((_, el) => {
+			applyClasses(loadedSvg, el);
+		});
+		loadedSvg('ellipse').each((_, el) => {
+			applyClasses(loadedSvg, el);
+		});
+		loadedSvg('polygon').each((_, el) => {
+			applyClasses(loadedSvg, el);
+		});
+		loadedSvg('line').each((_, el) => {
+			applyClasses(loadedSvg, el);
+		});
+
+		return loadedSvg.html();
+	}
+</script>
+
+<figure
+	bind:this={ref}
+	class={cn('excalidraw-container mx-auto w-full max-w-full overflow-hidden', className)}
+	{...restProps}
+>
+	<div class="excalidraw-svg w-full" aria-label={alt}>
+		{@html modifySvg(svg)}
+	</div>
+	{#if caption}
+		<figcaption
+			class={cn('text-base-700 dark:text-base-300 mt-4 text-center text-xs', captionClass)}
+		>
+			{caption}
+		</figcaption>
+	{/if}
+</figure>

package/dist/components/undraw/Undraw.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { WithElementRef, WithoutChildrenOrChild } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<WithoutChildrenOrChild<HTMLAttributes<HTMLElement>>> & {
+    svg: string;
+    alt: string;
+    caption?: string;
+    captionClass?: string;
+    autoInvert?: boolean;
+    colorMap?: Record<string, string>;
+};
+declare const Undraw: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Undraw = ReturnType<typeof Undraw>;
+export default Undraw;

package/dist/components/undraw/index.d.ts

@@ -0,0 +1 @@
+export { default as Undraw } from './Undraw.svelte';

package/dist/components/undraw/index.js

@@ -0,0 +1 @@
+export { default as Undraw } from './Undraw.svelte';

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/types.d.ts

@@ -0,0 +1 @@
+export * from './index';

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@foxui/visual",
+  "private": false,
+  "version": "0.4.0",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "types": "./dist/types.d.ts",
+  "svelte": "./dist/index.js",
+  "devDependencies": {
+    "@eslint/compat": "^1.2.5",
+    "@eslint/js": "^9.18.0",
+    "@sveltejs/adapter-auto": "^6.0.0",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.16.0",
+    "@sveltejs/package": "^2.3.11",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/vite": "^4.1.5",
+    "@types/canvas-confetti": "^1.9.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-svelte": "^3.0.0",
+    "globals": "^16.0.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "tailwindcss": "^4.1.5",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.2.6"
+  },
+  "dependencies": {
+    "bits-ui": "^1.4.3",
+    "canvas-confetti": "^1.9.3",
+    "cheerio": "^1.0.0",
+    "@foxui/core": "0.4.0",
+    "@foxui/colors": "0.4.0"
+  },
+  "peerDependencies": {
+    "svelte": ">=5",
+    "tailwindcss": ">=3"
+  },
+  "description": "ui kit - svelte 5 + tailwind 4 - visual components",
+  "homepage": "https://flo-bit.dev/ui-kit",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/flo-bit/ui-kit.git"
+  },
+  "author": "flo-bit (http://flo-bit.dev/)",
+  "bugs": "https://github.com/flo-bit/ui-kit/issues",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "build:package": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint ."
+  }
+}