@codefast/ui 0.3.10 → 0.3.11-canary.1

package/dist/components/progress-circle.js

@@ -6,33 +6,33 @@ import { useAnimatedValue } from "../hooks/use-animated-value.js";
 import { Indicator, Provider, Root, SVG, Track, Value } from "../primitives/progress-circle.js";
 const progressCircleVariants = tv({
     defaultVariants: {
-        size: 'md',
-        thickness: 'regular',
-        variant: 'default'
+        size: "md",
+        thickness: "regular",
+        variant: "default"
     },
     slots: {
-        indicator: 'origin-center',
-        label: 'absolute inset-0 flex items-center justify-center text-xs font-medium',
-        root: 'relative inline-flex items-center justify-center',
-        svg: 'size-full',
-        track: 'origin-center'
+        indicator: "origin-center",
+        label: "absolute inset-0 flex items-center justify-center text-xs font-medium",
+        root: "relative inline-flex items-center justify-center",
+        svg: "size-full",
+        track: "origin-center"
     },
     variants: {
         size: {
             sm: {
-                label: 'text-[0.625rem]'
+                label: "text-[0.625rem]"
             },
             md: {
-                label: 'text-xs'
+                label: "text-xs"
             },
             lg: {
-                label: 'text-sm'
+                label: "text-sm"
             },
             xl: {
-                label: 'text-base'
+                label: "text-base"
             },
-            '2xl': {
-                label: 'text-lg'
+            "2xl": {
+                label: "text-lg"
             }
         },
         thickness: {
@@ -42,17 +42,17 @@ const progressCircleVariants = tv({
         },
         variant: {
             default: {
-                indicator: 'text-primary',
-                track: 'text-primary/20'
+                indicator: "text-primary",
+                track: "text-primary/20"
             },
             destructive: {
-                indicator: 'text-destructive',
-                track: 'text-destructive/20'
+                indicator: "text-destructive",
+                track: "text-destructive/20"
             }
         }
     }
 });
-function ProgressCircle({ animate = true, animationDuration = 1000, className, classNames, customLabel, showValue = false, size, sizeInPixels, strokeWidth, thickness = 'regular', value = 0, variant = 'default', ...props }) {
+function ProgressCircle({ animate = true, animationDuration = 1000, className, classNames, customLabel, showValue = false, size, sizeInPixels, strokeWidth, thickness = "regular", value = 0, variant = "default", ...props }) {
     const displayValue = useAnimatedValue(value, animationDuration, animate);
     const actualSize = useMemo(()=>sizeInPixels ?? getActualSize(size), [
         sizeInPixels,
@@ -111,7 +111,7 @@ function ProgressCircle({ animate = true, animationDuration = 1000, className, c
                             }),
                             style: {
                                 transitionDuration: `${animationDuration.toString()}ms`,
-                                transitionProperty: 'stroke-dashoffset'
+                                transitionProperty: "stroke-dashoffset"
                             }
                         })
                     ]
@@ -126,10 +126,10 @@ function ProgressCircle({ animate = true, animationDuration = 1000, className, c
         })
     });
 }
-ProgressCircle.displayName = 'ProgressCircle';
+ProgressCircle.displayName = "ProgressCircle";
 const getActualSize = (size)=>{
     const sizeMap = {
-        '2xl': 128,
+        "2xl": 128,
         lg: 64,
         md: 48,
         sm: 32,

package/dist/components/progress.d.ts

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

package/dist/components/progress.js

@@ -4,11 +4,11 @@ import { cn } from "@codefast/tailwind-variants";
 import { Indicator, Root } from "@radix-ui/react-progress";
 function Progress({ className, value, ...props }) {
     return /*#__PURE__*/ jsx(Root, {
-        className: cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className),
+        className: cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className),
         "data-slot": "progress",
         ...props,
         children: /*#__PURE__*/ jsx(Indicator, {
-            className: "bg-primary size-full flex-1 transition-all",
+            className: "size-full flex-1 bg-primary transition-all",
             "data-slot": "progress-indicator",
             style: {
                 transform: `translateX(-${(100 - (value ?? 0)).toString()}%)`

package/dist/components/radio-cards.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps, JSX } from 'react';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import type { ComponentProps, JSX } from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 type RadioCardsProps = ComponentProps<typeof RadioGroupPrimitive.Root>;
 declare function RadioCards(props: RadioCardsProps): JSX.Element;
 type RadioCardsItemProps = ComponentProps<typeof RadioGroupPrimitive.Item>;

package/dist/components/radio-cards.js

@@ -11,15 +11,15 @@ function RadioCards(props) {
 }
 function RadioCardsItem({ children, className, ...props }) {
     return /*#__PURE__*/ jsxs(Label, {
-        className: "border-input hover:not-has-disabled:not-has-aria-checked:bg-secondary has-aria-checked:bg-primary/10 has-aria-checked:border-primary has-focus-visible:border-ring flex items-start gap-3 rounded-lg border p-3 transition has-disabled:opacity-50",
+        className: "flex items-start gap-3 rounded-lg border border-input p-3 transition hover:not-has-disabled:not-has-aria-checked:bg-secondary has-focus-visible:border-ring has-disabled:opacity-50 has-aria-checked:border-primary has-aria-checked:bg-primary/10",
         "data-slot": "radio-card",
         children: [
             /*#__PURE__*/ jsx(Item, {
-                className: cn('border-input text-primary-foreground focus-visible:not-aria-checked:border-ring focus-visible:ring-ring/50 focus-visible:aria-checked:ring-primary/20 dark:focus-visible:aria-checked:ring-primary/40 aria-checked:border-primary aria-checked:bg-primary dark:bg-input/30 peer flex size-4 shrink-0 items-center justify-center rounded-full border shadow-xs outline-hidden transition focus-visible:ring-3', className),
+                className: cn("peer flex size-4 shrink-0 items-center justify-center rounded-full border border-input text-primary-foreground shadow-xs outline-hidden transition focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:not-aria-checked:border-ring aria-checked:border-primary aria-checked:bg-primary focus-visible:aria-checked:ring-primary/20 dark:bg-input/30 dark:focus-visible:aria-checked:ring-primary/40", className),
                 "data-slot": "radio-card-item",
                 ...props,
                 children: /*#__PURE__*/ jsx(Indicator, {
-                    className: "bg-background size-1 rounded-full",
+                    className: "size-1 rounded-full bg-background",
                     "data-slot": "radio-card-indicator"
                 })
             }),

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

@@ -1,5 +1,5 @@
-import type { ComponentProps, JSX } from 'react';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import type { ComponentProps, JSX } from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 type RadioGroupProps = ComponentProps<typeof RadioGroupPrimitive.Root>;
 declare function RadioGroup({ className, ...props }: RadioGroupProps): JSX.Element;
 type RadioGroupItemProps = ComponentProps<typeof RadioGroupPrimitive.Item>;

package/dist/components/radio-group.js

@@ -4,18 +4,18 @@ import { cn } from "@codefast/tailwind-variants";
 import { Indicator, Item, Root } from "@radix-ui/react-radio-group";
 function RadioGroup({ className, ...props }) {
     return /*#__PURE__*/ jsx(Root, {
-        className: cn('grid gap-2', className),
+        className: cn("grid gap-2", className),
         "data-slot": "radio-group",
         ...props
     });
 }
 function RadioGroupItem({ className, ...props }) {
     return /*#__PURE__*/ jsx(Item, {
-        className: cn('border-input hover:not-disabled:not-aria-checked:border-ring/60 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:aria-checked:ring-primary/20 dark:focus-visible:aria-checked:ring-primary/40 aria-checked:border-primary aria-checked:bg-primary aria-checked:aria-invalid:bg-destructive aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 hover:not-disabled:not-aria-checked:aria-invalid:border-destructive/60 dark:bg-input/30 peer inline-flex size-4 shrink-0 items-center justify-center rounded-full border shadow-xs outline-hidden transition focus-visible:ring-3 disabled:opacity-50', className),
+        className: cn("peer inline-flex size-4 shrink-0 items-center justify-center rounded-full border border-input shadow-xs outline-hidden transition hover:not-disabled:not-aria-checked:border-ring/60 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:opacity-50 aria-checked:border-primary aria-checked:bg-primary focus-visible:aria-checked:ring-primary/20 aria-invalid:border-destructive aria-invalid:ring-destructive/20 hover:not-disabled:not-aria-checked:aria-invalid:border-destructive/60 aria-checked:aria-invalid:bg-destructive dark:bg-input/30 dark:focus-visible:aria-checked:ring-primary/40 dark:aria-invalid:ring-destructive/40", className),
         "data-slot": "radio-group-item",
         ...props,
         children: /*#__PURE__*/ jsx(Indicator, {
-            className: "bg-background size-1 rounded-full",
+            className: "size-1 rounded-full bg-background",
             "data-slot": "radio-group-indicator"
         })
     });

package/dist/components/radio.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps, JSX } from 'react';
-interface RadioProps extends Omit<ComponentProps<'input'>, 'type'> {
+import type { ComponentProps, JSX } from "react";
+interface RadioProps extends Omit<ComponentProps<"input">, "type"> {
     onValueChange?: (value: string) => void;
 }
 declare function Radio({ className, onChange, onValueChange, ...props }: RadioProps): JSX.Element;

package/dist/components/radio.js

@@ -4,7 +4,7 @@ import { cn } from "@codefast/tailwind-variants";
 import { composeEventHandlers } from "@radix-ui/primitive";
 function Radio({ className, onChange, onValueChange, ...props }) {
     return /*#__PURE__*/ jsx("input", {
-        className: cn('border-input hover:not-disabled:not-checked:border-ring/60 focus-visible:not-checked:border-ring focus-visible:ring-ring/50 focus-visible:checked:ring-primary/20 dark:focus-visible:checked:ring-primary/40 checked:border-primary checked:bg-primary checked:aria-invalid:bg-destructive aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 hover:not-disabled:not-checked:aria-invalid:border-destructive/60 after:bg-background dark:not-checked:after:bg-input/30 peer inline-flex size-4 shrink-0 appearance-none items-center justify-center rounded-full border shadow-xs outline-hidden after:size-full after:rounded-full after:transition-[width,height] checked:after:size-1 focus-visible:ring-3 disabled:opacity-50', className),
+        className: cn("peer inline-flex size-4 shrink-0 appearance-none items-center justify-center rounded-full border border-input shadow-xs outline-hidden after:size-full after:rounded-full after:bg-background after:transition-[width,height] checked:border-primary checked:bg-primary checked:after:size-1 hover:not-disabled:not-checked:border-ring/60 focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:not-checked:border-ring focus-visible:checked:ring-primary/20 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 checked:aria-invalid:bg-destructive hover:not-disabled:not-checked:aria-invalid:border-destructive/60 dark:not-checked:after:bg-input/30 dark:focus-visible:checked:ring-primary/40 dark:aria-invalid:ring-destructive/40", className),
         "data-slot": "radio",
         type: "radio",
         onChange: composeEventHandlers(onChange, (event)=>onValueChange?.(event.currentTarget.value)),

package/dist/components/resizable.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps, JSX } from 'react';
-import * as ResizablePrimitive from 'react-resizable-panels';
+import type { ComponentProps, JSX } from "react";
+import * as ResizablePrimitive from "react-resizable-panels";
 type ResizableGroupProps = ComponentProps<typeof ResizablePrimitive.Group>;
 declare function ResizableGroup({ className, ...props }: ResizableGroupProps): JSX.Element;
 type ResizablePanelProps = ComponentProps<typeof ResizablePrimitive.Panel>;

package/dist/components/resizable.js

@@ -5,7 +5,7 @@ import { GripVerticalIcon } from "lucide-react";
 import { Group, Panel, Separator } from "react-resizable-panels";
 function ResizableGroup({ className, ...props }) {
     return /*#__PURE__*/ jsx(Group, {
-        className: cn('flex size-full', className),
+        className: cn("flex size-full", className),
         "data-slot": "resizable-group",
         ...props
     });
@@ -18,11 +18,11 @@ function ResizablePanel({ ...props }) {
 }
 function ResizableSeparator({ className, withHandle, ...props }) {
     return /*#__PURE__*/ jsx(Separator, {
-        className: cn('bg-border focus-visible:bg-ring focus-visible:ring-ring/50 flex items-center justify-center outline-hidden focus-visible:ring-3', 'aria-[orientation=vertical]:w-px', 'aria-[orientation=horizontal]:h-px', className),
+        className: cn("flex items-center justify-center bg-border outline-hidden focus-visible:bg-ring focus-visible:ring-3 focus-visible:ring-ring/50", "aria-[orientation=vertical]:w-px", "aria-[orientation=horizontal]:h-px", className),
         "data-slot": "resizable-separator",
         ...props,
         children: withHandle ? /*#__PURE__*/ jsx("div", {
-            className: "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border",
+            className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border",
             children: /*#__PURE__*/ jsx(GripVerticalIcon, {
                 className: "size-2.5"
             })

package/dist/components/scroll-area.d.ts

@@ -1,7 +1,7 @@
-import type { VariantProps } from '@codefast/tailwind-variants';
-import type { Scope } from '@radix-ui/react-context';
-import type { ComponentProps, JSX } from 'react';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import type { VariantProps } from "@codefast/tailwind-variants";
+import type { Scope } from "@radix-ui/react-context";
+import type { ComponentProps, JSX } from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 declare const scrollAreaScrollbarVariants: import("@codefast/tailwind-variants").VariantFunctionType<{
     orientation: {
         horizontal: string;
@@ -17,7 +17,7 @@ declare const scrollAreaScrollbarVariants: import("@codefast/tailwind-variants")
 type ScopedProps<P> = P & {
     __scopeScrollArea?: Scope;
 };
-type ScrollAreaContextValue = Pick<VariantProps<typeof scrollAreaScrollbarVariants>, 'size'>;
+type ScrollAreaContextValue = Pick<VariantProps<typeof scrollAreaScrollbarVariants>, "size">;
 type ScrollAreaProps = ScopedProps<ComponentProps<typeof ScrollAreaPrimitive.Root> & ScrollAreaContextValue>;
 declare function ScrollArea({ __scopeScrollArea, children, className, size, ...props }: ScrollAreaProps): JSX.Element;
 type ScrollAreaScrollbarProps = ScopedProps<ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>>;

package/dist/components/scroll-area.js

@@ -4,57 +4,57 @@ import { cn, tv } from "@codefast/tailwind-variants";
 import { createContextScope } from "@radix-ui/react-context";
 import { Corner, Root, ScrollAreaThumb, Scrollbar, Viewport } from "@radix-ui/react-scroll-area";
 const scrollAreaScrollbarVariants = tv({
-    base: 'flex touch-none select-none p-px transition-colors',
+    base: "flex touch-none p-px transition-colors select-none",
     compoundVariants: [
         {
-            className: 'w-1.5',
-            orientation: 'vertical',
-            size: 'sm'
+            className: "w-1.5",
+            orientation: "vertical",
+            size: "sm"
         },
         {
-            className: 'w-2',
-            orientation: 'vertical',
-            size: 'md'
+            className: "w-2",
+            orientation: "vertical",
+            size: "md"
         },
         {
-            className: 'w-2.5',
-            orientation: 'vertical',
-            size: 'lg'
+            className: "w-2.5",
+            orientation: "vertical",
+            size: "lg"
         },
         {
-            className: 'h-1.5',
-            orientation: 'horizontal',
-            size: 'sm'
+            className: "h-1.5",
+            orientation: "horizontal",
+            size: "sm"
         },
         {
-            className: 'h-2',
-            orientation: 'horizontal',
-            size: 'md'
+            className: "h-2",
+            orientation: "horizontal",
+            size: "md"
         },
         {
-            className: 'h-2.5',
-            orientation: 'horizontal',
-            size: 'lg'
+            className: "h-2.5",
+            orientation: "horizontal",
+            size: "lg"
         }
     ],
     defaultVariants: {
-        orientation: 'vertical',
-        size: 'md'
+        orientation: "vertical",
+        size: "md"
     },
     variants: {
         orientation: {
-            horizontal: 'w-full flex-col border-t border-t-transparent',
-            vertical: 'h-full flex-row border-l border-l-transparent'
+            horizontal: "w-full flex-col border-t border-t-transparent",
+            vertical: "h-full flex-row border-l border-l-transparent"
         },
         size: {
-            none: '',
-            sm: '',
-            md: '',
-            lg: ''
+            none: "",
+            sm: "",
+            md: "",
+            lg: ""
         }
     }
 });
-const SCROLL_AREA_NAME = 'ScrollArea';
+const SCROLL_AREA_NAME = "ScrollArea";
 const [createScrollAreaContext] = createContextScope(SCROLL_AREA_NAME);
 const [ScrollAreaContextProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME);
 function ScrollArea({ __scopeScrollArea, children, className, size, ...props }) {
@@ -62,12 +62,12 @@ function ScrollArea({ __scopeScrollArea, children, className, size, ...props })
         scope: __scopeScrollArea,
         size: size,
         children: /*#__PURE__*/ jsxs(Root, {
-            className: cn('relative', className),
+            className: cn("relative", className),
             "data-slot": "scroll-area",
             ...props,
             children: [
                 /*#__PURE__*/ jsx(Viewport, {
-                    className: "outline-ring ring-ring/50 size-full rounded-[inherit] transition focus-visible:ring-4 focus-visible:outline-1",
+                    className: "size-full rounded-[inherit] ring-ring/50 outline-ring transition focus-visible:ring-4 focus-visible:outline-1",
                     "data-slot": "scroll-area-viewport",
                     children: children
                 }),
@@ -94,7 +94,7 @@ function ScrollAreaScrollbar({ __scopeScrollArea, className, orientation, ...pro
         orientation: orientation,
         ...props,
         children: /*#__PURE__*/ jsx(ScrollAreaThumb, {
-            className: "bg-border relative flex-1 rounded-full"
+            className: "relative flex-1 rounded-full bg-border"
         })
     });
 }

package/dist/components/select.d.ts

@@ -1,7 +1,7 @@
-import type { VariantProps } from '@codefast/tailwind-variants';
-import type { ComponentProps, JSX } from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { buttonVariants } from './button';
+import type { VariantProps } from "@codefast/tailwind-variants";
+import type { ComponentProps, JSX } from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { buttonVariants } from "./button";
 type SelectProps = ComponentProps<typeof SelectPrimitive.Root>;
 declare function Select({ ...props }: SelectProps): JSX.Element;
 type SelectGroupProps = ComponentProps<typeof SelectPrimitive.Group>;
@@ -9,7 +9,7 @@ declare function SelectGroup({ ...props }: SelectGroupProps): JSX.Element;
 type SelectValueProps = ComponentProps<typeof SelectPrimitive.Value>;
 declare function SelectValue({ ...props }: SelectValueProps): JSX.Element;
 interface SelectTriggerProps extends ComponentProps<typeof SelectPrimitive.Trigger> {
-    size?: VariantProps<typeof buttonVariants>['size'];
+    size?: VariantProps<typeof buttonVariants>["size"];
 }
 declare function SelectTrigger({ children, className, size, ...props }: SelectTriggerProps): JSX.Element;
 type SelectScrollUpButtonProps = ComponentProps<typeof SelectPrimitive.ScrollUpButton>;

package/dist/components/select.js

@@ -30,7 +30,7 @@ function SelectTrigger({ children, className, size, ...props }) {
                 className
             ],
             size,
-            variant: 'outline'
+            variant: "outline"
         }),
         "data-size": size,
         "data-slot": "select-trigger",
@@ -47,7 +47,7 @@ function SelectTrigger({ children, className, size, ...props }) {
 }
 function SelectScrollUpButton({ className, ...props }) {
     return /*#__PURE__*/ jsx(ScrollUpButton, {
-        className: cn('text-muted-foreground flex items-center justify-center py-1', className),
+        className: cn("flex items-center justify-center py-1 text-muted-foreground", className),
         "data-slot": "select-scroll-up-button",
         ...props,
         children: /*#__PURE__*/ jsx(ChevronUpIcon, {
@@ -57,7 +57,7 @@ function SelectScrollUpButton({ className, ...props }) {
 }
 function SelectScrollDownButton({ className, ...props }) {
     return /*#__PURE__*/ jsx(ScrollDownButton, {
-        className: cn('text-muted-foreground flex items-center justify-center py-1', className),
+        className: cn("flex items-center justify-center py-1 text-muted-foreground", className),
         "data-slot": "select-scroll-down-button",
         ...props,
         children: /*#__PURE__*/ jsx(ChevronDownIcon, {
@@ -65,17 +65,17 @@ function SelectScrollDownButton({ className, ...props }) {
         })
     });
 }
-function SelectContent({ children, className, position = 'popper', ...props }) {
+function SelectContent({ children, className, position = "popper", ...props }) {
     return /*#__PURE__*/ jsx(Portal, {
         children: /*#__PURE__*/ jsxs(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 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-hidden rounded-lg border shadow-lg', 'popper' === position && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className),
+            className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-hidden rounded-lg border bg-popover 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", "popper" === position && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
             "data-slot": "select-content",
             position: position,
             ...props,
             children: [
                 /*#__PURE__*/ jsx(SelectScrollUpButton, {}),
                 /*#__PURE__*/ jsx(Viewport, {
-                    className: cn('p-1', 'popper' === position && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'),
+                    className: cn("p-1", "popper" === position && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"),
                     children: children
                 }),
                 /*#__PURE__*/ jsx(SelectScrollDownButton, {})
@@ -85,14 +85,14 @@ function SelectContent({ children, className, position = 'popper', ...props }) {
 }
 function SelectLabel({ className, ...props }) {
     return /*#__PURE__*/ jsx(Label, {
-        className: cn('flex items-center gap-x-2 px-2 py-1.5 text-sm font-semibold', className),
+        className: cn("flex items-center gap-x-2 px-2 py-1.5 text-sm font-semibold", className),
         "data-slot": "select-label",
         ...props
     });
 }
 function SelectItem({ children, className, ...props }) {
     return /*#__PURE__*/ jsxs(Item, {
-        className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:[&_svg:not([class*='text-'])]:text-destructive/80 [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none aria-disabled:opacity-50 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+        className: cn("relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 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 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:[&_svg:not([class*='text-'])]:text-destructive/80 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
         "data-slot": "select-item",
         ...props,
         children: [
@@ -112,7 +112,7 @@ function SelectItem({ children, className, ...props }) {
 }
 function SelectSeparator({ 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": "select-separator",
         ...props
     });

package/dist/components/separator.d.ts

@@ -1,6 +1,6 @@
-import type { VariantProps } from '@codefast/tailwind-variants';
-import type { ComponentProps, JSX } from 'react';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import type { VariantProps } from "@codefast/tailwind-variants";
+import type { ComponentProps, JSX } from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 declare const separatorVariants: import("@codefast/tailwind-variants").VariantFunctionType<{
     align: {
         center: string;
@@ -12,10 +12,10 @@ declare const separatorVariants: import("@codefast/tailwind-variants").VariantFu
         vertical: string;
     };
 }, Record<string, never>>;
-interface SeparatorProps extends ComponentProps<typeof SeparatorPrimitive.Root>, Omit<VariantProps<typeof separatorVariants>, 'orientation'> {
+interface SeparatorProps extends ComponentProps<typeof SeparatorPrimitive.Root>, Omit<VariantProps<typeof separatorVariants>, "orientation"> {
 }
 declare function Separator({ align, className, decorative, orientation, ...props }: SeparatorProps): JSX.Element;
-type SeparatorItemProps = ComponentProps<'div'>;
+type SeparatorItemProps = ComponentProps<"div">;
 declare function SeparatorItem({ className, ...props }: SeparatorItemProps): JSX.Element;
 export { separatorVariants };
 export { Separator, SeparatorItem };

package/dist/components/separator.js

@@ -3,20 +3,20 @@ import { jsx } from "react/jsx-runtime";
 import { cn, tv } from "@codefast/tailwind-variants";
 import { Root } from "@radix-ui/react-separator";
 const separatorVariants = tv({
-    base: 'bg-border relative flex shrink-0 items-center',
+    base: "relative flex shrink-0 items-center bg-border",
     defaultVariants: {
-        align: 'center',
-        orientation: 'horizontal'
+        align: "center",
+        orientation: "horizontal"
     },
     variants: {
         align: {
-            center: 'justify-center',
-            end: 'justify-end',
-            start: 'justify-start'
+            center: "justify-center",
+            end: "justify-end",
+            start: "justify-start"
         },
         orientation: {
-            horizontal: 'h-px w-full',
-            vertical: 'h-full w-px flex-col'
+            horizontal: "h-px w-full",
+            vertical: "h-full w-px flex-col"
         }
     }
 });
@@ -35,7 +35,7 @@ function Separator({ align, className, decorative = true, orientation, ...props
 }
 function SeparatorItem({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('bg-background text-muted-foreground absolute mx-2 px-2 text-sm', className),
+        className: cn("absolute mx-2 bg-background px-2 text-sm text-muted-foreground", className),
         "data-slot": "separator-item",
         ...props
     });

package/dist/components/sheet.d.ts

@@ -1,7 +1,7 @@
-import type { VariantProps } from '@codefast/tailwind-variants';
-import type { ComponentProps, JSX } from 'react';
-import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { buttonVariants } from './button';
+import type { VariantProps } from "@codefast/tailwind-variants";
+import type { ComponentProps, JSX } from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { buttonVariants } from "./button";
 declare const sheetContentVariants: import("@codefast/tailwind-variants").VariantFunctionType<{
     side: {
         bottom: string;
@@ -22,19 +22,19 @@ interface SheetContentProps extends ComponentProps<typeof SheetPrimitive.Content
     };
 }
 declare function SheetContent({ children, className, classNames, side, ...props }: SheetContentProps): JSX.Element;
-type SheetHeaderProps = ComponentProps<'div'>;
+type SheetHeaderProps = ComponentProps<"div">;
 declare function SheetHeader({ className, ...props }: SheetHeaderProps): JSX.Element;
-type SheetBodyProps = ComponentProps<'div'>;
+type SheetBodyProps = ComponentProps<"div">;
 declare function SheetBody({ className, ...props }: SheetBodyProps): JSX.Element;
-type SheetFooterProps = ComponentProps<'div'>;
+type SheetFooterProps = ComponentProps<"div">;
 declare function SheetFooter({ className, ...props }: SheetFooterProps): JSX.Element;
 type SheetTitleProps = ComponentProps<typeof SheetPrimitive.Title>;
 declare function SheetTitle({ className, ...props }: SheetTitleProps): JSX.Element;
 type SheetDescriptionProps = ComponentProps<typeof SheetPrimitive.Description>;
 declare function SheetDescription({ className, ...props }: SheetDescriptionProps): JSX.Element;
 interface SheetCloseProps extends ComponentProps<typeof SheetPrimitive.Close> {
-    size?: VariantProps<typeof buttonVariants>['size'];
-    variant?: VariantProps<typeof buttonVariants>['variant'];
+    size?: VariantProps<typeof buttonVariants>["size"];
+    variant?: VariantProps<typeof buttonVariants>["variant"];
 }
 declare function SheetClose({ className, size, variant, ...props }: SheetCloseProps): JSX.Element;
 export { sheetContentVariants };