shadcn-zod-formkit 1.25.0 → 1.26.1

package/dist/index.cjs

@@ -233,9 +233,17 @@ var entitiesToGroupedOption = (data, optionValue = "name") => {
   return entities;
 };
 var handleOnChage = (event, input, field) => {
-  console.log("\u{1F680} ~ handleOnChage ~ event:", event);
   if (event) field?.onChange(event);
-  input.onChange?.(event);
+  input.onChange?.(event, input.form?.getValues());
+};
+var isValidField = (input, form, defaultValue) => {
+  const value = defaultValue ?? form.getValues(input.name);
+  const fieldState = form.getFieldState(input.name);
+  if (input.zodType) {
+    const result = input.zodType.safeParse(value);
+    return result.success;
+  }
+  return !fieldState.error && value !== void 0 && value !== "";
 };
 
 // src/components/custom/form/inputs/base/definitions.ts
@@ -969,7 +977,54 @@ function Separator({
     }
   );
 }
-classVarianceAuthority.cva(
+function FieldSet({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      className: cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "legend",
+    {
+      "data-slot": "field-legend",
+      "data-variant": variant,
+      className: cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "field-group",
+      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
+      ),
+      ...props
+    }
+  );
+}
+var fieldVariants = classVarianceAuthority.cva(
   "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
   {
     variants: {
@@ -992,6 +1047,147 @@ classVarianceAuthority.cva(
     }
   }
 );
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: cn(fieldVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function FieldContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "field-content",
+      className: cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Label,
+    {
+      "data-slot": "field-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-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      "data-slot": "field-description",
+      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
+      ),
+      ...props
+    }
+  );
+}
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "field-separator",
+      "data-content": !!children,
+      className: cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
+            "data-slot": "field-separator-content",
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}) {
+  const content = React3.useMemo(() => {
+    if (children) {
+      return children;
+    }
+    if (!errors?.length) {
+      return null;
+    }
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values()
+    ];
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map(
+      (error, index) => error?.message && /* @__PURE__ */ jsxRuntime.jsx("li", { children: error.message }, index)
+    ) });
+  }, [children, errors]);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "alert",
+      "data-slot": "field-error",
+      className: cn("text-destructive text-sm font-normal", className),
+      ...props,
+      children: content
+    }
+  );
+}
 var Form = reactHookForm.FormProvider;
 var FormFieldContext = React3__namespace.createContext(
   {}
@@ -1183,7 +1379,7 @@ function InputGroupAddon({
     }
   );
 }
-classVarianceAuthority.cva(
+var inputGroupButtonVariants = classVarianceAuthority.cva(
   "text-sm shadow-none flex gap-2 items-center",
   {
     variants: {
@@ -1199,6 +1395,24 @@ classVarianceAuthority.cva(
     }
   }
 );
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
 function InputGroupText({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -1227,6 +1441,22 @@ function InputGroupInput({
     }
   );
 }
+function InputGroupTextarea({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Textarea,
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
 function InputOTP({
   className,
   containerClassName,
@@ -1825,6 +2055,41 @@ function ButtonGroup({
     }
   );
 }
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      className: cn(
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Separator,
+    {
+      "data-slot": "button-group-separator",
+      orientation,
+      className: cn(
+        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
 var ButtonGroupInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -1852,7 +2117,7 @@ var FieldButtonGroup = ({ input, form, isSubmitting, className = "w-full flex-1"
       disabled: isSubmitting,
       children: option.label ?? option.name
     },
-    key
+    `${input.name}-${key}-btn-g`
   )) });
 };
 var CheckListInput = class extends BaseInput {
@@ -2028,6 +2293,29 @@ function Command({
     }
   );
 }
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "sr-only", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DialogContent,
+      {
+        className: cn("overflow-hidden p-0", className),
+        showCloseButton,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Command, { className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children })
+      }
+    )
+  ] });
+}
 function CommandInput({
   className,
   ...props
@@ -2098,6 +2386,19 @@ function CommandGroup({
     }
   );
 }
+function CommandSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command.Separator,
+    {
+      "data-slot": "command-separator",
+      className: cn("bg-border -mx-1 h-px", className),
+      ...props
+    }
+  );
+}
 function CommandItem({
   className,
   ...props
@@ -2114,6 +2415,22 @@ function CommandItem({
     }
   );
 }
+function CommandShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "command-shortcut",
+      className: cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      ),
+      ...props
+    }
+  );
+}
 var ComboboxInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -3895,60 +4212,82 @@ function cleanEscapedString(input) {
 var DateInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
-    const formField = /* @__PURE__ */ jsxRuntime.jsx(
-      FormField,
-      {
-        control: form.control,
-        name: input.name,
-        render: ({ field }) => {
-          const [date, setDate] = React3__namespace.useState(
-            field.value ? new Date(field.value) : void 0
-          );
-          React3__namespace.useEffect(() => {
-            if (field.value && !date) {
-              setDate(new Date(field.value));
-            }
-          }, [field.value]);
-          const handleSelect = (selectedDate) => {
-            setDate(selectedDate);
-            handleOnChage(selectedDate, input, field);
-          };
-          return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-                Button,
-                {
-                  variant: "outline",
-                  className: cn(
-                    "w-full justify-start text-left font-normal",
-                    !date && "text-muted-foreground"
-                  ),
-                  children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldTimeInput, { input, form, isSubmitting });
+  }
+};
+var FieldTimeInput = ({ form, input, isSubmitting }) => {
+  const [isValid2, setIsValid] = React3.useState(isValidField(input, form));
+  const groupConfig = input.inputGroupConfig;
+  const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
+  const iconValidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { style: { color: "#00bf3e" } });
+  const iconInvalidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { style: { color: "#ff8080" } });
+  const iconLoadingState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin", style: { color: "#1e90ff" } });
+  const iconsRight = groupConfig?.iconsRight ?? [];
+  groupConfig?.iconsLeft ?? [];
+  groupConfig?.textLeft;
+  const textRight = groupConfig?.textRight;
+  const formField = /* @__PURE__ */ jsxRuntime.jsx(
+    FormField,
+    {
+      control: form.control,
+      name: input.name,
+      render: ({ field }) => {
+        setIsValid(isValidField(input, form));
+        const [date, setDate] = React3__namespace.useState(
+          field.value ? new Date(field.value) : void 0
+        );
+        React3__namespace.useEffect(() => {
+          if (field.value && !date) {
+            setDate(new Date(field.value));
+            setIsValid(isValidField(input, form));
+          }
+        }, [field.value]);
+        const handleSelect = (selectedDate) => {
+          setDate(selectedDate);
+          handleOnChage(selectedDate, input, field);
+        };
+        return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(InputGroup, { className: "flex flex-row gap-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
+              Button,
+              {
+                variant: "outline",
+                className: cn(
+                  "w-full justify-start text-left py-0.5 ",
+                  !date && "text-muted-foreground"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center gap-1 justify-start text-left ", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, {}),
                     date ? format(date, "PPP") : /* @__PURE__ */ jsxRuntime.jsx("span", { children: input.placeHolder ?? "Fecha" })
-                  ]
-                }
-              ) }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                Calendar,
-                {
-                  mode: "single",
-                  selected: date,
-                  onSelect: handleSelect,
-                  initialFocus: true
-                }
-              ) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
-            /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
-          ] });
-        }
-      },
-      input.name
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
-  }
+                  ] }),
+                  (iconsRight.length > 0 || textRight || autoValidate) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    textRight && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textRight }),
+                    iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 24, className: "w-6! h-6!" }, index)),
+                    autoValidate && /* @__PURE__ */ jsxRuntime.jsx("div", { children: isSubmitting ? iconLoadingState : isValid2 ? iconValidState : iconInvalidState })
+                  ] })
+                ]
+              }
+            ) }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+              Calendar,
+              {
+                mode: "single",
+                selected: date,
+                onSelect: handleSelect,
+                initialFocus: true
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
+          /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
+        ] });
+      }
+    },
+    input.name
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
 };
 var DateTimeInput = class extends BaseInput {
   render() {
@@ -3958,7 +4297,7 @@ var DateTimeInput = class extends BaseInput {
 };
 var FieldDateTimeInput = ({ form, input, isSubmitting }) => {
   const groupConfig = input.inputGroupConfig;
-  const autoValidate = groupConfig?.autoValidIcons;
+  const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
   const iconValidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { style: { color: "#00bf3e" } });
   const iconInvalidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { style: { color: "#ff8080" } });
   const iconLoadingState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin", style: { color: "#1e90ff" } });
@@ -4009,7 +4348,7 @@ var FieldDateTimeInput = ({ form, input, isSubmitting }) => {
             ),
             (iconsRight.length > 0 || textRight || autoValidate) && /* @__PURE__ */ jsxRuntime.jsxs(InputGroupAddon, { align: "inline-end", children: [
               textRight && /* @__PURE__ */ jsxRuntime.jsx(InputGroupText, { children: textRight }),
-              iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 20 }, index)),
+              iconsRight.map((IconComponent, index) => /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 24 }, index)),
               autoValidate && /* @__PURE__ */ jsxRuntime.jsx("div", { children: isSubmitting ? iconLoadingState : isValid2 ? iconValidState : iconInvalidState })
             ] })
           ] }) }),
@@ -4332,7 +4671,7 @@ var FieldMultiSelect = ({ form, input, isSubmitting }) => {
                     const option = lista.find(
                       (item) => getValue(item).toString() === val
                     );
-                    return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", children: option?.name ?? val }, val);
+                    return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", children: option?.name ?? val }, `${input.name}-${val}-ms`);
                   }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: input.placeHolder ?? "Selecciona..." }),
                   /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "ml-2 h-4 w-4 opacity-50" })
                 ]
@@ -4365,7 +4704,7 @@ var FieldMultiSelect = ({ form, input, isSubmitting }) => {
                         item.name
                       ]
                     },
-                    value
+                    `${value}-ms`
                   );
                 }) })
               ] })
@@ -4387,7 +4726,7 @@ var TextInputGroup = class extends BaseInput {
 var FieldTextGroup = ({ form, input, isSubmitting }) => {
   const groupConfig = input.inputGroupConfig;
   const infoTooltip = input?.infoTooltip;
-  const autoValidate = groupConfig?.autoValidIcons;
+  const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
   const iconValidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { style: { color: "#00bf3e" } });
   const iconInvalidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { style: { color: "#ff8080" } });
   const iconLoadingState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "animate-spin", style: { color: "#1e90ff" } });
@@ -4395,11 +4734,7 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
   const iconsLeft = groupConfig?.iconsLeft ?? [];
   const textLeft = groupConfig?.textLeft;
   const textRight = groupConfig?.textRight;
-  const [isValid2, setIsValid] = React3.useState(() => {
-    const value = form.getValues(input.name);
-    const fieldState = form.getFieldState(input.name);
-    return !fieldState.error && value !== void 0 && value !== "";
-  });
+  const [isValid2, setIsValid] = React3.useState(isValidField(input, form));
   const [showPassword, setShowPassword] = React3.useState(false);
   const isPasswordField = input.keyboardType === "password" /* PASSWORD */;
   const isNumberField = input.keyboardType === "number" /* NUMBER */;
@@ -4409,9 +4744,8 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
     {
       control: form.control,
       name: input.name,
-      render: ({ field, fieldState }) => {
-        const validNow = !fieldState.error && field.value !== void 0 && field.value !== "";
-        if (validNow !== isValid2) setIsValid(validNow);
+      render: ({ field }) => {
+        setIsValid(isValidField(input, form));
         return /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { className: input.className, children: [
           /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { children: /* @__PURE__ */ jsxRuntime.jsx("b", { children: input.label }) }),
           /* @__PURE__ */ jsxRuntime.jsx(FormControl, { className: "shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsxs(InputGroup, { children: [
@@ -4436,6 +4770,7 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
                   }
                   handleOnChage(value, input, field);
                   field.onChange(value);
+                  isValidField(input, form);
                 }
               }
             ),
@@ -4903,7 +5238,7 @@ var FieldSelect = ({ form, input, isSubmitting }) => {
                   }
                 ) }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
-                  lista.map((item) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: getValue(item), children: item.name }, item.id)),
+                  lista.map((item) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: getValue(item), children: item.name }, `${input.name}-${item.id}-s`)),
                   lista.length === 0 && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-sm text-muted-foreground", children: "No hay opciones disponibles" })
                 ] })
               ]
@@ -5513,10 +5848,10 @@ var FieldText = ({ input, form, isSubmitting }) => {
 var TimeInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
-    return /* @__PURE__ */ jsxRuntime.jsx(FieldTimeInput, { input, form, isSubmitting });
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldTimeInput2, { input, form, isSubmitting });
   }
 };
-var FieldTimeInput = ({ form, input, isSubmitting }) => {
+var FieldTimeInput2 = ({ form, input, isSubmitting }) => {
   const groupConfig = input.inputGroupConfig;
   const autoValidate = groupConfig?.autoValidIcons;
   const iconValidState = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { style: { color: "#00bf3e" } });
@@ -5624,6 +5959,7 @@ var inputMap = {
 };
 var InputFactory = class {
   static create(input, form, isSubmitting = false) {
+    input.form = form;
     const inputType = input.inputType ?? "text" /* TEXT */;
     const InputClass = inputMap[inputType] ?? TextInput;
     const instance = new InputClass(input, form, isSubmitting);
@@ -5804,7 +6140,7 @@ var DynamicForm = ({
   });
   React3.useEffect(() => {
     form.reset(initialValues);
-  }, [initialValues, form]);
+  }, []);
   const handleSubmit = (data) => {
     if (readOnly) return;
     startTransition(() => {
@@ -6085,9 +6421,126 @@ var InputList = ({ handleAddInput, inputsTypes }) => {
     );
   }) });
 };
+var GenericFilter = ({
+  filters = [],
+  pagination,
+  autoSubmit = false,
+  defaultValues = {},
+  initPage = 1,
+  initLimit = 10,
+  rangeLimit = [10, 25, 50, 100],
+  onChange,
+  withSearch = true,
+  withInitDate = true,
+  withEndDate = true,
+  withActive = true,
+  withLimit = true,
+  wrapInCard = true
+}) => {
+  const record = {
+    page: initPage,
+    limit: initLimit,
+    ...defaultValues
+  };
+  const [values, setValues] = React3.useState(record);
+  const isFirstRender = React3.useRef(true);
+  React3.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+  }, [values]);
+  const handleChange = (name, value) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+    if (autoSubmit && onChange) onChange({ ...values, [name]: value });
+  };
+  const baseFields = [
+    ...withSearch ? [
+      {
+        name: "search",
+        label: "Buscar",
+        inputType: "text_group" /* TEXT_GROUP */,
+        inputGroupConfig: { iconsLeft: [lucideReact.Search] },
+        onChange: (value) => handleChange("search", value)
+      }
+    ] : [],
+    ...withInitDate ? [
+      {
+        name: "initDate",
+        label: "Fecha de Inicio",
+        inputType: "date" /* DATE */,
+        onChange: (value) => handleChange("initDate", value)
+      }
+    ] : [],
+    ...withEndDate ? [
+      {
+        name: "endDate",
+        label: "Fecha Final",
+        inputType: "date" /* DATE */,
+        onChange: (value) => handleChange("endDate", value)
+      }
+    ] : [],
+    ...withActive ? [
+      {
+        wrapInCard: true,
+        name: "active",
+        label: "",
+        inputType: "button_group" /* BUTTON_GROUP */,
+        description: "Estado",
+        listConfig: {
+          list: [
+            { id: 1, name: "Activo", value: true },
+            { id: 2, name: "Inactivo", value: false },
+            { id: 3, name: "Todos", value: void 0 }
+          ],
+          onOptionChange: (item) => {
+            if (Array.isArray(item) && item[0]) handleChange("active", item[0].value);
+            else if (item && "value" in item) handleChange("active", item.value);
+          }
+        }
+      }
+    ] : [],
+    ...withLimit ? [
+      {
+        name: "limit",
+        label: "L\xEDmite por p\xE1gina",
+        inputType: "select" /* SELECT */,
+        listConfig: {
+          list: rangeLimit.map((num) => ({
+            value: String(num),
+            id: num,
+            name: String(num)
+          })),
+          onOptionChange: (item) => handleChange("limit", Number(item?.value ?? 10))
+        }
+      }
+    ] : []
+  ];
+  const fieldsConfig = [
+    ...filters,
+    baseFields
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col md:flex-row md:items-end gap-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+    DynamicForm,
+    {
+      withCard: wrapInCard,
+      withSubmitBtn: !autoSubmit,
+      formTitle: "",
+      submitBtnLabel: "Buscar",
+      fields: fieldsConfig,
+      record: values,
+      showFormHeader: false,
+      onSubmit: ({ data }) => {
+        if (onChange && !autoSubmit) onChange(data);
+      }
+    }
+  ) }) });
+};
 
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
+exports.AccordionGroupedSwitchInput = AccordionGroupedSwitchInput;
+exports.AccordionGroupedSwitches = AccordionGroupedSwitches;
 exports.AccordionItem = AccordionItem;
 exports.AccordionTrigger = AccordionTrigger;
 exports.Alert = Alert;
@@ -6096,6 +6549,10 @@ exports.AlertTitle = AlertTitle;
 exports.Badge = Badge;
 exports.BaseInput = BaseInput;
 exports.Button = Button;
+exports.ButtonGroup = ButtonGroup;
+exports.ButtonGroupInput = ButtonGroupInput;
+exports.ButtonGroupSeparator = ButtonGroupSeparator;
+exports.ButtonGroupText = ButtonGroupText;
 exports.Calendar = Calendar;
 exports.CalendarDayButton = CalendarDayButton;
 exports.Card = Card;
@@ -6107,10 +6564,23 @@ exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
 exports.CheckListInput = CheckListInput;
 exports.Checkbox = Checkbox;
+exports.CheckboxInput = CheckboxInput;
 exports.ColorCnInput = ColorCnInput;
 exports.ColorInput = ColorInput;
+exports.ComboboxInput = ComboboxInput;
+exports.Command = Command;
+exports.CommandDialog = CommandDialog;
+exports.CommandEmpty = CommandEmpty;
+exports.CommandGroup = CommandGroup;
+exports.CommandInput = CommandInput;
+exports.CommandItem = CommandItem;
+exports.CommandList = CommandList;
+exports.CommandSeparator = CommandSeparator;
+exports.CommandShortcut = CommandShortcut;
+exports.CurrencyInput = CurrencyInput;
 exports.CustomAlert = CustomAlert;
 exports.DateInput = DateInput;
+exports.DateTimeInput = DateTimeInput;
 exports.Dialog = Dialog;
 exports.DialogClose = DialogClose;
 exports.DialogContent = DialogContent;
@@ -6123,32 +6593,69 @@ exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
 exports.DynamicForm = DynamicForm;
 exports.DynamicFormExample = DynamicFormExample;
+exports.Field = Field;
+exports.FieldButtonGroup = FieldButtonGroup;
+exports.FieldContent = FieldContent;
+exports.FieldCurrency = FieldCurrency;
+exports.FieldDateTimeInput = FieldDateTimeInput;
+exports.FieldDescription = FieldDescription;
+exports.FieldError = FieldError;
+exports.FieldFileMultiUpload = FieldFileMultiUpload;
+exports.FieldGroup = FieldGroup;
+exports.FieldKeyValueList = FieldKeyValueList;
+exports.FieldLabel = FieldLabel;
+exports.FieldLegend = FieldLegend;
+exports.FieldRepeater = FieldRepeater;
+exports.FieldSeparator = FieldSeparator;
+exports.FieldSet = FieldSet;
+exports.FieldSimpleCheckList = FieldSimpleCheckList;
+exports.FieldSlider = FieldSlider;
+exports.FieldStringValueList = FieldStringValueList;
+exports.FieldTextGroup = FieldTextGroup;
+exports.FieldTimeInput = FieldTimeInput2;
+exports.FieldTitle = FieldTitle;
 exports.FileInput = FileInput;
+exports.FileMultiUploadInput = FileMultiUploadInput;
 exports.Form = Form;
 exports.FormControl = FormControl;
 exports.FormDescription = FormDescription;
 exports.FormErrorsAlert = FormErrorsAlert;
 exports.FormField = FormField;
+exports.FormFieldsGrid = FormFieldsGrid;
 exports.FormItem = FormItem;
 exports.FormLabel = FormLabel;
 exports.FormMessage = FormMessage;
+exports.GenericFilter = GenericFilter;
 exports.GroupedSwitchInput = GroupedSwitchInput;
 exports.GroupedSwitches = GroupedSwitches;
 exports.Input = Input;
 exports.InputFactory = InputFactory;
+exports.InputGroup = InputGroup;
+exports.InputGroupAddon = InputGroupAddon;
+exports.InputGroupButton = InputGroupButton;
+exports.InputGroupInput = InputGroupInput;
+exports.InputGroupText = InputGroupText;
+exports.InputGroupTextarea = InputGroupTextarea;
 exports.InputList = InputList;
 exports.InputOTP = InputOTP;
 exports.InputOTPGroup = InputOTPGroup;
 exports.InputOTPSeparator = InputOTPSeparator;
 exports.InputOTPSlot = InputOTPSlot;
 exports.InputTypes = InputTypes;
+exports.KeyValueListInput = KeyValueListInput;
 exports.Label = Label;
+exports.MultiSelectInput = MultiSelectInput;
 exports.NumberInput = NumberInput;
 exports.OTPInput = OTPInput2;
 exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
+exports.RadioGroup = RadioGroup;
+exports.RadioGroupInput = RadioGroupInput;
+exports.RadioGroupItem = RadioGroupItem;
+exports.RepeaterInput = RepeaterInput;
+exports.RepeaterTabsInput = RepeaterTabsInput;
 exports.ResizableHandle = ResizableHandle;
 exports.ResizablePanel = ResizablePanel;
 exports.ResizablePanelGroup = ResizablePanelGroup;
@@ -6166,18 +6673,31 @@ exports.SelectSeparator = SelectSeparator;
 exports.SelectTrigger = SelectTrigger;
 exports.SelectValue = SelectValue;
 exports.Separator = Separator;
+exports.SimpleCheckListInput = SimpleCheckListInput;
+exports.Slider = Slider;
+exports.SliderInput = SliderInput;
+exports.SortableListInput = SortableListInput;
+exports.StringValueListInput = StringValueListInput;
 exports.Switch = Switch;
 exports.SwitchInput = SwitchInput;
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList;
+exports.TabsTrigger = TabsTrigger;
+exports.TagInput = TagInput;
 exports.TextAreaInput = TextAreaInput;
 exports.TextInput = TextInput;
+exports.TextInputGroup = TextInputGroup;
 exports.TextInputType = TextInputType;
 exports.Textarea = Textarea;
+exports.TimeInput = TimeInput;
 exports.Toaster = Toaster;
 exports.Tooltip = Tooltip;
 exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
 exports.badgeVariants = badgeVariants;
+exports.buttonGroupVariants = buttonGroupVariants;
 exports.buttonVariants = buttonVariants;
 exports.cn = cn;
 exports.entitiesToGroupedOption = entitiesToGroupedOption;
@@ -6190,6 +6710,7 @@ exports.getDynamicSchema = getDynamicSchema;
 exports.getFieldLabel = getFieldLabel;
 exports.handleOnChage = handleOnChage;
 exports.inputFieldComp = inputFieldComp;
+exports.isValidField = isValidField;
 exports.mockFields = mockFields;
 exports.useFormField = useFormField;
 exports.validationMessages = validationMessages;