negodesign 0.0.70 → 0.0.72

package/dist/components/core/sidebar/ui/navbar/NavMenuBarSidebar.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  /* eslint-disable @typescript-eslint/no-explicit-any */
   import * as Collapsible from "../../../../ui/collapsible/index.js";
   import * as Sidebar from "../../../../ui/sidebar/index.js";
-  import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+  import { ChevronRightIcon } from "@hugeicons/core-free-icons";
   import { HugeiconsIcon } from "@hugeicons/svelte";
   import type {
     NavMenuAndSubmenuSidebarProps,
@@ -43,7 +42,8 @@
                   <HugeiconsIcon icon={item.icon} />
                 {/if}
                 <span>{item.title}</span>
-                <ChevronRightIcon
+                <HugeiconsIcon
+                  icon={ChevronRightIcon}
                   class="ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
                 />
               </Sidebar.MenuButton>

package/dist/components/core/sidebar/ui/navbar/NavMenuTopBarSidebar.svelte

@@ -6,8 +6,6 @@
 	import { HugeiconsIcon } from "@hugeicons/svelte";
 	import { UnfoldMoreIcon } from "@hugeicons/core-free-icons";
 
-	// This should be `Component` after @lucide/svelte updates types
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	let { content, dropdownMenu }: NavTopBarSidebarItem = $props();
 	const sidebar = useSidebar();
 </script>

package/dist/components/core/sidebar/ui/navbar/nav-menu-header-sidebar.svelte

@@ -2,10 +2,9 @@
   import * as DropdownMenu from "../../../../ui/dropdown-menu/index.js";
   import * as Sidebar from "../../../../ui/sidebar/index.js";
   import { useSidebar } from "../../../../ui/sidebar/index.js";
-  import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
-  import PlusIcon from "@lucide/svelte/icons/plus";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { PlusSignIcon, UnfoldMoreIcon } from "@hugeicons/core-free-icons";
 
-  // This should be `Component` after @lucide/svelte updates types
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let { teams }: { teams: { name: string; logo: any; plan: string }[] } =
     $props();
@@ -36,7 +35,7 @@
               </span>
               <span class="truncate text-xs">{activeTeam.plan}</span>
             </div>
-            <ChevronsUpDownIcon class="ms-auto" />
+            <HugeiconsIcon icon={UnfoldMoreIcon} class="ms-auto" />
           </Sidebar.MenuButton>
         {/snippet}
       </DropdownMenu.Trigger>
@@ -68,7 +67,7 @@
           <div
             class="flex size-6 items-center justify-center rounded-md border bg-transparent"
           >
-            <PlusIcon class="size-4" />
+            <HugeiconsIcon icon={PlusSignIcon} class="size-4" />
           </div>
           <div class="text-muted-foreground font-medium">Add team</div>
         </DropdownMenu.Item>

package/dist/components/pages/product-details/shared/ProductDetailFilesVertical.svelte

@@ -38,7 +38,6 @@
 
 {#snippet media(file: ProductDetailsImage, cls: string)}
   {#if file.type === "video"}
-    <!-- svelte-ignore a11y_media_has_caption -->
     <video src={file.src} class={cls} muted playsinline></video>
   {:else}
     <img src={file.src} alt={file.alt ?? ""} class={cls} />

package/dist/components/pages/profile-user/shared/ProfileUserAddress.svelte

@@ -7,9 +7,8 @@
 </script>
 
 <script lang="ts">
-	import { MapPin } from "@hugeicons/core-free-icons";
+	import { MapPin, PlusSignIcon } from "@hugeicons/core-free-icons";
 	import { HugeiconsIcon } from "@hugeicons/svelte";
-	import PlusIcon from "@lucide/svelte/icons/plus";
 	import Badge from "../../../ui/badge/badge.svelte";
 	import Button from "../../../ui/button/button.svelte";
 	import Skeleton from "../../../ui/skeleton/skeleton.svelte";
@@ -39,7 +38,7 @@
 	<div class="mb-6 flex items-center justify-between">
 		<h3 class="text-lg font-semibold">{title}</h3>
 		<Button variant="ghost" size="sm" onclick={onAddAddress}>
-			<PlusIcon class="size-4" />
+			<HugeiconsIcon icon={PlusSignIcon} class="size-4" />
 			{addLabel}
 		</Button>
 	</div>

package/dist/components/pages/profile-user/shared/ProfileUserTabs.svelte

@@ -40,7 +40,9 @@
 <div
 	class={cn(
 		"mb-6 flex gap-1 border-b overflow-x-auto",
-		style === "pill" && "-mt-12 mb-6 rounded-t-lg border border-t bg-background px-2 py-1 shadow-sm border-b",
+		style === "pill"
+			? "-mt-12 mb-6 rounded-t-lg border border-t bg-background px-2 py-1 shadow-sm border-b"
+			: "",
 		className
 	)}
 	data-slot="profile-user-tabs"

package/dist/components/ui/avatar/avatar-fallback.svelte

@@ -1,20 +1,30 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { getAvatarContext } from "./context.svelte.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		children,
 		...restProps
-	}: AvatarPrimitive.FallbackProps = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+	const ctx = getAvatarContext();
+
+	let show = $derived(!ctx.src || ctx.imageError);
 </script>
 
-<AvatarPrimitive.Fallback
-	bind:ref
-	data-slot="avatar-fallback"
-	class={cn(
-		"bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
-		className
-	)}
-	{...restProps}
-/>
+{#if show}
+	<div
+		bind:this={ref}
+		data-slot="avatar-fallback"
+		class={cn(
+			"bg-muted flex size-full items-center justify-center rounded-full fill-foreground text-sm select-none [&>svg]:size-full",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/ui/avatar/avatar-fallback.svelte.d.ts

@@ -1,4 +1,5 @@
-import { Avatar as AvatarPrimitive } from "bits-ui";
-declare const AvatarFallback: import("svelte").Component<AvatarPrimitive.FallbackProps, {}, "ref">;
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const AvatarFallback: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type AvatarFallback = ReturnType<typeof AvatarFallback>;
 export default AvatarFallback;

package/dist/components/ui/avatar/avatar-image.svelte

@@ -1,17 +1,39 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLImgAttributes } from "svelte/elements";
+	import { getAvatarContext } from "./context.svelte.js";
 
 	let {
 		ref = $bindable(null),
+		src,
+		srcset,
+		alt = "",
 		class: className,
 		...restProps
-	}: AvatarPrimitive.ImageProps = $props();
+	}: WithElementRef<HTMLImgAttributes> = $props();
+
+	const ctx = getAvatarContext();
+
+	$effect(() => {
+		if (src) ctx.src = src;
+		if (srcset) ctx.srcset = srcset;
+	});
 </script>
 
-<AvatarPrimitive.Image
-	bind:ref
-	data-slot="avatar-image"
-	class={cn("rounded-full aspect-square size-full object-cover", className)}
-	{...restProps}
-/>
+{#if src || ctx.src}
+	<img
+		bind:this={ref}
+		data-slot="avatar-image"
+		src={src ?? ctx.src}
+		srcset={srcset ?? ctx.srcset}
+		{alt}
+		onerror={() => {
+			ctx.imageError = true;
+		}}
+		onload={() => {
+			ctx.imageError = false;
+		}}
+		class={cn("aspect-square size-full rounded-full object-cover", className)}
+		{...restProps}
+	/>
+{/if}

package/dist/components/ui/avatar/avatar-image.svelte.d.ts

@@ -1,4 +1,5 @@
-import { Avatar as AvatarPrimitive } from "bits-ui";
-declare const AvatarImage: import("svelte").Component<AvatarPrimitive.ImageProps, {}, "ref">;
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLImgAttributes } from "svelte/elements";
+declare const AvatarImage: import("svelte").Component<WithElementRef<HTMLImgAttributes>, {}, "ref">;
 type AvatarImage = ReturnType<typeof AvatarImage>;
 export default AvatarImage;

package/dist/components/ui/avatar/avatar.svelte

@@ -1,26 +1,40 @@
 <script lang="ts">
-	import { Avatar as AvatarPrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { setAvatarContext } from "./context.svelte.js";
 
 	let {
 		ref = $bindable(null),
-		loadingStatus = $bindable("loading"),
 		size = "default",
+		src,
+		srcset,
 		class: className,
+		children,
 		...restProps
-	}: AvatarPrimitive.RootProps & {
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		size?: "default" | "sm" | "lg";
+		src?: string;
+		srcset?: string;
 	} = $props();
+
+	// svelte-ignore state_referenced_locally
+	const ctx = setAvatarContext(src, srcset);
+
+	$effect(() => {
+		if (src) ctx.src = src;
+		if (srcset) ctx.srcset = srcset;
+	});
 </script>
 
-<AvatarPrimitive.Root
-	bind:ref
-	bind:loadingStatus
+<div
+	bind:this={ref}
 	data-slot="avatar"
 	data-size={size}
 	class={cn(
-		"size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
+		"group/avatar relative flex size-10 shrink-0 select-none overflow-hidden rounded-full",
 		className
 	)}
 	{...restProps}
-/>
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/avatar/avatar.svelte.d.ts

@@ -1,7 +1,10 @@
-import { Avatar as AvatarPrimitive } from "bits-ui";
-type $$ComponentProps = AvatarPrimitive.RootProps & {
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     size?: "default" | "sm" | "lg";
+    src?: string;
+    srcset?: string;
 };
-declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "ref" | "loadingStatus">;
+declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

package/dist/components/ui/avatar/context.svelte.d.ts

@@ -0,0 +1,7 @@
+export type AvatarContext = {
+    imageError: boolean;
+    src?: string;
+    srcset?: string;
+};
+export declare function setAvatarContext(src?: string, srcset?: string): AvatarContext;
+export declare function getAvatarContext(): AvatarContext;

package/dist/components/ui/avatar/context.svelte.js

@@ -0,0 +1,10 @@
+import { getContext, setContext } from "svelte";
+const AVATAR_KEY = Symbol("avatar");
+export function setAvatarContext(src, srcset) {
+    const ctx = $state({ imageError: false, src, srcset });
+    setContext(AVATAR_KEY, ctx);
+    return ctx;
+}
+export function getAvatarContext() {
+    return getContext(AVATAR_KEY);
+}

package/dist/components/ui/badge/badge.svelte

@@ -1,49 +1,47 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
+	import { cn } from "../../../utils.js";
 
-	export const badgeVariants = tv({
-		base: "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none",
-		variants: {
-			variant: {
-				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-				secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-				destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
-				outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30",
-				ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-				link: "text-primary underline-offset-4 hover:underline",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	});
+	const badgeBase =
+		"h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none";
 
-	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+	const badgeVariantClasses = {
+		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+		destructive:
+			"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30",
+		ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+		link: "text-primary underline-offset-4 hover:underline",
+	} as const;
+
+	export type BadgeVariant = keyof typeof badgeVariantClasses;
+
+	export function badgeVariants(opts: { variant?: BadgeVariant } = {}): string {
+		const variant = opts.variant ?? "default";
+		return cn(badgeBase, badgeVariantClasses[variant]);
+	}
 </script>
 
 <script lang="ts">
-	import type { HTMLAnchorAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
-		href,
 		class: className,
 		variant = "default",
 		children,
 		...restProps
-	}: WithElementRef<HTMLAnchorAttributes> & {
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		variant?: BadgeVariant;
 	} = $props();
 </script>
 
-<svelte:element
-	this={href ? "a" : "span"}
+<div
 	bind:this={ref}
 	data-slot="badge"
-	{href}
 	class={cn(badgeVariants({ variant }), className)}
 	{...restProps}
 >
 	{@render children?.()}
-</svelte:element>
+</div>

package/dist/components/ui/badge/badge.svelte.d.ts

@@ -1,36 +1,18 @@
-import { type VariantProps } from "tailwind-variants";
-export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80";
-        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80";
-        destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20";
-        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30";
-        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50";
-        link: "text-primary underline-offset-4 hover:underline";
-    };
-}, undefined, "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none", {
-    variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80";
-        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80";
-        destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20";
-        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30";
-        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50";
-        link: "text-primary underline-offset-4 hover:underline";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80";
-        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80";
-        destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20";
-        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30";
-        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50";
-        link: "text-primary underline-offset-4 hover:underline";
-    };
-}, undefined>>;
-export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
-import type { HTMLAnchorAttributes } from "svelte/elements";
-import { type WithElementRef } from "../../../utils.js";
-type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
+declare const badgeVariantClasses: {
+    readonly default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80";
+    readonly secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80";
+    readonly destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20";
+    readonly outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30";
+    readonly ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50";
+    readonly link: "text-primary underline-offset-4 hover:underline";
+};
+export type BadgeVariant = keyof typeof badgeVariantClasses;
+export declare function badgeVariants(opts?: {
+    variant?: BadgeVariant;
+}): string;
+import type { HTMLAttributes } from "svelte/elements";
+import type { WithElementRef } from "../../../utils.js";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     variant?: BadgeVariant;
 };
 declare const Badge: import("svelte").Component<$$ComponentProps, {}, "ref">;

package/dist/components/ui/button/button.svelte

@@ -1,38 +1,42 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
 
-	export const buttonVariants = tv({
-		base: "rounded-sm border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-		variants: {
-			variant: {
-				default: "bg-primary text-primary-foreground hover:bg-primary/80",
-				outline: "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
-				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-				ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-				destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-				link: "text-primary underline-offset-4 hover:underline",
-			},
-			size: {
-				default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
-				xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
-				sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-				lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-				icon: "size-9",
-				"icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
-				"icon-sm": "size-8",
-				"icon-lg": "size-10",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	});
+	const buttonBase =
+		"rounded-sm border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
 
-	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
-	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+	const buttonVariantClasses = {
+		default: "bg-primary text-primary-foreground hover:bg-primary/80",
+		outline:
+			"border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+		secondary:
+			"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+		ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+		destructive:
+			"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+		link: "text-primary underline-offset-4 hover:underline",
+	} as const;
+
+	const buttonSizeClasses = {
+		default:
+			"h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+		xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+		sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+		lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+		icon: "size-9",
+		"icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+		"icon-sm": "size-8",
+		"icon-lg": "size-10",
+	} as const;
+
+	export type ButtonVariant = keyof typeof buttonVariantClasses;
+	export type ButtonSize = keyof typeof buttonSizeClasses;
+
+	export function buttonVariants(opts: { variant?: ButtonVariant; size?: ButtonSize } = {}): string {
+		const variant = opts.variant ?? "default";
+		const size = opts.size ?? "default";
+		return cn(buttonBase, buttonVariantClasses[variant], buttonSizeClasses[size]);
+	}
 
 	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
 		WithElementRef<HTMLAnchorAttributes> & {
@@ -79,4 +83,4 @@
 	>
 		{@render children?.()}
 	</button>
-{/if}
+{/if}

package/dist/components/ui/button/button.svelte.d.ts

@@ -1,66 +1,29 @@
-import { type VariantProps } from "tailwind-variants";
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80";
-        outline: "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground";
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground";
-        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50";
-        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40";
-        link: "text-primary underline-offset-4 hover:underline";
-    };
-    size: {
-        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5";
-        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3";
-        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
-        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3";
-        icon: "size-9";
-        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3";
-        "icon-sm": "size-8";
-        "icon-lg": "size-10";
-    };
-}, undefined, "rounded-sm border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
-    variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80";
-        outline: "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground";
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground";
-        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50";
-        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40";
-        link: "text-primary underline-offset-4 hover:underline";
-    };
-    size: {
-        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5";
-        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3";
-        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
-        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3";
-        icon: "size-9";
-        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3";
-        "icon-sm": "size-8";
-        "icon-lg": "size-10";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80";
-        outline: "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground";
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground";
-        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50";
-        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40";
-        link: "text-primary underline-offset-4 hover:underline";
-    };
-    size: {
-        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5";
-        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3";
-        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
-        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3";
-        icon: "size-9";
-        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3";
-        "icon-sm": "size-8";
-        "icon-lg": "size-10";
-    };
-}, undefined>>;
-export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
-export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+declare const buttonVariantClasses: {
+    readonly default: "bg-primary text-primary-foreground hover:bg-primary/80";
+    readonly outline: "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground";
+    readonly secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground";
+    readonly ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50";
+    readonly destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40";
+    readonly link: "text-primary underline-offset-4 hover:underline";
+};
+declare const buttonSizeClasses: {
+    readonly default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5";
+    readonly xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3";
+    readonly sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+    readonly lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3";
+    readonly icon: "size-9";
+    readonly "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3";
+    readonly "icon-sm": "size-8";
+    readonly "icon-lg": "size-10";
+};
+export type ButtonVariant = keyof typeof buttonVariantClasses;
+export type ButtonSize = keyof typeof buttonSizeClasses;
+export declare function buttonVariants(opts?: {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+}): string;
 export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
     variant?: ButtonVariant;
     size?: ButtonSize;

package/dist/components/ui/carousel/autoplay.d.ts

@@ -0,0 +1,7 @@
+import type { CarouselPlugins } from "./context.js";
+export type AutoplayOptions = {
+    delay?: number;
+    stopOnInteraction?: boolean;
+    loop?: boolean;
+};
+export declare function autoplay(options?: AutoplayOptions): CarouselPlugins[number];

package/dist/components/ui/carousel/autoplay.js

@@ -0,0 +1,7 @@
+export function autoplay(options = {}) {
+    return {
+        delay: options.delay ?? 4000,
+        stopOnInteraction: options.stopOnInteraction ?? true,
+        loop: options.loop ?? false,
+    };
+}