@12-apps/ui 6.33.1 → 6.34.0

package/dist/chunk-NJHJZFX5.js

@@ -0,0 +1,266 @@
+import {
+  CARD_RADIUS,
+  cardSurfaceStyles,
+  isActionable,
+  isSelectable,
+  slotTestIds
+} from "./chunk-NXX3ZQKO.js";
+import {
+  DragHandle,
+  useDragItem
+} from "./chunk-JCJGJX7V.js";
+import {
+  CARD_ASPECT_RATIOS
+} from "./chunk-LHHAYZ55.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Checkbox
+} from "./chunk-VNB7PFCP.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Card
+} from "./chunk-N6CSXHFJ.js";
+import {
+  Text
+} from "./chunk-H57ZS6W2.js";
+
+// src/components/data-display/DataViews/base-card.tsx
+import { useTheme } from "@mui/material/styles/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function cardSx(opts) {
+  const { aspectRatio, pad, scale, interactive, draggable } = opts;
+  return {
+    position: "relative",
+    zoom: scale,
+    aspectRatio: String(CARD_ASPECT_RATIOS[aspectRatio]),
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    p: pad,
+    cursor: draggable ? "grab" : interactive ? "pointer" : void 0,
+    ...draggable ? { touchAction: "none", "&:active": { cursor: "grabbing" } } : {}
+  };
+}
+var OVERLAY_BAND_PX = 42;
+function contentGaps(opts) {
+  const { hasMedia, hasBody, overlays, pad } = opts;
+  const gap = pad * 0.5;
+  const clear = !hasMedia && overlays ? Math.max(0, OVERLAY_BAND_PX / 8 - pad) : 0;
+  return { body: hasMedia ? gap : clear, caption: hasMedia || hasBody ? gap : clear };
+}
+function CardOverlays({
+  selected,
+  onToggleSelect,
+  checkboxTestId,
+  menu
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    onToggleSelect && /* @__PURE__ */ jsx(default2, { sx: { position: "absolute", top: 4, left: 4, zIndex: 2 }, children: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: selected,
+        onChange: () => onToggleSelect(),
+        onClick: (event) => event.stopPropagation(),
+        size: "small",
+        "data-testid": checkboxTestId,
+        "aria-label": copy.selection.selectRow
+      }
+    ) }),
+    menu && /* @__PURE__ */ jsx(
+      default2,
+      {
+        sx: { position: "absolute", top: 4, right: 4, zIndex: 2 },
+        onClick: (event) => event.stopPropagation(),
+        children: menu
+      }
+    )
+  ] });
+}
+function CardMedia({ image, imageFallback }) {
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        flex: 1,
+        minHeight: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+        borderRadius: 1,
+        "& img": { width: "100%", height: "100%", objectFit: "cover" }
+      },
+      children: image ?? imageFallback
+    }
+  );
+}
+function CardBodyContent({
+  children,
+  fill,
+  topGap
+}) {
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        flex: fill ? 1 : "none",
+        minHeight: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 0.75,
+        mt: topGap,
+        overflow: "hidden"
+      },
+      children
+    }
+  );
+}
+function CardCaption({
+  title,
+  subtitle,
+  topGap
+}) {
+  return /* @__PURE__ */ jsxs(default2, { sx: { mt: topGap, minWidth: 0 }, children: [
+    title != null && /* @__PURE__ */ jsx(
+      Text,
+      {
+        variant: "heading",
+        size: "sm",
+        weight: "bold",
+        as: "p",
+        style: {
+          lineHeight: 1.15,
+          fontSize: "0.95rem",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        },
+        children: title
+      }
+    ),
+    subtitle != null && /* @__PURE__ */ jsx(Text, { variant: "caption", size: "xs", color: "secondary", as: "p", children: subtitle })
+  ] });
+}
+function CardContents({
+  children,
+  image,
+  imageFallback,
+  title,
+  subtitle,
+  overlays,
+  pad
+}) {
+  const hasMedia = image != null || imageFallback != null;
+  const hasBody = children != null;
+  const hasCaption = title != null || subtitle != null;
+  const top = contentGaps({ hasMedia, hasBody, overlays, pad });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasMedia && /* @__PURE__ */ jsx(CardMedia, { image, imageFallback }),
+    hasBody && /* @__PURE__ */ jsx(CardBodyContent, { fill: !hasMedia, topGap: top.body, children }),
+    hasCaption && /* @__PURE__ */ jsx(CardCaption, { title, subtitle, topGap: top.caption })
+  ] });
+}
+function useCardShell(props) {
+  const actionable = isActionable(props.state);
+  return {
+    selectable: isSelectable(props),
+    actionable,
+    theme: useTheme(),
+    slot: slotTestIds(props.testId),
+    scale: props.scale ?? 1,
+    // The card's own veto over the container's decision — see `CardSurfaceProps`.
+    drag: useDragItem(props.draggable === false || !actionable ? void 0 : props.dragId)
+  };
+}
+function BaseCard(props) {
+  const { aspectRatio = "4:3", selected = false } = props;
+  const { menu, onToggleSelect, onClick } = props;
+  const { selectable, actionable, theme, slot, scale, drag } = useCardShell(props);
+  const dataTestId = props.testId;
+  const checkboxTestId = slot("checkbox");
+  const pad = 1.5;
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      variant: "outlined",
+      onClick,
+      dataTestId,
+      className: props.className,
+      "aria-label": props["aria-label"],
+      "aria-disabled": actionable ? void 0 : true,
+      ...drag.itemProps,
+      sx: {
+        // The same corner the row uses: a Grade and a Lista of the same records
+        // sit beside each other, and a tile that rounds harder than the row
+        // reads as a different component.
+        borderRadius: CARD_RADIUS,
+        // The shared half — variant, colour, selection, effects — identical to
+        // the one BaseListCard uses, so a Grade and a Lista of the same records
+        // are dressed by one set of rules.
+        ...cardSurfaceStyles(
+          {
+            ...props,
+            selectable,
+            shape: "tile",
+            // A card mid-drag is a ghost of itself; the drop target is what the
+            // eye should be on.
+            state: drag.dragging ? "disabled" : props.state
+          },
+          theme
+        ),
+        // …and the tile's own geometry on top.
+        ...cardSx({
+          aspectRatio,
+          pad,
+          scale,
+          interactive: onClick != null,
+          draggable: drag.draggable && drag.handleProps === void 0
+        })
+      },
+      children: [
+        drag.draggable && /* @__PURE__ */ jsx(default2, { sx: { position: "absolute", bottom: 4, left: 4, zIndex: 2 }, children: /* @__PURE__ */ jsx(
+          DragHandle,
+          {
+            handleProps: drag.handleProps,
+            gated: drag.handleProps !== void 0,
+            testId: slot("drag")
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          CardOverlays,
+          {
+            selected,
+            onToggleSelect: selectable ? onToggleSelect ?? (() => {
+            }) : void 0,
+            checkboxTestId,
+            menu
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CardContents,
+          {
+            image: props.image,
+            imageFallback: props.imageFallback,
+            title: props.title,
+            subtitle: props.subtitle,
+            overlays: selectable || menu != null,
+            pad,
+            children: props.children
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  BaseCard
+};
+//# sourceMappingURL=chunk-NJHJZFX5.js.map

package/dist/chunk-NNESQ7QG.js

@@ -0,0 +1,95 @@
+import {
+  sizeStyles
+} from "./chunk-GL5CYMGK.js";
+
+// src/components/form/Menubar/Menubar.item.tsx
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Chip from "@mui/material/Chip/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import ListItemIcon from "@mui/material/ListItemIcon/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import Menu from "@mui/material/Menu/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DropdownItem = ({
+  child,
+  onActivate
+}) => child.divider ? /* @__PURE__ */ jsx(Divider, {}) : /* @__PURE__ */ jsxs(MenuItem, { onClick: () => onActivate(child), disabled: child.disabled, children: [
+  child.icon && /* @__PURE__ */ jsx(ListItemIcon, { children: child.icon }),
+  /* @__PURE__ */ jsx(ListItemText, { children: child.label }),
+  child.shortcut && /* @__PURE__ */ jsx(
+    Chip,
+    {
+      label: child.shortcut,
+      size: "small",
+      variant: "outlined",
+      sx: { ml: 2, height: 20, fontSize: "0.7rem" }
+    }
+  )
+] });
+var MenubarItemView = ({
+  item,
+  size,
+  disabled,
+  isOpen,
+  anchorEl,
+  onOpen,
+  onActivate,
+  onClose,
+  onFocus,
+  onBlur
+}) => {
+  const theme = useTheme();
+  const hasChildren = Boolean(item.children && item.children.length > 0);
+  const activate = (target) => {
+    if (hasChildren) {
+      onOpen(item.id, target);
+    } else {
+      onActivate(item);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        "data-testid": `menubar-button-${item.id}`,
+        onClick: (e) => activate(e.currentTarget),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            activate(e.currentTarget);
+          }
+        },
+        onMouseDown: (e) => e.preventDefault(),
+        onFocus,
+        onBlur,
+        disabled: item.disabled || disabled,
+        startIcon: item.icon,
+        endIcon: hasChildren ? /* @__PURE__ */ jsx(KeyboardArrowDownIcon, {}) : null,
+        "aria-haspopup": hasChildren ? "menu" : void 0,
+        "aria-expanded": hasChildren ? isOpen : void 0,
+        sx: { color: "inherit", textTransform: "none", ...sizeStyles(theme, size) },
+        children: item.label
+      }
+    ),
+    hasChildren && /* @__PURE__ */ jsx(
+      Menu,
+      {
+        anchorEl,
+        open: isOpen,
+        onClose,
+        autoFocus: true,
+        PaperProps: { sx: { minWidth: 200, mt: 1 } },
+        children: item.children?.map((child) => /* @__PURE__ */ jsx(DropdownItem, { child, onActivate }, child.id))
+      }
+    )
+  ] });
+};
+
+export {
+  MenubarItemView
+};
+//# sourceMappingURL=chunk-NNESQ7QG.js.map

package/dist/chunk-NXX3ZQKO.js

@@ -0,0 +1,149 @@
+import {
+  fadeInScaleAnimation
+} from "./chunk-H2YBVBPW.js";
+import {
+  shadowInk
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/data-display/DataViews/card-surface.ts
+import { alpha, keyframes } from "@mui/material/styles/index.js";
+var pulseRing = keyframes`
+  0% { transform: scale(1); opacity: 0.9; }
+  70% { transform: scale(1.04); opacity: 0; }
+  100% { transform: scale(1.04); opacity: 0; }
+`;
+var CARD_RADIUS = "3px";
+function slotTestIds(testId) {
+  return (slot) => testId ? `${testId}-${slot}` : void 0;
+}
+function isSelectable(props) {
+  return props.selectable ?? props.onToggleSelect != null;
+}
+function isActionable(state) {
+  return state !== "disabled" && state !== "cancelled";
+}
+function variantSx(variant, theme) {
+  if (variant === "ghost") {
+    return {
+      border: 0,
+      backgroundColor: "action.hover",
+      "&:hover": { backgroundColor: "action.selected" }
+    };
+  }
+  if (variant === "text") {
+    return { border: 0, backgroundColor: "transparent", boxShadow: "none" };
+  }
+  if (variant === "glass") {
+    return {
+      backgroundColor: alpha(theme.palette.background.paper, 0.55),
+      backdropFilter: "blur(8px)",
+      // `divider` as-is. NOT `alpha(divider, …)`: MUI's `alpha` REPLACES the
+      // channel rather than scaling it, and `divider` is already a 12% black —
+      // so asking for 80% of it produced an 80% black slab of a border.
+      borderColor: theme.palette.divider,
+      boxShadow: `0 1px 3px ${shadowInk(theme, 0.1)}`
+    };
+  }
+  return {};
+}
+var MOTION_OK = "@media (prefers-reduced-motion: no-preference)";
+function accentBar(main) {
+  return {
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      insetInlineStart: 0,
+      insetBlock: 0,
+      width: 3,
+      borderStartStartRadius: "inherit",
+      borderEndStartRadius: "inherit",
+      backgroundColor: main,
+      pointerEvents: "none"
+    }
+  };
+}
+function liftSx(main) {
+  return {
+    boxShadow: [
+      `0 0 0 1px ${alpha(main, 0.45)}`,
+      `0 1px 2px ${alpha(main, 0.12)}`,
+      `0 8px 20px -6px ${alpha(main, 0.3)}`
+    ].join(", ")
+  };
+}
+function pulseSx(main) {
+  return {
+    [MOTION_OK]: {
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        inset: 0,
+        borderRadius: "inherit",
+        border: `2px solid ${main}`,
+        animation: `${pulseRing} 1.6s ease-out 6`,
+        pointerEvents: "none"
+      }
+    }
+  };
+}
+function emphasisSx(emphasis, main, shape) {
+  if (emphasis === "attention") {
+    return {
+      ...accentBar(main),
+      ...shape === "tile" ? liftSx(main) : {},
+      ...pulseSx(main)
+    };
+  }
+  if (emphasis === "new") {
+    return {
+      ...accentBar(main),
+      [MOTION_OK]: { animation: `${fadeInScaleAnimation} 240ms ease-out` }
+    };
+  }
+  return {};
+}
+function stateSx(state) {
+  if (state === "cancelled") {
+    return {
+      opacity: 0.65,
+      // The META CLUSTER is struck too. It was left out, so a voided row kept a
+      // crisp `05/08/2026, 13:45` and `PIX` between a struck title and a struck
+      // total — the middle of the row reading as live data on a record the two
+      // ends call void. Both lines of each pair go, as both lines of the caption
+      // already do: on a cancelled record the label is as void as the value.
+      '& [data-slot="value"], & [data-slot="caption"], & [data-slot="meta"]': {
+        textDecoration: "line-through"
+      }
+    };
+  }
+  if (state === "disabled") {
+    return { opacity: 0.45, filter: "grayscale(1)", cursor: "not-allowed" };
+  }
+  return { opacity: 1 };
+}
+function cardSurfaceStyles(props, theme) {
+  const { variant = "outline", color = "primary", selected = false, selectable } = props;
+  const { state = "default", emphasis = "none" } = props;
+  const main = theme.palette[color].main;
+  const showSelected = selectable && selected;
+  return {
+    transition: "border-color 120ms, box-shadow 120ms, background-color 120ms",
+    ...stateSx(state),
+    ...variantSx(variant, theme),
+    ...showSelected ? {
+      borderColor: `${color}.main`,
+      boxShadow: `inset 0 0 0 1px ${main}`,
+      backgroundColor: "action.selected"
+    } : {},
+    ...emphasisSx(emphasis, main, props.shape)
+  };
+}
+
+export {
+  CARD_RADIUS,
+  slotTestIds,
+  isSelectable,
+  isActionable,
+  cardSurfaceStyles
+};
+//# sourceMappingURL=chunk-NXX3ZQKO.js.map

package/dist/chunk-NXX3ZQKO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/card-surface.ts"],"sourcesContent":["import { alpha, keyframes, type CSSObject, type Theme } from \"@mui/material/styles/index.js\";\n\nimport { fadeInScaleAnimation } from \"../Badge/Badge.animations\";\nimport { shadowInk } from \"../../../tokens/ink\";\n\n/**\n * A plain style object, not MUI's `SxProps`.\n *\n * `SxProps` is a union including arrays and functions, so a value typed as one\n * cannot be spread — and these fragments exist precisely to be merged. Note also\n * that `Card` merges by SPREADING (`sx={{ ...defaults, ...sx }}`), so handing it\n * a function yields nothing at all: resolve the theme with `useTheme` first.\n */\ntype CardSx = CSSObject | Record<string, unknown>;\n\n/** The ring, as scale + opacity so it never leaves the compositor. */\nconst pulseRing = keyframes`\n  0% { transform: scale(1); opacity: 0.9; }\n  70% { transform: scale(1.04); opacity: 0; }\n  100% { transform: scale(1.04); opacity: 0; }\n`;\n\n/**\n * THE CONTRACT BOTH CARDS IMPLEMENT.\n *\n * `BaseCard` (a tile) and `BaseListCard` (a row) are one object seen from two\n * angles, so the surface — variant, colour, selectability, draggability,\n * emphasis and state — is declared once and spread into both.\n */\n\n/**\n * How much chrome the surface claims. Button's vocabulary, spelled Button's\n * way: a card and a button are both surfaces the operator presses, and having\n * one say `outline` while the other says `outlined` taxes everyone who writes\n * both. Chip's `filled | outlined` was the wrong model — a chip is a token in a\n * sentence and has only those two things to say.\n */\nexport type CardSurfaceVariant = \"outline\" | \"ghost\" | \"text\" | \"glass\";\n\n/** The theme colour a card's selection and emphasis are drawn in. */\nexport type CardSurfaceColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\";\n\n/**\n * Why this card is asking to be noticed.\n *\n * ONE union, not six booleans. `glow`/`pulse`/`animate`/`bounce`/`shimmer`\n * combined into 32 states of which about three meant anything —\n * `pulse + shimmer + bounce` is not a thing anyone wants, and every one of\n * those combinations was a state somebody could reach by accident.\n */\nexport type CardEmphasis =\n  /** Nothing. The overwhelming default. */\n  | \"none\"\n  /** Look here now: an accent bar, and a ring that beats six times and settles. */\n  | \"attention\"\n  /** This just arrived: an accent bar and one fade-in. */\n  | \"new\";\n\n/** A row and a tile carry emphasis differently — see `emphasisSx`. */\ntype CardShape = \"row\" | \"tile\";\n\n/**\n * What this record IS, as opposed to how it looks.\n *\n * `dimmed` only greyed pixels, which left a cancelled row's buttons live and\n * clickable. This carries the meaning, so the card can also stop offering\n * actions on something that cannot be acted on.\n */\nexport type CardState = \"default\" | \"cancelled\" | \"disabled\";\n\nexport interface CardSurfaceProps {\n  /** How much chrome the surface claims. Defaults to `outline`. */\n  variant?: CardSurfaceVariant;\n  /** Theme colour for selection and emphasis. Defaults to `primary`. */\n  color?: CardSurfaceColor;\n  /**\n   * Can this card be selected — and does it show it?\n   *\n   * The capability, separate from the handler. `selectable` gets the checkbox\n   * AND the selected treatment; `selectable={false}` has neither, however\n   * `selected` is set, so a stale flag arriving with the data cannot make a\n   * read-only row render as picked. Defaults to whether `onToggleSelect` exists.\n   */\n  selectable?: boolean;\n  /** Whether this card is currently in the selection. */\n  selected?: boolean;\n  /**\n   * Opt OUT of dragging even inside a drag container.\n   *\n   * Draggability is the container's decision (see `data-views-drag`); this is\n   * the card's veto — a pinned row, a summary line, a record that may not move.\n   */\n  draggable?: boolean;\n  /**\n   * Where this card leads.\n   *\n   * PREFER THIS TO `onClick`. A clickable `<div>` cannot be cmd-clicked,\n   * middle-clicked or \"copy link address\"'d, and wrapping interactive children\n   * in a click handler is the a11y violation it looks like. With `href` the\n   * title is a real `<a>` stretched over the card by a pseudo-element: one\n   * whole-row target, correct tab order, every browser affordance intact, and\n   * the buttons inside stay ordinary buttons.\n   */\n  href?: string;\n  /** Anchor target, when `href` is set. */\n  target?: string;\n  /** Card click, for a card that does not navigate. See `href` first. */\n  onClick?: () => void;\n  /** What this record is. `cancelled`/`disabled` also suppress the actions. */\n  state?: CardState;\n  /** Why this card is asking to be noticed. Defaults to `none`. */\n  emphasis?: CardEmphasis;\n  className?: string;\n  /**\n   * One id; the parts derive from it (`${testId}-checkbox`, `-drag`, `-menu`,\n   * `-value`). A prop per slot would have been `checkboxTestId`,\n   * `menuTestId`, `valueTestId`… one for every part anybody ever tested.\n   */\n  testId?: string;\n  \"aria-label\"?: string;\n}\n\n/**\n * ONE RADIUS FOR BOTH SHAPES, off the token scale on purpose.\n *\n * `Card`'s own steps are 4px and 8px and its `lg` is 16px, all chosen for a\n * surface nearly as tall as it is wide. A 56px row is not that shape — the\n * corner runs most of the way down both ends and curves away from the square\n * checkbox and square thumbnail inside it — and a tile that rounds harder than\n * the row it sits beside in the same view reads as a different component.\n *\n * 3px takes the hard point off the corner without being seen as a curve.\n * `divider` rows override it back to 0; a bottom rule has no corners to round.\n */\nexport const CARD_RADIUS = \"3px\";\n\n/** Every slot's test id, derived from the card's one. */\nexport function slotTestIds(testId: string | undefined): (slot: string) => string | undefined {\n  return (slot) => (testId ? `${testId}-${slot}` : undefined);\n}\n\n/** Is this card selectable? Explicit wins; otherwise a handler implies it. */\nexport function isSelectable(\n  props: Pick<CardSurfaceProps, \"selectable\"> & { onToggleSelect?: () => void },\n): boolean {\n  return props.selectable ?? props.onToggleSelect != null;\n}\n\n/** Can this record be acted on at all? */\nexport function isActionable(state: CardState | undefined): boolean {\n  return state !== \"disabled\" && state !== \"cancelled\";\n}\n\n/**\n * Variant styling. Everything but `outline` drops the border.\n *\n * `ghost` keeps a faint SURFACE where `text` has none — without that the two\n * were pixel-identical at rest and the union carried a distinction it did not\n * draw. Ghost is \"a surface, quietly\"; text is \"no surface at all\", which is\n * what a host wants when it is drawing the container itself.\n */\nfunction variantSx(variant: CardSurfaceVariant, theme: Theme): CardSx {\n  if (variant === \"ghost\") {\n    return {\n      border: 0,\n      backgroundColor: \"action.hover\",\n      \"&:hover\": { backgroundColor: \"action.selected\" },\n    };\n  }\n  if (variant === \"text\") {\n    return { border: 0, backgroundColor: \"transparent\", boxShadow: \"none\" };\n  }\n  if (variant === \"glass\") {\n    // THEME-AWARE, and it keeps its edges.\n    //\n    // This was a hardcoded `rgba(255,255,255,·)` fill with a near-white border,\n    // which had two problems. On a dark palette a 55%-white pane is not frosted\n    // glass, it is a pale rectangle. And on a light one BOTH the fill and the\n    // border land on white and vanish, so `glass` rendered as `text` — the same\n    // nothing, reached by a different name.\n    //\n    // The blur is what makes it glass, and a blur is only visible over\n    // something. So the pane keeps a real hairline and a shallow shadow: over a\n    // plain surface it still reads as a raised pane rather than as absence, and\n    // over an image or a gradient the blur does the rest.\n    return {\n      backgroundColor: alpha(theme.palette.background.paper, 0.55),\n      backdropFilter: \"blur(8px)\",\n      // `divider` as-is. NOT `alpha(divider, …)`: MUI's `alpha` REPLACES the\n      // channel rather than scaling it, and `divider` is already a 12% black —\n      // so asking for 80% of it produced an 80% black slab of a border.\n      borderColor: theme.palette.divider,\n      boxShadow: `0 1px 3px ${shadowInk(theme, 0.1)}`,\n    };\n  }\n  return {};\n}\n\n/**\n * MOTION IS OPT-IN, ALWAYS.\n *\n * Everything animated here is wrapped in this. Fifty rows breathing in unison\n * is a vestibular trigger, and honouring the OS setting is not a polish item —\n * it is the difference between a list somebody can look at and one they cannot.\n */\nconst MOTION_OK = \"@media (prefers-reduced-motion: no-preference)\";\n\n/**\n * THE ROW'S ATTENTION SIGNAL IS A BAR, NOT A HALO.\n *\n * A glow is a weak signal in a list: full-width rows stacked tight means the\n * halo bleeds 15px into the neighbours above and below and reads as a rendering\n * artifact, and stacked with a `selected` ring and the browser's focus ring it\n * becomes three concentric halos on one row. Five rows needing attention at\n * once turns the page into a smear.\n *\n * A 3px accent on the leading edge is stronger, costs no motion at all, works\n * under reduced-motion, cannot bleed into a neighbour, and stacks cleanly\n * however many rows raise their hand. It is where operational tables land.\n */\nfunction accentBar(main: string): CardSx {\n  return {\n    \"&::before\": {\n      content: '\"\"',\n      position: \"absolute\",\n      insetInlineStart: 0,\n      insetBlock: 0,\n      width: 3,\n      borderStartStartRadius: \"inherit\",\n      borderEndStartRadius: \"inherit\",\n      backgroundColor: main,\n      pointerEvents: \"none\",\n    },\n  };\n}\n\n/**\n * The tile's lift — a card that has been RAISED, not one that is lit from within.\n *\n * This was Button's glow: a 20px bloom at 0.6 over a 40px bloom at 0.3, plus\n * `brightness(1.05)`. On a button, which is small and pressed and gone, that\n * reads as energy. On a tile it read as a neon sign — 40px of saturated colour\n * bleeding into the gaps of a grid whose whole job is to let the eye compare\n * cards, and the brightness filter washing the image and the caption with it.\n *\n * Three shadows doing three jobs instead: a hairline ring that tints the card's\n * own edge in the accent colour, a tight contact shadow, and one soft shadow\n * offset DOWNWARD. Offset is what separates elevation from emission — a glow is\n * symmetrical because its source is the object; a shadow falls because the\n * light is somewhere else. It stays legible on a dark canvas, where the old\n * bloom was the brightest thing on the screen.\n */\nfunction liftSx(main: string): CardSx {\n  return {\n    boxShadow: [\n      `0 0 0 1px ${alpha(main, 0.45)}`,\n      `0 1px 2px ${alpha(main, 0.12)}`,\n      `0 8px 20px -6px ${alpha(main, 0.3)}`,\n    ].join(\", \"),\n  };\n}\n\n/**\n * A breath that STOPS.\n *\n * Six iterations, not `infinite`. A restaurant admin has this open for a whole\n * shift, and something pulsing in the periphery forever is fatigue rather than\n * urgency — worse, once two or three rows are doing it the signal means\n * nothing. It settles, and the accent bar carries the state from then on.\n *\n * Animating `transform`/`opacity` on a pseudo-element, never `box-shadow`: a\n * box-shadow keyframe repaints every frame, and fifty of them drop frames on\n * exactly the tablet a restaurant floor uses. This one is compositor-only.\n */\nfunction pulseSx(main: string): CardSx {\n  return {\n    [MOTION_OK]: {\n      \"&::after\": {\n        content: '\"\"',\n        position: \"absolute\",\n        inset: 0,\n        borderRadius: \"inherit\",\n        border: `2px solid ${main}`,\n        animation: `${pulseRing} 1.6s ease-out 6`,\n        pointerEvents: \"none\",\n      },\n    },\n  };\n}\n\n/** The emphasis treatments, in the terms the shape can actually carry. */\nfunction emphasisSx(emphasis: CardEmphasis, main: string, shape: CardShape): CardSx {\n  if (emphasis === \"attention\") {\n    // The bar on both; the lift only where there is room for it to spread.\n    return {\n      ...accentBar(main),\n      ...(shape === \"tile\" ? liftSx(main) : {}),\n      ...pulseSx(main),\n    };\n  }\n  if (emphasis === \"new\") {\n    return {\n      ...accentBar(main),\n      [MOTION_OK]: { animation: `${fadeInScaleAnimation} 240ms ease-out` },\n    };\n  }\n  return {};\n}\n\n/**\n * The shared half of a card's styling. Each component adds its own geometry —\n * a tile's aspect ratio, a row's rails.\n */\n/**\n * WHAT THE TWO NON-DEFAULT STATES LOOK LIKE — and why they cannot look alike.\n *\n * Both were `opacity: 0.6` and nothing else, so a record the business CANCELLED\n * and a row this user merely cannot touch were pixel-identical. The type has\n * always drawn the distinction (`CardState`); only the styling had not, which\n * made `cancelled` a comment rather than a state.\n *\n * `cancelled` is a VOIDED record: still there, still worth reading, no longer\n * counting. The figures get struck through, because a dimmed `R$ 1.250,00`\n * still reads as money owed and a struck one cannot.\n *\n * `disabled` is INERT: nothing to read into, nothing to do with. It goes\n * greyscale — which also drains the status chip's colour, the one thing on the\n * row still shouting for attention — and says so on hover.\n */\nfunction stateSx(state: CardState): CardSx {\n  if (state === \"cancelled\") {\n    return {\n      opacity: 0.65,\n      // The META CLUSTER is struck too. It was left out, so a voided row kept a\n      // crisp `05/08/2026, 13:45` and `PIX` between a struck title and a struck\n      // total — the middle of the row reading as live data on a record the two\n      // ends call void. Both lines of each pair go, as both lines of the caption\n      // already do: on a cancelled record the label is as void as the value.\n      '& [data-slot=\"value\"], & [data-slot=\"caption\"], & [data-slot=\"meta\"]': {\n        textDecoration: \"line-through\",\n      },\n    };\n  }\n  if (state === \"disabled\") {\n    return { opacity: 0.45, filter: \"grayscale(1)\", cursor: \"not-allowed\" };\n  }\n  return { opacity: 1 };\n}\n\nexport function cardSurfaceStyles(\n  props: CardSurfaceProps & { selectable: boolean; shape: CardShape },\n  theme: Theme,\n): CardSx {\n  const { variant = \"outline\", color = \"primary\", selected = false, selectable } = props;\n  const { state = \"default\", emphasis = \"none\" } = props;\n  const main = theme.palette[color].main;\n  // Selection styling is gated on the CAPABILITY: a card that cannot be\n  // selected must not render as selected because a stale flag came with its data.\n  const showSelected = selectable && selected;\n  return {\n    transition: \"border-color 120ms, box-shadow 120ms, background-color 120ms\",\n    ...stateSx(state),\n    ...variantSx(variant, theme),\n    ...(showSelected\n      ? {\n          borderColor: `${color}.main`,\n          boxShadow: `inset 0 0 0 1px ${main}`,\n          backgroundColor: \"action.selected\",\n        }\n      : {}),\n    ...emphasisSx(emphasis, main, props.shape),\n  };\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,OAAO,iBAA6C;AAgB7D,IAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AA4HX,IAAM,cAAc;AAGpB,SAAS,YAAY,QAAkE;AAC5F,SAAO,CAAC,SAAU,SAAS,GAAG,MAAM,IAAI,IAAI,KAAK;AACnD;AAGO,SAAS,aACd,OACS;AACT,SAAO,MAAM,cAAc,MAAM,kBAAkB;AACrD;AAGO,SAAS,aAAa,OAAuC;AAClE,SAAO,UAAU,cAAc,UAAU;AAC3C;AAUA,SAAS,UAAU,SAA6B,OAAsB;AACpE,MAAI,YAAY,SAAS;AACvB,WAAO;AAAA,MACL,QAAQ;AAAA,MACR,iBAAiB;AAAA,MACjB,WAAW,EAAE,iBAAiB,kBAAkB;AAAA,IAClD;AAAA,EACF;AACA,MAAI,YAAY,QAAQ;AACtB,WAAO,EAAE,QAAQ,GAAG,iBAAiB,eAAe,WAAW,OAAO;AAAA,EACxE;AACA,MAAI,YAAY,SAAS;AAavB,WAAO;AAAA,MACL,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,MAC3D,gBAAgB;AAAA;AAAA;AAAA;AAAA,MAIhB,aAAa,MAAM,QAAQ;AAAA,MAC3B,WAAW,aAAa,UAAU,OAAO,GAAG,CAAC;AAAA,IAC/C;AAAA,EACF;AACA,SAAO,CAAC;AACV;AASA,IAAM,YAAY;AAelB,SAAS,UAAU,MAAsB;AACvC,SAAO;AAAA,IACL,aAAa;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,wBAAwB;AAAA,MACxB,sBAAsB;AAAA,MACtB,iBAAiB;AAAA,MACjB,eAAe;AAAA,IACjB;AAAA,EACF;AACF;AAkBA,SAAS,OAAO,MAAsB;AACpC,SAAO;AAAA,IACL,WAAW;AAAA,MACT,aAAa,MAAM,MAAM,IAAI,CAAC;AAAA,MAC9B,aAAa,MAAM,MAAM,IAAI,CAAC;AAAA,MAC9B,mBAAmB,MAAM,MAAM,GAAG,CAAC;AAAA,IACrC,EAAE,KAAK,IAAI;AAAA,EACb;AACF;AAcA,SAAS,QAAQ,MAAsB;AACrC,SAAO;AAAA,IACL,CAAC,SAAS,GAAG;AAAA,MACX,YAAY;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QACV,OAAO;AAAA,QACP,cAAc;AAAA,QACd,QAAQ,aAAa,IAAI;AAAA,QACzB,WAAW,GAAG,SAAS;AAAA,QACvB,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EACF;AACF;AAGA,SAAS,WAAW,UAAwB,MAAc,OAA0B;AAClF,MAAI,aAAa,aAAa;AAE5B,WAAO;AAAA,MACL,GAAG,UAAU,IAAI;AAAA,MACjB,GAAI,UAAU,SAAS,OAAO,IAAI,IAAI,CAAC;AAAA,MACvC,GAAG,QAAQ,IAAI;AAAA,IACjB;AAAA,EACF;AACA,MAAI,aAAa,OAAO;AACtB,WAAO;AAAA,MACL,GAAG,UAAU,IAAI;AAAA,MACjB,CAAC,SAAS,GAAG,EAAE,WAAW,GAAG,oBAAoB,kBAAkB;AAAA,IACrE;AAAA,EACF;AACA,SAAO,CAAC;AACV;AAsBA,SAAS,QAAQ,OAA0B;AACzC,MAAI,UAAU,aAAa;AACzB,WAAO;AAAA,MACL,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMT,wEAAwE;AAAA,QACtE,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AACA,MAAI,UAAU,YAAY;AACxB,WAAO,EAAE,SAAS,MAAM,QAAQ,gBAAgB,QAAQ,cAAc;AAAA,EACxE;AACA,SAAO,EAAE,SAAS,EAAE;AACtB;AAEO,SAAS,kBACd,OACA,OACQ;AACR,QAAM,EAAE,UAAU,WAAW,QAAQ,WAAW,WAAW,OAAO,WAAW,IAAI;AACjF,QAAM,EAAE,QAAQ,WAAW,WAAW,OAAO,IAAI;AACjD,QAAM,OAAO,MAAM,QAAQ,KAAK,EAAE;AAGlC,QAAM,eAAe,cAAc;AACnC,SAAO;AAAA,IACL,YAAY;AAAA,IACZ,GAAG,QAAQ,KAAK;AAAA,IAChB,GAAG,UAAU,SAAS,KAAK;AAAA,IAC3B,GAAI,eACA;AAAA,MACE,aAAa,GAAG,KAAK;AAAA,MACrB,WAAW,mBAAmB,IAAI;AAAA,MAClC,iBAAiB;AAAA,IACnB,IACA,CAAC;AAAA,IACL,GAAG,WAAW,UAAU,MAAM,MAAM,KAAK;AAAA,EAC3C;AACF;","names":[]}

package/dist/chunk-O63WG6YJ.js

@@ -0,0 +1,90 @@
+import {
+  TimelineRow
+} from "./chunk-HBYWUSPI.js";
+
+// src/components/data-display/Timeline/Timeline.tsx
+import Box from "@mui/material/Box/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var TimelineContainer = styled(Box)(
+  ({ theme, orientation }) => ({
+    display: "flex",
+    flexDirection: orientation === "vertical" ? "column" : "row",
+    gap: theme.spacing(2),
+    position: "relative",
+    width: "100%",
+    ...orientation === "horizontal" && {
+      overflowX: "auto",
+      paddingBottom: theme.spacing(2),
+      "&::-webkit-scrollbar": {
+        height: 8
+      },
+      "&::-webkit-scrollbar-track": {
+        background: alpha(theme.palette.action.disabled, 0.1),
+        borderRadius: 4
+      },
+      "&::-webkit-scrollbar-thumb": {
+        background: alpha(theme.palette.primary.main, 0.3),
+        borderRadius: 4,
+        "&:hover": {
+          background: alpha(theme.palette.primary.main, 0.5)
+        }
+      }
+    }
+  })
+);
+var Timeline = ({
+  items,
+  variant = "default",
+  orientation = "vertical",
+  showConnector = true,
+  animated = true,
+  alternating = false,
+  onItemClick
+}) => {
+  const [expandedItems, setExpandedItems] = React.useState(/* @__PURE__ */ new Set());
+  const handleExpandClick = (itemId, event) => {
+    event.stopPropagation();
+    setExpandedItems((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(itemId)) {
+        newSet.delete(itemId);
+      } else {
+        newSet.add(itemId);
+      }
+      return newSet;
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    TimelineContainer,
+    {
+      orientation,
+      "data-testid": "timeline-container",
+      children: items.map((item, index) => /* @__PURE__ */ jsx(
+        TimelineRow,
+        {
+          item,
+          index,
+          isLast: index === items.length - 1,
+          variant,
+          orientation,
+          showConnector,
+          animated,
+          alternating,
+          isExpanded: expandedItems.has(item.id),
+          onItemClick,
+          onExpandClick: handleExpandClick
+        },
+        item.id
+      ))
+    }
+  );
+};
+var Timeline_default = Timeline;
+
+export {
+  Timeline,
+  Timeline_default
+};
+//# sourceMappingURL=chunk-O63WG6YJ.js.map