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

package/dist/variants/sheet.mjs

@@ -4,46 +4,13 @@ import { tv } from "../lib/utils.mjs";
 * @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"
 	} }
 });
 //#endregion

package/dist/variants/sidebar.d.mts

@@ -6,13 +6,13 @@ import { VariantProps } from "../lib/utils.mjs";
  */
 declare const sidebarMenuButtonVariants: import("@codefast/tailwind-variants").VariantResolver<{
   size: {
-    sm: string[];
-    md: string[];
-    lg: string[];
+    default: string;
+    sm: string;
+    lg: string;
   };
   variant: {
     default: string;
-    outline: string[];
+    outline: string;
   };
 }, Record<string, never>>;
 /**

package/dist/variants/sidebar.mjs

@@ -4,37 +4,20 @@ import { tv } from "../lib/utils.mjs";
 * @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/dist/variants/tabs.d.mts

@@ -0,0 +1,18 @@
+import { VariantProps } from "../lib/utils.mjs";
+
+//#region src/variants/tabs.d.ts
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const tabsListVariants: import("@codefast/tailwind-variants").VariantResolver<{
+  variant: {
+    default: string;
+    line: string;
+  };
+}, Record<string, never>>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type TabsListVariants = VariantProps<typeof tabsListVariants>;
+//#endregion
+export { type TabsListVariants, tabsListVariants };

package/dist/variants/tabs.mjs

@@ -0,0 +1,15 @@
+import { tv } from "../lib/utils.mjs";
+//#region src/variants/tabs.ts
+/**
+* @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"
+	} }
+});
+//#endregion
+export { tabsListVariants };

package/dist/variants/toggle.d.mts

@@ -6,13 +6,13 @@ import { VariantProps } from "../lib/utils.mjs";
  */
 declare const toggleVariants: import("@codefast/tailwind-variants").VariantResolver<{
   size: {
-    default: string[];
-    lg: string[];
-    sm: string[];
+    default: string;
+    sm: string;
+    lg: string;
   };
   variant: {
     default: string;
-    outline: string[];
+    outline: string;
   };
 }, Record<string, never>>;
 /**

package/dist/variants/toggle.mjs

@@ -4,39 +4,21 @@ import { tv } from "../lib/utils.mjs";
 * @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"
 	}
 });
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefast/ui",
-  "version": "0.3.16-canary.3",
+  "version": "0.4.0-canary.4",
   "description": "Core UI components library built with React and Tailwind CSS",
   "keywords": [
     "components",
@@ -160,6 +160,11 @@
       "types": "./dist/components/dialog.d.mts",
       "import": "./dist/components/dialog.mjs"
     },
+    "./direction": {
+      "source": "./src/components/direction.tsx",
+      "types": "./dist/components/direction.d.mts",
+      "import": "./dist/components/direction.mjs"
+    },
     "./drawer": {
       "source": "./src/components/drawer.tsx",
       "types": "./dist/components/drawer.d.mts",
@@ -460,6 +465,11 @@
       "types": "./dist/variants/input-group.d.mts",
       "import": "./dist/variants/input-group.mjs"
     },
+    "./variants/input-number": {
+      "source": "./src/variants/input-number.ts",
+      "types": "./dist/variants/input-number.d.mts",
+      "import": "./dist/variants/input-number.mjs"
+    },
     "./variants/item": {
       "source": "./src/variants/item.ts",
       "types": "./dist/variants/item.d.mts",
@@ -495,6 +505,11 @@
       "types": "./dist/variants/sidebar.d.mts",
       "import": "./dist/variants/sidebar.mjs"
     },
+    "./variants/tabs": {
+      "source": "./src/variants/tabs.ts",
+      "types": "./dist/variants/tabs.d.mts",
+      "import": "./dist/variants/tabs.mjs"
+    },
     "./variants/toggle": {
       "source": "./src/variants/toggle.ts",
       "types": "./dist/variants/toggle.d.mts",
@@ -507,52 +522,20 @@
     "access": "public"
   },
   "dependencies": {
-    "@radix-ui/primitive": "^1.1.3",
-    "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-aspect-ratio": "^1.1.8",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-compose-refs": "^1.1.2",
-    "@radix-ui/react-context": "^1.1.3",
-    "@radix-ui/react-context-menu": "^2.2.16",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-direction": "^1.1.1",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-hover-card": "^1.1.15",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-menubar": "^1.1.16",
-    "@radix-ui/react-navigation-menu": "^1.2.14",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-progress": "^1.1.8",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-roving-focus": "^1.1.11",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-toggle": "^1.1.10",
-    "@radix-ui/react-toggle-group": "^1.1.11",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@radix-ui/react-use-controllable-state": "^1.2.2",
-    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@daypicker/react": "^10.0.1",
     "cmdk": "^1.1.1",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^1.16.0",
+    "lucide-react": "^1.17.0",
     "next-themes": "^0.4.6",
-    "react-day-picker": "^10.0.1",
-    "react-hook-form": "^7.76.1",
+    "radix-ui": "^1.5.0",
+    "react-hook-form": "^7.78.0",
     "react-resizable-panels": "^4.11.2",
     "recharts": "^3.8.1",
     "sonner": "^2.0.7",
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
-    "@codefast/tailwind-variants": "0.3.16-canary.3"
+    "@codefast/tailwind-variants": "0.4.0-canary.4"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.3.0",
@@ -561,18 +544,18 @@
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^25.9.1",
-    "@typescript/native-preview": "7.0.0-dev.20260526.1",
+    "@types/node": "^25.9.2",
+    "@typescript/native-preview": "7.0.0-dev.20260604.1",
     "@vitejs/plugin-react": "^6.0.2",
-    "@vitest/coverage-v8": "^4.1.7",
+    "@vitest/coverage-v8": "^4.1.8",
     "jest-axe": "^10.0.0",
     "jsdom": "^29.1.1",
     "postcss": "^8.5.15",
     "tailwindcss": "^4.3.0",
-    "tsdown": "^0.22.0",
+    "tsdown": "^0.22.2",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.7",
-    "@codefast/typescript-config": "0.3.16-canary.3"
+    "vitest": "^4.1.8",
+    "@codefast/typescript-config": "0.4.0-canary.4"
   },
   "peerDependencies": {
     "@types/react": ">=19.0.0",

package/src/components/accordion.tsx

@@ -1,11 +1,8 @@
-"use client";
-
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Accordion as AccordionPrimitive } from "radix-ui";
 import type { ComponentProps, JSX } from "react";
 
 import { cn } from "#/lib/utils";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { Slot } from "@radix-ui/react-slot";
-import { ChevronDownIcon } from "lucide-react";
 
 /* -----------------------------------------------------------------------------
  * Component: Accordion
@@ -19,8 +16,8 @@ type AccordionProps = ComponentProps<typeof AccordionPrimitive.Root>;
 /**
  * @since 0.3.16-canary.0
  */
-function Accordion({ ...props }: AccordionProps): JSX.Element {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+function Accordion({ className, ...props }: AccordionProps): JSX.Element {
+  return <AccordionPrimitive.Root className={cn("flex w-full flex-col", className)} data-slot="accordion" {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -37,44 +34,7 @@ type AccordionItemProps = ComponentProps<typeof AccordionPrimitive.Item>;
  */
 function AccordionItem({ className, ...props }: AccordionItemProps): JSX.Element {
   return (
-    <AccordionPrimitive.Item
-      className={cn("border-b", "last:border-b-0", className)}
-      data-slot="accordion-item"
-      {...props}
-    />
-  );
-}
-
-/* -----------------------------------------------------------------------------
- * Component: AccordionIcon
- * -------------------------------------------------------------------------- */
-
-/**
- * @since 0.3.16-canary.0
- */
-interface AccordionIconProps extends ComponentProps<typeof Slot> {
-  asChild?: boolean;
-  className?: string;
-}
-
-/**
- * @since 0.3.16-canary.0
- */
-function AccordionIcon({ asChild, className, ...props }: AccordionIconProps): JSX.Element {
-  const Component = (asChild ? Slot : ChevronDownIcon) as typeof Slot;
-
-  return (
-    <Component
-      aria-hidden
-      className={cn(
-        "size-4 shrink-0 text-muted-foreground",
-        "translate-y-0.5 transition-transform duration-300 ease-spring",
-        "motion-reduce:transition-none motion-reduce:duration-0",
-        className,
-      )}
-      data-slot="accordion-icon"
-      {...props}
-    />
+    <AccordionPrimitive.Item className={cn("not-last:border-b", className)} data-slot="accordion-item" {...props} />
   );
 }
 
@@ -92,22 +52,24 @@ type AccordionTriggerProps = ComponentProps<typeof AccordionPrimitive.Trigger>;
  */
 function AccordionTrigger({ children, className, ...props }: AccordionTriggerProps): JSX.Element {
   return (
-    <AccordionPrimitive.Header className="flex" data-slot="accordion-trigger-wrapper">
+    <AccordionPrimitive.Header className="flex">
       <AccordionPrimitive.Trigger
         className={cn(
-          "group/accordion-trigger flex grow items-start justify-between gap-4 py-4",
-          "rounded-md outline-hidden",
-          "text-left text-sm font-medium",
-          "hover:not-disabled:underline",
-          "focus-visible:ring-3 focus-visible:ring-ring/50",
-          "disabled:opacity-50",
-          "[&[data-state=open]>svg]:rotate-180",
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
           className,
         )}
         data-slot="accordion-trigger"
         {...props}
       >
         {children}
+        <ChevronDownIcon
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+          data-slot="accordion-trigger-icon"
+        />
+        <ChevronUpIcon
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+          data-slot="accordion-trigger-icon"
+        />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
   );
@@ -128,16 +90,18 @@ type AccordionContentProps = ComponentProps<typeof AccordionPrimitive.Content>;
 function AccordionContent({ children, className, ...props }: AccordionContentProps): JSX.Element {
   return (
     <AccordionPrimitive.Content
-      className={cn(
-        "overflow-hidden",
-        "data-open:animate-collapsible-down data-open:ease-snappy",
-        "data-closed:animate-collapsible-up data-closed:ease-snappy",
-        "motion-reduce:animate-none motion-reduce:transition-none",
-      )}
+      className="overflow-hidden text-sm ease-snappy data-open:animate-accordion-down data-open:animation-duration-expand-in data-closed:animate-accordion-up data-closed:ease-exit data-closed:animation-duration-expand-out"
       data-slot="accordion-content"
       {...props}
     >
-      <div className={cn("pt-0 pb-4", "text-sm", className)}>{children}</div>
+      <div
+        className={cn(
+          "h-(--radix-accordion-content-height) pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className,
+        )}
+      >
+        {children}
+      </div>
     </AccordionPrimitive.Content>
   );
 }
@@ -146,11 +110,5 @@ function AccordionContent({ children, className, ...props }: AccordionContentPro
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Accordion, AccordionContent, AccordionIcon, AccordionItem, AccordionTrigger };
-export type {
-  AccordionContentProps,
-  AccordionIconProps,
-  AccordionItemProps,
-  AccordionProps,
-  AccordionTriggerProps,
-};
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+export type { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps };