@codefast/ui 0.3.10 → 0.3.11-canary.0

package/dist/components/switch.cjs

@@ -32,11 +32,11 @@ const tailwind_variants_namespaceObject = require("@codefast/tailwind-variants")
 const react_switch_namespaceObject = require("@radix-ui/react-switch");
 function Switch({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_switch_namespaceObject.Root, {
-        className: (0, tailwind_variants_namespaceObject.cn)('data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 data-[state=checked]:bg-primary data-[state=checked]:focus-visible:ring-primary/20 dark:data-[state=checked]:focus-visible:ring-primary/40 focus-visible:not-data-[state=checked]:border-ring/60 focus-visible:ring-ring/50 peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent p-0.75 shadow-xs outline-hidden transition-all focus-visible:ring-3 disabled:opacity-50', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent p-0.75 shadow-xs outline-hidden transition-all focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:not-data-[state=checked]:border-ring/60 disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:focus-visible:ring-primary/20 data-[state=unchecked]:bg-input dark:data-[state=checked]:focus-visible:ring-primary/40 dark:data-[state=unchecked]:bg-input/80", className),
         "data-slot": "switch",
         ...props,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_switch_namespaceObject.Thumb, {
-            className: "bg-background dark:not-data-[state=checked]:bg-foreground pointer-events-none block size-3.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0",
+            className: "pointer-events-none block size-3.5 rounded-full bg-background shadow-sm transition-transform data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0 dark:not-data-[state=checked]:bg-foreground",
             "data-slot": "switch-thumb"
         })
     });

package/dist/components/switch.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps, JSX } from 'react';
-import * as SwitchPrimitives from '@radix-ui/react-switch';
+import type { ComponentProps, JSX } from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
 type SwitchProps = ComponentProps<typeof SwitchPrimitives.Root>;
 declare function Switch({ className, ...props }: SwitchProps): JSX.Element;
 export { Switch };

package/dist/components/switch.js

@@ -4,11 +4,11 @@ import { cn } from "@codefast/tailwind-variants";
 import { Root, Thumb } from "@radix-ui/react-switch";
 function Switch({ className, ...props }) {
     return /*#__PURE__*/ jsx(Root, {
-        className: cn('data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 data-[state=checked]:bg-primary data-[state=checked]:focus-visible:ring-primary/20 dark:data-[state=checked]:focus-visible:ring-primary/40 focus-visible:not-data-[state=checked]:border-ring/60 focus-visible:ring-ring/50 peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent p-0.75 shadow-xs outline-hidden transition-all focus-visible:ring-3 disabled:opacity-50', className),
+        className: cn("peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent p-0.75 shadow-xs outline-hidden transition-all focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:not-data-[state=checked]:border-ring/60 disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:focus-visible:ring-primary/20 data-[state=unchecked]:bg-input dark:data-[state=checked]:focus-visible:ring-primary/40 dark:data-[state=unchecked]:bg-input/80", className),
         "data-slot": "switch",
         ...props,
         children: /*#__PURE__*/ jsx(Thumb, {
-            className: "bg-background dark:not-data-[state=checked]:bg-foreground pointer-events-none block size-3.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0",
+            className: "pointer-events-none block size-3.5 rounded-full bg-background shadow-sm transition-transform data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0 dark:not-data-[state=checked]:bg-foreground",
             "data-slot": "switch-thumb"
         })
     });

package/dist/components/table.cjs

@@ -40,7 +40,7 @@ function Table({ className, ...props }) {
         className: "relative w-full overflow-auto",
         "data-slot": "table-cotainer",
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("table", {
-            className: (0, tailwind_variants_namespaceObject.cn)('w-full caption-bottom text-sm', className),
+            className: (0, tailwind_variants_namespaceObject.cn)("w-full caption-bottom text-sm", className),
             "data-slot": "table",
             ...props
         })
@@ -48,49 +48,49 @@ function Table({ className, ...props }) {
 }
 function TableHeader({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("thead", {
-        className: (0, tailwind_variants_namespaceObject.cn)('*:border-b *:has-aria-expanded:bg-transparent', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("*:border-b *:has-aria-expanded:bg-transparent", className),
         "data-slot": "table-header",
         ...props
     });
 }
 function TableBody({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("tbody", {
-        className: (0, tailwind_variants_namespaceObject.cn)('*:last-child:border-0', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("*:last-child:border-0", className),
         "data-slot": "table-body",
         ...props
     });
 }
 function TableFooter({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("tfoot", {
-        className: (0, tailwind_variants_namespaceObject.cn)('bg-muted/50 font-medium *:border-t *:border-b-0 *:has-aria-expanded:bg-transparent', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("bg-muted/50 font-medium *:border-t *:border-b-0 *:has-aria-expanded:bg-transparent", className),
         "data-slot": "table-footer",
         ...props
     });
 }
 function TableRow({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("tr", {
-        className: (0, tailwind_variants_namespaceObject.cn)('hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className),
         "data-slot": "table-row",
         ...props
     });
 }
 function TableHead({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("th", {
-        className: (0, tailwind_variants_namespaceObject.cn)('p-2 text-left align-middle font-medium', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("p-2 text-left align-middle font-medium", className),
         "data-slot": "table-head",
         ...props
     });
 }
 function TableCell({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("td", {
-        className: (0, tailwind_variants_namespaceObject.cn)('p-2 align-middle', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("p-2 align-middle", className),
         "data-slot": "table-cell",
         ...props
     });
 }
 function TableCaption({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("caption", {
-        className: (0, tailwind_variants_namespaceObject.cn)('text-muted-foreground mt-4 text-sm', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("mt-4 text-sm text-muted-foreground", className),
         "data-slot": "table-caption",
         ...props
     });

package/dist/components/table.d.ts

@@ -1,19 +1,19 @@
-import type { ComponentProps, JSX } from 'react';
-type TableProps = ComponentProps<'table'>;
+import type { ComponentProps, JSX } from "react";
+type TableProps = ComponentProps<"table">;
 declare function Table({ className, ...props }: TableProps): JSX.Element;
-type TableHeaderProps = ComponentProps<'thead'>;
+type TableHeaderProps = ComponentProps<"thead">;
 declare function TableHeader({ className, ...props }: TableHeaderProps): JSX.Element;
-type TableBodyProps = ComponentProps<'tbody'>;
+type TableBodyProps = ComponentProps<"tbody">;
 declare function TableBody({ className, ...props }: TableBodyProps): JSX.Element;
-type TableFooterProps = ComponentProps<'tfoot'>;
+type TableFooterProps = ComponentProps<"tfoot">;
 declare function TableFooter({ className, ...props }: TableFooterProps): JSX.Element;
-type TableRowProps = ComponentProps<'tr'>;
+type TableRowProps = ComponentProps<"tr">;
 declare function TableRow({ className, ...props }: TableRowProps): JSX.Element;
-type TableHeadProps = ComponentProps<'th'>;
+type TableHeadProps = ComponentProps<"th">;
 declare function TableHead({ className, ...props }: TableHeadProps): JSX.Element;
-type TableCellProps = ComponentProps<'td'>;
+type TableCellProps = ComponentProps<"td">;
 declare function TableCell({ className, ...props }: TableCellProps): JSX.Element;
-type TableCaptionProps = ComponentProps<'caption'>;
+type TableCaptionProps = ComponentProps<"caption">;
 declare function TableCaption({ className, ...props }: TableCaptionProps): JSX.Element;
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
 export type { TableBodyProps, TableCaptionProps, TableCellProps, TableFooterProps, TableHeaderProps, TableHeadProps, TableProps, TableRowProps, };

package/dist/components/table.js

@@ -5,7 +5,7 @@ function Table({ className, ...props }) {
         className: "relative w-full overflow-auto",
         "data-slot": "table-cotainer",
         children: /*#__PURE__*/ jsx("table", {
-            className: cn('w-full caption-bottom text-sm', className),
+            className: cn("w-full caption-bottom text-sm", className),
             "data-slot": "table",
             ...props
         })
@@ -13,49 +13,49 @@ function Table({ className, ...props }) {
 }
 function TableHeader({ className, ...props }) {
     return /*#__PURE__*/ jsx("thead", {
-        className: cn('*:border-b *:has-aria-expanded:bg-transparent', className),
+        className: cn("*:border-b *:has-aria-expanded:bg-transparent", className),
         "data-slot": "table-header",
         ...props
     });
 }
 function TableBody({ className, ...props }) {
     return /*#__PURE__*/ jsx("tbody", {
-        className: cn('*:last-child:border-0', className),
+        className: cn("*:last-child:border-0", className),
         "data-slot": "table-body",
         ...props
     });
 }
 function TableFooter({ className, ...props }) {
     return /*#__PURE__*/ jsx("tfoot", {
-        className: cn('bg-muted/50 font-medium *:border-t *:border-b-0 *:has-aria-expanded:bg-transparent', className),
+        className: cn("bg-muted/50 font-medium *:border-t *:border-b-0 *:has-aria-expanded:bg-transparent", className),
         "data-slot": "table-footer",
         ...props
     });
 }
 function TableRow({ className, ...props }) {
     return /*#__PURE__*/ jsx("tr", {
-        className: cn('hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', className),
+        className: cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className),
         "data-slot": "table-row",
         ...props
     });
 }
 function TableHead({ className, ...props }) {
     return /*#__PURE__*/ jsx("th", {
-        className: cn('p-2 text-left align-middle font-medium', className),
+        className: cn("p-2 text-left align-middle font-medium", className),
         "data-slot": "table-head",
         ...props
     });
 }
 function TableCell({ className, ...props }) {
     return /*#__PURE__*/ jsx("td", {
-        className: cn('p-2 align-middle', className),
+        className: cn("p-2 align-middle", className),
         "data-slot": "table-cell",
         ...props
     });
 }
 function TableCaption({ className, ...props }) {
     return /*#__PURE__*/ jsx("caption", {
-        className: cn('text-muted-foreground mt-4 text-sm', className),
+        className: cn("mt-4 text-sm text-muted-foreground", className),
         "data-slot": "table-caption",
         ...props
     });

package/dist/components/tabs.cjs

@@ -35,28 +35,28 @@ const tailwind_variants_namespaceObject = require("@codefast/tailwind-variants")
 const react_tabs_namespaceObject = require("@radix-ui/react-tabs");
 function Tabs({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_tabs_namespaceObject.Root, {
-        className: (0, tailwind_variants_namespaceObject.cn)('flex flex-col gap-2', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("flex flex-col gap-2", className),
         "data-slot": "tabs",
         ...props
     });
 }
 function TabsList({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_tabs_namespaceObject.List, {
-        className: (0, tailwind_variants_namespaceObject.cn)('bg-muted text-muted-foreground inline-flex w-fit items-center justify-center gap-1 rounded-xl px-1 py-1', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("inline-flex w-fit items-center justify-center gap-1 rounded-xl bg-muted px-1 py-1 text-muted-foreground", className),
         "data-slot": "tabs-list",
         ...props
     });
 }
 function TabsTrigger({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_tabs_namespaceObject.Trigger, {
-        className: (0, tailwind_variants_namespaceObject.cn)("data-[state=active]:bg-background dark:data-[state=active]:bg-input/50 text-muted-foreground focus-visible:ring-ring/50 dark:outline-ring data-[state=active]:text-foreground hover:not-disabled:text-foreground inline-flex items-center justify-center gap-1.5 rounded-lg px-2 py-1.5 text-sm font-medium whitespace-nowrap transition not-dark:outline-hidden focus-visible:ring-3 disabled:opacity-50 data-[state=active]:shadow-sm dark:-outline-offset-1 dark:data-[state=active]:outline-1 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+        className: (0, tailwind_variants_namespaceObject.cn)("inline-flex items-center justify-center gap-1.5 rounded-lg px-2 py-1.5 text-sm font-medium whitespace-nowrap text-muted-foreground transition not-dark:outline-hidden hover:not-disabled:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm dark:-outline-offset-1 dark:outline-ring dark:data-[state=active]:bg-input/50 dark:data-[state=active]:outline-1 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
         "data-slot": "tabs-trigger",
         ...props
     });
 }
 function TabsContent({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_tabs_namespaceObject.Content, {
-        className: (0, tailwind_variants_namespaceObject.cn)('outline-ring ring-ring/50 mt-2 rounded-xl focus-visible:ring-4 focus-visible:outline-1', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("mt-2 rounded-xl ring-ring/50 outline-ring focus-visible:ring-4 focus-visible:outline-1", className),
         "data-slot": "tabs-content",
         ...props
     });

package/dist/components/tabs.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps, JSX } from 'react';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
+import type { ComponentProps, JSX } from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
 type TabsProps = ComponentProps<typeof TabsPrimitive.Root>;
 declare function Tabs({ className, ...props }: TabsProps): JSX.Element;
 type TabsListProps = ComponentProps<typeof TabsPrimitive.List>;

package/dist/components/tabs.js

@@ -4,28 +4,28 @@ import { cn } from "@codefast/tailwind-variants";
 import { Content, List, Root, Trigger } from "@radix-ui/react-tabs";
 function Tabs({ className, ...props }) {
     return /*#__PURE__*/ jsx(Root, {
-        className: cn('flex flex-col gap-2', className),
+        className: cn("flex flex-col gap-2", className),
         "data-slot": "tabs",
         ...props
     });
 }
 function TabsList({ className, ...props }) {
     return /*#__PURE__*/ jsx(List, {
-        className: cn('bg-muted text-muted-foreground inline-flex w-fit items-center justify-center gap-1 rounded-xl px-1 py-1', className),
+        className: cn("inline-flex w-fit items-center justify-center gap-1 rounded-xl bg-muted px-1 py-1 text-muted-foreground", className),
         "data-slot": "tabs-list",
         ...props
     });
 }
 function TabsTrigger({ className, ...props }) {
     return /*#__PURE__*/ jsx(Trigger, {
-        className: cn("data-[state=active]:bg-background dark:data-[state=active]:bg-input/50 text-muted-foreground focus-visible:ring-ring/50 dark:outline-ring data-[state=active]:text-foreground hover:not-disabled:text-foreground inline-flex items-center justify-center gap-1.5 rounded-lg px-2 py-1.5 text-sm font-medium whitespace-nowrap transition not-dark:outline-hidden focus-visible:ring-3 disabled:opacity-50 data-[state=active]:shadow-sm dark:-outline-offset-1 dark:data-[state=active]:outline-1 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+        className: cn("inline-flex items-center justify-center gap-1.5 rounded-lg px-2 py-1.5 text-sm font-medium whitespace-nowrap text-muted-foreground transition not-dark:outline-hidden hover:not-disabled:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm dark:-outline-offset-1 dark:outline-ring dark:data-[state=active]:bg-input/50 dark:data-[state=active]:outline-1 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
         "data-slot": "tabs-trigger",
         ...props
     });
 }
 function TabsContent({ className, ...props }) {
     return /*#__PURE__*/ jsx(Content, {
-        className: cn('outline-ring ring-ring/50 mt-2 rounded-xl focus-visible:ring-4 focus-visible:outline-1', className),
+        className: cn("mt-2 rounded-xl ring-ring/50 outline-ring focus-visible:ring-4 focus-visible:outline-1", className),
         "data-slot": "tabs-content",
         ...props
     });

package/dist/components/textarea.cjs

@@ -30,7 +30,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const tailwind_variants_namespaceObject = require("@codefast/tailwind-variants");
 function Textarea({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("textarea", {
-        className: (0, tailwind_variants_namespaceObject.cn)('border-input hover:not-disabled:not-focus-visible:border-ring/60 focus-visible:border-ring focus-visible:ring-ring/50 placeholder:text-muted-foreground aria-invalid:border-destructive hover:not-disabled:not-focus-within:aria-invalid:border-destructive/60 focus-within:aria-invalid:ring-destructive/20 dark:focus-within:aria-invalid:ring-destructive/40 dark:bg-input/30 flex min-h-16 w-full grow rounded-lg border px-3 py-2 text-base shadow-xs outline-hidden transition focus-visible:ring-3 disabled:opacity-50 md:text-sm', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("flex min-h-16 w-full grow rounded-lg border border-input px-3 py-2 text-base shadow-xs outline-hidden transition placeholder:text-muted-foreground hover:not-disabled:not-focus-visible:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:opacity-50 aria-invalid:border-destructive focus-within:aria-invalid:ring-destructive/20 hover:not-disabled:not-focus-within:aria-invalid:border-destructive/60 md:text-sm dark:bg-input/30 dark:focus-within:aria-invalid:ring-destructive/40", className),
         "data-slot": "textarea",
         ...props
     });

package/dist/components/textarea.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps, JSX } from 'react';
-type TextareaProps = ComponentProps<'textarea'>;
+import type { ComponentProps, JSX } from "react";
+type TextareaProps = ComponentProps<"textarea">;
 declare function Textarea({ className, ...props }: TextareaProps): JSX.Element;
 export { Textarea };
 export type { TextareaProps };

package/dist/components/textarea.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { cn } from "@codefast/tailwind-variants";
 function Textarea({ className, ...props }) {
     return /*#__PURE__*/ jsx("textarea", {
-        className: cn('border-input hover:not-disabled:not-focus-visible:border-ring/60 focus-visible:border-ring focus-visible:ring-ring/50 placeholder:text-muted-foreground aria-invalid:border-destructive hover:not-disabled:not-focus-within:aria-invalid:border-destructive/60 focus-within:aria-invalid:ring-destructive/20 dark:focus-within:aria-invalid:ring-destructive/40 dark:bg-input/30 flex min-h-16 w-full grow rounded-lg border px-3 py-2 text-base shadow-xs outline-hidden transition focus-visible:ring-3 disabled:opacity-50 md:text-sm', className),
+        className: cn("flex min-h-16 w-full grow rounded-lg border border-input px-3 py-2 text-base shadow-xs outline-hidden transition placeholder:text-muted-foreground hover:not-disabled:not-focus-visible:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:opacity-50 aria-invalid:border-destructive focus-within:aria-invalid:ring-destructive/20 hover:not-disabled:not-focus-within:aria-invalid:border-destructive/60 md:text-sm dark:bg-input/30 dark:focus-within:aria-invalid:ring-destructive/40", className),
         "data-slot": "textarea",
         ...props
     });

package/dist/components/toggle-group.cjs

@@ -33,7 +33,7 @@ const tailwind_variants_namespaceObject = require("@codefast/tailwind-variants")
 const react_context_namespaceObject = require("@radix-ui/react-context");
 const react_toggle_group_namespaceObject = require("@radix-ui/react-toggle-group");
 const external_toggle_cjs_namespaceObject = require("./toggle.cjs");
-const TOGGLE_GROUP_NAME = 'ToggleGroup';
+const TOGGLE_GROUP_NAME = "ToggleGroup";
 const [createToggleGroupContext] = (0, react_context_namespaceObject.createContextScope)(TOGGLE_GROUP_NAME, [
     react_toggle_group_namespaceObject.createToggleGroupScope
 ]);
@@ -47,13 +47,13 @@ function ToggleGroup({ __scopeToggleGroup, children, className, size, spacing =
         spacing: spacing,
         variant: variant,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_toggle_group_namespaceObject.Root, {
-            className: (0, tailwind_variants_namespaceObject.cn)('group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-lg data-[spacing=default]:data-[variant=outline]:shadow-xs', className),
+            className: (0, tailwind_variants_namespaceObject.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
+                "--gap": spacing
             },
             ...toggleGroupScope,
             ...props,
@@ -61,7 +61,7 @@ function ToggleGroup({ __scopeToggleGroup, children, className, size, spacing =
         })
     });
 }
-const TOGGLE_GROUP_ITEM_NAME = 'ToggleGroupItem';
+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);
@@ -70,7 +70,7 @@ function ToggleGroupItem({ __scopeToggleGroup, children, className, ...props })
             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'),
+        }), "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,

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

@@ -1,7 +1,7 @@
-import type { Scope } from '@radix-ui/react-context';
-import type { ComponentProps, JSX } from 'react';
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import type { ToggleVariants } from './toggle';
+import type { Scope } from "@radix-ui/react-context";
+import type { ComponentProps, JSX } from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import type { ToggleVariants } from "./toggle";
 type ScopedProps<P> = P & {
     __scopeToggleGroup?: Scope;
 };

package/dist/components/toggle-group.js

@@ -4,7 +4,7 @@ import { cn } from "@codefast/tailwind-variants";
 import { createContextScope } from "@radix-ui/react-context";
 import { Item, Root, createToggleGroupScope } from "@radix-ui/react-toggle-group";
 import { toggleVariants } from "./toggle.js";
-const TOGGLE_GROUP_NAME = 'ToggleGroup';
+const TOGGLE_GROUP_NAME = "ToggleGroup";
 const [createToggleGroupContext] = createContextScope(TOGGLE_GROUP_NAME, [
     createToggleGroupScope
 ]);
@@ -18,13 +18,13 @@ function ToggleGroup({ __scopeToggleGroup, children, className, size, spacing =
         spacing: spacing,
         variant: variant,
         children: /*#__PURE__*/ jsx(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),
+            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
+                "--gap": spacing
             },
             ...toggleGroupScope,
             ...props,
@@ -32,7 +32,7 @@ function ToggleGroup({ __scopeToggleGroup, children, className, size, spacing =
         })
     });
 }
-const TOGGLE_GROUP_ITEM_NAME = 'ToggleGroupItem';
+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);
@@ -41,7 +41,7 @@ function ToggleGroupItem({ __scopeToggleGroup, children, className, ...props })
             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'),
+        }), "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,

package/dist/components/toggle.cjs

@@ -32,21 +32,21 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const tailwind_variants_namespaceObject = require("@codefast/tailwind-variants");
 const react_toggle_namespaceObject = require("@radix-ui/react-toggle");
 const toggleVariants = (0, tailwind_variants_namespaceObject.tv)({
-    base: "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+    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",
     variants: {
         size: {
-            default: 'h-9 px-2 min-w-9',
-            lg: 'h-10 px-2.5 min-w-10',
-            sm: 'h-8 px-1.5 min-w-8'
+            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'
+            default: "bg-transparent",
+            outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
         }
     },
     defaultVariants: {
-        size: 'default',
-        variant: 'default'
+        size: "default",
+        variant: "default"
     }
 });
 function Toggle({ children, className, size, variant, ...props }) {

package/dist/components/toggle.d.ts

@@ -1,6 +1,6 @@
-import type { VariantProps } from '@codefast/tailwind-variants';
-import type { ComponentProps, JSX } from 'react';
-import * as TogglePrimitive from '@radix-ui/react-toggle';
+import type { VariantProps } from "@codefast/tailwind-variants";
+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;

package/dist/components/toggle.js

@@ -3,21 +3,21 @@ import { jsx } from "react/jsx-runtime";
 import { tv } from "@codefast/tailwind-variants";
 import { Root } from "@radix-ui/react-toggle";
 const toggleVariants = tv({
-    base: "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+    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",
     variants: {
         size: {
-            default: 'h-9 px-2 min-w-9',
-            lg: 'h-10 px-2.5 min-w-10',
-            sm: 'h-8 px-1.5 min-w-8'
+            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'
+            default: "bg-transparent",
+            outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
         }
     },
     defaultVariants: {
-        size: 'default',
-        variant: 'default'
+        size: "default",
+        variant: "default"
     }
 });
 function Toggle({ children, className, size, variant, ...props }) {

package/dist/components/tooltip.cjs

@@ -55,7 +55,7 @@ function TooltipTrigger({ ...props }) {
 function TooltipContent({ children, className, sideOffset = 4, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_tooltip_namespaceObject.Portal, {
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_tooltip_namespaceObject.Content, {
-            className: (0, tailwind_variants_namespaceObject.cn)('bg-primary text-primary-foreground 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 ease-ui z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance', 'max-w-(--radix-tooltip-content-available-width)', className),
+            className: (0, tailwind_variants_namespaceObject.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,
@@ -69,7 +69,7 @@ function TooltipContent({ children, className, sideOffset = 4, ...props }) {
 }
 function TooltipArrow({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_tooltip_namespaceObject.Arrow, {
-        className: (0, tailwind_variants_namespaceObject.cn)('fill-primary', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("fill-primary", className),
         "data-slot": "tooltip-arrow",
         ...props
     });

package/dist/components/tooltip.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps, JSX } from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import type { ComponentProps, JSX } from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 type TooltipProviderProps = ComponentProps<typeof TooltipPrimitive.Provider>;
 declare function TooltipProvider({ ...props }: TooltipProviderProps): JSX.Element;
 type TooltipProps = ComponentProps<typeof TooltipPrimitive.Root>;
@@ -11,4 +11,4 @@ declare function TooltipContent({ children, className, sideOffset, ...props }: T
 type TooltipArrowProps = ComponentProps<typeof TooltipPrimitive.Arrow>;
 declare function TooltipArrow({ className, ...props }: TooltipArrowProps): JSX.Element;
 export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger };
-export type { TooltipArrowProps, TooltipContentProps, TooltipProps, TooltipProviderProps, TooltipTriggerProps };
+export type { TooltipArrowProps, TooltipContentProps, TooltipProps, TooltipProviderProps, TooltipTriggerProps, };

package/dist/components/tooltip.js

@@ -23,7 +23,7 @@ function TooltipTrigger({ ...props }) {
 function TooltipContent({ children, className, sideOffset = 4, ...props }) {
     return /*#__PURE__*/ jsx(Portal, {
         children: /*#__PURE__*/ jsxs(Content, {
-            className: cn('bg-primary text-primary-foreground 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 ease-ui z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance', 'max-w-(--radix-tooltip-content-available-width)', className),
+            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,
@@ -37,7 +37,7 @@ function TooltipContent({ children, className, sideOffset = 4, ...props }) {
 }
 function TooltipArrow({ className, ...props }) {
     return /*#__PURE__*/ jsx(Arrow, {
-        className: cn('fill-primary', className),
+        className: cn("fill-primary", className),
         "data-slot": "tooltip-arrow",
         ...props
     });

package/dist/css/preset.css

@@ -1,6 +1,6 @@
-@import 'tw-animate-css';
+@import "tw-animate-css";
 
-@source '../**/*.js';
+@source "../**/*.js";
 
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -85,7 +85,7 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    @apply bg-border rounded-full;
+    @apply rounded-full bg-border;
   }
 
   * {
@@ -111,7 +111,7 @@
       margin: 0;
     }
 
-    &[type='number'] {
+    &[type="number"] {
       -moz-appearance: textfield;
     }
   }

package/dist/css/style.css

@@ -1,3 +1,3 @@
-@import 'tailwindcss';
-@import './neutral.css';
-@import './preset.css';
+@import "tailwindcss";
+@import "./neutral.css";
+@import "./preset.css";

package/dist/hooks/use-copy-to-clipboard.cjs

@@ -31,7 +31,7 @@ const external_react_namespaceObject = require("react");
 function useCopyToClipboard({ onCopy, timeout = 2000 } = {}) {
     const [isCopied, setIsCopied] = (0, external_react_namespaceObject.useState)(false);
     const copyToClipboard = async (value)=>{
-        if ("u" < typeof window || !('clipboard' in navigator)) return;
+        if ("u" < typeof window || !("clipboard" in navigator) || "function" != typeof navigator.clipboard.writeText) return;
         if (!value) return;
         try {
             await navigator.clipboard.writeText(value);