@12-apps/ui 6.10.1 → 6.11.1

package/dist/chunk-V6AS4S2T.js

@@ -0,0 +1,234 @@
+import {
+  CustomTabPanel
+} from "./chunk-NYZZOQV4.js";
+import {
+  tabsRootStyles
+} from "./chunk-SAAUWIY7.js";
+
+// src/components/navigation/Tabs/Tabs.tsx
+import Close from "@mui/icons-material/Close";
+import {
+  alpha,
+  Badge,
+  Box,
+  Divider,
+  Tab as MuiTab,
+  Tabs as MuiTabs
+} from "@mui/material";
+import { styled } from "@mui/material";
+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)(() => ({
+  "& .MuiBadge-badge": {
+    right: -6,
+    top: 4,
+    fontSize: "0.75rem",
+    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 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,
+          onChange: handleChange,
+          onCloseTab: handleTabClose
+        }
+      ),
+      showDividers && variant !== "enclosed" && /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsx(TabsPanels, { ...resolved })
+    ] });
+  }
+);
+Tabs.displayName = "Tabs";
+
+export {
+  Tabs
+};
+//# sourceMappingURL=chunk-V6AS4S2T.js.map

package/dist/chunk-V6AS4S2T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Tabs/Tabs.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close';\nimport {\n  alpha,\n  Badge,\n  Box,\n  Divider,\n  Tab as MuiTab,\n  Tabs as MuiTabs } from '@mui/material';\nimport { styled } from '@mui/material';\nimport React from 'react';\n\nimport { CustomTabPanel } from './TabsPanel';\nimport { tabsRootStyles } from './Tabs.styles';\nimport type { TabItem, TabsProps } from './Tabs.types';\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)(() => ({\n  '& .MuiBadge-badge': {\n    right: -6,\n    top: 4,\n    fontSize: '0.75rem',\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// 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          rest={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-VA5DNBWZ.js

@@ -0,0 +1,85 @@
+import {
+  Box
+} from "./chunk-34DQAXL2.js";
+
+// src/components/data-display/DataViews/list-card-cells.tsx
+import { createContext, useContext } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ALIGN_ITEMS = { start: "flex-start", center: "center", end: "flex-end" };
+var TEXT_ALIGN = { start: "left", center: "center", end: "right" };
+var DEFAULT_CELL_WIDTH = "minmax(0, 1fr)";
+function cellTracks(cells) {
+  return (cells ?? []).map((cell) => cell.width ?? DEFAULT_CELL_WIDTH);
+}
+var CellConfigContext = createContext(null);
+function CellConfigProvider({
+  cells,
+  children
+}) {
+  return /* @__PURE__ */ jsx(CellConfigContext.Provider, { value: cells ?? null, children });
+}
+function useCellConfig() {
+  return useContext(CellConfigContext);
+}
+function Cell({
+  config,
+  row
+}) {
+  const align = config.align ?? "start";
+  const numeric = align === "end" ? { fontVariantNumeric: "tabular-nums" } : {};
+  const clamp = {
+    minWidth: 0,
+    maxWidth: "100%",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  };
+  const secondary = config.secondary?.(row);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-slot": `cell-${config.id}`,
+      sx: {
+        minWidth: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: ALIGN_ITEMS[align],
+        justifyContent: "center",
+        textAlign: TEXT_ALIGN[align]
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "span",
+            sx: { ...clamp, fontSize: 14, fontWeight: config.strong ? 700 : 600, lineHeight: 1.25, ...numeric },
+            children: config.primary(row)
+          }
+        ),
+        secondary != null && /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "span",
+            sx: { ...clamp, fontSize: 12.5, lineHeight: 1.3, color: "text.secondary", ...numeric },
+            children: secondary
+          }
+        )
+      ]
+    }
+  );
+}
+function ListCardCells({
+  cells,
+  row
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: cells.map((config) => /* @__PURE__ */ jsx(Cell, { config, row }, config.id)) });
+}
+
+export {
+  DEFAULT_CELL_WIDTH,
+  cellTracks,
+  CellConfigProvider,
+  useCellConfig,
+  ListCardCells
+};
+//# sourceMappingURL=chunk-VA5DNBWZ.js.map

package/dist/chunk-VA5DNBWZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/list-card-cells.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, type ReactNode } from \"react\";\n\nimport { Box } from \"../../../mui/Box\";\n\n/**\n * THE CELL CONFIG — the list declares its columns once, every row obeys them.\n *\n * The row used to name its middle slots: a title, a subtitle beneath it, then\n * labelled `meta` pairs, then a value, then a status. That vocabulary was the\n * mistake twice over. It reads as a description of every list, and no list is\n * quite that shape — so a consumer wanting a date over a time, or an order\n * number over the client who placed it, had to pick whichever named slot was\n * least wrong and take its styling with it. And because each row decided its own\n * content, alignment across a list was a convention the rows could break.\n *\n * So cells are CONFIGURED, the way a data grid's columns are: the list declares\n * them once, and every card renders the same columns in the same tracks from its\n * own row. Two cards cannot disagree about the shape of the list, because\n * neither of them is deciding it.\n *\n * THE SECOND LINE IS AN OPTION, NOT A SUBTITLE. `secondary` is not \"the small\n * grey text under the title\" — it is the cell's second line, for whatever pairs\n * naturally in this list: date over time, name over e-mail, pedido over cliente.\n * It carries no meaning the config did not put there, and a cell that wants one\n * line simply omits it.\n */\nexport interface ListCardCellConfig<T extends Record<string, unknown> = Record<string, unknown>> {\n  /** Stable key. Also the cell's `data-slot`, so a test can find it by name. */\n  id: string;\n  /** The cell's first line, from the row. */\n  primary: (row: T) => ReactNode;\n  /** An optional second line beneath it. Anything that pairs with the first. */\n  secondary?: (row: T) => ReactNode;\n  /**\n   * Which edge the lines sit on. `end` is what a column of numbers wants, so its\n   * digits line up with the values above and below it — and it switches the cell\n   * to tabular figures, since nothing else ever asks for that alignment.\n   */\n  align?: \"start\" | \"center\" | \"end\";\n  /**\n   * This cell's track, as a `grid-template-columns` entry. Defaults to an even\n   * share of the spare width.\n   *\n   * A cell holding a number usually wants `max-content`: the rail is then as\n   * wide as the widest amount in the list and no wider, and its right edge does\n   * not move when a longer row arrives.\n   */\n  width?: string;\n  /** Emphasise the first line — for the one figure the row is really about. */\n  strong?: boolean;\n}\n\nconst ALIGN_ITEMS = { start: \"flex-start\", center: \"center\", end: \"flex-end\" } as const;\nconst TEXT_ALIGN = { start: \"left\", center: \"center\", end: \"right\" } as const;\n\n/** The default track: an even share of whatever width the row has spare. */\nexport const DEFAULT_CELL_WIDTH = \"minmax(0, 1fr)\";\n\n/** The tracks a cell config asks for, in order. */\nexport function cellTracks(cells: readonly ListCardCellConfig<never>[] | undefined): string[] {\n  return (cells ?? []).map((cell) => cell.width ?? DEFAULT_CELL_WIDTH);\n}\n\n/**\n * The config handed down by the list.\n *\n * A card inside a group takes its columns from here rather than from props, so\n * there is exactly one declaration of the list's shape and no way for a row to\n * hold a different one.\n */\nconst CellConfigContext = createContext<readonly ListCardCellConfig<never>[] | null>(null);\n\nexport function CellConfigProvider({\n  cells,\n  children,\n}: {\n  cells: readonly ListCardCellConfig<never>[] | undefined;\n  children: ReactNode;\n}): React.JSX.Element {\n  return <CellConfigContext.Provider value={cells ?? null}>{children}</CellConfigContext.Provider>;\n}\n\n/** The list's cell config, if it declared one. */\nexport function useCellConfig(): readonly ListCardCellConfig<never>[] | null {\n  return useContext(CellConfigContext);\n}\n\n/**\n * One cell rendered from its config.\n *\n * Both lines truncate rather than wrap: a row is a fixed-height scanning unit,\n * and a cell that grows to two lines because one name was long drags every rail\n * on that row down with it. Whatever does not fit belongs in the expandable\n * body, which is the entire reason the body exists.\n */\nfunction Cell<T extends Record<string, unknown>>({\n  config,\n  row,\n}: {\n  config: ListCardCellConfig<T>;\n  row: T;\n}): React.JSX.Element {\n  const align = config.align ?? \"start\";\n  const numeric = align === \"end\" ? { fontVariantNumeric: \"tabular-nums\" } : {};\n  const clamp = {\n    minWidth: 0,\n    maxWidth: \"100%\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  } as const;\n  const secondary = config.secondary?.(row);\n  return (\n    <Box\n      data-slot={`cell-${config.id}`}\n      sx={{\n        minWidth: 0,\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: ALIGN_ITEMS[align],\n        justifyContent: \"center\",\n        textAlign: TEXT_ALIGN[align],\n      }}\n    >\n      <Box\n        component=\"span\"\n        sx={{ ...clamp, fontSize: 14, fontWeight: config.strong ? 700 : 600, lineHeight: 1.25, ...numeric }}\n      >\n        {config.primary(row)}\n      </Box>\n      {secondary != null && (\n        <Box\n          component=\"span\"\n          sx={{ ...clamp, fontSize: 12.5, lineHeight: 1.3, color: \"text.secondary\", ...numeric }}\n        >\n          {secondary}\n        </Box>\n      )}\n    </Box>\n  );\n}\n\n/** Every configured cell of a row, in the list's declared order. */\nexport function ListCardCells<T extends Record<string, unknown>>({\n  cells,\n  row,\n}: {\n  cells: readonly ListCardCellConfig<T>[];\n  row: T;\n}): React.JSX.Element {\n  return (\n    <>\n      {cells.map((config) => (\n        <Cell key={config.id} config={config} row={row} />\n      ))}\n    </>\n  );\n}\n"],"mappings":";;;;;AAEA,SAAS,eAAe,kBAAkC;AA+EjD,SAwEL,UAxEK,KAkCL,YAlCK;AA3BT,IAAM,cAAc,EAAE,OAAO,cAAc,QAAQ,UAAU,KAAK,WAAW;AAC7E,IAAM,aAAa,EAAE,OAAO,QAAQ,QAAQ,UAAU,KAAK,QAAQ;AAG5D,IAAM,qBAAqB;AAG3B,SAAS,WAAW,OAAmE;AAC5F,UAAQ,SAAS,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,SAAS,kBAAkB;AACrE;AASA,IAAM,oBAAoB,cAA2D,IAAI;AAElF,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAGsB;AACpB,SAAO,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,SAAS,MAAO,UAAS;AACrE;AAGO,SAAS,gBAA6D;AAC3E,SAAO,WAAW,iBAAiB;AACrC;AAUA,SAAS,KAAwC;AAAA,EAC/C;AAAA,EACA;AACF,GAGsB;AACpB,QAAM,QAAQ,OAAO,SAAS;AAC9B,QAAM,UAAU,UAAU,QAAQ,EAAE,oBAAoB,eAAe,IAAI,CAAC;AAC5E,QAAM,QAAQ;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AACA,QAAM,YAAY,OAAO,YAAY,GAAG;AACxC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW,QAAQ,OAAO,EAAE;AAAA,MAC5B,IAAI;AAAA,QACF,UAAU;AAAA,QACV,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY,YAAY,KAAK;AAAA,QAC7B,gBAAgB;AAAA,QAChB,WAAW,WAAW,KAAK;AAAA,MAC7B;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI,EAAE,GAAG,OAAO,UAAU,IAAI,YAAY,OAAO,SAAS,MAAM,KAAK,YAAY,MAAM,GAAG,QAAQ;AAAA,YAEjG,iBAAO,QAAQ,GAAG;AAAA;AAAA,QACrB;AAAA,QACC,aAAa,QACZ;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI,EAAE,GAAG,OAAO,UAAU,MAAM,YAAY,KAAK,OAAO,kBAAkB,GAAG,QAAQ;AAAA,YAEpF;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAGO,SAAS,cAAiD;AAAA,EAC/D;AAAA,EACA;AACF,GAGsB;AACpB,SACE,gCACG,gBAAM,IAAI,CAAC,WACV,oBAAC,QAAqB,QAAgB,OAA3B,OAAO,EAA8B,CACjD,GACH;AAEJ;","names":[]}

package/dist/chunk-VBA7J2MR.js

@@ -0,0 +1,134 @@
+import {
+  DragHandle
+} from "./chunk-4HJOBQ7X.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Checkbox
+} from "./chunk-YPBWZBWV.js";
+import {
+  Box
+} from "./chunk-34DQAXL2.js";
+
+// src/components/data-display/DataViews/base-list-card-gutters.tsx
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import { IconButton } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var CHECKBOX_PAD = "-9px";
+function DragSlot({
+  drag,
+  reserve,
+  testId
+}) {
+  if (!drag.draggable) return reserve ? /* @__PURE__ */ jsx(Box, { "data-slot": "drag" }) : null;
+  return (
+    // display:flex, as on the checkbox below: the grip is an inline-grid, and in
+    // a block parent an inline box sits on the text baseline — the line box adds
+    // descender leading under it (21px glyph in a 31px slot) and drops the grip
+    // 5px below the row's centre. A flex parent has no baseline to sit on.
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        "data-slot": "drag",
+        sx: { position: "relative", zIndex: 1, display: "flex", alignItems: "center" },
+        children: /* @__PURE__ */ jsx(
+          DragHandle,
+          {
+            handleProps: drag.handleProps,
+            gated: drag.handleProps !== void 0,
+            testId
+          }
+        )
+      }
+    )
+  );
+}
+function SelectSlot({
+  selectable,
+  selected,
+  reserve,
+  onToggleSelect,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  if (!selectable) return reserve ? /* @__PURE__ */ jsx(Box, { "data-slot": "select" }) : null;
+  return (
+    // z-index 1: above the stretched link, or the anchor swallows the click.
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        "data-slot": "select",
+        sx: { position: "relative", zIndex: 1, mx: CHECKBOX_PAD, display: "flex" },
+        children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: selected,
+            onChange: () => onToggleSelect?.(),
+            onClick: (event) => {
+              event.stopPropagation();
+              onToggleSelect?.(event);
+            },
+            size: "small",
+            "data-testid": testId,
+            "aria-label": copy.selection.selectRow
+          }
+        )
+      }
+    )
+  );
+}
+function DiscloseSlot({
+  expandable,
+  expanded,
+  reserve,
+  onToggle,
+  controls,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  if (!expandable) return reserve ? /* @__PURE__ */ jsx(Box, { "data-slot": "disclose" }) : null;
+  return (
+    // z-index 1 and flex for the same reasons the other two gutters use them:
+    // above a stretched link that would otherwise swallow the click, and out of
+    // a baseline that would drop the glyph below the row's centre.
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        "data-slot": "disclose",
+        sx: { position: "relative", zIndex: 1, display: "flex", alignItems: "center" },
+        children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            "aria-expanded": expanded,
+            "aria-controls": expanded ? controls : void 0,
+            "aria-label": expanded ? copy.selection.collapseRow : copy.selection.expandRow,
+            "data-testid": testId,
+            onClick: (event) => {
+              event.stopPropagation();
+              onToggle();
+            },
+            onKeyDown: (event) => event.stopPropagation(),
+            sx: {
+              p: 0.25,
+              transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
+              transition: "transform 150ms ease",
+              // Honour a reduced-motion preference: the state is carried by the
+              // angle, not by the animation, so dropping the tween loses nothing.
+              "@media (prefers-reduced-motion: reduce)": { transition: "none" }
+            },
+            children: /* @__PURE__ */ jsx(KeyboardArrowRightIcon, { fontSize: "small" })
+          }
+        )
+      }
+    )
+  );
+}
+
+export {
+  DragSlot,
+  SelectSlot,
+  DiscloseSlot
+};
+//# sourceMappingURL=chunk-VBA7J2MR.js.map

package/dist/chunk-VBA7J2MR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/base-list-card-gutters.tsx"],"sourcesContent":["\"use client\";\n\nimport KeyboardArrowRightIcon from \"@mui/icons-material/KeyboardArrowRight\";\nimport { IconButton } from \"@mui/material\";\n\nimport { Checkbox } from \"../../form/Checkbox\";\nimport { Box } from \"../../../mui/Box\";\n\nimport { DragHandle, useDragItem } from \"./data-views-drag\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\n\n/**\n * THE THREE GUTTERS AT THE HEAD OF A ROW — the disclosure chevron, the drag grip\n * and the select checkbox.\n *\n * Split from `base-list-card` at the size gate. All three answer the same\n * question in the same way: whether to occupy a rail, hold one open, or leave\n * the template altogether. See `railsTemplateFor` for why the third option has\n * to exist.\n */\n\n/**\n * MUI's Checkbox carries 9px of hit-area padding on every side.\n *\n * Left uncancelled, a row asking for 8px of padding puts the checkbox SQUARE 17px\n * in — and with the empty drag gutter's gap ahead of it, 46px in, which is what\n * made the left edge look like a mistake. The hit area is worth keeping; the\n * optical inset is not, so the padding is cancelled with a negative margin and\n * the glyph lands where the row's own padding says it should.\n */\nconst CHECKBOX_PAD = \"-9px\";\n\n/** The grip. Its gutter is reserved only when the list says to reserve it. */\nexport function DragSlot({\n  drag,\n  reserve,\n  testId,\n}: {\n  drag: ReturnType<typeof useDragItem>;\n  reserve: boolean;\n  testId?: string;\n}): React.JSX.Element | null {\n  if (!drag.draggable) return reserve ? <Box data-slot=\"drag\" /> : null;\n  return (\n    // display:flex, as on the checkbox below: the grip is an inline-grid, and in\n    // a block parent an inline box sits on the text baseline — the line box adds\n    // descender leading under it (21px glyph in a 31px slot) and drops the grip\n    // 5px below the row's centre. A flex parent has no baseline to sit on.\n    <Box\n      data-slot=\"drag\"\n      sx={{ position: \"relative\", zIndex: 1, display: \"flex\", alignItems: \"center\" }}\n    >\n      <DragHandle\n        handleProps={drag.handleProps}\n        gated={drag.handleProps !== undefined}\n        testId={testId}\n      />\n    </Box>\n  );\n}\n\n/** The select checkbox. Its gutter is reserved only when the list says to. */\nexport function SelectSlot({\n  selectable,\n  selected,\n  reserve,\n  onToggleSelect,\n  testId,\n}: {\n  selectable: boolean;\n  selected: boolean;\n  reserve: boolean;\n  onToggleSelect?: (event?: React.MouseEvent) => void;\n  testId?: string;\n}): React.JSX.Element | null {\n  const copy = useDataViewsCopy();\n  if (!selectable) return reserve ? <Box data-slot=\"select\" /> : null;\n  return (\n    // z-index 1: above the stretched link, or the anchor swallows the click.\n    <Box\n      data-slot=\"select\"\n      sx={{ position: \"relative\", zIndex: 1, mx: CHECKBOX_PAD, display: \"flex\" }}\n    >\n      <Checkbox\n        checked={selected}\n        onChange={() => onToggleSelect?.()}\n        onClick={(event) => {\n          event.stopPropagation();\n          onToggleSelect?.(event);\n        }}\n        size=\"small\"\n        data-testid={testId}\n        aria-label={copy.selection.selectRow}\n      />\n    </Box>\n  );\n}\n\n/**\n * THE DISCLOSURE CHEVRON — the affordance that says this row has more.\n *\n * Rendered only when the card was given a body to reveal. A chevron on a row\n * that opens onto nothing is worse than no chevron: it is a promise the row\n * cannot keep, and an operator who presses it twice learns to stop trusting the\n * column. So `BaseListCard` passes `null` here when it has no children, the\n * slot returns nothing, and — standalone — the rail leaves the template\n * entirely.\n *\n * ROTATED, NOT SWAPPED. One glyph turned 90° rather than a right-chevron\n * exchanged for a down-chevron: the rotation is animatable and reads as the\n * same object moving, where a swap is two icons flickering. It also keeps the\n * button's box identical in both states, so the caption beside it cannot shift\n * as the row opens.\n *\n * `stopPropagation`, because a row is frequently clickable in its own right —\n * opening the record is not the same act as peeking at its detail, and without\n * this the chevron would do both at once.\n */\nexport function DiscloseSlot({\n  expandable,\n  expanded,\n  reserve,\n  onToggle,\n  controls,\n  testId,\n}: {\n  expandable: boolean;\n  expanded: boolean;\n  reserve: boolean;\n  onToggle: () => void;\n  /** The id of the region this button opens, for `aria-controls`. */\n  controls: string;\n  testId?: string;\n}): React.JSX.Element | null {\n  const copy = useDataViewsCopy();\n  if (!expandable) return reserve ? <Box data-slot=\"disclose\" /> : null;\n  return (\n    // z-index 1 and flex for the same reasons the other two gutters use them:\n    // above a stretched link that would otherwise swallow the click, and out of\n    // a baseline that would drop the glyph below the row's centre.\n    <Box\n      data-slot=\"disclose\"\n      sx={{ position: \"relative\", zIndex: 1, display: \"flex\", alignItems: \"center\" }}\n    >\n      <IconButton\n        size=\"small\"\n        aria-expanded={expanded}\n        aria-controls={expanded ? controls : undefined}\n        aria-label={expanded ? copy.selection.collapseRow : copy.selection.expandRow}\n        data-testid={testId}\n        onClick={(event) => {\n          event.stopPropagation();\n          onToggle();\n        }}\n        // The row's own keyboard handler treats Enter/Space as \"open the\n        // record\"; the button already handles both, so the event must not reach\n        // it and fire the second action too.\n        onKeyDown={(event) => event.stopPropagation()}\n        sx={{\n          p: 0.25,\n          transform: expanded ? \"rotate(90deg)\" : \"rotate(0deg)\",\n          transition: \"transform 150ms ease\",\n          // Honour a reduced-motion preference: the state is carried by the\n          // angle, not by the animation, so dropping the tween loses nothing.\n          \"@media (prefers-reduced-motion: reduce)\": { transition: \"none\" },\n        }}\n      >\n        <KeyboardArrowRightIcon fontSize=\"small\" />\n      </IconButton>\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAEA,OAAO,4BAA4B;AACnC,SAAS,kBAAkB;AAuCa;AAZxC,IAAM,eAAe;AAGd,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,GAI6B;AAC3B,MAAI,CAAC,KAAK,UAAW,QAAO,UAAU,oBAAC,OAAI,aAAU,QAAO,IAAK;AACjE;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,IAAI,EAAE,UAAU,YAAY,QAAQ,GAAG,SAAS,QAAQ,YAAY,SAAS;AAAA,QAE7E;AAAA,UAAC;AAAA;AAAA,YACC,aAAa,KAAK;AAAA,YAClB,OAAO,KAAK,gBAAgB;AAAA,YAC5B;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA;AAEJ;AAGO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAM6B;AAC3B,QAAM,OAAO,iBAAiB;AAC9B,MAAI,CAAC,WAAY,QAAO,UAAU,oBAAC,OAAI,aAAU,UAAS,IAAK;AAC/D;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,IAAI,EAAE,UAAU,YAAY,QAAQ,GAAG,IAAI,cAAc,SAAS,OAAO;AAAA,QAEzE;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,UAAU,MAAM,iBAAiB;AAAA,YACjC,SAAS,CAAC,UAAU;AAClB,oBAAM,gBAAgB;AACtB,+BAAiB,KAAK;AAAA,YACxB;AAAA,YACA,MAAK;AAAA,YACL,eAAa;AAAA,YACb,cAAY,KAAK,UAAU;AAAA;AAAA,QAC7B;AAAA;AAAA,IACF;AAAA;AAEJ;AAsBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQ6B;AAC3B,QAAM,OAAO,iBAAiB;AAC9B,MAAI,CAAC,WAAY,QAAO,UAAU,oBAAC,OAAI,aAAU,YAAW,IAAK;AACjE;AAAA;AAAA;AAAA;AAAA,IAIE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,IAAI,EAAE,UAAU,YAAY,QAAQ,GAAG,SAAS,QAAQ,YAAY,SAAS;AAAA,QAE7E;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,iBAAe;AAAA,YACf,iBAAe,WAAW,WAAW;AAAA,YACrC,cAAY,WAAW,KAAK,UAAU,cAAc,KAAK,UAAU;AAAA,YACnE,eAAa;AAAA,YACb,SAAS,CAAC,UAAU;AAClB,oBAAM,gBAAgB;AACtB,uBAAS;AAAA,YACX;AAAA,YAIA,WAAW,CAAC,UAAU,MAAM,gBAAgB;AAAA,YAC5C,IAAI;AAAA,cACF,GAAG;AAAA,cACH,WAAW,WAAW,kBAAkB;AAAA,cACxC,YAAY;AAAA;AAAA;AAAA,cAGZ,2CAA2C,EAAE,YAAY,OAAO;AAAA,YAClE;AAAA,YAEA,8BAAC,0BAAuB,UAAS,SAAQ;AAAA;AAAA,QAC3C;AAAA;AAAA,IACF;AAAA;AAEJ;","names":[]}