@12-apps/ui 6.33.1 → 6.35.0

package/dist/chunk-AQSX3YH2.js

@@ -0,0 +1,184 @@
+import {
+  STACK_BREAK
+} from "./chunk-RORP6DWR.js";
+import {
+  CARD_RADIUS,
+  cardSurfaceStyles,
+  isActionable,
+  isSelectable,
+  slotTestIds
+} from "./chunk-NXX3ZQKO.js";
+import {
+  useDragItem
+} from "./chunk-JCJGJX7V.js";
+import {
+  RAIL_COUNT,
+  RAIL_GAP,
+  railsTemplateFor,
+  useListRails
+} from "./chunk-JFEEV3XI.js";
+import {
+  DENSITY_ROW_PADDING
+} from "./chunk-4LQZH4PU.js";
+
+// src/components/data-display/DataViews/base-list-card-geometry.tsx
+import { useTheme } from "@mui/material/styles/index.js";
+function isTextSelection() {
+  return (globalThis.getSelection?.()?.toString().length ?? 0) > 0;
+}
+function clickKeys(onClick) {
+  return (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onClick();
+  };
+}
+function rowSx(opts) {
+  const { inGroup, railCount, cellTemplate, gutters, metaColumns, pad, padY, scale, divider, interactive, draggable } = opts;
+  return {
+    position: "relative",
+    borderRadius: CARD_RADIUS,
+    display: "grid",
+    zoom: scale,
+    // SUBGRID AND `container-type` CANNOT COEXIST on one element: containment
+    // makes the box size independently of its parent, so the browser drops the
+    // subgrid and every slot stacks into one column. (Observed exactly that —
+    // computed `grid-template-columns: 1222px` on a card asking for subgrid.)
+    //
+    // So inside a group the GROUP is the query container and the row is the
+    // subgrid; standalone, the row is both the container and its own grid.
+    ...inGroup ? { gridColumn: `span ${railCount}`, gridTemplateColumns: "subgrid" } : {
+      containerType: "inline-size",
+      gridTemplateColumns: cellTemplate ?? railsTemplateFor(gutters, metaColumns)
+    },
+    alignItems: "center",
+    // Wide enough that the meta cluster, the value and the status read as three
+    // columns rather than one run of text — the complaint that started all this
+    // was `MÉTODO PIX R$ 13,90` scanning as a single phrase.
+    columnGap: RAIL_GAP,
+    width: "100%",
+    px: pad,
+    py: padY,
+    cursor: draggable ? "grab" : interactive ? "pointer" : void 0,
+    ...draggable ? { touchAction: "none", "&:active": { cursor: "grabbing" } } : {},
+    ...interactive ? { "&:hover": { backgroundColor: "action.hover" } } : {},
+    // A real focus ring, which a clickable <div> never had.
+    "&:focus-visible": { outline: 2, outlineStyle: "solid", outlineColor: "primary.main", outlineOffset: 2 },
+    // TWO-LINE, below the point where the shared rails stop helping.
+    //
+    // The standard mobile transaction row: what the record IS and what it COST
+    // on the first line, the supporting detail on the second. Better than
+    // truncating four columns into ellipses, and the reason each slot carries a
+    // `data-slot` — the placement is explicit rather than whatever order the
+    // children happen to be in.
+    //
+    //   [ select ][ leading ][ title …………… ][   menu ]
+    //                        [ (cells) …………… ][  value ]
+    //
+    // The MENU stays in the top-right corner at every width. It is the row's
+    // one fixed landmark — an overflow that moves to the second line on a phone
+    // is an overflow nobody finds twice.
+    [`@container (max-width: ${STACK_BREAK}px)`]: {
+      gridTemplateColumns: "auto auto minmax(0, 1fr) max-content",
+      ...inGroup ? { gridColumn: `span ${RAIL_COUNT}` } : {},
+      rowGap: 0.75,
+      columnGap: 1,
+      '& > [data-slot="drag"]': { display: "none" },
+      '& > [data-slot="select"]': { gridArea: "1 / 1" },
+      '& > [data-slot="leading"]': { gridArea: "1 / 2" },
+      '& > [data-slot="caption"]': { gridArea: "1 / 3" },
+      '& > [data-slot="actions"]': { gridArea: "1 / 4", justifyContent: "flex-end" },
+      '& > [data-slot="meta"]': { display: "none" },
+      // Second line, starting under the title rather than under the checkbox.
+      '& > [data-slot="value"]': { gridArea: "2 / 4", textAlign: "right" }
+    },
+    ...divider ? { borderRadius: 0, borderWidth: 0, borderBottomWidth: 1, borderStyle: "solid" } : {}
+  };
+}
+function dragIdFor(props, actionable) {
+  return props.draggable === false || !actionable ? void 0 : props.dragId;
+}
+function metaShape(props) {
+  const columns = props.meta?.length ?? 0;
+  return { columns, present: columns > 0 || props.metaSlot != null };
+}
+function useRowShell(props) {
+  const actionable = isActionable(props.state);
+  const group = useListRails();
+  const scale = props.scale ?? 1;
+  return {
+    group,
+    actionable,
+    scale,
+    theme: useTheme(),
+    selectable: isSelectable(props),
+    slot: slotTestIds(props.testId),
+    drag: useDragItem(dragIdFor(props, actionable)),
+    // Standalone holds no gutter open: there is no list beside it to line up
+    // with, so a reserved-but-empty rail is pure inset.
+    reserve: group?.reserveGutters ?? false,
+    // 1, not 1.5. The row's contents still have to line up with the toolbar
+    // above them, but 12px of card padding stacked on the checkbox's own 9px
+    // and an empty drag gutter's 24px read as a row indented for no reason.
+    //
+    // Not multiplied by `scale` — the row's `zoom` already scales it, and doing
+    // both would square the factor on padding alone.
+    pad: 1,
+    padY: DENSITY_ROW_PADDING[group?.density ?? props.density ?? "cozy"],
+    // A card that navigates does so with a real anchor, so it takes no click
+    // handler of its own — the stretched link IS the target.
+    acts: props.onClick != null && props.href == null && actionable
+  };
+}
+function actionProps(onClick) {
+  return {
+    role: "button",
+    tabIndex: 0,
+    onClick: () => {
+      if (isTextSelection()) return;
+      onClick?.();
+    },
+    onKeyDown: clickKeys(() => onClick?.())
+  };
+}
+function rowSurface(props, shell) {
+  const { theme, selectable, drag } = shell;
+  const surface = cardSurfaceStyles(
+    { ...props, selectable, shape: "row", state: drag.dragging ? "disabled" : props.state },
+    theme
+  );
+  if (props.divider !== true || surface.borderColor != null) return surface;
+  return { ...surface, borderBottomColor: theme.palette.divider };
+}
+function rowStyles(props, shell, cellTemplate) {
+  const { group, selectable, drag, reserve, pad, padY, scale, acts } = shell;
+  return {
+    ...rowSurface(props, shell),
+    ...rowSx({
+      inGroup: group !== null,
+      railCount: group?.railCount ?? RAIL_COUNT,
+      cellTemplate,
+      gutters: {
+        disclose: reserve || props.children != null,
+        drag: reserve || drag.draggable,
+        select: reserve || selectable
+      },
+      metaColumns: metaShape(props).columns,
+      pad,
+      padY,
+      scale,
+      divider: props.divider ?? false,
+      interactive: acts || props.href != null,
+      draggable: drag.draggable && drag.handleProps === void 0
+    })
+  };
+}
+
+export {
+  rowSx,
+  metaShape,
+  useRowShell,
+  actionProps,
+  rowStyles
+};
+//# sourceMappingURL=chunk-AQSX3YH2.js.map

package/dist/chunk-B76QCDCE.js

@@ -0,0 +1,226 @@
+import {
+  onMedia,
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/feedback/TutorialOverlay/TutorialStepBody.tsx
+import CompleteIcon from "@mui/icons-material/CheckCircle";
+import CloseIcon from "@mui/icons-material/Close";
+import PrevIcon from "@mui/icons-material/NavigateBefore";
+import NextIcon from "@mui/icons-material/NavigateNext";
+import RestartIcon from "@mui/icons-material/Refresh";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StepIndicator = styled(Box)(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing(1),
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(2)
+}));
+var StepDot = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "active" && prop !== "completed"
+})(({ theme, active, completed }) => ({
+  width: 8,
+  height: 8,
+  borderRadius: "50%",
+  background: completed ? theme.palette.success.main : active ? theme.palette.primary.main : alpha(theme.palette.text.primary, 0.3),
+  transition: "all 0.3s ease",
+  ...active && {
+    transform: "scale(1.5)"
+  }
+}));
+var TutorialStepNav = ({
+  copy,
+  currentStep,
+  stepCount,
+  isLastStep,
+  allowSkip,
+  requiresActionBeforeNext,
+  onNext,
+  onPrev,
+  onSkip,
+  onRestart
+}) => /* @__PURE__ */ jsxs(
+  Stack,
+  {
+    direction: "row",
+    spacing: 1,
+    justifyContent: "space-between",
+    "data-testid": "tutorial-navigation",
+    children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+        allowSkip && /* @__PURE__ */ jsx(Button, { size: "small", onClick: onSkip, variant: "text", children: copy.skip }),
+        stepCount > 1 && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            onClick: onRestart,
+            disabled: currentStep === 0,
+            title: copy.restart,
+            children: /* @__PURE__ */ jsx(RestartIcon, { fontSize: "small" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+        stepCount > 1 && currentStep > 0 && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            startIcon: /* @__PURE__ */ jsx(PrevIcon, {}),
+            onClick: onPrev,
+            disabled: currentStep === 0,
+            "data-testid": "tutorial-prev-button",
+            children: copy.previous
+          }
+        ),
+        !isLastStep ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "contained",
+            size: "small",
+            endIcon: /* @__PURE__ */ jsx(NextIcon, {}),
+            onClick: onNext,
+            disabled: requiresActionBeforeNext,
+            title: requiresActionBeforeNext ? "Complete the required action first" : "",
+            "data-testid": "tutorial-next-button",
+            children: copy.next
+          }
+        ) : /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "contained",
+            size: "small",
+            endIcon: /* @__PURE__ */ jsx(CompleteIcon, {}),
+            onClick: onNext,
+            sx: (theme) => {
+              const [from, to] = uiInk(theme).celebration.mint;
+              return { background: `linear-gradient(135deg, ${from} 0%, ${to} 100%)` };
+            },
+            "data-testid": "tutorial-finish-button",
+            children: stepCount === 1 ? "Complete" : "Finish"
+          }
+        )
+      ] })
+    ]
+  }
+);
+var StepDots = ({
+  currentStep,
+  stepCount
+}) => /* @__PURE__ */ jsx(StepIndicator, { "data-testid": "tutorial-step-indicators", children: Array.from({ length: stepCount }).map((_, index) => /* @__PURE__ */ jsx(
+  StepDot,
+  {
+    active: index === currentStep,
+    completed: index < currentStep,
+    "data-testid": `tutorial-indicator-${index}`
+  },
+  index
+)) });
+var TutorialStepHeader = ({ title, currentStep, allowSkip, onSkip }) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" },
+    children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          id: `tutorial-title-${currentStep}`,
+          variant: "h6",
+          fontWeight: "bold",
+          sx: { flex: 1 },
+          "data-testid": "tutorial-step-title",
+          children: title
+        }
+      ),
+      allowSkip && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "small",
+          onClick: onSkip,
+          sx: { ml: 1, mt: -1, mr: -1 },
+          "data-testid": "tutorial-close-button",
+          children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+        }
+      )
+    ]
+  }
+);
+var TutorialStepBody = ({
+  copy,
+  step,
+  currentStep,
+  stepCount,
+  progress: _progress,
+  isLastStep,
+  allowSkip,
+  showProgress,
+  requiresActionBeforeNext,
+  onNext,
+  onPrev,
+  onSkip,
+  onRestart
+}) => /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+  /* @__PURE__ */ jsx(
+    TutorialStepHeader,
+    {
+      title: step.title,
+      currentStep,
+      allowSkip,
+      onSkip
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    Typography,
+    {
+      id: `tutorial-content-${currentStep}`,
+      variant: "body2",
+      color: "text.secondary",
+      "data-testid": "tutorial-step-content",
+      children: step.content
+    }
+  ),
+  showProgress && /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", align: "center", children: [
+    currentStep + 1,
+    " of ",
+    stepCount
+  ] }),
+  step.action && /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "contained",
+      size: "small",
+      onClick: step.action.onClick,
+      sx: (theme) => {
+        const [from, to] = uiInk(theme).celebration.violet;
+        return { background: `linear-gradient(135deg, ${from} 0%, ${to} 100%)`, color: onMedia(theme) };
+      },
+      children: step.action.label
+    }
+  ),
+  /* @__PURE__ */ jsx(StepDots, { currentStep, stepCount }),
+  /* @__PURE__ */ jsx(
+    TutorialStepNav,
+    {
+      copy,
+      currentStep,
+      stepCount,
+      isLastStep,
+      allowSkip,
+      requiresActionBeforeNext,
+      onNext,
+      onPrev,
+      onSkip,
+      onRestart
+    }
+  )
+] });
+
+export {
+  TutorialStepBody
+};
+//# sourceMappingURL=chunk-B76QCDCE.js.map

package/dist/chunk-B76QCDCE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/TutorialOverlay/TutorialStepBody.tsx"],"sourcesContent":["import CompleteIcon from '@mui/icons-material/CheckCircle';\nimport CloseIcon from '@mui/icons-material/Close';\nimport PrevIcon from '@mui/icons-material/NavigateBefore';\nimport NextIcon from '@mui/icons-material/NavigateNext';\nimport RestartIcon from '@mui/icons-material/Refresh';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Stack from '@mui/material/Stack/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 { onMedia, uiInk } from '../../../tokens/ink';\n\nimport type { TutorialOverlayProps } from './TutorialOverlay.types';\nimport type { TutorialCopy } from '../../../copy';\n\n// Animation keyframes\n\nconst StepIndicator = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  gap: theme.spacing(1),\n  marginTop: theme.spacing(2),\n  marginBottom: theme.spacing(2) }));\n\n\nconst StepDot = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'active' && prop !== 'completed' })<{ active?: boolean; completed?: boolean }>(({ theme, active, completed }) => ({\n  width: 8,\n  height: 8,\n  borderRadius: '50%',\n  background: completed\n    ? theme.palette.success.main\n    : active\n      ? theme.palette.primary.main\n      : alpha(theme.palette.text.primary, 0.3),\n  transition: 'all 0.3s ease',\n  ...(active && {\n    transform: 'scale(1.5)' }) }));\n\n// Title, body copy, the step dots and the navigation row.\n\n// The step's controls: skip/restart on the left, previous/next on the right.\nconst TutorialStepNav: React.FC<{\n  copy: TutorialCopy;\n  currentStep: number;\n  stepCount: number;\n  isLastStep: boolean;\n  allowSkip: boolean;\n  requiresActionBeforeNext?: boolean;\n  onNext: () => void;\n  onPrev: () => void;\n  onSkip: () => void;\n  onRestart: () => void;\n}> = ({\n  copy,\n  currentStep,\n  stepCount,\n  isLastStep,\n  allowSkip,\n  requiresActionBeforeNext,\n  onNext,\n  onPrev,\n  onSkip,\n  onRestart }) => (\n        <Stack\n          direction=\"row\"\n          spacing={1}\n          justifyContent=\"space-between\"\n          data-testid=\"tutorial-navigation\"\n        >\n          <Stack direction=\"row\" spacing={1}>\n            {allowSkip && (\n              <Button size=\"small\" onClick={onSkip} variant=\"text\">\n                {copy.skip}\n              </Button>\n            )}\n            {stepCount > 1 && (\n              <IconButton\n                size=\"small\"\n                onClick={onRestart}\n                disabled={currentStep === 0}\n                title={copy.restart}\n              >\n                <RestartIcon fontSize=\"small\" />\n              </IconButton>\n            )}\n          </Stack>\n\n          <Stack direction=\"row\" spacing={1}>\n            {stepCount > 1 && currentStep > 0 && (\n              <Button\n                size=\"small\"\n                startIcon={<PrevIcon />}\n                onClick={onPrev}\n                disabled={currentStep === 0}\n                data-testid=\"tutorial-prev-button\"\n              >\n                {copy.previous}\n              </Button>\n            )}\n\n            {!isLastStep ? (\n              <Button\n                variant=\"contained\"\n                size=\"small\"\n                endIcon={<NextIcon />}\n                onClick={onNext}\n                disabled={requiresActionBeforeNext}\n                title={requiresActionBeforeNext ? 'Complete the required action first' : ''}\n                data-testid=\"tutorial-next-button\"\n              >\n                {copy.next}\n              </Button>\n            ) : (\n              <Button\n                variant=\"contained\"\n                size=\"small\"\n                endIcon={<CompleteIcon />}\n                onClick={onNext}\n                sx={(theme) => {\n                  const [from, to] = uiInk(theme).celebration.mint;\n                  return { background: `linear-gradient(135deg, ${from} 0%, ${to} 100%)` };\n                }}\n                data-testid=\"tutorial-finish-button\"\n              >\n                {stepCount === 1 ? 'Complete' : 'Finish'}\n              </Button>\n            )}\n          </Stack>\n        </Stack>\n);\n\nconst StepDots: React.FC<{ currentStep: number; stepCount: number }> = ({\n  currentStep,\n  stepCount }) => (\n  <StepIndicator data-testid=\"tutorial-step-indicators\">\n    {Array.from({ length: stepCount }).map((_, index) => (\n      <StepDot\n        key={index}\n        active={index === currentStep}\n        completed={index < currentStep}\n        data-testid={`tutorial-indicator-${index}`}\n      />\n    ))}\n  </StepIndicator>\n);\n\n// Title, and the close button when skipping is allowed.\nconst TutorialStepHeader: React.FC<{\n  title: React.ReactNode;\n  currentStep: number;\n  allowSkip: boolean;\n  onSkip: () => void;\n}> = ({ title, currentStep, allowSkip, onSkip }) => (\n        <Box\n          sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}\n        >\n          <Typography\n            id={`tutorial-title-${currentStep}`}\n            variant=\"h6\"\n            fontWeight=\"bold\"\n            sx={{ flex: 1 }}\n            data-testid=\"tutorial-step-title\"\n          >\n            {title}\n          </Typography>\n          {allowSkip && (\n            <IconButton\n              size=\"small\"\n              onClick={onSkip}\n              sx={{ ml: 1, mt: -1, mr: -1 }}\n              data-testid=\"tutorial-close-button\"\n            >\n              <CloseIcon fontSize=\"small\" />\n            </IconButton>\n          )}\n        </Box>\n);\n\nexport const TutorialStepBody: React.FC<{\n  copy: TutorialCopy;\n  step: TutorialOverlayProps['steps'][number];\n  currentStep: number;\n  stepCount: number;\n  progress: number;\n  isLastStep: boolean;\n  allowSkip: boolean;\n  showProgress: boolean;\n  requiresActionBeforeNext?: boolean;\n  onNext: () => void;\n  onPrev: () => void;\n  onSkip: () => void;\n  onRestart: () => void;\n}> = ({\n  copy,\n  step,\n  currentStep,\n  stepCount,\n  progress: _progress,\n  isLastStep,\n  allowSkip,\n  showProgress,\n  requiresActionBeforeNext,\n  onNext,\n  onPrev,\n  onSkip,\n  onRestart }) => (\n      <Stack spacing={2}>\n        <TutorialStepHeader\n          title={step.title}\n          currentStep={currentStep}\n          allowSkip={allowSkip}\n          onSkip={onSkip}\n        />\n\n        <Typography\n          id={`tutorial-content-${currentStep}`}\n          variant=\"body2\"\n          color=\"text.secondary\"\n          data-testid=\"tutorial-step-content\"\n        >\n          {step.content}\n        </Typography>\n\n        {showProgress && (\n          <Typography variant=\"caption\" color=\"text.secondary\" align=\"center\">\n            {currentStep + 1} of {stepCount}\n          </Typography>\n        )}\n\n        {step.action && (\n          <Button\n            variant=\"contained\"\n            size=\"small\"\n            onClick={step.action.onClick}\n            sx={(theme) => {\n              const [from, to] = uiInk(theme).celebration.violet;\n              return { background: `linear-gradient(135deg, ${from} 0%, ${to} 100%)`, color: onMedia(theme) };\n            }}\n          >\n            {step.action.label}\n          </Button>\n        )}\n\n        <StepDots currentStep={currentStep} stepCount={stepCount} />\n\n        <TutorialStepNav\n          copy={copy}\n          currentStep={currentStep}\n          stepCount={stepCount}\n          isLastStep={isLastStep}\n          allowSkip={allowSkip}\n          requiresActionBeforeNext={requiresActionBeforeNext}\n          onNext={onNext}\n          onPrev={onPrev}\n          onSkip={onSkip}\n          onRestart={onRestart}\n        />\n      </Stack>\n);\n\n// Main component\n"],"mappings":"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","names":[]}

package/dist/chunk-BBXJQI4S.js

@@ -0,0 +1,50 @@
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/HeaderButton/HeaderButton.tsx
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function HeaderButton({
+  text,
+  icon,
+  endIcon,
+  onClick,
+  variant = "contained",
+  color = "primary",
+  disabled,
+  collapseBelow = "md",
+  fullWidth,
+  dataTestId,
+  ...aria
+}) {
+  const labelDisplay = { xs: "none", [collapseBelow]: "inline" };
+  const horizontalPad = { xs: 1, [collapseBelow]: 2 };
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant,
+      color,
+      size: "medium",
+      onClick,
+      disabled,
+      fullWidth,
+      "aria-label": typeof text === "string" ? text : void 0,
+      "aria-haspopup": aria["aria-haspopup"],
+      "aria-expanded": aria["aria-expanded"],
+      "data-testid": dataTestId,
+      sx: { minWidth: 0, gap: 0.75, px: horizontalPad, py: 1, fontSize: sxRem(16), textTransform: "none" },
+      children: [
+        /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: "inline-flex", alignItems: "center" }, children: icon }),
+        /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: labelDisplay }, children: text }),
+        endIcon != null && /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: "inline-flex", alignItems: "center" }, children: endIcon })
+      ]
+    }
+  );
+}
+
+export {
+  HeaderButton
+};
+//# sourceMappingURL=chunk-BBXJQI4S.js.map

package/dist/chunk-BBXJQI4S.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/HeaderButton/HeaderButton.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport type { ButtonProps } from '@mui/material/Button/index.js';\nimport type { ReactNode } from 'react';\n\nimport { sxRem } from '../../../tokens/relative';\n\ntype Breakpoint = 'sm' | 'md' | 'lg';\n\nexport interface HeaderButtonProps {\n  /** The label — shown next to the icon on wide screens, hidden (icon-only) below `collapseBelow`. */\n  text: ReactNode;\n  /** Leading icon/image — always visible. */\n  icon: ReactNode;\n  /** Optional trailing icon (e.g. a dropdown chevron) — always visible. */\n  endIcon?: ReactNode;\n  onClick?: ButtonProps['onClick'];\n  /** MUI variant. @default 'contained' */\n  variant?: ButtonProps['variant'];\n  /** MUI color. @default 'primary' */\n  color?: ButtonProps['color'];\n  disabled?: boolean;\n  /** Width below which the button collapses to icon-only. @default 'md' */\n  collapseBelow?: Breakpoint;\n  fullWidth?: boolean;\n  'aria-haspopup'?: ButtonProps['aria-haspopup'];\n  'aria-expanded'?: boolean;\n  dataTestId?: string;\n}\n\n/**\n * A page-header action that adapts to width: below `collapseBelow` it renders\n * ONLY its icon (compact, so several fit one line on phones); at/above it renders\n * the icon + text label. The accessible name is always `text`, so the icon-only\n * state stays labeled for screen readers.\n */\nexport function HeaderButton({\n  text,\n  icon,\n  endIcon,\n  onClick,\n  variant = 'contained',\n  color = 'primary',\n  disabled,\n  collapseBelow = 'md',\n  fullWidth,\n  dataTestId,\n  ...aria\n}: HeaderButtonProps): React.JSX.Element {\n  // Hide the label below the breakpoint; keep the icon(s). `gap` collapses around\n  // the display:none label, so on mobile it reads as a compact icon button.\n  const labelDisplay = { xs: 'none', [collapseBelow]: 'inline' };\n  const horizontalPad = { xs: 1, [collapseBelow]: 2 };\n  return (\n    <Button\n      variant={variant}\n      color={color}\n      size=\"medium\"\n      onClick={onClick}\n      disabled={disabled}\n      fullWidth={fullWidth}\n      aria-label={typeof text === 'string' ? text : undefined}\n      aria-haspopup={aria['aria-haspopup']}\n      aria-expanded={aria['aria-expanded']}\n      data-testid={dataTestId}\n      sx={{ minWidth: 0, gap: 0.75, px: horizontalPad, py: 1, fontSize: sxRem(16), textTransform: 'none' }}\n    >\n      <Box component=\"span\" sx={{ display: 'inline-flex', alignItems: 'center' }}>\n        {icon}\n      </Box>\n      <Box component=\"span\" sx={{ display: labelDisplay }}>\n        {text}\n      </Box>\n      {endIcon != null && (\n        <Box component=\"span\" sx={{ display: 'inline-flex', alignItems: 'center' }}>\n          {endIcon}\n        </Box>\n      )}\n    </Button>\n  );\n}\n"],"mappings":";;;;;AAEA,OAAO,SAAS;AAChB,OAAO,YAAY;AAqDf,SAaE,KAbF;AAlBG,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,QAAQ;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyC;AAGvC,QAAM,eAAe,EAAE,IAAI,QAAQ,CAAC,aAAa,GAAG,SAAS;AAC7D,QAAM,gBAAgB,EAAE,IAAI,GAAG,CAAC,aAAa,GAAG,EAAE;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAY,OAAO,SAAS,WAAW,OAAO;AAAA,MAC9C,iBAAe,KAAK,eAAe;AAAA,MACnC,iBAAe,KAAK,eAAe;AAAA,MACnC,eAAa;AAAA,MACb,IAAI,EAAE,UAAU,GAAG,KAAK,MAAM,IAAI,eAAe,IAAI,GAAG,UAAU,MAAM,EAAE,GAAG,eAAe,OAAO;AAAA,MAEnG;AAAA,4BAAC,OAAI,WAAU,QAAO,IAAI,EAAE,SAAS,eAAe,YAAY,SAAS,GACtE,gBACH;AAAA,QACA,oBAAC,OAAI,WAAU,QAAO,IAAI,EAAE,SAAS,aAAa,GAC/C,gBACH;AAAA,QACC,WAAW,QACV,oBAAC,OAAI,WAAU,QAAO,IAAI,EAAE,SAAS,eAAe,YAAY,SAAS,GACtE,mBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/chunk-BD2GGIGS.js

@@ -0,0 +1,116 @@
+import {
+  FleetBody
+} from "./chunk-YU647YW4.js";
+import {
+  FLEET_DEFAULT_LAGGING_AFTER_SECONDS,
+  FLEET_DEFAULT_STALE_AFTER_SECONDS,
+  FLEET_PANEL
+} from "./chunk-BTQZ3EX3.js";
+import {
+  useFleetMap
+} from "./chunk-ZCPSND5Y.js";
+import {
+  SR_ONLY_SX
+} from "./chunk-7BZTZ2WG.js";
+import {
+  EmptyState
+} from "./chunk-MZMGQKT3.js";
+
+// src/components/data-display/FleetMap/FleetMap.tsx
+import Box from "@mui/material/Box/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_HEIGHT = "420px";
+function FleetStatus({
+  announcement,
+  loading,
+  testId
+}) {
+  if (announcement === void 0) return null;
+  return /* @__PURE__ */ jsx(Box, { role: "status", "aria-live": "polite", "data-testid": `${testId}-status`, sx: SR_ONLY_SX, children: loading ? announcement : "" });
+}
+var FleetMap = React.memo(
+  ({
+    units,
+    copy,
+    // NO default. `undefined` is what tells the hook the caller does not own
+    // the selection; defaulting it to `null` here made every render look
+    // controlled and the uncontrolled path unreachable.
+    selectedId,
+    onSelect,
+    laggingAfterSeconds = FLEET_DEFAULT_LAGGING_AFTER_SECONDS,
+    staleAfterSeconds = FLEET_DEFAULT_STALE_AFTER_SECONDS,
+    height = DEFAULT_HEIGHT,
+    loading = false,
+    className,
+    dataTestId
+  }) => {
+    const theme = useTheme();
+    const testId = dataTestId || "fleet-map";
+    const headingId = React.useId();
+    const { ordered, active, centre, select, markers, onKeyDown } = useFleetMap(
+      units,
+      selectedId,
+      onSelect
+    );
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        role: "region",
+        "aria-labelledby": headingId,
+        className,
+        "data-testid": testId,
+        sx: { display: "flex", flexDirection: "column", gap: theme.spacing(FLEET_PANEL.gapUnits), minWidth: 0 },
+        children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              id: headingId,
+              variant: "subtitle1",
+              component: "h2",
+              "data-testid": `${testId}-title`,
+              sx: { fontWeight: theme.typography.fontWeightMedium },
+              children: copy.title
+            }
+          ),
+          /* @__PURE__ */ jsx(FleetStatus, { announcement: copy.loading, loading, testId }),
+          !loading && ordered.length === 0 ? /* @__PURE__ */ jsx(
+            EmptyState,
+            {
+              variant: "minimal",
+              title: copy.emptyTitle,
+              description: copy.emptyDescription,
+              dataTestId: `${testId}-empty`
+            }
+          ) : /* @__PURE__ */ jsx(
+            FleetBody,
+            {
+              ordered,
+              centre,
+              markers,
+              select,
+              onKeyDown,
+              copy,
+              selectedId: active,
+              laggingAfterSeconds,
+              staleAfterSeconds,
+              height,
+              loading,
+              testId
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FleetMap.displayName = "FleetMap";
+var FleetMap_default = FleetMap;
+
+export {
+  FleetMap,
+  FleetMap_default
+};
+//# sourceMappingURL=chunk-BD2GGIGS.js.map