negodesign 0.0.7 → 0.0.9

package/dist/components/ui/input/input.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
-	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
 
-	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+	type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
 
 	type Props = WithElementRef<
-		Omit<HTMLInputAttributes, "type"> &
-			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+		Omit<HTMLInputAttributes, 'type'> &
+			({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
 	>;
 
 	let {
@@ -15,17 +15,17 @@
 		type,
 		files = $bindable(),
 		class: className,
-		"data-slot": dataSlot = "input",
+		'data-slot': dataSlot = 'input',
 		...restProps
 	}: Props = $props();
 </script>
 
-{#if type === "file"}
+{#if type === 'file'}
 	<input
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-4xl border px-3 py-1 text-base transition-colors file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 file:text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
 			className
 		)}
 		type="file"
@@ -38,7 +38,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-4xl border px-3 py-1 text-base transition-colors file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 file:text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
 			className
 		)}
 		{type}

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

@@ -1,8 +1,8 @@
-import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
-import { type WithElementRef } from "../../../utils.js";
-type InputType = Exclude<HTMLInputTypeAttribute, "file">;
-type Props = WithElementRef<Omit<HTMLInputAttributes, "type"> & ({
-    type: "file";
+import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+type Props = WithElementRef<Omit<HTMLInputAttributes, 'type'> & ({
+    type: 'file';
     files?: FileList;
 } | {
     type?: InputType;

package/dist/components/ui/input-group/index.d.ts

@@ -0,0 +1,7 @@
+import Root from './input-group.svelte';
+import Addon from './input-group-addon.svelte';
+import Button from './input-group-button.svelte';
+import Input from './input-group-input.svelte';
+import Text from './input-group-text.svelte';
+import Textarea from './input-group-textarea.svelte';
+export { Root, Addon, Button, Input, Text, Textarea, Root as InputGroup, Addon as InputGroupAddon, Button as InputGroupButton, Input as InputGroupInput, Text as InputGroupText, Textarea as InputGroupTextarea };

package/dist/components/ui/input-group/index.js

@@ -0,0 +1,9 @@
+import Root from './input-group.svelte';
+import Addon from './input-group-addon.svelte';
+import Button from './input-group-button.svelte';
+import Input from './input-group-input.svelte';
+import Text from './input-group-text.svelte';
+import Textarea from './input-group-textarea.svelte';
+export { Root, Addon, Button, Input, Text, Textarea, 
+//
+Root as InputGroup, Addon as InputGroupAddon, Button as InputGroupButton, Input as InputGroupInput, Text as InputGroupText, Textarea as InputGroupTextarea };

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

@@ -0,0 +1,53 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+	export const inputGroupAddonVariants = tv({
+		base: "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+		variants: {
+			align: {
+				'inline-start': 'order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]',
+				'inline-end': 'order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]',
+				'block-start':
+					'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',
+				'block-end':
+					'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2'
+			}
+		},
+		defaultVariants: {
+			align: 'inline-start'
+		}
+	});
+
+	export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>['align'];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		align = 'inline-start',
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		align?: InputGroupAddonAlign;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="input-group-addon"
+	data-align={align}
+	class={cn(inputGroupAddonVariants({ align }), className)}
+	onclick={(e) => {
+		if ((e.target as HTMLElement).closest('button')) {
+			return;
+		}
+		e.currentTarget.parentElement?.querySelector('input')?.focus();
+	}}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/input-group/input-group-addon.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const inputGroupAddonVariants: import("tailwind-variants").TVReturnType<{
+    align: {
+        'inline-start': "order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]";
+        'inline-end': "order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]";
+        'block-start': "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2";
+        'block-end': "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2";
+    };
+}, undefined, "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+    align: {
+        'inline-start': "order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]";
+        'inline-end': "order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]";
+        'block-start': "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2";
+        'block-end': "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    align: {
+        'inline-start': "order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]";
+        'inline-end': "order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]";
+        'block-start': "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2";
+        'block-end': "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2";
+    };
+}, undefined>>;
+export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>['align'];
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    align?: InputGroupAddonAlign;
+};
+declare const InputGroupAddon: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type InputGroupAddon = ReturnType<typeof InputGroupAddon>;
+export default InputGroupAddon;

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

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	const inputGroupButtonVariants = tv({
+		base: 'flex items-center gap-2 text-sm shadow-none',
+		variants: {
+			size: {
+				xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+				sm: 'cn-input-group-button-size-sm',
+				'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+				'icon-sm': 'size-8 p-0 has-[>svg]:p-0'
+			}
+		},
+		defaultVariants: {
+			size: 'xs'
+		}
+	});
+
+	export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>['size'];
+</script>
+
+<script lang="ts">
+	import { cn } from '../../../utils.js';
+	import type { ComponentProps } from 'svelte';
+	import { Button } from '../button/index.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		type = 'button',
+		variant = 'ghost',
+		size = 'xs',
+		...restProps
+	}: Omit<ComponentProps<typeof Button>, 'href' | 'size'> & {
+		size?: InputGroupButtonSize;
+	} = $props();
+</script>
+
+<Button
+	bind:ref
+	{type}
+	data-size={size}
+	{variant}
+	class={cn(inputGroupButtonVariants({ size }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</Button>

package/dist/components/ui/input-group/input-group-button.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type VariantProps } from 'tailwind-variants';
+declare const inputGroupButtonVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5";
+        sm: "cn-input-group-button-size-sm";
+        'icon-xs': "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0";
+        'icon-sm': "size-8 p-0 has-[>svg]:p-0";
+    };
+}, undefined, "flex items-center gap-2 text-sm shadow-none", {
+    size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5";
+        sm: "cn-input-group-button-size-sm";
+        'icon-xs': "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0";
+        'icon-sm': "size-8 p-0 has-[>svg]:p-0";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5";
+        sm: "cn-input-group-button-size-sm";
+        'icon-xs': "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0";
+        'icon-sm': "size-8 p-0 has-[>svg]:p-0";
+    };
+}, undefined>>;
+export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>['size'];
+import type { ComponentProps } from 'svelte';
+import { Button } from '../button/index.js';
+type $$ComponentProps = Omit<ComponentProps<typeof Button>, 'href' | 'size'> & {
+    size?: InputGroupButtonSize;
+};
+declare const InputGroupButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type InputGroupButton = ReturnType<typeof InputGroupButton>;
+export default InputGroupButton;

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn } from '../../../utils.js';
+	import type { ComponentProps } from 'svelte';
+	import { Input } from '../input/index.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...props
+	}: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+	bind:ref
+	data-slot="input-group-control"
+	class={cn(
+		'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent',
+		className
+	)}
+	bind:value
+	{...props}
+/>

package/dist/components/ui/input-group/input-group-input.svelte.d.ts

@@ -0,0 +1,11 @@
+declare const InputGroupInput: import("svelte").Component<(Omit<import("svelte/elements").HTMLInputAttributes, "type"> & ({
+    type: "file";
+    files?: FileList;
+} | {
+    type?: "number" | "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "hidden" | "image" | "month" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week" | (string & {});
+    files?: undefined;
+})) & {
+    ref?: HTMLElement | null | undefined;
+}, {}, "value" | "ref">;
+type InputGroupInput = ReturnType<typeof InputGroupInput>;
+export default InputGroupInput;

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	class={cn(
+		"text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/dist/components/ui/input-group/input-group-text.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const InputGroupText: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
+type InputGroupText = ReturnType<typeof InputGroupText>;
+export default InputGroupText;

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn } from '../../../utils.js';
+	import { Textarea } from '../textarea/index.js';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...props
+	}: ComponentProps<typeof Textarea> = $props();
+</script>
+
+<Textarea
+	bind:ref
+	data-slot="input-group-control"
+	class={cn(
+		'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent',
+		className
+	)}
+	bind:value
+	{...props}
+/>

package/dist/components/ui/input-group/input-group-textarea.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const InputGroupTextarea: import("svelte").Component<Omit<import("../../../utils.js").WithElementRef<import("svelte/elements").HTMLTextareaAttributes>, "children">, {}, "value" | "ref">;
+type InputGroupTextarea = ReturnType<typeof InputGroupTextarea>;
+export default InputGroupTextarea;

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...props
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="input-group"
+	role="group"
+	class={cn(
+		'group/input-group border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 relative flex h-9 w-full min-w-0 items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
+		className
+	)}
+	{...props}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/input-group/input-group.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const InputGroup: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type InputGroup = ReturnType<typeof InputGroup>;
+export default InputGroup;

package/dist/components/ui/input-otp/index.d.ts

@@ -0,0 +1,5 @@
+import Root from "./input-otp.svelte";
+import Group from "./input-otp-group.svelte";
+import Slot from "./input-otp-slot.svelte";
+import Separator from "./input-otp-separator.svelte";
+export { Root, Group, Slot, Separator, Root as InputOTP, Group as InputOTPGroup, Slot as InputOTPSlot, Separator as InputOTPSeparator, };

package/dist/components/ui/input-otp/index.js

@@ -0,0 +1,5 @@
+import Root from "./input-otp.svelte";
+import Group from "./input-otp-group.svelte";
+import Slot from "./input-otp-slot.svelte";
+import Separator from "./input-otp-separator.svelte";
+export { Root, Group, Slot, Separator, Root as InputOTP, Group as InputOTPGroup, Slot as InputOTPSlot, Separator as InputOTPSeparator, };

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<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)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
+declare const InputOtpGroup: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type InputOtpGroup = ReturnType<typeof InputOtpGroup>;
+export default InputOtpGroup;

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "../../../utils.js";
+	import { cn } from "../../../utils.js";
+	import { HugeiconsIcon } from "@hugeicons/svelte"
+	import { MinusSignIcon } from '@hugeicons/core-free-icons';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="input-otp-separator"
+	role="separator"
+	class={cn("[&_svg:not([class*='size-'])]:size-4 flex items-center", className)}
+	{...restProps}
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		<HugeiconsIcon icon={MinusSignIcon} strokeWidth={2}  />
+	{/if}
+</div>

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

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { WithElementRef } from "../../../utils.js";
+declare const InputOtpSeparator: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type InputOtpSeparator = ReturnType<typeof InputOtpSeparator>;
+export default InputOtpSeparator;

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { PinInput as InputOTPPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		cell,
+		class: className,
+		...restProps
+	}: InputOTPPrimitive.CellProps = $props();
+</script>
+
+<InputOTPPrimitive.Cell
+	{cell}
+	bind:ref
+	data-slot="input-otp-slot"
+	class={cn(
+		"bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm transition-all outline-none first:rounded-l-4xl first:border-l last:rounded-r-4xl data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10",
+		className
+	)}
+	{...restProps}
+>
+	{cell.char}
+	{#if cell.hasFakeCaret}
+		<div
+			class="cn-input-otp-caret pointer-events-none absolute inset-0 flex items-center justify-center"
+		>
+			<div class="animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px"></div>
+		</div>
+	{/if}
+</InputOTPPrimitive.Cell>

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

@@ -0,0 +1,4 @@
+import { PinInput as InputOTPPrimitive } from "bits-ui";
+declare const InputOtpSlot: import("svelte").Component<InputOTPPrimitive.CellProps, {}, "ref">;
+type InputOtpSlot = ReturnType<typeof InputOtpSlot>;
+export default InputOtpSlot;

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { PinInput as InputOTPPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(""),
+		...restProps
+	}: InputOTPPrimitive.RootProps = $props();
+</script>
+
+<InputOTPPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="input-otp"
+	spellcheck={false}
+	class={cn(
+		"cn-input-otp-input gap-2 flex items-center disabled:cursor-not-allowed has-disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+/>

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

@@ -0,0 +1,4 @@
+import { PinInput as InputOTPPrimitive } from "bits-ui";
+declare const InputOtp: import("svelte").Component<InputOTPPrimitive.RootProps, {}, "value" | "ref">;
+type InputOtp = ReturnType<typeof InputOtp>;
+export default InputOtp;

package/dist/components/ui/language-switcher/index.d.ts

@@ -1,3 +1,3 @@
 import LanguageSwitcher from './language-switcher.svelte';
-export type { Language, LanguageSwitcherProps } from './language-switcher.svelte';
+export type { LanguageSwitcherProps } from './language-switcher.svelte';
 export { LanguageSwitcher as Root, LanguageSwitcher };

package/dist/components/ui/light-switch/light-switch.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { Size } from "../../button.svelte";
+  import type { Size } from "../button/button.svelte";
 
   export type LightSwitchProps = {
     variant?: "outline" | "ghost";
@@ -11,7 +11,7 @@
   import SunIcon from "@lucide/svelte/icons/sun";
   import MoonIcon from "@lucide/svelte/icons/moon";
   import { toggleMode } from "mode-watcher";
-  import Button, { sizeMap } from "../../button.svelte";
+  import Button, { sizeMap } from "../button/button.svelte";
 
   let { variant = "outline", size = "default" }: LightSwitchProps = $props();
 </script>

package/dist/components/ui/light-switch/light-switch.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Size } from "../../button.svelte";
+import type { Size } from "../button/button.svelte";
 export type LightSwitchProps = {
     variant?: "outline" | "ghost";
     size?: Size;