@codefast/ui 0.3.10 → 0.3.11-canary.1

package/dist/components/dialog.js

@@ -20,26 +20,26 @@ function DialogContent({ children, className, classNames, ...props }) {
     return /*#__PURE__*/ jsxs(Portal, {
         children: [
             /*#__PURE__*/ jsx(Overlay, {
-                className: cn('data-[state=open]:fade-in-0 data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=closed]:animate-out ease-ui fixed inset-0 z-50 bg-black/50', classNames?.overlay),
+                className: cn("fixed inset-0 z-50 bg-black/50 ease-ui data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", classNames?.overlay),
                 "data-slot": "dialog-overlay"
             }),
             /*#__PURE__*/ jsx(Content, {
-                className: cn('data-[state=open]:animate-in max-sm:data-[state=open]:animation-duration-500 max-sm:data-[state=open]:slide-in-from-bottom sm:data-[state=open]:fade-in-0 sm:data-[state=open]:zoom-in-95 data-[state=closed]:animate-out max-sm:data-[state=closed]:animation-duration-500 max-sm:data-[state=closed]:slide-out-to-bottom sm:data-[state=closed]:fade-out-0 sm:data-[state=closed]:zoom-out-95 ease-ui fixed inset-0 z-50 grid grid-rows-[1fr_auto] justify-items-center overflow-auto sm:grid-rows-[1fr_auto_3fr] sm:p-4', classNames?.wrapper),
+                className: cn("fixed inset-0 z-50 grid grid-rows-[1fr_auto] justify-items-center overflow-auto ease-ui data-[state=closed]:animate-out data-[state=open]:animate-in max-sm:data-[state=closed]:animation-duration-500 max-sm:data-[state=closed]:slide-out-to-bottom max-sm:data-[state=open]:animation-duration-500 max-sm:data-[state=open]:slide-in-from-bottom sm:grid-rows-[1fr_auto_3fr] sm:p-4 sm:data-[state=closed]:fade-out-0 sm:data-[state=closed]:zoom-out-95 sm:data-[state=open]:fade-in-0 sm:data-[state=open]:zoom-in-95", classNames?.wrapper),
                 "data-slot": "dialog-content-wrapper",
                 ...props,
                 children: /*#__PURE__*/ jsxs("div", {
-                    className: cn('bg-popover text-popover-foreground relative row-start-2 flex w-full flex-col rounded-t-2xl border shadow-lg sm:max-w-lg sm:rounded-2xl', classNames?.content, className),
+                    className: cn("relative row-start-2 flex w-full flex-col rounded-t-2xl border bg-popover text-popover-foreground shadow-lg sm:max-w-lg sm:rounded-2xl", classNames?.content, className),
                     "data-slot": "dialog-content",
                     children: [
                         children,
                         /*#__PURE__*/ jsxs(Close, {
                             className: buttonVariants({
                                 className: [
-                                    'absolute top-2.5 right-2.5 size-7',
+                                    "absolute top-2.5 right-2.5 size-7",
                                     classNames?.close
                                 ],
-                                size: 'icon',
-                                variant: 'ghost'
+                                size: "icon",
+                                variant: "ghost"
                             }),
                             "data-slot": "dialog-close",
                             children: [
@@ -60,40 +60,40 @@ function DialogContent({ children, className, classNames, ...props }) {
 }
 function DialogHeader({ className, ...props }) {
     return /*#__PURE__*/ jsx("header", {
-        className: cn('flex shrink-0 flex-col gap-1.5 px-6 pt-6 pb-2 text-center sm:text-left', className),
+        className: cn("flex shrink-0 flex-col gap-1.5 px-6 pt-6 pb-2 text-center sm:text-left", className),
         "data-slot": "dialog-header",
         ...props
     });
 }
 function DialogBody({ className, ...props }) {
     return /*#__PURE__*/ jsx("main", {
-        className: cn('overflow-auto px-6 py-2', className),
+        className: cn("overflow-auto px-6 py-2", className),
         "data-slot": "dialog-body",
         ...props
     });
 }
 function DialogFooter({ className, ...props }) {
     return /*#__PURE__*/ jsx("footer", {
-        className: cn('flex shrink-0 flex-col-reverse gap-2 px-6 pt-2 pb-6 sm:flex-row sm:justify-end', className),
+        className: cn("flex shrink-0 flex-col-reverse gap-2 px-6 pt-2 pb-6 sm:flex-row sm:justify-end", className),
         "data-slot": "dialog-footer",
         ...props
     });
 }
 function DialogTitle({ className, ...props }) {
     return /*#__PURE__*/ jsx(Title, {
-        className: cn('text-lg leading-none font-semibold tracking-tight', className),
+        className: cn("text-lg leading-none font-semibold tracking-tight", className),
         "data-slot": "dialog-title",
         ...props
     });
 }
 function DialogDescription({ className, ...props }) {
     return /*#__PURE__*/ jsx(Description, {
-        className: cn('text-muted-foreground text-sm', className),
+        className: cn("text-sm text-muted-foreground", className),
         "data-slot": "dialog-description",
         ...props
     });
 }
-function DialogClose({ className, size, variant = 'outline', ...props }) {
+function DialogClose({ className, size, variant = "outline", ...props }) {
     return /*#__PURE__*/ jsx(Close, {
         className: buttonVariants({
             className,

package/dist/components/drawer.d.ts

@@ -1,7 +1,7 @@
-import type { VariantProps } from '@codefast/tailwind-variants';
-import type { ComponentProps, JSX } from 'react';
-import { Drawer as DrawerPrimitive } from 'vaul';
-import { buttonVariants } from './button';
+import type { VariantProps } from "@codefast/tailwind-variants";
+import type { ComponentProps, JSX } from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { buttonVariants } from "./button";
 type DrawerProps = ComponentProps<typeof DrawerPrimitive.Root>;
 declare function Drawer({ shouldScaleBackground, ...props }: DrawerProps): JSX.Element;
 type DrawerTriggerProps = ComponentProps<typeof DrawerPrimitive.Trigger>;
@@ -14,19 +14,19 @@ interface DrawerContentProps extends ComponentProps<typeof DrawerPrimitive.Conte
     };
 }
 declare function DrawerContent({ children, className, classNames, ...props }: DrawerContentProps): JSX.Element;
-type DrawerHeaderProps = ComponentProps<'div'>;
+type DrawerHeaderProps = ComponentProps<"div">;
 declare function DrawerHeader({ className, ...props }: DrawerHeaderProps): JSX.Element;
-type DrawerBodyProps = ComponentProps<'div'>;
+type DrawerBodyProps = ComponentProps<"div">;
 declare function DrawerBody({ className, ...props }: DrawerBodyProps): JSX.Element;
-type DrawerFooterProps = ComponentProps<'div'>;
+type DrawerFooterProps = ComponentProps<"div">;
 declare function DrawerFooter({ className, ...props }: DrawerFooterProps): JSX.Element;
 type DrawerTitleProps = ComponentProps<typeof DrawerPrimitive.Title>;
 declare function DrawerTitle({ className, ...props }: DrawerTitleProps): JSX.Element;
 type DrawerDescriptionProps = ComponentProps<typeof DrawerPrimitive.Description>;
 declare function DrawerDescription({ className, ...props }: DrawerDescriptionProps): JSX.Element;
 interface DrawerCloseProps extends ComponentProps<typeof DrawerPrimitive.Close> {
-    size?: VariantProps<typeof buttonVariants>['size'];
-    variant?: VariantProps<typeof buttonVariants>['variant'];
+    size?: VariantProps<typeof buttonVariants>["size"];
+    variant?: VariantProps<typeof buttonVariants>["variant"];
 }
 declare function DrawerClose({ className, size, variant, ...props }: DrawerCloseProps): JSX.Element;
 export { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, };

package/dist/components/drawer.js

@@ -20,16 +20,16 @@ function DrawerContent({ children, className, classNames, ...props }) {
     return /*#__PURE__*/ jsxs(Drawer.Portal, {
         children: [
             /*#__PURE__*/ jsx(Drawer.Overlay, {
-                className: cn('fixed inset-0 z-50 bg-black/50', classNames?.overlay),
+                className: cn("fixed inset-0 z-50 bg-black/50", classNames?.overlay),
                 "data-slot": "drawer-overlay"
             }),
             /*#__PURE__*/ jsxs(Drawer.Content, {
-                className: cn('group/drawer-content bg-background fixed z-50 flex h-auto flex-col data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-2xl data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-2xl data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm', classNames?.content, className),
+                className: cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-background data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-2xl data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-2xl data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm", classNames?.content, className),
                 "data-slot": "drawer-content",
                 ...props,
                 children: [
                     /*#__PURE__*/ jsx("div", {
-                        className: cn('bg-muted mx-auto mt-4 hidden h-1.5 w-12 shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block', classNames?.handle)
+                        className: cn("mx-auto mt-4 hidden h-1.5 w-12 shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block", classNames?.handle)
                     }),
                     children
                 ]
@@ -39,40 +39,40 @@ function DrawerContent({ children, className, classNames, ...props }) {
 }
 function DrawerHeader({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('flex flex-col gap-1.5 p-4', className),
+        className: cn("flex flex-col gap-1.5 p-4", className),
         "data-slot": "drawer-header",
         ...props
     });
 }
 function DrawerBody({ className, ...props }) {
     return /*#__PURE__*/ jsx("main", {
-        className: cn('overflow-auto px-4 py-2', className),
+        className: cn("overflow-auto px-4 py-2", className),
         "data-slot": "drawer-body",
         ...props
     });
 }
 function DrawerFooter({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('mt-auto flex flex-col gap-2 p-4', className),
+        className: cn("mt-auto flex flex-col gap-2 p-4", className),
         "data-slot": "drawer-footer",
         ...props
     });
 }
 function DrawerTitle({ className, ...props }) {
     return /*#__PURE__*/ jsx(Drawer.Title, {
-        className: cn('text-foreground font-semibold', className),
+        className: cn("font-semibold text-foreground", className),
         "data-slot": "drawer-title",
         ...props
     });
 }
 function DrawerDescription({ className, ...props }) {
     return /*#__PURE__*/ jsx(Drawer.Description, {
-        className: cn('text-muted-foreground text-sm', className),
+        className: cn("text-sm text-muted-foreground", className),
         "data-slot": "drawer-description",
         ...props
     });
 }
-function DrawerClose({ className, size, variant = 'outline', ...props }) {
+function DrawerClose({ className, size, variant = "outline", ...props }) {
     return /*#__PURE__*/ jsx(Drawer.Close, {
         className: buttonVariants({
             className,

package/dist/components/dropdown-menu.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps, JSX } from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import type { ComponentProps, JSX } from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 type DropdownMenuProps = ComponentProps<typeof DropdownMenuPrimitive.Root>;
 declare function DropdownMenu({ ...props }: DropdownMenuProps): JSX.Element;
 type DropdownMenuTriggerProps = ComponentProps<typeof DropdownMenuPrimitive.Trigger>;
@@ -20,7 +20,7 @@ type DropdownMenuContentProps = ComponentProps<typeof DropdownMenuPrimitive.Cont
 declare function DropdownMenuContent({ className, sideOffset, ...props }: DropdownMenuContentProps): JSX.Element;
 interface DropdownMenuItemProps extends ComponentProps<typeof DropdownMenuPrimitive.Item> {
     inset?: boolean;
-    variant?: 'default' | 'destructive';
+    variant?: "default" | "destructive";
 }
 declare function DropdownMenuItem({ className, inset, variant, ...props }: DropdownMenuItemProps): JSX.Element;
 type DropdownMenuCheckboxItemProps = ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>;
@@ -33,7 +33,7 @@ interface DropdownMenuLabelProps extends ComponentProps<typeof DropdownMenuPrimi
 declare function DropdownMenuLabel({ className, inset, ...props }: DropdownMenuLabelProps): JSX.Element;
 type DropdownMenuSeparatorProps = ComponentProps<typeof DropdownMenuPrimitive.Separator>;
 declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps): JSX.Element;
-type DropdownMenuShortcutProps = ComponentProps<'span'>;
+type DropdownMenuShortcutProps = ComponentProps<"span">;
 declare function DropdownMenuShortcut({ className, ...props }: DropdownMenuShortcutProps): JSX.Element;
 type DropdownMenuArrowProps = ComponentProps<typeof DropdownMenuPrimitive.Arrow>;
 declare function DropdownMenuArrow({ className, ...props }: DropdownMenuArrowProps): JSX.Element;

package/dist/components/dropdown-menu.js

@@ -35,7 +35,7 @@ function DropdownMenuRadioGroup({ ...props }) {
 }
 function DropdownMenuSubTrigger({ children, className, inset, ...props }) {
     return /*#__PURE__*/ jsxs(SubTrigger, {
-        className: cn('focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center gap-x-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8', className),
+        className: cn("flex cursor-default items-center gap-x-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", className),
         "data-inset": inset,
         "data-slot": "dropdown-menu-sub-trigger",
         ...props,
@@ -51,7 +51,7 @@ function DropdownMenuSubContent({ className, ...props }) {
     return /*#__PURE__*/ jsx(Portal, {
         "data-slot": "dropdown-menu-portal",
         children: /*#__PURE__*/ jsx(SubContent, {
-            className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=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 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg border p-1 shadow-lg', className),
+            className: cn("z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg 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=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=top]:slide-in-from-bottom-2", className),
             "data-slot": "dropdown-menu-sub-content",
             ...props
         })
@@ -61,7 +61,7 @@ function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
     return /*#__PURE__*/ jsx(Portal, {
         "data-slot": "dropdown-menu-portal",
         children: /*#__PURE__*/ jsx(Content, {
-            className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=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 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border p-1 shadow-lg', className),
+            className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg 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=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=top]:slide-in-from-bottom-2", className),
             "data-slot": "dropdown-menu-content",
             sideOffset: sideOffset,
             ...props
@@ -70,7 +70,7 @@ function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
 }
 function DropdownMenuItem({ className, inset, variant, ...props }) {
     return /*#__PURE__*/ jsx(Item, {
-        className: cn("focus:bg-accent focus:text-accent-foreground group/dropdown-menu-item data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:[&_svg:not([class*='text-'])]:text-destructive/80 [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-x-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none aria-disabled:opacity-50 data-inset:pl-8 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+        className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-x-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground aria-disabled:opacity-50 data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:[&_svg:not([class*='text-'])]:text-destructive/80", className),
         "data-inset": inset,
         "data-slot": "dropdown-menu-item",
         "data-variant": variant,
@@ -80,7 +80,7 @@ function DropdownMenuItem({ className, inset, variant, ...props }) {
 function DropdownMenuCheckboxItem({ checked, children, className, ...props }) {
     return /*#__PURE__*/ jsxs(CheckboxItem, {
         checked: checked,
-        className: cn("focus:bg-accent focus:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-x-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none aria-disabled:opacity-50 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+        className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-x-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground aria-disabled:opacity-50 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
         "data-slot": "dropdown-menu-checkbox-item",
         ...props,
         children: [
@@ -98,7 +98,7 @@ function DropdownMenuCheckboxItem({ checked, children, className, ...props }) {
 }
 function DropdownMenuRadioItem({ children, className, ...props }) {
     return /*#__PURE__*/ jsxs(RadioItem, {
-        className: cn("focus:bg-accent focus:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-x-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none aria-disabled:opacity-50 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+        className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-x-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground aria-disabled:opacity-50 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
         "data-slot": "dropdown-menu-radio-item",
         ...props,
         children: [
@@ -116,7 +116,7 @@ function DropdownMenuRadioItem({ children, className, ...props }) {
 }
 function DropdownMenuLabel({ className, inset, ...props }) {
     return /*#__PURE__*/ jsx(Label, {
-        className: cn('flex items-center gap-x-2 px-2 py-1.5 text-sm font-semibold data-inset:pl-8', className),
+        className: cn("flex items-center gap-x-2 px-2 py-1.5 text-sm font-semibold data-inset:pl-8", className),
         "data-inset": inset,
         "data-slot": "dropdown-menu-label",
         ...props
@@ -124,21 +124,21 @@ function DropdownMenuLabel({ className, inset, ...props }) {
 }
 function DropdownMenuSeparator({ className, ...props }) {
     return /*#__PURE__*/ jsx(Separator, {
-        className: cn('bg-border mx-2 my-1 h-px', className),
+        className: cn("mx-2 my-1 h-px bg-border", className),
         "data-slot": "dropdown-menu-separator",
         ...props
     });
 }
 function DropdownMenuShortcut({ className, ...props }) {
     return /*#__PURE__*/ jsx("span", {
-        className: cn('text-muted-foreground group-data-[variant=destructive]/dropdown-menu-item:text-destructive/80 ml-auto text-xs tracking-widest', className),
+        className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-data-[variant=destructive]/dropdown-menu-item:text-destructive/80", className),
         "data-slot": "dropdown-menu-shortcut",
         ...props
     });
 }
 function DropdownMenuArrow({ className, ...props }) {
     return /*#__PURE__*/ jsx(Arrow, {
-        className: cn('fill-popover', className),
+        className: cn("fill-popover", className),
         "data-slot": "dropdown-menu-arrow",
         ...props
     });

package/dist/components/empty.d.ts

@@ -1,22 +1,22 @@
-import type { VariantProps } from '@codefast/tailwind-variants';
-import type { ComponentProps, JSX } from 'react';
+import type { VariantProps } from "@codefast/tailwind-variants";
+import type { ComponentProps, JSX } from "react";
 declare const emptyMediaVariants: import("@codefast/tailwind-variants").VariantFunctionType<{
     variant: {
         default: string;
         icon: string;
     };
 }, Record<string, never>>;
-type EmptyProps = ComponentProps<'div'>;
+type EmptyProps = ComponentProps<"div">;
 declare function Empty({ className, ...props }: EmptyProps): JSX.Element;
-type EmptyHeaderProps = ComponentProps<'div'>;
+type EmptyHeaderProps = ComponentProps<"div">;
 declare function EmptyHeader({ className, ...props }: EmptyHeaderProps): JSX.Element;
-type EmptyMediaProps = ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>;
+type EmptyMediaProps = ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>;
 declare function EmptyMedia({ className, variant, ...props }: EmptyMediaProps): JSX.Element;
-type EmptyTitleProps = ComponentProps<'div'>;
+type EmptyTitleProps = ComponentProps<"div">;
 declare function EmptyTitle({ className, ...props }: EmptyTitleProps): JSX.Element;
-type EmptyDescriptionProps = ComponentProps<'p'>;
+type EmptyDescriptionProps = ComponentProps<"p">;
 declare function EmptyDescription({ className, ...props }: EmptyDescriptionProps): JSX.Element;
-type EmptyContentProps = ComponentProps<'div'>;
+type EmptyContentProps = ComponentProps<"div">;
 declare function EmptyContent({ className, ...props }: EmptyContentProps): JSX.Element;
-export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, emptyMediaVariants, EmptyTitle };
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, emptyMediaVariants, EmptyTitle, };
 export type { EmptyContentProps, EmptyDescriptionProps, EmptyHeaderProps, EmptyMediaProps, EmptyProps, EmptyTitleProps, };

package/dist/components/empty.js

@@ -1,32 +1,32 @@
 import { jsx } from "react/jsx-runtime";
 import { cn, tv } from "@codefast/tailwind-variants";
 const emptyMediaVariants = tv({
-    base: 'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
+    base: "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
     defaultVariants: {
-        variant: 'default'
+        variant: "default"
     },
     variants: {
         variant: {
-            default: 'bg-transparent',
-            icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-xl [&_svg:not([class*='size-'])]:size-6"
+            default: "bg-transparent",
+            icon: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6"
         }
     }
 });
 function Empty({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-xl border-dashed p-6 text-center text-balance md:p-12', className),
+        className: cn("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-xl border-dashed p-6 text-center text-balance md:p-12", className),
         "data-slot": "empty",
         ...props
     });
 }
 function EmptyHeader({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('flex max-w-sm flex-col items-center gap-2 text-center', className),
+        className: cn("flex max-w-sm flex-col items-center gap-2 text-center", className),
         "data-slot": "empty-header",
         ...props
     });
 }
-function EmptyMedia({ className, variant = 'default', ...props }) {
+function EmptyMedia({ className, variant = "default", ...props }) {
     return /*#__PURE__*/ jsx("div", {
         className: emptyMediaVariants({
             className,
@@ -39,21 +39,21 @@ function EmptyMedia({ className, variant = 'default', ...props }) {
 }
 function EmptyTitle({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('text-lg font-medium tracking-tight', className),
+        className: cn("text-lg font-medium tracking-tight", className),
         "data-slot": "empty-title",
         ...props
     });
 }
 function EmptyDescription({ className, ...props }) {
     return /*#__PURE__*/ jsx("p", {
-        className: cn('text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4', className),
+        className: cn("text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
         "data-slot": "empty-description",
         ...props
     });
 }
 function EmptyContent({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance', className),
+        className: cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance", className),
         "data-slot": "empty-content",
         ...props
     });

package/dist/components/field.d.ts

@@ -1,6 +1,6 @@
-import type { VariantProps } from '@codefast/tailwind-variants';
-import type { ComponentProps, JSX } from 'react';
-import { Label } from './label';
+import type { VariantProps } from "@codefast/tailwind-variants";
+import type { ComponentProps, JSX } from "react";
+import { Label } from "./label";
 declare const fieldVariants: import("@codefast/tailwind-variants").VariantFunctionType<{
     orientation: {
         horizontal: string;
@@ -8,32 +8,32 @@ declare const fieldVariants: import("@codefast/tailwind-variants").VariantFuncti
         vertical: string;
     };
 }, Record<string, never>>;
-type FieldSetProps = ComponentProps<'fieldset'>;
+type FieldSetProps = ComponentProps<"fieldset">;
 declare function FieldSet({ className, ...props }: FieldSetProps): JSX.Element;
-type FieldLegendProps = ComponentProps<'legend'> & {
-    variant?: 'label' | 'legend';
+type FieldLegendProps = ComponentProps<"legend"> & {
+    variant?: "label" | "legend";
 };
 declare function FieldLegend({ className, variant, ...props }: FieldLegendProps): JSX.Element;
-type FieldGroupProps = ComponentProps<'div'>;
+type FieldGroupProps = ComponentProps<"div">;
 declare function FieldGroup({ className, ...props }: FieldGroupProps): JSX.Element;
-type FieldProps = ComponentProps<'div'> & VariantProps<typeof fieldVariants>;
+type FieldProps = ComponentProps<"div"> & VariantProps<typeof fieldVariants>;
 declare function Field({ className, orientation, ...props }: FieldProps): JSX.Element;
-type FieldContentProps = ComponentProps<'div'>;
+type FieldContentProps = ComponentProps<"div">;
 declare function FieldContent({ className, ...props }: FieldContentProps): JSX.Element;
 type FieldLabelProps = ComponentProps<typeof Label>;
 declare function FieldLabel({ className, ...props }: FieldLabelProps): JSX.Element;
-type FieldTitleProps = ComponentProps<'div'>;
+type FieldTitleProps = ComponentProps<"div">;
 declare function FieldTitle({ className, ...props }: FieldTitleProps): JSX.Element;
-type FieldDescriptionProps = ComponentProps<'p'>;
+type FieldDescriptionProps = ComponentProps<"p">;
 declare function FieldDescription({ className, ...props }: FieldDescriptionProps): JSX.Element;
-type FieldSeparatorProps = ComponentProps<'div'> & {
-    children?: ComponentProps<'span'>['children'];
+type FieldSeparatorProps = ComponentProps<"div"> & {
+    children?: ComponentProps<"span">["children"];
 };
 declare function FieldSeparator({ children, className, ...props }: FieldSeparatorProps): JSX.Element;
 interface FieldErrorMessage {
     message?: string;
 }
-interface FieldErrorProps extends ComponentProps<'div'> {
+interface FieldErrorProps extends ComponentProps<"div"> {
     errors?: (FieldErrorMessage | undefined)[];
 }
 declare function FieldError({ children, className, errors, ...props }: FieldErrorProps): JSX.Element | null;

package/dist/components/field.js

@@ -5,28 +5,28 @@ import { useMemo } from "react";
 import { Label } from "./label.js";
 import { Separator } from "./separator.js";
 const fieldVariants = tv({
-    base: 'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',
+    base: "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
     defaultVariants: {
-        orientation: 'vertical'
+        orientation: "vertical"
     },
     variants: {
         orientation: {
-            horizontal: cn('flex-row items-center', '[&>[data-slot=field-label]]:flex-auto', 'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'),
-            responsive: cn('flex-col [&>*]:w-full [&>.sr-only]:w-auto', '@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto', '@md/field-group:[&>[data-slot=field-label]]:flex-auto', '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'),
-            vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto'
+            horizontal: cn("flex-row items-center", "[&>[data-slot=field-label]]:flex-auto", "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"),
+            responsive: cn("flex-col [&>*]:w-full [&>.sr-only]:w-auto", "@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto", "@md/field-group:[&>[data-slot=field-label]]:flex-auto", "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"),
+            vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto"
         }
     }
 });
 function FieldSet({ className, ...props }) {
     return /*#__PURE__*/ jsx("fieldset", {
-        className: cn('flex flex-col gap-6', 'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3', className),
+        className: cn("flex flex-col gap-6", "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className),
         "data-slot": "field-set",
         ...props
     });
 }
-function FieldLegend({ className, variant = 'legend', ...props }) {
+function FieldLegend({ className, variant = "legend", ...props }) {
     return /*#__PURE__*/ jsx("legend", {
-        className: cn('mb-3 text-base font-medium', 'data-[variant=label]:text-sm', className),
+        className: cn("mb-3 text-base font-medium", "data-[variant=label]:text-sm", className),
         "data-slot": "field-legend",
         "data-variant": variant,
         ...props
@@ -34,12 +34,12 @@ function FieldLegend({ className, variant = 'legend', ...props }) {
 }
 function FieldGroup({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4', className),
+        className: cn("group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4", className),
         "data-slot": "field-group",
         ...props
     });
 }
-function Field({ className, orientation = 'vertical', ...props }) {
+function Field({ className, orientation = "vertical", ...props }) {
     return /*#__PURE__*/ jsx("div", {
         className: fieldVariants({
             className,
@@ -53,28 +53,28 @@ function Field({ className, orientation = 'vertical', ...props }) {
 }
 function FieldContent({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', className),
+        className: cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className),
         "data-slot": "field-content",
         ...props
     });
 }
 function FieldLabel({ className, ...props }) {
     return /*#__PURE__*/ jsx(Label, {
-        className: cn('group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50', 'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4', 'has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10', className),
+        className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4", "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10", className),
         "data-slot": "field-label",
         ...props
     });
 }
 function FieldTitle({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50', className),
+        className: cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50", className),
         "data-slot": "field-label",
         ...props
     });
 }
 function FieldDescription({ className, ...props }) {
     return /*#__PURE__*/ jsx("p", {
-        className: cn('text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance', 'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5', '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4', className),
+        className: cn("text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance", "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
         "data-slot": "field-description",
         ...props
     });
@@ -82,7 +82,7 @@ function FieldDescription({ className, ...props }) {
 function FieldSeparator({ children, className, ...props }) {
     const hasContent = Boolean(children);
     return /*#__PURE__*/ jsxs("div", {
-        className: cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className),
+        className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
         "data-content": hasContent,
         "data-slot": "field-separator",
         ...props,
@@ -91,7 +91,7 @@ function FieldSeparator({ children, className, ...props }) {
                 className: "absolute inset-0 top-1/2"
             }),
             hasContent ? /*#__PURE__*/ jsx("span", {
-                className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
+                className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
                 "data-slot": "field-separator-content",
                 children: children
             }) : null
@@ -120,7 +120,7 @@ function FieldError({ children, className, errors, ...props }) {
     const content = children ?? fallbackContent;
     if (null == content || false === content) return null;
     return /*#__PURE__*/ jsx("div", {
-        className: cn('text-destructive text-sm font-normal', className),
+        className: cn("text-sm font-normal text-destructive", className),
         "data-slot": "field-error",
         role: "alert",
         ...props,