@kayord/ui 3.0.11 → 4.0.0

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

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Separator } from "../separator/index.js";
 	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
 	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -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-separator.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type WithElementRef } from "../../../utils.js";
-import type { HTMLAttributes } from "svelte/elements";
 import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     children?: Snippet;
 };

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/field/field.svelte

@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const fieldVariants = tv({
-		base: "data-[invalid=true]:text-destructive gap-2 group/field flex w-full",
+		base: "gap-2 data-[invalid=true]:text-destructive group/field flex w-full",
 		variants: {
 			orientation: {
 				vertical: "cn-field-orientation-vertical flex-col [&>*]:w-full [&>.sr-only]:w-auto",

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

@@ -1,23 +1,23 @@
 import { type VariantProps } from "tailwind-variants";
 export declare const fieldVariants: import("tailwind-variants").TVReturnType<{
     orientation: {
-        vertical: string;
-        horizontal: string;
-        responsive: string;
+        vertical: "cn-field-orientation-vertical flex-col [&>*]:w-full [&>.sr-only]:w-auto";
+        horizontal: "cn-field-orientation-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: "cn-field-orientation-responsive flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:has-[>[data-slot=field-content]]:items-start [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px";
     };
-}, undefined, "data-[invalid=true]:text-destructive gap-2 group/field flex w-full", {
+}, undefined, "gap-2 data-[invalid=true]:text-destructive group/field flex w-full", {
     orientation: {
-        vertical: string;
-        horizontal: string;
-        responsive: string;
+        vertical: "cn-field-orientation-vertical flex-col [&>*]:w-full [&>.sr-only]:w-auto";
+        horizontal: "cn-field-orientation-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: "cn-field-orientation-responsive flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:has-[>[data-slot=field-content]]:items-start [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     orientation: {
-        vertical: string;
-        horizontal: string;
-        responsive: string;
+        vertical: "cn-field-orientation-vertical flex-col [&>*]:w-full [&>.sr-only]:w-auto";
+        horizontal: "cn-field-orientation-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: "cn-field-orientation-responsive flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:has-[>[data-slot=field-content]]:items-start [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px";
     };
-}, undefined, "data-[invalid=true]:text-destructive gap-2 group/field flex w-full", unknown, unknown, undefined>>;
+}, undefined>>;
 export type FieldOrientation = VariantProps<typeof fieldVariants>["orientation"];
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";

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

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

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

@@ -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 "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { FormPathLeaves } from "sveltekit-superforms";
 
 	let {
 		ref = $bindable(null),
@@ -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-element-field.svelte.d.ts

@@ -1,7 +1,7 @@
 import * as FormPrimitive from "formsnap";
-import type { FormPathLeaves } from "sveltekit-superforms";
-import type { HTMLAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+import type { FormPathLeaves } from "sveltekit-superforms";
 declare function $$render<T extends Record<string, unknown>, U extends FormPathLeaves<T>>(): {
     props: Omit<WithElementRef<HTMLAttributes<HTMLDivElement>>, "children"> & FormPrimitive.ElementFieldProps<T, U, any>;
     exports: {};

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

@@ -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 "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
+	import type { FormPath } from "sveltekit-superforms";
 
 	let {
 		ref = $bindable(null),
@@ -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-field.svelte.d.ts

@@ -1,7 +1,7 @@
 import * as FormPrimitive from "formsnap";
-import type { FormPath } from "sveltekit-superforms";
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
+import type { FormPath } from "sveltekit-superforms";
 declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>>(): {
     props: FormPrimitive.FieldProps<T, U, any> & Omit<WithElementRef<HTMLAttributes<HTMLDivElement>>, "children">;
     exports: {};

package/dist/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 "../../../utils.js";
+	import type { FormPath } from "sveltekit-superforms";
 
 	let {
 		ref = $bindable(null),

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

@@ -1,6 +1,6 @@
 import * as FormPrimitive from "formsnap";
-import type { FormPath } from "sveltekit-superforms";
 import { type WithoutChild } from "../../../utils.js";
+import type { FormPath } from "sveltekit-superforms";
 declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>>(): {
     props: WithoutChild<FormPrimitive.FieldsetProps<T, U>>;
     exports: {};

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/form/index.d.ts

@@ -1,11 +1,11 @@
 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";
 declare const Control: import("svelte").Component<FormPrimitive.ControlProps, {}, "">;
 export { Field, Control, Label, Button, FieldErrors, Description, Fieldset, Legend, ElementField, Field as FormField, Control as FormControl, Description as FormDescription, Label as FormLabel, FieldErrors as FormFieldErrors, Fieldset as FormFieldset, Legend as FormLegend, ElementField as FormElementField, Button as FormButton, };

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

@@ -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;
 export { Field, Control, Label, Button, FieldErrors, Description, Fieldset, Legend, ElementField, 
 //

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

@@ -22,10 +22,7 @@
 		data-slot="hover-card-content"
 		{align}
 		{sideOffset}
-		class={cn(
-			"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 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/hover-card/index.d.ts

@@ -1,5 +1,5 @@
-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, Content, Trigger, Portal, Root as HoverCard, Content as HoverCardContent, Trigger as HoverCardTrigger, Portal as HoverCardPortal, };

package/dist/components/ui/hover-card/index.js

@@ -1,5 +1,5 @@
-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, Content, Trigger, Portal, Root as HoverCard, Content as HoverCardContent, Trigger as HoverCardTrigger, Portal as HoverCardPortal, };

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

@@ -1,11 +1,12 @@
 <script lang="ts">
-	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
 
 	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(
-			"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 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(
-			"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 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/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";

package/dist/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/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/components/ui/input-group/input-group-addon.svelte

@@ -1,13 +1,12 @@
 <script lang="ts" module>
 	import { tv, type VariantProps } from "tailwind-variants";
 	export const inputGroupAddonVariants = tv({
-		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",
+		base: "h-auto gap-2 py-1.5 text-sm font-medium text-muted-foreground 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": "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-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 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", {
+}, undefined, "h-auto gap-2 py-1.5 text-sm font-medium text-muted-foreground 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 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", 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/components/ui/input-group/input-group-button.svelte

@@ -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/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: "cn-input-group-button-size-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, "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: "cn-input-group-button-size-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: "cn-input-group-button-size-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, "gap-2 text-sm flex items-center 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/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 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-input.svelte.d.ts

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

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

@@ -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-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}
 />