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

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-l data-vertical:border-l-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 left-0 h-full w-3/4 border-r sm:max-w-sm data-open:slide-in-from-left-10 data-closed:slide-out-to-left-10",
+      right:
+        "inset-y-0 right-0 h-full w-3/4 border-l 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-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] 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-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]:pr-2 has-data-[icon=inline-start]:pl-2",
+      sm: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+      lg: "h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-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",
-  },
 });
 
 /**