@codefast/ui 0.3.10 → 0.3.11-canary.0

package/dist/components/field.js

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

package/dist/components/form.cjs

@@ -42,7 +42,7 @@ const external_react_namespaceObject = require("react");
 const external_react_hook_form_namespaceObject = require("react-hook-form");
 const external_label_cjs_namespaceObject = require("./label.cjs");
 const Form = external_react_hook_form_namespaceObject.FormProvider;
-const FORM_FIELD_NAME = 'FormField';
+const FORM_FIELD_NAME = "FormField";
 const [createFormFieldContext, createFormFieldScope] = (0, react_context_namespaceObject.createContextScope)(FORM_FIELD_NAME);
 const [FormFieldContextProvider, useFormFieldContext] = createFormFieldContext(FORM_FIELD_NAME);
 function useFormItem(consumerName, scope) {
@@ -72,7 +72,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 = (0, external_react_namespaceObject.useId)();
@@ -80,13 +80,13 @@ function FormItem({ __scopeFormField, className, ...props }) {
         id: id,
         scope: __scopeFormField,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-            className: (0, tailwind_variants_namespaceObject.cn)('grid gap-2', className),
+            className: (0, tailwind_variants_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_label_cjs_namespaceObject.Label, {
@@ -96,7 +96,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__*/ (0, jsx_runtime_namespaceObject.jsx)(react_slot_namespaceObject.Slot, {
@@ -110,19 +110,19 @@ function FormControl({ __scopeFormField, ...props }) {
 function FormDescription({ __scopeFormField, className, ...props }) {
     const { formDescriptionId } = useFormItem(FORM_MESSAGE_NAME, __scopeFormField);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-        className: (0, tailwind_variants_namespaceObject.cn)('text-muted-foreground text-xs', className),
+        className: (0, tailwind_variants_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
-        className: (0, tailwind_variants_namespaceObject.cn)('text-xs', error?.message ? 'text-destructive font-medium' : 'text-muted-foreground', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("text-xs", error?.message ? "font-medium text-destructive" : "text-muted-foreground", className),
         "data-slot": "form-message",
         id: formMessageId,
         ...props,

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

@@ -45,11 +45,11 @@ function HoverCardTrigger({ ...props }) {
         ...props
     });
 }
-function HoverCardContent({ align = 'center', className, sideOffset = 4, ...props }) {
+function HoverCardContent({ align = "center", className, sideOffset = 4, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_hover_card_namespaceObject.Portal, {
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_hover_card_namespaceObject.Content, {
             align: align,
-            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=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: (0, tailwind_variants_namespaceObject.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
@@ -58,7 +58,7 @@ function HoverCardContent({ align = 'center', className, sideOffset = 4, ...prop
 }
 function HoverCardArrow({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_hover_card_namespaceObject.Arrow, {
-        className: (0, tailwind_variants_namespaceObject.cn)('fill-popover', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("fill-popover", className),
         "data-slot": "hover-card-arrow",
         ...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.cjs

@@ -41,33 +41,33 @@ const external_button_cjs_namespaceObject = require("./button.cjs");
 const external_input_cjs_namespaceObject = require("./input.cjs");
 const external_textarea_cjs_namespaceObject = require("./textarea.cjs");
 const inputGroupVariants = (0, tailwind_variants_namespaceObject.tv)({
-    base: (0, tailwind_variants_namespaceObject.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: (0, tailwind_variants_namespaceObject.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 = (0, tailwind_variants_namespaceObject.tv)({
-    base: (0, tailwind_variants_namespaceObject.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: (0, tailwind_variants_namespaceObject.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 = (0, tailwind_variants_namespaceObject.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"
         }
     }
 });
@@ -81,7 +81,7 @@ function InputGroup({ className, ...props }) {
         ...props
     });
 }
-function InputGroupAddon({ align = 'inline-start', className, ...props }) {
+function InputGroupAddon({ align = "inline-start", className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         className: (0, tailwind_variants_namespaceObject.cn)(inputGroupAddonVariants({
             align
@@ -90,15 +90,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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
         className: (0, tailwind_variants_namespaceObject.cn)(inputGroupButtonVariants({
             size
@@ -112,21 +112,21 @@ function InputGroupButton({ className, size = 'xs', type = 'button', variant = '
 }
 function InputGroupText({ className, ...props }) {
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-        className: (0, tailwind_variants_namespaceObject.cn)("text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+        className: (0, tailwind_variants_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_cjs_namespaceObject.Input, {
-        className: (0, tailwind_variants_namespaceObject.cn)('flex-1 rounded-none border-0 bg-transparent px-3 py-1 shadow-none focus-visible:ring-0 dark:bg-transparent', className),
+        className: (0, tailwind_variants_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_textarea_cjs_namespaceObject.Textarea, {
-        className: (0, tailwind_variants_namespaceObject.cn)('flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent', className),
+        className: (0, tailwind_variants_namespaceObject.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-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
     });