shadcn-zod-formkit 1.22.4 → 1.23.0

package/dist/index.d.mts

@@ -219,13 +219,17 @@ interface Props$4<T extends Record<string, any>> {
     withErrorsAlert?: boolean;
     errorAlertPosition?: alertPositionType;
     withCard?: boolean;
+    withFormWrapper?: boolean;
+    withSubmitBtn?: boolean;
     submitBtnLabel?: string;
+    submitBtnLabelSubmiting?: string;
     submitBtnClass?: string;
+    btnGroupDirection?: 'flex-start' | 'flex-end' | 'flex-center';
     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, listBtnConfig, 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, submitBtnLabelSubmiting, withFormWrapper, btnGroupDirection, withSubmitBtn }: Props$4<T>) => react_jsx_runtime.JSX.Element;
 
 declare const DynamicFormExample: () => react_jsx_runtime.JSX.Element;
 declare const mockFields: Array<FieldProps | FieldProps[]>;

package/dist/index.d.ts

@@ -219,13 +219,17 @@ interface Props$4<T extends Record<string, any>> {
     withErrorsAlert?: boolean;
     errorAlertPosition?: alertPositionType;
     withCard?: boolean;
+    withFormWrapper?: boolean;
+    withSubmitBtn?: boolean;
     submitBtnLabel?: string;
+    submitBtnLabelSubmiting?: string;
     submitBtnClass?: string;
+    btnGroupDirection?: 'flex-start' | 'flex-end' | 'flex-center';
     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, listBtnConfig, 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, submitBtnLabelSubmiting, withFormWrapper, btnGroupDirection, withSubmitBtn }: Props$4<T>) => react_jsx_runtime.JSX.Element;
 
 declare const DynamicFormExample: () => react_jsx_runtime.JSX.Element;
 declare const mockFields: Array<FieldProps | FieldProps[]>;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CheckIcon, XIcon, MinusIcon, GripVerticalIcon, ChevronUpIcon, CalendarIcon, EyeOff, Eye, Pencil, Loader2, Save, Plus, MessageCircleWarning, Info, CircleCheck, CircleX, Trash2, ChevronsUpDown, Check, Upload, GripVertical, SearchIcon, CircleIcon } from 'lucide-react';
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CheckIcon, XIcon, MinusIcon, GripVerticalIcon, ChevronUpIcon, CalendarIcon, EyeOff, Eye, Loader2, Save, Pencil, Plus, MessageCircleWarning, Info, CircleCheck, CircleX, Trash2, ChevronsUpDown, Check, Upload, GripVertical, SearchIcon, CircleIcon } from 'lucide-react';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { cva } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
@@ -5617,9 +5617,13 @@ var DynamicForm = ({
   withErrorsAlert = true,
   errorAlertPosition = "up",
   withCard = false,
-  submitBtnClass = "",
+  submitBtnClass,
   listBtnConfig = [],
-  submitBtnLabel = "Guardar"
+  submitBtnLabel = "Guardar",
+  submitBtnLabelSubmiting = "Guardando...",
+  withFormWrapper = true,
+  btnGroupDirection = "flex-end",
+  withSubmitBtn = true
 }) => {
   const [isPending, startTransition] = useTransition();
   const schema = useMemo(() => {
@@ -5650,6 +5654,56 @@ var DynamicForm = ({
     const resp = { data, form };
     onClick(resp);
   };
+  const formBody = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-full grid grid-cols-1", children: [
+      /* @__PURE__ */ jsx(
+        FormFieldsGrid,
+        {
+          fields,
+          form,
+          readOnly
+        }
+      ),
+      children && /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center gap-2 w-full h-full", children })
+    ] }),
+    /* @__PURE__ */ jsxs(ButtonGroup, { className: "flex flex-row w-full h-full", style: {
+      justifyContent: btnGroupDirection,
+      // Alinea horizontalmente a la derecha
+      alignItems: "center"
+      // Centra verticalmente (opcional)
+    }, children: [
+      listBtnConfig.map((btn, key) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: btn.btnType,
+          size: "icon-lg",
+          className: submitBtnClass,
+          variant: btn.variant,
+          onClick: btn.onClick,
+          disabled: btn.disabled,
+          children: btn.label
+        },
+        key
+      )),
+      !readOnly && withSubmitBtn && /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: onClick ? "button" : "submit",
+          size: "icon-lg",
+          className: cn("text-lg", submitBtnClass),
+          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
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Save, { className: "h-5 w-5 mr-2" }),
+            submitBtnLabel
+          ] })
+        }
+      )
+    ] })
+  ] });
   const formContent = /* @__PURE__ */ jsxs("div", { children: [
     showFormHeader && /* @__PURE__ */ jsxs(CardTitle, { className: "flex flex-row items-center gap-2 p-2 border-b", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-2 w-full", children: [
@@ -5668,58 +5722,8 @@ var DynamicForm = ({
         fields
       }
     ),
-    /* @__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: [
-          /* @__PURE__ */ jsxs("div", { className: "w-full grid grid-cols-1", children: [
-            /* @__PURE__ */ jsx(
-              FormFieldsGrid,
-              {
-                fields,
-                form,
-                readOnly
-              }
-            ),
-            children && /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center gap-2 w-full h-full", children })
-          ] }),
-          /* @__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
-                ] })
-              }
-            )
-          ] })
-        ]
-      }
-    ) }),
+    withFormWrapper && /* @__PURE__ */ jsx(FormWrapper, { form, handleSubmit, children: formBody }),
+    !withFormWrapper && formBody,
     withErrorsAlert && errorAlertPosition === "down" && /* @__PURE__ */ jsx(
       FormErrorsAlert,
       {
@@ -5731,6 +5735,16 @@ 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(
+    "form",
+    {
+      onSubmit: form.handleSubmit(handleSubmit),
+      className: `flex flex-col gap-2 ${readOnly ? "opacity-70 pointer-events-none select-none" : ""}`,
+      children
+    }
+  ) });
+};
 var DynamicFormExample = () => {
   const record = {
     username: "John Doe ",