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

package/src/variants/input-group.ts

@@ -1,5 +1,4 @@
 import type { VariantProps } from "#/lib/utils";
-
 import { tv } from "#/lib/utils";
 
 /* -----------------------------------------------------------------------------
@@ -10,23 +9,7 @@ import { tv } from "#/lib/utils";
  * @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",
-  ],
+  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]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5",
 });
 
 /* -----------------------------------------------------------------------------
@@ -37,41 +20,17 @@ const inputGroupVariants = tv({
  * @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 pe-2 has-[>button]:-me-1 has-[>kbd]:me-[-0.15rem]",
+      "inline-start": "order-first ps-2 has-[>button]:-ms-1 has-[>kbd]:ms-[-0.15rem]",
     },
   },
 });
@@ -84,27 +43,16 @@ const inputGroupAddonVariants = tv({
  * @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",
     },
   },
 });

package/src/variants/input-number.ts

@@ -0,0 +1,65 @@
+import type { VariantProps } from "#/lib/utils";
+import { tv } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: InputNumber
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @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-e-[calc(var(--radius-md)-1px)] border-s border-s-input text-muted-foreground group-focus-within/input-number:border-s-ring group-has-aria-invalid/input-number:border-s-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-s-[calc(var(--radius-md)-1px)] border-e border-e-input text-muted-foreground group-focus-within/input-number:border-e-ring group-has-aria-invalid/input-number:border-e-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-s border-s-input transition-colors group-focus-within/input-number:divide-ring group-focus-within/input-number:border-s-ring group-has-aria-invalid/input-number:divide-destructive group-has-aria-invalid/input-number:border-s-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: {},
+    },
+  },
+});
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputNumberVariants = VariantProps<typeof inputNumberVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { inputNumberVariants };
+export type { InputNumberVariants };

package/src/variants/item.ts

@@ -1,5 +1,4 @@
 import type { VariantProps } from "#/lib/utils";
-
 import { tv } from "#/lib/utils";
 
 /* -----------------------------------------------------------------------------
@@ -10,29 +9,20 @@ import { tv } from "#/lib/utils";
  * @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",
     },
   },
@@ -46,28 +36,16 @@ 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",
     },
   },
 });

package/src/variants/navigation-menu.ts

@@ -1,9 +1,6 @@
 import type { VariantProps } from "#/lib/utils";
-
 import { tv } from "#/lib/utils";
 
-import { buttonVariants } from "#/variants/button";
-
 /* -----------------------------------------------------------------------------
  * Style: NavigationMenuTrigger
  * -------------------------------------------------------------------------- */
@@ -12,11 +9,7 @@ import { buttonVariants } from "#/variants/button";
  * @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",
-  }),
+  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",
 });
 
 /**

package/src/variants/progress-circle.ts

@@ -1,5 +1,4 @@
 import type { VariantProps } from "#/lib/utils";
-
 import { tv } from "#/lib/utils";
 
 /* -----------------------------------------------------------------------------
@@ -13,7 +12,7 @@ const progressCircleVariants = tv({
   defaultVariants: { size: "md", thickness: "regular", variant: "default" },
   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/src/variants/scroll-area.ts

@@ -1,5 +1,4 @@
 import type { VariantProps } from "#/lib/utils";
-
 import { tv } from "#/lib/utils";
 
 /* -----------------------------------------------------------------------------
@@ -10,12 +9,7 @@ import { tv } from "#/lib/utils";
  * @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-s data-vertical:border-s-transparent",
   compoundVariants: [
     {
       className: "w-1.5",
@@ -54,8 +48,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/src/variants/separator.ts

@@ -1,5 +1,4 @@
 import type { VariantProps } from "#/lib/utils";
-
 import { tv } from "#/lib/utils";
 
 /* -----------------------------------------------------------------------------
@@ -10,20 +9,20 @@ import { tv } from "#/lib/utils";
  * @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/src/variants/sheet.ts

@@ -1,5 +1,4 @@
 import type { VariantProps } from "#/lib/utils";
-
 import { tv } from "#/lib/utils";
 
 /* -----------------------------------------------------------------------------
@@ -10,49 +9,17 @@ import { tv } from "#/lib/utils";
  * @since 0.3.16-canary.0
  */
 const sheetContentVariants = tv({
-  base: [
-    "fixed z-50 flex flex-col overflow-auto",
-    "bg-background shadow-lg",
-    "ease-ui data-open:animate-in data-open:animation-duration-500",
-    "data-closed:animate-out data-closed:animation-duration-500",
-    "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0",
-  ],
+  base: "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition ease-ui data-open:animate-in data-open:animation-duration-panel-in data-open:fade-in-0 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-panel-out data-closed:fade-out-0",
   defaultVariants: {
     side: "right",
   },
   variants: {
     side: {
-      bottom: [
-        "max-h-[80dvh]",
-        "inset-x-0 bottom-0",
-        "rounded-t-2xl border-t",
-        "pb-[env(safe-area-inset-bottom)]",
-        "data-open:slide-in-from-bottom",
-        "data-closed:slide-out-to-bottom",
-      ],
-      left: [
-        "h-full w-3/4",
-        "inset-y-0 left-0",
-        "border-r",
-        "sm:max-w-sm",
-        "data-open:slide-in-from-left",
-        "data-closed:slide-out-to-left",
-      ],
-      right: [
-        "h-full w-3/4",
-        "inset-y-0 right-0",
-        "border-l",
-        "sm:max-w-sm",
-        "data-open:slide-in-from-right",
-        "data-closed:slide-out-to-right",
-      ],
-      top: [
-        "max-h-[80vh]",
-        "inset-x-0 top-0",
-        "border-b",
-        "data-open:slide-in-from-top",
-        "data-closed:slide-out-to-top",
-      ],
+      bottom: "inset-x-0 bottom-0 h-auto border-t data-open:slide-in-from-bottom-10 data-closed:slide-out-to-bottom-10",
+      left: "inset-y-0 start-0 h-full w-3/4 border-e sm:max-w-sm data-open:slide-in-from-left-10 data-closed:slide-out-to-left-10",
+      right:
+        "inset-y-0 end-0 h-full w-3/4 border-s sm:max-w-sm data-open:slide-in-from-right-10 data-closed:slide-out-to-right-10",
+      top: "inset-x-0 top-0 h-auto border-b data-open:slide-in-from-top-10 data-closed:slide-out-to-top-10",
     },
   },
 });

package/src/variants/sidebar.ts

@@ -1,5 +1,4 @@
 import type { VariantProps } from "#/lib/utils";
-
 import { tv } from "#/lib/utils";
 
 /* -----------------------------------------------------------------------------
@@ -10,40 +9,21 @@ import { tv } from "#/lib/utils";
  * @since 0.3.16-canary.0
  */
 const sidebarMenuButtonVariants = tv({
-  base: [
-    "peer/menu-button flex w-full items-center gap-2 overflow-hidden p-2",
-    "rounded-md ring-sidebar-ring outline-hidden",
-    "text-left text-sm",
-    "transition-[width,height,padding]",
-    "motion-reduce:transition-none motion-reduce:duration-0",
-    "group-has-data-[sidebar=menu-action]/menu-item:pr-8",
-    "group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2!",
-    "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-    "focus-visible:ring-3",
-    "active:bg-sidebar-accent active:text-sidebar-accent-foreground",
-    "disabled:pointer-events-none disabled:opacity-50",
-    "aria-disabled:pointer-events-none aria-disabled:opacity-50",
-    "data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground",
-    "data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground",
-    "[&>span:last-child]:truncate",
-    "[&>svg]:size-4 [&>svg]:shrink-0",
-  ],
+  base: "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
   defaultVariants: {
-    size: "md",
+    size: "default",
     variant: "default",
   },
   variants: {
     size: {
-      sm: ["h-7", "text-xs"],
-      md: ["h-8", "text-sm"],
-      lg: ["h-12 text-sm", "group-data-[collapsible=icon]:p-0!"],
+      default: "h-8 text-sm",
+      sm: "h-7 text-xs",
+      lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
     },
     variant: {
       default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-      outline: [
-        "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))]",
-        "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
-      ],
+      outline:
+        "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
     },
   },
 });

package/src/variants/tabs.ts

@@ -0,0 +1,34 @@
+import type { VariantProps } from "#/lib/utils";
+import { tv } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: TabsList
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+const tabsListVariants = tv({
+  base: "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-0.75 text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  defaultVariants: {
+    variant: "default",
+  },
+  variants: {
+    variant: {
+      default: "bg-muted",
+      line: "gap-1 bg-transparent",
+    },
+  },
+});
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type TabsListVariants = VariantProps<typeof tabsListVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { tabsListVariants };
+export type { TabsListVariants };

package/src/variants/toggle.ts

@@ -1,5 +1,4 @@
 import type { VariantProps } from "#/lib/utils";
-
 import { tv } from "#/lib/utils";
 
 /* -----------------------------------------------------------------------------
@@ -10,40 +9,22 @@ import { tv } from "#/lib/utils";
  * @since 0.3.16-canary.0
  */
 const toggleVariants = tv({
-  base: [
-    "inline-flex items-center justify-center gap-2",
-    "rounded-lg outline-none",
-    "text-sm font-medium whitespace-nowrap",
-    "transition-[color,background-color,box-shadow] duration-150 ease-snappy",
-    "motion-reduce:transition-none motion-reduce:duration-0",
-    "active:not-disabled:translate-y-px",
-    "hover:bg-muted hover:text-muted-foreground",
-    "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-    "disabled:pointer-events-none disabled:opacity-50",
-    "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
-    "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
-    "dark:aria-invalid:ring-destructive/40",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  ],
+  base: "group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  defaultVariants: {
+    size: "default",
+    variant: "default",
+  },
   variants: {
     size: {
-      default: ["h-9 min-w-9", "px-2"],
-      lg: ["h-10 min-w-10", "px-2.5"],
-      sm: ["h-8 min-w-8", "px-1.5"],
+      default: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
+      sm: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5",
+      lg: "h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
     },
     variant: {
       default: "bg-transparent",
-      outline: [
-        "border border-input",
-        "bg-transparent shadow-xs",
-        "hover:bg-accent hover:text-accent-foreground",
-      ],
+      outline: "border border-input bg-transparent shadow-xs hover:bg-muted",
     },
   },
-  defaultVariants: {
-    size: "default",
-    variant: "default",
-  },
 });
 
 /**