shadcn-zod-formkit 1.30.0 → 1.31.0

package/dist/index.d.mts

@@ -28,13 +28,13 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { ClassValue } from 'clsx';
 
-interface Props$i {
+interface Props$j {
     title: string;
     description: string | ReactNode;
     className?: string;
     variant?: "info" | "warning" | "error" | "success";
 }
-declare const CustomAlert: ({ title, description, className, variant, }: Props$i) => react_jsx_runtime.JSX.Element;
+declare const CustomAlert: ({ title, description, className, variant, }: Props$j) => react_jsx_runtime.JSX.Element;
 
 declare const validationMessages: {
     required: string;
@@ -88,6 +88,8 @@ type FieldConfig<T, RT = Record<string, any>> = FieldProps<T, RT> | FieldConfig<
 interface FieldProps<T = Record<string, any>, RT = Record<string, any>> {
     name: keyof T;
     label: string;
+    showWhen?: (values: Record<string, any>) => boolean;
+    step?: number;
     withAddBtn?: boolean;
     form?: UseFormReturn<any>;
     isRemovebleOption?: boolean;
@@ -217,7 +219,7 @@ interface FormResp<T> {
     form?: UseFormReturn<any>;
     data: T;
 }
-interface Props$h<T extends Record<string, any>> {
+interface Props$i<T extends Record<string, any>> {
     showIcon?: boolean;
     showFormHeader?: boolean;
     formTitle: string;
@@ -241,8 +243,16 @@ interface Props$h<T extends Record<string, any>> {
     children?: ReactNode;
     childrenHeader?: ReactNode;
     listBtnConfig?: BtnConfig[];
+    debug?: boolean;
 }
-declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onAnyFieldChange, onSubmit, onClick, extraValidations, children, childrenHeader, showIcon, showFormHeader, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, listBtnConfig, submitBtnLabel, submitBtnLabelSubmiting, withFormWrapper, btnGroupDirection, withSubmitBtn }: Props$h<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onAnyFieldChange, onSubmit, onClick, extraValidations, children, childrenHeader, showIcon, showFormHeader, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, listBtnConfig, submitBtnLabel, submitBtnLabelSubmiting, withFormWrapper, btnGroupDirection, withSubmitBtn, debug }: Props$i<T>) => react_jsx_runtime.JSX.Element;
+
+interface Props$h<T> {
+    onSubmit?: (resp: FormResp<T>) => void;
+    fields: FieldConfig<T>[];
+    record: any;
+}
+declare const WizardForm: <T extends Record<string, any>>({ fields, record, onSubmit, }: Props$h<T>) => react_jsx_runtime.JSX.Element;
 
 declare const DynamicFormExample: () => react_jsx_runtime.JSX.Element;
 declare const mockFields: Array<FieldProps | FieldProps[]>;
@@ -255,12 +265,6 @@ interface Props$g<T extends Record<string, any> = Record<string, any>> {
     className?: string;
     gap?: string;
 }
-/**
- * 📋 FormFieldsGrid
- * Componente reutilizable para renderizar campos en una cuadrícula flexible.
- * - Si un elemento del arreglo es un solo FieldProps → muestra en una línea.
- * - Si es un arreglo de FieldProps → los muestra en una misma fila.
- */
 declare const FormFieldsGrid: <T extends Record<string, any> = Record<string, any>>({ fields, form, isPending, readOnly, className, gap, }: Props$g<T>) => JSX.Element;
 
 interface Props$f<T extends FieldValues = Record<string, any>> {
@@ -751,4 +755,4 @@ declare function TooltipContent({ className, sideOffset, children, ...props }: R
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, type ColorCompProps, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, CustomInputGroup, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, type FieldConfig, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, type FieldProps, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, type FormResp, GenericFilter, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, isValidField, mockFields, useFormField, validationMessages };
+export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, type ColorCompProps, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, CustomInputGroup, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, type FieldConfig, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, type FieldProps, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, type FormResp, GenericFilter, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, WizardForm, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, isValidField, mockFields, useFormField, validationMessages };

package/dist/index.d.ts

@@ -28,13 +28,13 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { ClassValue } from 'clsx';
 
-interface Props$i {
+interface Props$j {
     title: string;
     description: string | ReactNode;
     className?: string;
     variant?: "info" | "warning" | "error" | "success";
 }
-declare const CustomAlert: ({ title, description, className, variant, }: Props$i) => react_jsx_runtime.JSX.Element;
+declare const CustomAlert: ({ title, description, className, variant, }: Props$j) => react_jsx_runtime.JSX.Element;
 
 declare const validationMessages: {
     required: string;
@@ -88,6 +88,8 @@ type FieldConfig<T, RT = Record<string, any>> = FieldProps<T, RT> | FieldConfig<
 interface FieldProps<T = Record<string, any>, RT = Record<string, any>> {
     name: keyof T;
     label: string;
+    showWhen?: (values: Record<string, any>) => boolean;
+    step?: number;
     withAddBtn?: boolean;
     form?: UseFormReturn<any>;
     isRemovebleOption?: boolean;
@@ -217,7 +219,7 @@ interface FormResp<T> {
     form?: UseFormReturn<any>;
     data: T;
 }
-interface Props$h<T extends Record<string, any>> {
+interface Props$i<T extends Record<string, any>> {
     showIcon?: boolean;
     showFormHeader?: boolean;
     formTitle: string;
@@ -241,8 +243,16 @@ interface Props$h<T extends Record<string, any>> {
     children?: ReactNode;
     childrenHeader?: ReactNode;
     listBtnConfig?: BtnConfig[];
+    debug?: boolean;
 }
-declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onAnyFieldChange, onSubmit, onClick, extraValidations, children, childrenHeader, showIcon, showFormHeader, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, listBtnConfig, submitBtnLabel, submitBtnLabelSubmiting, withFormWrapper, btnGroupDirection, withSubmitBtn }: Props$h<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onAnyFieldChange, onSubmit, onClick, extraValidations, children, childrenHeader, showIcon, showFormHeader, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, listBtnConfig, submitBtnLabel, submitBtnLabelSubmiting, withFormWrapper, btnGroupDirection, withSubmitBtn, debug }: Props$i<T>) => react_jsx_runtime.JSX.Element;
+
+interface Props$h<T> {
+    onSubmit?: (resp: FormResp<T>) => void;
+    fields: FieldConfig<T>[];
+    record: any;
+}
+declare const WizardForm: <T extends Record<string, any>>({ fields, record, onSubmit, }: Props$h<T>) => react_jsx_runtime.JSX.Element;
 
 declare const DynamicFormExample: () => react_jsx_runtime.JSX.Element;
 declare const mockFields: Array<FieldProps | FieldProps[]>;
@@ -255,12 +265,6 @@ interface Props$g<T extends Record<string, any> = Record<string, any>> {
     className?: string;
     gap?: string;
 }
-/**
- * 📋 FormFieldsGrid
- * Componente reutilizable para renderizar campos en una cuadrícula flexible.
- * - Si un elemento del arreglo es un solo FieldProps → muestra en una línea.
- * - Si es un arreglo de FieldProps → los muestra en una misma fila.
- */
 declare const FormFieldsGrid: <T extends Record<string, any> = Record<string, any>>({ fields, form, isPending, readOnly, className, gap, }: Props$g<T>) => JSX.Element;
 
 interface Props$f<T extends FieldValues = Record<string, any>> {
@@ -751,4 +755,4 @@ declare function TooltipContent({ className, sideOffset, children, ...props }: R
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, type ColorCompProps, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, CustomInputGroup, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, type FieldConfig, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, type FieldProps, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, type FormResp, GenericFilter, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, isValidField, mockFields, useFormField, validationMessages };
+export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, type ColorCompProps, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, CustomInputGroup, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, type FieldConfig, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, type FieldProps, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, type FormResp, GenericFilter, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, WizardForm, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, isValidField, mockFields, useFormField, validationMessages };

package/dist/index.mjs

@@ -2184,6 +2184,8 @@ var ColorInput = class extends BaseInput {
   }
 };
 var PRESET_COLORS = [
+  "#9A275A",
+  // QuinaMagenta
   "#800000",
   // Maroon
   "#ef4444",
@@ -2194,6 +2196,8 @@ var PRESET_COLORS = [
   // yellow
   "#22c55e",
   // green
+  "#99EDCC",
+  // Aquamarine
   "#00FF00",
   // lime
   "#00FFFF",
@@ -2212,10 +2216,12 @@ var PRESET_COLORS = [
   // pink
   "#64748b",
   // slate
+  "#000000",
+  // black
   "#808080",
   // Gray
-  "#000000"
-  // black
+  "#FFFFFF"
+  // White
 ];
 var FieldColor = ({ form, input, isSubmitting }) => {
   const [ColorCmp, _setColorCmp] = useState(ColorComp);
@@ -2268,13 +2274,13 @@ var ColorComp = React3__default.forwardRef(
       }
     };
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 p-2", children: PRESET_COLORS.map((presetColor) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-2 p-2", children: PRESET_COLORS.map((presetColor) => /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           disabled,
           className: cn(
-            "size-6 rounded-md border-2 transition-all hover:scale-110 disabled:opacity-50 disabled:cursor-not-allowed",
+            "flex-1 size-4 shadow-lg rounded-md border-2 border-black transition-all hover:scale-110 disabled:opacity-50 disabled:cursor-not-allowed",
             color.hex === presetColor ? "border-foreground ring-2 ring-foreground/20" : "border-border hover:border-foreground/50"
           ),
           style: { backgroundColor: presetColor },
@@ -4715,7 +4721,7 @@ var FieldKeyValueList = ({ form, input, isSubmitting }) => {
                   ] }),
                   /* @__PURE__ */ jsxs(ButtonGroup, { className: "w-full", children: [
                     /* @__PURE__ */ jsx(ButtonGroupText, { asChild: true, children: /* @__PURE__ */ jsx(Label$1, { htmlFor: "value", children: "Value" }) }),
-                    /* @__PURE__ */ jsx(InputGroup, { children: /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx(
                       CustomInputGroup,
                       {
                         autoValidate: true,
@@ -4726,7 +4732,7 @@ var FieldKeyValueList = ({ form, input, isSubmitting }) => {
                         onChange: (e) => handleChange(index, "value", e.target.value),
                         form
                       }
-                    ) })
+                    )
                   ] }),
                   input.isRemovebleOption && /* @__PURE__ */ jsx(
                     Button,
@@ -5726,7 +5732,7 @@ var FieldSwitch = ({ input, form, isSubmitting }) => {
             onCheckedChange: (event) => {
               handleOnChage(event, input, field);
             },
-            disabled: false
+            disabled: input.disabled || isSubmitting
           }
         ) })
       ] }) })
@@ -6123,6 +6129,16 @@ var getFieldLabel = (fieldErrorKey, fields) => {
   return foundField?.label ?? fieldErrorKey;
 };
 var isRenderableChild = (c) => c !== void 0 && c !== null && typeof c !== "function";
+var shouldShowField = (field, values) => {
+  if (typeof field.showWhen === "function") {
+    try {
+      return !!field.showWhen(values);
+    } catch {
+      return true;
+    }
+  }
+  return true;
+};
 var FormFieldsGrid = ({
   fields,
   form,
@@ -6131,47 +6147,54 @@ var FormFieldsGrid = ({
   className = "",
   gap = "gap-2"
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: `w-full grid grid-cols-1 ${gap} ${className}`, children: fields.map(
-    (inputOrGroup, idx) => Array.isArray(inputOrGroup) ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "w-full flex flex-row items-start gap-4 py-3",
-        children: inputOrGroup.map((field, subIdx) => {
-          const fieldCopy = {
-            ...field,
-            disabled: readOnly ? true : field.disabled
-          };
-          const renderInlineChild = fieldCopy.childrenPosition !== "down" && isRenderableChild(fieldCopy.children);
-          const renderInlineChildDown = fieldCopy.childrenPosition === "down" && isRenderableChild(fieldCopy.children);
-          return /* @__PURE__ */ jsxs("div", { className: "w-full px-2", children: [
-            renderInlineChild && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy.children }),
-            InputFactory.create(fieldCopy, form, isPending),
-            renderInlineChildDown && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy.children })
-          ] }, `field-${idx}-${subIdx}`);
-        })
-      },
-      `field-group-${idx}`
-    ) : /* @__PURE__ */ jsx(
+  const values = form.watch();
+  return /* @__PURE__ */ jsx("div", { className: `w-full grid grid-cols-1 ${gap} ${className}`, children: fields.map((inputOrGroup, idx) => {
+    if (Array.isArray(inputOrGroup)) {
+      const visibleFields = inputOrGroup.filter(
+        (f) => shouldShowField(f, values)
+      );
+      if (visibleFields.length === 0) return null;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "w-full flex flex-row items-start gap-4 py-3",
+          children: visibleFields.map((field, subIdx) => {
+            const fieldCopy2 = {
+              ...field,
+              disabled: readOnly ? true : field.disabled
+            };
+            const renderUp2 = fieldCopy2.childrenPosition !== "down" && isRenderableChild(fieldCopy2.children);
+            const renderDown2 = fieldCopy2.childrenPosition === "down" && isRenderableChild(fieldCopy2.children);
+            return /* @__PURE__ */ jsxs("div", { className: "w-full px-2", children: [
+              renderUp2 && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy2.children }),
+              InputFactory.create(fieldCopy2, form, isPending),
+              renderDown2 && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy2.children })
+            ] }, `field-${idx}-${subIdx}`);
+          })
+        },
+        `field-group-${idx}`
+      );
+    }
+    if (!shouldShowField(inputOrGroup, values)) return null;
+    const fieldCopy = {
+      ...inputOrGroup,
+      disabled: readOnly ? true : inputOrGroup.disabled
+    };
+    const renderUp = fieldCopy.childrenPosition !== "down" && isRenderableChild(fieldCopy.children);
+    const renderDown = fieldCopy.childrenPosition === "down" && isRenderableChild(fieldCopy.children);
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         className: "flex flex-col justify-between py-3 w-full px-2",
-        children: (() => {
-          const fieldCopy = {
-            ...inputOrGroup,
-            disabled: readOnly ? true : inputOrGroup.disabled
-          };
-          const renderUp = fieldCopy.childrenPosition !== "down" && isRenderableChild(fieldCopy.children);
-          const renderDown = fieldCopy.childrenPosition === "down" && isRenderableChild(fieldCopy.children);
-          return /* @__PURE__ */ jsxs(Fragment, { children: [
-            renderUp && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy.children }),
-            InputFactory.create(fieldCopy, form, isPending),
-            renderDown && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy.children })
-          ] });
-        })()
+        children: [
+          renderUp && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy.children }),
+          InputFactory.create(fieldCopy, form, isPending),
+          renderDown && /* @__PURE__ */ jsx(Fragment, { children: fieldCopy.children })
+        ]
       },
       `field-single-${idx}`
-    )
-  ) });
+    );
+  }) });
 };
 var DynamicForm = ({
   formTitle,
@@ -6196,7 +6219,8 @@ var DynamicForm = ({
   submitBtnLabelSubmiting = "Guardando...",
   withFormWrapper = true,
   btnGroupDirection = "flex-end",
-  withSubmitBtn = true
+  withSubmitBtn = true,
+  debug = false
 }) => {
   const [isPending, startTransition] = useTransition();
   const schema = useMemo(() => {
@@ -6223,7 +6247,7 @@ var DynamicForm = ({
     if (!onClick) return;
     const isValid2 = await form.trigger();
     if (!isValid2) return;
-    const data = form.getValues();
+    const data = form.watch();
     const resp = { data, form };
     onClick(resp);
   };
@@ -6308,16 +6332,136 @@ var DynamicForm = ({
   if (!withCard) return formContent;
   return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { children: formContent }) });
 };
-var FormWrapper = ({ form, handleSubmit, children, readOnly }) => {
-  return /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsx(
+var FormWrapper = ({ form, handleSubmit, children, readOnly, debug }) => {
+  const allValues = form.watch();
+  return /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs(
     "form",
     {
       onSubmit: form.handleSubmit(handleSubmit),
       className: `flex flex-col gap-2 ${readOnly ? "opacity-70 pointer-events-none select-none" : ""}`,
-      children
+      children: [
+        children,
+        debug && /* @__PURE__ */ jsx("pre", { className: "mt-4 p-3 bg-muted text-xs rounded", children: JSON.stringify(allValues, null, 2) })
+      ]
     }
   ) });
 };
+function Stepper({ steps, currentStep, clickable = false, onStepClick }) {
+  const handleStepClick = (stepNumber) => {
+    if (clickable && onStepClick) {
+      onStepClick(stepNumber);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-4 items-center justify-around", children: steps.map((step, index) => {
+    const stepNumber = index + 1;
+    const isCompleted = stepNumber < currentStep;
+    const isCurrent = stepNumber === currentStep;
+    const isUpcoming = stepNumber > currentStep;
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: () => handleStepClick(stepNumber),
+            className: cn(
+              "flex size-10 items-center shadow-lg  justify-center rounded-full border-2 transition-all duration-300",
+              isCompleted && "border-primary bg-primary text-primary-foreground",
+              isCurrent && "border-primary bg-background text-primary scale-110",
+              isUpcoming && "border-muted-foreground/60 bg-background border-b text-muted-foreground",
+              clickable && "cursor-pointer hover:scale-125 hover:shadow-xl",
+              !clickable && "cursor-default"
+            ),
+            children: isCompleted ? /* @__PURE__ */ jsx(Check, { className: "size-5" }) : /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: stepNumber })
+          }
+        ),
+        step.title && /* @__PURE__ */ jsxs("div", { className: "mt-3 text-center", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-sm font-medium transition-colors",
+                (isCompleted || isCurrent) && "text-foreground",
+                isUpcoming && "text-muted-foreground"
+              ),
+              children: step.title
+            }
+          ),
+          step.description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground max-w-[120px]", children: step.description })
+        ] })
+      ] }),
+      index < steps.length - 1 && /* @__PURE__ */ jsx("div", { className: "mx-2 flex-1 mb-8", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "h-0.5 w-full transition-all duration-300",
+            stepNumber < currentStep ? "bg-primary" : "bg-muted-foreground/30"
+          )
+        }
+      ) })
+    ] }, index);
+  }) }) });
+}
+var WizardForm = ({
+  fields,
+  record,
+  onSubmit
+}) => {
+  const [currentStep, setCurrentStep] = useState(1);
+  const flattenFields4 = (list) => list.flatMap((f) => Array.isArray(f) ? flattenFields4(f) : f);
+  const allFields = flattenFields4(fields);
+  const totalSteps = allFields.reduce(
+    (max, f) => Math.max(max, f.step ?? 1),
+    1
+  );
+  const stepFields = allFields.filter((f) => (f.step ?? 1) === currentStep);
+  return /* @__PURE__ */ jsxs(Card, { className: "flex flex-col gap-4 px-4", children: [
+    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between mb-4 gap-2 px-4", children: [
+      /* @__PURE__ */ jsx(
+        Stepper,
+        {
+          steps: Array(totalSteps).fill({}),
+          currentStep,
+          clickable: true,
+          onStepClick: setCurrentStep
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-center space-x-4 gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            className: "w-32",
+            onClick: () => setCurrentStep((prev) => prev - 1),
+            disabled: currentStep === 1,
+            children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            className: "w-32",
+            onClick: () => setCurrentStep((prev) => prev + 1),
+            disabled: currentStep > totalSteps,
+            children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      DynamicForm,
+      {
+        record,
+        formSubTitle: "This is a subtitle",
+        formTitle: "Wizard Form Example",
+        withCard: false,
+        errorAlertPosition: "down",
+        fields: stepFields,
+        onSubmit
+      }
+    )
+  ] });
+};
 var DynamicFormExample = () => {
   const record = {
     username: "John Doe ",
@@ -6608,6 +6752,6 @@ var GenericFilter = ({
   ) }) });
 };
 
-export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, CustomInputGroup, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput2 as FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, GenericFilter, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput2 as OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, isValidField, mockFields, useFormField, validationMessages };
+export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, CustomInputGroup, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput2 as FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, GenericFilter, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput2 as OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, WizardForm, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, isValidField, mockFields, useFormField, validationMessages };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map