negodesign 0.0.71 → 0.0.72

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,
+    };
+}

package/dist/components/ui/carousel/carousel-content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import emblaCarouselSvelte from "embla-carousel-svelte";
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import { getEmblaContext } from "./context.js";
+	import type { Action } from "svelte/action";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
@@ -12,32 +12,46 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 
 	const emblaCtx = getEmblaContext("<Carousel.Content/>");
+
+	let containerEl = $state<HTMLDivElement | null>(null);
+
+	$effect(() => {
+		emblaCtx.setContainer(containerEl);
+	});
+
+	const carouselKeyboard = ((node: HTMLElement) => {
+		const handler = (event: KeyboardEvent) => emblaCtx.handleKeyDown(event);
+		node.addEventListener("keydown", handler);
+		return {
+			destroy() {
+				node.removeEventListener("keydown", handler);
+			},
+		};
+	}) satisfies Action;
 </script>
 
 <div
+	bind:this={ref}
 	data-slot="carousel-content"
 	class="overflow-hidden"
-	use:emblaCarouselSvelte={{
-		options: {
-			container: "[data-embla-container]",
-			slides: "[data-embla-slide]",
-			...emblaCtx.options,
-			axis: emblaCtx.orientation === "horizontal" ? "x" : "y",
-		},
-		plugins: emblaCtx.plugins,
-	}}
-	onemblaInit={emblaCtx.onInit}
+	{...restProps}
 >
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 	<div
-		bind:this={ref}
+		bind:this={containerEl}
+		use:carouselKeyboard
+		role="region"
+		aria-roledescription="carousel"
+		aria-label="Carousel"
+		tabindex="0"
 		class={cn(
-			"flex",
-			emblaCtx.orientation === "horizontal" ? "-ms-4" : "-mt-4 flex-col",
+			emblaCtx.orientation === "horizontal"
+				? "flex flex-row overflow-x-auto snap-x snap-mandatory scroll-smooth no-scrollbar -ms-4"
+				: "flex flex-col overflow-y-auto snap-y snap-mandatory scroll-smooth no-scrollbar -mt-4",
 			className
 		)}
-		data-embla-container=""
-		{...restProps}
+		onscroll={emblaCtx.onScroll}
 	>
 		{@render children?.()}
 	</div>
-</div>
+</div>