@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-KJK2Q35C.js

@@ -0,0 +1,169 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  DropdownMenu
+} from "./chunk-VFHGILXI.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Button
+} from "./chunk-KH25WUSX.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-grid-helpers.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function isActionsColumn(col) {
+  return col.type === "actions" || col.id === "actions";
+}
+function buildGridColumns(columns, visibleColumns, onRowClick) {
+  return columns.map((col) => {
+    const hidden = col.hideable !== false && !visibleColumns.includes(col.id);
+    if (!onRowClick || isActionsColumn(col)) return { ...col, hidden };
+    return {
+      ...col,
+      hidden,
+      cell: (ctx) => {
+        const content = col.cell ? col.cell(ctx) : ctx.value == null ? "" : String(ctx.value);
+        return /* @__PURE__ */ jsx(
+          default2,
+          {
+            onClick: () => onRowClick(ctx.row),
+            sx: { cursor: "pointer", width: "100%", height: "100%", display: "flex", alignItems: "center" },
+            children: content
+          }
+        );
+      }
+    };
+  });
+}
+function buildRowActionsColumn(config) {
+  const { rowActions, leading, testIdPrefix, getRowId, renderRowMenu } = config;
+  const kebabActions = rowActions.filter((action) => action.row !== false);
+  return {
+    id: "actions",
+    header: "",
+    type: "actions",
+    enableSort: false,
+    hideable: false,
+    // Narrow: the column only holds the "⋮" kebab (plus an optional leading icon),
+    // so it needs room for just one or two icons.
+    width: leading ? 72 : 44,
+    cell: ({ row }) => /* @__PURE__ */ jsxs(default2, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: sxRem(2), justifyContent: "flex-end" }, children: [
+      leading?.(row),
+      renderRowMenu ? renderRowMenu(row) : renderAutoKebab(kebabActions, row, testIdPrefix, getRowId)
+    ] })
+  };
+}
+function renderAutoKebab(kebabActions, row, testIdPrefix, getRowId) {
+  const copy = useDataViewsCopy();
+  const items = kebabActions.filter((action) => action.isVisible?.(row) ?? true).map((action) => ({
+    id: action.id,
+    label: action.rowLabel ? action.rowLabel(row) : action.label,
+    color: action.color,
+    onClick: () => void action.onSelect([row])
+  }));
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      size: "sm",
+      items,
+      trigger: /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", dataTestId: `${testIdPrefix}-actions-${getRowId(row)}`, "aria-label": copy.grid.rowActions, children: "\u22EE" })
+    }
+  );
+}
+function defaultSortFields(columns) {
+  return columns.filter(
+    (col) => col.enableSort !== false && col.type !== "actions" && col.id !== "actions" && typeof col.header === "string" && col.header !== ""
+  ).map((col) => ({
+    value: col.id,
+    label: col.header,
+    orderOptions: [
+      { value: "asc", label: "Crescente" },
+      { value: "desc", label: "Decrescente" }
+    ]
+  }));
+}
+function computeActiveFilterCount(state, fields, rangeFields) {
+  const ranges = state.ranges ?? {};
+  const pillCount = fields.reduce((n, field) => n + ((state.pills[field.id]?.length ?? 0) > 0 ? 1 : 0), 0);
+  const rangeCount = rangeFields.reduce((n, field) => {
+    const range = ranges[field.id];
+    return n + (range && (range.min != null || range.max != null) ? 1 : 0);
+  }, 0);
+  return (state.search.trim() ? 1 : 0) + pillCount + rangeCount;
+}
+function bulkMenuItems(rowActions, selectedRows, clearSelection) {
+  return rowActions.filter((action) => action.bulk !== false).map((action) => {
+    const targets = action.isVisible ? selectedRows.filter(action.isVisible) : selectedRows;
+    return { action, targets };
+  }).filter(({ targets }) => targets.length > 0).map(({ action, targets }) => ({
+    id: action.id,
+    label: action.label,
+    color: action.color,
+    onClick: () => {
+      const result = action.onSelect(targets);
+      if (result instanceof Promise) {
+        void result.then(
+          () => clearSelection(),
+          () => {
+          }
+        );
+      } else {
+        clearSelection();
+      }
+    }
+  }));
+}
+function renderBulkActions({
+  rowActions,
+  bulkActions,
+  selectedRows,
+  clearSelection,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  if (selectedRows.length === 0) return void 0;
+  if (rowActions) {
+    const items = bulkMenuItems(rowActions, selectedRows, clearSelection);
+    if (items.length === 0) return void 0;
+    return /* @__PURE__ */ jsx(
+      DropdownMenu,
+      {
+        size: "sm",
+        items,
+        trigger: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", dataTestId: `${testIdPrefix}-bulk-actions`, children: copy.grid.bulkActions(selectedRows.length) })
+      }
+    );
+  }
+  return bulkActions ? bulkActions(selectedRows, clearSelection) : void 0;
+}
+function togglePillValues(current, value, checked) {
+  const list = current ?? [];
+  return checked ? [...list, value] : list.filter((v) => v !== value);
+}
+function cardGridTracks(targetWidth) {
+  return {
+    gridTemplateColumns: (theme) => ({
+      xs: "1fr",
+      sm: `repeat(auto-fill, minmax(${rem(theme, targetWidth)}, 1fr))`
+    })
+  };
+}
+
+export {
+  isActionsColumn,
+  buildGridColumns,
+  buildRowActionsColumn,
+  defaultSortFields,
+  computeActiveFilterCount,
+  renderBulkActions,
+  togglePillValues,
+  cardGridTracks
+};
+//# sourceMappingURL=chunk-KJK2Q35C.js.map

package/dist/chunk-KJK2Q35C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-grid-helpers.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Theme } from \"@mui/material/styles/index.js\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { type GridColumn } from \"../DataGrid\";\nimport { type SortFieldDefinition } from \"../../layout/ContentToolbar\";\nimport { Box } from \"../../../mui/Box\";\nimport { rem, sxRem } from \"../../../tokens/relative\";\nimport { Button } from \"../../form/Button\";\nimport { DropdownMenu, type DropdownMenuItem } from \"../../navigation/DropdownMenu\";\n\nimport type {\n  DataViewColumn,\n  DataViewState,\n  FilterFieldConfig,\n  RangeFieldConfig,\n  RowAction,\n} from \"./data-views-types\";\n\n/** Is this the non-clickable actions column? */\nexport function isActionsColumn<T extends Record<string, unknown>>(col: GridColumn<T>): boolean {\n  return col.type === \"actions\" || col.id === \"actions\";\n}\n\n/**\n * Map the DataView columns to grid columns, applying visibility and — when a row\n * click handler is present — wrapping each non-actions cell so clicking opens the row.\n */\nexport function buildGridColumns<T extends Record<string, unknown>>(\n  columns: DataViewColumn<T>[],\n  visibleColumns: string[],\n  onRowClick: ((row: T) => void) | undefined,\n): GridColumn<T>[] {\n  return columns.map((col) => {\n    const hidden = col.hideable !== false && !visibleColumns.includes(col.id);\n    if (!onRowClick || isActionsColumn(col)) return { ...col, hidden };\n    return {\n      ...col,\n      hidden,\n      cell: (ctx) => {\n        const content = col.cell ? col.cell(ctx) : ctx.value == null ? \"\" : String(ctx.value);\n        return (\n          <Box\n            onClick={() => onRowClick(ctx.row)}\n            sx={{ cursor: \"pointer\", width: \"100%\", height: \"100%\", display: \"flex\", alignItems: \"center\" }}\n          >\n            {content}\n          </Box>\n        );\n      },\n    };\n  });\n}\n\ninterface ActionsColumnConfig<T extends Record<string, unknown>> {\n  /** Actions that build the auto \"⋮\" kebab. Ignored when `renderRowMenu` is set. */\n  rowActions: RowAction<T>[];\n  /** Optional leading slot (e.g. a favourite star) rendered before the kebab. */\n  leading?: (row: T) => React.ReactNode;\n  testIdPrefix: string;\n  getRowId: (row: T) => string | number;\n  /**\n   * Escape hatch: render a bespoke per-row menu (e.g. an entity's self-contained\n   * 3-dots menu that owns its own popups) INSTEAD of the auto kebab built from\n   * `rowActions`. This is how the table row and the card share ONE menu component.\n   * `rowActions`/`bulkActions` still drive the multi-row bulk menu, which a\n   * single-row menu intentionally does not replace.\n   */\n  renderRowMenu?: (row: T) => React.ReactNode;\n}\n\n/**\n * The auto \"⋮\" kebab actions column built from the reusable `rowActions` — the\n * SAME definitions that feed the bulk menu, so the two never drift. Each item\n * acts on just this row; `rowLabel` provides a per-row label when set. An\n * optional `leading` slot (e.g. a favourite star) renders before the kebab.\n * When `renderRowMenu` is supplied, the cell renders that bespoke menu instead.\n */\nexport function buildRowActionsColumn<T extends Record<string, unknown>>(\n  config: ActionsColumnConfig<T>,\n): DataViewColumn<T> {\n  const { rowActions, leading, testIdPrefix, getRowId, renderRowMenu } = config;\n  const kebabActions = rowActions.filter((action) => action.row !== false);\n  return {\n    id: \"actions\",\n    header: \"\",\n    type: \"actions\",\n    enableSort: false,\n    hideable: false,\n    // Narrow: the column only holds the \"⋮\" kebab (plus an optional leading icon),\n    // so it needs room for just one or two icons.\n    width: leading ? 72 : 44,\n    cell: ({ row }) => (\n      <Box component=\"span\" sx={{ display: \"inline-flex\", alignItems: \"center\", gap: sxRem(2), justifyContent: \"flex-end\" }}>\n        {leading?.(row)}\n        {renderRowMenu\n          ? renderRowMenu(row)\n          : renderAutoKebab(kebabActions, row, testIdPrefix, getRowId)}\n      </Box>\n    ),\n  };\n}\n\n/** The built-in kebab menu for one row, derived from `rowActions`. */\nfunction renderAutoKebab<T extends Record<string, unknown>>(\n  kebabActions: RowAction<T>[],\n  row: T,\n  testIdPrefix: string,\n  getRowId: (row: T) => string | number,\n): React.ReactNode {\n  const copy = useDataViewsCopy();\n  const items: DropdownMenuItem[] = kebabActions\n    .filter((action) => action.isVisible?.(row) ?? true)\n    .map((action) => ({\n      id: action.id,\n      label: action.rowLabel ? action.rowLabel(row) : action.label,\n      color: action.color,\n      onClick: () => void action.onSelect([row]),\n    }));\n  if (items.length === 0) return null;\n  return (\n    <DropdownMenu\n      size=\"sm\"\n      items={items}\n      trigger={\n        <Button variant=\"text\" size=\"sm\" dataTestId={`${testIdPrefix}-actions-${getRowId(row)}`} aria-label={copy.grid.rowActions}>\n          ⋮\n        </Button>\n      }\n    />\n  );\n}\n\n/** Sort options derived from the sortable columns when a page supplies none. */\nexport function defaultSortFields<T extends Record<string, unknown>>(\n  columns: DataViewColumn<T>[],\n): SortFieldDefinition[] {\n  return columns\n    .filter(\n      (col) =>\n        col.enableSort !== false &&\n        col.type !== \"actions\" &&\n        col.id !== \"actions\" &&\n        typeof col.header === \"string\" &&\n        col.header !== \"\",\n    )\n    .map((col) => ({\n      value: col.id,\n      label: col.header as string,\n      orderOptions: [\n        { value: \"asc\", label: \"Crescente\" },\n        { value: \"desc\", label: \"Decrescente\" },\n      ],\n    }));\n}\n\n/** Count active filters (search + selected pills + bounded ranges) for the badge. */\nexport function computeActiveFilterCount<T extends Record<string, unknown>>(\n  state: DataViewState,\n  fields: FilterFieldConfig<T>[],\n  rangeFields: RangeFieldConfig<T>[],\n): number {\n  const ranges = state.ranges ?? {};\n  const pillCount = fields.reduce((n, field) => n + ((state.pills[field.id]?.length ?? 0) > 0 ? 1 : 0), 0);\n  const rangeCount = rangeFields.reduce((n, field) => {\n    const range = ranges[field.id];\n    return n + (range && (range.min != null || range.max != null) ? 1 : 0);\n  }, 0);\n  return (state.search.trim() ? 1 : 0) + pillCount + rangeCount;\n}\n\nfunction bulkMenuItems<T extends Record<string, unknown>>(\n  rowActions: RowAction<T>[],\n  selectedRows: T[],\n  clearSelection: () => void,\n): DropdownMenuItem[] {\n  return rowActions\n    .filter((action) => action.bulk !== false)\n    .map((action) => {\n      // State-machine guards: the action runs only on the rows it applies to,\n      // and disappears from the menu when none of the selection qualifies.\n      const targets = action.isVisible ? selectedRows.filter(action.isVisible) : selectedRows;\n      return { action, targets };\n    })\n    .filter(({ targets }) => targets.length > 0)\n    .map(({ action, targets }) => ({\n      id: action.id,\n      label: action.label,\n      color: action.color,\n      onClick: () => {\n        // Run the (possibly async) handler on the captured selection, then clear\n        // it — but only once the work settles. On failure keep the selection so\n        // the user can see which rows still need action and retry.\n        const result = action.onSelect(targets);\n        if (result instanceof Promise) {\n          void result.then(\n            () => clearSelection(),\n            () => {\n              /* keep the selection on failure so the user can retry */\n            },\n          );\n        } else {\n          clearSelection();\n        }\n      },\n    }));\n}\n\ninterface RenderBulkArgs<T extends Record<string, unknown>> {\n  rowActions: RowAction<T>[] | undefined;\n  bulkActions: ((selectedRows: T[], clearSelection: () => void) => React.ReactNode) | undefined;\n  selectedRows: T[];\n  clearSelection: () => void;\n  testIdPrefix: string;\n}\n\n/**\n * The selection bulk control shown in the toolbar. Prefers the reusable\n * `rowActions` (an \"Ações\" dropdown mirroring the row kebab); falls back to the\n * low-level `bulkActions` render prop. Renders nothing with no selection.\n */\nexport function renderBulkActions<T extends Record<string, unknown>>({\n  rowActions,\n  bulkActions,\n  selectedRows,\n  clearSelection,\n  testIdPrefix,\n}: RenderBulkArgs<T>): React.ReactNode {\n  const copy = useDataViewsCopy();\n  if (selectedRows.length === 0) return undefined;\n  if (rowActions) {\n    const items = bulkMenuItems(rowActions, selectedRows, clearSelection);\n    if (items.length === 0) return undefined;\n    return (\n      <DropdownMenu\n        size=\"sm\"\n        items={items}\n        trigger={\n          <Button variant=\"outline\" size=\"sm\" dataTestId={`${testIdPrefix}-bulk-actions`}>\n            {copy.grid.bulkActions(selectedRows.length)}\n          </Button>\n        }\n      />\n    );\n  }\n  return bulkActions ? bulkActions(selectedRows, clearSelection) : undefined;\n}\n\n/** Toggle a single value in a pill's selected-list (returns the next list). */\nexport function togglePillValues(current: string[] | undefined, value: string, checked: boolean): string[] {\n  const list = current ?? [];\n  return checked ? [...list, value] : list.filter((v) => v !== value);\n}\n\n/**\n * The card grid's `grid-template-columns`, as an sx fragment.\n *\n * One rule at every width: each card asks for `targetWidth` and `auto-fill`\n * decides how many fit. Density moves the target, so it changes the count at\n * every size — which the previous column-count cap could not do, because its\n * track floor bottomed out at a constant shared by all three densities.\n *\n * Below `sm` this is a single column, and no target changes that. That is why\n * the density control hides itself there rather than offering three settings\n * that all draw the same thing.\n */\nexport function cardGridTracks(targetWidth: number) {\n  return {\n    gridTemplateColumns: (theme: Theme) => ({\n      xs: \"1fr\",\n      sm: `repeat(auto-fill, minmax(${rem(theme, targetWidth)}, 1fr))`,\n    }),\n  };\n}\n"],"mappings":"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","names":["default"]}

package/dist/chunk-KK57AHWS.js

@@ -0,0 +1,39 @@
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+
+// src/components/data-display/DataViews/data-views-header-row.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function GridHeaderRow({
+  title,
+  headerActions,
+  testIdPrefix
+}) {
+  if (!title && !headerActions) return null;
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      "data-testid": `${testIdPrefix}-header`,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 2,
+        flexWrap: "wrap",
+        pb: 1.5
+      },
+      children: [
+        title ? /* @__PURE__ */ jsx(Text, { variant: "heading", size: "lg", as: "h2", children: title }) : /* @__PURE__ */ jsx(default2, {}),
+        headerActions && /* @__PURE__ */ jsx(default2, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: headerActions })
+      ]
+    }
+  );
+}
+
+export {
+  GridHeaderRow
+};
+//# sourceMappingURL=chunk-KK57AHWS.js.map

package/dist/chunk-KLWW67WP.js

@@ -0,0 +1,252 @@
+import {
+  tabsRootStyles
+} from "./chunk-3D6HXKZM.js";
+import {
+  CustomTabPanel
+} from "./chunk-7UZ2TFIK.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/Tabs/Tabs.tsx
+import Close from "@mui/icons-material/Close";
+import Badge from "@mui/material/Badge/index.js";
+import Box from "@mui/material/Box/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import MuiTab from "@mui/material/Tab/index.js";
+import MuiTabs from "@mui/material/Tabs/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledTabs = styled(MuiTabs, {
+  shouldForwardProp: (prop) => !["customVariant", "size", "showDividers"].includes(prop)
+})(
+  ({ theme, customVariant, size, showDividers }) => ({
+    ...tabsRootStyles({ theme, customVariant, size, showDividers })
+  })
+);
+var CloseButton = styled(Box)(({ theme }) => ({
+  marginLeft: theme.spacing(0.5),
+  padding: theme.spacing(0.25),
+  width: 20,
+  height: 20,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  borderRadius: "50%",
+  color: theme.palette.action.active,
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.error.main, 0.1),
+    color: theme.palette.error.main
+  }
+}));
+var BadgeWrapper = styled(Badge)(({ theme }) => ({
+  "& .MuiBadge-badge": {
+    right: -6,
+    top: 4,
+    fontSize: rem(theme, 12),
+    minWidth: 16,
+    height: 16,
+    padding: 0
+  }
+}));
+var TABS_DEFAULTS = {
+  variant: "default",
+  size: "md",
+  color: "primary",
+  fullWidth: false,
+  orientation: "horizontal",
+  showDividers: false,
+  centered: false,
+  scrollable: false,
+  scrollButtons: "auto",
+  sticky: false,
+  stickyOffset: 0,
+  animateContent: false,
+  animationDuration: 300,
+  persistContent: false,
+  disabled: false,
+  loading: false
+};
+var OWN_PROPS = /* @__PURE__ */ new Set([
+  "items",
+  "closeTabLabel",
+  "color",
+  "size",
+  "fullWidth",
+  "scrollable",
+  "scrollButtons",
+  "sticky",
+  "stickyOffset",
+  "animateContent",
+  "animationDuration",
+  "persistContent",
+  "tabPanelProps",
+  "loading",
+  "loadingComponent"
+]);
+var domPassthrough = (props) => Object.fromEntries(Object.entries(props).filter(([key]) => !OWN_PROPS.has(key)));
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var resolveScrollButtons = (scrollable) => scrollable ? "auto" : false;
+var buildTabsSx = ({
+  fullWidth,
+  sticky,
+  stickyOffset,
+  indicatorColor,
+  disabled
+}) => ({
+  ...fullWidth && { width: "100%" },
+  // Pin the tab list while panels scroll beneath it. Opaque background + bottom
+  // divider so scrolled content does not show through.
+  ...sticky && {
+    position: "sticky",
+    top: stickyOffset,
+    zIndex: 2,
+    backgroundColor: "background.default",
+    borderBottom: 1,
+    borderColor: "divider"
+  },
+  ...indicatorColor && {
+    "& .MuiTabs-indicator": { backgroundColor: indicatorColor }
+  },
+  ...disabled && { opacity: 0.6, pointerEvents: "none" }
+});
+var TabLabel = ({ item, closeTabLabel, onClose }) => {
+  const content = /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+    item.icon,
+    /* @__PURE__ */ jsx("span", { children: item.label }),
+    item.closable && /* @__PURE__ */ jsx(
+      CloseButton,
+      {
+        onClick: (e) => onClose(e, item.id),
+        role: "button",
+        tabIndex: 0,
+        "aria-label": closeTabLabel,
+        onKeyDown: (e) => {
+          if (e.key !== "Enter" && e.key !== " ") return;
+          onClose(e, item.id);
+        },
+        children: /* @__PURE__ */ jsx(Close, { fontSize: "inherit" })
+      }
+    )
+  ] });
+  if (item.badge === void 0) return content;
+  return /* @__PURE__ */ jsx(BadgeWrapper, { badgeContent: item.badge, color: "error", children: content });
+};
+var TabsBar = ({ rest, items, value, onChange, onCloseTab, dataTestId, ...p }) => /* @__PURE__ */ jsx(
+  StyledTabs,
+  {
+    ...rest,
+    value,
+    onChange,
+    customVariant: p.variant,
+    size: p.size,
+    showDividers: p.showDividers,
+    orientation: p.orientation,
+    centered: p.centered,
+    variant: p.scrollable ? "scrollable" : "standard",
+    "data-testid": dataTestId ? `${dataTestId}-list` : "tabs-list",
+    scrollButtons: resolveScrollButtons(p.scrollable),
+    allowScrollButtonsMobile: p.scrollable,
+    textColor: p.color,
+    indicatorColor: p.color,
+    sx: buildTabsSx({
+      fullWidth: p.fullWidth,
+      sticky: p.sticky,
+      stickyOffset: p.stickyOffset,
+      indicatorColor: p.indicatorColor,
+      disabled: p.disabled
+    }),
+    children: items.map((item, index) => /* @__PURE__ */ jsx(
+      MuiTab,
+      {
+        value: item.id,
+        label: /* @__PURE__ */ jsx(TabLabel, { closeTabLabel: p.closeTabLabel, item, onClose: onCloseTab }),
+        disabled: item.disabled || p.disabled,
+        className: item.className,
+        id: `tab-${item.id}`,
+        "aria-controls": `tabpanel-${item.id}`,
+        "aria-disabled": item.disabled || p.disabled,
+        "data-testid": dataTestId ? `${dataTestId}-tab-${index}` : `tabs-tab-${index}`
+      },
+      item.id
+    ))
+  }
+);
+var TabsPanels = ({
+  items,
+  value,
+  variant,
+  animateContent,
+  animationDuration,
+  persistContent,
+  loading,
+  loadingComponent,
+  tabPanelProps,
+  dataTestId
+}) => /* @__PURE__ */ jsx(Box, { sx: { mt: variant === "enclosed" ? 0 : 2 }, children: items.map((item, index) => /* @__PURE__ */ jsx(
+  CustomTabPanel,
+  {
+    id: item.id,
+    value,
+    animate: animateContent,
+    animationDuration,
+    persist: persistContent,
+    loading,
+    loadingComponent,
+    className: tabPanelProps?.className,
+    dataTestId,
+    index,
+    children: item.content
+  },
+  item.id
+)) });
+var Tabs = React.forwardRef(
+  (tabsProps, ref) => {
+    const resolved = { ...TABS_DEFAULTS, ...definedProps(tabsProps) };
+    const {
+      // Destructured only to keep it OUT of `rest`, which is spread onto the
+      // DOM node — `{...resolved}` below is what actually carries it to
+      // `TabsBar`. Same reason as `value` on the next line.
+      closeTabLabel: _closeTabLabel,
+      value: _value,
+      onChange,
+      onTabClose,
+      className,
+      disabled,
+      showDividers,
+      variant,
+      dataTestId,
+      ...rest
+    } = resolved;
+    const handleChange = (event, newValue) => {
+      if (!disabled) onChange(event, newValue);
+    };
+    const handleTabClose = (event, tabId) => {
+      event.stopPropagation();
+      onTabClose?.(tabId);
+    };
+    return /* @__PURE__ */ jsxs(Box, { className, ref, "data-testid": dataTestId || "tabs", children: [
+      /* @__PURE__ */ jsx(
+        TabsBar,
+        {
+          ...resolved,
+          rest: domPassthrough(rest),
+          onChange: handleChange,
+          onCloseTab: handleTabClose
+        }
+      ),
+      showDividers && variant !== "enclosed" && /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsx(TabsPanels, { ...resolved })
+    ] });
+  }
+);
+Tabs.displayName = "Tabs";
+
+export {
+  Tabs
+};
+//# sourceMappingURL=chunk-KLWW67WP.js.map

package/dist/chunk-KLWW67WP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close';\nimport Badge from '@mui/material/Badge/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport MuiTab from '@mui/material/Tab/index.js';\nimport MuiTabs from '@mui/material/Tabs/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { CustomTabPanel } from './TabsPanel';\nimport { tabsRootStyles } from './Tabs.styles';\nimport type { TabItem, TabsProps } from './Tabs.types';\nimport { rem } from '../../../tokens/relative';\n\nconst StyledTabs = styled(MuiTabs, {\n  shouldForwardProp: (prop) => !['customVariant', 'size', 'showDividers'].includes(prop as string) })<{ customVariant?: string; size?: string; showDividers?: boolean }>(\n  ({ theme, customVariant, size, showDividers }) => ({\n    ...tabsRootStyles({ theme, customVariant, size, showDividers }) }),\n);\n\nconst CloseButton = styled(Box)(({ theme }) => ({\n  marginLeft: theme.spacing(0.5),\n  padding: theme.spacing(0.25),\n  width: 20,\n  height: 20,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  cursor: 'pointer',\n  borderRadius: '50%',\n  color: theme.palette.action.active,\n  '&:hover': {\n    backgroundColor: alpha(theme.palette.error.main, 0.1),\n    color: theme.palette.error.main } }));\n\nconst BadgeWrapper = styled(Badge)(({ theme }) => ({\n  '& .MuiBadge-badge': {\n    right: -6,\n    top: 4,\n    fontSize: rem(theme, 12),\n    minWidth: 16,\n    height: 16,\n    padding: 0 } }));\n\nconst TABS_DEFAULTS: Partial<TabsProps> = {\n  variant: 'default',\n  size: 'md',\n  color: 'primary',\n  fullWidth: false,\n  orientation: 'horizontal',\n  showDividers: false,\n  centered: false,\n  scrollable: false,\n  scrollButtons: 'auto',\n  sticky: false,\n  stickyOffset: 0,\n  animateContent: false,\n  animationDuration: 300,\n  persistContent: false,\n  disabled: false,\n  loading: false };\n\n/**\n * The props this component OWNS and MUI's `Tabs` does not understand (12-86).\n *\n * `rest` below is spread onto the DOM node, so anything left in it that React\n * cannot place on an element is reported — five `does not recognize the … prop`\n * warnings and three `Received false for a non-boolean attribute`, on every\n * render, in the browser console and in every host's jsdom output.\n *\n * An explicit list rather than `Object.keys(TABS_DEFAULTS)`, because the two\n * sets differ in both directions: `items`, `closeTabLabel`, `tabPanelProps` and\n * `loadingComponent` have no default and still must not reach the DOM, while\n * `orientation`, `centered` and `indicatorColor` are real MUI props that must.\n * An omission rather than more destructuring, so a prop added to `TabsProps`\n * costs a line here instead of an unused `_name` binding.\n *\n * Deliberately NOT here: `onFocus` and `onBlur`. They are ordinary DOM handlers\n * that reach the element through `rest` and nowhere else, so listing them would\n * silently stop them working.\n */\nconst OWN_PROPS = new Set<string>([\n  'items',\n  'closeTabLabel',\n  'color',\n  'size',\n  'fullWidth',\n  'scrollable',\n  'scrollButtons',\n  'sticky',\n  'stickyOffset',\n  'animateContent',\n  'animationDuration',\n  'persistContent',\n  'tabPanelProps',\n  'loading',\n  'loadingComponent',\n]);\n\n/** `props` with every {@link OWN_PROPS} key dropped — what is left is passthrough. */\nconst domPassthrough = (props: Record<string, unknown>): Record<string, unknown> =>\n  Object.fromEntries(Object.entries(props).filter(([key]) => !OWN_PROPS.has(key)));\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}`\n// still falls back to the default as a destructuring default would.\nconst definedProps = (props: TabsProps): Partial<TabsProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<TabsProps>;\n\n// Once the row is scrollable every accepted scrollButtons value ends up as\n// MUI's 'auto'. That is exactly what the previous nested ternary did — it mapped\n// 'on'/'off'/'desktop' to 'auto', and its remaining branch could only ever be\n// 'auto' anyway — so the behaviour is preserved here rather than quietly\n// changed. Worth knowing that scrollButtons=\"off\" therefore still shows buttons.\nconst resolveScrollButtons = (scrollable?: boolean): 'auto' | false =>\n  scrollable ? 'auto' : false;\n\nconst buildTabsSx = ({\n  fullWidth,\n  sticky,\n  stickyOffset,\n  indicatorColor,\n  disabled }: {\n  fullWidth?: boolean;\n  sticky?: boolean;\n  stickyOffset?: number;\n  indicatorColor?: string;\n  disabled?: boolean;\n}) => ({\n  ...(fullWidth && { width: '100%' }),\n  // Pin the tab list while panels scroll beneath it. Opaque background + bottom\n  // divider so scrolled content does not show through.\n  ...(sticky && {\n    position: 'sticky',\n    top: stickyOffset,\n    zIndex: 2,\n    backgroundColor: 'background.default',\n    borderBottom: 1,\n    borderColor: 'divider' }),\n  ...(indicatorColor && {\n    '& .MuiTabs-indicator': { backgroundColor: indicatorColor } }),\n  ...(disabled && { opacity: 0.6, pointerEvents: 'none' }) });\n\n// A tab's label: icon, text, optional close affordance, optionally badged.\nconst TabLabel: React.FC<{\n  item: TabItem;\n  closeTabLabel: string;\n  onClose: (event: React.MouseEvent | React.KeyboardEvent, tabId: string) => void;\n}> = ({ item, closeTabLabel, onClose }) => {\n  const content = (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n      {item.icon}\n      <span>{item.label}</span>\n      {item.closable && (\n        <CloseButton\n          onClick={(e) => onClose(e, item.id)}\n          role=\"button\"\n          tabIndex={0}\n          aria-label={closeTabLabel}\n          onKeyDown={(e) => {\n            if (e.key !== 'Enter' && e.key !== ' ') return;\n            onClose(e, item.id);\n          }}\n        >\n          <Close fontSize=\"inherit\" />\n        </CloseButton>\n      )}\n    </Box>\n  );\n\n  if (item.badge === undefined) return content;\n\n  return (\n    <BadgeWrapper badgeContent={item.badge} color=\"error\">\n      {content}\n    </BadgeWrapper>\n  );\n};\n\ntype ResolvedTabs = TabsProps;\n\n// The tab strip. Kept in this file because StyledTabs cannot cross a module\n// boundary (TS2742).\nconst TabsBar: React.FC<\n  ResolvedTabs & {\n    rest: Record<string, unknown>;\n    onChange: (event: React.SyntheticEvent, newValue: string) => void;\n    onCloseTab: (event: React.MouseEvent | React.KeyboardEvent, tabId: string) => void;\n  }\n> = ({ rest, items, value, onChange, onCloseTab, dataTestId, ...p }) => (\n  <StyledTabs\n    {...rest}\n    value={value}\n    onChange={onChange}\n    customVariant={p.variant}\n    size={p.size}\n    showDividers={p.showDividers}\n    orientation={p.orientation}\n    centered={p.centered}\n    // MUI only scrolls when its own `variant` is `scrollable`; map our\n    // `scrollable` flag onto it so overflowing tab rows actually scroll.\n    variant={p.scrollable ? 'scrollable' : 'standard'}\n    data-testid={dataTestId ? `${dataTestId}-list` : 'tabs-list'}\n    scrollButtons={resolveScrollButtons(p.scrollable)}\n    allowScrollButtonsMobile={p.scrollable}\n    textColor={p.color}\n    indicatorColor={p.color}\n    sx={buildTabsSx({\n      fullWidth: p.fullWidth,\n      sticky: p.sticky,\n      stickyOffset: p.stickyOffset,\n      indicatorColor: p.indicatorColor,\n      disabled: p.disabled })}\n  >\n    {items.map((item, index) => (\n      <MuiTab\n        key={item.id}\n        value={item.id}\n        label={<TabLabel closeTabLabel={p.closeTabLabel} item={item} onClose={onCloseTab} />}\n        disabled={item.disabled || p.disabled}\n        className={item.className}\n        id={`tab-${item.id}`}\n        aria-controls={`tabpanel-${item.id}`}\n        aria-disabled={item.disabled || p.disabled}\n        data-testid={dataTestId ? `${dataTestId}-tab-${index}` : `tabs-tab-${index}`}\n      />\n    ))}\n  </StyledTabs>\n);\n\nconst TabsPanels: React.FC<ResolvedTabs> = ({\n  items,\n  value,\n  variant,\n  animateContent,\n  animationDuration,\n  persistContent,\n  loading,\n  loadingComponent,\n  tabPanelProps,\n  dataTestId }) => (\n  <Box sx={{ mt: variant === 'enclosed' ? 0 : 2 }}>\n    {items.map((item, index) => (\n      <CustomTabPanel\n        key={item.id}\n        id={item.id}\n        value={value}\n        animate={animateContent}\n        animationDuration={animationDuration}\n        persist={persistContent}\n        loading={loading}\n        loadingComponent={loadingComponent}\n        className={tabPanelProps?.className}\n        dataTestId={dataTestId}\n        index={index}\n      >\n        {item.content}\n      </CustomTabPanel>\n    ))}\n  </Box>\n);\n\nexport const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(\n  (tabsProps, ref) => {\n    const resolved = { ...TABS_DEFAULTS, ...definedProps(tabsProps) } as TabsProps;\n    const {\n      // Destructured only to keep it OUT of `rest`, which is spread onto the\n      // DOM node — `{...resolved}` below is what actually carries it to\n      // `TabsBar`. Same reason as `value` on the next line.\n      closeTabLabel: _closeTabLabel,\n      value: _value,\n      onChange,\n      onTabClose,\n      className,\n      disabled,\n      showDividers,\n      variant,\n      dataTestId,\n      ...rest\n    } = resolved;\n\n    const handleChange = (event: React.SyntheticEvent, newValue: string) => {\n      if (!disabled) onChange(event, newValue);\n    };\n\n    const handleTabClose = (event: React.MouseEvent | React.KeyboardEvent, tabId: string) => {\n      event.stopPropagation();\n      onTabClose?.(tabId);\n    };\n\n    return (\n      <Box className={className} ref={ref} data-testid={dataTestId || 'tabs'}>\n        <TabsBar\n          {...resolved}\n          // The destructuring above drops the props this component USES;\n          // `domPassthrough` drops the ones it merely OWNS. Both have to go:\n          // `rest` is spread onto the DOM node, and the second group is where\n          // 12-86's warnings came from.\n          rest={domPassthrough(rest as unknown as Record<string, unknown>)}\n          onChange={handleChange}\n          onCloseTab={handleTabClose}\n        />\n\n        {showDividers && variant !== 'enclosed' && <Divider />}\n\n        <TabsPanels {...resolved} />\n      </Box>\n    );\n  },\n);\n\nTabs.displayName = 'Tabs';\n"],"mappings":"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","names":[]}

package/dist/chunk-KREWQAEV.js

@@ -0,0 +1,69 @@
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DescriptionItem/DescriptionItem.tsx
+import Box from "@mui/material/Box/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FLEX_ALIGN = { start: "flex-start", center: "center", end: "flex-end" };
+var containerSx = (isHorizontal, align) => ({
+  display: "flex",
+  flexDirection: isHorizontal ? "row" : "column",
+  alignItems: isHorizontal ? "center" : FLEX_ALIGN[align],
+  gap: isHorizontal ? 1 : 0,
+  // `alignItems` places the two boxes; `textAlign` handles a label or value
+  // that WRAPS, whose second line would otherwise fall back to flush-left
+  // inside a box the alignment had already centred.
+  textAlign: align
+});
+var labelStyle = (theme, isHorizontal) => ({
+  textTransform: "uppercase",
+  marginBottom: isHorizontal ? 0 : rem(theme, 4),
+  minWidth: isHorizontal ? "fit-content" : void 0,
+  flexShrink: isHorizontal ? 0 : void 0
+});
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `description-item-${suffix}`;
+var DescriptionItem = ({
+  label,
+  value,
+  orientation = "vertical",
+  align = "start",
+  className,
+  "data-testid": dataTestId
+}) => {
+  const theme = useTheme();
+  const isHorizontal = orientation === "horizontal";
+  const testId = makeTestId(dataTestId);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      sx: containerSx(isHorizontal, align),
+      "data-testid": dataTestId || "description-item",
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            variant: "caption",
+            size: "xs",
+            color: "secondary",
+            style: labelStyle(theme, isHorizontal),
+            "data-testid": testId("label"),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { "data-testid": testId("value"), children: typeof value === "string" || typeof value === "number" ? /* @__PURE__ */ jsx(Text, { variant: "body", size: "sm", weight: "semibold", children: value }) : value })
+      ]
+    }
+  );
+};
+DescriptionItem.displayName = "DescriptionItem";
+
+export {
+  DescriptionItem
+};
+//# sourceMappingURL=chunk-KREWQAEV.js.map

package/dist/chunk-KREWQAEV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DescriptionItem/DescriptionItem.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { useTheme, type Theme } from '@mui/material/styles/index.js';\nimport type { ReactNode } from 'react';\n\nimport { rem } from '../../../tokens/relative';\nimport { Text } from '../../typography/Text/Text';\n\nexport interface DescriptionItemProps {\n  /**\n   * The label text to display\n   */\n  label: string;\n\n  /**\n   * The value to display - can be text, number, or any React node\n   */\n  value: ReactNode;\n\n  /**\n   * Layout orientation\n   * - `vertical`: Label above value (default)\n   * - `horizontal`: Label and value side by side\n   */\n  orientation?: 'vertical' | 'horizontal';\n\n  /**\n   * Which edge the label and value line up on.\n   *\n   * - `start` (default): both flush left, the reading order for a form or a\n   *   description list.\n   * - `center`: both centred over each other — for a pair sitting in a column\n   *   of its own, where a left-flush label over a shorter value looks unhinged\n   *   from it.\n   * - `end`: both flush right, which is what a numeric column wants so its\n   *   digits line up with the value above and below.\n   *\n   * Applies to `vertical`; a `horizontal` pair is already a single line.\n   */\n  align?: 'start' | 'center' | 'end';\n\n  /**\n   * Optional CSS class name\n   */\n  className?: string;\n\n  /**\n   * Test ID for testing purposes\n   */\n  'data-testid'?: string;\n}\n\n/**\n * DescriptionItem - A label-value pair component for displaying read-only information\n *\n * Used for displaying structured metadata, properties, or descriptive information\n * in a consistent vertical layout with a label above the value.\n *\n * @example\n * ```tsx\n * <DescriptionItem\n *   label=\"Incident ID\"\n *   value=\"INC-12345\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * <DescriptionItem\n *   label=\"Status\"\n *   value={<Chip label=\"Active\" color=\"success\" />}\n * />\n * ```\n */\n/** `align` in the terms flexbox and CSS each want it. */\nconst FLEX_ALIGN = { start: 'flex-start', center: 'center', end: 'flex-end' } as const;\n\n// Vertical stacks the label above the value; horizontal sets them side by side\n// with the label sized to its content.\nconst containerSx = (isHorizontal: boolean, align: 'start' | 'center' | 'end') => ({\n  display: 'flex',\n  flexDirection: isHorizontal ? ('row' as const) : ('column' as const),\n  alignItems: isHorizontal ? 'center' : FLEX_ALIGN[align],\n  gap: isHorizontal ? 1 : 0,\n  // `alignItems` places the two boxes; `textAlign` handles a label or value\n  // that WRAPS, whose second line would otherwise fall back to flush-left\n  // inside a box the alignment had already centred.\n  textAlign: align,\n});\n\nconst labelStyle = (theme: Theme, isHorizontal: boolean) => ({\n  textTransform: 'uppercase' as const,\n  marginBottom: isHorizontal ? 0 : rem(theme, 4),\n  minWidth: isHorizontal ? ('fit-content' as const) : undefined,\n  flexShrink: isHorizontal ? 0 : undefined,\n});\n\nconst makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `description-item-${suffix}`;\n\nexport const DescriptionItem: React.FC<DescriptionItemProps> = ({\n  label,\n  value,\n  orientation = 'vertical',\n  align = 'start',\n  className,\n  'data-testid': dataTestId,\n}) => {\n  const theme = useTheme();\n  const isHorizontal = orientation === 'horizontal';\n  const testId = makeTestId(dataTestId);\n\n  return (\n    <Box\n      className={className}\n      sx={containerSx(isHorizontal, align)}\n      data-testid={dataTestId || 'description-item'}\n    >\n      <Text\n        variant=\"caption\"\n        size=\"xs\"\n        color=\"secondary\"\n        style={labelStyle(theme, isHorizontal)}\n        data-testid={testId('label')}\n      >\n        {label}\n      </Text>\n      <Box data-testid={testId('value')}>\n        {/* Plain text gets the component's own typography; anything else is\n            rendered as given. */}\n        {typeof value === 'string' || typeof value === 'number' ? (\n          <Text variant=\"body\" size=\"sm\" weight=\"semibold\">\n            {value}\n          </Text>\n        ) : (\n          value\n        )}\n      </Box>\n    </Box>\n  );\n};\n\nDescriptionItem.displayName = 'DescriptionItem';\n"],"mappings":";;;;;;;;AAAA,OAAO,SAAS;AAChB,SAAS,gBAA4B;AAiHjC,SAKE,KALF;AAxCJ,IAAM,aAAa,EAAE,OAAO,cAAc,QAAQ,UAAU,KAAK,WAAW;AAI5E,IAAM,cAAc,CAAC,cAAuB,WAAuC;AAAA,EACjF,SAAS;AAAA,EACT,eAAe,eAAgB,QAAmB;AAAA,EAClD,YAAY,eAAe,WAAW,WAAW,KAAK;AAAA,EACtD,KAAK,eAAe,IAAI;AAAA;AAAA;AAAA;AAAA,EAIxB,WAAW;AACb;AAEA,IAAM,aAAa,CAAC,OAAc,kBAA2B;AAAA,EAC3D,eAAe;AAAA,EACf,cAAc,eAAe,IAAI,IAAI,OAAO,CAAC;AAAA,EAC7C,UAAU,eAAgB,gBAA0B;AAAA,EACpD,YAAY,eAAe,IAAI;AACjC;AAEA,IAAM,aACJ,CAAC,eACD,CAAC,WACC,aAAa,GAAG,UAAU,IAAI,MAAM,KAAK,oBAAoB,MAAM;AAEhE,IAAM,kBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA,eAAe;AACjB,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,eAAe,gBAAgB;AACrC,QAAM,SAAS,WAAW,UAAU;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI,YAAY,cAAc,KAAK;AAAA,MACnC,eAAa,cAAc;AAAA,MAE3B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,OAAM;AAAA,YACN,OAAO,WAAW,OAAO,YAAY;AAAA,YACrC,eAAa,OAAO,OAAO;AAAA,YAE1B;AAAA;AAAA,QACH;AAAA,QACA,oBAAC,OAAI,eAAa,OAAO,OAAO,GAG7B,iBAAO,UAAU,YAAY,OAAO,UAAU,WAC7C,oBAAC,QAAK,SAAQ,QAAO,MAAK,MAAK,QAAO,YACnC,iBACH,IAEA,OAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,gBAAgB,cAAc;","names":[]}