@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-2FM5SUQV.js

@@ -0,0 +1,97 @@
+import {
+  getSizeStyles
+} from "./chunk-KJDBY2KN.js";
+import {
+  BADGE_CONTENT_GAP,
+  BADGE_SIZES
+} from "./chunk-PYC4CWCQ.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Badge/BadgeContent.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import IconButton from "@mui/material/IconButton/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx } from "react/jsx-runtime";
+var CLOSE_ICON_SIZES = Object.fromEntries(
+  Object.entries(BADGE_SIZES).map(([size, metrics]) => [size, metrics.closeIconSize])
+);
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `badge-${suffix}`;
+var BadgeIcon = ({
+  icon,
+  size,
+  testId
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-testid": testId,
+      style: {
+        fontSize: rem(theme, getSizeStyles(theme, size).step.iconSize),
+        display: "inline-flex",
+        alignItems: "center"
+      },
+      children: icon
+    },
+    "icon"
+  );
+};
+var BadgeCloseButton = ({
+  size,
+  testId,
+  onClose
+}) => /* @__PURE__ */ jsx(
+  IconButton,
+  {
+    size: "small",
+    onClick: onClose,
+    "data-testid": testId,
+    sx: {
+      p: 0,
+      ml: 0.5,
+      color: "inherit",
+      "& svg": { fontSize: sxRem(CLOSE_ICON_SIZES[size] ?? BADGE_SIZES.lg.closeIconSize) },
+      "&:hover": { opacity: 0.8 }
+    },
+    children: /* @__PURE__ */ jsx(CloseIcon, {})
+  },
+  "close"
+);
+var BadgeRun = ({ children }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", alignItems: "center", gap: rem(theme, BADGE_CONTENT_GAP) }, children });
+};
+var buildBadgeContent = ({
+  variant,
+  size,
+  icon,
+  closable,
+  dataTestId,
+  baseContent,
+  onClose
+}) => {
+  if (variant === "dot") return "";
+  const testId = makeTestId(dataTestId);
+  const parts = [];
+  if (icon) parts.push(/* @__PURE__ */ jsx(BadgeIcon, { icon, size, testId: testId("icon") }, "icon"));
+  if (baseContent !== null && baseContent !== void 0) {
+    parts.push(
+      /* @__PURE__ */ jsx("span", { "data-testid": testId("content"), children: baseContent }, "content")
+    );
+  }
+  if (closable && !variant.includes("dot")) {
+    parts.push(
+      /* @__PURE__ */ jsx(BadgeCloseButton, { size, testId: testId("close"), onClose }, "close")
+    );
+  }
+  if (parts.length === 0) return null;
+  return /* @__PURE__ */ jsx(BadgeRun, { children: parts });
+};
+
+export {
+  buildBadgeContent
+};
+//# sourceMappingURL=chunk-2FM5SUQV.js.map

package/dist/chunk-2FM5SUQV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Badge/BadgeContent.tsx"],"sourcesContent":["import CloseIcon from '@mui/icons-material/Close';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { FC, ReactNode } from 'react';\nimport React from 'react';\n\nimport { BADGE_CONTENT_GAP, BADGE_SIZES } from './Badge.metrics';\nimport { getSizeStyles } from './Badge.styles';\nimport type { BadgeSize } from './Badge.types';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n// Derived from the shared metrics: `xl` takes `lg`'s glyph, which is what the\n// hand-written map did through its `?? CLOSE_ICON_SIZES.lg` fallback.\nconst CLOSE_ICON_SIZES: Record<string, number> = Object.fromEntries(\n  Object.entries(BADGE_SIZES).map(([size, metrics]) => [size, metrics.closeIconSize]),\n);\n\nconst makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `badge-${suffix}`;\n\nconst BadgeIcon: FC<{ icon: ReactNode; size: BadgeSize; testId: string }> = ({\n  icon,\n  size,\n  testId,\n}) => {\n  const theme = useTheme();\n  return (\n    <span\n      key=\"icon\"\n      data-testid={testId}\n      style={{\n        fontSize: rem(theme, getSizeStyles(theme, size).step.iconSize),\n        display: 'inline-flex',\n        alignItems: 'center',\n      }}\n    >\n      {icon}\n    </span>\n  );\n};\n\nconst BadgeCloseButton: FC<{ size: BadgeSize; testId: string; onClose: (e: React.MouseEvent) => void }> = ({\n  size,\n  testId,\n  onClose,\n}) => (\n  <IconButton\n    key=\"close\"\n    size=\"small\"\n    onClick={onClose}\n    data-testid={testId}\n    sx={{\n      p: 0,\n      ml: 0.5,\n      color: 'inherit',\n      '& svg': { fontSize: sxRem(CLOSE_ICON_SIZES[size] ?? BADGE_SIZES.lg.closeIconSize) },\n      '&:hover': { opacity: 0.8 },\n    }}\n  >\n    <CloseIcon />\n  </IconButton>\n);\n\n/** The row the parts sit in, `BADGE_CONTENT_GAP` apart. */\nconst BadgeRun: FC<{ children: ReactNode }> = ({ children }) => {\n  const theme = useTheme();\n  return (\n    <span style={{ display: 'inline-flex', alignItems: 'center', gap: rem(theme, BADGE_CONTENT_GAP) }}>{children}</span>\n  );\n};\n\n// The badge's inner run: optional icon, the content itself, optional close\n// button. A dot badge shows none of it.\nexport const buildBadgeContent = ({\n  variant,\n  size,\n  icon,\n  closable,\n  dataTestId,\n  baseContent,\n  onClose,\n}: {\n  variant: string;\n  size: BadgeSize;\n  icon?: ReactNode;\n  closable?: boolean;\n  dataTestId?: string;\n  baseContent: ReactNode;\n  onClose: (e: React.MouseEvent) => void;\n}): ReactNode => {\n  if (variant === 'dot') return '';\n\n  const testId = makeTestId(dataTestId);\n  const parts: ReactNode[] = [];\n\n  if (icon) parts.push(<BadgeIcon key=\"icon\" icon={icon} size={size} testId={testId('icon')} />);\n\n  if (baseContent !== null && baseContent !== undefined) {\n    parts.push(\n      <span key=\"content\" data-testid={testId('content')}>\n        {baseContent}\n      </span>,\n    );\n  }\n\n  if (closable && !variant.includes('dot')) {\n    parts.push(\n      <BadgeCloseButton key=\"close\" size={size} testId={testId('close')} onClose={onClose} />,\n    );\n  }\n\n  if (parts.length === 0) return null;\n\n  return <BadgeRun>{parts}</BadgeRun>;\n};\n"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,eAAe;AACtB,OAAO,gBAAgB;AACvB,SAAS,gBAAgB;AA2BrB;AAhBJ,IAAM,mBAA2C,OAAO;AAAA,EACtD,OAAO,QAAQ,WAAW,EAAE,IAAI,CAAC,CAAC,MAAM,OAAO,MAAM,CAAC,MAAM,QAAQ,aAAa,CAAC;AACpF;AAEA,IAAM,aACJ,CAAC,eACD,CAAC,WACC,aAAa,GAAG,UAAU,IAAI,MAAM,KAAK,SAAS,MAAM;AAE5D,IAAM,YAAsE,CAAC;AAAA,EAC3E;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,eAAa;AAAA,MACb,OAAO;AAAA,QACL,UAAU,IAAI,OAAO,cAAc,OAAO,IAAI,EAAE,KAAK,QAAQ;AAAA,QAC7D,SAAS;AAAA,QACT,YAAY;AAAA,MACd;AAAA,MAEC;AAAA;AAAA,IARG;AAAA,EASN;AAEJ;AAEA,IAAM,mBAAoG,CAAC;AAAA,EACzG;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IAEC,MAAK;AAAA,IACL,SAAS;AAAA,IACT,eAAa;AAAA,IACb,IAAI;AAAA,MACF,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,SAAS,EAAE,UAAU,MAAM,iBAAiB,IAAI,KAAK,YAAY,GAAG,aAAa,EAAE;AAAA,MACnF,WAAW,EAAE,SAAS,IAAI;AAAA,IAC5B;AAAA,IAEA,8BAAC,aAAU;AAAA;AAAA,EAZP;AAaN;AAIF,IAAM,WAAwC,CAAC,EAAE,SAAS,MAAM;AAC9D,QAAM,QAAQ,SAAS;AACvB,SACE,oBAAC,UAAK,OAAO,EAAE,SAAS,eAAe,YAAY,UAAU,KAAK,IAAI,OAAO,iBAAiB,EAAE,GAAI,UAAS;AAEjH;AAIO,IAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAQiB;AACf,MAAI,YAAY,MAAO,QAAO;AAE9B,QAAM,SAAS,WAAW,UAAU;AACpC,QAAM,QAAqB,CAAC;AAE5B,MAAI,KAAM,OAAM,KAAK,oBAAC,aAAqB,MAAY,MAAY,QAAQ,OAAO,MAAM,KAApD,MAAuD,CAAE;AAE7F,MAAI,gBAAgB,QAAQ,gBAAgB,QAAW;AACrD,UAAM;AAAA,MACJ,oBAAC,UAAmB,eAAa,OAAO,SAAS,GAC9C,yBADO,SAEV;AAAA,IACF;AAAA,EACF;AAEA,MAAI,YAAY,CAAC,QAAQ,SAAS,KAAK,GAAG;AACxC,UAAM;AAAA,MACJ,oBAAC,oBAA6B,MAAY,QAAQ,OAAO,OAAO,GAAG,WAA7C,OAA+D;AAAA,IACvF;AAAA,EACF;AAEA,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,SAAO,oBAAC,YAAU,iBAAM;AAC1B;","names":[]}

package/dist/chunk-2JNHWKQK.js

@@ -0,0 +1,159 @@
+import {
+  CategoryQuickActions
+} from "./chunk-PGGYZU7Q.js";
+import {
+  CategoryPanelList
+} from "./chunk-6RLCBNDV.js";
+import {
+  CategoryPanelHead,
+  CategoryPinnedTray
+} from "./chunk-ORRI6FMN.js";
+import {
+  CategoryMultiFoot,
+  CategorySingleFoot
+} from "./chunk-KN5J3NEZ.js";
+import {
+  removeChip
+} from "./chunk-PN4HVM43.js";
+import {
+  panelSx,
+  sheetSx
+} from "./chunk-JC22FNFA.js";
+
+// src/components/form/CategorySelect/CategoryPanel.tsx
+import Box from "@mui/material/Box/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CategoryPanel({
+  state,
+  chips,
+  rowIds,
+  changed,
+  single,
+  sheet,
+  loading,
+  showCounts,
+  allowParentSelection,
+  ariaLabel,
+  onKeyDown,
+  onActivateCategory,
+  onActivateSubcategory,
+  onApply,
+  onCancel,
+  onCreateCategory,
+  searchInputRef,
+  listRef,
+  dataTestId,
+  copy
+}) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      onKeyDown,
+      role: "dialog",
+      "aria-label": ariaLabel,
+      "data-testid": `${dataTestId}-panel`,
+      sx: (theme) => ({ ...panelSx(theme), ...sheet ? sheetSx(theme) : {} }),
+      children: [
+        /* @__PURE__ */ jsx(
+          CategoryPanelHead,
+          {
+            copy,
+            query: state.query,
+            placeholder: single ? copy.search.placeholderSingle : copy.search.placeholderMulti,
+            sheet,
+            quickActions: single ? void 0 : /* @__PURE__ */ jsx(CategoryQuickActions, { state, dataTestId, copy }),
+            onQueryChange: state.setQuery,
+            searchInputRef,
+            dataTestId
+          }
+        ),
+        !single && !loading && /* @__PURE__ */ jsx(PinnedTray, { state, chips, dataTestId, copy }),
+        /* @__PURE__ */ jsx(
+          CategoryPanelList,
+          {
+            copy,
+            groups: state.visibleGroups,
+            query: state.query,
+            draft: state.draft,
+            rowIds,
+            activeIndex: state.activeIndex,
+            sheet,
+            single,
+            loading,
+            showCounts,
+            allowParentSelection,
+            deepTree: state.deepTree,
+            isExpanded: state.isExpanded,
+            onToggleExpanded: state.toggleExpanded,
+            onActivateCategory,
+            onActivateSubcategory,
+            onClearQuery: () => state.setQuery(""),
+            onCreateCategory,
+            listRef,
+            dataTestId
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PanelFooter,
+          {
+            state,
+            changed,
+            single,
+            sheet,
+            copy,
+            onApply,
+            onCancel,
+            dataTestId
+          }
+        )
+      ]
+    }
+  );
+}
+function PinnedTray({
+  state,
+  chips,
+  dataTestId,
+  copy
+}) {
+  return /* @__PURE__ */ jsx(
+    CategoryPinnedTray,
+    {
+      copy,
+      chips,
+      onRemove: (chipId) => state.setDraft(removeChip(state.allGroups, chipId, state.draft)),
+      dataTestId
+    }
+  );
+}
+function PanelFooter({
+  state,
+  changed,
+  single,
+  sheet,
+  onApply,
+  onCancel,
+  dataTestId,
+  copy
+}) {
+  if (single) {
+    return /* @__PURE__ */ jsx(CategorySingleFoot, { sheet, onCancel, dataTestId, copy });
+  }
+  return /* @__PURE__ */ jsx(
+    CategoryMultiFoot,
+    {
+      count: state.draft.size,
+      changed,
+      sheet,
+      copy,
+      onClear: () => state.setDraft(/* @__PURE__ */ new Set()),
+      onApply,
+      dataTestId
+    }
+  );
+}
+
+export {
+  CategoryPanel
+};
+//# sourceMappingURL=chunk-2JNHWKQK.js.map

package/dist/chunk-2LIRGFEK.js

@@ -0,0 +1,72 @@
+import {
+  activeQuickRangeId,
+  defaultMessages,
+  resolveDayRange,
+  resolveQuickRanges
+} from "./chunk-OJ2XR3WH.js";
+import {
+  toDayString,
+  todayIn
+} from "./chunk-FRAVVI4A.js";
+
+// src/components/form/DateRangePicker/DateRangePicker.hooks.ts
+import { useId, useMemo, useState } from "react";
+function useDateRangePicker({
+  value,
+  onChange,
+  timeZone,
+  now,
+  maxRangeDays,
+  weekStartsOn,
+  quickRanges,
+  messages
+}) {
+  const statusId = useId();
+  const [viewNonce, setViewNonce] = useState(0);
+  const copy = useMemo(() => ({ ...defaultMessages(), ...messages }), [messages]);
+  const today = useMemo(() => todayIn(timeZone, now ?? /* @__PURE__ */ new Date()), [timeZone, now]);
+  const options = useMemo(
+    () => resolveQuickRanges(quickRanges, { today, weekStartsOn }, maxRangeDays),
+    [quickRanges, today, weekStartsOn, maxRangeDays]
+  );
+  const status = useMemo(() => resolveDayRange(value, maxRangeDays), [value, maxRangeDays]);
+  const emit = (next, source, quickRangeId) => {
+    onChange(next, {
+      source,
+      ...quickRangeId ? { quickRangeId } : {},
+      // Judged here, once. A caller left to re-derive "is this usable" is a
+      // second opinion able to disagree with the message on screen.
+      status: resolveDayRange(next, maxRangeDays)
+    });
+  };
+  return {
+    copy,
+    options,
+    activeId: activeQuickRangeId(options, value),
+    status,
+    statusId,
+    viewNonce,
+    pickQuick: (option) => {
+      setViewNonce((nonce) => nonce + 1);
+      emit({ from: option.window.from, to: option.window.to }, "quick", option.id);
+    },
+    editBound: (which, bound) => {
+      setViewNonce((nonce) => nonce + 1);
+      emit({ ...value, [which]: bound }, which);
+    },
+    pickOnCalendar: (range) => {
+      emit(
+        {
+          from: range.start ? toDayString(range.start) : null,
+          to: range.end ? toDayString(range.end) : null
+        },
+        "calendar"
+      );
+    }
+  };
+}
+
+export {
+  useDateRangePicker
+};
+//# sourceMappingURL=chunk-2LIRGFEK.js.map

package/dist/chunk-2XX45PC5.js

@@ -0,0 +1,83 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  CepField
+} from "./chunk-F6D6HXZU.js";
+
+// src/components/form/total-form/Fields/CepField.tsx
+import { useCallback, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var PARTS = ["street", "neighborhood", "city", "state"];
+function useOwnedAutofill() {
+  const { values, setFieldValue } = useFormContext();
+  const autoFilledRef = useRef({});
+  const valuesRef = useRef(values);
+  valuesRef.current = values;
+  const write = useCallback(
+    (field, value) => {
+      const current = (valuesRef.current[field] ?? "").trim();
+      const ours = autoFilledRef.current[field] === current;
+      if (current !== "" && !ours) return;
+      setFieldValue(field, value);
+      if (value) {
+        autoFilledRef.current[field] = value;
+      } else {
+        delete autoFilledRef.current[field];
+      }
+    },
+    [setFieldValue]
+  );
+  const clearOwned = useCallback(() => {
+    for (const field of Object.keys(autoFilledRef.current)) {
+      write(field, "");
+    }
+  }, [write]);
+  return useMemo(() => ({ write, clearOwned }), [write, clearOwned]);
+}
+function CepField2({
+  name,
+  label,
+  lookup,
+  fills,
+  debounceMs,
+  copy
+}) {
+  const { values, errors, setFieldValue } = useFormContext();
+  const { write, clearOwned } = useOwnedAutofill();
+  const handleResolved = useCallback(
+    (address) => {
+      if (!fills) return;
+      for (const part of PARTS) {
+        const field = fills[part];
+        if (field) write(field, address[part] ?? "");
+      }
+    },
+    [fills, write]
+  );
+  const handleChange = useCallback(
+    (masked) => setFieldValue(name, masked),
+    [name, setFieldValue]
+  );
+  return /* @__PURE__ */ jsx(
+    CepField,
+    {
+      copy,
+      name,
+      label,
+      value: values[name] ?? "",
+      error: errors[name],
+      onChange: handleChange,
+      onLookup: lookup,
+      onResolved: handleResolved,
+      onNotFound: clearOwned,
+      debounceMs,
+      dataTestId: `total-form-field-${name}`
+    }
+  );
+}
+
+export {
+  CepField2 as CepField
+};
+//# sourceMappingURL=chunk-2XX45PC5.js.map

package/dist/chunk-2ZIHZLF5.js

@@ -0,0 +1,229 @@
+import {
+  RAIL_GAP_PX
+} from "./chunk-NB3FGWU4.js";
+import {
+  DescriptionItem
+} from "./chunk-KREWQAEV.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/base-list-card-slots.tsx
+import { Fragment } from "react";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+var META_BREAK = 520;
+var STACK_BREAK = 360;
+var TABULAR = { fontVariantNumeric: "tabular-nums" };
+var CLAMP = {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+function ListCardCaption({
+  title,
+  subtitle,
+  href,
+  target,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(default2, { "data-slot": "caption", sx: { minWidth: 0 }, children: [
+    title != null && /* @__PURE__ */ jsx(Text, { variant: "heading", size: "sm", weight: "bold", as: "p", children: /* @__PURE__ */ jsx(
+      default2,
+      {
+        ...href ? { component: "a", href, target } : { component: "span" },
+        "data-testid": testId,
+        sx: {
+          display: "block",
+          lineHeight: 1.2,
+          fontSize: sxRem(14.4),
+          color: "inherit",
+          textDecoration: "none",
+          ...CLAMP,
+          ...href ? {
+            "&::after": {
+              content: '""',
+              position: "absolute",
+              inset: 0,
+              // Under the checkbox, drag grip, actions and menu, which
+              // all raise themselves to 1.
+              zIndex: 0
+            },
+            "&:hover": { textDecoration: "underline" }
+          } : {}
+        },
+        children: title
+      }
+    ) }),
+    subtitle != null && /* @__PURE__ */ jsx(Text, { variant: "caption", size: "xs", color: "secondary", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: "block", ...CLAMP }, children: subtitle }) })
+  ] });
+}
+function MetaRule() {
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      "aria-hidden": true,
+      sx: {
+        flex: "0 0 auto",
+        color: "text.disabled",
+        opacity: 0.5,
+        userSelect: "none",
+        fontSize: sxRem(14),
+        // A cancelled row strikes the whole meta cluster, and a struck `|` is a
+        // dagger. The rule is punctuation, not data — nothing to void.
+        textDecoration: "none"
+      },
+      children: "|"
+    }
+  );
+}
+function ListCardMeta({
+  meta,
+  metaSlot,
+  trailingRule
+}) {
+  const items = meta ?? [];
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      "data-slot": "meta",
+      sx: (theme) => ({
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-evenly",
+        // A FLOOR, not the spacing itself: `space-evenly` supplies the rest, and
+        // this is only what keeps a rail with no room to spare from running the
+        // date straight into the rule.
+        gap: 1,
+        whiteSpace: "nowrap",
+        ...TABULAR,
+        // Rung 1 of the ladder.
+        [`@container (max-width: ${rem(theme, META_BREAK)})`]: { display: "none" }
+      }),
+      children: [
+        items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          index > 0 && /* @__PURE__ */ jsx(MetaRule, {}),
+          /* @__PURE__ */ jsx(
+            default2,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                minWidth: 0,
+                // Sized to the pair, so the gaps either side of it are free space
+                // that `space-evenly` can equalise.
+                flex: "0 0 auto"
+              },
+              children: /* @__PURE__ */ jsx(DescriptionItem, { orientation: "vertical", align: "center", ...item })
+            }
+          )
+        ] }, `${item.label}-${index}`)),
+        metaSlot,
+        trailingRule && items.length > 0 && /* @__PURE__ */ jsx(MetaRule, {})
+      ]
+    }
+  );
+}
+var valueFlush = (theme) => ({
+  marginLeft: rem(theme, -RAIL_GAP_PX),
+  [`@container (max-width: ${rem(theme, META_BREAK)})`]: { marginLeft: 0 }
+});
+function ListCardValue({ value }) {
+  return /* @__PURE__ */ jsx(Text, { variant: "body", size: "sm", weight: "medium", as: "span", children: /* @__PURE__ */ jsx(
+    default2,
+    {
+      component: "span",
+      sx: { fontSize: sxRem(14), whiteSpace: "nowrap", ...TABULAR },
+      children: value
+    }
+  ) });
+}
+function ListCardActions({
+  actions,
+  alwaysVisible,
+  menu,
+  testId
+}) {
+  if (actions == null && menu == null) return null;
+  return (
+    // z-index 1: above the stretched link, so these stay clickable.
+    /* @__PURE__ */ jsxs(
+      default2,
+      {
+        "data-slot": "actions",
+        sx: { display: "flex", alignItems: "center", gap: 0.5, position: "relative", zIndex: 1 },
+        children: [
+          actions && /* @__PURE__ */ jsx(
+            default2,
+            {
+              "data-testid": testId("actions"),
+              onClick: (event) => event.stopPropagation(),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 0.5,
+                ...alwaysVisible ? {} : {
+                  visibility: "hidden",
+                  ".MuiPaper-root:hover &, .MuiPaper-root:focus-within &": {
+                    visibility: "visible"
+                  }
+                }
+              },
+              children: actions
+            }
+          ),
+          menu && /* @__PURE__ */ jsx(default2, { "data-testid": testId("menu"), onClick: (event) => event.stopPropagation(), children: menu })
+        ]
+      }
+    )
+  );
+}
+function ListCardTail({
+  value,
+  separated,
+  actions,
+  actionsAlwaysVisible,
+  menu,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsx(
+      default2,
+      {
+        "data-slot": "value",
+        sx: (theme) => ({
+          textAlign: "right",
+          ...separated && value != null ? valueFlush(theme) : {}
+        }),
+        "data-testid": testId("value"),
+        children: value != null && /* @__PURE__ */ jsx(ListCardValue, { value })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ListCardActions,
+      {
+        actions,
+        alwaysVisible: actionsAlwaysVisible,
+        menu,
+        testId
+      }
+    )
+  ] });
+}
+
+export {
+  META_BREAK,
+  STACK_BREAK,
+  ListCardCaption,
+  ListCardMeta,
+  ListCardActions,
+  ListCardTail
+};
+//# sourceMappingURL=chunk-2ZIHZLF5.js.map

package/dist/chunk-2ZIHZLF5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/base-list-card-slots.tsx"],"sourcesContent":["\"use client\";\n\nimport { Fragment, type ReactNode } from \"react\";\n\nimport { DescriptionItem, type DescriptionItemProps } from \"../DescriptionItem\";\nimport { RAIL_GAP_PX } from \"./list-card-rails\";\nimport { Box } from \"../../../mui/Box\";\nimport { Text } from \"../../typography/Text\";\nimport type { Theme } from \"@mui/material/styles/index.js\";\n\nimport { rem, sxRem } from \"../../../tokens/relative\";\n\n/**\n * WHAT SITS IN EACH RAIL.\n *\n * Split from `base-list-card` at the size gate: that module is the shell, the\n * rails and the states; this is the content of each column.\n */\n\n/** Below this the row drops its middle columns. */\nexport const META_BREAK = 520;\n/** …and below this it leaves the shared rails and goes two-line. */\nexport const STACK_BREAK = 360;\n\n/** Money and dates line up only if their digits are the same width. */\nconst TABULAR = { fontVariantNumeric: \"tabular-nums\" } as const;\n\nconst CLAMP = {\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n} as const;\n\n/**\n * Title over subtitle — and, when the row navigates, the anchor that covers it.\n *\n * The link is a real `<a>` stretched by `::after` over the whole card rather\n * than a click handler on a `<div>`. That buys cmd-click, middle-click, \"copy\n * link address\", the status bar preview and correct tab order, and it stops the\n * buttons elsewhere in the row from being interactive elements nested inside a\n * clickable one.\n */\nexport function ListCardCaption({\n  title,\n  subtitle,\n  href,\n  target,\n  testId,\n}: {\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  href?: string;\n  target?: string;\n  testId?: string;\n}): React.JSX.Element {\n  return (\n    <Box data-slot=\"caption\" sx={{ minWidth: 0 }}>\n      {title != null && (\n        <Text variant=\"heading\" size=\"sm\" weight=\"bold\" as=\"p\">\n          <Box\n            {...(href ? { component: \"a\", href, target } : { component: \"span\" })}\n            data-testid={testId}\n            sx={{\n              display: \"block\",\n              lineHeight: 1.2,\n              fontSize: sxRem(14.4),\n              color: \"inherit\",\n              textDecoration: \"none\",\n              ...CLAMP,\n              ...(href\n                ? {\n                    \"&::after\": {\n                      content: '\"\"',\n                      position: \"absolute\",\n                      inset: 0,\n                      // Under the checkbox, drag grip, actions and menu, which\n                      // all raise themselves to 1.\n                      zIndex: 0,\n                    },\n                    \"&:hover\": { textDecoration: \"underline\" },\n                  }\n                : {}),\n            }}\n          >\n            {title}\n          </Box>\n        </Text>\n      )}\n      {subtitle != null && (\n        <Text variant=\"caption\" size=\"xs\" color=\"secondary\" as=\"p\">\n          <Box component=\"span\" sx={{ display: \"block\", ...CLAMP }}>\n            {subtitle}\n          </Box>\n        </Text>\n      )}\n    </Box>\n  );\n}\n\n/** One rule between two columns. Shared, so every gap gets the same mark. */\nfunction MetaRule(): React.JSX.Element {\n  return (\n    <Box\n      aria-hidden\n      sx={{\n        flex: \"0 0 auto\",\n        color: \"text.disabled\",\n        opacity: 0.5,\n        userSelect: \"none\",\n        fontSize: sxRem(14),\n        // A cancelled row strikes the whole meta cluster, and a struck `|` is a\n        // dagger. The rule is punctuation, not data — nothing to void.\n        textDecoration: \"none\",\n      }}\n    >\n      |\n    </Box>\n  );\n}\n\n/**\n * The middle columns: stacked label-over-value pairs, separated by a rule.\n *\n * Stacked rather than side by side because `DATA 05/08/2026` inline spends the\n * horizontal room the value rail needs, and the separator is what stops two\n * adjacent pairs reading as one four-word phrase.\n *\n * EVEN GAPS, NOT EVEN BOXES. The rail takes a share of the row's spare width\n * per pair (see `metaRail`), and the obvious way to spend it — give every pair\n * an equal-width box and centre its content — puts the separator on the BOX\n * boundary, which is only the visual midpoint when both pairs are the same\n * width. They never are: `05/08/2026, 13:45` reaches almost to the edge of its\n * box while `PIX` stops well short of its own, so the rule ends up crowded\n * against the date and adrift from the method.\n *\n * So the pairs are sized to their content and the SPARE space is what gets\n * divided evenly. `space-evenly` gives every gap — including the two either\n * side of each separator — the same width, which puts each rule exactly halfway\n * between the two labels it separates, whatever they happen to say.\n */\nexport function ListCardMeta({\n  meta,\n  metaSlot,\n  trailingRule,\n}: {\n  meta?: DescriptionItemProps[];\n  metaSlot?: ReactNode;\n  /** Close the run with a rule, dividing the last pair from the value. */\n  trailingRule?: boolean;\n}): React.JSX.Element {\n  const items = meta ?? [];\n  return (\n    <Box\n      data-slot=\"meta\"\n      sx={(theme) => ({\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"space-evenly\",\n        // A FLOOR, not the spacing itself: `space-evenly` supplies the rest, and\n        // this is only what keeps a rail with no room to spare from running the\n        // date straight into the rule.\n        gap: 1,\n        whiteSpace: \"nowrap\",\n        ...TABULAR,\n        // Rung 1 of the ladder.\n        [`@container (max-width: ${rem(theme, META_BREAK)})`]: { display: \"none\" },\n      })}\n    >\n      {items.map((item, index) => (\n        <Fragment key={`${item.label}-${index}`}>\n          {/* ITS OWN ITEM, not the first child of the pair that follows it.\n              Nested inside, the rule travelled with that pair's centred content\n              and came to rest nearer one label than the other — a separator\n              visibly closer to MÉTODO than to DATA reads as belonging to it. */}\n          {index > 0 && <MetaRule />}\n          {/* Centred: a stacked pair sitting in its own column reads as one\n              unit only when the label is over the value rather than flush left\n              of a value shorter than it — `MÉTODO` above `PIX` was visibly\n              unhinged from it. Overridable per item. */}\n          <Box\n            sx={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              minWidth: 0,\n              // Sized to the pair, so the gaps either side of it are free space\n              // that `space-evenly` can equalise.\n              flex: \"0 0 auto\",\n            }}\n          >\n            <DescriptionItem orientation=\"vertical\" align=\"center\" {...item} />\n          </Box>\n        </Fragment>\n      ))}\n      {metaSlot}\n      {trailingRule && items.length > 0 && <MetaRule />}\n    </Box>\n  );\n}\n\n/**\n * The value sits flush against the meta rail, with no gap of its own.\n *\n * Its divider is now the LAST ITEM OF THE META CLUSTER, placed by the same\n * `space-evenly` that places the rules between the pairs — so it is equidistant\n * from `PIX` and from `R$ 13,90` for free, which a rule centred in the rail gap\n * could never be: the cluster's content stops well short of the rail's right\n * edge, leaving that rule 150px from the method and 12px from the money.\n *\n * Cancelling this one gap is what makes the two distances equal. Below\n * `META_BREAK` the cluster (and its rule) are gone, so the gap comes back —\n * otherwise the value would sit straight against the title.\n */\nconst valueFlush = (theme: Theme) => ({\n  marginLeft: rem(theme, -RAIL_GAP_PX),\n  [`@container (max-width: ${rem(theme, META_BREAK)})`]: { marginLeft: 0 },\n});\n\n/** The value, on its own rail, never truncated and never shunted by the chip. */\nfunction ListCardValue({ value }: { value: ReactNode }): React.JSX.Element {\n  return (\n    <Text variant=\"body\" size=\"sm\" weight=\"medium\" as=\"span\">\n      <Box\n        component=\"span\"\n        sx={{ fontSize: sxRem(14), whiteSpace: \"nowrap\", ...TABULAR }}\n      >\n        {value}\n      </Box>\n    </Text>\n  );\n}\n\n/**\n * The actions and the menu, at the end of the row.\n *\n * Actions are revealed on hover and `:focus-within` — always-visible buttons on\n * every row of fifty is a lot of chrome for something used on one of them.\n * `:focus-within` is what keeps them reachable by keyboard, and `visibility`\n * rather than `display` keeps their space reserved so nothing shifts.\n */\nexport function ListCardActions({\n  actions,\n  alwaysVisible,\n  menu,\n  testId,\n}: {\n  actions?: ReactNode;\n  alwaysVisible?: boolean;\n  menu?: ReactNode;\n  testId: (slot: string) => string | undefined;\n}): React.JSX.Element | null {\n  if (actions == null && menu == null) return null;\n  return (\n    // z-index 1: above the stretched link, so these stay clickable.\n    <Box\n      data-slot=\"actions\"\n      sx={{ display: \"flex\", alignItems: \"center\", gap: 0.5, position: \"relative\", zIndex: 1 }}\n    >\n      {actions && (\n        <Box\n          data-testid={testId(\"actions\")}\n          onClick={(event) => event.stopPropagation()}\n          sx={{\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 0.5,\n            ...(alwaysVisible\n              ? {}\n              : {\n                  visibility: \"hidden\",\n                  \".MuiPaper-root:hover &, .MuiPaper-root:focus-within &\": {\n                    visibility: \"visible\",\n                  },\n                }),\n          }}\n        >\n          {actions}\n        </Box>\n      )}\n      {menu && (\n        <Box data-testid={testId(\"menu\")} onClick={(event) => event.stopPropagation()}>\n          {menu}\n        </Box>\n      )}\n    </Box>\n  );\n}\n\n/** Value and actions — separate rails, not one flex run. */\nexport function ListCardTail({\n  value,\n  separated,\n  actions,\n  actionsAlwaysVisible,\n  menu,\n  testId,\n}: {\n  value?: ReactNode;\n  /** Whether a meta cluster precedes the value and wants dividing from it. */\n  separated?: boolean;\n  actions?: ReactNode;\n  actionsAlwaysVisible?: boolean;\n  menu?: ReactNode;\n  testId: (slot: string) => string | undefined;\n}): React.JSX.Element {\n  return (\n    <>\n      <Box\n        data-slot=\"value\"\n        sx={(theme) => ({\n          textAlign: \"right\",\n          ...(separated && value != null ? valueFlush(theme) : {}),\n        })}\n        data-testid={testId(\"value\")}\n      >\n        {value != null && <ListCardValue value={value} />}\n      </Box>\n      <ListCardActions\n        actions={actions}\n        alwaysVisible={actionsAlwaysVisible}\n        menu={menu}\n        testId={testId}\n      />\n    </>\n  );\n}\n"],"mappings":"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","names":["Fragment","default"]}