@foxui/core 0.4.0

package/dist/components/sonner/Toaster.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { Toaster as SonnerToaster } from 'svelte-sonner';
+
+	const colorClasses = {
+		blue: 'bg-blue-200/50 dark:bg-blue-950/50 text-blue-600 [&_.title]:text-blue-800 [&_.description]:text-blue-700 dark:text-blue-500 border-blue-700/20 dark:border-blue-500/20 dark:[&_.title]:text-blue-300 dark:[&_.description]:text-blue-400',
+		red: 'bg-red-200/50 dark:bg-red-950/50 text-red-600 [&_.title]:text-red-800 [&_.description]:text-red-700 dark:text-red-500 border-red-700/20 dark:border-red-500/20 dark:[&_.title]:text-red-300 dark:[&_.description]:text-red-400',
+		yellow:
+			'bg-yellow-200/50 dark:bg-yellow-950/50 text-yellow-600 [&_.title]:text-yellow-800 [&_.description]:text-yellow-700 dark:text-yellow-500 border-yellow-700/20 dark:border-yellow-500/20 dark:[&_.title]:text-yellow-300 dark:[&_.description]:text-yellow-400',
+		green:
+			'bg-green-200/50 dark:bg-green-950/50 text-green-600 [&_.title]:text-green-800 [&_.description]:text-green-700 dark:text-green-500 border-green-700/20 dark:border-green-500/20 dark:[&_.title]:text-green-300 dark:[&_.description]:text-green-400',
+		indigo:
+			'bg-indigo-200/50 dark:bg-indigo-950/50 text-indigo-600 [&_.title]:text-indigo-800 [&_.description]:text-indigo-700 dark:text-indigo-500 border-indigo-700/20 dark:border-indigo-500/20 dark:[&_.title]:text-indigo-300 dark:[&_.description]:text-indigo-400',
+		purple:
+			'bg-purple-200/50 dark:bg-purple-950/50 text-purple-600 [&_.title]:text-purple-800 [&_.description]:text-purple-700 dark:text-purple-500 border-purple-700/20 dark:border-purple-500/20 dark:[&_.title]:text-purple-300 dark:[&_.description]:text-purple-400',
+		pink: 'bg-pink-200/50 dark:bg-pink-950/50 text-pink-600 [&_.title]:text-pink-800 [&_.description]:text-pink-700 dark:text-pink-500 border-pink-700/20 dark:border-pink-500/20 dark:[&_.title]:text-pink-300 dark:[&_.description]:text-pink-400',
+		orange:
+			'bg-orange-200/50 dark:bg-orange-950/50 text-orange-600 [&_.title]:text-orange-800 [&_.description]:text-orange-700 dark:text-orange-500 border-orange-700/20 dark:border-orange-500/20 dark:[&_.title]:text-orange-300 dark:[&_.description]:text-orange-400',
+		teal: 'bg-teal-200/50 dark:bg-teal-950/50 text-teal-600 [&_.title]:text-teal-800 [&_.description]:text-teal-700 dark:text-teal-500 border-teal-700/20 dark:border-teal-500/20 dark:[&_.title]:text-teal-300 dark:[&_.description]:text-teal-400',
+		emerald:
+			'bg-emerald-200/50 dark:bg-emerald-950/50 text-emerald-600 [&_.title]:text-emerald-800 [&_.description]:text-emerald-700 dark:text-emerald-500 border-emerald-700/20 dark:border-emerald-500/20 dark:[&_.title]:text-emerald-300 dark:[&_.description]:text-emerald-400',
+		lime: 'bg-lime-200/50 dark:bg-lime-950/50 text-lime-600 [&_.title]:text-lime-800 [&_.description]:text-lime-700 dark:text-lime-500 border-lime-700/20 dark:border-lime-500/20 dark:[&_.title]:text-lime-300 dark:[&_.description]:text-lime-400',
+		cyan: 'bg-cyan-200/50 dark:bg-cyan-950/50 text-cyan-600 [&_.title]:text-cyan-800 [&_.description]:text-cyan-700 dark:text-cyan-500 border-cyan-700/20 dark:border-cyan-500/20 dark:[&_.title]:text-cyan-300 dark:[&_.description]:text-cyan-400',
+		sky: 'bg-sky-200/50 dark:bg-sky-950/50 text-sky-600 [&_.title]:text-sky-800 [&_.description]:text-sky-700 dark:text-sky-500 border-sky-700/20 dark:border-sky-500/20 dark:[&_.title]:text-sky-300 dark:[&_.description]:text-sky-400',
+		rose: 'bg-rose-200/50 dark:bg-rose-950/50 text-rose-600 [&_.title]:text-rose-800 [&_.description]:text-rose-700 dark:text-rose-500 border-rose-700/20 dark:border-rose-500/20 dark:[&_.title]:text-rose-300 dark:[&_.description]:text-rose-400',
+		amber:
+			'bg-amber-200/50 dark:bg-amber-950/50 text-amber-600 [&_.title]:text-amber-800 [&_.description]:text-amber-700 dark:text-amber-500 border-amber-700/20 dark:border-amber-500/20 dark:[&_.title]:text-amber-300 dark:[&_.description]:text-amber-400',
+		violet:
+			'bg-violet-200/50 dark:bg-violet-950/50 text-violet-600 [&_.title]:text-violet-800 [&_.description]:text-violet-700 dark:text-violet-500 border-violet-700/20 dark:border-violet-500/20 dark:[&_.title]:text-violet-300 dark:[&_.description]:text-violet-400',
+		fuchsia:
+			'bg-fuchsia-200/50 dark:bg-fuchsia-950/50 text-fuchsia-600 [&_.title]:text-fuchsia-800 [&_.description]:text-fuchsia-700 dark:text-fuchsia-500 border-fuchsia-700/20 dark:border-fuchsia-500/20 dark:[&_.title]:text-fuchsia-300 dark:[&_.description]:text-fuchsia-400',
+		base: 'bg-base-50/80 border-base-200 dark:bg-base-900/50 dark:border-base-800 [&_.title]:text-base-900 dark:[&_.title]:text-base-50 [&_.description]:text-base-800 dark:[&_.description]:text-base-100',
+		accent:
+			'bg-accent-200/50 dark:bg-accent-950/50 text-accent-600 [&_.title]:text-accent-800 [&_.description]:text-accent-700 dark:text-accent-500 border-accent-700/20 dark:border-accent-500/20 dark:[&_.title]:text-accent-300 dark:[&_.description]:text-accent-400'
+	};
+
+	type Colors = keyof typeof colorClasses;
+
+	const {
+		colors = {
+			default: 'accent',
+			success: 'green',
+			error: 'red',
+			info: 'blue'
+		}
+	}: {
+		colors?: {
+			default?: Colors;
+			success?: Colors;
+			error?: Colors;
+			info?: Colors;
+		};
+	} = $props();
+</script>
+
+<SonnerToaster
+	toastOptions={{
+		unstyled: true,
+		classes: {
+			toast:
+				'group toast min-w-12 w-fit sm:min-w-64 backdrop-blur-lg border rounded-2xl p-4 flex items-center gap-2 sm:fixed sm:bottom-4 sm:right-0 mx-2',
+			title: 'text-base title',
+			description: 'text-xs mt-1 description',
+
+			default: colorClasses[colors?.default ?? 'accent'],
+			loading: colorClasses[colors?.default ?? 'accent'],
+
+			success: colorClasses[colors?.success ?? 'green'],
+			error: colorClasses[colors?.error ?? 'red'],
+			info: colorClasses[colors?.info ?? 'blue']
+		}
+	}}
+	position="bottom-right"
+/>

package/dist/components/sonner/Toaster.svelte.d.ts

@@ -0,0 +1,10 @@
+declare const Toaster: import("svelte").Component<{
+    colors?: {
+        default?: "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "base" | "accent";
+        success?: "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "base" | "accent";
+        error?: "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "base" | "accent";
+        info?: "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "base" | "accent";
+    };
+}, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

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

@@ -0,0 +1,2 @@
+export { default as Toaster } from './Toaster.svelte';
+export { toast } from 'svelte-sonner';

package/dist/components/sonner/index.js

@@ -0,0 +1,2 @@
+export { default as Toaster } from './Toaster.svelte';
+export { toast } from 'svelte-sonner';

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

@@ -0,0 +1,2 @@
+import Root from './switch.svelte';
+export { Root as Switch };

package/dist/components/switch/index.js

@@ -0,0 +1,2 @@
+import Root from './switch.svelte';
+export { Root as Switch };

package/dist/components/switch/switch.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+	import { cn } from '../../utils';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		checked = $bindable(false),
+		...restProps
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	class={cn(
+		'data-[state=checked]:bg-accent-500/30 dark:data-[state=checked]:bg-accent-500/20 data-[state=checked]:border-accent-500/30 data-[state=unchecked]:bg-base-500/20 data-[state=unchecked]:border-base-400/30 peer focus-visible:outline-base-900 dark:focus-visible:outline-base-100 inline-flex h-6 w-10.5 shrink-0 cursor-pointer items-center rounded-full border transition-all hover:scale-105 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100',
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		class={cn(
+			'bg-base-500 data-[state=checked]:bg-accent-600 dark:bg-base-600 dark:data-[state=checked]:bg-accent-500 pointer-events-none block size-5 rounded-full shadow-lg ring-0 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 motion-safe:transition-transform'
+		)}
+	/>
+</SwitchPrimitive.Root>

package/dist/components/switch/switch.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Switch as SwitchPrimitive } from 'bits-ui';
+declare const Switch: import("svelte").Component<Omit<Omit<SwitchPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/tabs/TabItem.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { cn } from '../../utils';
+	import { fade } from 'svelte/transition';
+
+	let {
+		href,
+		isActive,
+		onclick,
+		name
+	}: {
+		name: string;
+		href?: string;
+		isActive?: boolean;
+		onclick?: () => void;
+	} = $props();
+</script>
+
+{#snippet content()}
+	<div
+		class={cn(
+			'relative block cursor-pointer px-3 py-2.5 transition duration-200',
+			isActive
+				? 'text-accent-500 dark:text-accent-400'
+				: 'hover:text-accent-500 dark:hover:text-accent-400'
+		)}
+	>
+		{name}
+		{#if isActive}
+			<span
+				transition:fade
+				class="from-accent-500/0 via-accent-500/40 to-accent-500/0 dark:from-accent-400/0 dark:via-accent-400/40 dark:to-accent-400/0 absolute inset-x-1 bottom-px h-px bg-gradient-to-r"
+			></span>
+		{/if}
+	</div>
+{/snippet}
+
+<li>
+	{#if href}
+		<a {href}>
+			{@render content()}
+		</a>
+	{:else if onclick}
+		<button
+			type="button"
+			onclick={() => {
+				onclick?.();
+			}}
+		>
+			{@render content()}
+		</button>
+	{:else}
+		<div>
+			{@render content()}
+		</div>
+	{/if}
+</li>

package/dist/components/tabs/TabItem.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    name: string;
+    href?: string;
+    isActive?: boolean;
+    onclick?: () => void;
+};
+declare const TabItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type TabItem = ReturnType<typeof TabItem>;
+export default TabItem;

package/dist/components/tabs/Tabs.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { cn } from '../../utils';
+	import TabItem from './TabItem.svelte';
+
+	let {
+		items,
+		active,
+		class: className
+	}: {
+		items: {
+			name: string;
+			href?: string;
+			onclick?: () => void;
+		}[];
+		active: string;
+		class?: string;
+	} = $props();
+</script>
+
+<ul class={cn('not-prose text-base-800 dark:text-base-200 flex flex-wrap px-3 text-sm font-medium', className)}>
+	{#each items as item}
+		<TabItem
+			href={item.href}
+			isActive={active == item.name}
+			name={item.name}
+			onclick={item.onclick}
+		/>
+	{/each}
+</ul>

package/dist/components/tabs/Tabs.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    items: {
+        name: string;
+        href?: string;
+        onclick?: () => void;
+    }[];
+    active: string;
+    class?: string;
+};
+declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

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

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

package/dist/components/tabs/index.js

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

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

@@ -0,0 +1,19 @@
+import Root from './textarea.svelte';
+type FormTextareaEvent<T extends Event = Event> = T & {
+    currentTarget: EventTarget & HTMLTextAreaElement;
+};
+type TextareaEvents = {
+    blur: FormTextareaEvent<FocusEvent>;
+    change: FormTextareaEvent<Event>;
+    click: FormTextareaEvent<MouseEvent>;
+    focus: FormTextareaEvent<FocusEvent>;
+    keydown: FormTextareaEvent<KeyboardEvent>;
+    keypress: FormTextareaEvent<KeyboardEvent>;
+    keyup: FormTextareaEvent<KeyboardEvent>;
+    mouseover: FormTextareaEvent<MouseEvent>;
+    mouseenter: FormTextareaEvent<MouseEvent>;
+    mouseleave: FormTextareaEvent<MouseEvent>;
+    paste: FormTextareaEvent<ClipboardEvent>;
+    input: FormTextareaEvent<InputEvent>;
+};
+export { Root as Textarea, type TextareaEvents, type FormTextareaEvent };

package/dist/components/textarea/index.js

@@ -0,0 +1,2 @@
+import Root from './textarea.svelte';
+export { Root as Textarea };

package/dist/components/textarea/textarea.svelte

@@ -0,0 +1,57 @@
+<script lang="ts" module>
+	import type { WithElementRef, WithoutChildren } from 'bits-ui';
+	import { type VariantProps, tv } from 'tailwind-variants';
+	import { cn } from '../../utils';
+
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	export const inputVariants = tv({
+		base: 'focus:ring-2 ring-1 resize-none ring-inset border-0 focus:transition-transform rounded-2xl text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed duration-300 active:duration-100',
+		variants: {
+			variant: {
+				primary:
+					'focus:ring-accent-500 dark:focus:ring-accent-500 ring-accent-500/30 dark:ring-accent-500/20 bg-accent-400/5 dark:bg-accent-600/5 text-accent-700 dark:text-accent-400 placeholder:text-accent-700/70 dark:placeholder:text-accent-400/70',
+				secondary:
+					'focus:ring-base-800 dark:focus:ring-base-200 bg-base-100/50 dark:bg-base-900/50 text-base-900 dark:text-base-50 ring-base-200 dark:ring-base-800'
+			},
+			sizeVariant: {
+				default: 'px-3 py-1.5 text-base min-h-[80px]',
+				sm: 'px-3 text-xs py-1.5 font-base min-h-[60px]',
+				lg: 'px-4 text-lg py-2 font-semibold min-h-[100px]'
+			}
+		},
+		defaultVariants: {
+			variant: 'primary',
+			sizeVariant: 'default'
+		}
+	});
+
+	export type InputVariant = VariantProps<typeof inputVariants>['variant'];
+	export type InputSize = VariantProps<typeof inputVariants>['sizeVariant'];
+
+	export type InputProps = WithElementRef<HTMLTextareaAttributes> & {
+		variant?: InputVariant;
+		sizeVariant?: InputSize;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		variant = 'primary',
+		sizeVariant = 'default',
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> & {
+		variant?: InputVariant;
+		sizeVariant?: InputSize;
+	} = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	class={cn(inputVariants({ variant, sizeVariant }), className)}
+	bind:value
+	{...restProps}
+></textarea>

package/dist/components/textarea/textarea.svelte.d.ts

@@ -0,0 +1,47 @@
+import type { WithElementRef, WithoutChildren } from 'bits-ui';
+import { type VariantProps } from 'tailwind-variants';
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+export declare const inputVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+    sizeVariant: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, "focus:ring-2 ring-1 resize-none ring-inset border-0 focus:transition-transform rounded-2xl text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed duration-300 active:duration-100", {
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+    sizeVariant: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+    sizeVariant: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, "focus:ring-2 ring-1 resize-none ring-inset border-0 focus:transition-transform rounded-2xl text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed duration-300 active:duration-100", unknown, unknown, undefined>>;
+export type InputVariant = VariantProps<typeof inputVariants>['variant'];
+export type InputSize = VariantProps<typeof inputVariants>['sizeVariant'];
+export type InputProps = WithElementRef<HTMLTextareaAttributes> & {
+    variant?: InputVariant;
+    sizeVariant?: InputSize;
+};
+type $$ComponentProps = WithoutChildren<WithElementRef<HTMLTextareaAttributes>> & {
+    variant?: InputVariant;
+    sizeVariant?: InputSize;
+};
+declare const Textarea: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/theme-toggle/ThemeToggle.svelte

@@ -0,0 +1,105 @@
+<script lang="ts" module>
+	export const theme = $state({
+		dark: false
+	});
+</script>
+
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Button, type ButtonProps } from '../button';
+	import { cn } from '../../utils';
+
+	onMount(() => {
+		// load from local storage
+		const savedDarkMode = localStorage.getItem('darkMode');
+		if (savedDarkMode) {
+			theme.dark = JSON.parse(savedDarkMode);
+		} else {
+			// prefers color scheme?
+			theme.dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+		}
+
+		// remove local storage
+		// localStorage.removeItem("darkMode");
+		setTheme(theme.dark);
+
+		// recommended method for newer browsers: specify event-type as first argument
+		window
+			.matchMedia('(prefers-color-scheme: dark)')
+			.addEventListener('change', (e) => e.matches && toggleTheme());
+
+		window
+			.matchMedia('(prefers-color-scheme: light)')
+			.addEventListener('change', (e) => e.matches && toggleTheme());
+	});
+
+	function setTheme(dark: Boolean) {
+		var root = document.getElementsByTagName('html')[0];
+
+		if (dark) {
+			root.classList.add('dark');
+		} else {
+			root.classList.remove('dark');
+		}
+	}
+
+	function toggleTheme() {
+		theme.dark = !theme.dark;
+		// save to local storage
+		localStorage.setItem('darkMode', JSON.stringify(theme.dark));
+		setTheme(theme.dark);
+	}
+
+	let { class: className, ref = $bindable(null), ...restProps }: ButtonProps = $props();
+</script>
+
+<Button
+	variant="link"
+	onclick={toggleTheme}
+	class={cn(
+		'theme-toggle focus-visible:outline-base-900 dark:focus-visible:outline-base-100 flex items-center justify-center rounded-2xl focus-visible:outline-2',
+		className
+	)}
+	bind:ref
+	{...restProps}
+	size="icon"
+>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		stroke-width="1.5"
+		stroke="currentColor"
+		class="size-5! block transition-colors duration-500 dark:hidden"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
+		/>
+	</svg>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		stroke-width="1.5"
+		stroke="currentColor"
+		class="size-5! hidden transition-colors duration-500 dark:block dark:text-white"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+		/>
+	</svg>
+
+	<span class="sr-only">Toggle theme</span>
+</Button>
+
+<noscript>
+	<style>
+		.theme-toggle {
+			display: none;
+		}
+	</style>
+</noscript>

package/dist/components/theme-toggle/ThemeToggle.svelte.d.ts

@@ -0,0 +1,7 @@
+export declare const theme: {
+    dark: boolean;
+};
+import { type ButtonProps } from '../button';
+declare const ThemeToggle: import("svelte").Component<ButtonProps, {}, "ref">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/components/theme-toggle/index.d.ts

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

package/dist/components/theme-toggle/index.js

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

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

@@ -0,0 +1,3 @@
+import Root from "./toggle.svelte";
+export { toggleVariants, type ToggleSize, type ToggleVariant, type ToggleVariants, } from "./toggle.svelte";
+export { Root as Toggle };

package/dist/components/toggle/index.js

@@ -0,0 +1,3 @@
+import Root from "./toggle.svelte";
+export { toggleVariants, } from "./toggle.svelte";
+export { Root as Toggle };

package/dist/components/toggle/toggle.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const toggleVariants = tv({
+		base: 'text-base-900 dark:text-base-100 hover:bg-base-200/50 dark:hover:bg-base-800/50 dark:hover:text-base-50 hover:text-base-950 data-[state=on]:bg-accent-400/40 dark:data-[state=on]:bg-accent-500/15 dark:data-[state=on]:text-accent-300 data-[state=on]:text-accent-950 inline-flex items-center justify-center gap-2 rounded-2xl text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+		variants: {
+			variant: {
+				default: 'bg-base-200/20 dark:bg-base-800/20'
+			},
+			size: {
+				default: 'h-10 min-w-10 px-3 [&_svg]:size-4',
+				sm: 'h-9 min-w-9 px-2.5 [&_svg]:size-3.5',
+				lg: 'h-11 min-w-11 px-4 [&_svg]:size-5',
+			}
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default'
+		}
+	});
+
+	export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];
+	export type ToggleSize = VariantProps<typeof toggleVariants>['size'];
+	export type ToggleVariants = VariantProps<typeof toggleVariants>;
+</script>
+
+<script lang="ts">
+	import { Toggle as TogglePrimitive } from 'bits-ui';
+	import { cn } from '../../utils';
+
+	let {
+		ref = $bindable(null),
+		pressed = $bindable(false),
+		class: className,
+		size = 'default',
+		variant = 'default',
+		...restProps
+	}: TogglePrimitive.RootProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	} = $props();
+</script>
+
+<TogglePrimitive.Root
+	bind:ref
+	bind:pressed
+	class={cn(toggleVariants({ variant, size }), className)}
+	{...restProps}
+/>

package/dist/components/toggle/toggle.svelte.d.ts

@@ -0,0 +1,40 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, "text-base-900 dark:text-base-100 hover:bg-base-200/50 dark:hover:bg-base-800/50 dark:hover:text-base-50 hover:text-base-950 data-[state=on]:bg-accent-400/40 dark:data-[state=on]:bg-accent-500/15 dark:data-[state=on]:text-accent-300 data-[state=on]:text-accent-950 inline-flex items-center justify-center gap-2 rounded-2xl text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, "text-base-900 dark:text-base-100 hover:bg-base-200/50 dark:hover:bg-base-800/50 dark:hover:text-base-50 hover:text-base-950 data-[state=on]:bg-accent-400/40 dark:data-[state=on]:bg-accent-500/15 dark:data-[state=on]:text-accent-300 data-[state=on]:text-accent-950 inline-flex items-center justify-center gap-2 rounded-2xl text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
+export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];
+export type ToggleSize = VariantProps<typeof toggleVariants>['size'];
+export type ToggleVariants = VariantProps<typeof toggleVariants>;
+import { Toggle as TogglePrimitive } from 'bits-ui';
+type $$ComponentProps = TogglePrimitive.RootProps & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+};
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "ref" | "pressed">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/components/toggle-group/index.d.ts

@@ -0,0 +1,3 @@
+import Root from "./toggle-group.svelte";
+import Item from "./toggle-group-item.svelte";
+export { Root as ToggleGroup, Item as ToggleGroupItem, Item as ToggleItem };

package/dist/components/toggle-group/index.js

@@ -0,0 +1,3 @@
+import Root from "./toggle-group.svelte";
+import Item from "./toggle-group-item.svelte";
+export { Root as ToggleGroup, Item as ToggleGroupItem, Item as ToggleItem };

package/dist/components/toggle-group/toggle-group-item.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
+	import { getToggleGroupCtx } from "./toggle-group.svelte";
+	import { cn } from "../../utils";
+	import { type ToggleVariants, toggleVariants } from "../toggle/";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size,
+		variant,
+		...restProps
+	}: ToggleGroupPrimitive.ItemProps & ToggleVariants = $props();
+
+	const ctx = getToggleGroupCtx();
+</script>
+
+<ToggleGroupPrimitive.Item
+	bind:ref
+	class={cn(
+		toggleVariants({
+			variant: ctx.variant || variant,
+			size: ctx.size || size,
+		}),
+		className
+	)}
+	{value}
+	{...restProps}
+/>