@kayord/ui 1.1.16 → 1.1.18

package/dist/components/ui/field/field-set.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLFieldsetAttributes } from "svelte/elements";
+
+	let { class: className, children, ...restProps }: HTMLFieldsetAttributes = $props();
+</script>
+
+<fieldset
+	data-slot="field-set"
+	class={cn(
+		"flex flex-col gap-6",
+		"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</fieldset>

package/dist/components/ui/field/field-set.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLFieldsetAttributes } from "svelte/elements";
+declare const FieldSet: import("svelte").Component<HTMLFieldsetAttributes, {}, "">;
+type FieldSet = ReturnType<typeof FieldSet>;
+export default FieldSet;

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div
+	data-slot="field-title"
+	class={cn(
+		"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/field/field-title.svelte.d.ts

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

package/dist/components/ui/field/field.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	const fieldVariants = tv({
+		base: "group/field data-[invalid=true]:text-destructive flex w-full gap-3",
+		variants: {
+			orientation: {
+				vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+				horizontal: [
+					"flex-row items-center",
+					"[&>[data-slot=field-label]]:flex-auto",
+					"has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start",
+				],
+				responsive: [
+					"@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+					"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+					"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+				],
+			},
+		},
+		defaultVariants: {
+			orientation: "vertical",
+		},
+	});
+
+	export type FieldOrientation = VariantProps<typeof fieldVariants>["orientation"];
+</script>
+
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		class: className,
+		orientation = "vertical",
+		children,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		orientation?: FieldOrientation;
+	} = $props();
+</script>
+
+<div
+	role="group"
+	data-slot="field"
+	data-orientation={orientation}
+	class={cn(fieldVariants({ orientation }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,28 @@
+import { type VariantProps } from "tailwind-variants";
+declare const fieldVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        vertical: string;
+        horizontal: string[];
+        responsive: string[];
+    };
+}, undefined, "group/field data-[invalid=true]:text-destructive flex w-full gap-3", {
+    orientation: {
+        vertical: string;
+        horizontal: string[];
+        responsive: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        vertical: string;
+        horizontal: string[];
+        responsive: string[];
+    };
+}, undefined, "group/field data-[invalid=true]:text-destructive flex w-full gap-3", unknown, unknown, undefined>>;
+export type FieldOrientation = VariantProps<typeof fieldVariants>["orientation"];
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    orientation?: FieldOrientation;
+};
+declare const Field: import("svelte").Component<$$ComponentProps, {}, "">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/components/ui/field/index.d.ts

@@ -0,0 +1,11 @@
+import Field from "./field.svelte";
+import Set from "./field-set.svelte";
+import Legend from "./field-legend.svelte";
+import Group from "./field-group.svelte";
+import Content from "./field-content.svelte";
+import Label from "./field-label.svelte";
+import Title from "./field-title.svelte";
+import Description from "./field-description.svelte";
+import Separator from "./field-separator.svelte";
+import Error from "./field-error.svelte";
+export { Field, Set, Legend, Group, Content, Label, Title, Description, Separator, Error, Set as FieldSet, Legend as FieldLegend, Group as FieldGroup, Content as FieldContent, Label as FieldLabel, Title as FieldTitle, Description as FieldDescription, Separator as FieldSeparator, Error as FieldError, };

package/dist/components/ui/field/index.js

@@ -0,0 +1,13 @@
+import Field from "./field.svelte";
+import Set from "./field-set.svelte";
+import Legend from "./field-legend.svelte";
+import Group from "./field-group.svelte";
+import Content from "./field-content.svelte";
+import Label from "./field-label.svelte";
+import Title from "./field-title.svelte";
+import Description from "./field-description.svelte";
+import Separator from "./field-separator.svelte";
+import Error from "./field-error.svelte";
+export { Field, Set, Legend, Group, Content, Label, Title, Description, Separator, Error, 
+//
+Set as FieldSet, Legend as FieldLegend, Group as FieldGroup, Content as FieldContent, Label as FieldLabel, Title as FieldTitle, Description as FieldDescription, Separator as FieldSeparator, Error as FieldError, };

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import * as Button from "../button/index.js";
+	import { Button, type ButtonProps } from "../button/index.js";
 
-	let { ref = $bindable(null), ...restProps }: Button.Props = $props();
+	let { ref = $bindable(null), ...restProps }: ButtonProps = $props();
 </script>
 
-<Button.Root bind:ref type="submit" {...restProps} />
+<Button bind:ref type="submit" {...restProps} />

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

@@ -1,4 +1,4 @@
-import * as Button from "../button/index.js";
-declare const FormButton: import("svelte").Component<Button.Props, {}, "ref">;
+import { type ButtonProps } from "../button/index.js";
+declare const FormButton: import("svelte").Component<ButtonProps, {}, "ref">;
 type FormButton = ReturnType<typeof FormButton>;
 export default FormButton;

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

@@ -5,6 +5,7 @@ export { AspectRatio } from "./aspect-ratio/index.js";
 export * as Avatar from "./avatar/index.js";
 export { Badge, badgeVariants, type BadgeVariant } from "./badge/index.js";
 export * as Breadcrumb from "./breadcrumb/index.js";
+export * as ButtonGroup from "./button-group/index.js";
 export { Button, type ButtonProps, buttonVariants } from "./button/index.js";
 export { Calendar } from "./calendar/index.js";
 export * as Card from "./card/index.js";
@@ -18,10 +19,15 @@ export { FlexRender, renderComponent, renderSnippet, createSvelteTable, createSv
 export * as Dialog from "./dialog/index.js";
 export * as Drawer from "./drawer/index.js";
 export * as DropdownMenu from "./dropdown-menu/index.js";
+export * as Empty from "./empty/index.js";
+export * as Field from "./field/index.js";
 export * as Form from "./form/index.js";
 export * as HoverCard from "./hover-card/index.js";
+export * as InputGroup from "./input-group/index.js";
 export { Input } from "./input/index.js";
 export * as InputOTP from "./input-otp/index.js";
+export * as Item from "./item/index.js";
+export * as Kbd from "./kbd/index.js";
 export { Label } from "./label/index.js";
 export * as Menubar from "./menubar/index.js";
 export * as Pagination from "./pagination/index.js";
@@ -40,6 +46,7 @@ export { Slider } from "./slider/index.js";
 export { Toaster } from "./sonner/index.js";
 export { toast } from "svelte-sonner";
 export { Switch } from "./switch/index.js";
+export { Spinner } from "./spinner/index.js";
 export * as Table from "./table/index.js";
 export * as Tabs from "./tabs/index.js";
 export { Textarea } from "./textarea/index.js";

package/dist/components/ui/index.js

@@ -5,6 +5,7 @@ export { AspectRatio } from "./aspect-ratio/index.js";
 export * as Avatar from "./avatar/index.js";
 export { Badge, badgeVariants } from "./badge/index.js";
 export * as Breadcrumb from "./breadcrumb/index.js";
+export * as ButtonGroup from "./button-group/index.js";
 export { Button, buttonVariants } from "./button/index.js";
 export { Calendar } from "./calendar/index.js";
 export * as Card from "./card/index.js";
@@ -18,10 +19,15 @@ export { FlexRender, renderComponent, renderSnippet, createSvelteTable, createSv
 export * as Dialog from "./dialog/index.js";
 export * as Drawer from "./drawer/index.js";
 export * as DropdownMenu from "./dropdown-menu/index.js";
+export * as Empty from "./empty/index.js";
+export * as Field from "./field/index.js";
 export * as Form from "./form/index.js";
 export * as HoverCard from "./hover-card/index.js";
+export * as InputGroup from "./input-group/index.js";
 export { Input } from "./input/index.js";
 export * as InputOTP from "./input-otp/index.js";
+export * as Item from "./item/index.js";
+export * as Kbd from "./kbd/index.js";
 export { Label } from "./label/index.js";
 export * as Menubar from "./menubar/index.js";
 export * as Pagination from "./pagination/index.js";
@@ -40,6 +46,7 @@ export { Slider } from "./slider/index.js";
 export { Toaster } from "./sonner/index.js";
 export { toast } from "svelte-sonner";
 export { Switch } from "./switch/index.js";
+export { Spinner } from "./spinner/index.js";
 export * as Table from "./table/index.js";
 export * as Tabs from "./tabs/index.js";
 export { Textarea } from "./textarea/index.js";

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

@@ -14,6 +14,7 @@
 		type,
 		files = $bindable(),
 		class: className,
+		"data-slot": dataSlot = "input",
 		...restProps
 	}: Props = $props();
 </script>
@@ -21,7 +22,7 @@
 {#if type === "file"}
 	<input
 		bind:this={ref}
-		data-slot="input"
+		data-slot={dataSlot}
 		class={cn(
 			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
@@ -36,7 +37,7 @@
 {:else}
 	<input
 		bind:this={ref}
-		data-slot="input"
+		data-slot={dataSlot}
 		class={cn(
 			"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",

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,50 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+	const inputGroupAddonVariants = tv({
+		base: "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium 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-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+				"inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+				"block-start":
+					"[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
+				"block-end": "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5",
+			},
+		},
+		defaultVariants: {
+			align: "inline-start",
+		},
+	});
+
+	export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>["align"];
+</script>
+
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		class: className,
+		children,
+		align = "inline-start",
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		align?: InputGroupAddonAlign;
+	} = $props();
+</script>
+
+<div
+	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,31 @@
+import { type VariantProps } from "tailwind-variants";
+declare const inputGroupAddonVariants: import("tailwind-variants").TVReturnType<{
+    align: {
+        "inline-start": string;
+        "inline-end": string;
+        "block-start": string;
+        "block-end": string;
+    };
+}, undefined, "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+    align: {
+        "inline-start": string;
+        "inline-end": string;
+        "block-start": string;
+        "block-end": string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    align: {
+        "inline-start": string;
+        "inline-end": string;
+        "block-start": string;
+        "block-end": string;
+    };
+}, undefined, "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>;
+export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>["align"];
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    align?: InputGroupAddonAlign;
+};
+declare const InputGroupAddon: import("svelte").Component<$$ComponentProps, {}, "">;
+type InputGroupAddon = ReturnType<typeof InputGroupAddon>;
+export default InputGroupAddon;

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

@@ -0,0 +1,41 @@
+<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-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+				sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+				"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 {
+		class: className,
+		children,
+		type = "button",
+		variant = "ghost",
+		size = "xs",
+		...restProps
+	}: Omit<ComponentProps<typeof Button>, "href" | "size"> & {
+		size?: InputGroupButtonSize;
+	} = $props();
+</script>
+
+<Button {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: string;
+        sm: string;
+        "icon-xs": string;
+        "icon-sm": string;
+    };
+}, undefined, "flex items-center gap-2 text-sm shadow-none", {
+    size: {
+        xs: string;
+        sm: string;
+        "icon-xs": string;
+        "icon-sm": string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        "icon-xs": string;
+        "icon-sm": string;
+    };
+}, undefined, "flex items-center gap-2 text-sm shadow-none", unknown, unknown, 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, {}, "">;
+type InputGroupButton = ReturnType<typeof InputGroupButton>;
+export default InputGroupButton;

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { ComponentProps } from "svelte";
+	import { Input } from "../input/index.js";
+
+	let { class: className, ...props }: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+	data-slot="input-group-control"
+	class={cn(
+		"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+		className
+	)}
+	{...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" | "hidden" | "color" | "search" | "button" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "date" | "time" | "submit" | "reset" | "month" | "week" | "datetime-local" | "image" | "password" | "range";
+    files?: undefined;
+})) & {
+    ref?: HTMLElement | null | undefined;
+}, {}, "">;
+type InputGroupInput = ReturnType<typeof InputGroupInput>;
+export default InputGroupInput;

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let { class: className, children, ...restProps }: HTMLAttributes<HTMLSpanElement> = $props();
+</script>
+
+<span
+	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,4 @@
+import type { HTMLAttributes } from "svelte/elements";
+declare const InputGroupText: import("svelte").Component<HTMLAttributes<HTMLSpanElement>, {}, "">;
+type InputGroupText = ReturnType<typeof InputGroupText>;
+export default InputGroupText;

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import { Textarea } from "../textarea/index.js";
+	import type { ComponentProps } from "svelte";
+
+	let { class: className, ...props }: ComponentProps<typeof Textarea> = $props();
+</script>
+
+<Textarea
+	data-slot="input-group-control"
+	class={cn(
+		"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+		className
+	)}
+	{...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">, {}, "">;
+type InputGroupTextarea = ReturnType<typeof InputGroupTextarea>;
+export default InputGroupTextarea;

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let { class: className, children, ...props }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div
+	data-slot="input-group"
+	role="group"
+	class={cn(
+		"group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
+		"h-9 has-[>textarea]:h-auto",
+
+		// Variants based on alignment.
+		"has-[>[data-align=inline-start]]:[&>input]:pl-2",
+		"has-[>[data-align=inline-end]]:[&>input]:pr-2",
+		"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+		"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+		// Focus state.
+		"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+
+		// Error state.
+		"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",
+
+		className
+	)}
+	{...props}
+>
+	{@render children?.()}
+</div>

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

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

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

@@ -10,7 +10,7 @@
 	bind:ref
 	data-slot="input-otp-slot"
 	class={cn(
-		"border-input aria-invalid:border-destructive dark:bg-input/30 relative flex size-10 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md",
+		"border-input aria-invalid:border-destructive dark:bg-input/30 relative flex size-9 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md",
 		cell.isActive &&
 			"border-ring ring-ring/50 aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40 aria-invalid:ring-destructive/20 ring-offset-background z-10 ring-[3px]",
 		className

package/dist/components/ui/item/index.d.ts

@@ -0,0 +1,11 @@
+import Root from "./item.svelte";
+import Group from "./item-group.svelte";
+import Separator from "./item-separator.svelte";
+import Header from "./item-header.svelte";
+import Footer from "./item-footer.svelte";
+import Content from "./item-content.svelte";
+import Title from "./item-title.svelte";
+import Description from "./item-description.svelte";
+import Actions from "./item-actions.svelte";
+import Media from "./item-media.svelte";
+export { Root, Group, Separator, Header, Footer, Content, Title, Description, Actions, Media, Root as Item, Group as ItemGroup, Separator as ItemSeparator, Header as ItemHeader, Footer as ItemFooter, Content as ItemContent, Title as ItemTitle, Description as ItemDescription, Actions as ItemActions, Media as ItemMedia, };

package/dist/components/ui/item/index.js

@@ -0,0 +1,13 @@
+import Root from "./item.svelte";
+import Group from "./item-group.svelte";
+import Separator from "./item-separator.svelte";
+import Header from "./item-header.svelte";
+import Footer from "./item-footer.svelte";
+import Content from "./item-content.svelte";
+import Title from "./item-title.svelte";
+import Description from "./item-description.svelte";
+import Actions from "./item-actions.svelte";
+import Media from "./item-media.svelte";
+export { Root, Group, Separator, Header, Footer, Content, Title, Description, Actions, Media, 
+//
+Root as Item, Group as ItemGroup, Separator as ItemSeparator, Header as ItemHeader, Footer as ItemFooter, Content as ItemContent, Title as ItemTitle, Description as ItemDescription, Actions as ItemActions, Media as ItemMedia, };

package/dist/components/ui/item/item-actions.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div data-slot="item-actions" class={cn("flex items-center gap-2", className)} {...restProps}>
+	{@render children?.()}
+</div>

package/dist/components/ui/item/item-actions.svelte.d.ts

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

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div
+	data-slot="item-content"
+	class={cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/item/item-content.svelte.d.ts

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