@juv/codego-react-ui 3.2.7 → 3.2.8

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: [
@@ -6779,7 +6797,8 @@ function DeleteModal({
   itemId,
   onClose,
   onSuccess,
-  notif
+  notif,
+  width
 }) {
   const [loading, setLoading] = React28.useState(false);
   const [error, setError] = React28.useState(null);
@@ -6801,6 +6820,7 @@ function DeleteModal({
     {
       title: "Confirm Delete",
       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, { variant: "danger", size: "sm", onClick: handleDelete, disabled: loading, children: [
@@ -7278,6 +7298,7 @@ function Table({
       {
         item: viewItem,
         fields: viewFields,
+        width: defaultActions.modalWidth,
         onClose: () => setViewItem(null)
       }
     ),
@@ -7290,6 +7311,7 @@ function Table({
         itemId: String(editItem[actionIdKey] ?? ""),
         notif: defaultActions.onSuccessNotif,
         grid: defaultActions.editFormGrid,
+        width: defaultActions.modalWidth,
         onClose: () => setEditItem(null),
         onSuccess: (updated) => {
           setTableData(
@@ -7315,6 +7337,7 @@ function Table({
         baseUrl: defaultActions.baseUrl,
         itemId: String(deleteItem[actionIdKey] ?? ""),
         notif: defaultActions.onSuccessNotif,
+        width: defaultActions.modalWidth,
         onClose: () => setDeleteItem(null),
         onSuccess: (deleted) => {
           setTableData(
@@ -7439,7 +7462,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 +7472,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 +7555,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 +7579,8 @@ function DGEditModal({
   onClose,
   onSuccess,
   notif,
-  grid
+  grid,
+  width
 }) {
   const [form, setForm] = React29.useState(() => {
     const init = {};
@@ -7603,6 +7628,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: [
@@ -7640,7 +7666,8 @@ function DGDeleteModal({
   itemId,
   onClose,
   onSuccess,
-  notif
+  notif,
+  width
 }) {
   const [loading, setLoading] = React29.useState(false);
   const [error, setError] = React29.useState(null);
@@ -7662,6 +7689,7 @@ function DGDeleteModal({
     {
       title: "Confirm Delete",
       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: 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: [
@@ -8016,7 +8044,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 +8054,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));
@@ -8044,6 +8073,7 @@ function DataGrid({
         baseUrl: defaultActions.baseUrl,
         itemId: String(deleteItem[actionIdKey] ?? ""),
         notif: defaultActions.onSuccessNotif,
+        width: defaultActions.modalWidth,
         onClose: () => setDeleteItem(null),
         onSuccess: (deleted) => {
           setTableData((prev) => prev.filter((r) => String(r[actionIdKey]) !== String(deleted[actionIdKey])));

package/dist/index.d.cts

@@ -345,6 +345,8 @@ interface DefaultActionsConfig<T> {
     viewForm?: ActionField[];
     /** Grid columns for the edit form layout (e.g. 2 = two-column grid). Default single column. */
     editFormGrid?: number;
+    /** 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 +380,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,8 @@ interface DefaultActionsConfig<T> {
     viewForm?: ActionField[];
     /** Grid columns for the edit form layout (e.g. 2 = two-column grid). Default single column. */
     editFormGrid?: number;
+    /** 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 +380,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: [
@@ -69925,7 +69943,8 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     itemId,
     onClose,
     onSuccess,
-    notif
+    notif,
+    width
   }) {
     const [loading, setLoading] = React28.useState(false);
     const [error, setError] = React28.useState(null);
@@ -69947,6 +69966,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       {
         title: "Confirm Delete",
         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, { variant: "danger", size: "sm", onClick: handleDelete, disabled: loading, children: [
@@ -70424,6 +70444,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
         {
           item: viewItem,
           fields: viewFields,
+          width: defaultActions.modalWidth,
           onClose: () => setViewItem(null)
         }
       ),
@@ -70436,6 +70457,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(
@@ -70461,6 +70483,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           baseUrl: defaultActions.baseUrl,
           itemId: String(deleteItem[actionIdKey] ?? ""),
           notif: defaultActions.onSuccessNotif,
+          width: defaultActions.modalWidth,
           onClose: () => setDeleteItem(null),
           onSuccess: (deleted) => {
             setTableData(
@@ -70585,7 +70608,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 +70618,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 +70701,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 +70725,8 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     onClose,
     onSuccess,
     notif,
-    grid
+    grid,
+    width
   }) {
     const [form, setForm] = React29.useState(() => {
       const init = {};
@@ -70749,6 +70774,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: [
@@ -70786,7 +70812,8 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
     itemId,
     onClose,
     onSuccess,
-    notif
+    notif,
+    width
   }) {
     const [loading, setLoading] = React29.useState(false);
     const [error, setError] = React29.useState(null);
@@ -70808,6 +70835,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
       {
         title: "Confirm Delete",
         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: 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: [
@@ -71162,7 +71190,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 +71200,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));
@@ -71190,6 +71219,7 @@ ${n2.shaderPreludeCode.vertexSource}`, define: n2.shaderDefine }, defaultProject
           baseUrl: defaultActions.baseUrl,
           itemId: String(deleteItem[actionIdKey] ?? ""),
           notif: defaultActions.onSuccessNotif,
+          width: defaultActions.modalWidth,
           onClose: () => setDeleteItem(null),
           onSuccess: (deleted) => {
             setTableData((prev) => prev.filter((r2) => String(r2[actionIdKey]) !== String(deleted[actionIdKey])));

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: [
@@ -6661,7 +6679,8 @@ function DeleteModal({
   itemId,
   onClose,
   onSuccess,
-  notif
+  notif,
+  width
 }) {
   const [loading, setLoading] = React28.useState(false);
   const [error, setError] = React28.useState(null);
@@ -6683,6 +6702,7 @@ function DeleteModal({
     {
       title: "Confirm Delete",
       onClose,
+      width,
       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: [
@@ -7160,6 +7180,7 @@ function Table({
       {
         item: viewItem,
         fields: viewFields,
+        width: defaultActions.modalWidth,
         onClose: () => setViewItem(null)
       }
     ),
@@ -7172,6 +7193,7 @@ function Table({
         itemId: String(editItem[actionIdKey] ?? ""),
         notif: defaultActions.onSuccessNotif,
         grid: defaultActions.editFormGrid,
+        width: defaultActions.modalWidth,
         onClose: () => setEditItem(null),
         onSuccess: (updated) => {
           setTableData(
@@ -7197,6 +7219,7 @@ function Table({
         baseUrl: defaultActions.baseUrl,
         itemId: String(deleteItem[actionIdKey] ?? ""),
         notif: defaultActions.onSuccessNotif,
+        width: defaultActions.modalWidth,
         onClose: () => setDeleteItem(null),
         onSuccess: (deleted) => {
           setTableData(
@@ -7321,7 +7344,7 @@ function ActionBtn2({
     }
   );
 }
-function DGModalShell({ title, onClose, children, footer }) {
+function DGModalShell({ title, onClose, children, footer, width = "lg" }) {
   return createPortal4(
     /* @__PURE__ */ jsx33(
       "div",
@@ -7331,7 +7354,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 +7437,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 +7461,8 @@ function DGEditModal({
   onClose,
   onSuccess,
   notif,
-  grid
+  grid,
+  width
 }) {
   const [form, setForm] = React29.useState(() => {
     const init = {};
@@ -7485,6 +7510,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: [
@@ -7522,7 +7548,8 @@ function DGDeleteModal({
   itemId,
   onClose,
   onSuccess,
-  notif
+  notif,
+  width
 }) {
   const [loading, setLoading] = React29.useState(false);
   const [error, setError] = React29.useState(null);
@@ -7544,6 +7571,7 @@ function DGDeleteModal({
     {
       title: "Confirm Delete",
       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: 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: [
@@ -7898,7 +7926,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 +7936,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));
@@ -7926,6 +7955,7 @@ function DataGrid({
         baseUrl: defaultActions.baseUrl,
         itemId: String(deleteItem[actionIdKey] ?? ""),
         notif: defaultActions.onSuccessNotif,
+        width: defaultActions.modalWidth,
         onClose: () => setDeleteItem(null),
         onSuccess: (deleted) => {
           setTableData((prev) => prev.filter((r) => String(r[actionIdKey]) !== String(deleted[actionIdKey])));

package/package.json

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