@12-apps/ui 5.0.0 → 5.0.1

package/dist/chunk-P3IPM2SZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import { alpha, Box, ToggleButton, ToggleButtonGroup, useTheme } from '@mui/material';\nimport type { Theme } from '@mui/material';\nimport { styled } from '@mui/material';\nimport React, { forwardRef } from 'react';\n\nimport type { ToggleGroupProps } from './ToggleGroup.types';\n\nconst getColorFromTheme = (theme: Theme, color: string) => {\n  if (color === 'neutral') {\n    return {\n      main: theme.palette.grey[700],\n      dark: theme.palette.grey[800],\n      light: theme.palette.grey[500],\n      contrastText: theme.palette.getContrastText(theme.palette.grey[700]),\n    };\n  }\n\n  const colorMap = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    danger: theme.palette.error,\n  };\n\n  const palette = colorMap[color as keyof typeof colorMap] || theme.palette.primary;\n\n  // Ensure palette has required properties\n  return {\n    main: palette.main,\n    dark: palette.dark || palette.main,\n    light: palette.light || palette.main,\n    contrastText: palette.contrastText || theme.palette.getContrastText(palette.main),\n  };\n};\n\nconst StyledToggleGroup = styled(ToggleButtonGroup, {\n  shouldForwardProp: (prop) => !['customColor', 'customSize', 'glass'].includes(prop as string),\n})<{\n  customColor?: string;\n  customSize?: string;\n  glass?: boolean;\n}>(({ theme, glass }) => ({\n  backgroundColor: glass ? alpha(theme.palette.background.paper, 0.1) : 'transparent',\n  backdropFilter: glass ? 'blur(20px)' : 'none',\n  borderRadius: theme.spacing(1),\n  padding: glass ? 4 : 0,\n  border: glass ? `1px solid ${alpha(theme.palette.divider, 0.2)}` : 'none',\n\n  '& .MuiToggleButtonGroup-grouped': {\n    margin: theme.spacing(0.5),\n    border: 0,\n    borderRadius: `${theme.shape.borderRadius}px !important`,\n  },\n}));\n\nexport const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(\n  (\n    {\n      variant = 'single',\n      color = 'primary',\n      size = 'md',\n      options,\n      glass = false,\n      gradient = false,\n      value,\n      onChange,\n      dataTestId = 'toggle-group',\n      ...props\n    },\n    ref,\n  ) => {\n    const theme = useTheme();\n    const colorPalette = getColorFromTheme(theme, color);\n\n    const sizeMap = {\n      xs: { padding: '4px 8px', fontSize: '0.75rem' },\n      sm: { padding: '6px 12px', fontSize: '0.875rem' },\n      md: { padding: '8px 16px', fontSize: '1rem' },\n      lg: { padding: '10px 20px', fontSize: '1.125rem' },\n      xl: { padding: '12px 24px', fontSize: '1.25rem' },\n    };\n\n    return (\n      <StyledToggleGroup\n        ref={ref}\n        customColor={color}\n        customSize={size}\n        glass={glass}\n        value={value}\n        onChange={onChange}\n        exclusive={variant === 'exclusive' || variant === 'single'}\n        data-testid={dataTestId}\n        {...props}\n      >\n        {options.map((option) => (\n          <ToggleButton\n            key={option.value}\n            value={option.value}\n            disabled={option.disabled}\n            data-testid={`${dataTestId}-item-${option.value}`}\n            sx={{\n              textTransform: 'none',\n              fontWeight: 500,\n              transition: 'all 0.3s ease',\n              ...sizeMap[size as keyof typeof sizeMap],\n\n              '&.Mui-selected': {\n                backgroundColor: colorPalette.main,\n                color: colorPalette.contrastText,\n\n                ...(gradient && {\n                  background: `linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.dark})`,\n                }),\n              },\n            }}\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n              {option.icon}\n              {option.label}\n            </Box>\n          </ToggleButton>\n        ))}\n      </StyledToggleGroup>\n    );\n  },\n);\n\nToggleGroup.displayName = 'ToggleGroup';\n"],"mappings":";AAAA,SAAS,OAAO,KAAK,cAAc,mBAAmB,gBAAgB;AAEtE,SAAS,cAAc;AACvB,SAAgB,kBAAkB;AA8FxB,cAqBE,YArBF;AA1FV,IAAM,oBAAoB,CAAC,OAAc,UAAkB;AACzD,MAAI,UAAU,WAAW;AACvB,WAAO;AAAA,MACL,MAAM,MAAM,QAAQ,KAAK,GAAG;AAAA,MAC5B,MAAM,MAAM,QAAQ,KAAK,GAAG;AAAA,MAC5B,OAAO,MAAM,QAAQ,KAAK,GAAG;AAAA,MAC7B,cAAc,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,KAAK,GAAG,CAAC;AAAA,IACrE;AAAA,EACF;AAEA,QAAM,WAAW;AAAA,IACf,SAAS,MAAM,QAAQ;AAAA,IACvB,WAAW,MAAM,QAAQ;AAAA,IACzB,SAAS,MAAM,QAAQ;AAAA,IACvB,SAAS,MAAM,QAAQ;AAAA,IACvB,MAAM,MAAM,QAAQ;AAAA,IACpB,QAAQ,MAAM,QAAQ;AAAA,EACxB;AAEA,QAAM,UAAU,SAAS,KAA8B,KAAK,MAAM,QAAQ;AAG1E,SAAO;AAAA,IACL,MAAM,QAAQ;AAAA,IACd,MAAM,QAAQ,QAAQ,QAAQ;AAAA,IAC9B,OAAO,QAAQ,SAAS,QAAQ;AAAA,IAChC,cAAc,QAAQ,gBAAgB,MAAM,QAAQ,gBAAgB,QAAQ,IAAI;AAAA,EAClF;AACF;AAEA,IAAM,oBAAoB,OAAO,mBAAmB;AAAA,EAClD,mBAAmB,CAAC,SAAS,CAAC,CAAC,eAAe,cAAc,OAAO,EAAE,SAAS,IAAc;AAC9F,CAAC,EAIE,CAAC,EAAE,OAAO,MAAM,OAAO;AAAA,EACxB,iBAAiB,QAAQ,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,IAAI;AAAA,EACtE,gBAAgB,QAAQ,eAAe;AAAA,EACvC,cAAc,MAAM,QAAQ,CAAC;AAAA,EAC7B,SAAS,QAAQ,IAAI;AAAA,EACrB,QAAQ,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC,KAAK;AAAA,EAEnE,mCAAmC;AAAA,IACjC,QAAQ,MAAM,QAAQ,GAAG;AAAA,IACzB,QAAQ;AAAA,IACR,cAAc,GAAG,MAAM,MAAM,YAAY;AAAA,EAC3C;AACF,EAAE;AAEK,IAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,QAAQ,SAAS;AACvB,UAAM,eAAe,kBAAkB,OAAO,KAAK;AAEnD,UAAM,UAAU;AAAA,MACd,IAAI,EAAE,SAAS,WAAW,UAAU,UAAU;AAAA,MAC9C,IAAI,EAAE,SAAS,YAAY,UAAU,WAAW;AAAA,MAChD,IAAI,EAAE,SAAS,YAAY,UAAU,OAAO;AAAA,MAC5C,IAAI,EAAE,SAAS,aAAa,UAAU,WAAW;AAAA,MACjD,IAAI,EAAE,SAAS,aAAa,UAAU,UAAU;AAAA,IAClD;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,aAAa;AAAA,QACb,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,YAAY,eAAe,YAAY;AAAA,QAClD,eAAa;AAAA,QACZ,GAAG;AAAA,QAEH,kBAAQ,IAAI,CAAC,WACZ;AAAA,UAAC;AAAA;AAAA,YAEC,OAAO,OAAO;AAAA,YACd,UAAU,OAAO;AAAA,YACjB,eAAa,GAAG,UAAU,SAAS,OAAO,KAAK;AAAA,YAC/C,IAAI;AAAA,cACF,eAAe;AAAA,cACf,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,GAAG,QAAQ,IAA4B;AAAA,cAEvC,kBAAkB;AAAA,gBAChB,iBAAiB,aAAa;AAAA,gBAC9B,OAAO,aAAa;AAAA,gBAEpB,GAAI,YAAY;AAAA,kBACd,YAAY,2BAA2B,aAAa,IAAI,KAAK,aAAa,IAAI;AAAA,gBAChF;AAAA,cACF;AAAA,YACF;AAAA,YAEA,+BAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAE,GACtD;AAAA,qBAAO;AAAA,cACP,OAAO;AAAA,eACV;AAAA;AAAA,UAvBK,OAAO;AAAA,QAwBd,CACD;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;","names":[]}

package/dist/chunk-PZ5AY32C.js

@@ -0,0 +1,10 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+export {
+  __export
+};
+//# sourceMappingURL=chunk-PZ5AY32C.js.map

package/dist/chunk-PZ5AY32C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-Q3FAWSH4.js

@@ -0,0 +1,8 @@
+// src/mui/Stack.ts
+import { Stack, Stack as Stack2 } from "@mui/material";
+
+export {
+  Stack,
+  Stack2
+};
+//# sourceMappingURL=chunk-Q3FAWSH4.js.map

package/dist/chunk-Q3FAWSH4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/mui/Stack.ts"],"sourcesContent":["export type { StackProps } from '@mui/material';\nexport { Stack, Stack as default } from '@mui/material';\n"],"mappings":";AACA,SAAS,OAAgB,SAATA,cAAwB;","names":["Stack"]}

package/dist/chunk-QLBYAYUG.js

@@ -0,0 +1,651 @@
+// src/components/data-display/DataGrid/DataGrid.tsx
+import { Paper, Table, TableContainer } from "@mui/material";
+
+// src/components/data-display/DataGrid/DataGrid.body.tsx
+import { Checkbox as Checkbox2, TableBody, TableCell as TableCell2, TableHead, TableRow as TableRow2, useTheme as useTheme2 } from "@mui/material";
+
+// src/components/data-display/DataGrid/DataGrid.cells.tsx
+import ArrowDownward from "@mui/icons-material/ArrowDownward";
+import ArrowUpward from "@mui/icons-material/ArrowUpward";
+import ExpandLess from "@mui/icons-material/ExpandLess";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+import UnfoldMore from "@mui/icons-material/UnfoldMore";
+import { Button, Checkbox, IconButton, TableCell, TableRow, Typography, useTheme } from "@mui/material";
+import React from "react";
+
+// src/components/data-display/DataGrid/DataGrid.rows.ts
+function cellValue(row, column) {
+  const { accessor } = column;
+  if (typeof accessor === "function") return accessor(row);
+  if (accessor !== void 0) return row[accessor];
+  return row[column.id];
+}
+function compareValues(a, b) {
+  if (a == null && b == null) return 0;
+  if (a == null) return -1;
+  if (b == null) return 1;
+  const left = typeof a === "number" ? a : String(a);
+  const right = typeof b === "number" ? b : String(b);
+  if (left < right) return -1;
+  return left > right ? 1 : 0;
+}
+function makeComparator(sortBy, columnMap) {
+  return (a, b) => {
+    for (const sort of sortBy) {
+      const column = columnMap.get(sort.id);
+      if (!column || !sort.dir) continue;
+      const comparison = compareValues(cellValue(a, column), cellValue(b, column));
+      if (comparison !== 0) return sort.dir === "desc" ? -comparison : comparison;
+    }
+    return 0;
+  };
+}
+function matchesFilter(row, filter, columnMap) {
+  const column = columnMap.get(filter.id);
+  if (!column || !filter.value) return true;
+  const value = cellValue(row, column);
+  if (column.filterPredicate) return column.filterPredicate(value, filter.value, row);
+  return String(value ?? "").toLowerCase().includes(String(filter.value).toLowerCase());
+}
+function processRows(pipeline) {
+  const { rows, columnMap, needsFiltering, needsSorting, needsPagination } = pipeline;
+  if (!needsFiltering && !needsSorting && !needsPagination) return rows;
+  let result = rows;
+  if (needsFiltering) {
+    result = result.filter(
+      (row) => pipeline.filters.every((filter) => matchesFilter(row, filter, columnMap))
+    );
+  }
+  if (needsSorting) {
+    result = [...result].sort(makeComparator(pipeline.sortBy, columnMap));
+  }
+  if (needsPagination) {
+    const start = pipeline.pageIndex * pipeline.pageSize;
+    result = result.slice(start, start + pipeline.pageSize);
+  }
+  return result;
+}
+
+// src/components/data-display/DataGrid/DataGrid.cells.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function SortIcon({ dir }) {
+  if (!dir) return /* @__PURE__ */ jsx(UnfoldMore, { fontSize: "small", sx: { opacity: 0.5 } });
+  return dir === "asc" ? /* @__PURE__ */ jsx(ArrowUpward, { fontSize: "small" }) : /* @__PURE__ */ jsx(ArrowDownward, { fontSize: "small" });
+}
+function ariaSort(dir) {
+  if (!dir) return "none";
+  return dir === "asc" ? "ascending" : "descending";
+}
+function HeaderCell({
+  column,
+  sort,
+  sortable,
+  stickyHeader,
+  headerHeight,
+  onSort
+}) {
+  const theme = useTheme();
+  const content = column.headerCell ? column.headerCell(column) : column.header;
+  return /* @__PURE__ */ jsx(
+    TableCell,
+    {
+      "data-slot": "header-cell",
+      "data-sort": sort?.dir ?? "none",
+      sx: {
+        position: stickyHeader ? "sticky" : "static",
+        top: 0,
+        zIndex: 1,
+        backgroundColor: theme.palette.background.paper,
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        height: headerHeight,
+        minWidth: column.minWidth,
+        maxWidth: column.maxWidth,
+        width: column.width
+      },
+      role: "columnheader",
+      "aria-sort": ariaSort(sort?.dir),
+      children: sortable ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => onSort(column.id),
+          sx: {
+            justifyContent: "flex-start",
+            textTransform: "none",
+            fontWeight: 500,
+            color: "inherit",
+            p: 0,
+            minWidth: 0,
+            "&:hover": { backgroundColor: "transparent", opacity: 0.8 }
+          },
+          endIcon: /* @__PURE__ */ jsx(SortIcon, { dir: sort?.dir }),
+          "aria-label": column.ariaLabel ?? `Sort by ${String(column.header)}`,
+          children: content
+        }
+      ) : /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", fontWeight: 500, children: content })
+    }
+  );
+}
+function DataCell({
+  row,
+  rowIndex,
+  rowId,
+  column,
+  rowHeight,
+  editing,
+  model
+}) {
+  const value = cellValue(row, column);
+  const isEditing = model.editingCell?.rowId === rowId && model.editingCell?.colId === column.id;
+  const content = column.cell ? column.cell({ value, row, rowIndex, col: column }) : String(value ?? "");
+  return /* @__PURE__ */ jsx(
+    TableCell,
+    {
+      "data-slot": "cell",
+      "data-col-id": column.id,
+      "data-editing": isEditing,
+      sx: {
+        minWidth: column.minWidth,
+        maxWidth: column.maxWidth,
+        width: column.width,
+        height: rowHeight
+      },
+      role: "gridcell",
+      tabIndex: -1,
+      children: isEditing && column.editor ? column.editor({
+        value,
+        row,
+        onChange: () => void 0,
+        commit: () => {
+          editing.onEditCommit?.({ rowId, colId: column.id, value, row });
+          model.setEditingCell(null);
+        },
+        cancel: () => model.setEditingCell(null)
+      }) : content
+    }
+  );
+}
+function RowControls({
+  index,
+  rowId,
+  isSelected,
+  isExpanded,
+  model,
+  props
+}) {
+  const { selection = { mode: "none" }, expansion } = props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    selection.mode !== "none" && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: isSelected,
+        onChange: (event) => model.onToggleRow(rowId, event.target.checked),
+        inputProps: { "aria-label": `Select row ${index + 1}` }
+      }
+    ) }),
+    expansion && /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        onClick: () => model.onToggleExpansion(rowId),
+        "aria-label": isExpanded ? "Collapse row" : "Expand row",
+        children: isExpanded ? /* @__PURE__ */ jsx(ExpandLess, {}) : /* @__PURE__ */ jsx(ExpandMore, {})
+      }
+    ) })
+  ] });
+}
+function GridRow(rowProps) {
+  const { row, index, rowId, isSelected, isExpanded, totalColumns, model, props } = rowProps;
+  const theme = useTheme();
+  const expansion = props.expansion;
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      TableRow,
+      {
+        "data-slot": "row",
+        "data-selected": isSelected,
+        "data-expanded": isExpanded,
+        sx: {
+          "&:hover": { backgroundColor: theme.palette.action.hover },
+          ...isSelected && { backgroundColor: theme.palette.action.selected },
+          height: model.rowHeight
+        },
+        role: "row",
+        "aria-selected": isSelected,
+        children: [
+          /* @__PURE__ */ jsx(RowControls, { ...rowProps }),
+          model.visibleColumns.map((column) => /* @__PURE__ */ jsx(
+            DataCell,
+            {
+              row,
+              rowIndex: index,
+              rowId,
+              column,
+              rowHeight: model.rowHeight,
+              editing: props.editing ?? { mode: "none" },
+              model
+            },
+            column.id
+          ))
+        ]
+      }
+    ),
+    expansion && isExpanded && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: totalColumns, children: expansion.render(row, index) }) })
+  ] });
+}
+
+// src/components/data-display/DataGrid/DataGrid.body.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function HeaderControls({
+  model,
+  props
+}) {
+  const theme = useTheme2();
+  const { selection = { mode: "none" }, expansion, stickyHeader = true } = props;
+  const sticky = {
+    position: stickyHeader ? "sticky" : "static",
+    top: 0,
+    zIndex: 1,
+    backgroundColor: theme.palette.background.paper
+  };
+  const total = model.processedRows.length;
+  const picked = model.selectedRowIds.length;
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    selection.mode !== "none" && /* @__PURE__ */ jsx2(TableCell2, { padding: "checkbox", sx: sticky, children: selection.mode === "multi" && /* @__PURE__ */ jsx2(
+      Checkbox2,
+      {
+        indeterminate: picked > 0 && picked < total,
+        checked: total > 0 && picked === total,
+        onChange: (event) => model.setSelectedRowIds(
+          event.target.checked ? model.processedRows.map((row, index) => rowIdOf(props, row, index)) : []
+        ),
+        inputProps: { "aria-label": "Select all rows" }
+      }
+    ) }),
+    expansion && /* @__PURE__ */ jsx2(TableCell2, { padding: "checkbox", sx: sticky })
+  ] });
+}
+function rowIdOf(props, row, index) {
+  if (props.getRowId) return props.getRowId(row, index);
+  const candidate = row.id;
+  return candidate ?? index;
+}
+function GridHeader(section) {
+  const { model, props } = section;
+  const { sorting = {}, stickyHeader = true, headerHeight = 56 } = props;
+  const sortable = sorting.mode === "client" || sorting.mode === "server";
+  return /* @__PURE__ */ jsx2(TableHead, { "data-slot": "header", children: /* @__PURE__ */ jsxs2(TableRow2, { "data-slot": "header-row", role: "row", children: [
+    /* @__PURE__ */ jsx2(HeaderControls, { ...section }),
+    model.visibleColumns.map((column) => /* @__PURE__ */ jsx2(
+      HeaderCell,
+      {
+        column,
+        sort: model.sortBy.find((entry) => entry.id === column.id),
+        sortable: column.enableSort !== false && sortable,
+        stickyHeader,
+        headerHeight,
+        onSort: model.onSort
+      },
+      column.id
+    ))
+  ] }) });
+}
+function Spacer({ height, colSpan }) {
+  if (height <= 0) return null;
+  return /* @__PURE__ */ jsx2(TableRow2, { children: /* @__PURE__ */ jsx2(TableCell2, { colSpan, sx: { height, border: "none", p: 0 } }) });
+}
+function GridBody(section) {
+  const { model, props, totalColumns } = section;
+  const { start, end } = model.visibleRange;
+  const trailing = model.virtualized ? model.processedRows.length - end : 0;
+  return /* @__PURE__ */ jsxs2(TableBody, { "data-slot": "body", children: [
+    model.virtualized ? /* @__PURE__ */ jsx2(Spacer, { height: start * model.rowHeight, colSpan: totalColumns }) : null,
+    model.visibleRows.map((row, offset) => {
+      const index = model.virtualized ? start + offset : offset;
+      const rowId = rowIdOf(props, row, index);
+      return /* @__PURE__ */ jsx2(
+        GridRow,
+        {
+          row,
+          index,
+          rowId,
+          isSelected: model.selectedRowIdsSet.has(rowId),
+          isExpanded: model.expandedRowIdsSet.has(rowId),
+          totalColumns,
+          model,
+          props
+        },
+        rowId
+      );
+    }),
+    model.virtualized ? /* @__PURE__ */ jsx2(Spacer, { height: trailing * model.rowHeight, colSpan: totalColumns }) : null
+  ] });
+}
+
+// src/components/data-display/DataGrid/DataGrid.model.ts
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+var DEFAULT_ROW_HEIGHT = 52;
+var DEFAULT_PAGE_SIZE = 50;
+var OVERSCAN_COUNT = 20;
+var VIRTUALIZATION_THRESHOLD = 100;
+var INITIAL_WINDOW = 50;
+var WINDOW_DRIFT = 5;
+function densityHeight(base, density) {
+  if (density === "compact") return Math.max(base * 0.8, 32);
+  if (density === "spacious") return base * 1.2;
+  return base;
+}
+function useProcessedRows(props, columnMap, sortBy, filters) {
+  const { rows, filtering = {}, sorting = {}, pagination, virtualizeRows = true } = props;
+  const pageIndex = pagination?.pageIndex ?? 0;
+  const pageSize = pagination?.pageSize ?? DEFAULT_PAGE_SIZE;
+  return useMemo(
+    () => processRows({
+      rows,
+      columnMap,
+      filters,
+      sortBy,
+      needsFiltering: filtering.mode === "client" && filters.length > 0,
+      needsSorting: sorting.mode === "client" && sortBy.length > 0,
+      // Virtualization already slices; doing both would page a page.
+      needsPagination: pagination?.mode === "client" && !virtualizeRows,
+      pageIndex,
+      pageSize
+    }),
+    [
+      rows,
+      columnMap,
+      filters,
+      sortBy,
+      filtering.mode,
+      sorting.mode,
+      pagination?.mode,
+      virtualizeRows,
+      pageIndex,
+      pageSize
+    ]
+  );
+}
+function useRowWindow(rowCount, rowHeight, enabled) {
+  const [range, setRange] = useState({ start: 0, end: INITIAL_WINDOW });
+  const rafRef = useRef(null);
+  useEffect(() => {
+    if (rowCount < range.end) setRange({ start: 0, end: Math.min(INITIAL_WINDOW, rowCount) });
+  }, [rowCount, range.end]);
+  useEffect(
+    () => () => {
+      if (rafRef.current !== null) window.cancelAnimationFrame(rafRef.current);
+    },
+    []
+  );
+  const onScroll = useCallback(
+    (event) => {
+      if (!enabled) return;
+      const { scrollTop, clientHeight } = event.currentTarget;
+      if (rafRef.current !== null) window.cancelAnimationFrame(rafRef.current);
+      rafRef.current = window.requestAnimationFrame(() => {
+        const first = Math.floor(scrollTop / rowHeight);
+        const visible = Math.ceil(clientHeight / rowHeight);
+        const start = Math.max(0, first - OVERSCAN_COUNT);
+        const end = Math.min(first + visible + OVERSCAN_COUNT, rowCount);
+        setRange(
+          (current) => Math.abs(start - current.start) > WINDOW_DRIFT || Math.abs(end - current.end) > WINDOW_DRIFT ? { start, end } : current
+        );
+        rafRef.current = null;
+      });
+    },
+    [enabled, rowHeight, rowCount]
+  );
+  return { range, onScroll };
+}
+function nextSortBy(current, columnId) {
+  const existing = current.find((sort) => sort.id === columnId);
+  let dir = "asc";
+  if (existing?.dir === "asc") dir = "desc";
+  else if (existing?.dir === "desc") dir = null;
+  return dir ? [{ id: columnId, dir }] : current.filter((sort) => sort.id !== columnId);
+}
+function useRowFlags(props) {
+  const { selection = { mode: "none" }, expansion } = props;
+  const [internalSelected, setInternalSelected] = useState(selection.defaultSelectedRowIds ?? []);
+  const [internalExpanded, setInternalExpanded] = useState(expansion?.defaultExpandedRowIds ?? []);
+  const selectedRowIds = selection.selectedRowIds ?? internalSelected;
+  const expandedRowIds = expansion?.expandedRowIds ?? internalExpanded;
+  const commitSelected = useCallback(
+    (ids) => {
+      if (selection.onChangeSelected) selection.onChangeSelected(ids);
+      else setInternalSelected(ids);
+    },
+    [selection]
+  );
+  return {
+    selectedRowIds,
+    selectedRowIdsSet: useMemo(() => new Set(selectedRowIds), [selectedRowIds]),
+    expandedRowIdsSet: useMemo(() => new Set(expandedRowIds), [expandedRowIds]),
+    setSelectedRowIds: commitSelected,
+    onToggleRow: (rowId, isSelected) => {
+      if (selection.mode === "single") commitSelected(isSelected ? [rowId] : []);
+      else if (selection.mode === "multi") {
+        commitSelected(
+          isSelected ? [...selectedRowIds, rowId] : selectedRowIds.filter((id) => id !== rowId)
+        );
+      }
+    },
+    onToggleExpansion: (rowId) => {
+      if (!expansion) return;
+      const next = expandedRowIds.includes(rowId) ? expandedRowIds.filter((id) => id !== rowId) : [...expandedRowIds, rowId];
+      if (expansion.onChangeExpanded) expansion.onChangeExpanded(next);
+      else setInternalExpanded(next);
+    }
+  };
+}
+function useSortHandler(props, sortBy, filters, setInternalSortBy) {
+  const { sorting = {}, pagination, onRequestData } = props;
+  return useCallback(
+    (columnId) => {
+      const next = nextSortBy(sortBy, columnId);
+      if (sorting.mode === "server" && onRequestData) {
+        onRequestData({
+          pageIndex: pagination?.pageIndex ?? 0,
+          pageSize: pagination?.pageSize ?? DEFAULT_PAGE_SIZE,
+          sortBy: next,
+          filters: [...filters]
+        });
+        return;
+      }
+      if (sorting.onChangeSortBy) sorting.onChangeSortBy(next);
+      else setInternalSortBy(next);
+    },
+    [sortBy, sorting, onRequestData, pagination, filters, setInternalSortBy]
+  );
+}
+function useSortAndFilter(props) {
+  const { sorting = {}, filtering = {} } = props;
+  const [internalSortBy, setInternalSortBy] = useState(sorting.defaultSortBy ?? []);
+  const [internalFilters] = useState(filtering.defaultFilters ?? []);
+  return {
+    sortBy: sorting.sortBy ?? internalSortBy,
+    filters: filtering.filters ?? internalFilters,
+    setInternalSortBy
+  };
+}
+function useDataGridModel(props) {
+  const { columns } = props;
+  const containerRef = useRef(null);
+  const [editingCell, setEditingCell] = useState(null);
+  const { sortBy, filters, setInternalSortBy } = useSortAndFilter(props);
+  const rowHeight = densityHeight(props.rowHeight ?? DEFAULT_ROW_HEIGHT, props.density);
+  const columnMap = useMemo(
+    () => new Map(columns.map((column) => [column.id, column])),
+    [columns]
+  );
+  const visibleColumns = useMemo(() => columns.filter((column) => !column.hidden), [columns]);
+  const processedRows = useProcessedRows(props, columnMap, sortBy, filters);
+  const virtualized = (props.virtualizeRows ?? true) && processedRows.length > VIRTUALIZATION_THRESHOLD;
+  const { range, onScroll } = useRowWindow(processedRows.length, rowHeight, virtualized);
+  const onSort = useSortHandler(props, sortBy, filters, setInternalSortBy);
+  return {
+    containerRef,
+    rowHeight,
+    visibleColumns,
+    processedRows,
+    visibleRows: virtualized ? processedRows.slice(range.start, range.end) : processedRows,
+    visibleRange: range,
+    virtualized,
+    sortBy,
+    editingCell,
+    setEditingCell,
+    onSort,
+    onScroll,
+    ...useRowFlags(props)
+  };
+}
+
+// src/components/data-display/DataGrid/DataGrid.states.tsx
+import { Box, CircularProgress, Typography as Typography2 } from "@mui/material";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Placeholder({
+  dataTestId,
+  ariaLabel,
+  className,
+  style,
+  htmlProps,
+  children,
+  flag
+}) {
+  return /* @__PURE__ */ jsx3(
+    Box,
+    {
+      "data-ui": "datagrid",
+      ...{ [flag]: "true" },
+      "data-testid": dataTestId,
+      className,
+      style,
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "column",
+        gap: 2,
+        height: 200
+      },
+      "aria-label": ariaLabel,
+      role: "grid",
+      ...htmlProps,
+      children
+    }
+  );
+}
+function DataGridLoading(props) {
+  return /* @__PURE__ */ jsx3(Placeholder, { ...props, flag: "data-loading", children: /* @__PURE__ */ jsx3(CircularProgress, {}) });
+}
+function DataGridError(props) {
+  const { error, ...rest } = props;
+  return /* @__PURE__ */ jsx3(Placeholder, { ...rest, flag: "data-error", children: /* @__PURE__ */ jsx3(Typography2, { color: "error", variant: "body1", children: error }) });
+}
+function DataGridEmpty(props) {
+  const { emptyState, ...rest } = props;
+  return /* @__PURE__ */ jsx3(Placeholder, { ...rest, flag: "data-empty", children: emptyState ?? /* @__PURE__ */ jsx3(Typography2, { variant: "body1", color: "text.secondary", children: "No data available" }) });
+}
+
+// src/components/data-display/DataGrid/DataGrid.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function resolveChrome(props) {
+  const { className, style, "data-testid": dataTestId, ...rest } = props;
+  const stickyHeader = props.stickyHeader ?? true;
+  return {
+    dataAttrs: {
+      "data-ui": "datagrid",
+      "data-density": props.density ?? "comfortable",
+      "data-size-mode": props.sizeMode ?? "auto",
+      "data-virtual-rows": props.virtualizeRows ?? true,
+      "data-virtual-cols": props.virtualizeColumns ?? false,
+      "data-sticky-header": stickyHeader
+    },
+    placeholder: {
+      dataTestId,
+      ariaLabel: props.ariaLabel ?? "Data grid",
+      className,
+      style,
+      // Only the DOM-safe leftovers reach the element: every grid-specific prop
+      // is named in `GRID_ONLY_PROPS`, so this cannot smuggle `rows` onto a div.
+      htmlProps: omitGridProps(rest)
+    }
+  };
+}
+var DataGrid = (props) => {
+  const model = useDataGridModel(props);
+  const { dataAttrs, placeholder } = resolveChrome(props);
+  if (props.loading) return /* @__PURE__ */ jsx4(DataGridLoading, { ...placeholder });
+  if (props.error) return /* @__PURE__ */ jsx4(DataGridError, { ...placeholder, error: props.error });
+  if (model.processedRows.length === 0) {
+    return /* @__PURE__ */ jsx4(DataGridEmpty, { ...placeholder, emptyState: props.emptyState });
+  }
+  const leadingColumns = (props.selection?.mode ?? "none") !== "none" ? 1 : 0;
+  const totalColumns = model.visibleColumns.length + leadingColumns + (props.expansion ? 1 : 0);
+  const section = { model, props, totalColumns };
+  return /* @__PURE__ */ jsx4(
+    Paper,
+    {
+      ref: model.containerRef,
+      ...dataAttrs,
+      "data-testid": placeholder.dataTestId,
+      className: placeholder.className,
+      style: placeholder.style,
+      role: "grid",
+      "aria-label": placeholder.ariaLabel,
+      "aria-description": props.ariaDescription,
+      "aria-rowcount": model.processedRows.length + 1,
+      "aria-colcount": totalColumns,
+      sx: { height: "100%", overflow: "hidden", display: "flex", flexDirection: "column" },
+      ...placeholder.htmlProps,
+      children: /* @__PURE__ */ jsx4(
+        TableContainer,
+        {
+          sx: { flex: 1, overflow: "auto", position: "relative" },
+          onScroll: model.onScroll,
+          children: /* @__PURE__ */ jsxs3(Table, { stickyHeader: props.stickyHeader ?? true, children: [
+            /* @__PURE__ */ jsx4(GridHeader, { ...section }),
+            /* @__PURE__ */ jsx4(GridBody, { ...section })
+          ] })
+        }
+      )
+    }
+  );
+};
+var GRID_ONLY_PROPS = [
+  "rows",
+  "columns",
+  "getRowId",
+  "sizeMode",
+  "density",
+  "rowHeight",
+  "headerHeight",
+  "footerHeight",
+  "selection",
+  "pagination",
+  "sorting",
+  "filtering",
+  "expansion",
+  "editing",
+  "virtualizeRows",
+  "virtualizeColumns",
+  "stickyHeader",
+  "stickyFooter",
+  "loading",
+  "error",
+  "emptyState",
+  "onRequestData",
+  "ariaLabel",
+  "ariaDescription"
+];
+function omitGridProps(rest) {
+  const html = { ...rest };
+  for (const key of GRID_ONLY_PROPS) delete html[key];
+  return html;
+}
+DataGrid.displayName = "DataGrid";
+
+export {
+  DataGrid
+};
+//# sourceMappingURL=chunk-QLBYAYUG.js.map