@codefast/ui 0.3.10 → 0.3.11-canary.0

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

@@ -40,15 +40,15 @@ function RadioCards(props) {
 }
 function RadioCardsItem({ children, className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_label_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(react_radio_group_namespaceObject.Item, {
-                className: (0, tailwind_variants_namespaceObject.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: (0, tailwind_variants_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(react_radio_group_namespaceObject.Indicator, {
-                    className: "bg-background size-1 rounded-full",
+                    className: "size-1 rounded-full bg-background",
                     "data-slot": "radio-card-indicator"
                 })
             }),

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

@@ -33,18 +33,18 @@ const tailwind_variants_namespaceObject = require("@codefast/tailwind-variants")
 const react_radio_group_namespaceObject = require("@radix-ui/react-radio-group");
 function RadioGroup({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_radio_group_namespaceObject.Root, {
-        className: (0, tailwind_variants_namespaceObject.cn)('grid gap-2', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("grid gap-2", className),
         "data-slot": "radio-group",
         ...props
     });
 }
 function RadioGroupItem({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_radio_group_namespaceObject.Item, {
-        className: (0, tailwind_variants_namespaceObject.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: (0, tailwind_variants_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(react_radio_group_namespaceObject.Indicator, {
-            className: "bg-background size-1 rounded-full",
+            className: "size-1 rounded-full bg-background",
             "data-slot": "radio-group-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.cjs

@@ -32,7 +32,7 @@ const tailwind_variants_namespaceObject = require("@codefast/tailwind-variants")
 const primitive_namespaceObject = require("@radix-ui/primitive");
 function Radio({ className, onChange, onValueChange, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
-        className: (0, tailwind_variants_namespaceObject.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: (0, tailwind_variants_namespaceObject.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: (0, primitive_namespaceObject.composeEventHandlers)(onChange, (event)=>onValueChange?.(event.currentTarget.value)),

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

@@ -35,7 +35,7 @@ const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_resizable_panels_namespaceObject = require("react-resizable-panels");
 function ResizableGroup({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_resizable_panels_namespaceObject.Group, {
-        className: (0, tailwind_variants_namespaceObject.cn)('flex size-full', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("flex size-full", className),
         "data-slot": "resizable-group",
         ...props
     });
@@ -48,11 +48,11 @@ function ResizablePanel({ ...props }) {
 }
 function ResizableSeparator({ className, withHandle, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_resizable_panels_namespaceObject.Separator, {
-        className: (0, tailwind_variants_namespaceObject.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: (0, tailwind_variants_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.GripVerticalIcon, {
                 className: "size-2.5"
             })

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

@@ -34,57 +34,57 @@ const tailwind_variants_namespaceObject = require("@codefast/tailwind-variants")
 const react_context_namespaceObject = require("@radix-ui/react-context");
 const react_scroll_area_namespaceObject = require("@radix-ui/react-scroll-area");
 const scrollAreaScrollbarVariants = (0, tailwind_variants_namespaceObject.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] = (0, react_context_namespaceObject.createContextScope)(SCROLL_AREA_NAME);
 const [ScrollAreaContextProvider, useScrollAreaContext] = createScrollAreaContext(SCROLL_AREA_NAME);
 function ScrollArea({ __scopeScrollArea, children, className, size, ...props }) {
@@ -92,12 +92,12 @@ function ScrollArea({ __scopeScrollArea, children, className, size, ...props })
         scope: __scopeScrollArea,
         size: size,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_scroll_area_namespaceObject.Root, {
-            className: (0, tailwind_variants_namespaceObject.cn)('relative', className),
+            className: (0, tailwind_variants_namespaceObject.cn)("relative", className),
             "data-slot": "scroll-area",
             ...props,
             children: [
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_scroll_area_namespaceObject.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
                 }),
@@ -124,7 +124,7 @@ function ScrollAreaScrollbar({ __scopeScrollArea, className, orientation, ...pro
         orientation: orientation,
         ...props,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_scroll_area_namespaceObject.ScrollAreaThumb, {
-            className: "bg-border relative flex-1 rounded-full"
+            className: "relative flex-1 rounded-full bg-border"
         })
     });
 }

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

@@ -67,7 +67,7 @@ function SelectTrigger({ children, className, size, ...props }) {
                 className
             ],
             size,
-            variant: 'outline'
+            variant: "outline"
         }),
         "data-size": size,
         "data-slot": "select-trigger",
@@ -84,7 +84,7 @@ function SelectTrigger({ children, className, size, ...props }) {
 }
 function SelectScrollUpButton({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_select_namespaceObject.ScrollUpButton, {
-        className: (0, tailwind_variants_namespaceObject.cn)('text-muted-foreground flex items-center justify-center py-1', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("flex items-center justify-center py-1 text-muted-foreground", className),
         "data-slot": "select-scroll-up-button",
         ...props,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronUpIcon, {
@@ -94,7 +94,7 @@ function SelectScrollUpButton({ className, ...props }) {
 }
 function SelectScrollDownButton({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_select_namespaceObject.ScrollDownButton, {
-        className: (0, tailwind_variants_namespaceObject.cn)('text-muted-foreground flex items-center justify-center py-1', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("flex items-center justify-center py-1 text-muted-foreground", className),
         "data-slot": "select-scroll-down-button",
         ...props,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDownIcon, {
@@ -102,17 +102,17 @@ function SelectScrollDownButton({ className, ...props }) {
         })
     });
 }
-function SelectContent({ children, className, position = 'popper', ...props }) {
+function SelectContent({ children, className, position = "popper", ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_select_namespaceObject.Portal, {
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_select_namespaceObject.Content, {
-            className: (0, tailwind_variants_namespaceObject.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: (0, tailwind_variants_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(SelectScrollUpButton, {}),
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_select_namespaceObject.Viewport, {
-                    className: (0, tailwind_variants_namespaceObject.cn)('p-1', 'popper' === position && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'),
+                    className: (0, tailwind_variants_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(SelectScrollDownButton, {})
@@ -122,14 +122,14 @@ function SelectContent({ children, className, position = 'popper', ...props }) {
 }
 function SelectLabel({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_select_namespaceObject.Label, {
-        className: (0, tailwind_variants_namespaceObject.cn)('flex items-center gap-x-2 px-2 py-1.5 text-sm font-semibold', className),
+        className: (0, tailwind_variants_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_select_namespaceObject.Item, {
-        className: (0, tailwind_variants_namespaceObject.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: (0, tailwind_variants_namespaceObject.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: [
@@ -149,7 +149,7 @@ function SelectItem({ children, className, ...props }) {
 }
 function SelectSeparator({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_select_namespaceObject.Separator, {
-        className: (0, tailwind_variants_namespaceObject.cn)('bg-border mx-2 my-1 h-px', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("mx-2 my-1 h-px bg-border", className),
         "data-slot": "select-separator",
         ...props
     });

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>;