shadcn-zod-formkit 1.30.0 → 1.30.1

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,7 @@ 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;
+    step?: number;
     withAddBtn?: boolean;
     form?: UseFormReturn<any>;
     isRemovebleOption?: boolean;
@@ -217,7 +218,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;
@@ -242,7 +243,14 @@ interface Props$h<T extends Record<string, any>> {
     childrenHeader?: ReactNode;
     listBtnConfig?: BtnConfig[];
 }
-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 }: 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[]>;
@@ -751,4 +759,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,7 @@ 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;
+    step?: number;
     withAddBtn?: boolean;
     form?: UseFormReturn<any>;
     isRemovebleOption?: boolean;
@@ -217,7 +218,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;
@@ -242,7 +243,14 @@ interface Props$h<T extends Record<string, any>> {
     childrenHeader?: ReactNode;
     listBtnConfig?: BtnConfig[];
 }
-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 }: 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[]>;
@@ -751,4 +759,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
           }
         ) })
       ] }) })
@@ -6318,6 +6324,122 @@ var FormWrapper = ({ form, handleSubmit, children, readOnly }) => {
     }
   ) });
 };
+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 +6730,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