@trinityui/design-system 1.0.7 → 1.0.8

package/dist/data-table2.js

@@ -0,0 +1,1250 @@
+import { jsx as e, jsxs as p, Fragment as Ae } from "react/jsx-runtime";
+import br, { useState as R, useCallback as x, useMemo as oe } from "react";
+import { useTheme as pe, Box as D, Stack as $, FormControl as fr, Select as xr, MenuItem as V, TextField as $e, InputAdornment as ue, Tooltip as W, IconButton as I, Menu as Le, ListItemIcon as yr, ListItemText as te, Paper as Ee, Toolbar as _e, Skeleton as A, alpha as ne, Chip as wr, Typography as Ie, Divider as Pe } from "@mui/material";
+import { useGridApiRef as Cr, GridRowEditStopReasons as kr, DataGrid as Sr, GridToolbarColumnsButton as vr, GridToolbarFilterButton as Mr, GridToolbarDensitySelector as zr } from "@mui/x-data-grid";
+import Rr from "@mui/icons-material/Search";
+import Dr from "@mui/icons-material/Refresh";
+import Br from "@mui/icons-material/FileDownload";
+import Oe from "@mui/icons-material/Add";
+import je from "@mui/icons-material/Close";
+import Tr from "@mui/icons-material/Check";
+import { b as i, s as ie } from "./navigation.js";
+import Fr from "@mui/icons-material/MoreVert";
+import "@mui/icons-material/CheckCircle";
+import "@mui/icons-material/Error";
+import "@mui/icons-material/Warning";
+import "@mui/icons-material/Info";
+import "@mui/icons-material/DragIndicator";
+const ge = {
+  compact: {
+    rowHeight: 48,
+    headerHeight: 44,
+    fontSize: 12,
+    padding: "6px 8px",
+    cellPaddingY: 6,
+    avatarSize: 28,
+    avatarFontSize: 11,
+    chipHeight: 22,
+    iconSize: 14,
+    progressWidth: 80
+  },
+  standard: {
+    rowHeight: 52,
+    headerHeight: 56,
+    fontSize: 14,
+    padding: "8px 16px",
+    cellPaddingY: 8,
+    avatarSize: 32,
+    avatarFontSize: 12,
+    chipHeight: 24,
+    iconSize: 16,
+    progressWidth: 100
+  },
+  comfortable: {
+    rowHeight: 68,
+    headerHeight: 64,
+    fontSize: 14,
+    padding: "12px 16px",
+    cellPaddingY: 12,
+    avatarSize: 40,
+    avatarFontSize: 14,
+    chipHeight: 28,
+    iconSize: 18,
+    progressWidth: 120
+  }
+}, Ve = {
+  light: {
+    headerBg: "#F3F4F6",
+    headerText: i.neutral.gray600,
+    headerBorder: "#D1D5DB",
+    background: i.neutral.white,
+    alternateRow: i.neutral.lightGray,
+    hover: i.neutral.gray100,
+    selected: `${i.primary.light}14`,
+    borderColor: i.neutral.gray100,
+    text: i.neutral.gray600,
+    textSecondary: i.neutral.gray500
+  },
+  dark: {
+    headerBg: "#3F3F46",
+    headerText: i.neutral.white,
+    headerBorder: "#52525B",
+    background: i.neutral.darkBg,
+    alternateRow: i.neutral.darkPaper,
+    hover: ie.effects.onDark.tint,
+    // 4% white - subtle hover
+    selected: `${i.primary.light}24`,
+    borderColor: ie.effects.onDark.divider,
+    // 12% white - divider lines
+    text: i.neutral.white,
+    textSecondary: i.neutral.gray400
+  }
+}, L = {
+  fontFamily: '"Montserrat", sans-serif',
+  headerWeight: 600,
+  cellSecondary: {
+    color: i.neutral.gray500
+  }
+}, Gr = {
+  hover: "background-color 0.15s ease"
+};
+i.neutral.gray100, i.neutral.gray600, i.neutral.gray400;
+i.neutral.white, i.neutral.lightGray, i.neutral.white, i.neutral.lightGray, i.neutral.gray100, `${i.primary.light}`, i.neutral.gray100, i.neutral.gray600, i.neutral.gray500, i.neutral.darkBg, i.neutral.darkPaper, i.neutral.darkBg, i.neutral.darkPaper, ie.effects.onDark.tint, `${i.primary.light}`, ie.effects.onDark.divider, i.neutral.white, i.neutral.gray400;
+const Hr = ({
+  columns: s,
+  config: a,
+  density: v,
+  onAdd: c,
+  onCancel: l,
+  isActive: k,
+  onActivate: G,
+  mode: g = "light"
+}) => {
+  const [y, w] = R({}), [B, m] = R({}), o = ge[v], S = Ve[g], P = pe(), J = s.filter((t) => a.excludeFields?.includes(t.field) || a.editableFields && !a.editableFields.includes(t.field) ? !1 : t.editable !== !1), _ = x((t, d) => {
+    w((C) => ({
+      ...C,
+      [t]: d
+    })), B[t] && m((C) => {
+      const T = { ...C };
+      return delete T[t], T;
+    });
+  }, [B]), z = x(() => {
+    const t = {};
+    if (a.requiredFields?.forEach((d) => {
+      const C = y[d];
+      (C == null || C === "") && (t[d] = "Required");
+    }), a.validation) {
+      const d = a.validation(y);
+      Object.assign(t, d);
+    }
+    return m(t), Object.keys(t).length === 0;
+  }, [y, a]), b = x(() => {
+    if (z()) {
+      const t = a.defaultValues ? { ...a.defaultValues, ...y } : y;
+      c(t), w({}), m({});
+    }
+  }, [z, a.defaultValues, y, c]), f = x(() => {
+    w({}), m({}), l();
+  }, [l]), E = x((t) => {
+    t.key === "Enter" && (t.metaKey || t.ctrlKey) ? b() : t.key === "Escape" && f();
+  }, [b, f]);
+  return k ? /* @__PURE__ */ p(
+    D,
+    {
+      onKeyDown: E,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        px: 2,
+        py: 1,
+        borderBottom: `2px solid ${P.palette.primary.main}`,
+        backgroundColor: S.background,
+        gap: 1
+      },
+      children: [
+        J.map((t) => {
+          const d = a.fieldConfigs?.[t.field], C = !!B[t.field], T = y[t.field] ?? "";
+          return d?.type === "select" && d.options ? /* @__PURE__ */ e(
+            fr,
+            {
+              size: "small",
+              error: C,
+              sx: { minWidth: t.width || 150 },
+              children: /* @__PURE__ */ p(
+                xr,
+                {
+                  value: T,
+                  onChange: (F) => _(t.field, F.target.value),
+                  displayEmpty: !0,
+                  sx: {
+                    fontFamily: L.fontFamily,
+                    fontSize: o.fontSize,
+                    "& .MuiSelect-select": {
+                      py: 0.75
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ e(V, { value: "", disabled: !0, children: /* @__PURE__ */ e("em", { children: t.headerName }) }),
+                    d.options.map((F) => /* @__PURE__ */ e(V, { value: F.value, children: F.label }, F.value))
+                  ]
+                }
+              )
+            },
+            t.field
+          ) : /* @__PURE__ */ e(
+            $e,
+            {
+              size: "small",
+              placeholder: t.headerName,
+              value: T,
+              onChange: (F) => _(t.field, F.target.value),
+              error: C,
+              helperText: B[t.field],
+              type: d?.type === "number" ? "number" : "text",
+              slotProps: {
+                input: {
+                  sx: {
+                    fontFamily: L.fontFamily,
+                    fontSize: o.fontSize
+                  },
+                  startAdornment: d?.prefix ? /* @__PURE__ */ e(ue, { position: "start", children: d.prefix }) : void 0,
+                  endAdornment: d?.suffix ? /* @__PURE__ */ e(ue, { position: "end", children: d.suffix }) : void 0
+                },
+                formHelperText: {
+                  sx: { mx: 0, fontSize: 10 }
+                }
+              },
+              sx: {
+                flex: t.flex || 1,
+                minWidth: t.width || 100,
+                maxWidth: t.maxWidth,
+                "& .MuiOutlinedInput-root": {
+                  "& input": {
+                    py: 0.75
+                  }
+                }
+              }
+            },
+            t.field
+          );
+        }),
+        /* @__PURE__ */ p($, { direction: "row", spacing: 0.5, sx: { ml: "auto" }, children: [
+          /* @__PURE__ */ e(W, { title: "Save (⌘+Enter)", children: /* @__PURE__ */ e(
+            I,
+            {
+              size: "small",
+              color: "primary",
+              onClick: b,
+              sx: {
+                backgroundColor: "primary.main",
+                color: "common.white",
+                "&:hover": {
+                  backgroundColor: "primary.dark"
+                }
+              },
+              children: /* @__PURE__ */ e(Tr, { fontSize: "small" })
+            }
+          ) }),
+          /* @__PURE__ */ e(W, { title: "Cancel (Esc)", children: /* @__PURE__ */ e(
+            I,
+            {
+              size: "small",
+              onClick: f,
+              sx: {
+                "&:hover": {
+                  backgroundColor: S.hover
+                }
+              },
+              children: /* @__PURE__ */ e(je, { fontSize: "small" })
+            }
+          ) })
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ e(
+    D,
+    {
+      onClick: G,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        px: 2,
+        py: o.cellPaddingY,
+        borderBottom: `1px solid ${S.borderColor}`,
+        backgroundColor: S.hover,
+        cursor: "pointer",
+        transition: "background-color 0.15s ease",
+        "&:hover": {
+          backgroundColor: S.selected
+        }
+      },
+      children: /* @__PURE__ */ p($, { direction: "row", spacing: 1, alignItems: "center", children: [
+        /* @__PURE__ */ e(Oe, { sx: { fontSize: 18, color: "primary.main" } }),
+        /* @__PURE__ */ e(
+          D,
+          {
+            sx: {
+              fontFamily: L.fontFamily,
+              fontSize: o.fontSize,
+              color: "primary.main",
+              fontWeight: 500
+            },
+            children: a.placeholder || "Add new row..."
+          }
+        )
+      ] })
+    }
+  );
+}, Er = ({
+  row: s,
+  actions: a,
+  maxInline: v = 2
+}) => {
+  const [c, l] = br.useState(null), k = !!c, G = a.filter((o) => !o.showInMenu).slice(0, v), g = [
+    ...a.filter((o) => o.showInMenu),
+    ...a.filter((o) => !o.showInMenu).slice(v)
+  ], y = (o) => {
+    o.stopPropagation(), l(o.currentTarget);
+  }, w = () => {
+    l(null);
+  }, B = (o) => {
+    w(), o.onClick(s);
+  }, m = (o) => typeof o.disabled == "function" ? o.disabled(s) : o.disabled;
+  return /* @__PURE__ */ p($, { direction: "row", spacing: 0.5, alignItems: "center", children: [
+    G.map((o) => /* @__PURE__ */ e(W, { title: o.label, children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+      I,
+      {
+        size: "small",
+        color: o.color || "default",
+        onClick: (S) => {
+          S.stopPropagation(), o.onClick(s);
+        },
+        disabled: m(o),
+        sx: { p: 0.5 },
+        children: o.icon
+      }
+    ) }) }, o.id)),
+    g.length > 0 && /* @__PURE__ */ p(Ae, { children: [
+      /* @__PURE__ */ e(
+        I,
+        {
+          size: "small",
+          onClick: y,
+          sx: { p: 0.5 },
+          children: /* @__PURE__ */ e(Fr, { fontSize: "small" })
+        }
+      ),
+      /* @__PURE__ */ e(
+        Le,
+        {
+          anchorEl: c,
+          open: k,
+          onClose: w,
+          onClick: (o) => o.stopPropagation(),
+          transformOrigin: { horizontal: "right", vertical: "top" },
+          anchorOrigin: { horizontal: "right", vertical: "bottom" },
+          slotProps: {
+            paper: {
+              sx: {
+                minWidth: 160,
+                boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)"
+              }
+            }
+          },
+          children: g.map((o) => /* @__PURE__ */ p(
+            V,
+            {
+              onClick: () => B(o),
+              disabled: m(o),
+              sx: {
+                fontFamily: L.fontFamily,
+                fontSize: 13
+              },
+              children: [
+                o.icon && /* @__PURE__ */ e(yr, { sx: { color: o.color ? `${o.color}.main` : void 0 }, children: o.icon }),
+                /* @__PURE__ */ e(te, { children: o.label })
+              ]
+            },
+            o.id
+          ))
+        }
+      )
+    ] })
+  ] });
+}, Ir = ({
+  row: s,
+  actions: a,
+  isHovered: v = !1
+}) => {
+  const c = (l) => typeof l.disabled == "function" ? l.disabled(s) : l.disabled;
+  return /* @__PURE__ */ e(
+    $,
+    {
+      direction: "row",
+      spacing: 0.5,
+      alignItems: "center",
+      sx: {
+        opacity: v ? 1 : 0,
+        transition: "opacity 0.15s ease-in-out",
+        visibility: v ? "visible" : "hidden"
+      },
+      children: a.map((l) => /* @__PURE__ */ e(W, { title: l.label, children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+        I,
+        {
+          size: "small",
+          color: l.color || "default",
+          onClick: (k) => {
+            k.stopPropagation(), l.onClick(s);
+          },
+          disabled: c(l),
+          sx: {
+            p: 0.5,
+            "&:hover": {
+              backgroundColor: "action.hover"
+            }
+          },
+          children: l.icon
+        }
+      ) }) }, l.id))
+    }
+  );
+}, Pr = {
+  compact: "compact",
+  standard: "standard",
+  comfortable: "comfortable"
+}, We = [75, 68, 82, 71, 88, 65, 79, 85, 72, 78], he = [
+  [62, 78, 55, 85, 70, 48, 92, 65, 73, 58],
+  [71, 45, 88, 63, 52, 79, 67, 90, 54, 82],
+  [58, 82, 68, 75, 45, 87, 60, 72, 93, 55],
+  [85, 55, 73, 42, 88, 65, 78, 50, 82, 68],
+  [68, 75, 52, 90, 58, 82, 47, 73, 88, 62],
+  [45, 88, 65, 72, 82, 55, 78, 68, 50, 85],
+  [78, 62, 88, 55, 70, 45, 82, 72, 65, 90],
+  [52, 78, 70, 88, 62, 75, 55, 85, 48, 72]
+], Wr = (s) => `${We[s % We.length]}%`, Ar = (s, a) => `${he[s % he.length][a % he[0].length]}%`, $r = ({
+  columns: s,
+  rows: a,
+  density: v,
+  showCheckbox: c = !1,
+  colors: l
+}) => {
+  const k = ge[v];
+  return /* @__PURE__ */ p(D, { sx: { width: "100%", overflow: "hidden" }, children: [
+    /* @__PURE__ */ p(
+      D,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          height: k.headerHeight,
+          px: 2,
+          gap: 2,
+          backgroundColor: l.headerBg,
+          borderBottom: `2px solid ${l.headerBorder || l.borderColor}`
+        },
+        children: [
+          c && /* @__PURE__ */ e(
+            A,
+            {
+              variant: "rectangular",
+              width: 18,
+              height: 18,
+              sx: { borderRadius: "4px", flexShrink: 0 }
+            }
+          ),
+          Array.from({ length: s }).map((G, g) => /* @__PURE__ */ e(D, { sx: { flex: 1, px: 1 }, children: /* @__PURE__ */ e(A, { width: Wr(g), height: 14 }) }, g))
+        ]
+      }
+    ),
+    Array.from({ length: a }).map((G, g) => /* @__PURE__ */ p(
+      D,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          height: k.rowHeight,
+          px: 2,
+          gap: 2,
+          borderBottom: `1px solid ${l.borderColor}`,
+          backgroundColor: l.background
+        },
+        children: [
+          c && /* @__PURE__ */ e(
+            A,
+            {
+              variant: "rectangular",
+              width: 18,
+              height: 18,
+              sx: { borderRadius: "4px", flexShrink: 0 }
+            }
+          ),
+          Array.from({ length: s }).map((y, w) => /* @__PURE__ */ e(D, { sx: { flex: 1, px: 1 }, children: /* @__PURE__ */ e(
+            A,
+            {
+              width: Ar(g, w),
+              height: 12,
+              sx: { my: 0.5 }
+            }
+          ) }, w))
+        ]
+      },
+      g
+    ))
+  ] });
+};
+function Lr({
+  title: s,
+  subtitle: a,
+  searchValue: v,
+  onSearchChange: c,
+  showSearch: l = !0,
+  selectedCount: k,
+  totalCount: G,
+  bulkActions: g,
+  onBulkAction: y,
+  onClearSelection: w,
+  onAddRow: B,
+  onRefresh: m,
+  onExport: o,
+  showExport: S = !0,
+  showRefresh: P = !0,
+  showColumnSelector: J = !0,
+  showFilterButton: _ = !0,
+  showDensitySelector: z = !0,
+  colors: b
+}) {
+  const f = pe(), [E, t] = R(null), d = (M) => {
+    t(M.currentTarget);
+  }, C = () => {
+    t(null);
+  }, T = (M) => {
+    o?.(M), C();
+  }, F = k > 0;
+  return /* @__PURE__ */ p(
+    _e,
+    {
+      sx: {
+        pl: 2,
+        pr: 1.5,
+        py: 1.5,
+        borderBottom: `1px solid ${b.borderColor}`,
+        backgroundColor: F ? ne(f.palette.primary.main, 0.06) : b.background,
+        minHeight: "auto !important",
+        flexWrap: "wrap",
+        gap: 1,
+        transition: "background-color 0.2s ease"
+      },
+      children: [
+        /* @__PURE__ */ e(D, { sx: { flex: "1 1 auto", minWidth: 180 }, children: F ? /* @__PURE__ */ p($, { direction: "row", spacing: 1.5, alignItems: "center", children: [
+          /* @__PURE__ */ e(
+            wr,
+            {
+              label: `${k} selected`,
+              size: "small",
+              onDelete: w,
+              deleteIcon: /* @__PURE__ */ e(je, { fontSize: "small" }),
+              sx: {
+                backgroundColor: ne(f.palette.primary.main, 0.12),
+                color: "primary.main",
+                fontWeight: 600,
+                "& .MuiChip-deleteIcon": {
+                  color: "primary.main",
+                  "&:hover": {
+                    color: "primary.dark"
+                  }
+                }
+              }
+            }
+          ),
+          g && g.length > 0 && /* @__PURE__ */ e($, { direction: "row", spacing: 0.5, children: g.map((M, Q) => /* @__PURE__ */ e(W, { title: M.label, children: /* @__PURE__ */ e(
+            I,
+            {
+              size: "small",
+              onClick: () => y?.(M),
+              color: M.color || "default",
+              sx: {
+                borderRadius: "8px",
+                "&:hover": {
+                  backgroundColor: ne(f.palette.primary.main, 0.1)
+                }
+              },
+              children: M.icon
+            }
+          ) }, Q)) })
+        ] }) : /* @__PURE__ */ p(D, { children: [
+          s && /* @__PURE__ */ e(
+            Ie,
+            {
+              variant: "subtitle1",
+              fontWeight: 600,
+              color: "text.primary",
+              sx: { lineHeight: 1.3 },
+              children: s
+            }
+          ),
+          a && /* @__PURE__ */ e(Ie, { variant: "caption", color: "text.secondary", children: a })
+        ] }) }),
+        /* @__PURE__ */ p($, { direction: "row", spacing: 0.5, alignItems: "center", children: [
+          l && /* @__PURE__ */ e(
+            $e,
+            {
+              size: "small",
+              placeholder: "Search...",
+              value: v,
+              onChange: (M) => c(M.target.value),
+              InputProps: {
+                startAdornment: /* @__PURE__ */ e(ue, { position: "start", children: /* @__PURE__ */ e(Rr, { fontSize: "small", sx: { color: b.textSecondary } }) })
+              },
+              sx: {
+                width: 200,
+                "& .MuiOutlinedInput-root": {
+                  borderRadius: "8px",
+                  backgroundColor: b.background,
+                  fontSize: "0.875rem",
+                  "& fieldset": {
+                    borderColor: b.borderColor
+                  },
+                  "&:hover fieldset": {
+                    borderColor: b.textSecondary
+                  }
+                }
+              }
+            }
+          ),
+          B && /* @__PURE__ */ e(W, { title: "Add row", children: /* @__PURE__ */ e(
+            I,
+            {
+              size: "small",
+              onClick: B,
+              sx: {
+                borderRadius: "8px",
+                border: `1px solid ${b.borderColor}`,
+                "&:hover": {
+                  backgroundColor: b.hover,
+                  borderColor: b.textSecondary
+                }
+              },
+              children: /* @__PURE__ */ e(Oe, { fontSize: "small" })
+            }
+          ) }),
+          /* @__PURE__ */ e(Pe, { orientation: "vertical", flexItem: !0, sx: { mx: 0.5, height: 24, alignSelf: "center" } }),
+          J && /* @__PURE__ */ e(
+            vr,
+            {
+              slotProps: {
+                button: {
+                  size: "small",
+                  style: {
+                    borderRadius: "8px",
+                    minWidth: "auto",
+                    paddingLeft: 8,
+                    paddingRight: 8
+                  }
+                }
+              }
+            }
+          ),
+          _ && /* @__PURE__ */ e(
+            Mr,
+            {
+              slotProps: {
+                button: {
+                  size: "small",
+                  style: {
+                    borderRadius: "8px",
+                    minWidth: "auto",
+                    paddingLeft: 8,
+                    paddingRight: 8
+                  }
+                }
+              }
+            }
+          ),
+          z && /* @__PURE__ */ e(
+            zr,
+            {
+              slotProps: {
+                button: {
+                  size: "small",
+                  style: {
+                    borderRadius: "8px",
+                    minWidth: "auto",
+                    paddingLeft: 8,
+                    paddingRight: 8
+                  }
+                }
+              }
+            }
+          ),
+          S && o && /* @__PURE__ */ p(Ae, { children: [
+            /* @__PURE__ */ e(W, { title: "Export", children: /* @__PURE__ */ e(
+              I,
+              {
+                size: "small",
+                onClick: d,
+                sx: {
+                  borderRadius: "8px",
+                  "&:hover": { backgroundColor: b.hover }
+                },
+                children: /* @__PURE__ */ e(Br, { fontSize: "small" })
+              }
+            ) }),
+            /* @__PURE__ */ p(
+              Le,
+              {
+                anchorEl: E,
+                open: !!E,
+                onClose: C,
+                anchorOrigin: { vertical: "bottom", horizontal: "right" },
+                transformOrigin: { vertical: "top", horizontal: "right" },
+                slotProps: {
+                  paper: {
+                    sx: { borderRadius: "8px", minWidth: 160 }
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ e(V, { onClick: () => T("csv"), children: /* @__PURE__ */ e(te, { children: "Export as CSV" }) }),
+                  /* @__PURE__ */ e(V, { onClick: () => T("json"), children: /* @__PURE__ */ e(te, { children: "Export as JSON" }) }),
+                  /* @__PURE__ */ e(Pe, {}),
+                  /* @__PURE__ */ e(V, { onClick: () => T("clipboard"), children: /* @__PURE__ */ e(te, { children: "Copy to clipboard" }) })
+                ]
+              }
+            )
+          ] }),
+          P && m && /* @__PURE__ */ e(W, { title: "Refresh", children: /* @__PURE__ */ e(
+            I,
+            {
+              size: "small",
+              onClick: m,
+              sx: {
+                borderRadius: "8px",
+                "&:hover": { backgroundColor: b.hover }
+              },
+              children: /* @__PURE__ */ e(Dr, { fontSize: "small" })
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+const ao = ({
+  // Core props
+  rows: s,
+  columns: a,
+  loading: v = !1,
+  getRowId: c,
+  // Density
+  density: l = "standard",
+  allowDensityChange: k = !0,
+  // Selection
+  selection: G,
+  // Pagination
+  pagination: g = { enabled: !0, pageSize: 25 },
+  // Sorting & Filtering
+  sorting: y = { enabled: !0 },
+  filtering: w = { enabled: !0 },
+  // Editing
+  editing: B,
+  // Tree Data
+  treeData: m,
+  // Row Grouping
+  rowGrouping: o,
+  // Inline Add
+  inlineAdd: S,
+  // Column Pinning
+  columnPinning: P,
+  // Row Reordering
+  rowReorder: J,
+  // Actions
+  rowActions: _,
+  rowActionsConfig: z,
+  bulkActions: b,
+  // Toolbar
+  toolbar: f = {
+    show: !0,
+    showSearch: !0,
+    showDensitySelector: !0,
+    showColumnVisibility: !0,
+    showExport: !0,
+    showFilter: !0,
+    showRefresh: !0
+  },
+  // Appearance
+  title: E,
+  subtitle: t,
+  height: d = 500,
+  maxHeight: C,
+  minHeight: T = 300,
+  stickyHeader: F = !0,
+  stripedRows: M = !1,
+  showBorders: Q = !0,
+  elevation: me = 0,
+  borderRadius: be = "12px",
+  // Callbacks
+  onRowClick: Ne,
+  onRowDoubleClick: Ke,
+  onCellClick: Ue,
+  onSelectionChange: X,
+  onSortChange: fe,
+  onFilterChange: xe,
+  onPageChange: ye,
+  onRowUpdate: ae,
+  onRowAdd: we,
+  onRowDelete: _r,
+  onRefresh: Ce,
+  onExport: le,
+  // Styling
+  sx: ke,
+  className: Se,
+  getRowClassName: de,
+  getCellClassName: Ye,
+  // Slot overrides
+  slots: qe,
+  slotProps: Z
+}) => {
+  const ve = pe(), Me = ve.palette.mode, n = Ve[Me], O = Cr(), [ee, Or] = R(l), [N, ze] = R({
+    type: "include",
+    ids: /* @__PURE__ */ new Set()
+  }), [Je, Qe] = R({
+    page: g.defaultPage || 0,
+    pageSize: g.pageSize || 25
+  }), [Xe, Ze] = R(
+    y.defaultSort ? [y.defaultSort] : []
+  ), [er, rr] = R({
+    items: w.defaultFilters || []
+  }), [or, tr] = R({}), [nr, re] = R(!1), [K, ir] = R(""), [Re, De] = R(null), U = ge[ee], j = z?.actions || _ || [], se = z?.mode || "menu", Be = oe(() => {
+    const r = [...a];
+    if (j.length > 0) {
+      const h = {
+        field: "__actions__",
+        headerName: "",
+        width: z?.width || (se === "hover" ? 180 : 60),
+        sortable: !1,
+        filterable: !1,
+        disableColumnMenu: !0,
+        align: "right",
+        headerAlign: "right",
+        renderCell: (u) => {
+          const H = c ? c(u.row) : u.row.id, q = String(Re) === String(H);
+          return se === "hover" ? /* @__PURE__ */ e(
+            Ir,
+            {
+              row: u.row,
+              actions: j,
+              isHovered: q
+            }
+          ) : /* @__PURE__ */ e(
+            Er,
+            {
+              row: u.row,
+              actions: j,
+              maxInline: z?.maxInline || 2
+            }
+          );
+        }
+      };
+      r.push(h);
+    }
+    return r;
+  }, [a, j, se, z, Re, c]);
+  oe(() => {
+    if (P?.enabled)
+      return {
+        left: P.left || [],
+        right: P.right || (j.length > 0 && z?.pinned ? ["__actions__"] : [])
+      };
+  }, [P, j.length, z?.pinned]);
+  const Y = oe(() => {
+    if (!K.trim()) return s;
+    const r = K.toLowerCase();
+    return s.filter(
+      (h) => Object.values(h).some(
+        (u) => u != null && String(u).toLowerCase().includes(r)
+      )
+    );
+  }, [s, K]), ar = x(
+    (r) => {
+      ze(r), X?.(Array.from(r.ids));
+    },
+    [X]
+  ), Te = x(() => {
+    ze({ type: "include", ids: /* @__PURE__ */ new Set() }), X?.([]);
+  }, [X]), lr = x(
+    (r) => {
+      Ze(r), r.length > 0 && fe?.(r[0].field, r[0].sort || "asc");
+    },
+    [fe]
+  ), dr = x(
+    (r) => {
+      rr(r), xe?.(r);
+    },
+    [xe]
+  ), sr = x(
+    (r) => {
+      Qe(r), ye?.(r.page, r.pageSize);
+    },
+    [ye]
+  ), cr = x((r, h) => {
+    r.reason === kr.rowFocusOut && (h.defaultMuiPrevented = !0);
+  }, []), hr = x(
+    async (r, h) => ae ? await ae(r, h) : r,
+    [ae]
+  ), ur = x(
+    (r) => {
+      we?.(r), re(!1);
+    },
+    [we]
+  ), Fe = x(
+    (r) => {
+      const h = s.filter((u) => {
+        const H = c ? c(u) : u.id;
+        return N.ids.has(H);
+      });
+      r.onClick(h);
+    },
+    [s, N, c]
+  ), Ge = x((r) => {
+    ir(r);
+  }, []), He = x(
+    (r) => {
+      if (le)
+        le(r);
+      else if (O.current) {
+        if (r === "csv")
+          O.current.exportDataAsCsv();
+        else if (r === "json") {
+          const h = O.current.getRowModels(), u = JSON.stringify(Array.from(h.values()), null, 2), H = new Blob([u], { type: "application/json" }), q = URL.createObjectURL(H), ce = document.createElement("a");
+          ce.href = q, ce.download = `${E || "data"}.json`, ce.click(), URL.revokeObjectURL(q);
+        } else if (r === "clipboard") {
+          const h = O.current.getRowModels(), u = Array.from(h.values()).map((H) => Object.values(H).join("	")).join(`
+`);
+          navigator.clipboard.writeText(u);
+        }
+      }
+    },
+    [le, O, E]
+  ), pr = oe(() => m?.enabled ? {
+    treeData: !0,
+    getTreeDataPath: (r) => m.getTreeDataPath ? m.getTreeDataPath(r) : r.hierarchy || [String(r.id)],
+    groupingColDef: {
+      headerName: m.groupingColumnLabel || "Group",
+      width: m.groupingColumnWidth || 200
+    },
+    defaultGroupingExpansionDepth: m.defaultExpanded ? -1 : 0
+  } : {}, [m]), gr = x(
+    (r) => {
+      const h = [];
+      if (M && Y.findIndex((H) => (c ? c(H) : H.id) === r.id) % 2 === 1 && h.push("striped-row"), de) {
+        const u = de(r.row);
+        u && h.push(u);
+      }
+      return h.join(" ");
+    },
+    [M, de, Y, c]
+  ), mr = x(
+    () => /* @__PURE__ */ e(
+      Lr,
+      {
+        title: E,
+        subtitle: t,
+        searchValue: K,
+        onSearchChange: Ge,
+        showSearch: f.showSearch,
+        selectedCount: N.ids.size,
+        totalCount: Y.length,
+        bulkActions: b,
+        onBulkAction: Fe,
+        onClearSelection: Te,
+        onAddRow: S?.enabled ? () => re(!0) : void 0,
+        onRefresh: Ce,
+        onExport: f.showExport ? He : void 0,
+        showExport: f.showExport,
+        showRefresh: f.showRefresh,
+        showColumnSelector: f.showColumnVisibility,
+        showFilterButton: f.showFilter,
+        showDensitySelector: f.showDensitySelector && k,
+        colors: n
+      }
+    ),
+    [
+      E,
+      t,
+      K,
+      Ge,
+      f,
+      N.ids.size,
+      Y.length,
+      b,
+      Fe,
+      Te,
+      S?.enabled,
+      Ce,
+      He,
+      k,
+      n
+    ]
+  );
+  return v ? /* @__PURE__ */ p(
+    Ee,
+    {
+      elevation: me,
+      sx: {
+        width: "100%",
+        height: d,
+        borderRadius: be,
+        overflow: "hidden",
+        border: Q ? `1px solid ${n.borderColor}` : "none",
+        backgroundColor: n.background,
+        ...ke
+      },
+      className: Se,
+      children: [
+        f.show && /* @__PURE__ */ p(
+          _e,
+          {
+            sx: {
+              pl: 2,
+              pr: 1.5,
+              py: 1.5,
+              borderBottom: `1px solid ${n.borderColor}`,
+              minHeight: "auto !important",
+              gap: 2
+            },
+            children: [
+              /* @__PURE__ */ e(A, { width: 120, height: 24, sx: { borderRadius: "4px" } }),
+              /* @__PURE__ */ e(D, { sx: { flex: 1 } }),
+              /* @__PURE__ */ e(A, { width: 180, height: 36, sx: { borderRadius: "8px" } }),
+              /* @__PURE__ */ e(A, { width: 32, height: 32, sx: { borderRadius: "8px" } }),
+              /* @__PURE__ */ e(A, { width: 32, height: 32, sx: { borderRadius: "8px" } })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          $r,
+          {
+            columns: Math.min(a.length, 5),
+            rows: Math.floor((d - 120) / U.rowHeight),
+            density: ee,
+            showCheckbox: G?.enabled,
+            colors: n
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ e(D, { sx: { width: "100%", ...ke }, className: Se, children: /* @__PURE__ */ p(
+    Ee,
+    {
+      elevation: me,
+      sx: {
+        width: "100%",
+        height: d,
+        maxHeight: C,
+        minHeight: T,
+        borderRadius: be,
+        overflow: "hidden",
+        border: Q ? `1px solid ${n.borderColor}` : "none",
+        backgroundColor: n.background,
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: [
+        /* @__PURE__ */ e(
+          Sr,
+          {
+            apiRef: O,
+            rows: Y,
+            columns: Be,
+            loading: !1,
+            getRowId: c,
+            density: Pr[ee],
+            checkboxSelection: G?.enabled,
+            rowSelectionModel: N,
+            onRowSelectionModelChange: ar,
+            disableRowSelectionOnClick: !G?.selectOnClick,
+            pagination: !0,
+            paginationModel: Je,
+            onPaginationModelChange: sr,
+            pageSizeOptions: g.pageSizeOptions || [10, 25, 50, 100],
+            sortingMode: y.serverSide ? "server" : "client",
+            sortModel: Xe,
+            onSortModelChange: lr,
+            disableColumnSorting: !y.enabled,
+            filterMode: w.serverSide ? "server" : "client",
+            filterModel: er,
+            onFilterModelChange: dr,
+            disableColumnFilter: !w.enabled,
+            editMode: B?.mode || "cell",
+            rowModesModel: or,
+            onRowModesModelChange: tr,
+            onRowEditStop: cr,
+            processRowUpdate: hr,
+            ...pr,
+            disableColumnMenu: !1,
+            columnHeaderHeight: U.headerHeight,
+            rowHeight: U.rowHeight,
+            onRowClick: Ne,
+            onRowDoubleClick: Ke,
+            onCellClick: Ue,
+            getRowClassName: gr,
+            getCellClassName: Ye,
+            slots: {
+              toolbar: f.show ? mr : void 0,
+              ...qe
+            },
+            slotProps: {
+              ...Z,
+              row: {
+                ...Z?.row,
+                onMouseEnter: (r) => {
+                  const h = r.currentTarget.getAttribute("data-id");
+                  h && De(h), Z?.row?.onMouseEnter?.(r);
+                },
+                onMouseLeave: (r) => {
+                  De(null), Z?.row?.onMouseLeave?.(r);
+                }
+              }
+            },
+            sx: {
+              border: "none",
+              borderRadius: 0,
+              // DataGrid itself should have no border radius (Paper handles it)
+              fontFamily: L.fontFamily,
+              flex: 1,
+              // MUI X DataGrid v8 CSS Variables - these control the theme
+              "--DataGrid-t-header-background-base": n.headerBg,
+              "--DataGrid-t-color-border-base": n.headerBorder || n.borderColor,
+              "--DataGrid-t-color-background-base": n.background,
+              "--DataGrid-t-color-foreground-base": n.text,
+              "--DataGrid-t-color-foreground-muted": n.textSecondary,
+              "--DataGrid-t-cell-background-pinned": n.background,
+              "--DataGrid-t-radius-base": "0px",
+              // No internal border radius
+              // Header styles - with !important to override CSS variables
+              "& .MuiDataGrid-columnHeaders": {
+                backgroundColor: `${n.headerBg} !important`,
+                borderBottom: `2px solid ${n.headerBorder} !important`,
+                borderRadius: "0 !important"
+                // Remove any internal border radius
+              },
+              "& .MuiDataGrid-columnHeader": {
+                fontWeight: L.headerWeight,
+                fontSize: U.fontSize,
+                color: `${n.headerText} !important`,
+                backgroundColor: `${n.headerBg} !important`,
+                borderRadius: "0 !important",
+                // No rounded corners on header cells
+                "&:focus, &:focus-within": {
+                  outline: "none"
+                },
+                // Remove rounded corners from first and last header cells
+                "&:first-of-type": {
+                  borderTopLeftRadius: "0 !important",
+                  borderBottomLeftRadius: "0 !important"
+                },
+                "&:last-of-type": {
+                  borderTopRightRadius: "0 !important",
+                  borderBottomRightRadius: "0 !important"
+                }
+              },
+              // Target the row containing headers
+              "& .MuiDataGrid-columnHeaderRow": {
+                backgroundColor: `${n.headerBg} !important`,
+                borderRadius: 0
+              },
+              // Target the scrollable header container
+              "& .MuiDataGrid-scrollableHeaders": {
+                borderRadius: 0
+              },
+              // Main container to clip properly
+              "& .MuiDataGrid-main": {
+                borderRadius: 0
+              },
+              "& .MuiDataGrid-columnHeaderTitle": {
+                fontWeight: L.headerWeight
+              },
+              "& .MuiDataGrid-columnSeparator": {
+                color: n.borderColor,
+                opacity: 0.5
+              },
+              // Cell styles
+              "& .MuiDataGrid-cell": {
+                fontSize: U.fontSize,
+                borderBottom: `1px solid ${n.borderColor}`,
+                color: n.text,
+                display: "flex",
+                alignItems: "center",
+                "&:focus, &:focus-within": {
+                  outline: "none"
+                }
+              },
+              // Row styles
+              "& .MuiDataGrid-row": {
+                transition: Gr.hover,
+                "&:hover": {
+                  backgroundColor: n.hover
+                },
+                "&.Mui-selected": {
+                  backgroundColor: n.selected,
+                  "&:hover": {
+                    backgroundColor: ne(ve.palette.primary.main, 0.12)
+                  }
+                }
+              },
+              "& .MuiDataGrid-row.striped-row": {
+                backgroundColor: n.alternateRow,
+                "&:hover": {
+                  backgroundColor: n.hover
+                }
+              },
+              // Footer styles
+              "& .MuiDataGrid-footerContainer": {
+                borderTop: `1px solid ${n.borderColor}`,
+                backgroundColor: n.background,
+                minHeight: 48
+              },
+              "& .MuiTablePagination-root": {
+                color: n.text
+              },
+              "& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows": {
+                fontSize: "0.8125rem",
+                color: n.textSecondary
+              },
+              // Checkbox styles
+              "& .MuiCheckbox-root": {
+                color: n.textSecondary,
+                padding: "6px",
+                "&.Mui-checked": {
+                  color: "primary.main"
+                }
+              },
+              // Empty/loading overlay
+              "& .MuiDataGrid-overlay": {
+                backgroundColor: "transparent"
+              },
+              // Virtual scroller
+              "& .MuiDataGrid-virtualScroller": {
+                backgroundColor: n.background
+              },
+              // Toolbar container
+              "& .MuiDataGrid-toolbarContainer": {
+                padding: 0
+              },
+              // Scrollbar styling
+              "& .MuiDataGrid-virtualScroller::-webkit-scrollbar": {
+                width: 8,
+                height: 8
+              },
+              "& .MuiDataGrid-virtualScroller::-webkit-scrollbar-track": {
+                backgroundColor: "transparent"
+              },
+              "& .MuiDataGrid-virtualScroller::-webkit-scrollbar-thumb": {
+                backgroundColor: n.borderColor,
+                borderRadius: 4,
+                "&:hover": {
+                  backgroundColor: n.textSecondary
+                }
+              }
+            }
+          }
+        ),
+        S?.enabled && /* @__PURE__ */ e(
+          Hr,
+          {
+            columns: Be,
+            config: S,
+            density: ee,
+            onAdd: ur,
+            onCancel: () => re(!1),
+            isActive: nr,
+            onActivate: () => re(!0),
+            mode: Me
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  ao as D
+};