@kayord/ui 3.0.12 → 4.0.0

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

@@ -2,12 +2,16 @@
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: DropdownMenuPrimitive.SeparatorProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SeparatorProps = $props();
 </script>
 
 <DropdownMenuPrimitive.Separator
 	bind:ref
 	data-slot="dropdown-menu-separator"
-	class={cn("bg-border -mx-1 my-1 h-px", className)}
+	class={cn("-mx-1 my-1 h-px bg-border", className)}
 	{...restProps}
 />

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

@@ -13,10 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="dropdown-menu-shortcut"
-	class={cn(
-		"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
-		className
-	)}
+	class={cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -2,15 +2,16 @@
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: DropdownMenuPrimitive.SubContentProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SubContentProps = $props();
 </script>
 
 <DropdownMenuPrimitive.SubContent
 	bind:ref
 	data-slot="dropdown-menu-sub-content"
-	class={cn(
-		"bg-popover text-popover-foreground ring-foreground/10 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 w-auto min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100",
-		className
-	)}
+	class={cn("min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 w-auto", className)}
 	{...restProps}
 />

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 	import { cn } from "../../../utils.js";
 
 	let {
@@ -19,7 +19,7 @@
 	data-slot="dropdown-menu-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}

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

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

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

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="empty-description"
 	class={cn(
-		"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+		"text-sm/relaxed text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
 		className
 	)}
 	{...restProps}

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

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

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

@@ -10,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="empty-title" class={cn("text-sm font-medium tracking-tight", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="empty-title"
+	class={cn("text-sm font-medium tracking-tight", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

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

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="empty"
 	class={cn(
-		"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
+		"gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance",
 		className
 	)}
 	{...restProps}

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

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="field-content"
-	class={cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className)}
+	class={cn("gap-0.5 group/field-content flex flex-1 flex-col leading-snug", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -14,9 +14,9 @@
 	bind:this={ref}
 	data-slot="field-description"
 	class={cn(
-		"text-muted-foreground text-left text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+		"text-left text-sm text-muted-foreground [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
 		"last:mt-0 nth-last-2:-mt-1",
-		"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+		"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
 		className
 	)}
 	{...restProps}

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

@@ -38,7 +38,7 @@
 		bind:this={ref}
 		role="alert"
 		data-slot="field-error"
-		class={cn("text-destructive text-sm font-normal", className)}
+		class={cn("text-sm text-destructive font-normal", className)}
 		{...restProps}
 	>
 		{#if children}

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

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="field-group"
 	class={cn(
-		"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+		"gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col",
 		className
 	)}
 	{...restProps}

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

@@ -3,14 +3,19 @@
 	import { cn } from "../../../utils.js";
 	import type { ComponentProps } from "svelte";
 
-	let { ref = $bindable(null), class: className, children, ...restProps }: ComponentProps<typeof Label> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: ComponentProps<typeof Label> = $props();
 </script>
 
 <Label
 	bind:ref
 	data-slot="field-label"
 	class={cn(
-		"has-data-checked:border-primary/30 has-data-checked:bg-primary/5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5",
+		"gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit leading-snug",
 		"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
 		className
 	)}

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

@@ -20,13 +20,13 @@
 	bind:this={ref}
 	data-slot="field-separator"
 	data-content={hasContent}
-	class={cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className)}
+	class={cn("-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative", className)}
 	{...restProps}
 >
 	<Separator class="absolute inset-0 top-1/2" />
 	{#if children}
 		<span
-			class="text-muted-foreground bg-background relative mx-auto block w-fit px-2"
+			class="px-2 text-muted-foreground relative mx-auto block w-fit bg-background"
 			data-slot="field-separator-content"
 		>
 			{@render children()}

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

@@ -13,10 +13,7 @@
 <fieldset
 	bind:this={ref}
 	data-slot="field-set"
-	class={cn(
-		"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-		className
-	)}
+	class={cn("gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

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

package/dist/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/dist/components/ui/form/form-element-field.svelte

@@ -11,7 +11,8 @@
 		name,
 		children: childrenProp,
 		...restProps
-	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & FormPrimitive.ElementFieldProps<T, U> = $props();
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> &
+		FormPrimitive.ElementFieldProps<T, U> = $props();
 </script>
 
 <FormPrimitive.ElementField {form} {name}>

package/dist/components/ui/form/form-field-errors.svelte

@@ -13,7 +13,11 @@
 	} = $props();
 </script>
 
-<FormPrimitive.FieldErrors bind:ref class={cn("text-destructive text-sm font-medium", className)} {...restProps}>
+<FormPrimitive.FieldErrors
+	bind:ref
+	class={cn("text-sm font-medium text-destructive", className)}
+	{...restProps}
+>
 	{#snippet children({ errors, errorProps })}
 		{#if childrenProp}
 			{@render childrenProp({ errors, errorProps })}

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

@@ -11,7 +11,8 @@
 		name,
 		children: childrenProp,
 		...restProps
-	}: FormPrimitive.FieldProps<T, U> & WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+	}: FormPrimitive.FieldProps<T, U> &
+		WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
 </script>
 
 <FormPrimitive.Field {form} {name}>

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

@@ -13,7 +13,11 @@
 
 <FormPrimitive.Label {...restProps} bind:ref>
 	{#snippet child({ props })}
-		<Label {...props} data-slot="form-label" class={cn("data-[fs-error]:text-destructive", className)}>
+		<Label
+			{...props}
+			data-slot="form-label"
+			class={cn("data-[fs-error]:text-destructive", className)}
+		>
 			{@render children?.()}
 		</Label>
 	{/snippet}

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

@@ -2,11 +2,15 @@
 	import * as FormPrimitive from "formsnap";
 	import { cn, type WithoutChild } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, ...restProps }: WithoutChild<FormPrimitive.LegendProps> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChild<FormPrimitive.LegendProps> = $props();
 </script>
 
 <FormPrimitive.Legend
 	bind:ref
-	class={cn("data-[fs-error]:text-destructive text-sm leading-none font-medium", className)}
+	class={cn("text-sm leading-none font-medium data-[fs-error]:text-destructive", className)}
 	{...restProps}
 />

package/dist/components/ui/hover-card/hover-card-content.svelte

@@ -22,10 +22,7 @@
 		data-slot="hover-card-content"
 		{align}
 		{sideOffset}
-		class={cn(
-			"bg-popover text-popover-foreground ring-foreground/10 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 w-64 origin-(--transform-origin) rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100",
-			className
-		)}
+		class={cn("w-64 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 origin-(--transform-origin) outline-hidden", className)}
 		{...restProps}
 	/>
 </HoverCardPortal>

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

@@ -5,7 +5,8 @@
 	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 {
@@ -24,7 +25,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"border-input focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 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",
+			"h-8 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 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"
@@ -37,7 +38,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"border-input focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 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",
+			"h-8 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 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/components/ui/input-group/input-group-addon.svelte

@@ -6,8 +6,7 @@
 			align: {
 				"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-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",
 			},
 		},

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

@@ -14,10 +14,7 @@
 <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 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled: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/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]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-		className
-	)}
+	class={cn("gap-2 text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -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-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled: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/components/ui/input-group/input-group.svelte

@@ -15,7 +15,7 @@
 	data-slot="input-group"
 	role="group"
 	class={cn(
-		"group/input-group border-input has-disabled:bg-input/50 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]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none 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-[>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",
+		"group/input-group h-8 rounded-lg border border-input transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 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 dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 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/components/ui/input-otp/input-otp-group.svelte

@@ -13,10 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="input-otp-group"
-	class={cn(
-		"has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 flex items-center rounded-lg has-aria-invalid:ring-3",
-		className
-	)}
+	class={cn("rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 flex items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import MinusIcon from "@lucide/svelte/icons/minus";
+	import MinusIcon from '@lucide/svelte/icons/minus';
 	import type { WithElementRef } from "../../../utils.js";
 	import { cn } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
@@ -16,12 +16,12 @@
 	bind:this={ref}
 	data-slot="input-otp-separator"
 	role="separator"
-	class={cn("flex items-center [&_svg:not([class*='size-'])]:size-4", className)}
+	class={cn("[&_svg:not([class*='size-'])]:size-4 flex items-center", className)}
 	{...restProps}
 >
 	{#if children}
 		{@render children?.()}
 	{:else}
-		<MinusIcon />
+		<MinusIcon  />
 	{/if}
 </div>

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

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

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

@@ -16,7 +16,7 @@
 	data-slot="input-otp"
 	spellcheck={false}
 	class={cn(
-		"cn-input-otp-input flex items-center gap-2 disabled:cursor-not-allowed has-disabled:opacity-50",
+		"cn-input-otp-input gap-2 flex items-center disabled:cursor-not-allowed has-disabled:opacity-50",
 		className
 	)}
 	{...restProps}

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

@@ -10,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="item-actions" class={cn("flex items-center gap-2", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="item-actions"
+	class={cn("gap-2 flex items-center", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

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

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

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

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="item-description"
 	class={cn(
-		"text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4",
+		"text-left text-sm leading-normal text-muted-foreground 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/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/components/ui/item/item-group.svelte

@@ -14,10 +14,7 @@
 	bind:this={ref}
 	role="list"
 	data-slot="item-group"
-	class={cn(
-		"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
-		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/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/components/ui/item/item-media.svelte

@@ -7,8 +7,7 @@
 			variant: {
 				default: "bg-transparent",
 				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",
+				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: {

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

@@ -3,7 +3,17 @@
 	import { cn } from "../../../utils.js";
 	import type { ComponentProps } from "svelte";
 
-	let { ref = $bindable(null), class: className, ...restProps }: ComponentProps<typeof Separator> = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
 </script>
 
-<Separator bind:ref data-slot="item-separator" orientation="horizontal" class={cn("my-2", className)} {...restProps} />
+<Separator
+	bind:ref
+	data-slot="item-separator"
+	orientation="horizontal"
+	class={cn("my-2", className)}
+	{...restProps}
+/>

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

@@ -13,10 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="item-title"
-	class={cn(
-		"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
-		className
-	)}
+	class={cn("gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}