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

package/src/lib/components/ui/field/field-title.svelte

@@ -13,10 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="field-title"
-	class={cn(
-		"flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50",
-		className
-	)}
+	class={cn("gap-2 leading-snug text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/lib/components/ui/field/field.svelte

@@ -2,20 +2,14 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const fieldVariants = tv({
-		base: "group/field data-[invalid=true]:text-destructive flex w-full gap-3",
+		base: "data-[invalid=true]:text-destructive gap-2 group/field flex w-full",
 		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",
-				],
+				vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+				horizontal:
+					"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+				responsive:
+					"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
 			},
 		},
 		defaultVariants: {

package/src/lib/components/ui/field/index.ts

@@ -1,13 +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";
+import Group from "./field-group.svelte";
+import Label from "./field-label.svelte";
+import Legend from "./field-legend.svelte";
+import Separator from "./field-separator.svelte";
+import Set from "./field-set.svelte";
+import Title from "./field-title.svelte";
+import Field from "./field.svelte";
 
 export {
 	Field,

package/src/lib/components/ui/form/form-description.svelte

@@ -12,6 +12,6 @@
 <FormPrimitive.Description
 	bind:ref
 	data-slot="form-description"
-	class={cn("text-muted-foreground text-sm", className)}
+	class={cn("text-sm text-muted-foreground", className)}
 	{...restProps}
 />

package/src/lib/components/ui/form/form-element-field.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
 	import * as FormPrimitive from "formsnap";
-	import type { FormPathLeaves } from "sveltekit-superforms";
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef, type WithoutChildren } from "$lib/components/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { FormPathLeaves } from "sveltekit-superforms";
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/ui/form/form-field-errors.svelte

@@ -15,7 +15,7 @@
 
 <FormPrimitive.FieldErrors
 	bind:ref
-	class={cn("text-destructive text-sm font-medium", className)}
+	class={cn("text-sm font-medium text-destructive", className)}
 	{...restProps}
 >
 	{#snippet children({ errors, errorProps })}

package/src/lib/components/ui/form/form-field.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
 	import * as FormPrimitive from "formsnap";
-	import type { FormPath } from "sveltekit-superforms";
 	import { cn, type WithElementRef, type WithoutChildren } from "$lib/components/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { FormPath } from "sveltekit-superforms";
 
 	let {
 		ref = $bindable(null),
@@ -17,12 +17,7 @@
 
 <FormPrimitive.Field {form} {name}>
 	{#snippet children({ constraints, errors, tainted, value })}
-		<div
-			bind:this={ref}
-			data-slot="form-item"
-			class={cn("space-y-2", className)}
-			{...restProps}
-		>
+		<div bind:this={ref} data-slot="form-item" class={cn("space-y-2", className)} {...restProps}>
 			{@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })}
 		</div>
 	{/snippet}

package/src/lib/components/ui/form/form-fieldset.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
 	import * as FormPrimitive from "formsnap";
-	import type { FormPath } from "sveltekit-superforms";
 	import { cn, type WithoutChild } from "$lib/components/utils.js";
+	import type { FormPath } from "sveltekit-superforms";
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/ui/form/form-legend.svelte

@@ -11,6 +11,6 @@
 
 <FormPrimitive.Legend
 	bind:ref
-	class={cn("data-[fs-error]:text-destructive text-sm font-medium leading-none", className)}
+	class={cn("text-sm leading-none font-medium data-[fs-error]:text-destructive", className)}
 	{...restProps}
 />

package/src/lib/components/ui/form/index.ts

@@ -1,12 +1,12 @@
 import * as FormPrimitive from "formsnap";
+import Button from "./form-button.svelte";
 import Description from "./form-description.svelte";
-import Label from "./form-label.svelte";
+import ElementField from "./form-element-field.svelte";
 import FieldErrors from "./form-field-errors.svelte";
 import Field from "./form-field.svelte";
 import Fieldset from "./form-fieldset.svelte";
+import Label from "./form-label.svelte";
 import Legend from "./form-legend.svelte";
-import ElementField from "./form-element-field.svelte";
-import Button from "./form-button.svelte";
 
 const Control = FormPrimitive.Control;
 

package/src/lib/components/ui/hover-card/hover-card-content.svelte

@@ -7,8 +7,9 @@
 	let {
 		ref = $bindable(null),
 		class: className,
-		align = "center",
+		side = "bottom",
 		sideOffset = 4,
+		align = "center",
 		portalProps,
 		...restProps
 	}: HoverCardPrimitive.ContentProps & {
@@ -20,10 +21,11 @@
 	<HoverCardPrimitive.Content
 		bind:ref
 		data-slot="hover-card-content"
-		{align}
+		{side}
 		{sideOffset}
+		{align}
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 outline-hidden z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-none",
+			"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/10 bg-popover text-popover-foreground w-64 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 origin-(--bits-link-preview-content-transform-origin) outline-hidden",
 			className
 		)}
 		{...restProps}

package/src/lib/components/ui/hover-card/index.ts

@@ -1,7 +1,7 @@
-import Root from "./hover-card.svelte";
 import Content from "./hover-card-content.svelte";
-import Trigger from "./hover-card-trigger.svelte";
 import Portal from "./hover-card-portal.svelte";
+import Trigger from "./hover-card-trigger.svelte";
+import Root from "./hover-card.svelte";
 
 export {
 	Root,

package/src/lib/components/ui/index.ts

@@ -1,71 +1,84 @@
-export * as Accordion from './accordion/index.ts';
-export * as Alert from './alert/index.ts';
-export * as AlertDialog from './alert-dialog/index.ts';
-export { AspectRatio } from './aspect-ratio/index.ts';
-export * as Avatar from './avatar/index.ts';
-export { Badge } from './badge/index.ts';
-export * as Breadcrumb from './breadcrumb/index.ts';
-export { Button, buttonVariants, type ButtonSize, type ButtonVariant, type ButtonProps } from './button/index.ts';
-export { Calendar } from './calendar/index.ts';
-export * as Card from './card/index.ts';
-export * as Carousel from './carousel/index.ts';
-export { Checkbox } from './checkbox/index.ts';
-export * as Collapsible from './collapsible/index.ts';
-export * as Command from './command/index.ts';
-export * as ContextMenu from './context-menu/index.ts';
-export * as Dialog from './dialog/index.ts';
-export * as Drawer from './drawer/index.ts';
-export * as DropdownMenu from './dropdown-menu/index.ts';
-export * as HoverCard from './hover-card/index.ts';
-export { InputOTP } from './input-otp/index.ts';
+export * as Accordion from "./accordion/index.ts";
+export * as Alert from "./alert/index.ts";
+export * as AlertDialog from "./alert-dialog/index.ts";
+export { AspectRatio } from "./aspect-ratio/index.ts";
+export * as Avatar from "./avatar/index.ts";
+export { Badge } from "./badge/index.ts";
+export * as Breadcrumb from "./breadcrumb/index.ts";
+export {
+  Button,
+  buttonVariants,
+  type ButtonSize,
+  type ButtonVariant,
+  type ButtonProps,
+} from "./button/index.ts";
+export { Calendar } from "./calendar/index.ts";
+export * as Card from "./card/index.ts";
+export * as Carousel from "./carousel/index.ts";
+export { Checkbox } from "./checkbox/index.ts";
+export * as Collapsible from "./collapsible/index.ts";
+export * as Command from "./command/index.ts";
+export * as ContextMenu from "./context-menu/index.ts";
+export * as Dialog from "./dialog/index.ts";
+export * as Drawer from "./drawer/index.ts";
+export * as DropdownMenu from "./dropdown-menu/index.ts";
+export * as HoverCard from "./hover-card/index.ts";
+export { InputOTP } from "./input-otp/index.ts";
+export * as InputGroup from "./input-group/index.ts";
 
-export * as Menubar from './menubar/index.ts';
-export * as Pagination from './pagination/index.ts';
-export * as Popover from './popover/index.ts';
-export { Progress } from './progress/index.ts';
-export * as RadioGroup from './radio-group/index.ts';
-export { RangeCalendar } from './range-calendar/index.ts';
-export * as Resizable from './resizable/index.ts';
-export { ScrollArea } from './scroll-area/index.ts';
-export * as Select from './select/index.ts';
-export { Separator } from './separator/index.ts';
-export * as Sheet from './sheet/index.ts';
-export * as Sidebar from './sidebar/index.ts';
-export { useSidebar } from './sidebar/index.ts';
-export { Skeleton } from './skeleton/index.ts';
-export { Slider } from './slider/index.ts';
-export { Toaster } from './sonner/index.ts';
-export { Switch } from './switch/index.ts';
-export * as Table from './table/index.ts';
-export * as Tabs from './tabs/index.ts';
-export { Textarea } from './textarea/index.ts';
-export { Toggle } from './toggle/index.ts';
-export * as ToggleGroup from './toggle-group/index.ts';
-export * as Tooltip from './tooltip/index.ts';
-export * as Chart from './chart/index.ts';
-export * as Item from './item/index.ts';
-export * as ButtonGroup from './button-group/index.ts';
-export * as Empty from './empty/index.ts';
-export * as Kbd from './kbd/index.ts';
-export * as NativeSelect from './native-select/index.ts';
-export { Spinner } from './spinner/index.ts';
+export * as Menubar from "./menubar/index.ts";
+export * as Pagination from "./pagination/index.ts";
+export * as Popover from "./popover/index.ts";
+export { Progress } from "./progress/index.ts";
+export * as RadioGroup from "./radio-group/index.ts";
+export { RangeCalendar } from "./range-calendar/index.ts";
+export * as Resizable from "./resizable/index.ts";
+export { ScrollArea } from "./scroll-area/index.ts";
+export * as Select from "./select/index.ts";
+export { Separator } from "./separator/index.ts";
+export * as Sheet from "./sheet/index.ts";
+export * as Sidebar from "./sidebar/index.ts";
+export { useSidebar } from "./sidebar/index.ts";
+export { Skeleton } from "./skeleton/index.ts";
+export { Slider } from "./slider/index.ts";
+export { Toaster } from "./sonner/index.ts";
+export { Switch } from "./switch/index.ts";
+export * as Table from "./table/index.ts";
+export * as Tabs from "./tabs/index.ts";
+export { Textarea } from "./textarea/index.ts";
+export { Toggle } from "./toggle/index.ts";
+export * as ToggleGroup from "./toggle-group/index.ts";
+export * as Tooltip from "./tooltip/index.ts";
+export * as Chart from "./chart/index.ts";
+export * as Item from "./item/index.ts";
+export * as Attachment from "./attachment/index.ts";
+export * as ButtonGroup from "./button-group/index.ts";
+export * as Field from "./field/index.ts";
+export * as Empty from "./empty/index.ts";
+export * as Kbd from "./kbd/index.ts";
+export * as NativeSelect from "./native-select/index.ts";
+export { Spinner } from "./spinner/index.ts";
 
 /**
  * @deprecated Moved to @tanglemedia/svelte-started-form-shadcn
  */
-export * as Form from './form/index.ts';
+export * as Form from "./form/index.ts";
 /**
  * @deprecated Moved to @tanglemedia/svelte-started-form-shadcn
  */
-export { Label } from './label/index.ts';
+export { Label } from "./label/index.ts";
 /**
  * @deprecated Moved to @tanglemedia/svelte-started-form-shadcn
  */
-export { Input } from './input/index.ts';
+export { Input } from "./input/index.ts";
 
-export type { SidebarStateProps } from './sidebar/context.svelte.ts';
+export type { SidebarStateProps } from "./sidebar/context.svelte.ts";
 export type {
   SidebarMenuButtonSize,
   SidebarMenuButtonVariant,
-} from './sidebar/sidebar-menu-button.svelte';
+} from "./sidebar/sidebar-menu-button.svelte";
 
+export * as Message from "./message/index.ts";
+export * as Bubble from "./bubble/index.ts";
+export * as MessageScroller from "./message-scroller/index.ts";
+export * as Questionnaire from "./questionnaire/index.ts";

package/src/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 "$lib/components/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/src/lib/components/ui/input-group/index.ts

@@ -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,

package/src/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/src/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 "$lib/components/ui/button/index.js";
 	import { cn } from "$lib/components/utils.js";
 	import type { ComponentProps } from "svelte";
-	import { Button } from "$lib/components/ui/button/index.js";
 
 	let {
 		ref = $bindable(null),

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

@@ -1,7 +1,7 @@
 <script lang="ts">
+	import { Input } from "$lib/components/ui/input/index.js";
 	import { cn } from "$lib/components/utils.js";
 	import type { ComponentProps } from "svelte";
-	import { Input } from "$lib/components/ui/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/src/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/src/lib/components/ui/input-group/input-group-textarea.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn } from "$lib/components/utils.js";
 	import { Textarea } from "$lib/components/ui/textarea/index.js";
+	import { cn } from "$lib/components/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/src/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/src/lib/components/ui/input-otp/index.ts

@@ -1,7 +1,7 @@
-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,

package/src/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 "$lib/components/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/src/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 "$lib/components/utils.js";
-	import DotIcon from "@lucide/svelte/icons/dot";
+	import { cn } from "$lib/components/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/src/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/src/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}