@tanglemedia/svelte-starter-ui-shadcn 0.1.0 → 0.2.0

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

@@ -5,7 +5,7 @@ export { AspectRatio } from "./aspect-ratio/index.js";
 export * as Avatar from "./avatar/index.js";
 export { Badge } from "./badge/index.js";
 export * as Breadcrumb from "./breadcrumb/index.js";
-export { Button, buttonVariants } from "./button/index.js";
+export { Button, buttonVariants, } from "./button/index.js";
 export { Calendar } from "./calendar/index.js";
 export * as Card from "./card/index.js";
 export * as Carousel from "./carousel/index.js";
@@ -18,6 +18,7 @@ export * as Drawer from "./drawer/index.js";
 export * as DropdownMenu from "./dropdown-menu/index.js";
 export * as HoverCard from "./hover-card/index.js";
 export { InputOTP } from "./input-otp/index.js";
+export * as InputGroup from "./input-group/index.js";
 export * as Menubar from "./menubar/index.js";
 export * as Pagination from "./pagination/index.js";
 export * as Popover from "./popover/index.js";
@@ -43,7 +44,9 @@ export * as ToggleGroup from "./toggle-group/index.js";
 export * as Tooltip from "./tooltip/index.js";
 export * as Chart from "./chart/index.js";
 export * as Item from "./item/index.js";
+export * as Attachment from "./attachment/index.js";
 export * as ButtonGroup from "./button-group/index.js";
+export * as Field from "./field/index.js";
 export * as Empty from "./empty/index.js";
 export * as Kbd from "./kbd/index.js";
 export * as NativeSelect from "./native-select/index.js";
@@ -60,3 +63,7 @@ export { Label } from "./label/index.js";
  * @deprecated Moved to @tanglemedia/svelte-started-form-shadcn
  */
 export { Input } from "./input/index.js";
+export * as Message from "./message/index.js";
+export * as Bubble from "./bubble/index.js";
+export * as MessageScroller from "./message-scroller/index.js";
+export * as Questionnaire from "./questionnaire/index.js";

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
 
 	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
 
@@ -25,9 +25,7 @@
 		bind:this={ref}
 		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 shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50",
-			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+			"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 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
 		type="file"
@@ -40,9 +38,7 @@
 		bind:this={ref}
 		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 shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+			"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 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
 		{type}

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

@@ -1,5 +1,5 @@
-import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
 import { type WithElementRef } from "../../utils.js";
+import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
 type InputType = Exclude<HTMLInputTypeAttribute, "file">;
 type Props = WithElementRef<Omit<HTMLInputAttributes, "type"> & ({
     type: "file";
@@ -8,6 +8,6 @@ type Props = WithElementRef<Omit<HTMLInputAttributes, "type"> & ({
     type?: InputType;
     files?: undefined;
 })>;
-declare const Input: import("svelte").Component<Props, {}, "value" | "ref" | "files">;
+declare const Input: import("svelte").Component<Props, {}, "ref" | "value" | "files">;
 type Input = ReturnType<typeof Input>;
 export default Input;

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

@@ -1,7 +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";
+import Root from "./input-group.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/lib/components/ui/input-group/index.js

@@ -1,9 +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";
+import Root from "./input-group.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/lib/components/ui/input-group/input-group-addon.svelte

@@ -1,17 +1,13 @@
 <script lang="ts" module>
 	import { tv, type VariantProps } from "tailwind-variants";
 	export 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",
+		base: "text-muted-foreground h-auto 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 flex cursor-text items-center justify-center select-none",
 		variants: {
 			align: {
-				"inline-start":
-					"order-first ps-3 has-[>button]:ms-[-0.45rem] has-[>kbd]:ms-[-0.35rem]",
-				"inline-end":
-					"order-last pe-3 has-[>button]:me-[-0.45rem] has-[>kbd]:me-[-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",
+				"inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first",
+				"inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last",
+				"block-start": "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
+				"block-end": "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
 			},
 		},
 		defaultVariants: {

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

@@ -1,26 +1,26 @@
 import { type VariantProps } from "tailwind-variants";
 export declare const inputGroupAddonVariants: import("tailwind-variants").TVReturnType<{
     align: {
-        "inline-start": string;
-        "inline-end": string;
-        "block-start": string;
-        "block-end": string;
+        "inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first";
+        "inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last";
+        "block-start": "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start";
+        "block-end": "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start";
     };
-}, 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", {
+}, undefined, "text-muted-foreground h-auto 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 flex cursor-text items-center justify-center select-none", {
     align: {
-        "inline-start": string;
-        "inline-end": string;
-        "block-start": string;
-        "block-end": string;
+        "inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first";
+        "inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last";
+        "block-start": "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start";
+        "block-end": "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     align: {
-        "inline-start": string;
-        "inline-end": string;
-        "block-start": string;
-        "block-end": string;
+        "inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first";
+        "inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last";
+        "block-start": "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start";
+        "block-end": "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start";
     };
-}, 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>>;
+}, undefined>>;
 export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>["align"];
 import { type WithElementRef } from "../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";

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

@@ -2,12 +2,12 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	const inputGroupButtonVariants = tv({
-		base: "flex items-center gap-2 text-sm shadow-none",
+		base: "gap-2 text-sm flex items-center 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",
+				xs: "h-6 gap-1 rounded-[calc(var(--radius)_-_3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+				sm: "",
+				"icon-xs": "size-6 rounded-[calc(var(--radius)_-_3px)] p-0 has-[>svg]:p-0",
 				"icon-sm": "size-8 p-0 has-[>svg]:p-0",
 			},
 		},
@@ -20,9 +20,9 @@
 </script>
 
 <script lang="ts">
+	import { Button } from "../button/index.js";
 	import { cn } from "../../utils.js";
 	import type { ComponentProps } from "svelte";
-	import { Button } from "../button/index.js";
 
 	let {
 		ref = $bindable(null),

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

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

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

@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { Input } from "../input/index.js";
 	import { cn } from "../../utils.js";
 	import type { ComponentProps } from "svelte";
-	import { Input } from "../input/index.js";
 
 	let {
 		ref = $bindable(null),
@@ -14,10 +14,7 @@
 <Input
 	bind:ref
 	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
-	)}
+	class={cn("rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1", className)}
 	bind:value
 	{...props}
 />

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

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

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

@@ -12,10 +12,7 @@
 
 <span
 	bind:this={ref}
-	class={cn(
-		"text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
-		className
-	)}
+	class={cn("text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn } from "../../utils.js";
 	import { Textarea } from "../textarea/index.js";
+	import { cn } from "../../utils.js";
 	import type { ComponentProps } from "svelte";
 
 	let {
@@ -14,10 +14,7 @@
 <Textarea
 	bind:ref
 	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
-	)}
+	class={cn("rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none", className)}
 	bind:value
 	{...props}
 />

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

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

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

@@ -15,21 +15,7 @@
 	data-slot="input-group"
 	role="group"
 	class={cn(
-		"group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-md border outline-none transition-[color,box-shadow]",
-		"h-9 has-[>textarea]:h-auto",
-
-		// Variants based on alignment.
-		"has-[>[data-align=inline-start]]:[&>input]:ps-2",
-		"has-[>[data-align=inline-end]]:[&>input]:pe-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",
-
+		"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 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 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-[>[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 relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
 		className
 	)}
 	{...props}

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

@@ -1,5 +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";
+import Slot from "./input-otp-slot.svelte";
+import Root from "./input-otp.svelte";
 export { Root, Group, Slot, Separator, Root as InputOTP, Group as InputOTPGroup, Slot as InputOTPSlot, Separator as InputOTPSeparator, };

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

@@ -1,5 +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";
+import Slot from "./input-otp-slot.svelte";
+import Root from "./input-otp.svelte";
 export { Root, Group, Slot, Separator, Root as InputOTP, Group as InputOTPGroup, Slot as InputOTPSlot, Separator as InputOTPSeparator, };

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="input-otp-group"
-	class={cn("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-lg has-aria-invalid:ring-3 flex items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

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

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

@@ -1,19 +1,27 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
+	import MinusIcon from '@lucide/svelte/icons/minus';
 	import type { WithElementRef } from "../../utils.js";
-	import DotIcon from "@lucide/svelte/icons/dot";
+	import { cn } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
+		class: className,
 		children,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="input-otp-separator" role="separator" {...restProps}>
+<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}
-		<DotIcon />
+		<MinusIcon  />
 	{/if}
 </div>

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

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

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

@@ -15,17 +15,21 @@
 	bind:ref
 	data-slot="input-otp-slot"
 	class={cn(
-		"border-input aria-invalid:border-destructive dark:bg-input/30 relative flex size-9 items-center justify-center border-y border-e text-sm outline-none transition-all first:rounded-s-md first:border-s last:rounded-e-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]",
+		"dark: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-8 border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:ring-3 relative flex items-center justify-center data-[active=true]:z-10",
 		className
 	)}
 	{...restProps}
 >
-	{cell.char}
-	{#if cell.hasFakeCaret}
-		<div class="pointer-events-none absolute inset-0 flex items-center justify-center">
-			<div class="animate-caret-blink bg-foreground h-4 w-px duration-1000"></div>
+	{#snippet child({ props })}
+		<div {...props} data-active={cell.isActive}>
+			{cell.char}
+			{#if cell.hasFakeCaret}
+				<div
+					class="pointer-events-none absolute inset-0 flex items-center justify-center"
+				>
+					<div class="animate-caret-blink bg-foreground h-4 w-px duration-1000"></div>
+				</div>
+			{/if}
 		</div>
-	{/if}
+	{/snippet}
 </InputOTPPrimitive.Cell>

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

@@ -14,8 +14,10 @@
 	bind:ref
 	bind:value
 	data-slot="input-otp"
+	spellcheck={false}
 	class={cn(
-		"has-disabled:opacity-50 flex items-center gap-2 [&_input]:disabled:cursor-not-allowed",
+		"cn-input-otp flex items-center has-disabled:opacity-50",
+		"disabled:cursor-not-allowed",
 		className
 	)}
 	{...restProps}

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

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

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

@@ -1,11 +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 Actions from "./item-actions.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 Footer from "./item-footer.svelte";
+import Group from "./item-group.svelte";
+import Header from "./item-header.svelte";
 import Media from "./item-media.svelte";
+import Separator from "./item-separator.svelte";
+import Title from "./item-title.svelte";
+import Root from "./item.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/lib/components/ui/item/index.js

@@ -1,13 +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 Actions from "./item-actions.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 Footer from "./item-footer.svelte";
+import Group from "./item-group.svelte";
+import Header from "./item-header.svelte";
 import Media from "./item-media.svelte";
+import Separator from "./item-separator.svelte";
+import Title from "./item-title.svelte";
+import Root from "./item.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/lib/components/ui/item/item-actions.svelte

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="item-actions"
-	class={cn("flex items-center gap-2", className)}
+	class={cn("gap-2 flex items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -13,7 +13,10 @@
 <div
 	bind:this={ref}
 	data-slot="item-content"
-	class={cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className)}
+	class={cn(
+		"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/lib/components/ui/item/item-description.svelte

@@ -14,8 +14,7 @@
 	bind:this={ref}
 	data-slot="item-description"
 	class={cn(
-		"text-muted-foreground line-clamp-2 text-balance text-sm font-normal leading-normal",
-		"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+		"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
 		className
 	)}
 	{...restProps}

package/dist/lib/components/ui/item/item-footer.svelte

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="item-footer"
-	class={cn("flex basis-full items-center justify-between gap-2", className)}
+	class={cn("gap-2 flex basis-full items-center justify-between", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/lib/components/ui/item/item-group.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	role="list"
 	data-slot="item-group"
-	class={cn("group/item-group flex flex-col", className)}
+	class={cn("gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/lib/components/ui/item/item-header.svelte

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="item-header"
-	class={cn("flex basis-full items-center justify-between gap-2", className)}
+	class={cn("gap-2 flex basis-full items-center justify-between", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/lib/components/ui/item/item-media.svelte

@@ -2,12 +2,12 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const itemMediaVariants = tv({
-		base: "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
+		base: "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
 		variants: {
 			variant: {
 				default: "bg-transparent",
-				icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
-				image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
+				icon: "[&_svg:not([class*='size-'])]:size-4",
+				image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
 			},
 		},
 		defaultVariants: {