@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-GHXFCMFP.js

@@ -0,0 +1,213 @@
+import {
+  DashboardAction,
+  DashboardActions,
+  DashboardExport,
+  DashboardFilterToggle,
+  DashboardInfo,
+  DashboardSettings,
+  DashboardSpacer
+} from "./chunk-QKPD322X.js";
+import {
+  DashboardContext,
+  useDashboardContext
+} from "./chunk-CUMSPE6B.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/layout/Dashboard/Dashboard.tsx
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import FilterIcon from "@mui/icons-material/FilterListRounded";
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
+import Box from "@mui/material/Box/index.js";
+import MuiBreadcrumbs from "@mui/material/Breadcrumbs/index.js";
+import Button from "@mui/material/Button/index.js";
+import Collapse from "@mui/material/Collapse/index.js";
+import MuiLink from "@mui/material/Link/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import React, { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SLOT_ORDER = ["breadcrumb", "header", "filters", "body"];
+function markDashboardSlot(component, slot) {
+  component.dashboardSlot = slot;
+  return component;
+}
+var Root = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(2),
+  width: "100%"
+}));
+function slotRank(node) {
+  if (React.isValidElement(node)) {
+    const slot = node.type.dashboardSlot;
+    if (slot) {
+      const rank = SLOT_ORDER.indexOf(slot);
+      if (rank >= 0) {
+        return rank;
+      }
+    }
+  }
+  return SLOT_ORDER.length;
+}
+var Dashboard = ({
+  children,
+  defaultFiltersVisible = true,
+  activeFilterCount = 0,
+  testIdPrefix = "dashboard",
+  className
+}) => {
+  const [filtersVisible, setFiltersVisible] = useState(defaultFiltersVisible);
+  const [moreFiltersOpen, setMoreFiltersOpen] = useState(false);
+  const value = useMemo(
+    () => ({
+      filtersVisible,
+      toggleFilters: () => setFiltersVisible((v) => !v),
+      moreFiltersOpen,
+      toggleMoreFilters: () => setMoreFiltersOpen((v) => !v),
+      activeFilterCount,
+      testIdPrefix
+    }),
+    [filtersVisible, moreFiltersOpen, activeFilterCount, testIdPrefix]
+  );
+  const ordered = useMemo(() => {
+    const arr = React.Children.toArray(children);
+    return arr.map((node, index) => ({ node, index, rank: slotRank(node) })).sort((a, b) => a.rank === b.rank ? a.index - b.index : a.rank - b.rank).map((entry) => entry.node);
+  }, [children]);
+  return /* @__PURE__ */ jsx(DashboardContext.Provider, { value, children: /* @__PURE__ */ jsx(Root, { className, "data-testid": testIdPrefix, children: ordered }) });
+};
+Dashboard.displayName = "Dashboard";
+var DashboardBreadcrumb = ({
+  items,
+  renderLink,
+  className
+}) => {
+  const { testIdPrefix } = useDashboardContext();
+  return /* @__PURE__ */ jsx(
+    MuiBreadcrumbs,
+    {
+      separator: /* @__PURE__ */ jsx(NavigateNextIcon, { fontSize: "small" }),
+      className,
+      "aria-label": "breadcrumb",
+      "data-testid": `${testIdPrefix}-breadcrumb`,
+      sx: { fontSize: sxRem(14), color: "text.secondary" },
+      children: items.map((item, index) => {
+        const isLast = index === items.length - 1;
+        if (isLast || !item.href) {
+          return /* @__PURE__ */ jsx(
+            Typography,
+            {
+              component: "span",
+              sx: { fontSize: sxRem(14), color: isLast ? "text.primary" : "text.secondary" },
+              "aria-current": isLast ? "page" : void 0,
+              children: item.label
+            },
+            `${item.label}-${index}`
+          );
+        }
+        const linkContent = item.label;
+        if (renderLink) {
+          return /* @__PURE__ */ jsx(React.Fragment, { children: renderLink(item, linkContent) }, `${item.label}-${index}`);
+        }
+        return /* @__PURE__ */ jsx(
+          MuiLink,
+          {
+            href: item.href,
+            underline: "hover",
+            color: "inherit",
+            sx: { fontSize: sxRem(14) },
+            children: linkContent
+          },
+          `${item.label}-${index}`
+        );
+      })
+    }
+  );
+};
+DashboardBreadcrumb.displayName = "Dashboard.Breadcrumb";
+DashboardBreadcrumb.dashboardSlot = "breadcrumb";
+var DashboardHeader = ({ title, children, className }) => {
+  const { testIdPrefix } = useDashboardContext();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      "data-testid": `${testIdPrefix}-header`,
+      sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap", minHeight: 40 },
+      children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "h1", sx: { fontWeight: 600, mr: 0.5 }, children: title }),
+        children
+      ]
+    }
+  );
+};
+DashboardHeader.displayName = "Dashboard.Header";
+DashboardHeader.dashboardSlot = "header";
+var DashboardFilters = ({ children, className }) => {
+  const { filtersVisible, testIdPrefix } = useDashboardContext();
+  return /* @__PURE__ */ jsx(Collapse, { in: filtersVisible, unmountOnExit: true, "data-testid": `${testIdPrefix}-filters`, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 1.5,
+        p: 2,
+        borderRadius: 1,
+        border: 1,
+        borderColor: "divider",
+        bgcolor: "action.hover"
+      },
+      children
+    }
+  ) });
+};
+DashboardFilters.displayName = "Dashboard.Filters";
+DashboardFilters.dashboardSlot = "filters";
+var DashboardMoreFilters = ({ children, label = "More filters" }) => {
+  const { moreFiltersOpen, toggleMoreFilters, testIdPrefix } = useDashboardContext();
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "text",
+        size: "small",
+        startIcon: /* @__PURE__ */ jsx(FilterIcon, { fontSize: "small" }),
+        endIcon: moreFiltersOpen ? /* @__PURE__ */ jsx(ExpandLessIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(ExpandMoreIcon, { fontSize: "small" }),
+        onClick: toggleMoreFilters,
+        "aria-expanded": moreFiltersOpen,
+        "data-testid": `${testIdPrefix}-more-filters-toggle`,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(Collapse, { in: moreFiltersOpen, unmountOnExit: true, "data-testid": `${testIdPrefix}-more-filters-panel`, children: /* @__PURE__ */ jsx(Box, { sx: { mt: 1.5, p: 2, borderRadius: 1, border: 1, borderColor: "divider", bgcolor: "background.paper" }, children }) })
+  ] });
+};
+DashboardMoreFilters.displayName = "Dashboard.MoreFilters";
+var DashboardBody = ({ children, className }) => {
+  const { testIdPrefix } = useDashboardContext();
+  return /* @__PURE__ */ jsx(Box, { className, "data-testid": `${testIdPrefix}-body`, children });
+};
+DashboardBody.displayName = "Dashboard.Body";
+DashboardBody.dashboardSlot = "body";
+Dashboard.Breadcrumb = DashboardBreadcrumb;
+Dashboard.Header = DashboardHeader;
+Dashboard.Spacer = DashboardSpacer;
+Dashboard.Info = DashboardInfo;
+Dashboard.FilterToggle = DashboardFilterToggle;
+Dashboard.Settings = DashboardSettings;
+Dashboard.Export = DashboardExport;
+Dashboard.Action = DashboardAction;
+Dashboard.Actions = DashboardActions;
+Dashboard.Filters = DashboardFilters;
+Dashboard.MoreFilters = DashboardMoreFilters;
+Dashboard.Body = DashboardBody;
+
+export {
+  markDashboardSlot,
+  Dashboard
+};
+//# sourceMappingURL=chunk-GHXFCMFP.js.map

package/dist/chunk-GJRKWDRR.js

@@ -0,0 +1,89 @@
+import {
+  CHIP_SIZES,
+  CHIP_TRANSITION_EASING,
+  CHIP_TRANSITION_MS,
+  HOVER_LIFT_PX,
+  HOVER_SHADOW
+} from "./chunk-KU6VHNRV.js";
+import {
+  chipKeyAction
+} from "./chunk-BF4FYOAR.js";
+import {
+  shadowInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Chip/Chip.styles.tsx
+import Avatar from "@mui/material/Avatar/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var makeKeyDownHandler = (args) => (event) => {
+  const action = chipKeyAction(event.key, args);
+  if (action === null) return;
+  event.preventDefault();
+  if (action === "delete") {
+    args.onDelete?.();
+    return;
+  }
+  args.onClick?.();
+};
+var avatarFor = (avatar, avatarSrc) => {
+  if (avatar && React.isValidElement(avatar)) {
+    return avatar;
+  }
+  if (avatarSrc) {
+    const { avatarSize } = CHIP_SIZES.medium;
+    return /* @__PURE__ */ jsx(Avatar, { src: avatarSrc, sx: { width: sxRem(avatarSize), height: sxRem(avatarSize) } });
+  }
+  return void 0;
+};
+var hoverShadow = (theme) => `0 ${rems(theme, HOVER_SHADOW.offsetY, HOVER_SHADOW.blur)} ${shadowInk(
+  theme,
+  theme.palette.mode === "dark" ? HOVER_SHADOW.alphaDark : HOVER_SHADOW.alphaLight
+)}`;
+var chipStyles = ({
+  variant,
+  selected,
+  clickable,
+  disabled
+}) => {
+  const lifts = clickable && !disabled;
+  return {
+    // Enhanced styling for outlined variant
+    ...variant === "outlined" && {
+      borderWidth: "1px",
+      borderStyle: "solid",
+      backgroundColor: "transparent"
+    },
+    ...selected && variant === "outlined" && {
+      backgroundColor: (theme) => theme.palette.action.selected
+    },
+    "&:hover": {
+      ...lifts && {
+        transform: (theme) => `translateY(${rem(theme, -HOVER_LIFT_PX)})`,
+        boxShadow: (theme) => hoverShadow(theme)
+      }
+    },
+    "&:active": {
+      ...lifts && {
+        transform: "translateY(0px)"
+      }
+    },
+    transition: `all ${CHIP_TRANSITION_MS / 1e3}s ${CHIP_TRANSITION_EASING}`
+  };
+};
+var iconWithTestId = (icon, testId) => icon && React.isValidElement(icon) ? React.cloneElement(icon, {
+  "data-testid": testId
+}) : void 0;
+
+export {
+  makeKeyDownHandler,
+  avatarFor,
+  chipStyles,
+  iconWithTestId
+};
+//# sourceMappingURL=chunk-GJRKWDRR.js.map

package/dist/chunk-GJRKWDRR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chip/Chip.styles.tsx"],"sourcesContent":["import Avatar from '@mui/material/Avatar/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport type { KeyboardEvent, ReactElement } from 'react';\nimport React from 'react';\n\nimport { chipKeyAction, type ChipKeyArgs } from './Chip.helpers';\nimport { CHIP_SIZES, CHIP_TRANSITION_EASING, CHIP_TRANSITION_MS, HOVER_LIFT_PX, HOVER_SHADOW } from './Chip.metrics';\nimport type { ChipProps } from './Chip.types';\nimport { shadowInk } from '../../../tokens/ink';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\n/**\n * A chip is not a native control, so the two keyboard conventions it stands in\n * for are wired by hand: Delete/Backspace removes it, Enter/Space activates it.\n * The DECISION is `chipKeyAction`, which the native half reads too.\n */\nexport const makeKeyDownHandler =\n  (args: ChipKeyArgs & { onClick?: () => void; onDelete?: () => void }) =>\n  (event: KeyboardEvent): void => {\n    const action = chipKeyAction(event.key, args);\n    if (action === null) return;\n    event.preventDefault();\n    if (action === 'delete') {\n      args.onDelete?.();\n      return;\n    }\n    args.onClick?.();\n  };\n\nexport const avatarFor = (\n  avatar: ChipProps['avatar'],\n  avatarSrc?: string,\n): ReactElement | undefined => {\n  if (avatar && React.isValidElement(avatar)) {\n    return avatar;\n  }\n  if (avatarSrc) {\n    const { avatarSize } = CHIP_SIZES.medium;\n    return <Avatar src={avatarSrc} sx={{ width: sxRem(avatarSize), height: sxRem(avatarSize) }} />;\n  }\n  return undefined;\n};\n\ninterface ChipStyleArgs {\n  variant: ChipProps['variant'];\n  selected?: boolean;\n  clickable?: boolean;\n  disabled?: boolean;\n}\n\n/** The lift's shadow, per mode — the same numbers the native chip reads. */\nconst hoverShadow = (theme: Theme): string =>\n  `0 ${rems(theme, HOVER_SHADOW.offsetY, HOVER_SHADOW.blur)} ${shadowInk(\n    theme,\n    theme.palette.mode === 'dark' ? HOVER_SHADOW.alphaDark : HOVER_SHADOW.alphaLight,\n  )}`;\n\n/**\n * Selection styling uses SEMANTIC palette tokens (not hardcoded rgba). A filled\n * selected chip keeps MUI's solid `color.main` + contrast text (clear active\n * state); an outlined selected chip gets a subtle theme-driven `action.selected`\n * tint so it reads as active without muddying the fill.\n */\nexport const chipStyles = ({\n  variant,\n  selected,\n  clickable,\n  disabled,\n}: ChipStyleArgs): SxProps<Theme> => {\n  const lifts = clickable && !disabled;\n\n  return {\n    // Enhanced styling for outlined variant\n    ...(variant === 'outlined' && {\n      borderWidth: '1px',\n      borderStyle: 'solid',\n      backgroundColor: 'transparent',\n    }),\n    ...(selected &&\n      variant === 'outlined' && {\n        backgroundColor: (theme: Theme) => theme.palette.action.selected,\n      }),\n    '&:hover': {\n      ...(lifts && {\n        transform: (theme: Theme) => `translateY(${rem(theme, -HOVER_LIFT_PX)})`,\n        boxShadow: (theme: Theme) => hoverShadow(theme),\n      }),\n    },\n    '&:active': {\n      ...(lifts && {\n        transform: 'translateY(0px)',\n      }),\n    },\n    transition: `all ${CHIP_TRANSITION_MS / 1000}s ${CHIP_TRANSITION_EASING}`,\n  };\n};\n\nexport const iconWithTestId = (\n  icon: ChipProps['icon'],\n  testId: string,\n): ReactElement | undefined =>\n  icon && React.isValidElement(icon)\n    ? React.cloneElement(icon as ReactElement, {\n        'data-testid': testId,\n      } as Record<string, unknown>)\n    : undefined;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,YAAY;AAGnB,OAAO,WAAW;AAmCP;AAtBJ,IAAM,qBACX,CAAC,SACD,CAAC,UAA+B;AAC9B,QAAM,SAAS,cAAc,MAAM,KAAK,IAAI;AAC5C,MAAI,WAAW,KAAM;AACrB,QAAM,eAAe;AACrB,MAAI,WAAW,UAAU;AACvB,SAAK,WAAW;AAChB;AAAA,EACF;AACA,OAAK,UAAU;AACjB;AAEK,IAAM,YAAY,CACvB,QACA,cAC6B;AAC7B,MAAI,UAAU,MAAM,eAAe,MAAM,GAAG;AAC1C,WAAO;AAAA,EACT;AACA,MAAI,WAAW;AACb,UAAM,EAAE,WAAW,IAAI,WAAW;AAClC,WAAO,oBAAC,UAAO,KAAK,WAAW,IAAI,EAAE,OAAO,MAAM,UAAU,GAAG,QAAQ,MAAM,UAAU,EAAE,GAAG;AAAA,EAC9F;AACA,SAAO;AACT;AAUA,IAAM,cAAc,CAAC,UACnB,KAAK,KAAK,OAAO,aAAa,SAAS,aAAa,IAAI,CAAC,IAAI;AAAA,EAC3D;AAAA,EACA,MAAM,QAAQ,SAAS,SAAS,aAAa,YAAY,aAAa;AACxE,CAAC;AAQI,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqC;AACnC,QAAM,QAAQ,aAAa,CAAC;AAE5B,SAAO;AAAA;AAAA,IAEL,GAAI,YAAY,cAAc;AAAA,MAC5B,aAAa;AAAA,MACb,aAAa;AAAA,MACb,iBAAiB;AAAA,IACnB;AAAA,IACA,GAAI,YACF,YAAY,cAAc;AAAA,MACxB,iBAAiB,CAAC,UAAiB,MAAM,QAAQ,OAAO;AAAA,IAC1D;AAAA,IACF,WAAW;AAAA,MACT,GAAI,SAAS;AAAA,QACX,WAAW,CAAC,UAAiB,cAAc,IAAI,OAAO,CAAC,aAAa,CAAC;AAAA,QACrE,WAAW,CAAC,UAAiB,YAAY,KAAK;AAAA,MAChD;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,GAAI,SAAS;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,YAAY,OAAO,qBAAqB,GAAI,KAAK,sBAAsB;AAAA,EACzE;AACF;AAEO,IAAM,iBAAiB,CAC5B,MACA,WAEA,QAAQ,MAAM,eAAe,IAAI,IAC7B,MAAM,aAAa,MAAsB;AAAA,EACvC,eAAe;AACjB,CAA4B,IAC5B;","names":[]}

package/dist/chunk-GRDPGHQJ.js

@@ -0,0 +1,165 @@
+import {
+  Sheet
+} from "./chunk-QB3TVUPD.js";
+import {
+  Dialog
+} from "./chunk-L4UP5VYS.js";
+import {
+  Button
+} from "./chunk-2EAAWOZ2.js";
+import {
+  accentFor
+} from "./chunk-TCAQOUIB.js";
+
+// src/components/navigation/AppHeader/AppHeader.details.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 useMediaQuery from "@mui/material/useMediaQuery/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DIALOG_WIDTH = 460;
+var XXS_MAX_WIDTH = 360;
+function sheetHeight(xxs) {
+  return { height: "auto", maxHeight: xxs ? "100dvh" : "90dvh" };
+}
+function usesSheet(presentation, compact) {
+  if (presentation === "sheet") return true;
+  if (presentation === "dialog") return false;
+  return compact;
+}
+var DetailRow = ({
+  row,
+  last,
+  dataTestId
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": `${dataTestId}-row`,
+      "data-row": row.id ?? row.label,
+      sx: {
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        gap: 2,
+        py: 1.5,
+        borderBottom: last ? "none" : `1px solid ${theme.palette.divider}`
+      },
+      children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", component: "span", sx: { flex: "0 0 auto" }, children: row.label }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body1",
+            component: "span",
+            sx: {
+              minWidth: 0,
+              textAlign: "right",
+              fontWeight: row.tone ? 700 : 500,
+              color: row.tone ? accentFor(theme, row.tone).main : "text.primary",
+              // Newlines in a value are meaningful — an address is two lines.
+              whiteSpace: "pre-line"
+            },
+            children: row.value
+          }
+        )
+      ]
+    }
+  );
+};
+var DetailsBody = ({ rows, children, dataTestId }) => /* @__PURE__ */ jsxs(Box, { "data-testid": `${dataTestId}-body`, children: [
+  (rows ?? []).map((row, index) => /* @__PURE__ */ jsx(
+    DetailRow,
+    {
+      row,
+      last: index === (rows?.length ?? 0) - 1 && !children,
+      dataTestId
+    },
+    row.id ?? row.label
+  )),
+  children
+] });
+var DetailsAction = ({ action, dataTestId, padded = false }) => action ? /* @__PURE__ */ jsx(Box, { sx: padded ? { pt: 2 } : void 0, children: /* @__PURE__ */ jsx(
+  Button,
+  {
+    variant: "solid",
+    color: action.color ?? "primary",
+    size: "lg",
+    fullWidth: true,
+    disabled: action.disabled,
+    onClick: action.onClick,
+    dataTestId: action.dataTestId ?? `${dataTestId}-action`,
+    children: action.label
+  }
+) }) : null;
+var AppHeaderDetails = ({
+  open,
+  onClose,
+  title,
+  subtitle,
+  rows,
+  children,
+  action,
+  presentation = "auto",
+  breakpoint = "sm",
+  className,
+  dataTestId = "app-header-details"
+}) => {
+  const theme = useTheme();
+  const asSheet = usesSheet(presentation, useMediaQuery(theme.breakpoints.down(breakpoint)));
+  const xxs = useMediaQuery(`(max-width:${XXS_MAX_WIDTH - 0.05}px)`);
+  const description = typeof subtitle === "string" ? subtitle : void 0;
+  const richSubtitle = description === void 0 ? subtitle : null;
+  const body = /* @__PURE__ */ jsx(DetailsBody, { rows, dataTestId, children });
+  const footer = /* @__PURE__ */ jsx(DetailsAction, { action, dataTestId });
+  if (asSheet) {
+    return /* @__PURE__ */ jsxs(
+      Sheet,
+      {
+        open,
+        onClose,
+        onOpenChange: (next) => !next && onClose(),
+        position: "bottom",
+        size: "md",
+        style: sheetHeight(xxs),
+        className,
+        title,
+        description,
+        showCloseButton: true,
+        rounded: true,
+        footer,
+        dataTestId,
+        children: [
+          richSubtitle,
+          body
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onClose,
+      title,
+      description,
+      showCloseButton: true,
+      fullWidth: true,
+      className,
+      dataTestId,
+      PaperProps: { sx: { maxWidth: DIALOG_WIDTH, borderRadius: 3 } },
+      children: [
+        richSubtitle,
+        body,
+        /* @__PURE__ */ jsx(DetailsAction, { action, dataTestId, padded: true })
+      ]
+    }
+  );
+};
+AppHeaderDetails.displayName = "AppHeaderDetails";
+
+export {
+  AppHeaderDetails
+};
+//# sourceMappingURL=chunk-GRDPGHQJ.js.map

package/dist/chunk-GS3RP2QE.js

@@ -0,0 +1,37 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  Button
+} from "./chunk-2EAAWOZ2.js";
+import {
+  fieldHeight
+} from "./chunk-CGO452DC.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/total-form/SubmitButton.tsx
+import { jsx } from "react/jsx-runtime";
+function SubmitButton({
+  children,
+  dataTestId = "total-form-submit"
+}) {
+  const { submitting } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "submit",
+      dataTestId,
+      loading: submitting,
+      disabled: submitting,
+      sx: { height: fieldHeight, px: 2, fontSize: sxRem(16), flexShrink: 0, whiteSpace: "nowrap" },
+      children
+    }
+  );
+}
+
+export {
+  SubmitButton
+};
+//# sourceMappingURL=chunk-GS3RP2QE.js.map

package/dist/chunk-GY4NBSCN.js

@@ -0,0 +1,120 @@
+import {
+  fieldTextFieldStyles
+} from "./chunk-CGO452DC.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-day-input.tsx
+import TextField from "@mui/material/TextField/index.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var SEGMENT_WIDTH = { year: 4, month: 2, day: 2 };
+function segmentsOf(mask) {
+  const tokens = mask.split(/[^A-Za-z]+/).filter(Boolean);
+  if (tokens.length !== 3) return ["day", "month", "year"];
+  const segments = tokens.map((token) => {
+    const head = token.slice(0, 1).toLowerCase();
+    if (head === "y" || head === "a") return "year";
+    return head === "m" ? "month" : "day";
+  });
+  return new Set(segments).size === 3 ? segments : ["day", "month", "year"];
+}
+var separatorOf = (mask) => mask.replace(/[A-Za-z]/g, "").slice(0, 1) || "/";
+function isoToMasked(iso, mask) {
+  const parts = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
+  if (!parts) return "";
+  const value = {
+    year: parts[1],
+    month: parts[2],
+    day: parts[3]
+  };
+  return segmentsOf(mask).map((segment) => value[segment]).join(separatorOf(mask));
+}
+function maskedToIso(text, mask) {
+  const segments = segmentsOf(mask);
+  const digits = text.replace(/\D/g, "");
+  if (digits.length !== 8) return "";
+  const value = {};
+  let cursor = 0;
+  for (const segment of segments) {
+    value[segment] = digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]);
+    cursor += SEGMENT_WIDTH[segment];
+  }
+  const year = Number(value.year);
+  const month = Number(value.month);
+  const day = Number(value.day);
+  if (year < 1e3) return "";
+  const probe = new Date(Date.UTC(year, month - 1, day));
+  if (probe.getUTCMonth() !== month - 1 || probe.getUTCDate() !== day) return "";
+  return `${value.year}-${value.month}-${value.day}`;
+}
+function maskDate(raw, mask) {
+  const segments = segmentsOf(mask);
+  const separator = separatorOf(mask);
+  const digits = raw.replace(/\D/g, "").slice(0, 8);
+  const out = [];
+  let cursor = 0;
+  for (const segment of segments) {
+    if (cursor >= digits.length) break;
+    out.push(digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]));
+    cursor += SEGMENT_WIDTH[segment];
+  }
+  return out.join(separator);
+}
+function dayInputProps(testId, describedBy) {
+  return {
+    "data-testid": testId,
+    maxLength: 10,
+    inputMode: "numeric",
+    autoComplete: "off",
+    ...describedBy ? { "aria-describedby": describedBy } : {}
+  };
+}
+function DayBoundInput({
+  label,
+  value,
+  onChange,
+  testId,
+  error = false,
+  describedBy,
+  mask
+}) {
+  const applied = value ?? "";
+  const [text, setText] = useState(() => isoToMasked(applied, mask));
+  useEffect(() => {
+    setText(
+      (current) => maskedToIso(current, mask) === applied ? current : isoToMasked(applied, mask)
+    );
+  }, [applied, mask]);
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      size: "small",
+      type: "text",
+      label,
+      error,
+      placeholder: mask,
+      value: text,
+      onChange: (event) => {
+        const next = maskDate(event.target.value, mask);
+        setText(next);
+        if (next === "") return onChange(void 0);
+        const iso = maskedToIso(next, mask);
+        if (iso) onChange(iso);
+      },
+      onBlur: () => setText(isoToMasked(applied, mask)),
+      InputLabelProps: { shrink: true },
+      inputProps: dayInputProps(testId, describedBy),
+      sx: [{ width: sxRem(165) }, fieldTextFieldStyles]
+    }
+  );
+}
+
+export {
+  isoToMasked,
+  maskedToIso,
+  maskDate,
+  DayBoundInput
+};
+//# sourceMappingURL=chunk-GY4NBSCN.js.map

package/dist/chunk-GY4NBSCN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-day-input.tsx"],"sourcesContent":["'use client';\n\n/**\n * A day bound as a MASKED `dd/mm/aaaa` text field, replacing `<input type=\"date\">`.\n *\n * The native control is three separate segments wearing one box. Typing a date\n * means filling a segment, being jumped to the next, and starting over — and\n * which segment comes first is the BROWSER's locale, not ours, so the same\n * field reads `dd/mm/aaaa` for one merchant and `mm/dd/yyyy` for the next with\n * nothing in our code saying which. There is no way to type a date as one\n * continuous run of digits, which is how people actually type dates.\n *\n * A mask gives that back: eight digits straight through, separators inserted as\n * you go, backspace walking back through them.\n *\n * Measured, driving both controls in Chromium with the same eight keystrokes\n * (`01072026`, one `keydown` at a time):\n *\n *   native  →  field ends EMPTY, no filter applied, 0 requests\n *   masked  →  field reads `01/07/2026`, filter applied, 1 request\n *\n * The native result is the whole complaint: you type a date and nothing lands.\n *\n * The second half of the fix is WHEN the bound is written. A partially-typed\n * year is itself a valid date — `2026` passes through `0002`, `0020`, `0202` on\n * the way — so committing on every keystroke would send the grid off to fetch\n * years nobody meant. A bound is written only once the text is a WHOLE, real\n * date, which is what keeps the run above at one request rather than four.\n */\nimport TextField from '@mui/material/TextField/index.js';\nimport React, { useEffect, useState } from 'react';\nimport { fieldTextFieldStyles } from '../../../tokens/field-height';\nimport { sxRem } from '../../../tokens/relative';\n\n\n/**\n * THE MASK IS THE ORDER, and both halves of this file read it.\n *\n * The placeholder a host supplies (`copy.filters.dayMask` — `dd/mm/aaaa` for\n * pt-BR, `mm/dd/yyyy` for en-US) is not decoration: it tells the reader which\n * segment comes first. Everything below therefore derives the segment order\n * FROM that same string, so the shape on screen and the shape the parser\n * expects cannot disagree.\n *\n * They did disagree, and the failure was silent in the worst direction. The\n * mask/parse pair was hardcoded day-first (the `Br` in the old names was\n * accurate) while the placeholder followed the copy pack — so under `en-US` the\n * field ASKED for `mm/dd/yyyy`, and a reader who typed exactly that got a day\n * of 12 and a month of 31, which is not a date, which commits nothing. No\n * error, no filter, a full list that reads like an answer. The en-US pack's own\n * comment already said the mask \"is the shape that gets a date entered\n * backwards\"; nothing enforced it.\n */\n\n/** What one segment of a mask is, and how many digits it takes. */\ntype DaySegment = 'year' | 'month' | 'day';\nconst SEGMENT_WIDTH: Readonly<Record<DaySegment, number>> = { year: 4, month: 2, day: 2 };\n\n/**\n * The segments a mask asks for, in its own order.\n *\n * Keyed on each token's FIRST letter so one rule covers every spelling a host\n * might use — `aaaa`/`yyyy` for the year, `mm` for the month, `dd`/`tt` for the\n * day. An unreadable mask falls back to day-first rather than throwing: this\n * runs on every keystroke, and a field that renders is recoverable where one\n * that crashes the grid is not.\n */\nfunction segmentsOf(mask: string): readonly DaySegment[] {\n  const tokens = mask.split(/[^A-Za-z]+/).filter(Boolean);\n  if (tokens.length !== 3) return ['day', 'month', 'year'];\n  const segments = tokens.map((token): DaySegment => {\n    const head = token.slice(0, 1).toLowerCase();\n    if (head === 'y' || head === 'a') return 'year';\n    return head === 'm' ? 'month' : 'day';\n  });\n  // A mask naming the same segment twice describes no date. Fall back rather\n  // than build a parser that can never succeed.\n  return new Set(segments).size === 3 ? segments : ['day', 'month', 'year'];\n}\n\n/** The separator the mask uses, defaulting to `/`. */\nconst separatorOf = (mask: string): string => mask.replace(/[A-Za-z]/g, '').slice(0, 1) || '/';\n\n/** `AAAA-MM-DD` (the wire) → the mask's own order (what the reader sees). */\nexport function isoToMasked(iso: string, mask: string): string {\n  const parts = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(iso);\n  if (!parts) return '';\n  const value: Record<DaySegment, string> = {\n    year: parts[1] as string,\n    month: parts[2] as string,\n    day: parts[3] as string,\n  };\n  return segmentsOf(mask)\n    .map((segment) => value[segment])\n    .join(separatorOf(mask));\n}\n\n/**\n * The mask's order → `AAAA-MM-DD`, but ONLY for a day that exists.\n *\n * `31/02/2026` parses fine as three numbers and is not a date, and `Date` would\n * silently roll it into March rather than reject it — so the round trip through\n * UTC is the check: if the month or day comes back changed, the input was not a\n * day.\n */\nexport function maskedToIso(text: string, mask: string): string {\n  const segments = segmentsOf(mask);\n  const digits = text.replace(/\\D/g, '');\n  if (digits.length !== 8) return '';\n  const value = {} as Record<DaySegment, string>;\n  let cursor = 0;\n  for (const segment of segments) {\n    value[segment] = digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]);\n    cursor += SEGMENT_WIDTH[segment];\n  }\n  const year = Number(value.year);\n  const month = Number(value.month);\n  const day = Number(value.day);\n  if (year < 1000) return '';\n  const probe = new Date(Date.UTC(year, month - 1, day));\n  if (probe.getUTCMonth() !== month - 1 || probe.getUTCDate() !== day) return '';\n  return `${value.year}-${value.month}-${value.day}`;\n}\n\n/**\n * Digits only, capped at the mask's width, with the separators put back as you\n * type.\n *\n * Deriving the whole string from the digits — rather than editing the text in\n * place — is what makes backspace behave. Four digits of `dd/mm/aaaa` render as\n * `06/08`, not `06/08/`, so deleting the first digit of the year removes the\n * trailing separator with it instead of leaving a dead keystroke that changes\n * nothing.\n */\nexport function maskDate(raw: string, mask: string): string {\n  const segments = segmentsOf(mask);\n  const separator = separatorOf(mask);\n  const digits = raw.replace(/\\D/g, '').slice(0, 8);\n  const out: string[] = [];\n  let cursor = 0;\n  for (const segment of segments) {\n    if (cursor >= digits.length) break;\n    out.push(digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]));\n    cursor += SEGMENT_WIDTH[segment];\n  }\n  return out.join(separator);\n}\n\n/**\n * What has to land on the `<input>` itself rather than on the `TextField`.\n *\n * Anything `TextField` does not recognise is spread onto its root `FormControl`\n * div. `inputMode` went up there once: the attribute sat on a non-editable\n * wrapper, meant nothing, and the phone went on offering the letter keyboard\n * for a field that only takes digits (the `dd/mm/aaaa` hint under a QWERTY\n * layout). Only the `<input>` this reaches decides which keypad opens — and the\n * same is true of `aria-describedby`, which on the wrapper points at a\n * description no screen reader will read out for the field.\n *\n * `numeric` and not `tel`: both raise a keypad, but the phone one is a dialler\n * with `+ * #` on it — keys that cannot occur in a date. A paste carrying\n * separators still lands, because the MASK is what filters the text; the keypad\n * only narrows what a thumb can reach for.\n *\n * Autofill off for the same reason: the browser's saved-value strip covers the\n * keypad to suggest names and addresses, none of which are a date, and none of\n * which the mask would keep.\n */\nfunction dayInputProps(testId: string, describedBy: string | undefined) {\n  return {\n    'data-testid': testId,\n    maxLength: 10,\n    inputMode: 'numeric' as const,\n    autoComplete: 'off',\n    ...(describedBy ? { 'aria-describedby': describedBy } : {}),\n  };\n}\n\n/**\n * One end of a day window. The BOUND stays `AAAA-MM-DD` — the form the backend's\n * inclusive day comparison already speaks, and the form the chip label reads —\n * so only the typing surface changes.\n */\nexport function DayBoundInput({\n  label,\n  value,\n  onChange,\n  testId,\n  error = false,\n  describedBy,\n  mask,\n}: {\n  label: string;\n  /** The applied bound, `AAAA-MM-DD`, or undefined when this end is open. */\n  value: string | undefined;\n  onChange: (bound: string | undefined) => void;\n  testId: string;\n  /**\n   * Paint the field as rejected. It only ever writes a real day by itself, so\n   * this is for a caller judging the PAIR: a window whose end precedes its\n   * start is two valid days and one impossible period, and the field it was\n   * typed into is the only place to say which half is being complained about.\n   */\n  error?: boolean;\n  /** Id of the element carrying that complaint, so it is read WITH the field. */\n  describedBy?: string;\n  /**\n   * The day mask, which IS the placeholder — so the expected ORDER is on\n   * screen before the first keystroke rather than discovered by getting it\n   * wrong. `dd/mm/aaaa` is one locale's order and one locale's letters.\n   *\n   * A PROP rather than a context read: this field has two callers, and only\n   * one of them is inside DataViews. `DateRangePicker` mounts it standalone\n   * with its own message table, so a context read here throws for every host\n   * of that picker — which is exactly what it did.\n   */\n  mask: string;\n}): React.JSX.Element {\n  const applied = value ?? '';\n  const [text, setText] = useState(() => isoToMasked(applied, mask));\n\n  // The bound is the APPLIED filter; `text` is what is being typed. Re-sync only\n  // when the applied value moved somewhere the text does not already mean — a\n  // \"Limpar\", a saved view, the other pill resetting the pair. Without that\n  // guard the field's own write bounces straight back mid-edit and resets the\n  // caret, which is the native control's worst habit reproduced by hand.\n  useEffect(() => {\n    setText((current) =>\n      maskedToIso(current, mask) === applied ? current : isoToMasked(applied, mask),\n    );\n  }, [applied, mask]);\n\n  return (\n    <TextField\n      size=\"small\"\n      type=\"text\"\n      label={label}\n      error={error}\n      placeholder={mask}\n      value={text}\n      onChange={(event) => {\n        const next = maskDate(event.target.value, mask);\n        setText(next);\n        // Emptying clears the bound. A COMPLETE day applies it. A partial one\n        // does NEITHER — it leaves whatever is applied alone, so typing is never\n        // fought and a half-typed year never reaches the backend.\n        if (next === '') return onChange(undefined);\n        const iso = maskedToIso(next, mask);\n        if (iso) onChange(iso);\n      }}\n      // Leaving a half-typed (or impossible) date on screen would show a filter\n      // the list is not actually using. On blur the field snaps back to what IS\n      // applied; a complete date already equals it, so this only ever tidies.\n      onBlur={() => setText(isoToMasked(applied, mask))}\n      // The placeholder occupies the space an un-shrunk label would render into.\n      InputLabelProps={{ shrink: true }}\n      inputProps={dayInputProps(testId, describedBy)}\n      sx={[{ width: sxRem(165) }, fieldTextFieldStyles]}\n    />\n  );\n}\n"],"mappings":"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","names":[]}