@12-apps/ui 6.11.1 → 6.12.0

package/dist/chunk-MEWYA74E.js

@@ -0,0 +1,67 @@
+import {
+  statusMessage
+} from "./chunk-B7NV6JFG.js";
+import {
+  DayBoundInput
+} from "./chunk-UCU5FCYE.js";
+
+// src/components/form/DateRangePicker/DateRangePickerFields.tsx
+import Box from "@mui/material/Box/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DateRangeFields({
+  value,
+  status,
+  messages,
+  maxRangeDays,
+  onEdit,
+  statusId,
+  dataTestId
+}) {
+  const rejected = !status.ok && status.problem !== "incomplete";
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 2 }, children: [
+      /* @__PURE__ */ jsx(
+        DayBoundInput,
+        {
+          mask: messages.dayMask,
+          label: messages.from,
+          value: value.from ?? void 0,
+          onChange: (bound) => onEdit("from", bound ?? null),
+          testId: `${dataTestId}-from`,
+          error: rejected,
+          describedBy: statusId
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DayBoundInput,
+        {
+          mask: messages.dayMask,
+          label: messages.to,
+          value: value.to ?? void 0,
+          onChange: (bound) => onEdit("to", bound ?? null),
+          testId: `${dataTestId}-to`,
+          error: rejected,
+          describedBy: statusId
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        id: statusId,
+        role: "status",
+        "aria-live": "polite",
+        variant: "body2",
+        color: rejected ? "error.main" : "text.secondary",
+        "data-testid": `${dataTestId}-status`,
+        children: statusMessage(status, messages, maxRangeDays)
+      }
+    )
+  ] });
+}
+
+export {
+  DateRangeFields
+};
+//# sourceMappingURL=chunk-MEWYA74E.js.map

package/dist/chunk-MEWYA74E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/DateRangePicker/DateRangePickerFields.tsx"],"sourcesContent":["/**\n * The two typed ends, and the one line that says what the picker currently has.\n *\n * WHEN A TYPED DATE COMMITS: the moment it is a WHOLE, REAL day — eight digits\n * that name a date that exists. Not on every keystroke (`2026` passes through\n * `0002`, `0020` and `0202`, each a legal year, and committing those makes the\n * calendar jump to the year 20 while you are still typing) and not only on blur\n * (a reader who types a date and looks at the calendar to check it would see\n * the old month until they clicked somewhere else). Half-typed text stays in\n * the field and changes nothing; leaving the field discards it and shows what\n * the range actually is. Enter needs no special case — by the time it can be\n * pressed the date has already committed.\n *\n * The field itself is `DayBoundInput`, the masked `dd/mm/aaaa` control the data\n * views already use. Same package, imported rather than re-implemented: a\n * second masked date field is a second set of rules for what backspace does.\n */\nimport Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React from 'react';\n\nimport { DayBoundInput } from '../../data-display/DataViews/data-views-day-input';\n\nimport { statusMessage } from './DateRangePicker.range';\nimport type {\n  DateRangePickerMessages,\n  DateRangeDraft,\n  DateRangeStatus,\n  DayString,\n} from './DateRangePicker.types';\n\nexport interface DateRangeFieldsProps {\n  value: DateRangeDraft;\n  status: DateRangeStatus;\n  messages: DateRangePickerMessages;\n  maxRangeDays: number | undefined;\n  onEdit: (which: 'from' | 'to', bound: DayString | null) => void;\n  /** Id of the status line, so both fields can point at it. */\n  statusId: string;\n  dataTestId: string;\n}\n\nexport function DateRangeFields({\n  value,\n  status,\n  messages,\n  maxRangeDays,\n  onEdit,\n  statusId,\n  dataTestId,\n}: DateRangeFieldsProps): React.JSX.Element {\n  // \"Incomplete\" is not an error — it is a range that is not finished yet, and\n  // painting it red would make the first click on a two-click control look like\n  // a mistake. The pair being impossible is what gets marked.\n  const rejected = !status.ok && status.problem !== 'incomplete';\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>\n      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>\n        <DayBoundInput\n          mask={messages.dayMask}\n          label={messages.from}\n          value={value.from ?? undefined}\n          onChange={(bound) => onEdit('from', bound ?? null)}\n          testId={`${dataTestId}-from`}\n          error={rejected}\n          describedBy={statusId}\n        />\n        <DayBoundInput\n          mask={messages.dayMask}\n          label={messages.to}\n          value={value.to ?? undefined}\n          onChange={(bound) => onEdit('to', bound ?? null)}\n          testId={`${dataTestId}-to`}\n          error={rejected}\n          describedBy={statusId}\n        />\n      </Box>\n      <Typography\n        id={statusId}\n        // A live region, so the reason a range was refused is spoken when it\n        // appears rather than only being found by someone who goes looking.\n        role=\"status\"\n        aria-live=\"polite\"\n        variant=\"body2\"\n        color={rejected ? 'error.main' : 'text.secondary'}\n        data-testid={`${dataTestId}-status`}\n      >\n        {statusMessage(status, messages, maxRangeDays)}\n      </Typography>\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;AAiBA,OAAO,SAAS;AAChB,OAAO,gBAAgB;AAwCjB,SACE,KADF;AAhBC,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4C;AAI1C,QAAM,WAAW,CAAC,OAAO,MAAM,OAAO,YAAY;AAElD,SACE,qBAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,EAAE,GAC1D;AAAA,yBAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,UAAU,QAAQ,KAAK,EAAE,GACnD;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,SAAS;AAAA,UACf,OAAO,SAAS;AAAA,UAChB,OAAO,MAAM,QAAQ;AAAA,UACrB,UAAU,CAAC,UAAU,OAAO,QAAQ,SAAS,IAAI;AAAA,UACjD,QAAQ,GAAG,UAAU;AAAA,UACrB,OAAO;AAAA,UACP,aAAa;AAAA;AAAA,MACf;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,SAAS;AAAA,UACf,OAAO,SAAS;AAAA,UAChB,OAAO,MAAM,MAAM;AAAA,UACnB,UAAU,CAAC,UAAU,OAAO,MAAM,SAAS,IAAI;AAAA,UAC/C,QAAQ,GAAG,UAAU;AAAA,UACrB,OAAO;AAAA,UACP,aAAa;AAAA;AAAA,MACf;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QAGJ,MAAK;AAAA,QACL,aAAU;AAAA,QACV,SAAQ;AAAA,QACR,OAAO,WAAW,eAAe;AAAA,QACjC,eAAa,GAAG,UAAU;AAAA,QAEzB,wBAAc,QAAQ,UAAU,YAAY;AAAA;AAAA,IAC/C;AAAA,KACF;AAEJ;","names":[]}

package/dist/chunk-MFU4Y25U.js

@@ -0,0 +1,15 @@
+// src/tokens/layers.ts
+var MODAL_STACK_BASE_Z_INDEX = 1300;
+var MODAL_STACK_Z_INDEX_STEP = 10;
+var STACKED_OVERLAY_CLEARED_LEVELS = 10;
+var STACKED_OVERLAY_HEADROOM = MODAL_STACK_Z_INDEX_STEP * STACKED_OVERLAY_CLEARED_LEVELS;
+var stackedOverlayZIndex = (theme) => theme.zIndex.modal + STACKED_OVERLAY_HEADROOM;
+
+export {
+  MODAL_STACK_BASE_Z_INDEX,
+  MODAL_STACK_Z_INDEX_STEP,
+  STACKED_OVERLAY_CLEARED_LEVELS,
+  STACKED_OVERLAY_HEADROOM,
+  stackedOverlayZIndex
+};
+//# sourceMappingURL=chunk-MFU4Y25U.js.map

package/dist/chunk-MFU4Y25U.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/layers.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\n/**\n * WHERE A PORTALLED OVERLAY SITS RELATIVE TO A STACK OF SHEETS.\n *\n * `StackedModal` does not put its panels on one layer. Each panel takes its own\n * z-index as it joins the stack — {@link MODAL_STACK_BASE_Z_INDEX} for the\n * first, another {@link MODAL_STACK_Z_INDEX_STEP} for every panel above it — so\n * the top of a two-deep stack sits at 1310, not at `zIndex.modal`.\n *\n * Anything that portals out of a panel has to clear that. MUI's own defaults do\n * not: a `Popover` (and therefore a `Menu`, and therefore a `Select`) renders at\n * `zIndex.modal`, and a temporary `Drawer` a step lower still at\n * `zIndex.drawer`. With exactly one sheet open the numbers tie and portal order\n * settles it in the overlay's favour, which is why this looks fine right up\n * until a second sheet opens over the first.\n *\n * ## What the failure looks like, because it is not \"the panel is invisible\"\n *\n * A `Popover` under a sheet is still a live modal. It takes focus into itself\n * and holds it, and its backdrop is under the sheet too — so no click can reach\n * the backdrop to dismiss it. The trigger flips its chevron, no panel appears,\n * and from that point every keystroke aimed at the rest of the form is swallowed\n * by an input nobody can see. One click on a field that looks inert leaves the\n * whole form inert. Reported downstream as three unrelated blocks being\n * \"disabled\" (12-57).\n *\n * ## Why this is a token and not a prop on each component\n *\n * The invariant belongs to the ladder, and the ladder is `StackedModal`'s. Left\n * to individual components it is a rule each one has to remember, and the ones\n * that did not remember are indistinguishable from the ones that did until a\n * consumer stacks a sheet. `CategorySelect` never had it and `Autocomplete`\n * answered the same question with `zIndex.tooltip` — three different heights for\n * one question, in one package.\n */\n\n/** The z-index `StackedModal` gives the FIRST panel in a stack. */\nexport const MODAL_STACK_BASE_Z_INDEX = 1300;\n\n/** How much higher each panel stacked on top of another one sits. */\nexport const MODAL_STACK_Z_INDEX_STEP = 10;\n\n/**\n * How many stacked panels a portalled overlay is guaranteed to clear.\n *\n * Ten rather than a number derived from the deepest stack anyone has built,\n * because there is nothing to derive it from: a theme is resolved once, at paint\n * time, and knows nothing about how many sheets happen to be open. So the\n * headroom is a constant, and this is the depth it buys.\n */\nexport const STACKED_OVERLAY_CLEARED_LEVELS = 10;\n\n/** The constant added to `zIndex.modal` to clear that many panels — 100. */\nexport const STACKED_OVERLAY_HEADROOM =\n  MODAL_STACK_Z_INDEX_STEP * STACKED_OVERLAY_CLEARED_LEVELS;\n\n/**\n * The z-index for a surface that portals out of a sheet and must stay on top of\n * it — a dropdown, a picker panel, a menu.\n *\n * Read from the theme rather than hardcoded so a host that has moved\n * `zIndex.modal` keeps the same relationship instead of a stale absolute.\n *\n * ```tsx\n * <Popover sx={{ zIndex: stackedOverlayZIndex }} … />\n * ```\n */\nexport const stackedOverlayZIndex = (theme: Theme): number =>\n  theme.zIndex.modal + STACKED_OVERLAY_HEADROOM;\n"],"mappings":";AAsCO,IAAM,2BAA2B;AAGjC,IAAM,2BAA2B;AAUjC,IAAM,iCAAiC;AAGvC,IAAM,2BACX,2BAA2B;AAatB,IAAM,uBAAuB,CAAC,UACnC,MAAM,OAAO,QAAQ;","names":[]}

package/dist/chunk-MJ3BVWPZ.js

@@ -0,0 +1,79 @@
+// src/components/layout/Accordion/Accordion.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var BASE_TRANSITION = "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)";
+var accordionVariantStyles = (theme, variant) => {
+  switch (variant) {
+    case "glass":
+      return {
+        backgroundColor: alpha(theme.palette.background.paper, 0.08),
+        backdropFilter: "blur(24px) saturate(180%)",
+        border: `1px solid ${alpha(theme.palette.primary.main, 0.15)}`,
+        borderRadius: theme.spacing(1.5),
+        transition: BASE_TRANSITION,
+        "&:before": {
+          display: "none"
+        },
+        "&:hover": {
+          backgroundColor: alpha(theme.palette.background.paper, 0.12),
+          border: `1px solid ${alpha(theme.palette.primary.main, 0.25)}`,
+          transform: "translateY(-1px)",
+          boxShadow: `0 8px 32px ${alpha(theme.palette.primary.main, 0.12)}`
+        },
+        "&.Mui-expanded": {
+          backgroundColor: alpha(theme.palette.background.paper, 0.15),
+          border: `1px solid ${alpha(theme.palette.primary.main, 0.3)}`
+        }
+      };
+    case "bordered":
+      return {
+        border: `1px solid ${theme.palette.divider}`,
+        borderRadius: theme.spacing(1),
+        transition: BASE_TRANSITION,
+        "&:before": {
+          display: "none"
+        },
+        "&:not(:last-child)": {
+          marginBottom: theme.spacing(1)
+        },
+        "&:hover": {
+          borderColor: theme.palette.primary.main,
+          boxShadow: `0 0 0 1px ${alpha(theme.palette.primary.main, 0.1)}`
+        },
+        "&.Mui-expanded": {
+          borderColor: theme.palette.primary.main
+        }
+      };
+    case "separated":
+      return {
+        boxShadow: theme.shadows[2],
+        borderRadius: theme.spacing(1.5),
+        transition: BASE_TRANSITION,
+        "&:before": {
+          display: "none"
+        },
+        "&:not(:last-child)": {
+          marginBottom: theme.spacing(2)
+        },
+        "&:hover": {
+          boxShadow: theme.shadows[4],
+          transform: "translateY(-2px)"
+        },
+        "&.Mui-expanded": {
+          boxShadow: theme.shadows[6],
+          transform: "translateY(-1px)"
+        }
+      };
+    default:
+      return {
+        transition: BASE_TRANSITION,
+        "&:hover": {
+          backgroundColor: alpha(theme.palette.action.hover, 0.04)
+        }
+      };
+  }
+};
+
+export {
+  accordionVariantStyles
+};
+//# sourceMappingURL=chunk-MJ3BVWPZ.js.map

package/dist/chunk-MJ3BVWPZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Accordion/Accordion.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\n\nimport type { AccordionVariant } from './Accordion.types';\n\nconst BASE_TRANSITION = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';\n\n// Deliberately unannotated: the inferred union of literals assigns to MUI's\n// `sx`, whereas a `CSSObject` return type does not survive being spread into it.\nexport const accordionVariantStyles = (theme: Theme, variant: AccordionVariant) => {\n  switch (variant) {\n    case 'glass':\n      return {\n        backgroundColor: alpha(theme.palette.background.paper, 0.08),\n        backdropFilter: 'blur(24px) saturate(180%)',\n        border: `1px solid ${alpha(theme.palette.primary.main, 0.15)}`,\n        borderRadius: theme.spacing(1.5),\n        transition: BASE_TRANSITION,\n        '&:before': {\n          display: 'none',\n        },\n        '&:hover': {\n          backgroundColor: alpha(theme.palette.background.paper, 0.12),\n          border: `1px solid ${alpha(theme.palette.primary.main, 0.25)}`,\n          transform: 'translateY(-1px)',\n          boxShadow: `0 8px 32px ${alpha(theme.palette.primary.main, 0.12)}`,\n        },\n        '&.Mui-expanded': {\n          backgroundColor: alpha(theme.palette.background.paper, 0.15),\n          border: `1px solid ${alpha(theme.palette.primary.main, 0.3)}`,\n        },\n      };\n    case 'bordered':\n      return {\n        border: `1px solid ${theme.palette.divider}`,\n        borderRadius: theme.spacing(1),\n        transition: BASE_TRANSITION,\n        '&:before': {\n          display: 'none',\n        },\n        '&:not(:last-child)': {\n          marginBottom: theme.spacing(1),\n        },\n        '&:hover': {\n          borderColor: theme.palette.primary.main,\n          boxShadow: `0 0 0 1px ${alpha(theme.palette.primary.main, 0.1)}`,\n        },\n        '&.Mui-expanded': {\n          borderColor: theme.palette.primary.main,\n        },\n      };\n    case 'separated':\n      return {\n        boxShadow: theme.shadows[2],\n        borderRadius: theme.spacing(1.5),\n        transition: BASE_TRANSITION,\n        '&:before': {\n          display: 'none',\n        },\n        '&:not(:last-child)': {\n          marginBottom: theme.spacing(2),\n        },\n        '&:hover': {\n          boxShadow: theme.shadows[4],\n          transform: 'translateY(-2px)',\n        },\n        '&.Mui-expanded': {\n          boxShadow: theme.shadows[6],\n          transform: 'translateY(-1px)',\n        },\n      };\n    default:\n      return {\n        transition: BASE_TRANSITION,\n        '&:hover': {\n          backgroundColor: alpha(theme.palette.action.hover, 0.04),\n        },\n      };\n  }\n};\n"],"mappings":";AAAA,SAAS,aAAa;AAKtB,IAAM,kBAAkB;AAIjB,IAAM,yBAAyB,CAAC,OAAc,YAA8B;AACjF,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO;AAAA,QACL,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,QAC3D,gBAAgB;AAAA,QAChB,QAAQ,aAAa,MAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI,CAAC;AAAA,QAC5D,cAAc,MAAM,QAAQ,GAAG;AAAA,QAC/B,YAAY;AAAA,QACZ,YAAY;AAAA,UACV,SAAS;AAAA,QACX;AAAA,QACA,WAAW;AAAA,UACT,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,UAC3D,QAAQ,aAAa,MAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI,CAAC;AAAA,UAC5D,WAAW;AAAA,UACX,WAAW,cAAc,MAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI,CAAC;AAAA,QAClE;AAAA,QACA,kBAAkB;AAAA,UAChB,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,UAC3D,QAAQ,aAAa,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG,CAAC;AAAA,QAC7D;AAAA,MACF;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,QAAQ,aAAa,MAAM,QAAQ,OAAO;AAAA,QAC1C,cAAc,MAAM,QAAQ,CAAC;AAAA,QAC7B,YAAY;AAAA,QACZ,YAAY;AAAA,UACV,SAAS;AAAA,QACX;AAAA,QACA,sBAAsB;AAAA,UACpB,cAAc,MAAM,QAAQ,CAAC;AAAA,QAC/B;AAAA,QACA,WAAW;AAAA,UACT,aAAa,MAAM,QAAQ,QAAQ;AAAA,UACnC,WAAW,aAAa,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG,CAAC;AAAA,QAChE;AAAA,QACA,kBAAkB;AAAA,UAChB,aAAa,MAAM,QAAQ,QAAQ;AAAA,QACrC;AAAA,MACF;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,WAAW,MAAM,QAAQ,CAAC;AAAA,QAC1B,cAAc,MAAM,QAAQ,GAAG;AAAA,QAC/B,YAAY;AAAA,QACZ,YAAY;AAAA,UACV,SAAS;AAAA,QACX;AAAA,QACA,sBAAsB;AAAA,UACpB,cAAc,MAAM,QAAQ,CAAC;AAAA,QAC/B;AAAA,QACA,WAAW;AAAA,UACT,WAAW,MAAM,QAAQ,CAAC;AAAA,UAC1B,WAAW;AAAA,QACb;AAAA,QACA,kBAAkB;AAAA,UAChB,WAAW,MAAM,QAAQ,CAAC;AAAA,UAC1B,WAAW;AAAA,QACb;AAAA,MACF;AAAA,IACF;AACE,aAAO;AAAA,QACL,YAAY;AAAA,QACZ,WAAW;AAAA,UACT,iBAAiB,MAAM,MAAM,QAAQ,OAAO,OAAO,IAAI;AAAA,QACzD;AAAA,MACF;AAAA,EACJ;AACF;","names":[]}

package/dist/chunk-MNJVOU7T.js

@@ -0,0 +1,53 @@
+import {
+  useCardActions
+} from "./chunk-77GA5YHQ.js";
+import {
+  useConfirmAction
+} from "./chunk-EMYESBIT.js";
+import {
+  ConfirmActionDialog
+} from "./chunk-QQS3GQYS.js";
+
+// src/components/data-display/CardKit/use-remove-confirm.tsx
+import { jsx } from "react/jsx-runtime";
+function useRemoveConfirm({
+  write,
+  title,
+  entityName,
+  description,
+  confirmText,
+  fallbackError,
+  dataTestId,
+  copy
+}) {
+  const { onRefresh, notifyError } = useCardActions();
+  const state = useConfirmAction(async () => {
+    const result = await write();
+    if (!result.ok) {
+      const message = result.error ?? fallbackError;
+      notifyError(message);
+      throw new Error(message);
+    }
+    onRefresh();
+  }, fallbackError);
+  return {
+    request: state.request,
+    dialog: /* @__PURE__ */ jsx(
+      ConfirmActionDialog,
+      {
+        state,
+        copy,
+        title,
+        entityName,
+        description,
+        confirmText,
+        dataTestId
+      }
+    )
+  };
+}
+
+export {
+  useRemoveConfirm
+};
+//# sourceMappingURL=chunk-MNJVOU7T.js.map

package/dist/chunk-MNZ2NT5A.js

@@ -0,0 +1,163 @@
+// src/components/form/Toggle/Toggle.styles.ts
+import { alpha, keyframes } from "@mui/material/styles/index.js";
+var glowAnimation = keyframes`
+  0% { box-shadow: 0 0 5px currentColor; }
+  50% { box-shadow: 0 0 15px currentColor, 0 0 25px currentColor; }
+  100% { box-shadow: 0 0 5px currentColor; }
+`;
+var floatAnimation = keyframes`
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-2px); }
+`;
+var neutralPalette = (theme) => ({
+  main: theme.palette.grey?.[700] || "#616161",
+  dark: theme.palette.grey?.[800] || "#424242",
+  light: theme.palette.grey?.[500] || "#9e9e9e",
+  contrastText: "#fff"
+});
+var shade = (palette, key, fallback) => palette?.[key] || palette?.main || fallback[key];
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") return neutralPalette(theme);
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    danger: theme.palette.error
+  };
+  const fallback = theme.palette.primary;
+  const palette = colorMap[color] || fallback;
+  return {
+    main: palette?.main || fallback.main,
+    dark: shade(palette, "dark", fallback),
+    light: shade(palette, "light", fallback),
+    contrastText: palette?.contrastText || "#fff"
+  };
+};
+var SIZE_MAP = {
+  xs: { padding: "4px 8px", fontSize: "0.75rem" },
+  sm: { padding: "6px 12px", fontSize: "0.875rem" },
+  md: { padding: "8px 16px", fontSize: "1rem" },
+  lg: { padding: "10px 20px", fontSize: "1.125rem" },
+  xl: { padding: "12px 24px", fontSize: "1.25rem" }
+};
+var baseStyles = (theme, colorPalette, customSize) => ({
+  textTransform: "none",
+  fontWeight: 500,
+  borderRadius: theme.spacing(1),
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  border: `2px solid ${alpha(theme.palette.divider, 0.3)}`,
+  color: theme.palette.text.primary,
+  backgroundColor: "transparent",
+  position: "relative",
+  overflow: "hidden",
+  // A zero-sized circle that grows to fill the button on hover.
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: 0,
+    height: 0,
+    borderRadius: "50%",
+    backgroundColor: alpha(colorPalette.main, 0.2),
+    transform: "translate(-50%, -50%)",
+    transition: "width 0.4s, height 0.4s"
+  },
+  "&:hover": {
+    backgroundColor: alpha(colorPalette.main, 0.08),
+    borderColor: colorPalette.main,
+    transform: "translateY(-1px)",
+    boxShadow: `0 4px 8px ${alpha(colorPalette.main, 0.15)}`,
+    animation: `${floatAnimation} 2s ease-in-out infinite`,
+    "&::before": {
+      width: "100%",
+      height: "100%"
+    }
+  },
+  "&:active": {
+    transform: "scale(0.98)"
+  },
+  "&.Mui-selected": {
+    backgroundColor: colorPalette.main,
+    color: colorPalette.contrastText || "#fff",
+    borderColor: colorPalette.main,
+    boxShadow: `0 2px 8px ${alpha(colorPalette.main, 0.3)}`,
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      background: `linear-gradient(135deg, transparent, ${alpha("#fff", 0.1)})`,
+      pointerEvents: "none"
+    },
+    "&:hover": {
+      backgroundColor: colorPalette.dark,
+      transform: "translateY(-2px) scale(1.02)",
+      boxShadow: `0 6px 20px ${alpha(colorPalette.main, 0.4)}`
+    }
+  },
+  // Size wins over everything above it.
+  ...SIZE_MAP[customSize] ?? {}
+});
+var variantStyles = (customVariant, colorPalette) => {
+  switch (customVariant) {
+    case "outline":
+      return {
+        backgroundColor: "transparent",
+        border: `2px solid ${colorPalette.main}`,
+        color: colorPalette.main,
+        "&.Mui-selected": {
+          backgroundColor: colorPalette.main,
+          color: colorPalette.contrastText || "#fff"
+        }
+      };
+    case "soft":
+      return {
+        backgroundColor: alpha(colorPalette.main, 0.1),
+        border: "none",
+        color: colorPalette.main,
+        "&.Mui-selected": {
+          backgroundColor: alpha(colorPalette.main, 0.2),
+          color: colorPalette.main
+        }
+      };
+    default:
+      return {};
+  }
+};
+var effectStyles = (theme, colorPalette, { glass, gradient, glow }) => ({
+  ...glass && {
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
+    backdropFilter: "blur(20px)",
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
+  },
+  ...gradient && {
+    "&.Mui-selected": {
+      background: `linear-gradient(135deg, ${colorPalette.light}, ${colorPalette.main}, ${colorPalette.dark})`,
+      backgroundSize: "200% 200%",
+      animation: `${floatAnimation} 3s ease-in-out infinite`,
+      border: "none",
+      "&:hover": {
+        backgroundPosition: "100% 100%"
+      }
+    }
+  },
+  ...glow && {
+    "&.Mui-selected": {
+      animation: `${glowAnimation} 2s ease-in-out infinite`,
+      boxShadow: `0 0 15px ${alpha(colorPalette.main, 0.6)}`
+    }
+  }
+});
+
+export {
+  getColorFromTheme,
+  baseStyles,
+  variantStyles,
+  effectStyles
+};
+//# sourceMappingURL=chunk-MNZ2NT5A.js.map

package/dist/chunk-MNZ2NT5A.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Toggle/Toggle.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, PaletteColor, Theme } from '@mui/material/styles/index.js';\n\nconst glowAnimation = keyframes`\n  0% { box-shadow: 0 0 5px currentColor; }\n  50% { box-shadow: 0 0 15px currentColor, 0 0 25px currentColor; }\n  100% { box-shadow: 0 0 5px currentColor; }\n`;\n\nconst floatAnimation = keyframes`\n  0%, 100% { transform: translateY(0px); }\n  50% { transform: translateY(-2px); }\n`;\n\ninterface TogglePalette {\n  main: string;\n  dark: string;\n  light: string;\n  contrastText: string;\n}\n\nconst neutralPalette = (theme: Theme): TogglePalette => ({\n  main: theme.palette.grey?.[700] || '#616161',\n  dark: theme.palette.grey?.[800] || '#424242',\n  light: theme.palette.grey?.[500] || '#9e9e9e',\n  contrastText: '#fff',\n});\n\n// A theme can be handed to us with shades missing, so each one falls back through\n// the palette's own main colour before reaching for primary.\nconst shade = (\n  palette: PaletteColor | undefined,\n  key: 'dark' | 'light',\n  fallback: PaletteColor,\n): string => palette?.[key] || palette?.main || fallback[key];\n\nexport const getColorFromTheme = (theme: Theme, color: string): TogglePalette => {\n  if (color === 'neutral') return neutralPalette(theme);\n\n  const colorMap: Record<string, PaletteColor> = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    danger: theme.palette.error,\n  };\n\n  const fallback = theme.palette.primary;\n  const palette = colorMap[color] || fallback;\n\n  return {\n    main: palette?.main || fallback.main,\n    dark: shade(palette, 'dark', fallback),\n    light: shade(palette, 'light', fallback),\n    contrastText: palette?.contrastText || '#fff',\n  };\n};\n\nconst SIZE_MAP: Record<string, CSSObject> = {\n  xs: { padding: '4px 8px', fontSize: '0.75rem' },\n  sm: { padding: '6px 12px', fontSize: '0.875rem' },\n  md: { padding: '8px 16px', fontSize: '1rem' },\n  lg: { padding: '10px 20px', fontSize: '1.125rem' },\n  xl: { padding: '12px 24px', fontSize: '1.25rem' },\n};\n\nexport const baseStyles = (\n  theme: Theme,\n  colorPalette: TogglePalette,\n  customSize: string,\n): CSSObject => ({\n  textTransform: 'none',\n  fontWeight: 500,\n  borderRadius: theme.spacing(1),\n  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n  border: `2px solid ${alpha(theme.palette.divider, 0.3)}`,\n  color: theme.palette.text.primary,\n  backgroundColor: 'transparent',\n  position: 'relative',\n  overflow: 'hidden',\n\n  // A zero-sized circle that grows to fill the button on hover.\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    width: 0,\n    height: 0,\n    borderRadius: '50%',\n    backgroundColor: alpha(colorPalette.main, 0.2),\n    transform: 'translate(-50%, -50%)',\n    transition: 'width 0.4s, height 0.4s',\n  },\n\n  '&:hover': {\n    backgroundColor: alpha(colorPalette.main, 0.08),\n    borderColor: colorPalette.main,\n    transform: 'translateY(-1px)',\n    boxShadow: `0 4px 8px ${alpha(colorPalette.main, 0.15)}`,\n    animation: `${floatAnimation} 2s ease-in-out infinite`,\n\n    '&::before': {\n      width: '100%',\n      height: '100%',\n    },\n  },\n\n  '&:active': {\n    transform: 'scale(0.98)',\n  },\n\n  '&.Mui-selected': {\n    backgroundColor: colorPalette.main,\n    color: colorPalette.contrastText || '#fff',\n    borderColor: colorPalette.main,\n    boxShadow: `0 2px 8px ${alpha(colorPalette.main, 0.3)}`,\n\n    '&::after': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      background: `linear-gradient(135deg, transparent, ${alpha('#fff', 0.1)})`,\n      pointerEvents: 'none',\n    },\n\n    '&:hover': {\n      backgroundColor: colorPalette.dark,\n      transform: 'translateY(-2px) scale(1.02)',\n      boxShadow: `0 6px 20px ${alpha(colorPalette.main, 0.4)}`,\n    },\n  },\n\n  // Size wins over everything above it.\n  ...(SIZE_MAP[customSize] ?? {}),\n});\n\nexport const variantStyles = (\n  customVariant: string | undefined,\n  colorPalette: TogglePalette,\n): CSSObject => {\n  switch (customVariant) {\n    case 'outline':\n      return {\n        backgroundColor: 'transparent',\n        border: `2px solid ${colorPalette.main}`,\n        color: colorPalette.main,\n\n        '&.Mui-selected': {\n          backgroundColor: colorPalette.main,\n          color: colorPalette.contrastText || '#fff',\n        },\n      };\n    case 'soft':\n      return {\n        backgroundColor: alpha(colorPalette.main, 0.1),\n        border: 'none',\n        color: colorPalette.main,\n\n        '&.Mui-selected': {\n          backgroundColor: alpha(colorPalette.main, 0.2),\n          color: colorPalette.main,\n        },\n      };\n    default:\n      return {};\n  }\n};\n\ninterface ToggleEffects {\n  glass?: boolean;\n  gradient?: boolean;\n  glow?: boolean;\n}\n\n// gradient and glow both target `.Mui-selected`; with both on, the later spread\n// wins, so glow's animation replaces gradient's.\nexport const effectStyles = (\n  theme: Theme,\n  colorPalette: TogglePalette,\n  { glass, gradient, glow }: ToggleEffects,\n): CSSObject => ({\n  ...(glass && {\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: 'blur(20px)',\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n  }),\n\n  ...(gradient && {\n    '&.Mui-selected': {\n      background: `linear-gradient(135deg, ${colorPalette.light}, ${colorPalette.main}, ${colorPalette.dark})`,\n      backgroundSize: '200% 200%',\n      animation: `${floatAnimation} 3s ease-in-out infinite`,\n      border: 'none',\n\n      '&:hover': {\n        backgroundPosition: '100% 100%',\n      },\n    },\n  }),\n\n  ...(glow && {\n    '&.Mui-selected': {\n      animation: `${glowAnimation} 2s ease-in-out infinite`,\n      boxShadow: `0 0 15px ${alpha(colorPalette.main, 0.6)}`,\n    },\n  }),\n});\n"],"mappings":"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","names":[]}

package/dist/chunk-MQUU2XZB.js

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

package/dist/chunk-MQUU2XZB.js.map

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