@codefast/ui 0.3.16-canary.3 → 0.4.0-canary.4

package/dist/variants/button.mjs

@@ -4,71 +4,29 @@ import { tv } from "../lib/utils.mjs";
 * @since 0.3.16-canary.0
 */
 const buttonVariants = tv({
-	base: [
-		"inline-flex shrink-0 items-center justify-center gap-2",
-		"rounded-lg outline-hidden",
-		"text-sm font-medium whitespace-nowrap",
-		"transition duration-150 ease-snappy select-none",
-		"motion-reduce:transition-none motion-reduce:duration-0",
-		"active:not-disabled:translate-y-px",
-		"focus-visible:ring-3",
-		"disabled:opacity-50",
-		"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-	],
+	base: "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 	defaultVariants: {
-		size: "md",
+		size: "default",
 		variant: "default"
 	},
 	variants: {
 		size: {
-			"icon-sm": "size-8",
+			default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+			lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
 			icon: "size-9",
-			"icon-lg": "size-10",
-			sm: ["h-8 px-3", "has-[>svg]:px-2.5"],
-			md: ["h-9 px-4", "has-[>svg]:px-3"],
-			lg: ["h-10 px-6", "has-[>svg]:px-4"]
+			"icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+			"icon-lg": "size-10"
 		},
 		variant: {
-			default: [
-				"bg-primary text-primary-foreground",
-				"hover:not-disabled:bg-primary/80",
-				"focus-visible:ring-primary/20",
-				"dark:focus-visible:ring-primary/40"
-			],
-			destructive: [
-				"bg-destructive text-white",
-				"hover:not-disabled:bg-destructive/90",
-				"focus-visible:ring-destructive/20",
-				"dark:bg-destructive/60",
-				"dark:focus-visible:ring-destructive/40"
-			],
-			ghost: [
-				"hover:not-disabled:bg-secondary hover:not-disabled:text-secondary-foreground",
-				"focus-visible:ring-ring/50",
-				"dark:hover:not-disabled:bg-secondary/50"
-			],
-			link: [
-				"text-primary underline-offset-4",
-				"hover:not-disabled:underline",
-				"focus-visible:ring-ring/50"
-			],
-			outline: [
-				"border border-input shadow-xs",
-				"hover:not-disabled:border-ring/60 hover:not-disabled:bg-secondary hover:not-disabled:text-secondary-foreground",
-				"focus-visible:border-ring focus-visible:ring-ring/50",
-				"aria-invalid:border-destructive",
-				"focus-within:aria-invalid:ring-destructive/20",
-				"hover:not-disabled:aria-invalid:border-destructive/60",
-				"dark:bg-input/30",
-				"dark:hover:not-disabled:bg-input/50",
-				"dark:aria-invalid:border-destructive/70",
-				"dark:focus-within:aria-invalid:ring-destructive/40"
-			],
-			secondary: [
-				"bg-secondary text-secondary-foreground",
-				"hover:not-disabled:bg-secondary/80",
-				"focus-visible:ring-ring/50"
-			]
+			default: "bg-primary text-primary-foreground hover:bg-primary/80",
+			destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+			link: "text-primary underline-offset-4 hover:underline",
+			outline: "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground"
 		}
 	}
 });

package/dist/variants/empty.d.mts

@@ -7,7 +7,7 @@ import { VariantProps } from "../lib/utils.mjs";
 declare const emptyMediaVariants: import("@codefast/tailwind-variants").VariantResolver<{
   variant: {
     default: string;
-    icon: string[];
+    icon: string;
   };
 }, Record<string, never>>;
 /**

package/dist/variants/empty.mjs

@@ -4,16 +4,11 @@ import { tv } from "../lib/utils.mjs";
 * @since 0.3.16-canary.0
 */
 const emptyMediaVariants = tv({
-	base: ["mb-2 flex shrink-0 items-center justify-center", "[&_svg]:pointer-events-none [&_svg]:shrink-0"],
+	base: "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
 	defaultVariants: { variant: "default" },
 	variants: { variant: {
 		default: "bg-transparent",
-		icon: [
-			"flex size-10 shrink-0 items-center justify-center",
-			"rounded-xl",
-			"bg-muted text-foreground",
-			"[&_svg:not([class*='size-'])]:size-6"
-		]
+		icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6"
 	} }
 });
 //#endregion

package/dist/variants/field.d.mts

@@ -6,9 +6,9 @@ import { VariantProps } from "../lib/utils.mjs";
  */
 declare const fieldVariants: import("@codefast/tailwind-variants").VariantResolver<{
   orientation: {
-    horizontal: string[];
-    responsive: string[];
-    vertical: string[];
+    horizontal: string;
+    responsive: string;
+    vertical: string;
   };
 }, Record<string, never>>;
 /**

package/dist/variants/field.mjs

@@ -4,30 +4,12 @@ import { tv } from "../lib/utils.mjs";
 * @since 0.3.16-canary.0
 */
 const fieldVariants = tv({
-	base: ["group/field flex w-full gap-3", "data-[invalid=true]:text-destructive"],
+	base: "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
 	defaultVariants: { orientation: "vertical" },
 	variants: { 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: [
-			"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"
-		],
-		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",
+		vertical: "flex-col *:w-full [&>.sr-only]:w-auto"
 	} }
 });
 //#endregion

package/dist/variants/input-group.d.mts

@@ -4,16 +4,16 @@ import { VariantProps } from "../lib/utils.mjs";
 /**
  * @since 0.3.16-canary.0
  */
-declare const inputGroupVariants: import("@codefast/tailwind-variants").VariantResolver<import("@codefast/tailwind-variants").VariantSchema, Record<string, never>>;
+declare const inputGroupVariants: import("@codefast/tailwind-variants").VariantResolver<Record<never, never>, Record<string, never>>;
 /**
  * @since 0.3.16-canary.0
  */
 declare const inputGroupAddonVariants: import("@codefast/tailwind-variants").VariantResolver<{
   align: {
-    "block-end": string[];
-    "block-start": string[];
-    "inline-end": string[];
-    "inline-start": string[];
+    "block-end": string;
+    "block-start": string;
+    "inline-end": string;
+    "inline-start": string;
   };
 }, Record<string, never>>;
 /**
@@ -21,10 +21,10 @@ declare const inputGroupAddonVariants: import("@codefast/tailwind-variants").Var
  */
 declare const inputGroupButtonVariants: import("@codefast/tailwind-variants").VariantResolver<{
   size: {
-    "icon-xs": string[];
-    "icon-sm": string[];
-    xs: string[];
-    sm: string[];
+    "icon-xs": string;
+    "icon-sm": string;
+    sm: string;
+    xs: string;
   };
 }, Record<string, never>>;
 /**

package/dist/variants/input-group.mjs

@@ -3,90 +3,31 @@ import { tv } from "../lib/utils.mjs";
 /**
 * @since 0.3.16-canary.0
 */
-const inputGroupVariants = tv({ base: [
-	"group/input-group relative flex h-9 w-full min-w-0 items-center",
-	"rounded-lg border border-input shadow-xs outline-none",
-	"transition-[color,box-shadow]",
-	"motion-reduce:transition-none",
-	"dark:bg-input/30",
-	"has-[>textarea]:h-auto",
-	"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col",
-	"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col",
-	"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-destructive/20",
-	"dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
-	"has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:pt-3",
-	"has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:pb-3",
-	"has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-2",
-	"has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-2"
-] });
+const inputGroupVariants = tv({ base: "group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 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 has-[>textarea]:h-auto dark:bg-input/30 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" });
 /**
 * @since 0.3.16-canary.0
 */
 const inputGroupAddonVariants = tv({
-	base: [
-		"flex h-auto items-center justify-center gap-2 py-1.5",
-		"text-sm font-medium text-muted-foreground",
-		"cursor-text select-none",
-		"group-data-disabled/input-group:opacity-50",
-		"[&>kbd]:rounded-[calc(var(--radius)-5px)]",
-		"[&>svg:not([class*='size-'])]:size-4"
-	],
+	base: "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-disabled/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-3px)] [&>svg:not([class*='size-'])]:size-4",
 	defaultVariants: { align: "inline-start" },
 	variants: { align: {
-		"block-end": [
-			"order-last w-full justify-start px-3 pb-3",
-			"group-has-[>input]/input-group:pb-2.5",
-			"[.border-t]:pt-3"
-		],
-		"block-start": [
-			"order-first w-full justify-start px-3 pt-3",
-			"group-has-[>input]/input-group:pt-2.5",
-			"[.border-b]:pb-3"
-		],
-		"inline-end": [
-			"order-last",
-			"pr-3",
-			"has-[>button]:mr-[-0.45rem]",
-			"has-[>kbd]:mr-[-0.35rem]"
-		],
-		"inline-start": [
-			"order-first",
-			"pl-3",
-			"has-[>button]:ml-[-0.45rem]",
-			"has-[>kbd]:ml-[-0.35rem]"
-		]
+		"block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+		"block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+		"inline-end": "order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
+		"inline-start": "order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]"
 	} }
 });
 /**
 * @since 0.3.16-canary.0
 */
 const inputGroupButtonVariants = tv({
-	base: [
-		"flex items-center gap-2",
-		"shadow-none",
-		"text-sm",
-		"[&>svg:not([class*='size-'])]:size-4"
-	],
+	base: "flex items-center gap-2 text-sm shadow-none",
 	defaultVariants: { size: "xs" },
 	variants: { size: {
-		"icon-xs": [
-			"size-6 p-0",
-			"rounded-[calc(var(--radius)-5px)]",
-			"has-[>svg]:p-0"
-		],
-		"icon-sm": ["size-8 p-0", "has-[>svg]:p-0"],
-		xs: [
-			"h-6 gap-1 px-2",
-			"rounded-[calc(var(--radius)-5px)]",
-			"has-[>svg]:px-2",
-			"[&>svg]:size-3.5"
-		],
-		sm: [
-			"h-8 gap-1.5 px-2.5",
-			"rounded-md",
-			"has-[>svg]:px-2.5"
-		]
+		"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",
+		sm: "",
+		xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5"
 	} }
 });
 //#endregion

package/dist/variants/input-number.d.mts

@@ -0,0 +1,45 @@
+import { VariantProps } from "../lib/utils.mjs";
+
+//#region src/variants/input-number.d.ts
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const inputNumberVariants: import("@codefast/tailwind-variants").VariantResolver<{
+  variant: {
+    split: {
+      field: string;
+    };
+    stepper: {};
+  };
+}, {
+  /**
+   * Split layout: trailing increment button (always on the inline end).
+   */
+  incrementButton: string;
+  /**
+   * Split layout: leading decrement button (always on the inline start).
+   */
+  decrementButton: string;
+  /**
+   * Editable numeric input.
+   */
+  field: string;
+  /**
+   * Outer container.
+   */
+  root: string;
+  /**
+   * Stepper layout: stacked chevron column on the trailing edge.
+   */
+  stepper: string;
+  /**
+   * Stepper layout: individual chevron button (shared by increment/decrement).
+   */
+  stepperButton: string;
+}>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputNumberVariants = VariantProps<typeof inputNumberVariants>;
+//#endregion
+export { type InputNumberVariants, inputNumberVariants };

package/dist/variants/input-number.mjs

@@ -0,0 +1,40 @@
+import { tv } from "../lib/utils.mjs";
+//#region src/variants/input-number.ts
+/**
+* @since 0.3.16-canary.0
+*/
+const inputNumberVariants = tv({
+	defaultVariants: { variant: "stepper" },
+	slots: {
+		/**
+		* Split layout: trailing increment button (always on the inline end).
+		*/
+		incrementButton: "order-last h-full w-9 shrink-0 rounded-none rounded-r-[calc(var(--radius-md)-1px)] border-l border-l-input text-muted-foreground group-focus-within/input-number:border-l-ring group-has-aria-invalid/input-number:border-l-destructive focus-visible:bg-ring/50 focus-visible:ring-0 group-has-aria-invalid/input-number:focus-visible:bg-destructive/20 dark:group-has-aria-invalid/input-number:focus-visible:bg-destructive/40",
+		/**
+		* Split layout: leading decrement button (always on the inline start).
+		*/
+		decrementButton: "order-first h-full w-9 shrink-0 rounded-none rounded-l-[calc(var(--radius-md)-1px)] border-r border-r-input text-muted-foreground group-focus-within/input-number:border-r-ring group-has-aria-invalid/input-number:border-r-destructive focus-visible:bg-ring/50 focus-visible:ring-0 group-has-aria-invalid/input-number:focus-visible:bg-destructive/20 dark:group-has-aria-invalid/input-number:focus-visible:bg-destructive/40",
+		/**
+		* Editable numeric input.
+		*/
+		field: "h-full min-w-0 flex-1 bg-transparent px-2.5 py-1 outline-hidden selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed",
+		/**
+		* Outer container.
+		*/
+		root: "group/input-number relative flex h-9 w-full min-w-0 items-center overflow-hidden rounded-md border border-input bg-transparent text-base transition-[color,box-shadow] not-has-disabled:shadow-xs focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-disabled:opacity-50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 motion-reduce:transition-none md:text-sm dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		/**
+		* Stepper layout: stacked chevron column on the trailing edge.
+		*/
+		stepper: "order-last grid h-full w-8 shrink-0 divide-y divide-input border-l border-l-input transition-colors group-focus-within/input-number:divide-ring group-focus-within/input-number:border-l-ring group-has-aria-invalid/input-number:divide-destructive group-has-aria-invalid/input-number:border-l-destructive motion-reduce:transition-none *:[button]:focus-visible:bg-ring/50 *:[button]:focus-visible:ring-0 group-has-aria-invalid/input-number:*:[button]:focus-visible:bg-destructive/20 dark:group-has-aria-invalid/input-number:*:[button]:focus-visible:bg-destructive/40",
+		/**
+		* Stepper layout: individual chevron button (shared by increment/decrement).
+		*/
+		stepperButton: "h-auto min-w-0 rounded-none px-0 text-muted-foreground"
+	},
+	variants: { variant: {
+		split: { field: "text-center tabular-nums" },
+		stepper: {}
+	} }
+});
+//#endregion
+export { inputNumberVariants };

package/dist/variants/item.d.mts

@@ -6,8 +6,9 @@ import { VariantProps } from "../lib/utils.mjs";
  */
 declare const itemVariants: import("@codefast/tailwind-variants").VariantResolver<{
   size: {
-    default: string[];
-    sm: string[];
+    default: string;
+    sm: string;
+    xs: string;
   };
   variant: {
     default: string;
@@ -21,8 +22,8 @@ declare const itemVariants: import("@codefast/tailwind-variants").VariantResolve
 declare const itemMediaVariants: import("@codefast/tailwind-variants").VariantResolver<{
   variant: {
     default: string;
-    icon: string[];
-    image: string[];
+    icon: string;
+    image: string;
   };
 }, Record<string, never>>;
 /**

package/dist/variants/item.mjs

@@ -4,29 +4,20 @@ import { tv } from "../lib/utils.mjs";
 * @since 0.3.16-canary.0
 */
 const itemVariants = tv({
-	base: [
-		"group/item flex flex-wrap items-center",
-		"rounded-lg border border-transparent outline-hidden",
-		"text-sm",
-		"transition-colors duration-100",
-		"motion-reduce:transition-none motion-reduce:duration-0",
-		"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-		"[a]:transition-colors",
-		"[a]:motion-reduce:transition-none",
-		"[a]:hover:bg-accent/50"
-	],
+	base: "group/item flex w-full flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
 	defaultVariants: {
 		size: "default",
 		variant: "default"
 	},
 	variants: {
 		size: {
-			default: ["gap-4", "p-4"],
-			sm: ["gap-2.5", "px-4 py-3"]
+			default: "gap-3.5 px-4 py-3.5",
+			sm: "gap-2.5 px-3 py-2.5",
+			xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
 		},
 		variant: {
-			default: "bg-transparent",
-			muted: "bg-muted/50",
+			default: "border-transparent",
+			muted: "border-transparent bg-muted/50",
 			outline: "border-border"
 		}
 	}
@@ -35,25 +26,12 @@ const itemVariants = tv({
 * @since 0.3.16-canary.0
 */
 const itemMediaVariants = tv({
-	base: [
-		"flex shrink-0 items-center justify-center gap-2",
-		"group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start",
-		"[&_svg]:pointer-events-none"
-	],
+	base: "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
 	defaultVariants: { variant: "default" },
 	variants: { variant: {
 		default: "bg-transparent",
-		icon: [
-			"size-8 shrink-0",
-			"rounded-md border",
-			"bg-muted",
-			"[&_svg:not([class*='size-'])]:size-4"
-		],
-		image: [
-			"size-10 shrink-0 overflow-hidden",
-			"rounded-md",
-			"[&_img]:size-full [&_img]:object-cover"
-		]
+		icon: "[&_svg:not([class*='size-'])]:size-4",
+		image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
 	} }
 });
 //#endregion

package/dist/variants/navigation-menu.d.mts

@@ -4,7 +4,7 @@ import { VariantProps } from "../lib/utils.mjs";
 /**
  * @since 0.3.16-canary.0
  */
-declare const navigationMenuTriggerVariants: import("@codefast/tailwind-variants").VariantResolver<import("@codefast/tailwind-variants").VariantSchema, Record<string, never>>;
+declare const navigationMenuTriggerVariants: import("@codefast/tailwind-variants").VariantResolver<Record<never, never>, Record<string, never>>;
 /**
  * @since 0.3.16-canary.0
  */

package/dist/variants/navigation-menu.mjs

@@ -1,12 +1,8 @@
 import { tv } from "../lib/utils.mjs";
-import { buttonVariants } from "./button.mjs";
 //#region src/variants/navigation-menu.ts
 /**
 * @since 0.3.16-canary.0
 */
-const navigationMenuTriggerVariants = tv({ base: buttonVariants({
-	className: "data-open:bg-secondary/50 data-open:text-secondary-foreground group/navigation-menu-trigger focus-visible:bg-secondary dark:hover:not-disabled:bg-secondary",
-	variant: "ghost"
-}) });
+const navigationMenuTriggerVariants = tv({ base: "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted" });
 //#endregion
 export { navigationMenuTriggerVariants };

package/dist/variants/progress-circle.d.mts

@@ -39,7 +39,7 @@ declare const progressCircleVariants: import("@codefast/tailwind-variants").Vari
   };
 }, {
   indicator: string;
-  label: string[];
+  label: string;
   root: string;
   svg: string;
   track: string;

package/dist/variants/progress-circle.mjs

@@ -11,11 +11,7 @@ const progressCircleVariants = tv({
 	},
 	slots: {
 		indicator: "origin-center",
-		label: [
-			"absolute flex items-center justify-center",
-			"inset-0",
-			"text-xs font-medium"
-		],
+		label: "absolute inset-0 flex items-center justify-center text-xs font-medium",
 		root: "relative inline-flex items-center justify-center",
 		svg: "size-full",
 		track: "origin-center"

package/dist/variants/scroll-area.d.mts

@@ -6,8 +6,8 @@ import { VariantProps } from "../lib/utils.mjs";
  */
 declare const scrollAreaScrollbarVariants: import("@codefast/tailwind-variants").VariantResolver<{
   orientation: {
-    horizontal: string[];
-    vertical: string[];
+    horizontal: string;
+    vertical: string;
   };
   size: {
     none: string;

package/dist/variants/scroll-area.mjs

@@ -4,12 +4,7 @@ import { tv } from "../lib/utils.mjs";
 * @since 0.3.16-canary.0
 */
 const scrollAreaScrollbarVariants = tv({
-	base: [
-		"flex",
-		"p-px",
-		"touch-none transition-colors select-none",
-		"motion-reduce:transition-none motion-reduce:duration-0"
-	],
+	base: "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
 	compoundVariants: [
 		{
 			className: "w-1.5",
@@ -48,8 +43,8 @@ const scrollAreaScrollbarVariants = tv({
 	},
 	variants: {
 		orientation: {
-			horizontal: ["w-full flex-col", "border-t border-t-transparent"],
-			vertical: ["h-full flex-row", "border-l border-l-transparent"]
+			horizontal: "",
+			vertical: ""
 		},
 		size: {
 			none: "",

package/dist/variants/separator.mjs

@@ -4,20 +4,20 @@ import { tv } from "../lib/utils.mjs";
 * @since 0.3.16-canary.0
 */
 const separatorVariants = tv({
-	base: ["relative flex shrink-0 items-center", "bg-border"],
+	base: "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
 	defaultVariants: {
 		align: "center",
 		orientation: "horizontal"
 	},
 	variants: {
 		align: {
-			center: "justify-center",
-			end: "justify-end",
-			start: "justify-start"
+			center: "relative flex items-center justify-center",
+			end: "relative flex items-center justify-end",
+			start: "relative flex items-center justify-start"
 		},
 		orientation: {
-			horizontal: "h-px w-full",
-			vertical: "h-full w-px flex-col"
+			horizontal: "",
+			vertical: ""
 		}
 	}
 });

package/dist/variants/sheet.d.mts

@@ -6,10 +6,10 @@ import { VariantProps } from "../lib/utils.mjs";
  */
 declare const sheetContentVariants: import("@codefast/tailwind-variants").VariantResolver<{
   side: {
-    bottom: string[];
-    left: string[];
-    right: string[];
-    top: string[];
+    bottom: string;
+    left: string;
+    right: string;
+    top: string;
   };
 }, Record<string, never>>;
 /**