@codefast/ui 0.3.10 → 0.3.11-canary.1

package/dist/components/form.d.ts

@@ -1,9 +1,9 @@
-import type { Scope } from '@radix-ui/react-context';
-import type * as LabelPrimitive from '@radix-ui/react-label';
-import type { ComponentProps, JSX, ReactNode } from 'react';
-import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
-import { Slot } from '@radix-ui/react-slot';
-import { FormProvider } from 'react-hook-form';
+import type { Scope } from "@radix-ui/react-context";
+import type * as LabelPrimitive from "@radix-ui/react-label";
+import type { ComponentProps, JSX, ReactNode } from "react";
+import type { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
+import { Slot } from "@radix-ui/react-slot";
+import { FormProvider } from "react-hook-form";
 type FormProps = ComponentProps<typeof FormProvider>;
 declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
 type ScopedProps<P> = P & {
@@ -12,15 +12,15 @@ type ScopedProps<P> = P & {
 declare const createFormFieldScope: import("@radix-ui/react-context").CreateScope;
 type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = ControllerProps<TFieldValues, TName>;
 declare function FormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(formFieldProps: ScopedProps<FormFieldProps<TFieldValues, TName>>): JSX.Element;
-type FormItemProps = ComponentProps<'div'>;
+type FormItemProps = ComponentProps<"div">;
 declare function FormItem({ __scopeFormField, className, ...props }: ScopedProps<FormItemProps>): JSX.Element;
 type FormLabelProps = ComponentProps<typeof LabelPrimitive.Root>;
 declare function FormLabel({ __scopeFormField, ...props }: ScopedProps<FormLabelProps>): JSX.Element;
 type FormControlProps = ComponentProps<typeof Slot>;
 declare function FormControl({ __scopeFormField, ...props }: ScopedProps<FormControlProps>): JSX.Element;
-type FormDescriptionProps = ComponentProps<'p'>;
+type FormDescriptionProps = ComponentProps<"p">;
 declare function FormDescription({ __scopeFormField, className, ...props }: ScopedProps<FormDescriptionProps>): JSX.Element;
-type FormMessageProps = ComponentProps<'p'>;
+type FormMessageProps = ComponentProps<"p">;
 declare function FormMessage({ __scopeFormField, children, className, ...props }: ScopedProps<FormMessageProps>): ReactNode;
 export type { FormControlProps, FormDescriptionProps, FormFieldProps, FormItemProps, FormLabelProps, FormMessageProps, FormProps, };
-export { createFormFieldScope, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage };
+export { createFormFieldScope, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, };

package/dist/components/form.js

@@ -7,7 +7,7 @@ import { useId } from "react";
 import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
 import { Label } from "./label.js";
 const Form = FormProvider;
-const FORM_FIELD_NAME = 'FormField';
+const FORM_FIELD_NAME = "FormField";
 const [createFormFieldContext, createFormFieldScope] = createContextScope(FORM_FIELD_NAME);
 const [FormFieldContextProvider, useFormFieldContext] = createFormFieldContext(FORM_FIELD_NAME);
 function useFormItem(consumerName, scope) {
@@ -37,7 +37,7 @@ function FormField(formFieldProps) {
         })
     });
 }
-const FORM_ITEM_NAME = 'FormItem';
+const FORM_ITEM_NAME = "FormItem";
 const [FormItemContextProvider, useFormItemContext] = createFormFieldContext(FORM_ITEM_NAME);
 function FormItem({ __scopeFormField, className, ...props }) {
     const id = useId();
@@ -45,13 +45,13 @@ function FormItem({ __scopeFormField, className, ...props }) {
         id: id,
         scope: __scopeFormField,
         children: /*#__PURE__*/ jsx("div", {
-            className: cn('grid gap-2', className),
+            className: cn("grid gap-2", className),
             "data-slot": "form-item",
             ...props
         })
     });
 }
-const FORM_LABEL_NAME = 'FormLabel';
+const FORM_LABEL_NAME = "FormLabel";
 function FormLabel({ __scopeFormField, ...props }) {
     const { error, formItemId } = useFormItem(FORM_LABEL_NAME, __scopeFormField);
     return /*#__PURE__*/ jsx(Label, {
@@ -61,7 +61,7 @@ function FormLabel({ __scopeFormField, ...props }) {
         ...props
     });
 }
-const FORM_CONTROL_NAME = 'FormControl';
+const FORM_CONTROL_NAME = "FormControl";
 function FormControl({ __scopeFormField, ...props }) {
     const { error, formDescriptionId, formItemId, formMessageId } = useFormItem(FORM_CONTROL_NAME, __scopeFormField);
     return /*#__PURE__*/ jsx(Slot, {
@@ -75,19 +75,19 @@ function FormControl({ __scopeFormField, ...props }) {
 function FormDescription({ __scopeFormField, className, ...props }) {
     const { formDescriptionId } = useFormItem(FORM_MESSAGE_NAME, __scopeFormField);
     return /*#__PURE__*/ jsx("p", {
-        className: cn('text-muted-foreground text-xs', className),
+        className: cn("text-xs text-muted-foreground", className),
         "data-slot": "form-description",
         id: formDescriptionId,
         ...props
     });
 }
-const FORM_MESSAGE_NAME = 'FormMessage';
+const FORM_MESSAGE_NAME = "FormMessage";
 function FormMessage({ __scopeFormField, children, className, ...props }) {
     const { error, formMessageId } = useFormItem(FORM_MESSAGE_NAME, __scopeFormField);
     const body = error?.message ?? children;
     if (!body) return null;
     return /*#__PURE__*/ jsx("p", {
-        className: cn('text-xs', error?.message ? 'text-destructive font-medium' : 'text-muted-foreground', className),
+        className: cn("text-xs", error?.message ? "font-medium text-destructive" : "text-muted-foreground", className),
         "data-slot": "form-message",
         id: formMessageId,
         ...props,

package/dist/components/hover-card.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps, JSX } from 'react';
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import type { ComponentProps, JSX } from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 type HoverCardProps = ComponentProps<typeof HoverCardPrimitive.Root>;
 declare function HoverCard({ ...props }: HoverCardProps): JSX.Element;
 type HoverCardTriggerProps = ComponentProps<typeof HoverCardPrimitive.Trigger>;

package/dist/components/hover-card.js

@@ -14,11 +14,11 @@ function HoverCardTrigger({ ...props }) {
         ...props
     });
 }
-function HoverCardContent({ align = 'center', className, sideOffset = 4, ...props }) {
+function HoverCardContent({ align = "center", className, sideOffset = 4, ...props }) {
     return /*#__PURE__*/ jsx(Portal, {
         children: /*#__PURE__*/ jsx(Content, {
             align: align,
-            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=left]:slide-in-from-right-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=right]:slide-in-from-left-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=left]:slide-out-to-right-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 ease-ui z-50 min-w-32 origin-(--radix-hover-card-content-transform-origin) rounded-lg border p-4 shadow-lg', className),
+            className: cn("z-50 min-w-32 origin-(--radix-hover-card-content-transform-origin) rounded-lg border bg-popover p-4 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": "hover-card-content",
             sideOffset: sideOffset,
             ...props
@@ -27,7 +27,7 @@ function HoverCardContent({ align = 'center', className, sideOffset = 4, ...prop
 }
 function HoverCardArrow({ className, ...props }) {
     return /*#__PURE__*/ jsx(Arrow, {
-        className: cn('fill-popover', className),
+        className: cn("fill-popover", className),
         "data-slot": "hover-card-arrow",
         ...props
     });

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

@@ -1,32 +1,32 @@
-import type { VariantProps } from '@codefast/tailwind-variants';
-import type { ComponentProps, JSX } from 'react';
-import type { ButtonProps } from './button';
-import type { InputProps } from './input';
-import type { TextareaProps } from './textarea';
+import type { VariantProps } from "@codefast/tailwind-variants";
+import type { ComponentProps, JSX } from "react";
+import type { ButtonProps } from "./button";
+import type { InputProps } from "./input";
+import type { TextareaProps } from "./textarea";
 declare const inputGroupVariants: import("@codefast/tailwind-variants").VariantFunctionType<import("@codefast/tailwind-variants").ConfigurationSchema, Record<string, never>>;
 declare const inputGroupAddonVariants: import("@codefast/tailwind-variants").VariantFunctionType<{
     align: {
-        'block-end': string;
-        'block-start': string;
-        'inline-end': string;
-        'inline-start': string;
+        "block-end": string;
+        "block-start": string;
+        "inline-end": string;
+        "inline-start": string;
     };
 }, Record<string, never>>;
 declare const inputGroupButtonVariants: import("@codefast/tailwind-variants").VariantFunctionType<{
     size: {
-        'icon-sm': string;
-        'icon-xs': string;
+        "icon-sm": string;
+        "icon-xs": string;
         sm: string;
         xs: string;
     };
 }, Record<string, never>>;
-type InputGroupProps = ComponentProps<'div'>;
+type InputGroupProps = ComponentProps<"div">;
 declare function InputGroup({ className, ...props }: InputGroupProps): JSX.Element;
-type InputGroupAddonProps = ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>;
+type InputGroupAddonProps = ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>;
 declare function InputGroupAddon({ align, className, ...props }: InputGroupAddonProps): JSX.Element;
-type InputGroupButtonProps = Omit<ButtonProps, 'size'> & VariantProps<typeof inputGroupButtonVariants>;
+type InputGroupButtonProps = Omit<ButtonProps, "size"> & VariantProps<typeof inputGroupButtonVariants>;
 declare function InputGroupButton({ className, size, type, variant, ...props }: InputGroupButtonProps): JSX.Element;
-type InputGroupTextProps = ComponentProps<'span'>;
+type InputGroupTextProps = ComponentProps<"span">;
 declare function InputGroupText({ className, ...props }: InputGroupTextProps): JSX.Element;
 type InputGroupInputProps = InputProps;
 declare function InputGroupInput({ className, ...props }: InputGroupInputProps): JSX.Element;

package/dist/components/input-group.js

@@ -5,33 +5,33 @@ import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { Textarea } from "./textarea.js";
 const inputGroupVariants = tv({
-    base: cn('group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-lg border shadow-xs transition-[color,box-shadow] outline-none', 'h-9 min-w-0 has-[>textarea]:h-auto', 'has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-2', 'has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-2', 'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:pb-3', 'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:pt-3', 'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-3', 'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40')
+    base: cn("group/input-group relative flex w-full items-center rounded-lg border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30", "h-9 min-w-0 has-[>textarea]:h-auto", "has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-2", "has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50", "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40")
 });
 const inputGroupAddonVariants = tv({
-    base: cn("text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50"),
+    base: cn("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4"),
     defaultVariants: {
-        align: 'inline-start'
+        align: "inline-start"
     },
     variants: {
         align: {
-            'block-end': 'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5',
-            'block-start': 'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
-            'inline-end': 'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
-            'inline-start': 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]'
+            "block-end": "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
+            "block-start": "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
+            "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+            "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]"
         }
     }
 });
 const inputGroupButtonVariants = tv({
-    base: "text-sm shadow-none flex items-center gap-2 [&>svg:not([class*='size-'])]:size-4",
+    base: "flex items-center gap-2 text-sm shadow-none [&>svg:not([class*='size-'])]:size-4",
     defaultVariants: {
-        size: 'xs'
+        size: "xs"
     },
     variants: {
         size: {
-            'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
-            'icon-xs': 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
-            sm: 'h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5',
-            xs: 'h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg]:size-3.5 has-[>svg]:px-2'
+            "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+            "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+            sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+            xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg]:size-3.5"
         }
     }
 });
@@ -45,7 +45,7 @@ function InputGroup({ className, ...props }) {
         ...props
     });
 }
-function InputGroupAddon({ align = 'inline-start', className, ...props }) {
+function InputGroupAddon({ align = "inline-start", className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
         className: cn(inputGroupAddonVariants({
             align
@@ -54,15 +54,15 @@ function InputGroupAddon({ align = 'inline-start', className, ...props }) {
         "data-slot": "input-group-addon",
         role: "group",
         onPointerDown: (event)=>{
-            if (event.target.closest('button')) return;
+            if (event.target.closest("button")) return;
             event.preventDefault();
-            const control = event.currentTarget.parentElement?.querySelector('input, textarea');
+            const control = event.currentTarget.parentElement?.querySelector("input, textarea");
             if (control instanceof HTMLElement) control.focus();
         },
         ...props
     });
 }
-function InputGroupButton({ className, size = 'xs', type = 'button', variant = 'ghost', ...props }) {
+function InputGroupButton({ className, size = "xs", type = "button", variant = "ghost", ...props }) {
     return /*#__PURE__*/ jsx(Button, {
         className: cn(inputGroupButtonVariants({
             size
@@ -76,21 +76,21 @@ function InputGroupButton({ className, size = 'xs', type = 'button', variant = '
 }
 function InputGroupText({ className, ...props }) {
     return /*#__PURE__*/ jsx("span", {
-        className: cn("text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+        className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
         "data-slot": "input-group-text",
         ...props
     });
 }
 function InputGroupInput({ className, ...props }) {
     return /*#__PURE__*/ jsx(Input, {
-        className: cn('flex-1 rounded-none border-0 bg-transparent px-3 py-1 shadow-none focus-visible:ring-0 dark:bg-transparent', className),
+        className: cn("flex-1 rounded-none border-0 bg-transparent px-3 py-1 shadow-none focus-visible:ring-0 dark:bg-transparent", className),
         "data-slot": "input-group-control",
         ...props
     });
 }
 function InputGroupTextarea({ className, ...props }) {
     return /*#__PURE__*/ jsx(Textarea, {
-        className: cn('flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent', className),
+        className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className),
         "data-slot": "input-group-control",
         ...props
     });

package/dist/components/input-number.d.ts

@@ -1,5 +1,5 @@
-import type { ComponentProps, JSX } from 'react';
-import * as InputNumberPrimitive from '../primitives/input-number';
+import type { ComponentProps, JSX } from "react";
+import * as InputNumberPrimitive from "../primitives/input-number";
 interface InputNumberProps extends ComponentProps<typeof InputNumberPrimitive.Field>, ComponentProps<typeof InputNumberPrimitive.Root> {
 }
 declare function InputNumber({ ariaDecrementLabel, ariaIncrementLabel, className, defaultValue, disabled, formatOptions, id, loaderPosition, loading, max, min, onChange, prefix, readOnly, spinner, step, suffix, value, ...props }: InputNumberProps): JSX.Element;

package/dist/components/input-number.js

@@ -9,7 +9,7 @@ function InputNumber({ ariaDecrementLabel, ariaIncrementLabel, className, defaul
     return /*#__PURE__*/ jsxs(Root, {
         ariaDecrementLabel: ariaDecrementLabel,
         ariaIncrementLabel: ariaIncrementLabel,
-        className: cn("group border-input hover:not-has-disabled:not-focus-within:border-ring/60 focus-within:border-ring focus-within:ring-ring/50 [&>svg]:text-muted-foreground has-aria-invalid:border-destructive hover:not-has-disabled:not-focus-within:has-aria-invalid:border-destructive/60 focus-within:has-aria-invalid:ring-destructive/20 dark:focus-within:has-aria-invalid:ring-destructive/40 dark:bg-input/30 peer flex h-9 w-full grow items-center gap-3 rounded-lg border px-3 pr-0 text-base transition not-has-disabled:shadow-xs focus-within:ring-3 has-disabled:opacity-50 md:text-sm [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+        className: cn("group peer flex h-9 w-full grow items-center gap-3 rounded-lg border border-input px-3 pr-0 text-base transition not-has-disabled:shadow-xs focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 hover:not-has-disabled:not-focus-within:border-ring/60 has-disabled:opacity-50 has-aria-invalid:border-destructive focus-within:has-aria-invalid:ring-destructive/20 hover:not-has-disabled:not-focus-within:has-aria-invalid:border-destructive/60 md:text-sm dark:bg-input/30 dark:focus-within:has-aria-invalid:ring-destructive/40 [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&>svg]:text-muted-foreground", className),
         "data-slot": "input-number",
         defaultValue: defaultValue,
         disabled: disabled,
@@ -31,19 +31,19 @@ function InputNumber({ ariaDecrementLabel, ariaIncrementLabel, className, defaul
                 autoCapitalize: "none",
                 autoComplete: "off",
                 autoCorrect: "off",
-                className: "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+                className: "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
                 spellCheck: "false",
                 ...props
             }),
             /*#__PURE__*/ jsxs("div", {
-                className: cn('divide-input border-l-input group-hover:not-group-focus-within:not-has-disabled:border-l-border-ring/60 group-hover:not-group-focus-within:not-has-disabled:divide-border-ring/60 group-focus-within:border-l-ring group-focus-within:divide-ring group-has-aria-invalid:border-l-destructive group-has-aria-invalid:divide-destructive group-hover:group-has-aria-invalid:not-group-focus-within:not-has-disabled:border-l-destructive/60 group-hover:group-has-aria-invalid:not-group-focus-within:not-has-disabled:divide-destructive/60 order-last ml-auto grid h-full shrink-0 divide-y border-l transition', '*:[button]:focus-visible:bg-ring/50 group-has-aria-invalid:*:[button]:focus-visible:bg-destructive/20 dark:group-has-aria-invalid:*:[button]:focus-visible:bg-destructive/40 *:[button]:focus-visible:ring-0'),
+                className: cn("group-hover:not-group-focus-within:not-has-disabled:border-l-border-ring/60 group-hover:not-group-focus-within:not-has-disabled:divide-border-ring/60 order-last ml-auto grid h-full shrink-0 divide-y divide-input border-l border-l-input transition group-focus-within:divide-ring group-focus-within:border-l-ring group-has-aria-invalid:divide-destructive group-has-aria-invalid:border-l-destructive group-hover:group-has-aria-invalid:not-group-focus-within:not-has-disabled:divide-destructive/60 group-hover:group-has-aria-invalid:not-group-focus-within:not-has-disabled:border-l-destructive/60", "*:[button]:focus-visible:bg-ring/50 *:[button]:focus-visible:ring-0 group-has-aria-invalid:*:[button]:focus-visible:bg-destructive/20 dark:group-has-aria-invalid:*:[button]:focus-visible:bg-destructive/40"),
                 "data-slot": "input-number-buttons",
                 children: [
                     /*#__PURE__*/ jsx(IncrementButton, {
                         "aria-label": "Increment",
                         className: buttonVariants({
-                            className: 'text-muted-foreground h-auto rounded-none rounded-tr-[calc(var(--radius-lg)-1px)]',
-                            variant: 'ghost'
+                            className: "text-muted-foreground h-auto rounded-none rounded-tr-[calc(var(--radius-lg)-1px)]",
+                            variant: "ghost"
                         }),
                         "data-slot": "input-number-increment-button",
                         children: /*#__PURE__*/ jsx(ChevronUpIcon, {})
@@ -51,8 +51,8 @@ function InputNumber({ ariaDecrementLabel, ariaIncrementLabel, className, defaul
                     /*#__PURE__*/ jsx(DecrementButton, {
                         "aria-label": "Decrement",
                         className: buttonVariants({
-                            className: 'text-muted-foreground h-auto rounded-none rounded-br-[calc(var(--radius-lg)-1px)]',
-                            variant: 'ghost'
+                            className: "text-muted-foreground h-auto rounded-none rounded-br-[calc(var(--radius-lg)-1px)]",
+                            variant: "ghost"
                         }),
                         "data-slot": "input-number-decrement-button",
                         children: /*#__PURE__*/ jsx(ChevronDownIcon, {})

package/dist/components/input-otp.d.ts

@@ -1,15 +1,15 @@
-import type { ComponentProps, JSX } from 'react';
-import { OTPInput } from 'input-otp';
+import type { ComponentProps, JSX } from "react";
+import { OTPInput } from "input-otp";
 type InputOTPProps = ComponentProps<typeof OTPInput>;
 declare function InputOTP({ className, containerClassName, ...props }: InputOTPProps): JSX.Element;
-type InputOTPGroupProps = ComponentProps<'div'>;
+type InputOTPGroupProps = ComponentProps<"div">;
 declare function InputOTPGroup({ className, ...props }: InputOTPGroupProps): JSX.Element;
-interface InputOTPSlotProps extends ComponentProps<'div'> {
+interface InputOTPSlotProps extends ComponentProps<"div"> {
     index: number;
 }
 declare function InputOTPSlot({ className, index, ...props }: InputOTPSlotProps): JSX.Element;
-type InputOTPSeparatorProps = ComponentProps<'div'>;
+type InputOTPSeparatorProps = ComponentProps<"div">;
 declare function InputOTPSeparator({ ...props }: InputOTPSeparatorProps): JSX.Element;
-export { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';
+export { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
 export type { InputOTPGroupProps, InputOTPProps, InputOTPSeparatorProps, InputOTPSlotProps };

package/dist/components/input-otp.js

@@ -8,14 +8,14 @@ function InputOTP({ className, containerClassName, ...props }) {
     return /*#__PURE__*/ jsx(OTPInput, {
         "aria-label": "One-time password",
         className: cn(className),
-        containerClassName: cn('flex items-center gap-2 has-disabled:opacity-50', containerClassName),
+        containerClassName: cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName),
         "data-slot": "input-otp",
         ...props
     });
 }
 function InputOTPGroup({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('flex items-center -space-x-px', className),
+        className: cn("flex items-center -space-x-px", className),
         "data-slot": "input-otp-group",
         role: "group",
         ...props
@@ -25,7 +25,7 @@ function InputOTPSlot({ className, index, ...props }) {
     const inputOTPContext = use(OTPInputContext);
     const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
     return /*#__PURE__*/ jsxs("div", {
-        className: cn('border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 relative flex size-9 items-center justify-center border text-sm outline-hidden transition-all not-has-disabled:shadow-xs first:rounded-l-lg last:rounded-r-lg data-[active=true]:z-10 data-[active=true]:ring-3', className),
+        className: cn("relative flex size-9 items-center justify-center border border-input text-sm outline-hidden transition-all not-has-disabled:shadow-xs first:rounded-l-lg last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40", className),
         "data-active": isActive,
         "data-slot": "input-otp-slot",
         ...props,
@@ -34,7 +34,7 @@ function InputOTPSlot({ className, index, ...props }) {
             hasFakeCaret ? /*#__PURE__*/ jsx("div", {
                 className: "pointer-events-none absolute inset-0 flex items-center justify-center",
                 children: /*#__PURE__*/ jsx("div", {
-                    className: "animate-caret-blink bg-foreground animation-duration-1000 h-4 w-px"
+                    className: "h-4 w-px animate-caret-blink bg-foreground animation-duration-1000"
                 })
             }) : null
         ]

package/dist/components/input-password.d.ts

@@ -1,6 +1,6 @@
-import type { ComponentProps, JSX } from 'react';
-import { InputGroupInput } from './input-group';
-type InputPasswordProps = Omit<ComponentProps<typeof InputGroupInput>, 'type'>;
+import type { ComponentProps, JSX } from "react";
+import { InputGroupInput } from "./input-group";
+type InputPasswordProps = Omit<ComponentProps<typeof InputGroupInput>, "type">;
 declare function InputPassword({ className, disabled, readOnly, ...props }: InputPasswordProps): JSX.Element;
 export { InputPassword };
 export type { InputPasswordProps };

package/dist/components/input-password.js

@@ -4,13 +4,13 @@ import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { useCallback, useState } from "react";
 import { InputGroup, InputGroupButton, InputGroupInput } from "./input-group.js";
 function InputPassword({ className, disabled, readOnly, ...props }) {
-    const [type, setType] = useState('password');
+    const [type, setType] = useState("password");
     const togglePasswordVisibility = useCallback(()=>{
-        setType((previous)=>'password' === previous ? 'text' : 'password');
+        setType((previous)=>"password" === previous ? "text" : "password");
     }, []);
     return /*#__PURE__*/ jsxs(InputGroup, {
         className: className,
-        "data-disabled": disabled ? 'true' : void 0,
+        "data-disabled": disabled ? "true" : void 0,
         "data-slot": "input-password",
         children: [
             /*#__PURE__*/ jsx(InputGroupInput, {
@@ -22,15 +22,15 @@ function InputPassword({ className, disabled, readOnly, ...props }) {
                 ...props
             }),
             /*#__PURE__*/ jsx(InputGroupButton, {
-                "aria-label": 'password' === type ? 'Show password' : 'Hide password',
-                className: "focus-visible:not-disabled:bg-input rounded-full focus-visible:ring-0",
+                "aria-label": "password" === type ? "Show password" : "Hide password",
+                className: "rounded-full focus-visible:ring-0 focus-visible:not-disabled:bg-input",
                 "data-slot": "input-password-toggle",
                 disabled: disabled,
                 size: "icon-sm",
                 type: "button",
                 variant: "ghost",
                 onClick: togglePasswordVisibility,
-                children: 'password' === type ? /*#__PURE__*/ jsx(EyeOffIcon, {}) : /*#__PURE__*/ jsx(EyeIcon, {})
+                children: "password" === type ? /*#__PURE__*/ jsx(EyeOffIcon, {}) : /*#__PURE__*/ jsx(EyeIcon, {})
             })
         ]
     });

package/dist/components/input-search.d.ts

@@ -1,6 +1,6 @@
-import type { ComponentProps, JSX } from 'react';
-import { InputGroupInput } from './input-group';
-interface InputSearchProps extends Omit<ComponentProps<typeof InputGroupInput>, 'defaultValue' | 'onChange' | 'type' | 'value'> {
+import type { ComponentProps, JSX } from "react";
+import { InputGroupInput } from "./input-group";
+interface InputSearchProps extends Omit<ComponentProps<typeof InputGroupInput>, "defaultValue" | "onChange" | "type" | "value"> {
     defaultValue?: string;
     onChange?: (value?: string) => void;
     value?: string;

package/dist/components/input-search.js

@@ -11,7 +11,7 @@ function InputSearch({ className, defaultValue, disabled, onChange, readOnly, va
     });
     return /*#__PURE__*/ jsxs(InputGroup, {
         className: className,
-        "data-disabled": disabled ? 'true' : void 0,
+        "data-disabled": disabled ? "true" : void 0,
         "data-slot": "input-search",
         children: [
             /*#__PURE__*/ jsx(InputGroupAddon, {
@@ -23,7 +23,7 @@ function InputSearch({ className, defaultValue, disabled, onChange, readOnly, va
                 disabled: disabled,
                 readOnly: readOnly,
                 type: "search",
-                value: value ?? '',
+                value: value ?? "",
                 onChange: (event)=>{
                     setValue(event.target.value);
                 },
@@ -31,13 +31,13 @@ function InputSearch({ className, defaultValue, disabled, onChange, readOnly, va
             }),
             value ? /*#__PURE__*/ jsx(InputGroupButton, {
                 "aria-label": "Clear search",
-                className: "focus-visible:not-disabled:bg-input rounded-full focus-visible:ring-0",
+                className: "rounded-full focus-visible:ring-0 focus-visible:not-disabled:bg-input",
                 "data-slot": "input-search-clear",
                 disabled: disabled ?? readOnly,
                 size: "icon-sm",
                 variant: "ghost",
                 onClick: ()=>{
-                    setValue('');
+                    setValue("");
                 },
                 children: /*#__PURE__*/ jsx(XIcon, {})
             }) : null

package/dist/components/input.d.ts

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

package/dist/components/input.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { cn } from "@codefast/tailwind-variants";
 function Input({ className, type, ...props }) {
     return /*#__PURE__*/ jsx("input", {
-        className: cn('file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-lg border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3', 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive', className),
+        className: cn("h-9 w-full min-w-0 rounded-lg border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", className),
         "data-slot": "input",
         type: type,
         ...props

package/dist/components/item.d.ts

@@ -1,6 +1,6 @@
-import type { VariantProps } from '@codefast/tailwind-variants';
-import type { ComponentProps, JSX } from 'react';
-import { Separator } from './separator';
+import type { VariantProps } from "@codefast/tailwind-variants";
+import type { ComponentProps, JSX } from "react";
+import { Separator } from "./separator";
 declare const itemVariants: import("@codefast/tailwind-variants").VariantFunctionType<{
     size: {
         default: string;
@@ -19,27 +19,27 @@ declare const itemMediaVariants: import("@codefast/tailwind-variants").VariantFu
         image: string;
     };
 }, Record<string, never>>;
-type ItemGroupProps = ComponentProps<'div'>;
+type ItemGroupProps = ComponentProps<"div">;
 declare function ItemGroup({ className, ...props }: ItemGroupProps): JSX.Element;
 type ItemSeparatorProps = ComponentProps<typeof Separator>;
 declare function ItemSeparator({ className, ...props }: ItemSeparatorProps): JSX.Element;
-type ItemProps = ComponentProps<'div'> & VariantProps<typeof itemVariants> & {
+type ItemProps = ComponentProps<"div"> & VariantProps<typeof itemVariants> & {
     asChild?: boolean;
 };
 declare function Item({ asChild, className, size, variant, ...props }: ItemProps): JSX.Element;
-type ItemMediaProps = ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>;
+type ItemMediaProps = ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>;
 declare function ItemMedia({ className, variant, ...props }: ItemMediaProps): JSX.Element;
-type ItemContentProps = ComponentProps<'div'>;
+type ItemContentProps = ComponentProps<"div">;
 declare function ItemContent({ className, ...props }: ItemContentProps): JSX.Element;
-type ItemTitleProps = ComponentProps<'div'>;
+type ItemTitleProps = ComponentProps<"div">;
 declare function ItemTitle({ className, ...props }: ItemTitleProps): JSX.Element;
-type ItemDescriptionProps = ComponentProps<'p'>;
+type ItemDescriptionProps = ComponentProps<"p">;
 declare function ItemDescription({ className, ...props }: ItemDescriptionProps): JSX.Element;
-type ItemActionsProps = ComponentProps<'div'>;
+type ItemActionsProps = ComponentProps<"div">;
 declare function ItemActions({ className, ...props }: ItemActionsProps): JSX.Element;
-type ItemHeaderProps = ComponentProps<'div'>;
+type ItemHeaderProps = ComponentProps<"div">;
 declare function ItemHeader({ className, ...props }: ItemHeaderProps): JSX.Element;
-type ItemFooterProps = ComponentProps<'div'>;
+type ItemFooterProps = ComponentProps<"div">;
 declare function ItemFooter({ className, ...props }: ItemFooterProps): JSX.Element;
 export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, itemMediaVariants, ItemSeparator, ItemTitle, itemVariants, };
 export type { ItemActionsProps, ItemContentProps, ItemDescriptionProps, ItemFooterProps, ItemGroupProps, ItemHeaderProps, ItemMediaProps, ItemProps, ItemSeparatorProps, ItemTitleProps, };