shadcn-zod-formkit 1.18.1 → 1.20.0

package/dist/index.d.mts

@@ -81,6 +81,7 @@ declare const inputFieldComp: InputTypes[];
 interface FieldProps<T = Record<string, any>> {
     name: keyof T;
     label: string;
+    onChange?: (...event: any[]) => void;
     tabLabelField?: string;
     childrenPosition?: 'up' | 'down';
     children?: ReactNode | ((item: any, index: number) => ReactNode);
@@ -137,6 +138,13 @@ interface ListConfig {
     selectedList?: InputOption[];
     sortable?: boolean;
 }
+interface BtnConfig {
+    label: string;
+    btnType: 'submit' | 'button';
+    onClick: () => void;
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    disabled?: boolean;
+}
 interface InputOption {
     id: number | string;
     name: string;
@@ -212,8 +220,9 @@ interface Props$4<T extends Record<string, any>> {
     submitBtnClass?: string;
     children?: ReactNode;
     childrenHeader?: ReactNode;
+    listBtnConfig?: BtnConfig[];
 }
-declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onSubmit, onClick, extraValidations, children, childrenHeader, showIcon, showFormHeader, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, submitBtnLabel, }: Props$4<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onSubmit, onClick, extraValidations, children, childrenHeader, showIcon, showFormHeader, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, listBtnConfig, submitBtnLabel, }: Props$4<T>) => react_jsx_runtime.JSX.Element;
 
 declare const DynamicFormExample: () => react_jsx_runtime.JSX.Element;
 declare const mockFields: Array<FieldProps | FieldProps[]>;
@@ -311,14 +320,14 @@ declare function AlertTitle({ className, ...props }: React$1.ComponentProps<"div
 declare function AlertDescription({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "secondary" | "outline" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
+    variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
@@ -438,4 +447,4 @@ declare function TooltipContent({ className, sideOffset, children, ...props }: R
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, ColorCnInput, type ColorCompProps, ColorInput, CustomAlert, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, type FieldProps, FileInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormItem, FormLabel, FormMessage, type FormResp, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, Label, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, SwitchInput, TextAreaInput, TextInput, TextInputType, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, getDefaultValues, getDynamicSchema, getFieldLabel, inputFieldComp, mockFields, useFormField, validationMessages };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, ColorCnInput, type ColorCompProps, ColorInput, CustomAlert, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, type FieldProps, FileInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormItem, FormLabel, FormMessage, type FormResp, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, Label, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, SwitchInput, TextAreaInput, TextInput, TextInputType, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, getDefaultValues, getDynamicSchema, getFieldLabel, inputFieldComp, mockFields, useFormField, validationMessages };

package/dist/index.d.ts

@@ -81,6 +81,7 @@ declare const inputFieldComp: InputTypes[];
 interface FieldProps<T = Record<string, any>> {
     name: keyof T;
     label: string;
+    onChange?: (...event: any[]) => void;
     tabLabelField?: string;
     childrenPosition?: 'up' | 'down';
     children?: ReactNode | ((item: any, index: number) => ReactNode);
@@ -137,6 +138,13 @@ interface ListConfig {
     selectedList?: InputOption[];
     sortable?: boolean;
 }
+interface BtnConfig {
+    label: string;
+    btnType: 'submit' | 'button';
+    onClick: () => void;
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    disabled?: boolean;
+}
 interface InputOption {
     id: number | string;
     name: string;
@@ -212,8 +220,9 @@ interface Props$4<T extends Record<string, any>> {
     submitBtnClass?: string;
     children?: ReactNode;
     childrenHeader?: ReactNode;
+    listBtnConfig?: BtnConfig[];
 }
-declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onSubmit, onClick, extraValidations, children, childrenHeader, showIcon, showFormHeader, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, submitBtnLabel, }: Props$4<T>) => react_jsx_runtime.JSX.Element;
+declare const DynamicForm: <T extends Record<string, any>>({ formTitle, formSubTitle, fields, readOnly, record, onSubmit, onClick, extraValidations, children, childrenHeader, showIcon, showFormHeader, withErrorsAlert, errorAlertPosition, withCard, submitBtnClass, listBtnConfig, submitBtnLabel, }: Props$4<T>) => react_jsx_runtime.JSX.Element;
 
 declare const DynamicFormExample: () => react_jsx_runtime.JSX.Element;
 declare const mockFields: Array<FieldProps | FieldProps[]>;
@@ -311,14 +320,14 @@ declare function AlertTitle({ className, ...props }: React$1.ComponentProps<"div
 declare function AlertDescription({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "secondary" | "outline" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
+    variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
@@ -438,4 +447,4 @@ declare function TooltipContent({ className, sideOffset, children, ...props }: R
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, ColorCnInput, type ColorCompProps, ColorInput, CustomAlert, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, type FieldProps, FileInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormItem, FormLabel, FormMessage, type FormResp, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, Label, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, SwitchInput, TextAreaInput, TextInput, TextInputType, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, getDefaultValues, getDynamicSchema, getFieldLabel, inputFieldComp, mockFields, useFormField, validationMessages };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, type BtnConfig, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, ColorCnInput, type ColorCompProps, ColorInput, CustomAlert, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, type FieldProps, FileInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormItem, FormLabel, FormMessage, type FormResp, type GroupedOption, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, Label, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, SwitchInput, TextAreaInput, TextInput, TextInputType, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, getDefaultValues, getDynamicSchema, getFieldLabel, inputFieldComp, mockFields, useFormField, validationMessages };

package/dist/index.mjs

@@ -1768,31 +1768,29 @@ function ButtonGroup({
 var ButtonGroupInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
-    return /* @__PURE__ */ jsx(FieldButtonGroup, { input, form, isSubmitting });
+    const className = input.className;
+    return /* @__PURE__ */ jsx(FieldButtonGroup, { input, form, isSubmitting, className });
   }
 };
-var FieldButtonGroup = ({ input, form, isSubmitting }) => {
+var FieldButtonGroup = ({ input, form, isSubmitting, className = "w-full flex-1" }) => {
   const options = (input.listConfig?.list ?? []).filter((option) => "name" in option);
   const handleSelect = (value) => {
     form.setValue(input.name, value, { shouldValidate: true });
+    if (input.listConfig?.onOptionChange) input.listConfig.onOptionChange(value);
   };
   const selectedValue = form.watch(input.name);
-  return (
-    // <div className="flex flex-col gap-1 w-full">
-    //   <label className="font-semibold">{input.label}</label>
-    //   <div className="flex flex-wrap gap-2">
-    /* @__PURE__ */ jsx(ButtonGroup, { children: options.map((option) => /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "button",
-        variant: selectedValue === option.value ? "default" : "outline",
-        onClick: () => handleSelect(option.value),
-        disabled: isSubmitting,
-        children: option.label ?? option.name
-      },
-      option.value
-    )) })
-  );
+  return /* @__PURE__ */ jsx(ButtonGroup, { className: "flex flex-row  w-full", children: options.map((option) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      className,
+      variant: selectedValue === option.value ? "default" : "outline",
+      onClick: () => handleSelect(option.value),
+      disabled: isSubmitting,
+      children: option.label ?? option.name
+    },
+    option.value
+  )) });
 };
 var CheckListInput = class extends BaseInput {
   render() {
@@ -3982,7 +3980,6 @@ var FieldFile = ({ form, input, isSubmitting }) => {
     if (file) {
       const objectUrl = URL.createObjectURL(file);
       setPreview(objectUrl);
-      console.log("\u{1F680} ~ handleFileChange ~ objectUrl:", objectUrl);
     } else {
       setPreview(null);
     }
@@ -4340,7 +4337,8 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
     return !fieldState.error && value !== void 0 && value !== "";
   });
   const [showPassword, setShowPassword] = useState(false);
-  const isPasswordField = input.keyboardType === "password";
+  const isPasswordField = input.keyboardType === "password" /* PASSWORD */;
+  const isNumberField = input.keyboardType === "number" /* NUMBER */;
   const showInputGroupAddons = iconsRight.length > 0 || textRight || autoValidate || infoTooltip || isPasswordField;
   const formField = /* @__PURE__ */ jsx(
     FormField,
@@ -4362,8 +4360,18 @@ var FieldTextGroup = ({ form, input, isSubmitting }) => {
               {
                 placeholder: input.placeHolder,
                 disabled: input.disabled || isSubmitting,
-                ...field,
-                type: isPasswordField && !showPassword ? "password" : "text"
+                onBlur: field.onBlur,
+                name: field.name,
+                ref: field.ref,
+                type: isPasswordField && !showPassword ? "password" : isNumberField ? "number" : "text",
+                value: field.value ?? "",
+                onChange: (e) => {
+                  let value = e.target.value;
+                  if (isNumberField) {
+                    value = e.target.value === "" ? "" : Number(e.target.value);
+                  }
+                  field.onChange(value);
+                }
               }
             ),
             showInputGroupAddons && /* @__PURE__ */ jsxs(InputGroupAddon, { align: "inline-end", children: [
@@ -5592,6 +5600,7 @@ var DynamicForm = ({
   errorAlertPosition = "up",
   withCard = false,
   submitBtnClass = "",
+  listBtnConfig = [],
   submitBtnLabel = "Guardar"
 }) => {
   const [isPending, startTransition] = useTransition();
@@ -5642,23 +5651,38 @@ var DynamicForm = ({
             /* @__PURE__ */ jsx(FormFieldsGrid, { fields, form, readOnly }),
             children && /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center gap-2 w-full h-full", children })
           ] }),
-          !readOnly && /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-2 justify-end items-end", children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: onClick ? "button" : "submit",
-              size: "lg",
-              className: submitBtnClass,
-              disabled: isPending,
-              onClick: onClick ? handleClick : void 0,
-              children: isPending ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
-                "Guardando..."
-              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(Save, { className: "h-4 w-4 mr-2" }),
-                submitBtnLabel
-              ] })
-            }
-          ) })
+          /* @__PURE__ */ jsxs(ButtonGroup, { className: "flex flex-row  w-full", children: [
+            listBtnConfig.map((btn, key) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: btn.btnType,
+                size: "lg",
+                className: submitBtnClass,
+                variant: btn.variant,
+                onClick: btn.onClick,
+                disabled: btn.disabled,
+                children: btn.label
+              },
+              key
+            )),
+            !readOnly && /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: onClick ? "button" : "submit",
+                size: "lg",
+                className: submitBtnClass,
+                disabled: isPending,
+                onClick: onClick ? handleClick : void 0,
+                children: isPending ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
+                  "Guardando..."
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Save, { className: "h-4 w-4 mr-2" }),
+                  submitBtnLabel
+                ] })
+              }
+            )
+          ] })
         ]
       }
     ) }),