@12-apps/ui 6.11.1 → 6.12.0

package/dist/chunk-N7SBWD2V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/base-list-card.tsx"],"sourcesContent":["\"use client\";\n\nimport Collapse from \"@mui/material/Collapse/index.js\";\nimport { type ReactNode } from \"react\";\n\nimport { Card } from \"../../layout/Card\";\nimport type { DescriptionItemProps } from \"../DescriptionItem\";\nimport { Box } from \"../../../mui/Box\";\n\nimport { type CardSurfaceProps } from \"./card-surface\";\nimport { DropIndicator } from \"./data-views-drag\";\nimport { useDisclosure } from \"./base-list-card-disclosure\";\nimport { actionProps, metaShape, rowStyles, useRowShell } from \"./base-list-card-geometry\";\nimport { DiscloseSlot, DragSlot, SelectSlot } from \"./base-list-card-gutters\";\nimport { type DataViewsDensity } from \"./data-views-layout-context\";\nimport { cellRailsTemplate } from \"./list-card-rails\";\nimport { ListCardCells, cellTracks, useCellConfig, type ListCardCellConfig } from \"./list-card-cells\";\nimport {\n  ListCardActions,\n  ListCardCaption,\n  ListCardMeta,\n  ListCardTail,\n} from \"./base-list-card-slots\";\n\n/**\n * THE \"LISTA\" LAYOUT'S CARD — {@link BaseCard}'s horizontal sibling.\n *\n * `ListBody` always described the shape it wanted (\"a marker, a title, a\n * subtitle and a value on the right\") and never provided it, so every host\n * hand-rolled a `<Box>` flex row: a tint for selection with no checkbox, fixed\n * `minWidth` columns that ignored density and never collapsed, no hover, no\n * focus ring, and a `borderBottom` fighting the gap between rows.\n *\n * THE LIST OWNS THE COLUMNS. Inside a {@link ListCardGroup} this card is\n * `grid-template-columns: subgrid` across the group's rails, so the value sits\n * on its own edge and cannot be shunted about by the width of the status chip\n * beside it. Standalone it falls back to the same template on its own. See\n * `list-card-rails`.\n *\n * IT ANSWERS ITS OWN WIDTH, not the viewport — a container query, because the\n * same row renders full-bleed on a phone, in a 300px board column, and beside a\n * filter panel that opens and closes. Below `STACK_BREAK` it leaves the shared\n * rails entirely and goes two-line, which is the standard mobile transaction\n * row and beats truncating everything: title + value, then subtitle + status.\n */\n\nexport interface BaseListCardProps extends CardSurfaceProps {\n  /** A marker: avatar, thumbnail or status glyph. Earn the pixels — a generic\n   *  icon repeated down fifty rows is noise. */\n  leading?: ReactNode;\n  /** First-class title. Rendered as the link when `href` is set. */\n  title?: ReactNode;\n  /** Secondary line under the title. */\n  subtitle?: ReactNode;\n  /**\n   * Middle columns as labelled pairs — {@link DescriptionItem}s, not free-form\n   * nodes, so a screen reader reads \"Data, 05/08/2026\" rather than four\n   * unrelated strings. Stacked (label above value) by default.\n   *\n   * The FIRST rung of the collapse ladder: the only slot whose absence does not\n   * stop the row being identified or acted on.\n   */\n  meta?: DescriptionItemProps[];\n  /** Escape hatch for a middle section these pairs cannot express. */\n  metaSlot?: ReactNode;\n  /** The number this row is about. Its own rail, tabular figures, never truncated. */\n  value?: ReactNode;\n  /**\n   * Inline actions — the one or two things done often enough to deserve a\n   * button. Revealed on hover and `:focus-within` by default, so fifty rows of\n   * buttons are not the resting state of the page.\n   */\n  actions?: ReactNode;\n  /** Always show the inline actions, rather than on hover/focus. */\n  actionsAlwaysVisible?: boolean;\n  /** The 3-dots overflow menu, pinned to the end. Also opens on right-click. */\n  menu?: ReactNode;\n  /** What opens the overflow menu on right-click / long-press. */\n  onContextMenu?: (event: React.MouseEvent) => void;\n  /**\n   * THE EXPANDABLE BODY — and the whole reason this is a card and not a table\n   * row.\n   *\n   * A summary row of labelled columns is a table row with a border round it: it\n   * restates what the table already says and gives nobody a reason to switch to\n   * it. What a card can do that a table cell cannot is OPEN — carry the record's\n   * own detail underneath its summary, in whatever shape that record wants.\n   *\n   * So this container makes no claim about what goes in here. It spans every\n   * rail and imposes nothing: an order puts its line items and a totals ledger\n   * here, a cart adds its recovery actions, a role lists its permissions. The\n   * design of that area belongs entirely to the consumer, and none of it is the\n   * envelope's business.\n   *\n   * ABSENT ⇒ NO CHEVRON. A row given nothing to reveal renders no disclosure\n   * control at all, rather than one that opens onto an empty box, so a column of\n   * chevrons is a truthful index of which rows have more behind them.\n   */\n  children?: ReactNode;\n  /** Open on first render, for an uncontrolled card. Ignored when `expanded` is set. */\n  defaultExpanded?: boolean;\n  /**\n   * Open state, when the LIST wants to own it.\n   *\n   * Left unset the card keeps its own, and rows open independently — several at\n   * once, which is what comparing two records requires. Pass this (with\n   * `onExpandedChange`) to impose something else, an accordion being the usual\n   * reason.\n   */\n  expanded?: boolean;\n  /** Fired with the state the card is asking to move to. */\n  onExpandedChange?: (expanded: boolean) => void;\n  /** Toggle this row's selection. Receives the raw event so a list can range-select. */\n  onToggleSelect?: (event?: React.MouseEvent) => void;\n  /** How much air the row gets. Vertical only — a full-width row cannot narrow. */\n  density?: DataViewsDensity;\n  /**\n   * Fine-grained size multiplier on top of `density` (1 = base).\n   *\n   * Applied as `zoom`, so it scales EVERYTHING the row draws — type, gutters,\n   * gaps, padding, the checkbox, the grip, the chip and the menu — not just the\n   * handful of font sizes it once multiplied.\n   */\n  scale?: number;\n  /** Flush style: a bottom rule instead of an outline. Row-only. */\n  divider?: boolean;\n  /** This row's id for drag purposes. Inert outside a `DragContainerProvider`. */\n  dragId?: string | number;\n  /**\n   * The record this row is about, read by the list's cell config.\n   *\n   * Required only when cells are configured — the config's `primary`/`secondary`\n   * are functions of the row, so without one there is nothing to render them\n   * from and the card falls back to its named slots.\n   */\n  row?: Record<string, unknown>;\n  /**\n   * A cell config for a STANDALONE card.\n   *\n   * Inside a `ListCardGroup` the list's config wins and this is ignored: one\n   * declaration of the list's shape is the whole point, and a row permitted to\n   * override it could put its columns somewhere no other row has them.\n   */\n  cells?: readonly ListCardCellConfig<never>[];\n}\n\n\n\n\n/**\n * Which cell config applies, and whether this row resolves its own tracks.\n *\n * The list's config wins over the card's: one declaration of the list's shape is\n * the point, so a row inside a group cannot introduce a column of its own. And\n * the template is standalone-only — inside a group the GROUP owns it and the row\n * is subgrid over it, because a row resolving its own tracks is exactly what\n * stops a list from lining up.\n */\nfunction useResolvedCells(\n  props: BaseListCardProps,\n  inGroup: boolean,\n): {\n  cells: readonly ListCardCellConfig<never>[] | null;\n  configured: boolean;\n  cellTemplate: string | null;\n} {\n  const groupCells = useCellConfig();\n  const cells = groupCells ?? props.cells ?? null;\n  const configured = cells != null && cells.length > 0 && props.row != null;\n  const cellTemplate = configured && !inGroup ? cellRailsTemplate(cellTracks(cells)) : null;\n  return { cells, configured, cellTemplate };\n}\n\n\n/**\n * The row's middle: either the list's configured cells, or the named slots.\n *\n * Split out because the branch is the only conditional shape the card has, and\n * inlined it pushed `BaseListCard` past both the line and the complexity gate.\n */\nfunction RowContent({\n  card,\n  cells,\n  configured,\n  slot,\n  actionable,\n  meta,\n}: {\n  card: BaseListCardProps;\n  cells: readonly ListCardCellConfig<never>[] | null;\n  configured: boolean;\n  slot: (name: string) => string | undefined;\n  actionable: boolean;\n  meta: { columns: number; present: boolean };\n}): React.JSX.Element {\n  if (configured && cells != null) {\n    return (\n      <>\n        {/* The list's columns, rendered from this row. */}\n        <ListCardCells cells={cells} row={card.row as never} />\n        {/* THE MENU IS NOT PART OF THE CONFIG and never optional: it is where a\n          * row's actions live, and a list that folded it into a cell would have\n          * nowhere left to put them. So it brackets the cells on its own rail,\n          * exactly as the gutters do at the other end. */}\n        <ListCardActions\n          actions={actionable ? card.actions : undefined}\n          alwaysVisible={card.actionsAlwaysVisible}\n          menu={card.menu}\n          testId={slot}\n        />\n      </>\n    );\n  }\n  return (\n    <>\n      <ListCardCaption\n        title={card.title}\n        subtitle={card.subtitle}\n        href={card.href}\n        target={card.target}\n        testId={slot(\"title\")}\n      />\n      <ListCardMeta meta={card.meta} metaSlot={card.metaSlot} trailingRule={card.value != null} />\n      <ListCardTail\n        value={card.value}\n        separated={meta.present}\n        actions={actionable ? card.actions : undefined}\n        actionsAlwaysVisible={card.actionsAlwaysVisible}\n        menu={card.menu}\n        testId={slot}\n      />\n    </>\n  );\n}\n\n/**\n * The revealed body, and the rule that separates it from the summary.\n *\n * `gridColumn: 1 / -1` so it spans every rail: the summary's columns are the\n * LIST's, and nothing about them should constrain a detail area whose design\n * belongs to the consumer.\n *\n * Collapse rather than an unmount, so the body animates open and keeps its own\n * state between peeks — a consumer putting a form or a scrolled table in here\n * would otherwise have it reset on every toggle. `unmountOnExit` is deliberately\n * NOT set: fifty closed rows pay for fifty hidden subtrees, which is the trade\n * taken because the alternative re-runs every consumer's effects per toggle.\n */\nfunction ExpandableBody({\n  disclosure,\n  padY,\n  pad,\n  children,\n}: {\n  disclosure: { expandable: boolean; expanded: boolean; regionId: string };\n  padY: number;\n  pad: number;\n  children: ReactNode;\n}): React.JSX.Element {\n  if (!disclosure.expandable) return <></>;\n  return (\n    <Box sx={{ gridColumn: \"1 / -1\", minWidth: 0 }}>\n      <Collapse in={disclosure.expanded} timeout={150}>\n        <Box\n          id={disclosure.regionId}\n          role=\"region\"\n          sx={{\n            minWidth: 0,\n            // `padY`, not a fraction of the horizontal padding. The card's own\n            // `py` wraps the summary AND the body, so once the body is in flow\n            // the summary has no bottom padding of its own — at `comfortable`\n            // the row visibly lost the height it had while closed.\n            mt: padY,\n            pt: padY,\n            // A RULE BETWEEN SUMMARY AND BODY, bled through the row's horizontal\n            // padding so it spans the card edge to edge. Inset, it reads as a\n            // border around the content rather than a division of the card.\n            borderTop: 1,\n            borderColor: \"divider\",\n            mx: -pad,\n            px: pad,\n          }}\n        >\n          {children}\n        </Box>\n      </Collapse>\n    </Box>\n  );\n}\n\nexport function BaseListCard(props: BaseListCardProps): React.JSX.Element {\n  const { selected = false, onClick } = props;\n  const shell = useRowShell(props);\n  const { actionable, selectable, slot, drag, reserve, pad, padY, acts } = shell;\n  const meta = metaShape(props);\n  const disclosure = useDisclosure(props);\n  const { cells, configured, cellTemplate } = useResolvedCells(props, shell.group != null);\n\n  return (\n    <Card\n      variant=\"outlined\"\n      className={props.className}\n      dataTestId={props.testId}\n      aria-label={props[\"aria-label\"]}\n      aria-disabled={actionable ? undefined : true}\n      onContextMenu={props.onContextMenu}\n      {...(acts ? actionProps(onClick) : {})}\n      {...drag.itemProps}\n      // A PLAIN OBJECT: `Card` merges by spreading, so a function sx vanishes.\n      sx={rowStyles(props, shell, cellTemplate)}\n    >\n      {drag.dropEdge != null && <DropIndicator edge={drag.dropEdge} />}\n      <DiscloseSlot\n        expandable={disclosure.expandable}\n        expanded={disclosure.expanded}\n        reserve={reserve}\n        onToggle={disclosure.toggle}\n        controls={disclosure.regionId}\n        testId={slot(\"disclose\")}\n      />\n      <DragSlot drag={drag} reserve={reserve} testId={slot(\"drag\")} />\n      <SelectSlot\n        selectable={selectable}\n        selected={selected}\n        reserve={reserve}\n        onToggleSelect={props.onToggleSelect}\n        testId={slot(\"checkbox\")}\n      />\n      <Box data-slot=\"leading\" sx={{ display: \"flex\", alignItems: \"center\" }}>\n        {props.leading}\n      </Box>\n      <RowContent card={props} cells={cells} configured={configured} slot={slot} actionable={actionable} meta={meta} />\n      <ExpandableBody disclosure={disclosure} padY={padY} pad={pad}>\n        {props.children}\n      </ExpandableBody>\n    </Card>\n  );\n}\n\nexport { META_BREAK, STACK_BREAK } from \"./base-list-card-slots\";\n"],"mappings":"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","names":["default"]}

package/dist/chunk-NBNLGTRB.js

@@ -0,0 +1,71 @@
+// src/components/layout/Container/Container.tsx
+import MuiContainer from "@mui/material/Container/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var Container = ({
+  children,
+  maxWidth = "lg",
+  variant = "default",
+  padding = "md",
+  responsive = true,
+  dataTestId,
+  sx,
+  ...props
+}) => {
+  const theme = useTheme();
+  const getPadding = () => {
+    const paddingMap = {
+      none: 0,
+      xs: theme.spacing(1),
+      sm: theme.spacing(2),
+      md: theme.spacing(3),
+      lg: theme.spacing(4),
+      xl: theme.spacing(6)
+    };
+    return paddingMap[padding] || theme.spacing(3);
+  };
+  const getMaxWidth = () => {
+    if (variant === "fluid") return false;
+    if (variant === "centered") return "md";
+    if (typeof maxWidth === "string" && ["xs", "sm", "md", "lg", "xl"].includes(maxWidth)) {
+      return maxWidth;
+    }
+    if (maxWidth === false) return false;
+    return "lg";
+  };
+  const containerStyles = {
+    ...variant === "centered" && {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      minHeight: "100vh"
+    },
+    ...variant === "padded" && {
+      paddingTop: theme.spacing(8),
+      paddingBottom: theme.spacing(8)
+    },
+    padding: getPadding(),
+    ...responsive && {
+      [theme.breakpoints.down("sm")]: {
+        padding: theme.spacing(2)
+      }
+    },
+    ...sx || {}
+  };
+  return /* @__PURE__ */ jsx(
+    MuiContainer,
+    {
+      maxWidth: getMaxWidth(),
+      sx: containerStyles,
+      "data-testid": dataTestId || "container",
+      ...props,
+      children
+    }
+  );
+};
+
+export {
+  Container
+};
+//# sourceMappingURL=chunk-NBNLGTRB.js.map

package/dist/chunk-NBNLGTRB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Container/Container.tsx"],"sourcesContent":["import MuiContainer from '@mui/material/Container/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { ContainerProps } from './Container.types';\n\nexport const Container: React.FC<ContainerProps> = ({\n  children,\n  maxWidth = 'lg',\n  variant = 'default',\n  padding = 'md',\n  responsive = true,\n  dataTestId,\n  sx,\n  ...props\n}) => {\n  const theme = useTheme();\n\n  const getPadding = () => {\n    const paddingMap = {\n      none: 0,\n      xs: theme.spacing(1),\n      sm: theme.spacing(2),\n      md: theme.spacing(3),\n      lg: theme.spacing(4),\n      xl: theme.spacing(6),\n    };\n    return paddingMap[padding] || theme.spacing(3);\n  };\n\n  const getMaxWidth = (): 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false => {\n    if (variant === 'fluid') return false;\n    if (variant === 'centered') return 'md';\n    if (typeof maxWidth === 'string' && ['xs', 'sm', 'md', 'lg', 'xl'].includes(maxWidth)) {\n      return maxWidth as 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n    }\n    if (maxWidth === false) return false;\n    return 'lg'; // default fallback\n  };\n\n  const containerStyles: SxProps<Theme> = {\n    ...(variant === 'centered' && {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      justifyContent: 'center',\n      minHeight: '100vh',\n    }),\n    ...(variant === 'padded' && {\n      paddingTop: theme.spacing(8),\n      paddingBottom: theme.spacing(8),\n    }),\n    padding: getPadding(),\n    ...(responsive && {\n      [theme.breakpoints.down('sm')]: {\n        padding: theme.spacing(2),\n      },\n    }),\n    ...(sx || {}),\n  };\n\n  return (\n    <MuiContainer\n      maxWidth={getMaxWidth()}\n      sx={containerStyles}\n      data-testid={dataTestId || 'container'}\n      {...props}\n    >\n      {children}\n    </MuiContainer>\n  );\n};\n"],"mappings":";AAAA,OAAO,kBAAkB;AACzB,SAAS,gBAAgB;AA8DrB;AAxDG,IAAM,YAAsC,CAAC;AAAA,EAClD;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,QAAQ,SAAS;AAEvB,QAAM,aAAa,MAAM;AACvB,UAAM,aAAa;AAAA,MACjB,MAAM;AAAA,MACN,IAAI,MAAM,QAAQ,CAAC;AAAA,MACnB,IAAI,MAAM,QAAQ,CAAC;AAAA,MACnB,IAAI,MAAM,QAAQ,CAAC;AAAA,MACnB,IAAI,MAAM,QAAQ,CAAC;AAAA,MACnB,IAAI,MAAM,QAAQ,CAAC;AAAA,IACrB;AACA,WAAO,WAAW,OAAO,KAAK,MAAM,QAAQ,CAAC;AAAA,EAC/C;AAEA,QAAM,cAAc,MAAgD;AAClE,QAAI,YAAY,QAAS,QAAO;AAChC,QAAI,YAAY,WAAY,QAAO;AACnC,QAAI,OAAO,aAAa,YAAY,CAAC,MAAM,MAAM,MAAM,MAAM,IAAI,EAAE,SAAS,QAAQ,GAAG;AACrF,aAAO;AAAA,IACT;AACA,QAAI,aAAa,MAAO,QAAO;AAC/B,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkC;AAAA,IACtC,GAAI,YAAY,cAAc;AAAA,MAC5B,SAAS;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,WAAW;AAAA,IACb;AAAA,IACA,GAAI,YAAY,YAAY;AAAA,MAC1B,YAAY,MAAM,QAAQ,CAAC;AAAA,MAC3B,eAAe,MAAM,QAAQ,CAAC;AAAA,IAChC;AAAA,IACA,SAAS,WAAW;AAAA,IACpB,GAAI,cAAc;AAAA,MAChB,CAAC,MAAM,YAAY,KAAK,IAAI,CAAC,GAAG;AAAA,QAC9B,SAAS,MAAM,QAAQ,CAAC;AAAA,MAC1B;AAAA,IACF;AAAA,IACA,GAAI,MAAM,CAAC;AAAA,EACb;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,YAAY;AAAA,MACtB,IAAI;AAAA,MACJ,eAAa,cAAc;AAAA,MAC1B,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/chunk-NC2AATCC.js

@@ -0,0 +1,191 @@
+import {
+  RangeBounds
+} from "./chunk-BZTFPSWT.js";
+import {
+  isRangeSet
+} from "./chunk-GCZJH4XL.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  MultiSelectDropdown
+} from "./chunk-4T6W43TO.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Text
+} from "./chunk-VRHBJXZ7.js";
+
+// src/components/data-display/DataViews/data-views-more-fields.tsx
+import Checkbox from "@mui/material/Checkbox/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var INLINE_OPTION_LIMIT = 2;
+function OverflowPill({
+  field,
+  values,
+  onToggle,
+  onClear,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const options = field.pill?.options ?? [];
+  if (options.length > INLINE_OPTION_LIMIT) {
+    return /* @__PURE__ */ jsx(
+      MultiSelectDropdown,
+      {
+        extraOptionsHeading: copy.filters.optionsHeading,
+        clearText: copy.filters.clear,
+        clearLabel: copy.filters.clearRange(field.label),
+        label: field.pill?.label ?? field.label,
+        options,
+        selected: new Set(values),
+        onToggle,
+        onClear,
+        allLabel: copy.filters.allOption,
+        searchable: options.length > 6 ? true : void 0,
+        searchPlaceholder: copy.filters.optionSearchPlaceholder,
+        noResultsLabel: copy.filters.optionsEmpty,
+        layout: "pill",
+        "data-testid": `${testIdPrefix}-more-${field.id}`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(default2, { sx: { display: "flex", flexWrap: "wrap", gap: 0.75 }, children: (field.pill?.options ?? []).map((option) => {
+    const checked = values.includes(option.value);
+    return /* @__PURE__ */ jsxs(
+      default2,
+      {
+        component: "label",
+        "data-testid": `${testIdPrefix}-more-${field.id}-${option.value}`,
+        sx: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 0.25,
+          pr: 1,
+          border: 1,
+          borderStyle: "solid",
+          borderColor: checked ? "primary.main" : "divider",
+          bgcolor: checked ? "action.selected" : "transparent",
+          borderRadius: 5,
+          cursor: "pointer",
+          fontSize: "0.8125rem",
+          color: checked ? "primary.main" : "text.secondary"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              size: "small",
+              checked,
+              onChange: (event) => onToggle(option.value, event.target.checked),
+              inputProps: { "aria-label": `${field.label}: ${option.label}` }
+            }
+          ),
+          option.label
+        ]
+      },
+      option.value
+    );
+  }) });
+}
+function OverflowRange({
+  field,
+  value,
+  onChange,
+  testIdPrefix
+}) {
+  if (!field.range) return null;
+  return /* @__PURE__ */ jsx(
+    RangeBounds,
+    {
+      field: field.range,
+      value,
+      onChange,
+      testId: `${testIdPrefix}-more-${field.id}`
+    }
+  );
+}
+function fieldClearing({
+  field,
+  pills,
+  ranges,
+  onTogglePill,
+  onChangeRange
+}) {
+  if (field.group === "range") {
+    return {
+      applied: isRangeSet(ranges[field.id] ?? {}),
+      clear: () => onChangeRange(field.id, {})
+    };
+  }
+  const values = pills[field.id] ?? [];
+  return {
+    applied: values.length > 0,
+    clear: () => values.forEach((value) => onTogglePill(field.id, value, false))
+  };
+}
+function MoreGroup({
+  field,
+  pills,
+  ranges,
+  onTogglePill,
+  onChangeRange,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const { applied, clear } = fieldClearing({ field, pills, ranges, onTogglePill, onChangeRange });
+  return /* @__PURE__ */ jsxs(default2, { sx: { mb: 1.5, "&:last-of-type": { mb: 0 } }, children: [
+    /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 0.5 }, children: [
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsxs(default2, { component: "span", sx: { color: "text.secondary" }, children: [
+        field.label,
+        field.group === "range" && isRangeSet(ranges[field.id] ?? {}) ? " \u2022" : ""
+      ] }) }),
+      applied && /* @__PURE__ */ jsx(
+        default2,
+        {
+          component: "button",
+          type: "button",
+          onClick: clear,
+          "data-testid": `${testIdPrefix}-more-${field.id}-clear`,
+          sx: {
+            ml: "auto",
+            border: 0,
+            p: 0,
+            bgcolor: "transparent",
+            cursor: "pointer",
+            font: "inherit",
+            fontSize: "0.75rem",
+            color: "primary.main",
+            "&:hover": { textDecoration: "underline" }
+          },
+          children: copy.filters.clear
+        }
+      )
+    ] }),
+    field.group === "pill" ? /* @__PURE__ */ jsx(
+      OverflowPill,
+      {
+        field,
+        values: pills[field.id] ?? [],
+        onToggle: (value, checked) => onTogglePill(field.id, value, checked),
+        onClear: () => (pills[field.id] ?? []).forEach((v) => onTogglePill(field.id, v, false)),
+        testIdPrefix
+      }
+    ) : /* @__PURE__ */ jsx(
+      OverflowRange,
+      {
+        field,
+        value: ranges[field.id] ?? {},
+        onChange: (range) => onChangeRange(field.id, range),
+        testIdPrefix
+      }
+    )
+  ] });
+}
+
+export {
+  fieldClearing,
+  MoreGroup
+};
+//# sourceMappingURL=chunk-NC2AATCC.js.map

package/dist/chunk-NC2AATCC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-more-fields.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * ONE FIELD, RENDERED INSIDE THE \"MAIS\" PANEL.\n *\n * Split from `data-views-more-filters` at the file-size gate, along the seam\n * that was already there: that module is the trigger, the panel and its\n * footer — the chrome — and this is what goes in it.\n *\n * A field with one or two options renders FLAT: inside a panel there is no\n * space to win back, and two labelled checkboxes are faster than a dropdown\n * needing a second click. Past that it becomes a {@link MultiSelectDropdown} —\n * see `INLINE_OPTION_LIMIT`.\n */\nimport Checkbox from \"@mui/material/Checkbox/index.js\";\n\nimport { MultiSelectDropdown } from \"../../layout/ContentToolbar\";\nimport { Box } from \"../../../mui/Box\";\nimport { Text } from \"../../typography/Text\";\n\nimport type { OverflowField } from \"./data-views-overflow\";\nimport { RangeBounds } from \"./data-views-range-pill\";\nimport { isRangeSet } from \"./data-views-range-values\";\nimport type { RangeValue } from \"./data-views-types\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\n\n/** What each field's control needs, minus the panel's own chrome. */\nexport interface MoreFieldProps {\n  pills: Record<string, string[]>;\n  ranges: Record<string, RangeValue>;\n  onTogglePill: (fieldId: string, value: string, checked: boolean) => void;\n  onChangeRange: (fieldId: string, range: RangeValue) => void;\n  testIdPrefix: string;\n}\n\n/**\n * Above this many options a field is a DROPDOWN rather than a flat row of\n * checkboxes. Two options cost two lines and read faster laid out; a \"Cliente\"\n * with a dozen turns the panel into a scrolling wall and buries every field\n * under it, which is exactly what the overflow was meant to avoid.\n */\nconst INLINE_OPTION_LIMIT = 2;\n\n/** One overflowed pill: its options as checkboxes, all visible at once. */\nfunction OverflowPill<T extends Record<string, unknown>>({\n  field,\n  values,\n  onToggle,\n  onClear,\n  testIdPrefix,\n}: {\n  field: OverflowField<T>;\n  values: string[];\n  onToggle: (value: string, checked: boolean) => void;\n  onClear: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const options = field.pill?.options ?? [];\n  if (options.length > INLINE_OPTION_LIMIT) {\n    return (\n      <MultiSelectDropdown\n        extraOptionsHeading={copy.filters.optionsHeading}\n        clearText={copy.filters.clear}\n        clearLabel={copy.filters.clearRange(field.label)}\n        label={field.pill?.label ?? field.label}\n        options={options}\n        selected={new Set(values)}\n        onToggle={onToggle}\n        onClear={onClear}\n        allLabel={copy.filters.allOption}\n        searchable={options.length > 6 ? true : undefined}\n        searchPlaceholder={copy.filters.optionSearchPlaceholder}\n        noResultsLabel={copy.filters.optionsEmpty}\n        layout=\"pill\"\n        data-testid={`${testIdPrefix}-more-${field.id}`}\n      />\n    );\n  }\n  return (\n    <Box sx={{ display: \"flex\", flexWrap: \"wrap\", gap: 0.75 }}>\n      {(field.pill?.options ?? []).map((option) => {\n        const checked = values.includes(option.value);\n        return (\n          <Box\n            key={option.value}\n            component=\"label\"\n            data-testid={`${testIdPrefix}-more-${field.id}-${option.value}`}\n            sx={{\n              display: \"inline-flex\",\n              alignItems: \"center\",\n              gap: 0.25,\n              pr: 1,\n              border: 1,\n              borderStyle: \"solid\",\n              borderColor: checked ? \"primary.main\" : \"divider\",\n              bgcolor: checked ? \"action.selected\" : \"transparent\",\n              borderRadius: 5,\n              cursor: \"pointer\",\n              fontSize: \"0.8125rem\",\n              color: checked ? \"primary.main\" : \"text.secondary\",\n            }}\n          >\n            <Checkbox\n              size=\"small\"\n              checked={checked}\n              onChange={(event) => onToggle(option.value, event.target.checked)}\n              inputProps={{ \"aria-label\": `${field.label}: ${option.label}` }}\n            />\n            {option.label}\n          </Box>\n        );\n      })}\n    </Box>\n  );\n}\n\n\n/**\n * One overflowed range: its presets and its two bounds, as the same controls\n * the pill uses.\n *\n * The whole control DELEGATES to {@link RangeBounds} rather than being built\n * here, which is the point — this panel used to render a raw\n * `<input type=\"date\">`, so the masked `dd/mm/aaaa` field existed only while\n * the filter FITTED on the bar. The moment \"Data\" overflowed it reverted to the\n * native control the mask replaced, and a merchant on a narrow screen never saw\n * the fix at all (FUT-744). `Valor` had the twin bug: a bare `type=\"number\"`\n * plus `Number(raw)` dropped the decimal comma this panel is meant to accept.\n *\n * That also retires the intrinsic-width workaround this pair used to need — a\n * native date input reports a wide minimum (its own mask plus the picker\n * glyph), which is what made two of them refuse to shrink and scrolled the\n * panel sideways. A text input has no such minimum.\n *\n * `RangeBounds` renders the preset chips ITSELF, above the inputs. This panel\n * must NOT render its own row as well: when the delegation above landed, the\n * chips it used to draw by hand stayed behind, and \"Data\" showed Hoje/Ontem/\n * Esta semana/Este mês/Este ano twice — two rows, duplicated test ids, and half\n * the panel's height spent saying the same thing (FUT-751).\n */\nfunction OverflowRange<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  testIdPrefix,\n}: {\n  field: OverflowField<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  testIdPrefix: string;\n}): React.JSX.Element | null {\n  // `group === \"range\"` is what selects this component, so `range` is always\n  // set; the guard is for the type, not for a state the caller can reach.\n  if (!field.range) return null;\n  return (\n    <RangeBounds\n      field={field.range}\n      value={value}\n      onChange={onChange}\n      testId={`${testIdPrefix}-more-${field.id}`}\n    />\n  );\n}\n\n/**\n * The trigger, badged with how many fields had no room on the bar — and told\n * apart when some of them are APPLIED.\n *\n * An applied filter can land in here now (it is ranked first, not exempt), so\n * this button is the only thing on screen still saying it exists. A neutral\n * badge reading \"3\" would make \"three filters you have not used\" and \"three\n * filters narrowing this list\" look identical, which is the whole failure the\n * old exemption was written to avoid. So an overflow holding applied filters\n * takes the applied tone and counts them in its own badge.\n\n/**\n * Whether a field has anything applied, and how to unapply it — the two shapes\n * (a pill's selected values, a range's bounds) answered in one place so the\n * group that renders them stays a renderer.\n */\nexport function fieldClearing<T extends Record<string, unknown>>({\n  field,\n  pills,\n  ranges,\n  onTogglePill,\n  onChangeRange,\n}: {\n  field: OverflowField<T>;\n} & Pick<MoreFieldProps, \"pills\" | \"ranges\" | \"onTogglePill\" | \"onChangeRange\">): {\n  applied: boolean;\n  clear: () => void;\n} {\n  if (field.group === \"range\") {\n    return {\n      applied: isRangeSet(ranges[field.id] ?? {}),\n      clear: () => onChangeRange(field.id, {}),\n    };\n  }\n  const values = pills[field.id] ?? [];\n  return {\n    applied: values.length > 0,\n    clear: () => values.forEach((value) => onTogglePill(field.id, value, false)),\n  };\n}\n\n\n/** One labelled group in the panel: the field's name, then its control. */\nexport function MoreGroup<T extends Record<string, unknown>>({\n  field,\n  pills,\n  ranges,\n  onTogglePill,\n  onChangeRange,\n  testIdPrefix,\n}: {\n  field: OverflowField<T>;\n} & MoreFieldProps): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const { applied, clear } = fieldClearing({ field, pills, ranges, onTogglePill, onChangeRange });\n  return (\n    <Box sx={{ mb: 1.5, \"&:last-of-type\": { mb: 0 } }}>\n      <Box sx={{ display: \"flex\", alignItems: \"center\", gap: 1, mb: 0.5 }}>\n        <Text variant=\"caption\" as=\"span\">\n          <Box component=\"span\" sx={{ color: \"text.secondary\" }}>\n            {field.label}\n            {field.group === \"range\" && isRangeSet(ranges[field.id] ?? {}) ? \" •\" : \"\"}\n          </Box>\n        </Text>\n        {/* The panel's equivalent of the pill's ✕. Without it a field applied\n            in here could only be cleared by finding it again on the bar —\n            which is where it goes the moment it becomes active, so the\n            operator has to close this panel to undo what they just did. */}\n        {applied && (\n          <Box\n            component=\"button\"\n            type=\"button\"\n            onClick={clear}\n            data-testid={`${testIdPrefix}-more-${field.id}-clear`}\n            sx={{\n              ml: \"auto\",\n              border: 0,\n              p: 0,\n              bgcolor: \"transparent\",\n              cursor: \"pointer\",\n              font: \"inherit\",\n              fontSize: \"0.75rem\",\n              color: \"primary.main\",\n              \"&:hover\": { textDecoration: \"underline\" },\n            }}\n          >\n            {copy.filters.clear}\n          </Box>\n        )}\n      </Box>\n      {field.group === \"pill\" ? (\n        <OverflowPill\n          field={field}\n          values={pills[field.id] ?? []}\n          onToggle={(value, checked) => onTogglePill(field.id, value, checked)}\n          onClear={() => (pills[field.id] ?? []).forEach((v) => onTogglePill(field.id, v, false))}\n          testIdPrefix={testIdPrefix}\n        />\n      ) : (\n        <OverflowRange\n          field={field}\n          value={ranges[field.id] ?? {}}\n          onChange={(range) => onChangeRange(field.id, range)}\n          testIdPrefix={testIdPrefix}\n        />\n      )}\n    </Box>\n  );\n}\n\n"],"mappings":"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","names":["default"]}

package/dist/chunk-NM3E27GK.js

@@ -0,0 +1,292 @@
+// src/components/data-display/TimingDiagram/TimingDiagram.views.tsx
+import Box from "@mui/material/Box/index.js";
+import Tooltip from "@mui/material/Tooltip/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled, useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var phaseColors = {
+  dns: "#9C27B0",
+  // Purple
+  connect: "#2196F3",
+  // Blue
+  ssl: "#00BCD4",
+  // Cyan
+  request: "#4CAF50",
+  // Green
+  response: "#FF9800"
+  // Orange
+};
+var formatTime = (ms) => {
+  if (ms < 1e3) return `${ms}ms`;
+  return `${(ms / 1e3).toFixed(2)}s`;
+};
+var colorOf = (phase) => phaseColors[phase.key];
+var widthOf = (percentages, phase) => percentages[phase.key] ?? 0;
+var withTooltip = (phase, enabled, element) => enabled ? /* @__PURE__ */ jsx(
+  Tooltip,
+  {
+    title: `${phase.label}: ${formatTime(phase.value)}`,
+    placement: "top",
+    role: "tooltip",
+    "aria-describedby": `tooltip-${phase.key}`,
+    children: element
+  },
+  phase.key
+) : element;
+var WaterfallContainer = styled(Box)(({ theme }) => ({
+  position: "relative",
+  width: "100%",
+  marginTop: theme.spacing(2)
+}));
+var WaterfallBar = styled(Box, {
+  shouldForwardProp: (prop) => !["phaseColor", "offset", "width", "animated"].includes(prop)
+})(({ theme, phaseColor, offset, width, animated }) => ({
+  position: "absolute",
+  height: 32,
+  left: `${offset}%`,
+  width: `${width}%`,
+  background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.8)} 100%)`,
+  borderRadius: theme.shape.borderRadius,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: theme.palette.getContrastText(phaseColor),
+  fontSize: "0.75rem",
+  fontWeight: 500,
+  boxShadow: `0 2px 8px ${alpha(phaseColor, 0.3)}`,
+  transition: animated ? "all 0.5s ease" : "none",
+  animation: animated ? "slideIn 0.5s ease" : "none",
+  "@keyframes slideIn": {
+    from: {
+      transform: "translateX(-20px)",
+      opacity: 0
+    },
+    to: {
+      transform: "translateX(0)",
+      opacity: 1
+    }
+  },
+  "&:hover": {
+    transform: "translateY(-2px)",
+    boxShadow: `0 4px 12px ${alpha(phaseColor, 0.5)}`,
+    zIndex: 10
+  }
+}));
+var TimelineAxis = styled(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  marginTop: theme.spacing(1),
+  paddingTop: theme.spacing(1),
+  borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}`
+}));
+var TimeLabel = styled(Typography)(({ theme }) => ({
+  fontSize: "0.7rem",
+  color: theme.palette.text.secondary,
+  fontWeight: 500
+}));
+var WaterfallView = ({
+  phases,
+  percentages,
+  data,
+  animated,
+  showLabels,
+  showTooltips,
+  height
+}) => {
+  let offset = 0;
+  return /* @__PURE__ */ jsxs(WaterfallContainer, { style: { height: height + 40 }, "data-variant": "waterfall", children: [
+    phases.map((phase, index) => {
+      const width = widthOf(percentages, phase);
+      const currentOffset = offset;
+      offset += width;
+      return withTooltip(
+        phase,
+        showTooltips,
+        /* @__PURE__ */ jsx(
+          WaterfallBar,
+          {
+            "data-testid": `timing-segment-${phase.key}`,
+            phaseColor: colorOf(phase),
+            offset: currentOffset,
+            width,
+            animated,
+            "data-animated": animated.toString(),
+            style: {
+              top: index * 8,
+              width: `${width}%`,
+              left: `${currentOffset}%`
+            },
+            children: showLabels && width > 10 && /* @__PURE__ */ jsx("span", { "data-testid": "timing-label", children: formatTime(phase.value) })
+          },
+          phase.key
+        )
+      );
+    }),
+    /* @__PURE__ */ jsxs(TimelineAxis, { style: { marginTop: height }, children: [
+      /* @__PURE__ */ jsx(TimeLabel, { children: "0ms" }),
+      /* @__PURE__ */ jsx(TimeLabel, { children: formatTime(data.total / 2) }),
+      /* @__PURE__ */ jsx(TimeLabel, { children: formatTime(data.total) })
+    ] })
+  ] });
+};
+var StackedBar = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "animated"
+})(({ theme, animated }) => ({
+  display: "flex",
+  width: "100%",
+  height: 40,
+  borderRadius: theme.shape.borderRadius,
+  overflow: "hidden",
+  boxShadow: theme.shadows[2],
+  ...animated && {
+    "& > div": {
+      animation: "expandWidth 0.8s ease"
+    },
+    "@keyframes expandWidth": {
+      from: { width: 0 },
+      to: { width: "100%" }
+    }
+  }
+}));
+var StackedSegment = styled(Box, {
+  shouldForwardProp: (prop) => !["phaseColor", "width"].includes(prop)
+})(({ phaseColor, width }) => ({
+  width: `${width}%`,
+  background: `linear-gradient(135deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.85)} 100%)`,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "#fff",
+  fontSize: "0.7rem",
+  fontWeight: 600,
+  position: "relative",
+  transition: "all 0.3s ease",
+  "&:hover": {
+    filter: "brightness(1.1)",
+    zIndex: 1
+  }
+}));
+var StackedView = ({
+  phases,
+  percentages,
+  data,
+  animated,
+  showLabels,
+  showTooltips
+}) => /* @__PURE__ */ jsxs(Box, { "data-variant": "stacked", children: [
+  /* @__PURE__ */ jsx(StackedBar, { animated, "data-animated": animated.toString(), children: phases.map((phase) => {
+    const width = widthOf(percentages, phase);
+    return withTooltip(
+      phase,
+      showTooltips,
+      /* @__PURE__ */ jsx(
+        StackedSegment,
+        {
+          "data-testid": `timing-segment-${phase.key}`,
+          phaseColor: colorOf(phase),
+          width,
+          style: { width: `${width}%` },
+          children: showLabels && width > 10 && /* @__PURE__ */ jsx("span", { "data-testid": "timing-label", children: formatTime(phase.value) })
+        },
+        phase.key
+      )
+    );
+  }) }),
+  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", mt: 1 }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "0ms" }),
+    /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", fontWeight: "bold", children: [
+      "Total: ",
+      formatTime(data.total)
+    ] })
+  ] })
+] });
+var HorizontalBar = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(1),
+  marginTop: theme.spacing(2)
+}));
+var HorizontalSegment = styled(Box, {
+  shouldForwardProp: (prop) => !["phaseColor", "width", "animated"].includes(prop)
+})(({ theme, phaseColor, animated }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(2),
+  "& .label": {
+    minWidth: 80,
+    fontSize: "0.85rem",
+    fontWeight: 500,
+    color: theme.palette.text.secondary
+  },
+  "& .bar": {
+    flex: 1,
+    height: 24,
+    borderRadius: theme.shape.borderRadius,
+    background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.7)} 100%)`,
+    position: "relative",
+    overflow: "hidden",
+    boxShadow: `0 2px 6px ${alpha(phaseColor, 0.25)}`,
+    ...animated && {
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: `linear-gradient(90deg, transparent 0%, ${alpha("#fff", 0.3)} 50%, transparent 100%)`,
+        animation: "shimmer 2s infinite"
+      },
+      "@keyframes shimmer": {
+        from: { transform: "translateX(-100%)" },
+        to: { transform: "translateX(100%)" }
+      }
+    }
+  },
+  "& .value": {
+    minWidth: 60,
+    textAlign: "right",
+    fontSize: "0.85rem",
+    fontWeight: 600,
+    color: phaseColor
+  }
+}));
+var HorizontalView = ({
+  phases,
+  percentages,
+  data,
+  animated
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(HorizontalBar, { "data-variant": "horizontal", children: [
+    phases.map((phase) => /* @__PURE__ */ jsxs(
+      HorizontalSegment,
+      {
+        "data-testid": `timing-segment-${phase.key}`,
+        phaseColor: colorOf(phase),
+        width: widthOf(percentages, phase),
+        animated,
+        "data-animated": animated.toString(),
+        children: [
+          /* @__PURE__ */ jsx(Typography, { className: "label", children: phase.label }),
+          /* @__PURE__ */ jsx(Box, { className: "bar", style: { width: `${percentages[phase.key]}%` } }),
+          /* @__PURE__ */ jsx(Typography, { className: "value", "data-testid": "timing-label", children: formatTime(phase.value) })
+        ]
+      },
+      phase.key
+    )),
+    /* @__PURE__ */ jsx(Box, { sx: { mt: 2, pt: 2, borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}` }, children: /* @__PURE__ */ jsxs(Typography, { variant: "body2", fontWeight: "bold", color: "primary", children: [
+      "Total Time: ",
+      formatTime(data.total)
+    ] }) })
+  ] });
+};
+
+export {
+  phaseColors,
+  formatTime,
+  WaterfallView,
+  StackedView,
+  HorizontalView
+};
+//# sourceMappingURL=chunk-NM3E27GK.js.map