@codefast/ui 0.3.10 → 0.3.11-canary.1

package/dist/components/skeleton.d.ts

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

package/dist/components/skeleton.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { cn } from "@codefast/tailwind-variants";
 function Skeleton({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('bg-muted animate-pulse rounded-lg', className),
+        className: cn("animate-pulse rounded-lg bg-muted", className),
         "data-slot": "skeleton",
         ...props
     });

package/dist/components/slider.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps, JSX } from 'react';
-import * as SliderPrimitive from '@radix-ui/react-slider';
+import type { ComponentProps, JSX } from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
 type SliderProps = ComponentProps<typeof SliderPrimitive.Root>;
 declare function Slider({ className, defaultValue, max, min, value, ...props }: SliderProps): JSX.Element;
 export { Slider };

package/dist/components/slider.js

@@ -17,7 +17,7 @@ function Slider({ className, defaultValue, max = 100, min = 0, value, ...props }
         max
     ]);
     return /*#__PURE__*/ jsxs(Root, {
-        className: cn('relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col', className),
+        className: cn("relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className),
         "data-slot": "slider",
         defaultValue: defaultValue,
         max: max,
@@ -26,10 +26,10 @@ function Slider({ className, defaultValue, max = 100, min = 0, value, ...props }
         ...props,
         children: [
             /*#__PURE__*/ jsx(Track, {
-                className: "bg-input relative w-full grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1",
+                className: "relative w-full grow overflow-hidden rounded-full bg-input data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1",
                 "data-slot": "slider-track",
                 children: /*#__PURE__*/ jsx(Range, {
-                    className: "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+                    className: "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
                     "data-slot": "slider-range"
                 })
             }),
@@ -37,7 +37,7 @@ function Slider({ className, defaultValue, max = 100, min = 0, value, ...props }
                 length: _values.length
             }, (_, index)=>/*#__PURE__*/ jsx(Thumb, {
                     "aria-label": "Volume",
-                    className: cn('border-primary bg-primary after:bg-background focus-visible:ring-primary/20 dark:focus-visible:ring-primary/40 flex size-4 items-center justify-center rounded-full border-2 shadow-sm outline-hidden after:size-full after:rounded-full after:transition-[width,height] focus-visible:ring-4 active:not-data-disabled:after:size-1'),
+                    className: cn("flex size-4 items-center justify-center rounded-full border-2 border-primary bg-primary shadow-sm outline-hidden after:size-full after:rounded-full after:bg-background after:transition-[width,height] focus-visible:ring-4 focus-visible:ring-primary/20 active:not-data-disabled:after:size-1 dark:focus-visible:ring-primary/40"),
                     "data-slot": "slider-thumb"
                 }, index))
         ]

package/dist/components/sonner.d.ts

@@ -1,7 +1,7 @@
-import type { JSX } from 'react';
-import type { ToasterProps as SonnerToasterProps } from 'sonner';
+import type { JSX } from "react";
+import type { ToasterProps as SonnerToasterProps } from "sonner";
 type ToasterProps = SonnerToasterProps;
 declare function Toaster({ ...props }: ToasterProps): JSX.Element;
-export { toast, useSonner } from 'sonner';
+export { toast, useSonner } from "sonner";
 export { Toaster };
 export type { ToasterProps };

package/dist/components/sonner.js

@@ -3,13 +3,13 @@ import { jsx } from "react/jsx-runtime";
 import { useTheme } from "next-themes";
 import { Toaster, toast, useSonner } from "sonner";
 function sonner_Toaster({ ...props }) {
-    const { theme = 'system' } = useTheme();
+    const { theme = "system" } = useTheme();
     return /*#__PURE__*/ jsx(Toaster, {
         className: "toaster group",
         style: {
-            '--normal-bg': 'var(--popover)',
-            '--normal-border': 'var(--border)',
-            '--normal-text': 'var(--popover-foreground)'
+            "--normal-bg": "var(--popover)",
+            "--normal-border": "var(--border)",
+            "--normal-text": "var(--popover-foreground)"
         },
         theme: theme,
         ...props

package/dist/components/spinner.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps, ReactNode } from 'react';
-interface SpinnerProps extends ComponentProps<'span'> {
+import type { ComponentProps, ReactNode } from "react";
+interface SpinnerProps extends ComponentProps<"span"> {
     loading?: boolean;
 }
 declare function Spinner({ children, className, loading, ...props }: SpinnerProps): ReactNode;

package/dist/components/spinner.js

@@ -6,16 +6,16 @@ const SPINNER_COUNT = 8;
 function Spinner({ children, className, loading = true, ...props }) {
     if (!loading) return children;
     const spinner = /*#__PURE__*/ jsx("span", {
-        className: cn('relative flex size-4 items-center justify-center opacity-60', className),
+        className: cn("relative flex size-4 items-center justify-center opacity-60", className),
         ...props,
         children: Array.from({
             length: SPINNER_COUNT
         }, (_, index)=>/*#__PURE__*/ jsx("span", {
-                className: cn('before:animate-out before:fade-out-25 before:repeat-infinite before:animation-duration-(--spinner-duration) absolute h-full rotate-(--spinner-rotate) before:block before:h-1/3 before:w-full before:rounded-full before:bg-current before:delay-(--spinner-delay)'),
+                className: cn("absolute h-full rotate-(--spinner-rotate) before:block before:h-1/3 before:w-full before:animate-out before:rounded-full before:bg-current before:delay-(--spinner-delay) before:animation-duration-(--spinner-duration) before:fade-out-25 before:repeat-infinite"),
                 style: {
-                    '--spinner-delay': `-${((SPINNER_COUNT - index) * 100).toString()}ms`,
-                    '--spinner-duration': `${(100 * SPINNER_COUNT).toString()}ms`,
-                    '--spinner-rotate': `${(360 / SPINNER_COUNT * index).toString()}deg`,
+                    "--spinner-delay": `-${((SPINNER_COUNT - index) * 100).toString()}ms`,
+                    "--spinner-duration": `${(100 * SPINNER_COUNT).toString()}ms`,
+                    "--spinner-rotate": `${(360 / SPINNER_COUNT * index).toString()}deg`,
                     width: `${(100 / SPINNER_COUNT).toString()}%`
                 }
             }, index))

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.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.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.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.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.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.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.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.js

@@ -3,7 +3,7 @@ import { useState } from "react";
 function useCopyToClipboard({ onCopy, timeout = 2000 } = {}) {
     const [isCopied, setIsCopied] = 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);

package/dist/hooks/use-media-query.js

@@ -2,7 +2,7 @@
 import { useEffect, useState } from "react";
 function useMediaQuery(query) {
     const [matches, setMatches] = useState(()=>{
-        if ("u" > typeof window && 'function' == typeof window.matchMedia) return window.matchMedia(query).matches;
+        if ("u" > typeof window && "function" == typeof window.matchMedia) return window.matchMedia(query).matches;
         return false;
     });
     useEffect(()=>{
@@ -11,9 +11,9 @@ function useMediaQuery(query) {
         const onChange = (event)=>{
             setMatches(event.matches);
         };
-        mediaQueryList.addEventListener('change', onChange);
+        mediaQueryList.addEventListener("change", onChange);
         return ()=>{
-            mediaQueryList.removeEventListener('change', onChange);
+            mediaQueryList.removeEventListener("change", onChange);
         };
     }, [
         query

package/dist/hooks/use-mutation-observer.d.ts

@@ -1,4 +1,4 @@
-import type { RefObject } from 'react';
+import type { RefObject } from "react";
 /**
  * Observe DOM mutations on a referenced element and invoke a callback.
  *

package/dist/hooks/use-pagination.js

@@ -1,6 +1,6 @@
 "use client";
 import { useMemo } from "react";
-const ELLIPSIS = '•••';
+const ELLIPSIS = "•••";
 const createRange = (start, end)=>{
     const length = end - start + 1;
     return Array.from({