@12-apps/ui 6.33.1 → 6.35.0

package/dist/chunk-XREYLKUX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/base-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode } from \"react\";\n\nimport { useTheme, type CSSObject } from \"@mui/material/styles/index.js\";\n\n/** See the note on `CardSx` in `card-surface` — these fragments get merged. */\ntype CardSx = CSSObject | Record<string, unknown>;\n\nimport { Checkbox } from \"../../form/Checkbox\";\nimport { Card } from \"../../layout/Card\";\nimport { Box } from \"../../../mui/Box\";\nimport { Text } from \"../../typography/Text\";\n\nimport { DragHandle, useDragItem } from \"./data-views-drag\";\nimport {\n  CARD_RADIUS,\n  cardSurfaceStyles,\n  isActionable,\n  isSelectable,\n  slotTestIds,\n  type CardSurfaceProps,\n} from \"./card-surface\";\nimport { CARD_ASPECT_RATIOS, type CardAspectRatio } from \"./data-views-types\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { rem } from \"../../../tokens/relative\";\n\nexport interface BaseCardProps extends CardSurfaceProps {\n  /** Extra body content below the caption (chips, meta). Optional. */\n  children?: ReactNode;\n  /** Tile proportion. Defaults to \"4:3\". */\n  aspectRatio?: CardAspectRatio;\n  /**\n   * Size multiplier from the zoom slider (1 = base).\n   *\n   * Applied as `zoom`, so the whole card grows together — padding, typography,\n   * the checkbox, the menu and the media alike — in step with its width, which\n   * the grid sizes to base × scale. A card at scale 2 renders at ~twice the\n   * size, its proportion preserved by `aspectRatio`. Default 1.\n   */\n  scale?: number;\n  /** Display-image node (e.g. an `<img>` / thumbnail) filling the media region. */\n  image?: ReactNode;\n  /** Shown centered in the media region when there is no `image` (icon/initial). */\n  imageFallback?: ReactNode;\n  /** First-class title, rendered in the caption. */\n  title?: ReactNode;\n  /** Secondary caption line under the title. */\n  subtitle?: ReactNode;\n  /** The 3-dots menu (or any action node) pinned to the top-right corner. */\n  menu?: ReactNode;\n  /** Toggle this card's selection. Omit to hide the checkbox (non-selectable). */\n  onToggleSelect?: () => void;\n  /**\n   * This card's id for drag purposes.\n   *\n   * Draggable ONLY inside a {@link DragContainerProvider} — see\n   * `data-views-drag`. On the board that is how a card moves between columns;\n   * in a grade it is how the operator reorders. Outside a container this is\n   * inert and no grip appears.\n   */\n  dragId?: string | number;\n  checkboxTestId?: string;\n}\n\n/**\n * The outlined-tile style: fixed ratio, scaled padding, selected/dimmed states.\n *\n * See the note on the row: `zoom` scales EVERY length in the subtree, including\n * the MUI internals (checkbox, chip, icon button) that no prop of ours reaches.\n * The grid still sizes the track to BASE_CARD_WIDTH x scale, so the tile fills\n * its track physically and lays its contents out in the unscaled box behind it\n * — which is what \"the whole card grows together\" was always meant to mean.\n */\nfunction cardSx(opts: {\n  aspectRatio: CardAspectRatio;\n  pad: number;\n  scale: number;\n  interactive: boolean;\n  draggable: boolean;\n}): CardSx {\n  const { aspectRatio, pad, scale, interactive, draggable } = opts;\n  return {\n    position: \"relative\",\n    zoom: scale,\n    aspectRatio: String(CARD_ASPECT_RATIOS[aspectRatio]),\n    display: \"flex\",\n    flexDirection: \"column\",\n    overflow: \"hidden\",\n    p: pad,\n    cursor: draggable ? \"grab\" : interactive ? \"pointer\" : undefined,\n    ...(draggable ? { touchAction: \"none\", \"&:active\": { cursor: \"grabbing\" } } : {}),\n  };\n}\n\n/**\n * How far the first block in flow must start below the tile's top edge to clear\n * the absolute overlays: their 4px inset plus the checkbox's 38px hit area (20px\n * glyph in MUI's 9px padding), which is the taller of the two corners.\n */\nconst OVERLAY_BAND_PX = 42;\n\n/**\n * The top margin each stacked slot needs, in MUI spacing units.\n *\n * The overlays are absolute, so they cost the flow nothing — over MEDIA that is\n * the whole point (a checkbox on a thumbnail reads as a checkbox on a\n * thumbnail). Over TEXT it is a collision: a title-only tile started its first\n * line at the padding edge, directly under the checkbox, and rendered\n * `Selecionada` with the box sitting on the `Se`. So when nothing pictorial is\n * there to absorb them, whichever block comes first clears the band instead.\n */\nfunction contentGaps(opts: {\n  hasMedia: boolean;\n  hasBody: boolean;\n  overlays: boolean;\n  pad: number;\n}): { body: number; caption: number } {\n  const { hasMedia, hasBody, overlays, pad } = opts;\n  const gap = pad * 0.5;\n  const clear = !hasMedia && overlays ? Math.max(0, OVERLAY_BAND_PX / 8 - pad) : 0;\n  return { body: hasMedia ? gap : clear, caption: hasMedia || hasBody ? gap : clear };\n}\n\n/** The top-corner overlays: the select checkbox (left) and the menu slot (right). */\nfunction CardOverlays({\n  selected,\n  onToggleSelect,\n  checkboxTestId,\n  menu,\n}: Pick<BaseCardProps, \"selected\" | \"onToggleSelect\" | \"checkboxTestId\" | \"menu\">): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <>\n      {onToggleSelect && (\n        <Box sx={{ position: \"absolute\", top: 4, left: 4, zIndex: 2 }}>\n          <Checkbox\n            checked={selected}\n            onChange={() => onToggleSelect()}\n            // Selecting must never trigger the card's own click (open/edit).\n            onClick={(event) => event.stopPropagation()}\n            size=\"small\"\n            data-testid={checkboxTestId}\n            aria-label={copy.selection.selectRow}\n          />\n        </Box>\n      )}\n      {menu && (\n        <Box\n          sx={{ position: \"absolute\", top: 4, right: 4, zIndex: 2 }}\n          // Acting on the menu must never trigger the card's own click.\n          onClick={(event) => event.stopPropagation()}\n        >\n          {menu}\n        </Box>\n      )}\n    </>\n  );\n}\n\n/**\n * Media region: fills the tile above the caption; centers `imageFallback` when\n * there is no image so title-only entities still fill the ratio box and mixed\n * grids stay aligned.\n */\nfunction CardMedia({ image, imageFallback }: Pick<BaseCardProps, \"image\" | \"imageFallback\">): React.JSX.Element {\n  return (\n    <Box\n      sx={{\n        flex: 1,\n        minHeight: 0,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        overflow: \"hidden\",\n        borderRadius: 1,\n        \"& img\": { width: \"100%\", height: \"100%\", objectFit: \"cover\" },\n      }}\n    >\n      {image ?? imageFallback}\n    </Box>\n  );\n}\n\n/** The body slot (chips/meta); fills remaining space when there is no media. */\nfunction CardBodyContent({\n  children,\n  fill,\n  topGap,\n}: {\n  children: ReactNode;\n  fill: boolean;\n  topGap: number;\n}): React.JSX.Element {\n  return (\n    <Box\n      sx={{\n        flex: fill ? 1 : \"none\",\n        minHeight: 0,\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        gap: 0.75,\n        mt: topGap,\n        overflow: \"hidden\",\n      }}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/** The title/subtitle caption. */\nfunction CardCaption({\n  title,\n  subtitle,\n  topGap,\n}: {\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  topGap: number;\n}): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Box sx={{ mt: topGap, minWidth: 0 }}>\n      {title != null && (\n        <Text\n          variant=\"heading\"\n          size=\"sm\"\n          weight=\"bold\"\n          as=\"p\"\n          style={{\n            lineHeight: 1.15,\n            fontSize: rem(theme, 15.2),\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          {title}\n        </Text>\n      )}\n      {subtitle != null && (\n        <Text variant=\"caption\" size=\"xs\" color=\"secondary\" as=\"p\">\n          {subtitle}\n        </Text>\n      )}\n    </Box>\n  );\n}\n\n/** The stacked media / body / caption slots inside the tile (below the overlays). */\nfunction CardContents({\n  children,\n  image,\n  imageFallback,\n  title,\n  subtitle,\n  overlays,\n  pad,\n}: Pick<BaseCardProps, \"children\" | \"image\" | \"imageFallback\" | \"title\" | \"subtitle\"> & {\n  overlays: boolean;\n  pad: number;\n}): React.JSX.Element {\n  const hasMedia = image != null || imageFallback != null;\n  const hasBody = children != null;\n  const hasCaption = title != null || subtitle != null;\n  const top = contentGaps({ hasMedia, hasBody, overlays, pad });\n  return (\n    <>\n      {hasMedia && <CardMedia image={image} imageFallback={imageFallback} />}\n      {hasBody && (\n        <CardBodyContent fill={!hasMedia} topGap={top.body}>\n          {children}\n        </CardBodyContent>\n      )}\n      {hasCaption && <CardCaption title={title} subtitle={subtitle} topGap={top.caption} />}\n    </>\n  );\n}\n\n/**\n * Reusable selectable card shell for the DataViews \"Grade\" (cards) layout, and\n * the ONLY card component that lives in `@12-apps/ui` — every domain \"kind card\"\n * (product, mesa, role, …) lives in the app and composes this envelope. See the\n * per-slot helpers above; this shell just assembles them within a fixed-ratio\n * tile. Reads no context, so it renders standalone as well as inside the grid.\n */\n/**\n * Everything the tile derives from its props before it can render — pulled out\n * so `BaseCard` itself stays inside the complexity budget.\n */\nfunction useCardShell(props: BaseCardProps) {\n  const actionable = isActionable(props.state);\n  return {\n    selectable: isSelectable(props),\n    actionable,\n    theme: useTheme(),\n    slot: slotTestIds(props.testId),\n    scale: props.scale ?? 1,\n    // The card's own veto over the container's decision — see `CardSurfaceProps`.\n    drag: useDragItem(props.draggable === false || !actionable ? undefined : props.dragId),\n  };\n}\n\nexport function BaseCard(props: BaseCardProps): React.JSX.Element {\n  const { aspectRatio = \"4:3\", selected = false } = props;\n  const { menu, onToggleSelect, onClick } = props;\n  const { selectable, actionable, theme, slot, scale, drag } = useCardShell(props);\n  const dataTestId = props.testId;\n  const checkboxTestId = slot(\"checkbox\");\n  const pad = 1.5;\n\n  return (\n    <Card\n      variant=\"outlined\"\n      onClick={onClick}\n      dataTestId={dataTestId}\n      className={props.className}\n      aria-label={props[\"aria-label\"]}\n      aria-disabled={actionable ? undefined : true}\n      {...drag.itemProps}\n      // A PLAIN OBJECT, not a function. `Card` merges by spreading\n      // (`sx={{ ...defaults, ...sx }}`), and spreading a function yields\n      // nothing at all — the styles vanish silently, which is exactly how the\n      // first version of this shipped with no variants and no effects.\n      sx={{\n        // The same corner the row uses: a Grade and a Lista of the same records\n        // sit beside each other, and a tile that rounds harder than the row\n        // reads as a different component.\n        borderRadius: CARD_RADIUS,\n        // The shared half — variant, colour, selection, effects — identical to\n        // the one BaseListCard uses, so a Grade and a Lista of the same records\n        // are dressed by one set of rules.\n        ...cardSurfaceStyles(\n          {\n            ...props,\n            selectable,\n            shape: \"tile\",\n            // A card mid-drag is a ghost of itself; the drop target is what the\n            // eye should be on.\n            state: drag.dragging ? \"disabled\" : props.state,\n          },\n          theme,\n        ),\n        // …and the tile's own geometry on top.\n        ...cardSx({\n          aspectRatio, pad, scale,\n          interactive: onClick != null,\n          draggable: drag.draggable && drag.handleProps === undefined,\n        }),\n      }}\n    >\n      {/* Bottom-left, opposite the menu and clear of the checkbox — a grip in\n          the same corner as a control that toggles selection means every drag\n          starts with a near-miss on it. */}\n      {drag.draggable && (\n        <Box sx={{ position: \"absolute\", bottom: 4, left: 4, zIndex: 2 }}>\n          <DragHandle\n            handleProps={drag.handleProps}\n            gated={drag.handleProps !== undefined}\n            testId={slot(\"drag\")}\n          />\n        </Box>\n      )}\n      <CardOverlays\n        selected={selected}\n        onToggleSelect={selectable ? onToggleSelect ?? (() => {}) : undefined}\n        checkboxTestId={checkboxTestId}\n        menu={menu}\n      />\n      <CardContents\n        image={props.image}\n        imageFallback={props.imageFallback}\n        title={props.title}\n        subtitle={props.subtitle}\n        overlays={selectable || menu != null}\n        pad={pad}\n      >\n        {props.children}\n      </CardContents>\n    </Card>\n  );\n}\n"],"mappings":"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","names":["default"]}

package/dist/chunk-XSMMFCMQ.js

@@ -0,0 +1,183 @@
+import {
+  DEFAULT_QUICK_RANGES
+} from "./chunk-QKLSHNOH.js";
+import {
+  useDateRangePicker
+} from "./chunk-APT5L7V5.js";
+import {
+  DateRangeQuickList
+} from "./chunk-NSJVQ5YJ.js";
+import {
+  DateRangeFields
+} from "./chunk-IDO4EV7T.js";
+import {
+  toLocalDay
+} from "./chunk-FRAVVI4A.js";
+import {
+  Calendar
+} from "./chunk-UN5INW6K.js";
+
+// src/components/form/DateRangePicker/DateRangePicker.tsx
+import Box from "@mui/material/Box/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import useMediaQuery from "@mui/material/useMediaQuery/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CALENDAR_CLASS = "date-range-picker__calendar";
+var NARROW_QUERY = "(max-width:899.95px)";
+var ROOT_SX = {
+  display: "inline-flex",
+  flexDirection: "column",
+  gap: 2,
+  p: 2,
+  maxWidth: "100%",
+  // `Calendar` renders its own `Paper` with 24px of padding. Nested in this one
+  // that reads as a box inside a box, so the inner frame is flattened here
+  // through the className hook the component exposes for exactly this.
+  [`& .${CALENDAR_CLASS}`]: {
+    p: 0,
+    boxShadow: "none",
+    backgroundColor: "transparent",
+    backgroundImage: "none"
+  }
+};
+var BODY_SX = {
+  display: "flex",
+  // The quick column sits BESIDE the calendar on a wide screen. Narrow, it
+  // moves ABOVE it — `column-reverse`, so the DOM order stays calendar-then-
+  // list (the calendar is the primary control and should be reached first by a
+  // screen reader and by Tab) while the eye meets the quick ranges first, which
+  // is the order the phone mock asks for and the order a thumb wants: nine
+  // one-tap answers before a grid of thirty.
+  //
+  // A side column at 390px would squeeze the day grid to roughly half its width
+  // and make the numbers unreadable. Checked at 390px.
+  flexDirection: { xs: "column-reverse", md: "row" },
+  alignItems: { xs: "stretch", md: "flex-start" },
+  gap: 2,
+  maxWidth: "100%"
+};
+var QUICK_DIVIDER_SX = {
+  borderColor: "divider",
+  borderStyle: "solid",
+  borderWidth: 0,
+  borderLeftWidth: { xs: 0, md: "1px" },
+  borderBottomWidth: { xs: "1px", md: 0 },
+  pl: { xs: 0, md: 2 },
+  pb: { xs: 2, md: 0 },
+  alignSelf: "stretch"
+};
+var FIELDS_DIVIDER_SX = {
+  borderTop: "1px solid",
+  borderColor: "divider",
+  pt: 2
+};
+function useMonthCount(requested) {
+  const narrow = useMediaQuery(NARROW_QUERY);
+  return narrow ? 1 : requested;
+}
+function RangeCalendar({
+  calendarLabel,
+  picker,
+  value,
+  locale,
+  weekStartsOn,
+  months,
+  maxRangeDays
+}) {
+  return /* @__PURE__ */ jsx(
+    Calendar,
+    {
+      ariaLabel: calendarLabel,
+      className: CALENDAR_CLASS,
+      selectionMode: "range",
+      locale,
+      firstDayOfWeek: weekStartsOn,
+      numberOfMonths: months,
+      range: { start: toLocalDay(value.from), end: toLocalDay(value.to) },
+      onIntermediateRangeChange: picker.pickOnCalendar,
+      onRangeChange: picker.pickOnCalendar,
+      maxRangeLength: maxRangeDays
+    },
+    picker.viewNonce
+  );
+}
+function QuickColumn({
+  picker,
+  maxRangeDays,
+  dataTestId
+}) {
+  if (picker.options.length === 0) return null;
+  return /* @__PURE__ */ jsx(Box, { sx: QUICK_DIVIDER_SX, children: /* @__PURE__ */ jsx(
+    DateRangeQuickList,
+    {
+      options: picker.options,
+      activeId: picker.activeId,
+      onPick: picker.pickQuick,
+      reasonFor: (option) => picker.copy.overMax({ maxRangeDays: maxRangeDays ?? option.days, days: option.days }),
+      label: picker.copy.quickRanges,
+      dataTestId
+    }
+  ) });
+}
+function DateRangePicker({
+  value,
+  onChange,
+  timeZone,
+  now,
+  maxRangeDays,
+  weekStartsOn = 0,
+  quickRanges = DEFAULT_QUICK_RANGES,
+  locale = "en-US",
+  numberOfMonths,
+  messages,
+  dataTestId = "date-range-picker",
+  className
+}) {
+  const picker = useDateRangePicker({
+    value,
+    onChange,
+    timeZone,
+    now,
+    maxRangeDays,
+    weekStartsOn,
+    quickRanges,
+    messages
+  });
+  const months = useMonthCount(numberOfMonths);
+  return /* @__PURE__ */ jsxs(Paper, { className, "data-testid": dataTestId, sx: ROOT_SX, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: BODY_SX, children: [
+      /* @__PURE__ */ jsx(
+        RangeCalendar,
+        {
+          calendarLabel: picker.copy.calendarLabel,
+          picker,
+          value,
+          locale,
+          weekStartsOn,
+          months,
+          maxRangeDays
+        }
+      ),
+      /* @__PURE__ */ jsx(QuickColumn, { picker, maxRangeDays, dataTestId })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { sx: FIELDS_DIVIDER_SX, children: /* @__PURE__ */ jsx(
+      DateRangeFields,
+      {
+        value,
+        status: picker.status,
+        messages: picker.copy,
+        maxRangeDays,
+        onEdit: picker.editBound,
+        statusId: picker.statusId,
+        dataTestId
+      }
+    ) })
+  ] });
+}
+var DateRangePicker_default = DateRangePicker;
+
+export {
+  DateRangePicker,
+  DateRangePicker_default
+};
+//# sourceMappingURL=chunk-XSMMFCMQ.js.map

package/dist/chunk-XWWFBH2G.js

@@ -0,0 +1,148 @@
+import {
+  highlightSegments
+} from "./chunk-PN4HVM43.js";
+import {
+  CheckGlyph,
+  DisclosureGlyph
+} from "./chunk-DMNZD3Q7.js";
+import {
+  METRICS,
+  checkboxBarSx,
+  checkboxSx,
+  chevronButtonSx,
+  markSx,
+  radioSx,
+  rowIndent,
+  rowMetaSx,
+  rowNameSx,
+  rowSx,
+  sectionHeadSx
+} from "./chunk-BXAL7OIS.js";
+
+// src/components/form/CategorySelect/CategoryRows.tsx
+import Box from "@mui/material/Box/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function HighlightedName({
+  text,
+  query
+}) {
+  const segments = highlightSegments(text, query);
+  return /* @__PURE__ */ jsx(Fragment, { children: segments.map(
+    (segment, index) => segment.match ? /* @__PURE__ */ jsx(Box, { component: "mark", sx: markSx, children: segment.text }, `${segment.text}-${index}`) : /* @__PURE__ */ jsx("span", { children: segment.text }, `${segment.text}-${index}`)
+  ) });
+}
+function CategoryCheckbox({ state }) {
+  return /* @__PURE__ */ jsxs(Box, { sx: (theme) => checkboxSx(theme, state), "aria-hidden": "true", children: [
+    state === "on" && /* @__PURE__ */ jsx(CheckGlyph, {}),
+    state === "partial" && /* @__PURE__ */ jsx(Box, { sx: checkboxBarSx })
+  ] });
+}
+function CategoryRadio({ on }) {
+  return /* @__PURE__ */ jsx(Box, { sx: (theme) => radioSx(theme, on), "aria-hidden": "true" });
+}
+function rowMeta(selectedCount, showCounts, count) {
+  if (selectedCount > 0) return { text: String(selectedCount), selected: true };
+  if (showCounts && count !== void 0) return { text: String(count), selected: false };
+  return null;
+}
+function RowDisclosure({
+  option,
+  expanded,
+  branch,
+  onToggleExpanded,
+  dataTestId,
+  copy
+}) {
+  if (!branch) {
+    return /* @__PURE__ */ jsx(Box, { sx: { width: METRICS.chevronButton, flex: "0 0 auto" } });
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "button",
+      type: "button",
+      tabIndex: -1,
+      "aria-label": expanded ? copy.collapseCategory(option.name) : copy.expandCategory(option.name),
+      "data-testid": `${dataTestId}-expand-${option.id}`,
+      sx: (theme) => chevronButtonSx(theme, expanded),
+      onClick: (event) => {
+        event.stopPropagation();
+        onToggleExpanded();
+      },
+      children: /* @__PURE__ */ jsx(DisclosureGlyph, {})
+    }
+  );
+}
+function RowControl({
+  checkState,
+  single
+}) {
+  if (!checkState) return /* @__PURE__ */ jsx(Box, { sx: { width: METRICS.boxSize, flex: "0 0 auto" } });
+  if (single) return /* @__PURE__ */ jsx(CategoryRadio, { on: checkState === "on" });
+  return /* @__PURE__ */ jsx(CategoryCheckbox, { state: checkState });
+}
+function rowTestId(dataTestId, depth, id) {
+  return depth === 0 ? `${dataTestId}-category-${id}` : `${dataTestId}-option-${id}`;
+}
+function CategoryTreeRow({
+  option,
+  query,
+  depth,
+  branch,
+  expanded,
+  active,
+  sheet,
+  checkState,
+  single,
+  selectedCount,
+  showCounts,
+  onToggleExpanded,
+  onActivate,
+  dataTestId,
+  copy
+}) {
+  const meta = rowMeta(selectedCount, showCounts, option.count);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "div",
+      role: checkState ? "option" : "button",
+      "aria-selected": checkState ? checkState === "on" : void 0,
+      "aria-expanded": branch ? expanded : void 0,
+      "data-testid": rowTestId(dataTestId, depth, option.id),
+      sx: (theme) => ({ ...rowSx(theme, active, sheet), ...rowIndent(depth) }),
+      onClick: onActivate,
+      children: [
+        /* @__PURE__ */ jsx(
+          RowDisclosure,
+          {
+            option,
+            expanded,
+            branch,
+            onToggleExpanded,
+            dataTestId,
+            copy
+          }
+        ),
+        /* @__PURE__ */ jsx(RowControl, { checkState, single }),
+        /* @__PURE__ */ jsx(Box, { component: "span", sx: (theme) => rowNameSx(theme, depth === 0), children: /* @__PURE__ */ jsx(HighlightedName, { text: option.name, query }) }),
+        meta && /* @__PURE__ */ jsx(Box, { component: "span", sx: (theme) => rowMetaSx(theme, meta.selected), children: meta.text })
+      ]
+    }
+  );
+}
+function CategorySectionHeading({
+  option,
+  query
+}) {
+  return /* @__PURE__ */ jsx(Box, { sx: sectionHeadSx, children: /* @__PURE__ */ jsx(HighlightedName, { text: option.name, query }) });
+}
+
+export {
+  HighlightedName,
+  CategoryCheckbox,
+  CategoryRadio,
+  CategoryTreeRow,
+  CategorySectionHeading
+};
+//# sourceMappingURL=chunk-XWWFBH2G.js.map

package/dist/chunk-XZBCPL4N.js

@@ -0,0 +1,266 @@
+import {
+  breadcrumbLinkStyles
+} from "./chunk-QHUTSAFG.js";
+import {
+  sheen,
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/Breadcrumbs/BreadcrumbEntry.tsx
+import Home from "@mui/icons-material/Home";
+import MoreHoriz from "@mui/icons-material/MoreHoriz";
+import Box from "@mui/material/Box/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import Link from "@mui/material/Link/index.js";
+import Tooltip from "@mui/material/Tooltip/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var BreadcrumbLink = styled(Link, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "active" && prop !== "visualStyle"
+})(
+  ({ theme, size, active, visualStyle }) => ({
+    ...breadcrumbLinkStyles({ theme, size, active, visualStyle })
+  })
+);
+var BreadcrumbText = styled(Typography, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "visualStyle"
+})(({ theme, size, visualStyle }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  fontSize: rem(theme, size === "sm" ? 14 : size === "lg" ? 18 : 16),
+  fontWeight: 600,
+  color: theme.palette.primary.main,
+  padding: theme.spacing(0.5, 0.75),
+  borderRadius: theme.spacing(0.75),
+  position: "relative",
+  ...visualStyle === "glass" && {
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,
+    backdropFilter: "blur(4px)",
+    border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`
+  },
+  "& .breadcrumb-icon": {
+    color: theme.palette.primary.main
+  },
+  // Mobile responsiveness
+  [theme.breakpoints.down("sm")]: {
+    fontSize: rem(theme, size === "lg" ? 16 : size === "sm" ? 12 : 14),
+    padding: theme.spacing(0.375, 0.5)
+  }
+}));
+var CollapsedItemsPopover = ({ open, items, dataTestId, onSelect }) => /* @__PURE__ */ jsx(Fade, { in: open, children: /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      background: (theme) => theme.palette.mode === "dark" ? alpha(uiInk(theme).glassSlate, 0.95) : sheen(theme, 0.95),
+      backdropFilter: "blur(10px)",
+      borderRadius: 1,
+      boxShadow: 3,
+      p: 1,
+      minWidth: 150
+    },
+    children: items.map((item, index) => /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "a",
+        href: item.href || "#",
+        onClick: (e) => {
+          onSelect();
+          item.onClick?.(e);
+        },
+        sx: {
+          display: "block",
+          px: 2,
+          py: 1,
+          color: "text.secondary",
+          textDecoration: "none",
+          borderRadius: 0.5,
+          transition: "all 0.2s",
+          "&:hover": {
+            backgroundColor: "action.hover",
+            color: "primary.main"
+          }
+        },
+        "data-testid": dataTestId ? `${dataTestId}-collapsed-item-${index}` : `breadcrumbs-collapsed-item-${index}`,
+        children: item.label
+      },
+      index
+    ))
+  }
+) });
+var CollapsedMenu = ({
+  items,
+  size,
+  visualStyle,
+  copy,
+  dataTestId
+}) => {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: copy.showMore, arrow: true, children: /* @__PURE__ */ jsx(
+      BreadcrumbLink,
+      {
+        onClick: handleClick,
+        size,
+        visualStyle,
+        sx: { cursor: "pointer" },
+        "data-testid": dataTestId ? `${dataTestId}-collapsed-menu` : "breadcrumbs-collapsed-menu",
+        children: /* @__PURE__ */ jsx(MoreHoriz, { className: "breadcrumb-icon" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          position: "absolute",
+          top: "100%",
+          left: 0,
+          mt: 1,
+          display: open ? "block" : "none",
+          zIndex: 1e3
+        },
+        "data-testid": dataTestId ? `${dataTestId}-collapsed-menu-items` : "breadcrumbs-collapsed-menu-items",
+        children: /* @__PURE__ */ jsx(
+          CollapsedItemsPopover,
+          {
+            open,
+            items,
+            size,
+            visualStyle,
+            dataTestId,
+            onSelect: handleClose
+          }
+        )
+      }
+    )
+  ] });
+};
+var crumbIcon = ({
+  item,
+  isFirst,
+  showHomeIcon,
+  iconSize
+}) => {
+  if (isFirst && showHomeIcon && !item.icon) {
+    return /* @__PURE__ */ jsx(Home, { className: "breadcrumb-icon", fontSize: iconSize });
+  }
+  if (!item.icon) return null;
+  return /* @__PURE__ */ jsx(Box, { component: "span", className: "breadcrumb-icon", sx: { display: "flex", alignItems: "center" }, children: item.icon });
+};
+var EllipsisCrumb = ({
+  label,
+  copy,
+  dataTestId
+}) => /* @__PURE__ */ jsx(Tooltip, { title: copy.moreItems, arrow: true, children: /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      px: 1,
+      color: "text.disabled",
+      cursor: "default",
+      userSelect: "none"
+    },
+    "data-testid": dataTestId ? `${dataTestId}-ellipsis` : "breadcrumbs-ellipsis",
+    children: label
+  }
+) });
+var makeTestId = (dataTestId) => (suffix, own) => own ?? (dataTestId ? `${dataTestId}-${suffix}` : `breadcrumbs-${suffix}`);
+var ClickableCrumb = ({ item, index, icon, size, variant, isActive, testId }) => /* @__PURE__ */ jsx(Tooltip, { title: item.tooltip || item.label, arrow: true, disableHoverListener: !item.tooltip, children: /* @__PURE__ */ jsxs(
+  BreadcrumbLink,
+  {
+    href: item.href || "#",
+    onClick: item.onClick,
+    size,
+    visualStyle: variant,
+    active: isActive,
+    underline: "none",
+    "aria-label": item.ariaLabel || item.label,
+    "data-testid": testId(`link-${index}`, item.dataTestId),
+    children: [
+      icon,
+      /* @__PURE__ */ jsx("span", { children: item.label })
+    ]
+  }
+) });
+var BreadcrumbEntry = ({
+  item,
+  index,
+  itemCount,
+  collapsedItems,
+  collapseBehavior,
+  separator,
+  showHomeIcon,
+  iconSize,
+  size,
+  variant,
+  copy,
+  dataTestId
+}) => {
+  const testId = makeTestId(dataTestId);
+  const isLast = index === itemCount - 1;
+  const isActive = item.active || isLast && !item.isEllipsis;
+  const isCollapsePoint = index === 1 && collapsedItems.length > 0 && collapseBehavior === "menu";
+  if (isCollapsePoint) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        CollapsedMenu,
+        {
+          copy,
+          items: collapsedItems,
+          size,
+          visualStyle: variant,
+          dataTestId
+        }
+      ),
+      separator
+    ] });
+  }
+  if (item.isEllipsis) {
+    return /* @__PURE__ */ jsx(EllipsisCrumb, { copy, label: item.label, dataTestId });
+  }
+  const icon = crumbIcon({ item, isFirst: index === 0, showHomeIcon, iconSize });
+  if (isActive) {
+    return /* @__PURE__ */ jsxs(
+      BreadcrumbText,
+      {
+        size,
+        visualStyle: variant,
+        "aria-current": "page",
+        "data-testid": testId(`item-${index}`, item.dataTestId),
+        children: [
+          icon,
+          /* @__PURE__ */ jsx("span", { children: item.label })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ClickableCrumb,
+    {
+      item,
+      index,
+      icon,
+      size,
+      variant,
+      isActive,
+      testId
+    }
+  );
+};
+
+export {
+  BreadcrumbEntry
+};
+//# sourceMappingURL=chunk-XZBCPL4N.js.map

package/dist/chunk-XZBCPL4N.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Breadcrumbs/BreadcrumbEntry.tsx"],"sourcesContent":["import Home from '@mui/icons-material/Home';\nimport MoreHoriz from '@mui/icons-material/MoreHoriz';\nimport Box from '@mui/material/Box/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport Link from '@mui/material/Link/index.js';\nimport Tooltip from '@mui/material/Tooltip/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { breadcrumbLinkStyles } from './Breadcrumbs.styles';\nimport type { BreadcrumbItem } from './Breadcrumbs.types';\nimport type { BreadcrumbCopy } from '../../../copy';\nimport { sheen, uiInk } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\nconst BreadcrumbLink = styled(Link, {\n  shouldForwardProp: (prop) => prop !== 'size' && prop !== 'active' && prop !== 'visualStyle' })<{ size?: string; active?: boolean; visualStyle?: string }>(\n  ({ theme, size, active, visualStyle }) => ({\n    ...breadcrumbLinkStyles({ theme, size, active, visualStyle }) }),\n);\n\nconst BreadcrumbText = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'size' && prop !== 'visualStyle' })<{ size?: string; visualStyle?: string }>(({ theme, size, visualStyle }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(0.5),\n  fontSize: rem(theme, size === 'sm' ? 14 : size === 'lg' ? 18 : 16),\n  fontWeight: 600,\n  color: theme.palette.primary.main,\n  padding: theme.spacing(0.5, 0.75),\n  borderRadius: theme.spacing(0.75),\n  position: 'relative',\n\n  ...(visualStyle === 'glass' && {\n    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,\n    backdropFilter: 'blur(4px)',\n    border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}` }),\n\n  '& .breadcrumb-icon': {\n    color: theme.palette.primary.main },\n\n  // Mobile responsiveness\n  [theme.breakpoints.down('sm')]: {\n    fontSize: rem(theme, size === 'lg' ? 16 : size === 'sm' ? 12 : 14),\n    padding: theme.spacing(0.375, 0.5) } }));\n\n// Animated separator wrapper\n\n// Mobile collapsed menu component\n// The list that drops down from the \"...\" trigger.\nconst CollapsedItemsPopover: React.FC<{\n  open: boolean;\n  items: BreadcrumbItem[];\n  size: string;\n  visualStyle?: string;\n  dataTestId?: string;\n  onSelect: () => void;\n}> = ({ open, items, dataTestId, onSelect }) => (\n<Fade in={open}>\n    <Box\n      sx={{\n        background: (theme) =>\n          theme.palette.mode === 'dark'\n            ? alpha(uiInk(theme).glassSlate, 0.95)\n            : sheen(theme, 0.95),\n        backdropFilter: 'blur(10px)',\n        borderRadius: 1,\n        boxShadow: 3,\n        p: 1,\n        minWidth: 150 }}\n    >\n      {items.map((item, index) => (\n        <Box\n          key={index}\n          component=\"a\"\n          href={item.href || '#'}\n          onClick={(e) => {\n            onSelect();\n            item.onClick?.(e);\n          }}\n          sx={{\n            display: 'block',\n            px: 2,\n            py: 1,\n            color: 'text.secondary',\n            textDecoration: 'none',\n            borderRadius: 0.5,\n            transition: 'all 0.2s',\n            '&:hover': {\n              backgroundColor: 'action.hover',\n              color: 'primary.main' } }}\n          data-testid={dataTestId ? `${dataTestId}-collapsed-item-${index}` : `breadcrumbs-collapsed-item-${index}`}\n        >\n          {item.label}\n        </Box>\n      ))}\n    </Box>\n  </Fade>\n);\n\nconst CollapsedMenu = ({\n  items,\n  size,\n  visualStyle,\n  copy,\n  dataTestId }: {\n  items: BreadcrumbItem[];\n  size: string;\n  visualStyle?: string;\n  copy: BreadcrumbCopy;\n  dataTestId?: string;\n}) => {\n  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);\n  const open = Boolean(anchorEl);\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleClose = () => {\n    setAnchorEl(null);\n  };\n\n  return (\n    <>\n      <Tooltip title={copy.showMore} arrow>\n        <BreadcrumbLink\n          onClick={handleClick}\n          size={size}\n          visualStyle={visualStyle}\n          sx={{ cursor: 'pointer' }}\n          data-testid={dataTestId ? `${dataTestId}-collapsed-menu` : 'breadcrumbs-collapsed-menu'}\n        >\n          <MoreHoriz className=\"breadcrumb-icon\" />\n        </BreadcrumbLink>\n      </Tooltip>\n      <Box\n        sx={{\n          position: 'absolute',\n          top: '100%',\n          left: 0,\n          mt: 1,\n          display: open ? 'block' : 'none',\n          zIndex: 1000 }}\n        data-testid={dataTestId ? `${dataTestId}-collapsed-menu-items` : 'breadcrumbs-collapsed-menu-items'}\n      >\n        <CollapsedItemsPopover\n          open={open}\n          items={items}\n          size={size}\n          visualStyle={visualStyle}\n          dataTestId={dataTestId}\n          onSelect={handleClose}\n        />\n      </Box>\n    </>\n  );\n};\n\n// The leading crumb gets a house unless it brings its own icon; everything else\n// shows only what it supplies.\nconst crumbIcon = ({\n  item,\n  isFirst,\n  showHomeIcon,\n  iconSize }: {\n  item: BreadcrumbItem;\n  isFirst: boolean;\n  showHomeIcon: boolean;\n  iconSize: 'small' | 'medium';\n}) => {\n  if (isFirst && showHomeIcon && !item.icon) {\n    return <Home className=\"breadcrumb-icon\" fontSize={iconSize} />;\n  }\n\n  if (!item.icon) return null;\n\n  return (\n    <Box component=\"span\" className=\"breadcrumb-icon\" sx={{ display: 'flex', alignItems: 'center' }}>\n      {item.icon}\n    </Box>\n  );\n};\n\nconst EllipsisCrumb: React.FC<{ label: string; copy: BreadcrumbCopy; dataTestId?: string }> = ({\n  label,\n  copy,\n  dataTestId }) => (\n  <Tooltip title={copy.moreItems} arrow>\n            <Box\n              sx={{\n                px: 1,\n                color: 'text.disabled',\n                cursor: 'default',\n                userSelect: 'none' }}\n              data-testid={dataTestId ? `${dataTestId}-ellipsis` : 'breadcrumbs-ellipsis'}\n            >\n              {label}\n            </Box>\n          </Tooltip>\n);\n\n// The same conditional test id was written at each crumb variant. An item that\n// names its OWN id wins: see `BreadcrumbItem.dataTestId`.\nconst makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string, own?: string): string =>\n    own ?? (dataTestId ? `${dataTestId}-${suffix}` : `breadcrumbs-${suffix}`);\n\nconst ClickableCrumb: React.FC<{\n  item: BreadcrumbItem;\n  index: number;\n  icon: React.ReactNode;\n  size: string;\n  variant: string;\n  isActive: boolean;\n  testId: (suffix: string, own?: string) => string;\n}> = ({ item, index, icon, size, variant, isActive, testId }) => (\n  <Tooltip title={item.tooltip || item.label} arrow disableHoverListener={!item.tooltip}>\n    <BreadcrumbLink\n      href={item.href || '#'}\n      onClick={item.onClick}\n      size={size}\n      visualStyle={variant}\n      active={isActive}\n      underline=\"none\"\n      aria-label={item.ariaLabel || item.label}\n      data-testid={testId(`link-${index}`, item.dataTestId)}\n    >\n      {icon}\n      <span>{item.label}</span>\n    </BreadcrumbLink>\n  </Tooltip>\n);\n\n// One crumb: the collapsed-menu stand-in, the ellipsis, the active tail item or\n// a plain link.\nexport const BreadcrumbEntry: React.FC<{\n  item: BreadcrumbItem & { isEllipsis?: boolean };\n  index: number;\n  itemCount: number;\n  collapsedItems: BreadcrumbItem[];\n  collapseBehavior: string;\n  separator: React.ReactNode;\n  showHomeIcon: boolean;\n  iconSize: 'small' | 'medium';\n  size: string;\n  variant: string;\n  copy: BreadcrumbCopy;\n  dataTestId?: string;\n}> = ({\n  item,\n  index,\n  itemCount,\n  collapsedItems,\n  collapseBehavior,\n  separator,\n  showHomeIcon,\n  iconSize,\n  size,\n  variant,\n  copy,\n  dataTestId }) => {\n  const testId = makeTestId(dataTestId);\n  const isLast = index === itemCount - 1;\n  // The tail crumb is the current page unless it is the ellipsis placeholder.\n  const isActive = item.active || (isLast && !item.isEllipsis);\n\n  const isCollapsePoint =\n    index === 1 && collapsedItems.length > 0 && collapseBehavior === 'menu';\n\n  if (isCollapsePoint) {\n    return (\n      <>\n        <CollapsedMenu\n          copy={copy}\n          items={collapsedItems}\n          size={size}\n          visualStyle={variant}\n          dataTestId={dataTestId}\n        />\n        {separator}\n      </>\n    );\n  }\n\n  if (item.isEllipsis) {\n    return <EllipsisCrumb copy={copy} label={item.label} dataTestId={dataTestId} />;\n  }\n\n  const icon = crumbIcon({ item, isFirst: index === 0, showHomeIcon, iconSize });\n\n  if (isActive) {\n    return (\n      <BreadcrumbText\n        size={size}\n        visualStyle={variant}\n        aria-current=\"page\"\n        data-testid={testId(`item-${index}`, item.dataTestId)}\n      >\n        {icon}\n        <span>{item.label}</span>\n      </BreadcrumbText>\n    );\n  }\n\n  return (\n    <ClickableCrumb\n      item={item}\n      index={index}\n      icon={icon}\n      size={size}\n      variant={variant}\n      isActive={isActive}\n      testId={testId}\n    />\n  );\n};\n"],"mappings":"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","names":[]}