@juv/codego-react-ui 3.2.7 → 3.3.0

package/dist/index.cjs

@@ -6471,7 +6471,21 @@ function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOv
     reload: () => setTick((t) => t + 1)
   };
 }
-function ModalShell({ title, onClose, children, footer }) {
+var MODAL_WIDTH = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "3xl": "max-w-3xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl",
+  "6xl": "max-w-6xl",
+  "7xl": "max-w-7xl",
+  screen: "max-w-screen-xl",
+  full: "max-w-full"
+};
+function ModalShell({ title, onClose, children, footer, width = "lg" }) {
   return (0, import_react_dom2.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
@@ -6481,7 +6495,7 @@ function ModalShell({ title, onClose, children, footer }) {
         onMouseDown: (e) => {
           if (e.target === e.currentTarget) onClose();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: `relative w-full ${MODAL_WIDTH[width]} rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]`, children: [
           /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h2", { className: "text-base font-semibold", children: title }),
             /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react17.X, { className: "h-4 w-4" }) })
@@ -6645,13 +6659,15 @@ function FieldRenderer({ field, value, onChange }) {
 function ViewModal({
   item,
   fields,
-  onClose
+  onClose,
+  width
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     ModalShell,
     {
       title: "View Details",
       onClose,
+      width,
       footer: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { variant: "outline", size: "sm", onClick: onClose, children: "Close" }),
       children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "space-y-3", children: fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xs font-semibold text-muted-foreground mb-1", children: f.label }),
@@ -6669,7 +6685,8 @@ function EditModal({
   onClose,
   onSuccess,
   notif,
-  grid
+  grid,
+  width
 }) {
   const [form, setForm] = React28.useState(() => {
     const init = {};
@@ -6717,6 +6734,7 @@ function EditModal({
     {
       title: "Edit Record",
       onClose,
+      width,
       footer: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { variant: "outline", size: "sm", onClick: onClose, disabled: loading, children: "Cancel" }),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Button, { size: "sm", onClick: handleSubmit, disabled: loading, children: [
@@ -6801,6 +6819,7 @@ function DeleteModal({
     {
       title: "Confirm Delete",
       onClose,
+      width: "lg",
       footer: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { variant: "outline", size: "sm", onClick: onClose, disabled: loading, children: "Cancel" }),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Button, { variant: "danger", size: "sm", onClick: handleDelete, disabled: loading, children: [
@@ -6820,17 +6839,19 @@ function ActionBtn({
   defaultIcon,
   defaultLabel,
   defaultVariant,
+  defaultSize,
   onClick
 }) {
   const mode = cfg?.displayMode ?? "icon";
   const icon = cfg?.icon ?? defaultIcon;
   const label = cfg?.label ?? defaultLabel;
+  const buttonSize = cfg?.size ?? defaultSize ?? "xs";
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     Button,
     {
       type: "button",
       title: label,
-      size: cfg?.size ?? "xs",
+      size: buttonSize,
       variant: cfg?.variant ?? defaultVariant,
       rounded: cfg?.rounded ?? "lg",
       gradientFrom: cfg?.gradientFrom,
@@ -6939,6 +6960,7 @@ function Table({
             defaultIcon: extra.icon,
             defaultLabel: extra.label ?? extra.key,
             defaultVariant: extra.variant ?? "outline",
+            defaultSize: defaultActions.actionsSize,
             onClick: () => extra.onClick(item)
           },
           extra.key
@@ -7278,6 +7300,7 @@ function Table({
       {
         item: viewItem,
         fields: viewFields,
+        width: defaultActions.modalWidth,
         onClose: () => setViewItem(null)
       }
     ),
@@ -7290,6 +7313,7 @@ function Table({
         itemId: String(editItem[actionIdKey] ?? ""),
         notif: defaultActions.onSuccessNotif,
         grid: defaultActions.editFormGrid,
+        width: defaultActions.modalWidth,
         onClose: () => setEditItem(null),
         onSuccess: (updated) => {
           setTableData(
@@ -7410,17 +7434,19 @@ function ActionBtn2({
   defaultIcon,
   defaultLabel,
   defaultVariant,
+  defaultSize,
   onClick
 }) {
   const mode = cfg?.displayMode ?? "icon";
   const icon = cfg?.icon ?? defaultIcon;
   const label = cfg?.label ?? defaultLabel;
+  const buttonSize = cfg?.size ?? defaultSize ?? "xs";
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     Button,
     {
       type: "button",
       title: label,
-      size: cfg?.size ?? "xs",
+      size: buttonSize,
       variant: cfg?.variant ?? defaultVariant,
       rounded: cfg?.rounded ?? "lg",
       gradientFrom: cfg?.gradientFrom,
@@ -7439,7 +7465,7 @@ function ActionBtn2({
     }
   );
 }
-function DGModalShell({ title, onClose, children, footer }) {
+function DGModalShell({ title, onClose, children, footer, width = "lg" }) {
   return (0, import_react_dom3.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
@@ -7449,7 +7475,7 @@ function DGModalShell({ title, onClose, children, footer }) {
         onMouseDown: (e) => {
           if (e.target === e.currentTarget) onClose();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: `relative w-full ${MODAL_WIDTH[width]} rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]`, children: [
           /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h2", { className: "text-base font-semibold", children: title }),
             /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.X, { className: "h-4 w-4" }) })
@@ -7532,12 +7558,13 @@ function DGFieldRenderer({ field, value, onChange }) {
       return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Input, { inputType: field.inputType ?? "text", value: value ?? "", onChange: (e) => onChange(e.target.value), placeholder: field.placeholder ?? field.label });
   }
 }
-function DGViewModal({ item, fields, onClose }) {
+function DGViewModal({ item, fields, onClose, width }) {
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     DGModalShell,
     {
       title: "View Details",
       onClose,
+      width,
       footer: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { onClick: onClose, className: "px-4 py-1.5 text-sm rounded-xl border border-border hover:bg-accent transition-colors", children: "Close" }),
       children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "space-y-3", children: fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xs font-semibold text-muted-foreground mb-1", children: f.label }),
@@ -7555,7 +7582,8 @@ function DGEditModal({
   onClose,
   onSuccess,
   notif,
-  grid
+  grid,
+  width
 }) {
   const [form, setForm] = React29.useState(() => {
     const init = {};
@@ -7603,6 +7631,7 @@ function DGEditModal({
     {
       title: "Edit Record",
       onClose,
+      width,
       footer: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { onClick: onClose, disabled: loading, className: "px-4 py-1.5 text-sm rounded-xl border border-border hover:bg-accent transition-colors", children: "Cancel" }),
         /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("button", { onClick: handleSubmit, disabled: loading, className: "px-4 py-1.5 text-sm rounded-xl bg-primary text-primary-foreground hover:bg-primary-hover transition-colors flex items-center gap-1.5", children: [
@@ -7662,6 +7691,7 @@ function DGDeleteModal({
     {
       title: "Confirm Delete",
       onClose,
+      width: "lg",
       footer: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { onClick: onClose, disabled: loading, className: "px-4 py-1.5 text-sm rounded-xl border border-border hover:bg-accent transition-colors", children: "Cancel" }),
         /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("button", { onClick: handleDelete, disabled: loading, className: "px-4 py-1.5 text-sm rounded-xl bg-danger text-danger-foreground hover:bg-danger-hover transition-colors flex items-center gap-1.5", children: [
@@ -7782,6 +7812,7 @@ function DataGrid({
           defaultIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Eye, { className: "h-3.5 w-3.5" }),
           defaultLabel: "View",
           defaultVariant: "outline",
+          defaultSize: defaultActions.actionsSize,
           onClick: () => setViewItem(row)
         }
       ),
@@ -7792,6 +7823,7 @@ function DataGrid({
           defaultIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Pencil, { className: "h-3.5 w-3.5" }),
           defaultLabel: "Edit",
           defaultVariant: "outline",
+          defaultSize: defaultActions.actionsSize,
           onClick: () => setEditItem(row)
         }
       ),
@@ -7802,6 +7834,7 @@ function DataGrid({
           defaultIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Trash, { className: "h-3.5 w-3.5" }),
           defaultLabel: "Delete",
           defaultVariant: "danger",
+          defaultSize: defaultActions.actionsSize,
           onClick: () => setDeleteItem(row)
         }
       ),
@@ -7812,6 +7845,7 @@ function DataGrid({
           defaultIcon: extra.icon,
           defaultLabel: extra.label ?? extra.key,
           defaultVariant: extra.variant ?? "outline",
+          defaultSize: defaultActions.actionsSize,
           onClick: () => extra.onClick(row)
         },
         extra.key
@@ -8016,7 +8050,7 @@ function DataGrid({
         ] })
       ] });
     })(),
-    defaultActions && viewItem && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DGViewModal, { item: viewItem, fields: viewFields, onClose: () => setViewItem(null) }),
+    defaultActions && viewItem && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DGViewModal, { item: viewItem, fields: viewFields, width: defaultActions.modalWidth, onClose: () => setViewItem(null) }),
     defaultActions && editItem && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       DGEditModal,
       {
@@ -8026,6 +8060,7 @@ function DataGrid({
         itemId: String(editItem[actionIdKey] ?? ""),
         notif: defaultActions.onSuccessNotif,
         grid: defaultActions.editFormGrid,
+        width: defaultActions.modalWidth,
         onClose: () => setEditItem(null),
         onSuccess: (updated) => {
           setTableData((prev) => prev.map((r) => String(r[actionIdKey]) === String(updated[actionIdKey]) ? updated : r));

package/dist/index.d.cts

@@ -345,6 +345,10 @@ interface DefaultActionsConfig<T> {
     viewForm?: ActionField[];
     /** Grid columns for the edit form layout (e.g. 2 = two-column grid). Default single column. */
     editFormGrid?: number;
+    /** Size of the View / Edit / Delete / extra action buttons. Default "xs". */
+    actionsSize?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    /** Width of the Edit/View/Delete modal. Default "lg". */
+    modalWidth?: ModalWidth;
     /** Called after a successful edit or delete so the parent can refresh data. */
     onSuccess?: (action: "edit" | "delete", item: T) => void;
     /** Show a toast or notification banner on successful edit/delete */
@@ -378,6 +382,21 @@ interface ActionSuccessNotif {
     /** Extra action element rendered inside the notification */
     action?: React.ReactNode;
 }
+declare const MODAL_WIDTH: {
+    readonly sm: "max-w-sm";
+    readonly md: "max-w-md";
+    readonly lg: "max-w-lg";
+    readonly xl: "max-w-xl";
+    readonly '2xl': "max-w-2xl";
+    readonly '3xl': "max-w-3xl";
+    readonly '4xl': "max-w-4xl";
+    readonly '5xl': "max-w-5xl";
+    readonly '6xl': "max-w-6xl";
+    readonly '7xl': "max-w-7xl";
+    readonly screen: "max-w-screen-xl";
+    readonly full: "max-w-full";
+};
+type ModalWidth = keyof typeof MODAL_WIDTH;
 interface Column<T> {
     key: keyof T | string;
     title: string;

package/dist/index.d.ts

@@ -345,6 +345,10 @@ interface DefaultActionsConfig<T> {
     viewForm?: ActionField[];
     /** Grid columns for the edit form layout (e.g. 2 = two-column grid). Default single column. */
     editFormGrid?: number;
+    /** Size of the View / Edit / Delete / extra action buttons. Default "xs". */
+    actionsSize?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    /** Width of the Edit/View/Delete modal. Default "lg". */
+    modalWidth?: ModalWidth;
     /** Called after a successful edit or delete so the parent can refresh data. */
     onSuccess?: (action: "edit" | "delete", item: T) => void;
     /** Show a toast or notification banner on successful edit/delete */
@@ -378,6 +382,21 @@ interface ActionSuccessNotif {
     /** Extra action element rendered inside the notification */
     action?: React.ReactNode;
 }
+declare const MODAL_WIDTH: {
+    readonly sm: "max-w-sm";
+    readonly md: "max-w-md";
+    readonly lg: "max-w-lg";
+    readonly xl: "max-w-xl";
+    readonly '2xl': "max-w-2xl";
+    readonly '3xl': "max-w-3xl";
+    readonly '4xl': "max-w-4xl";
+    readonly '5xl': "max-w-5xl";
+    readonly '6xl': "max-w-6xl";
+    readonly '7xl': "max-w-7xl";
+    readonly screen: "max-w-screen-xl";
+    readonly full: "max-w-full";
+};
+type ModalWidth = keyof typeof MODAL_WIDTH;
 interface Column<T> {
     key: keyof T | string;
     title: string;

package/dist/index.global.js

@@ -69617,7 +69617,21 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       reload: () => setTick((t) => t + 1)
     };
   }
-  function ModalShell({ title, onClose, children, footer }) {
+  var MODAL_WIDTH = {
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-lg",
+    xl: "max-w-xl",
+    "2xl": "max-w-2xl",
+    "3xl": "max-w-3xl",
+    "4xl": "max-w-4xl",
+    "5xl": "max-w-5xl",
+    "6xl": "max-w-6xl",
+    "7xl": "max-w-7xl",
+    screen: "max-w-screen-xl",
+    full: "max-w-full"
+  };
+  function ModalShell({ title, onClose, children, footer, width = "lg" }) {
     return (0, import_react_dom2.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "div",
@@ -69627,7 +69641,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           onMouseDown: (e) => {
             if (e.target === e.currentTarget) onClose();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: `relative w-full ${MODAL_WIDTH[width]} rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]`, children: [
             /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
               /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h2", { className: "text-base font-semibold", children: title }),
               /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(X, { className: "h-4 w-4" }) })
@@ -69791,13 +69805,15 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
   function ViewModal({
     item,
     fields,
-    onClose
+    onClose,
+    width
   }) {
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       ModalShell,
       {
         title: "View Details",
         onClose,
+        width,
         footer: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { variant: "outline", size: "sm", onClick: onClose, children: "Close" }),
         children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "space-y-3", children: fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xs font-semibold text-muted-foreground mb-1", children: f.label }),
@@ -69815,7 +69831,8 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     onClose,
     onSuccess,
     notif,
-    grid
+    grid,
+    width
   }) {
     const [form, setForm] = React28.useState(() => {
       const init = {};
@@ -69863,6 +69880,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       {
         title: "Edit Record",
         onClose,
+        width,
         footer: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { variant: "outline", size: "sm", onClick: onClose, disabled: loading, children: "Cancel" }),
           /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Button, { size: "sm", onClick: handleSubmit, disabled: loading, children: [
@@ -69947,6 +69965,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       {
         title: "Confirm Delete",
         onClose,
+        width: "lg",
         footer: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { variant: "outline", size: "sm", onClick: onClose, disabled: loading, children: "Cancel" }),
           /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Button, { variant: "danger", size: "sm", onClick: handleDelete, disabled: loading, children: [
@@ -69966,17 +69985,19 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     defaultIcon,
     defaultLabel,
     defaultVariant,
+    defaultSize,
     onClick
   }) {
     const mode = cfg?.displayMode ?? "icon";
     const icon = cfg?.icon ?? defaultIcon;
     const label = cfg?.label ?? defaultLabel;
+    const buttonSize = cfg?.size ?? defaultSize ?? "xs";
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       Button,
       {
         type: "button",
         title: label,
-        size: cfg?.size ?? "xs",
+        size: buttonSize,
         variant: cfg?.variant ?? defaultVariant,
         rounded: cfg?.rounded ?? "lg",
         gradientFrom: cfg?.gradientFrom,
@@ -70085,6 +70106,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
               defaultIcon: extra.icon,
               defaultLabel: extra.label ?? extra.key,
               defaultVariant: extra.variant ?? "outline",
+              defaultSize: defaultActions.actionsSize,
               onClick: () => extra.onClick(item)
             },
             extra.key
@@ -70424,6 +70446,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
         {
           item: viewItem,
           fields: viewFields,
+          width: defaultActions.modalWidth,
           onClose: () => setViewItem(null)
         }
       ),
@@ -70436,6 +70459,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           itemId: String(editItem[actionIdKey] ?? ""),
           notif: defaultActions.onSuccessNotif,
           grid: defaultActions.editFormGrid,
+          width: defaultActions.modalWidth,
           onClose: () => setEditItem(null),
           onSuccess: (updated) => {
             setTableData(
@@ -70556,17 +70580,19 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     defaultIcon,
     defaultLabel,
     defaultVariant,
+    defaultSize,
     onClick
   }) {
     const mode = cfg?.displayMode ?? "icon";
     const icon = cfg?.icon ?? defaultIcon;
     const label = cfg?.label ?? defaultLabel;
+    const buttonSize = cfg?.size ?? defaultSize ?? "xs";
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       Button,
       {
         type: "button",
         title: label,
-        size: cfg?.size ?? "xs",
+        size: buttonSize,
         variant: cfg?.variant ?? defaultVariant,
         rounded: cfg?.rounded ?? "lg",
         gradientFrom: cfg?.gradientFrom,
@@ -70585,7 +70611,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       }
     );
   }
-  function DGModalShell({ title, onClose, children, footer }) {
+  function DGModalShell({ title, onClose, children, footer, width = "lg" }) {
     return (0, import_react_dom3.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "div",
@@ -70595,7 +70621,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           onMouseDown: (e) => {
             if (e.target === e.currentTarget) onClose();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: `relative w-full ${MODAL_WIDTH[width]} rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]`, children: [
             /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
               /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h2", { className: "text-base font-semibold", children: title }),
               /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(X, { className: "h-4 w-4" }) })
@@ -70678,12 +70704,13 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
         return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Input, { inputType: field.inputType ?? "text", value: value ?? "", onChange: (e) => onChange(e.target.value), placeholder: field.placeholder ?? field.label });
     }
   }
-  function DGViewModal({ item, fields, onClose }) {
+  function DGViewModal({ item, fields, onClose, width }) {
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       DGModalShell,
       {
         title: "View Details",
         onClose,
+        width,
         footer: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { onClick: onClose, className: "px-4 py-1.5 text-sm rounded-xl border border-border hover:bg-accent transition-colors", children: "Close" }),
         children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "space-y-3", children: fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xs font-semibold text-muted-foreground mb-1", children: f.label }),
@@ -70701,7 +70728,8 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     onClose,
     onSuccess,
     notif,
-    grid
+    grid,
+    width
   }) {
     const [form, setForm] = React29.useState(() => {
       const init = {};
@@ -70749,6 +70777,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       {
         title: "Edit Record",
         onClose,
+        width,
         footer: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { onClick: onClose, disabled: loading, className: "px-4 py-1.5 text-sm rounded-xl border border-border hover:bg-accent transition-colors", children: "Cancel" }),
           /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("button", { onClick: handleSubmit, disabled: loading, className: "px-4 py-1.5 text-sm rounded-xl bg-primary text-primary-foreground hover:bg-primary-hover transition-colors flex items-center gap-1.5", children: [
@@ -70808,6 +70837,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       {
         title: "Confirm Delete",
         onClose,
+        width: "lg",
         footer: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { onClick: onClose, disabled: loading, className: "px-4 py-1.5 text-sm rounded-xl border border-border hover:bg-accent transition-colors", children: "Cancel" }),
           /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("button", { onClick: handleDelete, disabled: loading, className: "px-4 py-1.5 text-sm rounded-xl bg-danger text-danger-foreground hover:bg-danger-hover transition-colors flex items-center gap-1.5", children: [
@@ -70928,6 +70958,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
             defaultIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Eye, { className: "h-3.5 w-3.5" }),
             defaultLabel: "View",
             defaultVariant: "outline",
+            defaultSize: defaultActions.actionsSize,
             onClick: () => setViewItem(row)
           }
         ),
@@ -70938,6 +70969,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
             defaultIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Pencil, { className: "h-3.5 w-3.5" }),
             defaultLabel: "Edit",
             defaultVariant: "outline",
+            defaultSize: defaultActions.actionsSize,
             onClick: () => setEditItem(row)
           }
         ),
@@ -70948,6 +70980,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
             defaultIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Trash, { className: "h-3.5 w-3.5" }),
             defaultLabel: "Delete",
             defaultVariant: "danger",
+            defaultSize: defaultActions.actionsSize,
             onClick: () => setDeleteItem(row)
           }
         ),
@@ -70958,6 +70991,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
             defaultIcon: extra.icon,
             defaultLabel: extra.label ?? extra.key,
             defaultVariant: extra.variant ?? "outline",
+            defaultSize: defaultActions.actionsSize,
             onClick: () => extra.onClick(row)
           },
           extra.key
@@ -71162,7 +71196,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           ] })
         ] });
       })(),
-      defaultActions && viewItem && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DGViewModal, { item: viewItem, fields: viewFields, onClose: () => setViewItem(null) }),
+      defaultActions && viewItem && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DGViewModal, { item: viewItem, fields: viewFields, width: defaultActions.modalWidth, onClose: () => setViewItem(null) }),
       defaultActions && editItem && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         DGEditModal,
         {
@@ -71172,6 +71206,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           itemId: String(editItem[actionIdKey] ?? ""),
           notif: defaultActions.onSuccessNotif,
           grid: defaultActions.editFormGrid,
+          width: defaultActions.modalWidth,
           onClose: () => setEditItem(null),
           onSuccess: (updated) => {
             setTableData((prev) => prev.map((r2) => String(r2[actionIdKey]) === String(updated[actionIdKey]) ? updated : r2));

package/dist/index.js

@@ -6353,7 +6353,21 @@ function useServerTable({ url, params, encrypt, key, decryptPayloadLog, columnOv
     reload: () => setTick((t) => t + 1)
   };
 }
-function ModalShell({ title, onClose, children, footer }) {
+var MODAL_WIDTH = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl",
+  "3xl": "max-w-3xl",
+  "4xl": "max-w-4xl",
+  "5xl": "max-w-5xl",
+  "6xl": "max-w-6xl",
+  "7xl": "max-w-7xl",
+  screen: "max-w-screen-xl",
+  full: "max-w-full"
+};
+function ModalShell({ title, onClose, children, footer, width = "lg" }) {
   return createPortal3(
     /* @__PURE__ */ jsx32(
       "div",
@@ -6363,7 +6377,7 @@ function ModalShell({ title, onClose, children, footer }) {
         onMouseDown: (e) => {
           if (e.target === e.currentTarget) onClose();
         },
-        children: /* @__PURE__ */ jsxs30("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
+        children: /* @__PURE__ */ jsxs30("div", { className: `relative w-full ${MODAL_WIDTH[width]} rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]`, children: [
           /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
             /* @__PURE__ */ jsx32("h2", { className: "text-base font-semibold", children: title }),
             /* @__PURE__ */ jsx32("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx32(X9, { className: "h-4 w-4" }) })
@@ -6527,13 +6541,15 @@ function FieldRenderer({ field, value, onChange }) {
 function ViewModal({
   item,
   fields,
-  onClose
+  onClose,
+  width
 }) {
   return /* @__PURE__ */ jsx32(
     ModalShell,
     {
       title: "View Details",
       onClose,
+      width,
       footer: /* @__PURE__ */ jsx32(Button, { variant: "outline", size: "sm", onClick: onClose, children: "Close" }),
       children: /* @__PURE__ */ jsx32("div", { className: "space-y-3", children: fields.map((f) => /* @__PURE__ */ jsxs30("div", { children: [
         /* @__PURE__ */ jsx32("p", { className: "text-xs font-semibold text-muted-foreground mb-1", children: f.label }),
@@ -6551,7 +6567,8 @@ function EditModal({
   onClose,
   onSuccess,
   notif,
-  grid
+  grid,
+  width
 }) {
   const [form, setForm] = React28.useState(() => {
     const init = {};
@@ -6599,6 +6616,7 @@ function EditModal({
     {
       title: "Edit Record",
       onClose,
+      width,
       footer: /* @__PURE__ */ jsxs30(Fragment11, { children: [
         /* @__PURE__ */ jsx32(Button, { variant: "outline", size: "sm", onClick: onClose, disabled: loading, children: "Cancel" }),
         /* @__PURE__ */ jsxs30(Button, { size: "sm", onClick: handleSubmit, disabled: loading, children: [
@@ -6683,6 +6701,7 @@ function DeleteModal({
     {
       title: "Confirm Delete",
       onClose,
+      width: "lg",
       footer: /* @__PURE__ */ jsxs30(Fragment11, { children: [
         /* @__PURE__ */ jsx32(Button, { variant: "outline", size: "sm", onClick: onClose, disabled: loading, children: "Cancel" }),
         /* @__PURE__ */ jsxs30(Button, { variant: "danger", size: "sm", onClick: handleDelete, disabled: loading, children: [
@@ -6702,17 +6721,19 @@ function ActionBtn({
   defaultIcon,
   defaultLabel,
   defaultVariant,
+  defaultSize,
   onClick
 }) {
   const mode = cfg?.displayMode ?? "icon";
   const icon = cfg?.icon ?? defaultIcon;
   const label = cfg?.label ?? defaultLabel;
+  const buttonSize = cfg?.size ?? defaultSize ?? "xs";
   return /* @__PURE__ */ jsx32(
     Button,
     {
       type: "button",
       title: label,
-      size: cfg?.size ?? "xs",
+      size: buttonSize,
       variant: cfg?.variant ?? defaultVariant,
       rounded: cfg?.rounded ?? "lg",
       gradientFrom: cfg?.gradientFrom,
@@ -6821,6 +6842,7 @@ function Table({
             defaultIcon: extra.icon,
             defaultLabel: extra.label ?? extra.key,
             defaultVariant: extra.variant ?? "outline",
+            defaultSize: defaultActions.actionsSize,
             onClick: () => extra.onClick(item)
           },
           extra.key
@@ -7160,6 +7182,7 @@ function Table({
       {
         item: viewItem,
         fields: viewFields,
+        width: defaultActions.modalWidth,
         onClose: () => setViewItem(null)
       }
     ),
@@ -7172,6 +7195,7 @@ function Table({
         itemId: String(editItem[actionIdKey] ?? ""),
         notif: defaultActions.onSuccessNotif,
         grid: defaultActions.editFormGrid,
+        width: defaultActions.modalWidth,
         onClose: () => setEditItem(null),
         onSuccess: (updated) => {
           setTableData(
@@ -7292,17 +7316,19 @@ function ActionBtn2({
   defaultIcon,
   defaultLabel,
   defaultVariant,
+  defaultSize,
   onClick
 }) {
   const mode = cfg?.displayMode ?? "icon";
   const icon = cfg?.icon ?? defaultIcon;
   const label = cfg?.label ?? defaultLabel;
+  const buttonSize = cfg?.size ?? defaultSize ?? "xs";
   return /* @__PURE__ */ jsx33(
     Button,
     {
       type: "button",
       title: label,
-      size: cfg?.size ?? "xs",
+      size: buttonSize,
       variant: cfg?.variant ?? defaultVariant,
       rounded: cfg?.rounded ?? "lg",
       gradientFrom: cfg?.gradientFrom,
@@ -7321,7 +7347,7 @@ function ActionBtn2({
     }
   );
 }
-function DGModalShell({ title, onClose, children, footer }) {
+function DGModalShell({ title, onClose, children, footer, width = "lg" }) {
   return createPortal4(
     /* @__PURE__ */ jsx33(
       "div",
@@ -7331,7 +7357,7 @@ function DGModalShell({ title, onClose, children, footer }) {
         onMouseDown: (e) => {
           if (e.target === e.currentTarget) onClose();
         },
-        children: /* @__PURE__ */ jsxs31("div", { className: "relative w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]", children: [
+        children: /* @__PURE__ */ jsxs31("div", { className: `relative w-full ${MODAL_WIDTH[width]} rounded-2xl border border-border bg-card shadow-2xl flex flex-col max-h-[90vh]`, children: [
           /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border shrink-0", children: [
             /* @__PURE__ */ jsx33("h2", { className: "text-base font-semibold", children: title }),
             /* @__PURE__ */ jsx33("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx33(X10, { className: "h-4 w-4" }) })
@@ -7414,12 +7440,13 @@ function DGFieldRenderer({ field, value, onChange }) {
       return /* @__PURE__ */ jsx33(Input, { inputType: field.inputType ?? "text", value: value ?? "", onChange: (e) => onChange(e.target.value), placeholder: field.placeholder ?? field.label });
   }
 }
-function DGViewModal({ item, fields, onClose }) {
+function DGViewModal({ item, fields, onClose, width }) {
   return /* @__PURE__ */ jsx33(
     DGModalShell,
     {
       title: "View Details",
       onClose,
+      width,
       footer: /* @__PURE__ */ jsx33("button", { onClick: onClose, className: "px-4 py-1.5 text-sm rounded-xl border border-border hover:bg-accent transition-colors", children: "Close" }),
       children: /* @__PURE__ */ jsx33("div", { className: "space-y-3", children: fields.map((f) => /* @__PURE__ */ jsxs31("div", { children: [
         /* @__PURE__ */ jsx33("p", { className: "text-xs font-semibold text-muted-foreground mb-1", children: f.label }),
@@ -7437,7 +7464,8 @@ function DGEditModal({
   onClose,
   onSuccess,
   notif,
-  grid
+  grid,
+  width
 }) {
   const [form, setForm] = React29.useState(() => {
     const init = {};
@@ -7485,6 +7513,7 @@ function DGEditModal({
     {
       title: "Edit Record",
       onClose,
+      width,
       footer: /* @__PURE__ */ jsxs31(Fragment12, { children: [
         /* @__PURE__ */ jsx33("button", { onClick: onClose, disabled: loading, className: "px-4 py-1.5 text-sm rounded-xl border border-border hover:bg-accent transition-colors", children: "Cancel" }),
         /* @__PURE__ */ jsxs31("button", { onClick: handleSubmit, disabled: loading, className: "px-4 py-1.5 text-sm rounded-xl bg-primary text-primary-foreground hover:bg-primary-hover transition-colors flex items-center gap-1.5", children: [
@@ -7544,6 +7573,7 @@ function DGDeleteModal({
     {
       title: "Confirm Delete",
       onClose,
+      width: "lg",
       footer: /* @__PURE__ */ jsxs31(Fragment12, { children: [
         /* @__PURE__ */ jsx33("button", { onClick: onClose, disabled: loading, className: "px-4 py-1.5 text-sm rounded-xl border border-border hover:bg-accent transition-colors", children: "Cancel" }),
         /* @__PURE__ */ jsxs31("button", { onClick: handleDelete, disabled: loading, className: "px-4 py-1.5 text-sm rounded-xl bg-danger text-danger-foreground hover:bg-danger-hover transition-colors flex items-center gap-1.5", children: [
@@ -7664,6 +7694,7 @@ function DataGrid({
           defaultIcon: /* @__PURE__ */ jsx33(Eye3, { className: "h-3.5 w-3.5" }),
           defaultLabel: "View",
           defaultVariant: "outline",
+          defaultSize: defaultActions.actionsSize,
           onClick: () => setViewItem(row)
         }
       ),
@@ -7674,6 +7705,7 @@ function DataGrid({
           defaultIcon: /* @__PURE__ */ jsx33(Pencil3, { className: "h-3.5 w-3.5" }),
           defaultLabel: "Edit",
           defaultVariant: "outline",
+          defaultSize: defaultActions.actionsSize,
           onClick: () => setEditItem(row)
         }
       ),
@@ -7684,6 +7716,7 @@ function DataGrid({
           defaultIcon: /* @__PURE__ */ jsx33(Trash4, { className: "h-3.5 w-3.5" }),
           defaultLabel: "Delete",
           defaultVariant: "danger",
+          defaultSize: defaultActions.actionsSize,
           onClick: () => setDeleteItem(row)
         }
       ),
@@ -7694,6 +7727,7 @@ function DataGrid({
           defaultIcon: extra.icon,
           defaultLabel: extra.label ?? extra.key,
           defaultVariant: extra.variant ?? "outline",
+          defaultSize: defaultActions.actionsSize,
           onClick: () => extra.onClick(row)
         },
         extra.key
@@ -7898,7 +7932,7 @@ function DataGrid({
         ] })
       ] });
     })(),
-    defaultActions && viewItem && /* @__PURE__ */ jsx33(DGViewModal, { item: viewItem, fields: viewFields, onClose: () => setViewItem(null) }),
+    defaultActions && viewItem && /* @__PURE__ */ jsx33(DGViewModal, { item: viewItem, fields: viewFields, width: defaultActions.modalWidth, onClose: () => setViewItem(null) }),
     defaultActions && editItem && /* @__PURE__ */ jsx33(
       DGEditModal,
       {
@@ -7908,6 +7942,7 @@ function DataGrid({
         itemId: String(editItem[actionIdKey] ?? ""),
         notif: defaultActions.onSuccessNotif,
         grid: defaultActions.editFormGrid,
+        width: defaultActions.modalWidth,
         onClose: () => setEditItem(null),
         onSuccess: (updated) => {
           setTableData((prev) => prev.map((r) => String(r[actionIdKey]) === String(updated[actionIdKey]) ? updated : r));

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "3.2.7",
+  "version": "3.3.0",
   "description": "Reusable React UI components",
   "license": "MIT",
   "main": "dist/index.js",