negodesign 0.0.71 → 0.0.72

package/dist/components/ui/dropdown-menu/dropdown-menu-separator.svelte

@@ -1,17 +1,21 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
-		ref = $bindable(null),
+		ref = $bindable<HTMLDivElement | null>(null),
 		class: className,
 		...restProps
-	}: DropdownMenuPrimitive.SeparatorProps = $props();
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		class?: string;
+	} = $props();
 </script>
 
-<DropdownMenuPrimitive.Separator
-	bind:ref
+<div
+	bind:this={ref}
+	role="separator"
 	data-slot="dropdown-menu-separator"
-	class={cn("bg-border/50 -mx-1 my-1 h-px", className)}
+	class={cn("h-px bg-border my-1", className)}
 	{...restProps}
-/>
+></div>

package/dist/components/ui/dropdown-menu/dropdown-menu-separator.svelte.d.ts

@@ -1,4 +1,8 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-declare const DropdownMenuSeparator: import("svelte").Component<DropdownMenuPrimitive.SeparatorProps, {}, "ref">;
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    class?: string;
+};
+declare const DropdownMenuSeparator: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type DropdownMenuSeparator = ReturnType<typeof DropdownMenuSeparator>;
 export default DropdownMenuSeparator;

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -1,17 +1,34 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
+	import { getDropdownMenuSubContext } from "./dropdown-menu-context.svelte.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
-		ref = $bindable(null),
+		ref = $bindable<HTMLDivElement | null>(null),
 		class: className,
+		children,
 		...restProps
-	}: DropdownMenuPrimitive.SubContentProps = $props();
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		class?: string;
+		children?: Snippet;
+	} = $props();
+
+	const subStore = getDropdownMenuSubContext();
 </script>
 
-<DropdownMenuPrimitive.SubContent
-	bind:ref
-	data-slot="dropdown-menu-sub-content"
-	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-36 rounded-2xl p-1 shadow-2xl ring-1 duration-100 w-auto", className)}
-	{...restProps}
-/>
+{#if subStore.open}
+	<div
+		bind:this={ref}
+		data-slot="dropdown-menu-sub-content"
+		data-state={subStore.open ? "open" : "closed"}
+		class={cn(
+			"absolute left-full top-0 z-50 ml-2 w-auto min-w-36 rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 animate-zoom-in",
+			className,
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte.d.ts

@@ -1,4 +1,10 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-declare const DropdownMenuSubContent: import("svelte").Component<DropdownMenuPrimitive.SubContentProps, {}, "ref">;
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    class?: string;
+    children?: Snippet;
+};
+declare const DropdownMenuSubContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type DropdownMenuSubContent = ReturnType<typeof DropdownMenuSubContent>;
 export default DropdownMenuSubContent;

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -1,30 +1,58 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import { HugeiconsIcon } from "@hugeicons/svelte"
-	import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
+	import { HugeiconsIcon } from "@hugeicons/svelte";
+	import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
 	import { cn } from "../../../utils.js";
+	import { getDropdownMenuSubContext } from "./dropdown-menu-context.svelte.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
 
 	let {
-		ref = $bindable(null),
+		ref = $bindable<HTMLButtonElement | null>(null),
 		class: className,
 		inset,
+		disabled,
 		children,
 		...restProps
-	}: DropdownMenuPrimitive.SubTriggerProps & {
+	}: HTMLButtonAttributes & {
+		ref?: HTMLButtonElement | null;
+		class?: string;
 		inset?: boolean;
+		disabled?: boolean;
+		children?: Snippet;
 	} = $props();
+
+	const subStore = getDropdownMenuSubContext();
+
+	let highlighted = $state(false);
+
+	function handleClick() {
+		subStore.open = !subStore.open;
+	}
 </script>
 
-<DropdownMenuPrimitive.SubTrigger
-	bind:ref
+<button
+	bind:this={ref}
+	type="button"
+	role="menuitem"
+	tabindex="-1"
 	data-slot="dropdown-menu-sub-trigger"
 	data-inset={inset}
+	data-state={subStore.open ? "open" : "closed"}
+	data-highlighted={highlighted || undefined}
+	{disabled}
+	onclick={handleClick}
+	onfocus={() => (highlighted = true)}
+	onblur={() => (highlighted = false)}
+	onmouseenter={() => (highlighted = true)}
+	onmouseleave={() => {
+		highlighted = false;
+	}}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-		className
+		"relative flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg px-2 py-1.5 text-sm outline-none select-none hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+		className,
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2} class="ml-auto" />
-</DropdownMenuPrimitive.SubTrigger>
+	<HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2} class="ms-auto size-3.5" />
+</button>

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte.d.ts

@@ -1,6 +1,11 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-type $$ComponentProps = DropdownMenuPrimitive.SubTriggerProps & {
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLButtonAttributes & {
+    ref?: HTMLButtonElement | null;
+    class?: string;
     inset?: boolean;
+    disabled?: boolean;
+    children?: Snippet;
 };
 declare const DropdownMenuSubTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type DropdownMenuSubTrigger = ReturnType<typeof DropdownMenuSubTrigger>;

package/dist/components/ui/dropdown-menu/dropdown-menu-sub.svelte

@@ -1,7 +1,77 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import {
+		getDropdownMenuContext,
+		setDropdownMenuSubContext,
+		type DropdownMenuSubStore,
+	} from "./dropdown-menu-context.svelte.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
-	let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.SubProps = $props();
+	let {
+		ref = $bindable<HTMLDivElement | null>(null),
+		open = $bindable<boolean>(),
+		children,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		open?: boolean;
+		children?: Snippet;
+	} = $props();
+
+	const rootStore = getDropdownMenuContext();
+
+	let subStore: DropdownMenuSubStore = $state({ open: open ?? false });
+
+	let closeTimer: ReturnType<typeof setTimeout> | undefined;
+
+	function setOpen(value: boolean) {
+		subStore.open = value;
+		open = value;
+	}
+
+	function openSub() {
+		clearTimeout(closeTimer);
+		setOpen(true);
+	}
+
+	function scheduleClose() {
+		clearTimeout(closeTimer);
+		closeTimer = setTimeout(() => setOpen(false), 150);
+	}
+
+	$effect(() => {
+		if (open !== undefined && open !== subStore.open) {
+			subStore.open = open;
+		}
+	});
+
+	$effect(() => {
+		if (!rootStore.open) {
+			subStore.open = false;
+		}
+	});
+
+	$effect(() => {
+		if (!subStore.open) return;
+		function handlePointerDown(event: PointerEvent) {
+			const target = event.target as Node;
+			if (ref?.contains(target)) return;
+			subStore.open = false;
+		}
+		document.addEventListener("pointerdown", handlePointerDown);
+		return () => document.removeEventListener("pointerdown", handlePointerDown);
+	});
+
+	setDropdownMenuSubContext(subStore);
 </script>
 
-<DropdownMenuPrimitive.Sub bind:open {...restProps} />
+<div
+	bind:this={ref}
+	class="relative"
+	data-slot="dropdown-menu-sub"
+	onmouseenter={openSub}
+	onmouseleave={scheduleClose}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/dropdown-menu/dropdown-menu-sub.svelte.d.ts

@@ -1,3 +1,10 @@
-declare const DropdownMenuSub: import("svelte").Component<import("bits-ui").ContextMenuSubPropsWithoutHTML, {}, "open">;
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    open?: boolean;
+    children?: Snippet;
+};
+declare const DropdownMenuSub: import("svelte").Component<$$ComponentProps, {}, "ref" | "open">;
 type DropdownMenuSub = ReturnType<typeof DropdownMenuSub>;
 export default DropdownMenuSub;

package/dist/components/ui/dropdown-menu/dropdown-menu-trigger.svelte

@@ -1,7 +1,69 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { getDropdownMenuContext } from "./dropdown-menu-context.svelte.js";
+	import { cn } from "../../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
 
-	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.TriggerProps = $props();
+	let {
+		// eslint-disable-next-line no-useless-assignment
+		ref = $bindable<HTMLButtonElement | null>(null),
+		class: className,
+		children,
+		child,
+		onclick,
+		...restProps
+	}: HTMLButtonAttributes & {
+		ref?: HTMLButtonElement | null;
+		class?: string;
+		children?: Snippet;
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		onclick?: (event: MouseEvent) => void;
+	} = $props();
+
+	const store = getDropdownMenuContext();
+
+	let anchorEl = $state<HTMLButtonElement | null>(null);
+
+	function handleClick(event: MouseEvent) {
+		store.clickEvent = event;
+		store.toggle();
+		onclick?.(event);
+	}
+
+	$effect(() => {
+		const el = (anchorEl ?? document.getElementById(store.anchorId)) as HTMLButtonElement | null;
+		if (el) {
+			store.setAnchor(el);
+			ref = el;
+			anchorEl = el;
+		}
+	});
 </script>
 
-<DropdownMenuPrimitive.Trigger bind:ref data-slot="dropdown-menu-trigger" {...restProps} />
+{#if child}
+	{@render child({
+		props: {
+			id: store.anchorId,
+			type: "button",
+			"aria-haspopup": "menu",
+			"aria-expanded": store.open,
+			"data-state": store.open ? "open" : "closed",
+			onclick: handleClick,
+		},
+	})}
+{:else}
+	<button
+		bind:this={anchorEl}
+		type="button"
+		id={store.anchorId}
+		aria-haspopup="menu"
+		aria-expanded={store.open}
+		data-state={store.open ? "open" : "closed"}
+		onclick={handleClick}
+		data-slot="dropdown-menu-trigger"
+		class={cn("", className)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/components/ui/dropdown-menu/dropdown-menu-trigger.svelte.d.ts

@@ -1,4 +1,14 @@
-import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-declare const DropdownMenuTrigger: import("svelte").Component<DropdownMenuPrimitive.TriggerProps, {}, "ref">;
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLButtonAttributes & {
+    ref?: HTMLButtonElement | null;
+    class?: string;
+    children?: Snippet;
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    onclick?: (event: MouseEvent) => void;
+};
+declare const DropdownMenuTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type DropdownMenuTrigger = ReturnType<typeof DropdownMenuTrigger>;
 export default DropdownMenuTrigger;

package/dist/components/ui/dropdown-menu/dropdown-menu.svelte

@@ -1,7 +1,54 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { generateDropdownMenuId, setDropdownMenuContext, type DropdownMenuStore } from "./dropdown-menu-context.svelte.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
-	let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.RootProps = $props();
+	let {
+		open = $bindable<boolean>(),
+		defaultOpen = false,
+		onOpenChange,
+		children,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		open?: boolean;
+		defaultOpen?: boolean;
+		onOpenChange?: (open: boolean) => void;
+		children?: Snippet;
+	} = $props();
+
+	// svelte-ignore state_referenced_locally
+	let store: DropdownMenuStore = $state({
+		open: open ?? defaultOpen ?? false,
+		anchorId: generateDropdownMenuId(),
+		anchorEl: null,
+		clickEvent: null,
+		toggle: () => {
+			setOpen(!store.open);
+		},
+		openMenu: () => setOpen(true),
+		closeMenu: () => setOpen(false),
+		setAnchor: (el: HTMLElement | null) => {
+			store.anchorEl = el;
+		},
+	});
+
+	function setOpen(value: boolean) {
+		if (store.open === value) return;
+		store.open = value;
+		open = value;
+		onOpenChange?.(value);
+	}
+
+	$effect(() => {
+		if (open !== undefined && open !== store.open) {
+			store.open = open;
+			onOpenChange?.(open);
+		}
+	});
+
+	setDropdownMenuContext(store);
 </script>
 
-<DropdownMenuPrimitive.Root bind:open {...restProps} />
+<div class="relative" {...restProps}>
+	{@render children?.()}
+</div>

package/dist/components/ui/dropdown-menu/dropdown-menu.svelte.d.ts

@@ -1,3 +1,11 @@
-declare const DropdownMenu: import("svelte").Component<import("bits-ui").ContextMenuRootPropsWithoutHTML, {}, "open">;
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: Snippet;
+};
+declare const DropdownMenu: import("svelte").Component<$$ComponentProps, {}, "open">;
 type DropdownMenu = ReturnType<typeof DropdownMenu>;
 export default DropdownMenu;

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

@@ -13,11 +13,8 @@
 <div
 	bind:this={ref}
 	data-slot="empty-content"
-	class={cn(
-		"gap-4 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance",
-		className
-	)}
+	class={cn("my-4", className)}
 	{...restProps}
 >
 	{@render children?.()}
-</div>
+</div>

package/dist/components/ui/empty/empty-description.svelte

@@ -13,11 +13,8 @@
 <div
 	bind:this={ref}
 	data-slot="empty-description"
-	class={cn(
-		"text-sm/relaxed text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
-		className
-	)}
+	class={cn("text-sm text-muted-foreground", className)}
 	{...restProps}
 >
 	{@render children?.()}
-</div>
+</div>

package/dist/components/ui/empty/empty-header.svelte

@@ -13,8 +13,8 @@
 <div
 	bind:this={ref}
 	data-slot="empty-header"
-	class={cn("gap-2 flex max-w-sm flex-col items-center", className)}
+	class={cn("flex flex-col items-center justify-center gap-y-1 text-center", className)}
 	{...restProps}
 >
 	{@render children?.()}
-</div>
+</div>

package/dist/components/ui/empty/empty-media.svelte

@@ -1,25 +1,26 @@
 <script lang="ts" module>
-	import { tv, type VariantProps } from "tailwind-variants";
+	import { cn } from "../../../utils.js";
 
-	export const emptyMediaVariants = tv({
-		base: "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
-		variants: {
-			variant: {
-				default: "bg-transparent",
-				icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	});
+	const emptyMediaBase =
+		"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0";
 
-	export type EmptyMediaVariant = VariantProps<typeof emptyMediaVariants>["variant"];
+	const emptyMediaVariantClasses = {
+		default: "bg-transparent",
+		icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
+		dashed: "flex size-10 shrink-0 items-center justify-center rounded-lg border-2 border-dashed border-border bg-transparent text-foreground [&_svg:not([class*='size-'])]:size-6",
+	} as const;
+
+	export type EmptyMediaVariant = keyof typeof emptyMediaVariantClasses;
+
+	export function emptyMediaVariants(opts: { variant?: EmptyMediaVariant } = {}): string {
+		const variant = opts.variant ?? "default";
+		return cn(emptyMediaBase, emptyMediaVariantClasses[variant]);
+	}
 </script>
 
 <script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -38,4 +39,4 @@
 	{...restProps}
 >
 	{@render children?.()}
-</div>
+</div>

package/dist/components/ui/empty/empty-media.svelte.d.ts

@@ -1,23 +1,14 @@
-import { type VariantProps } from "tailwind-variants";
-export declare const emptyMediaVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: "bg-transparent";
-        icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6";
-    };
-}, undefined, "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
-    variant: {
-        default: "bg-transparent";
-        icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        default: "bg-transparent";
-        icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6";
-    };
-}, undefined>>;
-export type EmptyMediaVariant = VariantProps<typeof emptyMediaVariants>["variant"];
-import { type WithElementRef } from "../../../utils.js";
+declare const emptyMediaVariantClasses: {
+    readonly default: "bg-transparent";
+    readonly icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6";
+    readonly dashed: "flex size-10 shrink-0 items-center justify-center rounded-lg border-2 border-dashed border-border bg-transparent text-foreground [&_svg:not([class*='size-'])]:size-6";
+};
+export type EmptyMediaVariant = keyof typeof emptyMediaVariantClasses;
+export declare function emptyMediaVariants(opts?: {
+    variant?: EmptyMediaVariant;
+}): string;
 import type { HTMLAttributes } from "svelte/elements";
+import type { WithElementRef } from "../../../utils.js";
 type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     variant?: EmptyMediaVariant;
 };

package/dist/components/ui/empty/empty-title.svelte

@@ -13,8 +13,8 @@
 <div
 	bind:this={ref}
 	data-slot="empty-title"
-	class={cn("text-lg font-medium tracking-tight", className)}
+	class={cn("text-xl font-medium text-foreground", className)}
 	{...restProps}
 >
 	{@render children?.()}
-</div>
+</div>

package/dist/components/ui/empty/empty.svelte

@@ -13,11 +13,8 @@
 <div
 	bind:this={ref}
 	data-slot="empty"
-	class={cn(
-		"gap-4 rounded-lg border-dashed p-12 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance",
-		className
-	)}
+	class={cn("flex flex-col items-center justify-center text-center", className)}
 	{...restProps}
 >
 	{@render children?.()}
-</div>
+</div>

package/dist/components/ui/input-otp/context.svelte.d.ts

@@ -0,0 +1,22 @@
+export interface OtpCell {
+    index: number;
+    char: string;
+    hasFakeCaret: boolean;
+}
+export type InputOTPContext = {
+    value: string;
+    maxlength: number;
+    placeholder: string;
+    disabled: boolean;
+    activeIndex: number | null;
+    setActive(index: number | null): void;
+    setValueAt(index: number, char: string): void;
+    clearValueAt(index: number): void;
+    focusNext(index: number): void;
+    focusPrev(index: number): void;
+    handleKeyDown(index: number, event: KeyboardEvent): void;
+    handlePaste(index: number, event: ClipboardEvent): void;
+    registerInput(index: number, el: HTMLInputElement | null): void;
+};
+export declare function setInputOTPContext(ctx: InputOTPContext): InputOTPContext;
+export declare function getInputOTPContext(): InputOTPContext;

package/dist/components/ui/input-otp/context.svelte.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from "svelte";
+const INPUT_OTP_KEY = Symbol("input-otp");
+export function setInputOTPContext(ctx) {
+    return setContext(INPUT_OTP_KEY, ctx);
+}
+export function getInputOTPContext() {
+    return getContext(INPUT_OTP_KEY);
+}

package/dist/components/ui/input-otp/input-otp-group.svelte

@@ -13,8 +13,11 @@
 <div
 	bind:this={ref}
 	data-slot="input-otp-group"
-	class={cn("has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-4xl has-aria-invalid:ring-[3px] flex items-center", className)}
+	class={cn(
+		"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-4xl has-aria-invalid:ring-[3px] flex items-center gap-2",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
-</div>
+</div>