shadcn-zod-formkit 1.30.1 → 1.33.0

package/dist/index.d.mts

@@ -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;
+    showWhen?: (values: Record<string, any>) => boolean;
     step?: number;
     withAddBtn?: boolean;
     form?: UseFormReturn<any>;
@@ -242,15 +243,28 @@ interface Props$i<T extends Record<string, any>> {
     children?: ReactNode;
     childrenHeader?: ReactNode;
     listBtnConfig?: BtnConfig[];
+    debug?: boolean;
+    isWrapInWizard?: boolean;
+    currentStep?: number;
+    totalSteps?: number;
 }
-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;
+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, isWrapInWizard, totalSteps, currentStep, }: Props$i<T>) => react_jsx_runtime.JSX.Element;
 
+interface WizardRenderProps<T> {
+    stepFields: FieldProps<T>[];
+    currentStep: number;
+    totalSteps: number;
+    setCurrentStep: Dispatch<SetStateAction<number>>;
+}
 interface Props$h<T> {
     onSubmit?: (resp: FormResp<T>) => void;
     fields: FieldConfig<T>[];
     record: any;
+    children?: (props: WizardRenderProps<T>) => ReactNode;
+    isWrapInWizard?: boolean;
+    skipSteps?: boolean;
 }
-declare const WizardForm: <T extends Record<string, any>>({ fields, record, onSubmit, }: Props$h<T>) => react_jsx_runtime.JSX.Element;
+declare const WizardForm: <T extends Record<string, any>>({ fields, record, onSubmit, children, isWrapInWizard, skipSteps, }: Props$h<T>) => react_jsx_runtime.JSX.Element;
 
 declare const DynamicFormExample: () => react_jsx_runtime.JSX.Element;
 declare const mockFields: Array<FieldProps | FieldProps[]>;
@@ -263,12 +277,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>> {

package/dist/index.d.ts

@@ -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;
+    showWhen?: (values: Record<string, any>) => boolean;
     step?: number;
     withAddBtn?: boolean;
     form?: UseFormReturn<any>;
@@ -242,15 +243,28 @@ interface Props$i<T extends Record<string, any>> {
     children?: ReactNode;
     childrenHeader?: ReactNode;
     listBtnConfig?: BtnConfig[];
+    debug?: boolean;
+    isWrapInWizard?: boolean;
+    currentStep?: number;
+    totalSteps?: number;
 }
-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;
+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, isWrapInWizard, totalSteps, currentStep, }: Props$i<T>) => react_jsx_runtime.JSX.Element;
 
+interface WizardRenderProps<T> {
+    stepFields: FieldProps<T>[];
+    currentStep: number;
+    totalSteps: number;
+    setCurrentStep: Dispatch<SetStateAction<number>>;
+}
 interface Props$h<T> {
     onSubmit?: (resp: FormResp<T>) => void;
     fields: FieldConfig<T>[];
     record: any;
+    children?: (props: WizardRenderProps<T>) => ReactNode;
+    isWrapInWizard?: boolean;
+    skipSteps?: boolean;
 }
-declare const WizardForm: <T extends Record<string, any>>({ fields, record, onSubmit, }: Props$h<T>) => react_jsx_runtime.JSX.Element;
+declare const WizardForm: <T extends Record<string, any>>({ fields, record, onSubmit, children, isWrapInWizard, skipSteps, }: Props$h<T>) => react_jsx_runtime.JSX.Element;
 
 declare const DynamicFormExample: () => react_jsx_runtime.JSX.Element;
 declare const mockFields: Array<FieldProps | FieldProps[]>;
@@ -263,12 +277,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>> {

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CheckIcon, XIcon, MinusIcon, CircleIcon, GripVerticalIcon, ChevronUpIcon, SearchIcon, ChevronsUpDown, Check, CalendarIcon, EyeOff, Eye, Upload, Info, Trash2, Plus, GripVertical, Loader2, Save, Pencil, Search, MessageCircleWarning, CircleCheck, CircleX } from 'lucide-react';
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CheckIcon, XIcon, MinusIcon, CircleIcon, GripVerticalIcon, ChevronUpIcon, SearchIcon, ChevronsUpDown, Check, Info, CalendarIcon, EyeOff, Eye, Upload, Trash2, Plus, GripVertical, Loader2, Save, Pencil, Search, MessageCircleWarning, CircleCheck, CircleX } from 'lucide-react';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { cva } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
@@ -4248,6 +4248,7 @@ var DateInput = class extends BaseInput {
 };
 var FieldTimeInput = ({ form, input, isSubmitting }) => {
   const [isValid2, setIsValid] = useState(isValidField(input, form));
+  const infoTooltip = input?.infoTooltip;
   const groupConfig = input.inputGroupConfig;
   const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
   const iconValidState = /* @__PURE__ */ jsx(CircleCheck, { style: { color: "#00bf3e" } });
@@ -4280,27 +4281,34 @@ var FieldTimeInput = ({ form, input, isSubmitting }) => {
         return /* @__PURE__ */ jsxs(FormItem, { children: [
           /* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
           /* @__PURE__ */ jsxs(Popover, { children: [
-            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(InputGroup, { className: "flex flex-row gap-1", children: /* @__PURE__ */ jsxs(
-              Button,
-              {
-                variant: "outline",
-                className: cn(
-                  "w-full justify-start text-left py-0.5 ",
-                  !date && "text-muted-foreground"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-1 justify-start text-left ", children: [
-                    /* @__PURE__ */ jsx(CalendarIcon, {}),
-                    date ? format(date, "PPP") : /* @__PURE__ */ jsx("span", { children: input.placeHolder ?? "Fecha" })
-                  ] }),
-                  (iconsRight.length > 0 || textRight || autoValidate) && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    textRight && /* @__PURE__ */ jsx(InputGroupText, { children: textRight }),
-                    iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsx(IconComponent, { size: 24, className: "w-6! h-6!" }, index)),
-                    autoValidate && /* @__PURE__ */ jsx("div", { children: isSubmitting ? iconLoadingState : isValid2 ? iconValidState : iconInvalidState })
-                  ] })
-                ]
-              }
-            ) }) }) }),
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs(InputGroup, { className: "flex flex-row gap-1", children: [
+              infoTooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Info, { size: 20 }) }),
+                /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: infoTooltip }) })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  type: "button",
+                  className: cn(
+                    "w-full justify-start text-left py-0.5 ",
+                    !date && "text-muted-foreground"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-1 justify-start text-left ", children: [
+                      /* @__PURE__ */ jsx(CalendarIcon, {}),
+                      date ? format(date, "PPP") : /* @__PURE__ */ jsx("span", { children: input.placeHolder ?? "Fecha" })
+                    ] }),
+                    (iconsRight.length > 0 || textRight || autoValidate) && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      textRight && /* @__PURE__ */ jsx(InputGroupText, { children: textRight }),
+                      iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsx(IconComponent, { size: 24, className: "w-6! h-6!" }, index)),
+                      autoValidate && /* @__PURE__ */ jsx("div", { children: isSubmitting ? iconLoadingState : isValid2 ? iconValidState : iconInvalidState })
+                    ] })
+                  ]
+                }
+              )
+            ] }) }) }),
             /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsx(
               Calendar,
               {
@@ -6129,6 +6137,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,
@@ -6137,47 +6155,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,
@@ -6202,7 +6227,11 @@ var DynamicForm = ({
   submitBtnLabelSubmiting = "Guardando...",
   withFormWrapper = true,
   btnGroupDirection = "flex-end",
-  withSubmitBtn = true
+  withSubmitBtn = true,
+  debug = false,
+  isWrapInWizard = false,
+  totalSteps = 0,
+  currentStep = 1
 }) => {
   const [isPending, startTransition] = useTransition();
   const schema = useMemo(() => {
@@ -6229,7 +6258,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);
   };
@@ -6273,11 +6302,11 @@ var DynamicForm = ({
           disabled: isPending,
           onClick: onClick ? handleClick : void 0,
           children: isPending ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 mr-2 animate-spin" }),
-            submitBtnLabelSubmiting
+            submitBtnLabelSubmiting,
+            /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 mr-2 animate-spin" })
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Save, { className: "h-5 w-5 mr-2" }),
-            submitBtnLabel
+            submitBtnLabel,
+            (totalSteps == 0 || totalSteps == currentStep) && /* @__PURE__ */ jsx(Save, { className: "h-5 w-5 mr-2" })
           ] })
         }
       )
@@ -6301,7 +6330,15 @@ var DynamicForm = ({
         fields
       }
     ),
-    withFormWrapper && /* @__PURE__ */ jsx(FormWrapper, { form, handleSubmit, children: formBody }),
+    withFormWrapper && /* @__PURE__ */ jsx(
+      FormWrapper,
+      {
+        form,
+        isWrapInWizard,
+        handleSubmit,
+        children: formBody
+      }
+    ),
     !withFormWrapper && formBody,
     withErrorsAlert && errorAlertPosition === "down" && /* @__PURE__ */ jsx(
       FormErrorsAlert,
@@ -6314,13 +6351,17 @@ 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, isWrapInWizard }) => {
+  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) })
+      ]
     }
   ) });
 };
@@ -6382,7 +6423,10 @@ function Stepper({ steps, currentStep, clickable = false, onStepClick }) {
 var WizardForm = ({
   fields,
   record,
-  onSubmit
+  onSubmit,
+  children,
+  isWrapInWizard = true,
+  skipSteps = false
 }) => {
   const [currentStep, setCurrentStep] = useState(1);
   const flattenFields4 = (list) => list.flatMap((f) => Array.isArray(f) ? flattenFields4(f) : f);
@@ -6393,40 +6437,21 @@ var WizardForm = ({
   );
   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(
+    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx("div", { className: "flex justify-between mb-4 gap-2 px-4", children: /* @__PURE__ */ jsx(
+      Stepper,
+      {
+        steps: Array(totalSteps).fill({}),
+        currentStep,
+        clickable: skipSteps,
+        onStepClick: setCurrentStep
+      }
+    ) }) }),
+    children ? children({
+      stepFields,
+      currentStep,
+      totalSteps,
+      setCurrentStep
+    }) : /* @__PURE__ */ jsx(
       DynamicForm,
       {
         record,
@@ -6435,7 +6460,10 @@ var WizardForm = ({
         withCard: false,
         errorAlertPosition: "down",
         fields: stepFields,
-        onSubmit
+        onSubmit,
+        isWrapInWizard: true,
+        currentStep,
+        totalSteps
       }
     )
   ] });