@codefast/ui 0.3.12-canary.0 → 0.3.12

package/dist/components/toggle-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAiB,GAAG,EAAE,MAAM,OAAO,CAAC;AAIhE,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAGrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAUzD,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAgBzD,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GACtE,cAAc,GAAG;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEJ,iBAAS,WAAW,CAAC,EACnB,kBAAkB,EAClB,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,OAAW,EACX,OAAO,EACP,GAAG,KAAK,EACT,EAAE,WAAW,CAAC,gBAAgB,CAAC,GAAG,GAAG,CAAC,OAAO,CAsB7C;AAQD,KAAK,oBAAoB,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAC;AAE1F,iBAAS,eAAe,CAAC,EACvB,kBAAkB,EAClB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CA4BpC;AAMD,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC;AACxC,YAAY,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAiB,GAAG,EAAE,MAAM,OAAO,CAAC;AAIhE,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AAGrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAUzD,KAAK,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAgBzD,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GACtE,cAAc,GAAG;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEJ,iBAAS,WAAW,CAAC,EACnB,kBAAkB,EAClB,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,OAAW,EACX,OAAO,EACP,GAAG,KAAK,EACT,EAAE,WAAW,CAAC,gBAAgB,CAAC,GAAG,GAAG,CAAC,OAAO,CAwB7C;AAQD,KAAK,oBAAoB,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAC;AAE1F,iBAAS,eAAe,CAAC,EACvB,kBAAkB,EAClB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CAkCpC;AAMD,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAC;AACxC,YAAY,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/toggle-group.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "@codefast/tailwind-variants";
+import { cn } from "#lib/utils";
 import { createContextScope } from "@radix-ui/react-context";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { createToggleGroupScope } from "@radix-ui/react-toggle-group";
@@ -14,7 +14,7 @@ const useToggleGroupScope = createToggleGroupScope();
 const [ToggleGroupProvider, useToggleGroupContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
 function ToggleGroup({ __scopeToggleGroup, children, className, size, spacing = 0, variant, ...props }) {
     const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);
-    return (_jsx(ToggleGroupProvider, { scope: __scopeToggleGroup, size: size, spacing: spacing, variant: variant, children: _jsx(ToggleGroupPrimitive.Root, { className: cn("group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-lg data-[spacing=default]:data-[variant=outline]:shadow-xs", className), "data-size": size, "data-slot": "toggle-group", "data-spacing": spacing, "data-variant": variant, style: { "--gap": spacing }, ...toggleGroupScope, ...props, children: children }) }));
+    return (_jsx(ToggleGroupProvider, { scope: __scopeToggleGroup, size: size, spacing: spacing, variant: variant, children: _jsx(ToggleGroupPrimitive.Root, { className: cn("group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))]", "rounded-lg", "data-[spacing=default]:data-[variant=outline]:shadow-xs", className), "data-size": size, "data-slot": "toggle-group", "data-spacing": spacing, "data-variant": variant, style: { "--gap": spacing }, ...toggleGroupScope, ...props, children: children }) }));
 }
 /* -----------------------------------------------------------------------------
  * Component: ToggleGroupItem
@@ -23,11 +23,11 @@ const TOGGLE_GROUP_ITEM_NAME = "ToggleGroupItem";
 function ToggleGroupItem({ __scopeToggleGroup, children, className, ...props }) {
     const { size, spacing, variant } = useToggleGroupContext(TOGGLE_GROUP_ITEM_NAME, __scopeToggleGroup);
     const toggleGroupScope = useToggleGroupScope(__scopeToggleGroup);
-    return (_jsx(ToggleGroupPrimitive.Item, { className: cn(toggleVariants({
+    return (_jsx(ToggleGroupPrimitive.Item, { className: cn("w-auto min-w-0 shrink-0 px-3", "focus:z-10", "focus-visible:z-10", "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none", "data-[spacing=0]:first:rounded-l-lg", "data-[spacing=0]:last:rounded-r-lg", "data-[spacing=0]:data-[variant=outline]:border-l-0", "data-[spacing=0]:data-[variant=outline]:first:border-l", toggleVariants({
             className,
             size,
             variant,
-        }), "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10", "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-lg data-[spacing=0]:last:rounded-r-lg data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l"), "data-size": size, "data-slot": "toggle-group-item", "data-spacing": spacing, "data-variant": variant, ...toggleGroupScope, ...props, children: children }));
+        })), "data-size": size, "data-slot": "toggle-group-item", "data-spacing": spacing, "data-variant": variant, ...toggleGroupScope, ...props, children: children }));
 }
 /* -----------------------------------------------------------------------------
  * Exports

package/dist/components/toggle.d.ts

@@ -1,15 +1,15 @@
-import type { VariantProps } from "@codefast/tailwind-variants";
+import type { VariantProps } from "#lib/utils";
 import type { ComponentProps, JSX } from "react";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 declare const toggleVariants: import("@codefast/tailwind-variants").VariantFunctionType<{
     size: {
-        default: string;
-        lg: string;
-        sm: string;
+        default: string[];
+        lg: string[];
+        sm: string[];
     };
     variant: {
         default: string;
-        outline: string;
+        outline: string[];
     };
 }, Record<string, never>>;
 type ToggleVariants = VariantProps<typeof toggleVariants>;

package/dist/components/toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAM1D,QAAA,MAAM,cAAc;;;;;;;;;;yBAkBlB,CAAC;AAEH,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAM1D,UAAU,WAAY,SAAQ,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,cAAc;CAAG;AAE5F,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAU1F;AAMD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAM1D,QAAA,MAAM,cAAc;;QAiBd,OAAO;QACP,EAAE;QACF,EAAE;;;QAGF,OAAO;QACP,OAAO;;yBAWX,CAAC;AAEH,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAM1D,UAAU,WAAY,SAAQ,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,cAAc;CAAG;AAE5F,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAU1F;AAMD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/toggle.js

@@ -1,21 +1,38 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { tv } from "@codefast/tailwind-variants";
+import { tv } from "#lib/utils";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 /* -----------------------------------------------------------------------------
  * Variant: Toggle
  * -------------------------------------------------------------------------- */
 const toggleVariants = tv({
-    base: "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none 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: [
+        "inline-flex items-center justify-center gap-2",
+        "rounded-lg outline-none",
+        "text-sm font-medium whitespace-nowrap",
+        "transition-[color,box-shadow]",
+        "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",
+    ],
     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"],
+            lg: ["h-10 min-w-10", "px-2.5"],
+            sm: ["h-8 min-w-8", "px-1.5"],
         },
         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-accent hover:text-accent-foreground",
+            ],
         },
     },
     defaultVariants: {

package/dist/components/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAM5D,KAAK,oBAAoB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AAE7E,iBAAS,eAAe,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CAExE;AAMD,KAAK,YAAY,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC;AAEjE,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAExD;AAMD,KAAK,mBAAmB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAE3E,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAEtE;AAMD,KAAK,mBAAmB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAE3E,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,UAAc,EACd,GAAG,KAAK,EACT,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAmBnC;AAMD,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAEvE,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAQ7E;AAMD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,CAAC;AAClF,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,GACpB,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAM5D,KAAK,oBAAoB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AAE7E,iBAAS,eAAe,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,GAAG,GAAG,CAAC,OAAO,CAExE;AAMD,KAAK,YAAY,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC;AAEjE,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAExD;AAMD,KAAK,mBAAmB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAE3E,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAEtE;AAMD,KAAK,mBAAmB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAE3E,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,UAAc,EACd,GAAG,KAAK,EACT,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAgCnC;AAMD,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAEvE,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAQ7E;AAMD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,CAAC;AAClF,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,GACpB,CAAC"}

package/dist/components/tooltip.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "@codefast/tailwind-variants";
+import { cn } from "#lib/utils";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 function TooltipProvider({ ...props }) {
     return _jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", ...props });
@@ -12,7 +12,7 @@ function TooltipTrigger({ ...props }) {
     return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({ children, className, sideOffset = 4, ...props }) {
-    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { className: cn("z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md bg-primary px-3 py-1.5 text-xs text-balance text-primary-foreground ease-ui data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=delayed-open]:data-[side=bottom]:slide-in-from-top-2 data-[state=delayed-open]:data-[side=left]:slide-in-from-right-2 data-[state=delayed-open]:data-[side=right]:slide-in-from-left-2 data-[state=delayed-open]:data-[side=top]:slide-in-from-bottom-2", "max-w-(--radix-tooltip-content-available-width)", className), collisionPadding: 8, "data-slot": "tooltip-content", sideOffset: sideOffset, ...props, children: [children, _jsx(TooltipArrow, {})] }) }));
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { className: cn("z-50", "w-fit max-w-(--radix-tooltip-content-available-width) px-3 py-1.5", "rounded-md", "bg-primary text-xs text-balance text-primary-foreground", "ease-ui data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95", "data-[state=delayed-open]:data-side-top:slide-in-from-bottom-2", "data-[state=delayed-open]:data-side-right:slide-in-from-left-2", "data-[state=delayed-open]:data-side-bottom:slide-in-from-top-2", "data-[state=delayed-open]:data-side-left:slide-in-from-right-2", "data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", "data-closed:data-side-top:slide-out-to-bottom-2", "data-closed:data-side-right:slide-out-to-left-2", "data-closed:data-side-bottom:slide-out-to-top-2", "data-closed:data-side-left:slide-out-to-right-2", "origin-(--radix-tooltip-content-transform-origin)", className), collisionPadding: 8, "data-slot": "tooltip-content", sideOffset: sideOffset, ...props, children: [children, _jsx(TooltipArrow, {})] }) }));
 }
 function TooltipArrow({ className, ...props }) {
     return (_jsx(TooltipPrimitive.Arrow, { className: cn("fill-primary", className), "data-slot": "tooltip-arrow", ...props }));

package/dist/hooks/use-copy-to-clipboard.d.ts

@@ -15,7 +15,7 @@
  * <button onClick={() => copyToClipboard("Hello")}>{isCopied ? "Copied" : "Copy"}</button>
  * ```
  */
-export declare function useCopyToClipboard({ onCopy, timeout, }?: {
+export declare function useCopyToClipboard({ onCopy, timeout }?: {
     onCopy?: () => void;
     timeout?: number;
 }): {

package/dist/hooks/use-copy-to-clipboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-copy-to-clipboard.d.ts","sourceRoot":"","sources":["../../src/hooks/use-copy-to-clipboard.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,OAAc,GACf,GAAE;IAAE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAO,GAAG;IAClD,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,QAAQ,EAAE,OAAO,CAAC;CACnB,CAiCA"}
+{"version":3,"file":"use-copy-to-clipboard.d.ts","sourceRoot":"","sources":["../../src/hooks/use-copy-to-clipboard.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,OAAc,EACf,GAAE;IAAE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAO,GAAG;IAClD,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,QAAQ,EAAE,OAAO,CAAC;CACnB,CAiCA"}

package/dist/hooks/use-pagination.d.ts

@@ -33,5 +33,5 @@ export declare const ELLIPSIS = "\u2022\u2022\u2022";
  * });
  * ```
  */
-export declare function usePagination({ currentPage, resultsPerPage, siblingPagesCount, totalResults, }: UsePaginationProps): (number | string)[];
+export declare function usePagination({ currentPage, resultsPerPage, siblingPagesCount, totalResults }: UsePaginationProps): (number | string)[];
 //# sourceMappingURL=use-pagination.d.ts.map

package/dist/hooks/use-pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-pagination.d.ts","sourceRoot":"","sources":["../../src/hooks/use-pagination.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,kBAAkB;IACjC,kCAAkC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,cAAc,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gDAAgD;IAChD,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,oEAAoE;AACpE,eAAO,MAAM,QAAQ,uBAAQ,CAAC;AAe9B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,WAAW,EACX,cAAc,EACd,iBAAqB,EACrB,YAAY,GACb,EAAE,kBAAkB,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAuF1C"}
+{"version":3,"file":"use-pagination.d.ts","sourceRoot":"","sources":["../../src/hooks/use-pagination.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,kBAAkB;IACjC,kCAAkC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,cAAc,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gDAAgD;IAChD,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,oEAAoE;AACpE,eAAO,MAAM,QAAQ,uBAAQ,CAAC;AAe9B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,WAAW,EACX,cAAc,EACd,iBAAqB,EACrB,YAAY,EACb,EAAE,kBAAkB,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAuF1C"}

package/dist/lib/utils.d.ts

@@ -0,0 +1,10 @@
+import type { VariantProps } from "@codefast/tailwind-variants";
+/**
+ * Shared Tailwind Variants factory for `@codefast/ui`.
+ * Use these `cn` / `tv` helpers everywhere in this package so class merging stays consistent
+ * and optional `twMergeConfig` can be applied in one place later.
+ */
+declare const cn: (...classes: import("clsx").ClassValue[]) => string, tv: import("@codefast/tailwind-variants").TailwindVariantsFactory;
+export { cn, tv };
+export type { VariantProps };
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAEhE;;;;GAIG;AACH,QAAA,MAAQ,EAAE,uDAAE,EAAE,+DAEZ,CAAC;AAEH,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAClB,YAAY,EAAE,YAAY,EAAE,CAAC"}

package/dist/lib/utils.js

@@ -0,0 +1,10 @@
+import { createTV } from "@codefast/tailwind-variants";
+/**
+ * Shared Tailwind Variants factory for `@codefast/ui`.
+ * Use these `cn` / `tv` helpers everywhere in this package so class merging stays consistent
+ * and optional `twMergeConfig` can be applied in one place later.
+ */
+const { cn, tv } = createTV({
+    twMerge: true,
+});
+export { cn, tv };

package/dist/primitives/input.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { createContextScope } from "@radix-ui/react-context";
 import { useRef } from "react";

package/dist/primitives/progress-circle.d.ts

@@ -70,7 +70,7 @@ interface ProgressCircleProviderProps {
  * </ProgressCircleProvider>
  * ```
  */
-declare function ProgressCircleProvider({ __scopeProgressCircle, children, formatValue, id: propertyId, max, min, size, startAngle, strokeWidth, thresholds, value, }: ScopedProps<ProgressCircleProviderProps>): ReactNode;
+declare function ProgressCircleProvider({ __scopeProgressCircle, children, formatValue, id: propertyId, max, min, size, startAngle, strokeWidth, thresholds, value }: ScopedProps<ProgressCircleProviderProps>): ReactNode;
 type ProgressCircleProps = ComponentProps<"div">;
 /**
  * Root component for the progress circle

package/dist/primitives/progress-circle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-circle.d.ts","sourceRoot":"","sources":["../../src/primitives/progress-circle.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"progress-circle.d.ts","sourceRoot":"","sources":["../../src/primitives/progress-circle.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefast/ui",
-  "version": "0.3.12-canary.0",
+  "version": "0.3.12",
   "description": "Core UI components library built with React and Tailwind CSS",
   "keywords": [
     "components",
@@ -41,7 +41,12 @@
     "#*": [
       "./dist/*",
       "./dist/*.js",
-      "./dist/*/index.js"
+      "./dist/*/index.js",
+      "./src/*",
+      "./src/*.ts",
+      "./src/*.tsx",
+      "./src/*/index.ts",
+      "./src/*/index.tsx"
     ]
   },
   "exports": {
@@ -337,6 +342,10 @@
       "types": "./dist/primitives/progress-circle.d.ts",
       "import": "./dist/primitives/progress-circle.js"
     },
+    "./lib/utils": {
+      "types": "./dist/lib/utils.d.ts",
+      "import": "./dist/lib/utils.js"
+    },
     "./css/*": "./src/css/*",
     "./package.json": "./package.json"
   },
@@ -381,19 +390,19 @@
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^1.7.0",
+    "lucide-react": "^1.8.0",
     "next-themes": "^0.4.6",
     "react-day-picker": "^9.14.0",
-    "react-hook-form": "^7.72.0",
-    "react-resizable-panels": "^4.7.6",
+    "react-hook-form": "^7.72.1",
+    "react-resizable-panels": "^4.10.0",
     "recharts": "^3.8.1",
     "sonner": "^2.0.7",
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
-    "@codefast/tailwind-variants": "0.3.12-canary.0"
+    "@codefast/tailwind-variants": "0.3.12"
   },
   "devDependencies": {
-    "@swc/core": "^1.15.21",
+    "@swc/core": "^1.15.24",
     "@swc/jest": "^0.2.39",
     "@tailwindcss/postcss": "^4.2.2",
     "@testing-library/dom": "^10.4.1",
@@ -402,15 +411,16 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
     "@types/jest-axe": "^3.5.9",
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.6.0",
+    "@typescript/native-preview": "7.0.0-dev.20260411.1",
     "jest": "^30.3.0",
     "jest-axe": "^10.0.0",
     "jest-environment-jsdom": "^30.3.0",
-    "postcss": "^8.5.8",
+    "postcss": "^8.5.9",
     "tailwindcss": "^4.2.2",
     "ts-node": "^10.9.2",
     "typescript": "^6.0.2",
-    "@codefast/typescript-config": "0.3.12-canary.0"
+    "@codefast/typescript-config": "0.3.12"
   },
   "peerDependencies": {
     "@types/react": "^19.0",
@@ -427,10 +437,10 @@
     }
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json",
-    "check-types": "tsc --noEmit",
+    "build": "rm -rf dist && tsgo -p tsconfig.build.json",
+    "check-types": "tsgo --noEmit",
     "clean": "rm -rf dist",
-    "dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
+    "dev": "tsgo -p tsconfig.build.json --watch --preserveWatchOutput",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "test:coverage:ci": "jest --coverage --ci",

package/src/css/preset.css

@@ -4,6 +4,83 @@
 
 @custom-variant dark (&:where(.dark, .dark *));
 
+@custom-variant data-horizontal (&:where([data-orientation="horizontal"]));
+
+@custom-variant data-vertical (&:where([data-orientation="vertical"]));
+
+@custom-variant data-side-top (&:where([data-side="top"]));
+
+@custom-variant data-side-right (&:where([data-side="right"]));
+
+@custom-variant data-side-bottom (&:where([data-side="bottom"]));
+
+@custom-variant data-side-left (&:where([data-side="left"]));
+
+@custom-variant data-open {
+  &:where([data-state="open"]),
+  &:where([data-open]:not([data-open="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-closed {
+  &:where([data-state="closed"]),
+  &:where([data-closed]:not([data-closed="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-checked {
+  &:where([data-state="checked"]),
+  &:where([data-checked]:not([data-checked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-unchecked {
+  &:where([data-state="unchecked"]),
+  &:where([data-unchecked]:not([data-unchecked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-selected {
+  &:where([data-state="selected"]),
+  &:where([data-selected="true"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-active {
+  &:where([data-state="active"]),
+  &:where([data-active]:not([data-active="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-disabled {
+  &:where([data-disabled="true"]),
+  &:where([data-disabled]:not([data-disabled="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-focused {
+  &:where([data-focused="true"]),
+  &:where([data-focused]:not([data-focused="false"])) {
+    @slot;
+  }
+}
+
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
 :root {
   --radius: 0.375rem;
 }
@@ -52,14 +129,14 @@
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
 
-  --radius-xs: max(0px, calc(var(--radius) - 4px));
-  --radius-sm: max(0px, calc(var(--radius) - 2px));
+  --radius-xs: calc(var(--radius) * 2 / 6);
+  --radius-sm: calc(var(--radius) * 4 / 6);
   --radius-md: var(--radius);
-  --radius-lg: calc(var(--radius) + 2px);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 6px);
-  --radius-3xl: calc(var(--radius) + 8px);
-  --radius-4xl: calc(var(--radius) + 10px);
+  --radius-lg: calc(var(--radius) * 8 / 6);
+  --radius-xl: calc(var(--radius) * 12 / 6);
+  --radius-2xl: calc(var(--radius) * 16 / 6);
+  --radius-3xl: calc(var(--radius) * 24 / 6);
+  --radius-4xl: calc(var(--radius) * 32 / 6);
 }
 
 @theme {
@@ -73,7 +150,7 @@
   ::backdrop,
   ::file-selector-button {
     border-color: var(--color-border);
-    outline-color: color-mix(in oklab, var(--color-ring) 20%, transparent);
+    outline-color: --alpha(var(--color-ring) / 20%);
   }
 
   ::-webkit-scrollbar {