npm - @12-apps/ui - Versions diffs - 6.35.0 → 6.36.0 - Mend

@12-apps/ui 6.35.0 → 6.36.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (916) hide show

package/dist/chunk-RIF6L54B.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/Progress/Progress.styles.ts"],"sourcesContent":["import type { PaletteColor, CSSObject, Theme } from '@mui/material/styles/index.js';\nimport { alpha, keyframes } from '@mui/material/styles/index.js';\n\nimport {\n BAR_GLOW,\n CIRCULAR_GLOW,\n GLASS_BAR_ALPHA,\n GLASS_BAR_BORDER_ALPHA,\n GLASS_BLUR_PX,\n GLOW_BRIGHTNESS,\n PROGRESS_SIZES,\n PULSE,\n} from './Progress.metrics';\nimport type { ProgressSize, ProgressVariant } from './Progress.types';\nimport { softNeutral } from '../../../tokens/ink';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\n// Define pulse animation. The stops and the two seconds are the shared metrics'\n// (`PULSE`), so the native `Progress` breathes on the same cadence.\nexport const pulseAnimation = keyframes`\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: ${PULSE.dip};\n }\n 100% {\n opacity: 1;\n }\n`;\n\nexport const getColorFromTheme = (theme: Theme, color: string): PaletteColor => {\n // Handle special case for neutral (grey) which is a Color, not PaletteColor\n if (color === 'neutral') {\n return softNeutral(theme);\n }\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 error: theme.palette.error,\n info: theme.palette.info,\n danger: theme.palette.error, // Add danger alias\n };\n\n // Ensure we always return a valid color object with main and dark properties\n return colorMap[color] || theme.palette.primary;\n};\n\n// Derived from the shared metrics, not restated: the native `Progress` reads\n// the same table, so the two renderers cannot disagree on a size.\n// The lengths stay design px (`…Px`) and go through `rem` where they are drawn.\ninterface SizeStep {\n heightPx: number;\n circularSizePx: number;\n fontSize: (theme: Theme) => string;\n}\n\nconst SIZE_MAP: Record<ProgressSize, SizeStep> = Object.fromEntries(\n Object.entries(PROGRESS_SIZES).map(([size, step]) => [\n size,\n { heightPx: step.height, circularSizePx: step.circularSize, fontSize: sxRem(step.fontSize) },\n ]),\n) as Record<ProgressSize, SizeStep>;\n\nexport const getSizeStyles = (size?: ProgressSize) => SIZE_MAP[size as ProgressSize] || SIZE_MAP.md;\n\nexport const barVariantStyles = (\n theme: Theme,\n variant: ProgressVariant | undefined,\n colorPalette: PaletteColor,\n): CSSObject => {\n switch (variant) {\n case 'linear':\n return { backgroundColor: colorPalette.main };\n case 'gradient':\n return {\n background: `linear-gradient(90deg, ${colorPalette.main} 0%, ${colorPalette.dark || colorPalette.main} 100%)`,\n };\n case 'glass':\n return {\n backgroundColor: alpha(colorPalette.main, GLASS_BAR_ALPHA),\n backdropFilter: `blur(${rem(theme, GLASS_BLUR_PX)})`,\n border: `1px solid ${alpha(colorPalette.main, GLASS_BAR_BORDER_ALPHA)}`,\n };\n default:\n return {};\n }\n};\n\n// glow and pulse are independent flags. The three combinations used to be spelled\n// out one by one, but each is just the union of whichever flags are set.\nexport const barEmphasisStyles = (\n theme: Theme,\n colorPalette: PaletteColor,\n glow?: boolean,\n pulse?: boolean,\n): CSSObject => ({\n ...(glow && {\n boxShadow: `${rems(theme, 0, 0, BAR_GLOW.blur, BAR_GLOW.spread)} ${alpha(colorPalette.main, BAR_GLOW.alpha)}`,\n filter: `brightness(${GLOW_BRIGHTNESS})`,\n }),\n ...(pulse && {\n animation: `${pulseAnimation} ${PULSE.durationMs / 1000}s infinite`,\n }),\n});\n\nexport const circularEmphasisStyles = (\n theme: Theme,\n colorPalette: PaletteColor,\n glow?: boolean,\n pulse?: boolean,\n): CSSObject => ({\n ...(glow && {\n filter: `drop-shadow(${rems(theme, 0, 0, CIRCULAR_GLOW.blur)} ${alpha(colorPalette.main, CIRCULAR_GLOW.alpha)})`,\n }),\n ...(pulse && {\n animation: `${pulseAnimation} ${PULSE.durationMs / 1000}s infinite`,\n }),\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AACA,SAAS,OAAO,iBAAiB;AAkB1B,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,eAKf,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjB,IAAM,oBAAoB,CAAC,OAAc,UAAgC;AAE9E,MAAI,UAAU,WAAW;AACvB,WAAO,YAAY,KAAK;AAAA,EAC1B;AAEA,QAAM,WAAyC;AAAA,IAC7C,SAAS,MAAM,QAAQ;AAAA,IACvB,WAAW,MAAM,QAAQ;AAAA,IACzB,SAAS,MAAM,QAAQ;AAAA,IACvB,SAAS,MAAM,QAAQ;AAAA,IACvB,OAAO,MAAM,QAAQ;AAAA,IACrB,MAAM,MAAM,QAAQ;AAAA,IACpB,QAAQ,MAAM,QAAQ;AAAA;AAAA,EACxB;AAGA,SAAO,SAAS,KAAK,KAAK,MAAM,QAAQ;AAC1C;AAWA,IAAM,WAA2C,OAAO;AAAA,EACtD,OAAO,QAAQ,cAAc,EAAE,IAAI,CAAC,CAAC,MAAM,IAAI,MAAM;AAAA,IACnD;AAAA,IACA,EAAE,UAAU,KAAK,QAAQ,gBAAgB,KAAK,cAAc,UAAU,MAAM,KAAK,QAAQ,EAAE;AAAA,EAC7F,CAAC;AACH;AAEO,IAAM,gBAAgB,CAAC,SAAwB,SAAS,IAAoB,KAAK,SAAS;AAE1F,IAAM,mBAAmB,CAC9B,OACA,SACA,iBACc;AACd,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO,EAAE,iBAAiB,aAAa,KAAK;AAAA,IAC9C,KAAK;AACH,aAAO;AAAA,QACL,YAAY,0BAA0B,aAAa,IAAI,QAAQ,aAAa,QAAQ,aAAa,IAAI;AAAA,MACvG;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,iBAAiB,MAAM,aAAa,MAAM,eAAe;AAAA,QACzD,gBAAgB,QAAQ,IAAI,OAAO,aAAa,CAAC;AAAA,QACjD,QAAQ,aAAa,MAAM,aAAa,MAAM,sBAAsB,CAAC;AAAA,MACvE;AAAA,IACF;AACE,aAAO,CAAC;AAAA,EACZ;AACF;AAIO,IAAM,oBAAoB,CAC/B,OACA,cACA,MACA,WACe;AAAA,EACf,GAAI,QAAQ;AAAA,IACV,WAAW,GAAG,KAAK,OAAO,GAAG,GAAG,SAAS,MAAM,SAAS,MAAM,CAAC,IAAI,MAAM,aAAa,MAAM,SAAS,KAAK,CAAC;AAAA,IAC3G,QAAQ,cAAc,eAAe;AAAA,EACvC;AAAA,EACA,GAAI,SAAS;AAAA,IACX,WAAW,GAAG,cAAc,IAAI,MAAM,aAAa,GAAI;AAAA,EACzD;AACF;AAEO,IAAM,yBAAyB,CACpC,OACA,cACA,MACA,WACe;AAAA,EACf,GAAI,QAAQ;AAAA,IACV,QAAQ,eAAe,KAAK,OAAO,GAAG,GAAG,cAAc,IAAI,CAAC,IAAI,MAAM,aAAa,MAAM,cAAc,KAAK,CAAC;AAAA,EAC/G;AAAA,EACA,GAAI,SAAS;AAAA,IACX,WAAW,GAAG,cAAc,IAAI,MAAM,aAAa,GAAI;AAAA,EACzD;AACF;","names":[]}

package/dist/{chunk-M5T3COS2.js → chunk-RIRTW5EU.js} RENAMED Viewed

@@ -1,3 +1,9 @@
+import {
+  rem,
+  remPx,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 // src/components/data-display/Chart/ChartComposables.tsx
 import Box from "@mui/material/Box/index.js";
 import Paper from "@mui/material/Paper/index.js";
@@ -14,10 +20,16 @@ var ChartContainer = ({
   children,
   "data-testid": dataTestId
 }) => {
+  const theme = useTheme();
   if (!responsive) {
-    return /* @__PURE__ */ jsx(Box, { sx: { width, height }, "data-testid": dataTestId, children });
+    const box = {
+      width: typeof width === "number" ? rem(theme, width) : width,
+      height: typeof height === "number" ? rem(theme, height) : height
+    };
+    return /* @__PURE__ */ jsx(Box, { sx: box, "data-testid": dataTestId, children });
   }
-  return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, "data-testid": dataTestId, children });
+  const plot = { height: typeof height === "number" ? remPx(theme, height) : height };
+  return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", ...plot, "data-testid": dataTestId, children });
 };
 var ChartTooltipContent = ({
   active,
@@ -38,7 +50,7 @@ var ChartTooltipContent = ({
         Box,
         {
           component: "span",
-          sx: { width: 10, height: 10, borderRadius: "2px", backgroundColor: entry.color, flexShrink: 0 }
+          sx: { width: sxRem(10), height: sxRem(10), borderRadius: sxRem(2), backgroundColor: entry.color, flexShrink: 0 }
         }
       ),
       /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary" }, children: entry.name }),
@@ -53,7 +65,7 @@ var ChartLegendContent = ({ payload }) => {
       Box,
       {
         component: "span",
-        sx: { width: 10, height: 10, borderRadius: "2px", backgroundColor: entry.color, flexShrink: 0 }
+        sx: { width: sxRem(10), height: sxRem(10), borderRadius: sxRem(2), backgroundColor: entry.color, flexShrink: 0 }
       }
     ),
     /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { color: "text.secondary" }, children: entry.value })
@@ -67,4 +79,4 @@ export {
   ChartTooltipContent,
   ChartLegendContent
 };
-//# sourceMappingURL=chunk-M5T3COS2.js.map
+//# sourceMappingURL=chunk-RIRTW5EU.js.map

package/dist/chunk-RIRTW5EU.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/Chart/ChartComposables.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\nimport { Legend, ResponsiveContainer, Tooltip } from 'recharts';\n\nimport { rem, remPx, sxRem } from '../../../tokens/relative';\n\n/**\n * Raw chart composables (Squire's ChartConfig pattern, MUI-themed): a\n * responsive container plus themed tooltip/legend content renderers. The\n * prop-driven `Chart` uses these internally; consumers building bespoke\n * Recharts compositions can reuse them directly.\n */\n\n/** Recharts' Tooltip/Legend re-exported so bespoke compositions can pair them\n * with the themed content renderers below. */\nexport const ChartTooltip = Tooltip;\nexport const ChartLegend = Legend;\n\nexport interface ChartContainerProps {\n /**\n * A number of pixels (design px, drawn through the theme's type scale), or\n * a PERCENTAGE of the box this container is given.\n *\n * The difference is not cosmetic: Recharts sizes the chart from the number\n * when it is one and only MEASURES its own box when it is a percentage\n * (`calculateChartDimensions`). So a container stretched by its parent's\n * layout goes on drawing a 300px chart inside a 600px box — visibly, as\n * blank space under the plot — until the height is handed over as a percent.\n */\n height: number | `${number}%`;\n /** Design px when a number, through the type scale; a string is as given. */\n width?: number | string;\n responsive?: boolean;\n children: React.ReactElement;\n 'data-testid'?: string;\n}\n\n/** Responsive wrapper for a Recharts chart element. */\nexport const ChartContainer: React.FC<ChartContainerProps> = ({\n height,\n width = '100%',\n responsive = true,\n children,\n 'data-testid': dataTestId,\n}) => {\n const theme = useTheme();\n if (!responsive) {\n const box = {\n width: typeof width === 'number' ? rem(theme, width) : width,\n height: typeof height === 'number' ? rem(theme, height) : height,\n };\n return (\n <Box sx={box} data-testid={dataTestId}>\n {children}\n </Box>\n );\n }\n // Recharts takes a number as px and only measures its box for a percentage.\n const plot = { height: typeof height === 'number' ? remPx(theme, height) : height };\n return (\n <ResponsiveContainer width=\"100%\" {...plot} data-testid={dataTestId}>\n {children}\n </ResponsiveContainer>\n );\n};\n\ninterface TooltipEntry {\n name?: string | number;\n value?: string | number;\n color?: string;\n}\n\nexport interface ChartTooltipContentProps {\n active?: boolean;\n label?: string | number;\n payload?: TooltipEntry[];\n /** Formats numeric values (e.g. centavos → BRL). */\n valueFormatter?: (value: number) => string;\n}\n\n/** Theme-aware tooltip content (light/dark correct, semantic colors only). */\nexport const ChartTooltipContent: React.FC<ChartTooltipContentProps> = ({\n active,\n label,\n payload,\n valueFormatter,\n}) => {\n const theme = useTheme();\n if (!active || !payload || payload.length === 0) return null;\n const formatValue = (value: TooltipEntry['value']): string | number => {\n if (typeof value === 'number' && valueFormatter) return valueFormatter(value);\n return value ?? '';\n };\n return (\n <Paper elevation={4} sx={{ px: 1.5, py: 1, border: `1px solid ${theme.palette.divider}` }}>\n {label !== undefined && label !== '' && (\n <Typography variant=\"caption\" sx={{ color: 'text.secondary', display: 'block', mb: 0.5 }}>\n {label}\n </Typography>\n )}\n {payload.map((entry, index) => (\n <Box key={index} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n <Box\n component=\"span\"\n sx={{ width: sxRem(10), height: sxRem(10), borderRadius: sxRem(2), backgroundColor: entry.color, flexShrink: 0 }}\n />\n <Typography variant=\"body2\" sx={{ color: 'text.secondary' }}>\n {entry.name}\n </Typography>\n <Typography variant=\"body2\" sx={{ ml: 'auto', fontWeight: 600 }}>\n {formatValue(entry.value)}\n </Typography>\n </Box>\n ))}\n </Paper>\n );\n};\n\nexport interface ChartLegendContentProps {\n payload?: Array<{ value?: string | number; color?: string }>;\n}\n\n/** Theme-aware legend content matching the tooltip's swatch styling. */\nexport const ChartLegendContent: React.FC<ChartLegendContentProps> = ({ payload }) => {\n if (!payload || payload.length === 0) return null;\n return (\n <Box sx={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 2, pt: 1 }}>\n {payload.map((entry, index) => (\n <Box key={index} sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>\n <Box\n component=\"span\"\n sx={{ width: sxRem(10), height: sxRem(10), borderRadius: sxRem(2), backgroundColor: entry.color, flexShrink: 0 }}\n />\n <Typography variant=\"caption\" sx={{ color: 'text.secondary' }}>\n {entry.value}\n </Typography>\n </Box>\n ))}\n </Box>\n );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-JHEGDDZQ.js → chunk-RKI3MRKX.js} RENAMED Viewed

@@ -11,6 +11,7 @@ import {
   Text
 } from "./chunk-WTOYEWW6.js";
 import {
+  rem,
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -19,6 +20,7 @@ import DownloadRoundedIcon from "@mui/icons-material/DownloadRounded";
 import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
 import CircularProgress from "@mui/material/CircularProgress/index.js";
 import Popover from "@mui/material/Popover/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
 import { useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ALL_FORMATS = ["xlsx", "csv", "json"];
@@ -35,6 +37,7 @@ function ExportTrigger({
   compact
 }) {
   const copy = useDataViewsCopy();
+  const theme = useTheme();
   return /* @__PURE__ */ jsx(
     Button,
     {
@@ -47,7 +50,7 @@ function ExportTrigger({
       "aria-label": copy.export.trigger,
       title: compact ? copy.export.trigger : void 0,
       children: /* @__PURE__ */ jsxs(default2, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: [
-        busy ? /* @__PURE__ */ jsx(CircularProgress, { size: 14 }) : /* @__PURE__ */ jsx(DownloadRoundedIcon, { fontSize: "small" }),
+        busy ? /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, 14) }) : /* @__PURE__ */ jsx(DownloadRoundedIcon, { fontSize: "small" }),
         !compact && /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: { xs: "none", sm: "inline" } }, children: copy.export.triggerLabel }),
         !compact && /* @__PURE__ */ jsx(KeyboardArrowDownRoundedIcon, { fontSize: "small" })
       ] })
@@ -153,7 +156,7 @@ function DataViewsExportMenu({
         onClose: () => setAnchor(null),
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" },
-        slotProps: { paper: { sx: { width: 260, maxWidth: "calc(100vw - 32px)" } } },
+        slotProps: { paper: { sx: { width: sxRem(260), maxWidth: (theme) => `calc(100vw - ${rem(theme, 32)})` } } },
         children: /* @__PURE__ */ jsx(
           ExportPanel,
           {
@@ -173,4 +176,4 @@ function DataViewsExportMenu({
 export {
   DataViewsExportMenu
 };
-//# sourceMappingURL=chunk-JHEGDDZQ.js.map
+//# sourceMappingURL=chunk-RKI3MRKX.js.map

package/dist/chunk-RKI3MRKX.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/DataViews/data-views-export.tsx"],"sourcesContent":["\"use client\";\n\nimport DownloadRoundedIcon from \"@mui/icons-material/DownloadRounded\";\nimport KeyboardArrowDownRoundedIcon from \"@mui/icons-material/KeyboardArrowDownRounded\";\nimport CircularProgress from \"@mui/material/CircularProgress/index.js\";\nimport Popover from \"@mui/material/Popover/index.js\";\nimport { useTheme, type Theme } from \"@mui/material/styles/index.js\";\nimport { useState } from \"react\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { Button } from \"../../form/Button\";\nimport { Box } from \"../../../mui/Box\";\nimport { Text } from \"../../typography/Text\";\n\nimport type { DataViewQuery } from \"./data-views-types\";\nimport { rem, sxRem } from \"../../../tokens/relative\";\n\n/**\n * EXPORT — the current QUERY, never the rendered page.\n *\n * Exporting what happens to be on screen is the single most common bug in an\n * admin table: the operator filtered 214 records, sees 25, exports, and gets\n * 25 — with nothing anywhere saying so. So this control does not touch the\n * loaded rows at all. It hands the host the same `DataViewQuery` the grid is\n * showing, unpaginated, and the HOST re-queries the backend — the same\n * division as everywhere else here: the component emits, the host fetches.\n *\n * The menu states the number it is about to export before the click, so the\n * two possible answers (the selection, or the whole filtered set) are never a\n * guess.\n */\n\n/** What a host can be asked to produce. */\nexport type DataViewExportFormat = \"xlsx\" | \"csv\" | \"json\";\n\n/** The request handed to the host when the operator picks a format. */\nexport interface DataViewExportRequest {\n format: DataViewExportFormat;\n /**\n * The live query with `page: 1` and `pageSize` set to the whole matched\n * total — i.e. \"everything this filter selects\", not this page.\n */\n query: DataViewQuery;\n /**\n * The selected row ids, when the operator has a selection. The host filters\n * the re-queried rows to these; absent means the whole filtered set.\n */\n selectedIds?: Array<string | number>;\n /** The visible columns, in the operator's current order. */\n columns: { id: string; label: string }[];\n}\n\n/** Injected export. Absent ⇒ no Exportar control, exactly like `renderCard`. */\nexport interface DataViewExport {\n /** Runs the export. Awaited, so the trigger can show it is working. */\n onExport: (request: DataViewExportRequest) => Promise<void> | void;\n /** Formats to offer, in menu order. Defaults to all three. */\n formats?: DataViewExportFormat[];\n}\n\n/** One line per format: what it is, and when to reach for it. */\n\nconst ALL_FORMATS: DataViewExportFormat[] = [\"xlsx\", \"csv\", \"json\"];\n\ninterface ExportMenuProps {\n config: DataViewExport;\n /** The live query — copied and unpaginated before it reaches the host. */\n query: DataViewQuery;\n /** The unpaginated total, so the label can state what \"tudo\" means. */\n totalCount: number;\n selectedIds: Array<string | number>;\n columns: { id: string; label: string }[];\n testIdPrefix: string;\n /** Render icon-only (measured upstream). */\n compact?: boolean;\n}\n\n/** \"Exportando 214 itens filtrados\" / \"3 itens selecionados\" — never a guess. */\nfunction scopeLabel(selected: number, total: number): string {\n if (selected > 0) {\n return `${selected} ${selected === 1 ? \"item selecionado\" : \"itens selecionados\"}`;\n }\n return `${total} ${total === 1 ? \"item filtrado\" : \"itens filtrados\"}`;\n}\n\n/** The trigger. Shows a spinner while the host's export is still running. */\nfunction ExportTrigger({\n busy,\n onOpen,\n testIdPrefix,\n compact,\n}: {\n busy: boolean;\n onOpen: (anchor: HTMLElement) => void;\n testIdPrefix: string;\n /** Icon only — step 2 of the toolbar's degradation ladder. */\n compact?: boolean;\n}): React.JSX.Element {\n const copy = useDataViewsCopy();\n const theme = useTheme();\n return (\n <Button\n variant=\"outline\"\n size=\"sm\"\n color=\"neutral\"\n disabled={busy}\n onClick={(event) => onOpen(event.currentTarget as HTMLElement)}\n dataTestId={`${testIdPrefix}-export-trigger`}\n aria-label={copy.export.trigger}\n // The label is gone, so the tooltip is the only thing naming the control.\n title={compact ? copy.export.trigger : undefined}\n >\n <Box component=\"span\" sx={{ display: \"inline-flex\", alignItems: \"center\", gap: 0.5 }}>\n {busy ? <CircularProgress size={rem(theme, 14)} /> : <DownloadRoundedIcon fontSize=\"small\" />}\n {!compact && (\n <Box component=\"span\" sx={{ display: { xs: \"none\", sm: \"inline\" } }}>\n {copy.export.triggerLabel}\n </Box>\n )}\n {/* Dropped with the label — see the note on the Exibir trigger. */}\n {!compact && <KeyboardArrowDownRoundedIcon fontSize=\"small\" />}\n </Box>\n </Button>\n );\n}\n\n/** One format row: what it produces, and when to reach for it. */\nfunction FormatRow({\n format,\n onPick,\n testIdPrefix,\n}: {\n format: DataViewExportFormat;\n onPick: () => void;\n testIdPrefix: string;\n}): React.JSX.Element {\n const copy = useDataViewsCopy();\n return (\n <Box\n component=\"button\"\n type=\"button\"\n onClick={onPick}\n data-testid={`${testIdPrefix}-export-${format}`}\n sx={{\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n width: \"100%\",\n px: 1.5,\n py: 1,\n border: 0,\n background: \"none\",\n cursor: \"pointer\",\n font: \"inherit\",\n textAlign: \"left\",\n \"&:hover\": { bgcolor: \"action.hover\" },\n }}\n >\n <Box component=\"span\" sx={{ fontSize: sxRem(13) }}>\n {copy.export.formats[format]?.label ?? format}\n </Box>\n <Box component=\"span\" sx={{ fontSize: sxRem(11), color: \"text.disabled\" }}>\n {copy.export.formats[format]?.hint ?? \"\"}\n </Box>\n </Box>\n );\n}\n\n/** The panel: what is about to be exported, then the formats. */\nfunction ExportPanel({\n formats,\n selectedCount,\n totalCount,\n columnCount,\n onPick,\n testIdPrefix,\n}: {\n formats: DataViewExportFormat[];\n selectedCount: number;\n totalCount: number;\n columnCount: number;\n onPick: (format: DataViewExportFormat) => void;\n testIdPrefix: string;\n}): React.JSX.Element {\n const copy = useDataViewsCopy();\n return (\n <Box data-testid={`${testIdPrefix}-export-panel`}>\n <Box sx={{ px: 1.5, pt: 1, pb: 1, borderBottom: 1, borderColor: \"divider\" }}>\n <Text variant=\"caption\" as=\"p\">\n <Box component=\"span\" data-testid={`${testIdPrefix}-export-scope`}>\n Exportando {scopeLabel(selectedCount, totalCount)}\n </Box>\n </Text>\n <Text variant=\"caption\" as=\"p\">\n <Box component=\"span\" sx={{ color: \"text.disabled\" }}>\n {copy.export.visibleColumns(columnCount)}\n </Box>\n </Text>\n </Box>\n {formats.map((format) => (\n <FormatRow\n key={format}\n format={format}\n onPick={() => onPick(format)}\n testIdPrefix={testIdPrefix}\n />\n ))}\n </Box>\n );\n}\n\n/** The toolbar's Exportar control. Renders nothing when no host wired it. */\nexport function DataViewsExportMenu({\n config,\n query,\n totalCount,\n selectedIds,\n columns,\n testIdPrefix,\n compact,\n}: ExportMenuProps): React.JSX.Element {\n const [anchor, setAnchor] = useState<HTMLElement | null>(null);\n const [busy, setBusy] = useState(false);\n\n const run = async (format: DataViewExportFormat): Promise<void> => {\n setAnchor(null);\n setBusy(true);\n try {\n await config.onExport({\n format,\n // UNPAGINATED: page 1 of a page as large as the whole result. The host\n // re-queries with this; nothing here reads the loaded rows.\n query: { ...query, page: 1, pageSize: Math.max(1, totalCount) },\n selectedIds: selectedIds.length > 0 ? [...selectedIds] : undefined,\n columns,\n });\n } finally {\n setBusy(false);\n }\n };\n\n return (\n <>\n <ExportTrigger busy={busy} onOpen={setAnchor} testIdPrefix={testIdPrefix} compact={compact} />\n <Popover\n open={Boolean(anchor)}\n anchorEl={anchor}\n onClose={() => setAnchor(null)}\n anchorOrigin={{ vertical: \"bottom\", horizontal: \"right\" }}\n transformOrigin={{ vertical: \"top\", horizontal: \"right\" }}\n slotProps={{ paper: { sx: { width: sxRem(260), maxWidth: (theme: Theme) => `calc(100vw - ${rem(theme, 32)})` } } }}\n >\n <ExportPanel\n formats={config.formats ?? ALL_FORMATS}\n selectedCount={selectedIds.length}\n totalCount={totalCount}\n columnCount={columns.length}\n onPick={(format) => void run(format)}\n testIdPrefix={testIdPrefix}\n />\n </Popover>\n </>\n );\n}\n"],"mappings":"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","names":["default"]}

package/dist/{chunk-SYNMQWT4.js → chunk-RL2UIC4E.js} RENAMED Viewed

@@ -1,6 +1,9 @@
 import {
   useDateTimeParts
 } from "./chunk-ULJ4C6JW.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 // src/components/data-display/DateTimeDisplay/DateTimeDisplay.tsx
 import Box from "@mui/material/Box/index.js";
@@ -12,13 +15,13 @@ function getFontSizes(size) {
   switch (size) {
     case "xs":
     case "sm":
-      return { date: "0.75rem", time: "0.65rem" };
+      return { date: sxRem(12), time: sxRem(10.4) };
     case "lg":
     case "xl":
-      return { date: "1rem", time: "0.875rem" };
+      return { date: sxRem(16), time: sxRem(14) };
     case "md":
     default:
-      return { date: "0.875rem", time: "0.75rem" };
+      return { date: sxRem(14), time: sxRem(12) };
   }
 }
 var Stacked = forwardRef(
@@ -132,4 +135,4 @@ DateTimeDisplay.displayName = "DateTimeDisplay";
 export {
   DateTimeDisplay
 };
-//# sourceMappingURL=chunk-SYNMQWT4.js.map
+//# sourceMappingURL=chunk-RL2UIC4E.js.map

package/dist/chunk-RL2UIC4E.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/DateTimeDisplay/DateTimeDisplay.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Tooltip from '@mui/material/Tooltip/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { forwardRef } from 'react';\n\nimport { useDateTimeParts } from './DateTimeDisplay.hooks';\nimport type { DateTimeDisplayProps } from './DateTimeDisplay.types';\nimport { sxRem } from '../../../tokens/relative';\nimport type { SizeValue } from '../../../tokens/scales';\n\n/**\n * Get font sizes based on size prop\n */\nfunction getFontSizes(size: SizeValue) {\n switch (size) {\n case 'xs':\n case 'sm':\n return { date: sxRem(12), time: sxRem(10.4) };\n case 'lg':\n case 'xl':\n return { date: sxRem(16), time: sxRem(14) };\n case 'md':\n default:\n return { date: sxRem(14), time: sxRem(12) };\n }\n}\n\ninterface StackedProps {\n formattedDate: string | null;\n formattedTime: string | null;\n fontSizes: ReturnType<typeof getFontSizes>;\n showTooltip: boolean;\n sx: DateTimeDisplayProps['sx'];\n dataTestId?: string;\n}\n\nconst Stacked = forwardRef<HTMLSpanElement, StackedProps>(\n ({ formattedDate, formattedTime, fontSizes, showTooltip, sx, dataTestId }, ref) => (\n <Box\n component=\"span\"\n ref={ref}\n data-testid={dataTestId}\n sx={{\n display: 'inline-flex',\n flexDirection: 'column',\n lineHeight: 1.3,\n cursor: showTooltip ? 'help' : 'default',\n ...sx,\n }}\n >\n <Typography\n component=\"span\"\n sx={{\n fontWeight: 500,\n fontSize: fontSizes.date,\n }}\n data-testid={dataTestId ? `${dataTestId}-date` : undefined}\n >\n {formattedDate}\n </Typography>\n {formattedTime && (\n <Typography\n component=\"span\"\n sx={{\n fontSize: fontSizes.time,\n color: 'text.secondary',\n }}\n data-testid={dataTestId ? `${dataTestId}-time` : undefined}\n >\n {formattedTime}\n </Typography>\n )}\n </Box>\n ),\n);\n\nStacked.displayName = 'DateTimeDisplayStacked';\n\n/**\n * DateTimeDisplay component - displays date and time in a stacked format\n * with date on one line and time on another.\n */\nexport const DateTimeDisplay = forwardRef<HTMLSpanElement, DateTimeDisplayProps>(\n (\n {\n date,\n dateFormat = 'short',\n timeFormat = '12h',\n showTimezone = false,\n size = 'md',\n showTooltip = true,\n tooltipContent,\n sx,\n dataTestId,\n },\n ref,\n ) => {\n const { dateObj, formattedDate, formattedTime, fullDateTime } = useDateTimeParts({\n date,\n dateFormat,\n timeFormat,\n showTimezone,\n });\n const fontSizes = getFontSizes(size);\n\n // Handle invalid or missing date\n if (!dateObj) {\n return (\n <Box\n component=\"span\"\n ref={ref}\n data-testid={dataTestId}\n sx={{ color: 'text.disabled', ...sx }}\n >\n <Typography variant=\"caption\">-</Typography>\n </Box>\n );\n }\n\n const content = (\n <Stacked\n ref={ref}\n formattedDate={formattedDate}\n formattedTime={formattedTime}\n fontSizes={fontSizes}\n showTooltip={showTooltip}\n sx={sx}\n dataTestId={dataTestId}\n />\n );\n\n if (!showTooltip) {\n return content;\n }\n\n return (\n <Tooltip\n title={tooltipContent || fullDateTime}\n arrow\n placement=\"top\"\n slotProps={{\n tooltip: {\n sx: { px: 2, py: 1 },\n },\n }}\n >\n {content}\n </Tooltip>\n );\n },\n);\n\nDateTimeDisplay.displayName = 'DateTimeDisplay';\n"],"mappings":";;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,aAAa;AACpB,OAAO,gBAAgB;AACvB,SAAS,kBAAkB;AAmCvB,SAYE,KAZF;AAzBJ,SAAS,aAAa,MAAiB;AACrC,UAAQ,MAAM;AAAA,IACZ,KAAK;AAAA,IACL,KAAK;AACH,aAAO,EAAE,MAAM,MAAM,EAAE,GAAG,MAAM,MAAM,IAAI,EAAE;AAAA,IAC9C,KAAK;AAAA,IACL,KAAK;AACH,aAAO,EAAE,MAAM,MAAM,EAAE,GAAG,MAAM,MAAM,EAAE,EAAE;AAAA,IAC5C,KAAK;AAAA,IACL;AACE,aAAO,EAAE,MAAM,MAAM,EAAE,GAAG,MAAM,MAAM,EAAE,EAAE;AAAA,EAC9C;AACF;AAWA,IAAM,UAAU;AAAA,EACd,CAAC,EAAE,eAAe,eAAe,WAAW,aAAa,IAAI,WAAW,GAAG,QACzE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,eAAa;AAAA,MACb,IAAI;AAAA,QACF,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,QAAQ,cAAc,SAAS;AAAA,QAC/B,GAAG;AAAA,MACL;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,UAAU,UAAU;AAAA,YACtB;AAAA,YACA,eAAa,aAAa,GAAG,UAAU,UAAU;AAAA,YAEhD;AAAA;AAAA,QACH;AAAA,QACC,iBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,cACF,UAAU,UAAU;AAAA,cACpB,OAAO;AAAA,YACT;AAAA,YACA,eAAa,aAAa,GAAG,UAAU,UAAU;AAAA,YAEhD;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,QAAQ,cAAc;AAMf,IAAM,kBAAkB;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA,aAAa;AAAA,IACb,aAAa;AAAA,IACb,eAAe;AAAA,IACf,OAAO;AAAA,IACP,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,EAAE,SAAS,eAAe,eAAe,aAAa,IAAI,iBAAiB;AAAA,MAC/E;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AACD,UAAM,YAAY,aAAa,IAAI;AAGnC,QAAI,CAAC,SAAS;AACZ,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV;AAAA,UACA,eAAa;AAAA,UACb,IAAI,EAAE,OAAO,iBAAiB,GAAG,GAAG;AAAA,UAEpC,8BAAC,cAAW,SAAQ,WAAU,eAAC;AAAA;AAAA,MACjC;AAAA,IAEJ;AAEA,UAAM,UACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAGF,QAAI,CAAC,aAAa;AAChB,aAAO;AAAA,IACT;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,kBAAkB;AAAA,QACzB,OAAK;AAAA,QACL,WAAU;AAAA,QACV,WAAW;AAAA,UACT,SAAS;AAAA,YACP,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE;AAAA,UACrB;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,gBAAgB,cAAc;","names":[]}

package/dist/{chunk-RORP6DWR.js → chunk-RZ2C5CAW.js} RENAMED Viewed

@@ -3,7 +3,7 @@ import {
 } from "./chunk-JFEEV3XI.js";
 import {
   DescriptionItem
-} from "./chunk-VAGHW3K2.js";
+} from "./chunk-KREWQAEV.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -11,6 +11,7 @@ import {
   Text
 } from "./chunk-WTOYEWW6.js";
 import {
+  rem,
   sxRem
 } from "./chunk-YKCAJ2TN.js";
@@ -92,7 +93,7 @@ function ListCardMeta({
     default2,
     {
       "data-slot": "meta",
-      sx: {
+      sx: (theme) => ({
         display: "flex",
         alignItems: "center",
         justifyContent: "space-evenly",
@@ -103,8 +104,8 @@ function ListCardMeta({
         whiteSpace: "nowrap",
         ...TABULAR,
         // Rung 1 of the ladder.
-        [`@container (max-width: ${META_BREAK}px)`]: { display: "none" }
-      },
+        [`@container (max-width: ${rem(theme, META_BREAK)})`]: { display: "none" }
+      }),
       children: [
         items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
           index > 0 && /* @__PURE__ */ jsx(MetaRule, {}),
@@ -130,10 +131,10 @@ function ListCardMeta({
     }
   );
 }
-var VALUE_FLUSH = {
-  marginLeft: `-${RAIL_GAP_PX}px`,
-  [`@container (max-width: ${META_BREAK}px)`]: { marginLeft: 0 }
-};
+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,
@@ -197,10 +198,10 @@ function ListCardTail({
       default2,
       {
         "data-slot": "value",
-        sx: {
+        sx: (theme) => ({
           textAlign: "right",
-          ...separated && value != null ? VALUE_FLUSH : {}
-        },
+          ...separated && value != null ? valueFlush(theme) : {}
+        }),
         "data-testid": testId("value"),
         children: value != null && /* @__PURE__ */ jsx(ListCardValue, { value })
       }
@@ -225,4 +226,4 @@ export {
   ListCardActions,
   ListCardTail
 };
-//# sourceMappingURL=chunk-RORP6DWR.js.map
+//# sourceMappingURL=chunk-RZ2C5CAW.js.map

package/dist/chunk-RZ2C5CAW.js.map ADDED Viewed

@@ -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"]}

package/dist/{chunk-UO7ERXYX.js → chunk-S3D5VBHW.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   tableStyles
-} from "./chunk-ZTKLKOOO.js";
+} from "./chunk-POV2KL2P.js";
 import {
   TABLE_DEFAULTS,
   definedProps
@@ -16,6 +16,9 @@ import {
 import {
   useTableSelection
 } from "./chunk-DF4K5XVW.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 // src/components/data-display/Table/Table.tsx
 import MoreVertIcon from "@mui/icons-material/MoreVert";
@@ -31,14 +34,18 @@ import TableBody from "@mui/material/TableBody/index.js";
 import TableCell from "@mui/material/TableCell/index.js";
 import TableContainer from "@mui/material/TableContainer/index.js";
 import TableRow from "@mui/material/TableRow/index.js";
-import { styled } from "@mui/material/styles/index.js";
+import { styled, useTheme } from "@mui/material/styles/index.js";
 import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var scrollHeight = (theme, containerHeight) => {
+  const box = containerHeight || 400;
+  return typeof box === "number" ? rem(theme, box) : box;
+};
 var StyledTableContainer = styled(TableContainer, {
   shouldForwardProp: (prop) => !["virtualScrolling", "containerHeight"].includes(prop)
-})(({ virtualScrolling, containerHeight }) => ({
+})(({ theme, virtualScrolling, containerHeight }) => ({
   ...virtualScrolling && {
-    height: containerHeight || 400,
+    height: scrollHeight(theme, containerHeight),
     overflow: "auto"
   }
 }));
@@ -87,7 +94,10 @@ var TableShell = ({
   }
 ) });
 var SKELETON_ROW_COUNT = 5;
-var LoadingSkeletonRows = ({ columns }) => /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: SKELETON_ROW_COUNT }, (_, index) => /* @__PURE__ */ jsx(TableRow, { children: columns?.map((column) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { height: 20 }) }, column.key)) }, index)) });
+var LoadingSkeletonRows = ({ columns }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: SKELETON_ROW_COUNT }, (_, index) => /* @__PURE__ */ jsx(TableRow, { children: columns?.map((column) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { height: rem(theme, 20) }) }, column.key)) }, index)) });
+};
 var ColumnToggleMenu = ({ columns, hiddenColumns, anchor, setAnchor, setHiddenColumns }) => /* @__PURE__ */ jsxs(Box, { position: "absolute", top: 8, right: 8, children: [
   /* @__PURE__ */ jsx(IconButton, { onClick: (event) => setAnchor(event.currentTarget), size: "small", children: /* @__PURE__ */ jsx(MoreVertIcon, {}) }),
   /* @__PURE__ */ jsx(Menu, { anchorEl: anchor, open: Boolean(anchor), onClose: () => setAnchor(null), children: columns.map((column, index) => /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx(
@@ -285,4 +295,4 @@ Table.displayName = "Table";
 export {
   Table
 };
-//# sourceMappingURL=chunk-UO7ERXYX.js.map
+//# sourceMappingURL=chunk-S3D5VBHW.js.map

package/dist/chunk-S3D5VBHW.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/Table/Table.tsx"],"sourcesContent":["import MoreVertIcon from '@mui/icons-material/MoreVert';\nimport Box from '@mui/material/Box/index.js';\nimport FormControlLabel from '@mui/material/FormControlLabel/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport Skeleton from '@mui/material/Skeleton/index.js';\nimport Switch from '@mui/material/Switch/index.js';\nimport MuiTable from '@mui/material/Table/index.js';\nimport TableBody from '@mui/material/TableBody/index.js';\nimport TableCell from '@mui/material/TableCell/index.js';\nimport TableContainer from '@mui/material/TableContainer/index.js';\nimport TableRow from '@mui/material/TableRow/index.js';\nimport { styled, useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type {\n ColumnConfig,\n TableDensity,\n TableProps,\n TableStripeColor} from './Table.types';\nimport { TABLE_DEFAULTS, definedProps } from './Table.helpers';\nimport { useTableSelection } from './Table.hooks';\nimport { EnhancedTableBody, EnhancedTableHeader } from './TableParts';\nimport { EmptyRow, NoDataPlaceholder } from './TableStates';\nimport {\n tableStyles } from './Table.styles';\nimport { rem } from '../../../tokens/relative';\n\n/** The scroll box's height: a number is design px, 400 unless the caller says otherwise. */\nconst scrollHeight = (theme: Theme, containerHeight: number | string | undefined): string => {\n const box = containerHeight || 400;\n return typeof box === 'number' ? rem(theme, box) : box;\n};\n\n// Define pulse animation\nconst StyledTableContainer = styled(TableContainer, {\n shouldForwardProp: (prop) => !['virtualScrolling', 'containerHeight'].includes(prop as string) })<{ \n virtualScrolling?: boolean; \n containerHeight?: number | string;\n}>(({ theme, virtualScrolling, containerHeight }) => ({\n ...(virtualScrolling && {\n height: scrollHeight(theme, containerHeight),\n overflow: 'auto' }) }));\n\n// Helper function to get stripe color from theme\nconst StyledTable = styled(MuiTable, {\n shouldForwardProp: (prop) =>\n !['customVariant', 'glow', 'pulse', 'hoverable', 'density', 'stickyHeader', 'stripeColor'].includes(prop as string) })<{\n customVariant?: string;\n glow?: boolean;\n pulse?: boolean;\n hoverable?: boolean;\n density?: TableDensity;\n stickyHeader?: boolean;\n stripeColor?: TableStripeColor;\n}>(({ theme, customVariant, glow, pulse, hoverable, density, stickyHeader, stripeColor = 'neutral' }) => {\n return tableStyles({\n theme,\n customVariant,\n glow,\n pulse,\n hoverable,\n density,\n stickyHeader,\n stripeColor });\n});\n\n// Virtual Scrolling Hook\nconst TableShell: React.FC<{\n innerRef: React.Ref<globalThis.HTMLTableElement>;\n variant?: string;\n stripeColor?: TableStripeColor;\n glow?: boolean;\n pulse?: boolean;\n hoverable?: boolean;\n density?: TableDensity;\n stickyHeader?: boolean;\n header: React.ReactNode;\n rest: Record<string, unknown>;\n children: React.ReactNode;\n}> = ({\n innerRef,\n variant,\n stripeColor,\n glow,\n pulse,\n hoverable,\n density,\n stickyHeader,\n header,\n rest,\n children }) => (\n <StyledTableContainer>\n <StyledTable\n ref={innerRef}\n customVariant={variant}\n stripeColor={stripeColor}\n glow={glow}\n pulse={pulse}\n hoverable={hoverable}\n density={density}\n stickyHeader={stickyHeader}\n {...rest}\n >\n {header}\n {children}\n </StyledTable>\n </StyledTableContainer>\n);\n\nconst SKELETON_ROW_COUNT = 5;\n\nconst LoadingSkeletonRows: React.FC<{ columns?: ColumnConfig[] }> = ({ columns }) => {\n const theme = useTheme();\n return (\n <>\n {Array.from({ length: SKELETON_ROW_COUNT }, (_, index) => (\n <TableRow key={index}>\n {columns?.map((column) => (\n <TableCell key={column.key}>\n <Skeleton height={rem(theme, 20)} />\n </TableCell>\n ))}\n </TableRow>\n ))}\n </>\n );\n};\n\nexport type TableShellProps = Omit<React.ComponentProps<typeof TableShell>, 'children'>;\n\ntype Selection = ReturnType<typeof useTableSelection>;\n\ninterface RendererProps {\n resolved: TableProps;\n selection: Selection;\n innerRef: React.Ref<globalThis.HTMLTableElement>;\n rest: Record<string, unknown>;\n}\n\n// The column-visibility control, shown only when responsive mode has actually\n// hidden something on a narrow viewport.\nconst ColumnToggleMenu: React.FC<{\n columns: ColumnConfig[];\n hiddenColumns: number[];\n anchor: HTMLElement | null;\n setAnchor: (element: HTMLElement | null) => void;\n setHiddenColumns: (next: number[]) => void;\n}> = ({ columns, hiddenColumns, anchor, setAnchor, setHiddenColumns }) => (\n <Box position=\"absolute\" top={8} right={8}>\n <IconButton onClick={(event) => setAnchor(event.currentTarget)} size=\"small\">\n <MoreVertIcon />\n </IconButton>\n <Menu anchorEl={anchor} open={Boolean(anchor)} onClose={() => setAnchor(null)}>\n {columns.map((column, index) => (\n <MenuItem key={column.key}>\n <FormControlLabel\n control={\n <Switch\n checked={!hiddenColumns.includes(index)}\n onChange={(event) =>\n setHiddenColumns(\n event.target.checked\n ? hiddenColumns.filter((i: number) => i !== index)\n : [...hiddenColumns, index],\n )\n }\n size=\"small\"\n />\n }\n label={column.label}\n />\n </MenuItem>\n ))}\n </Menu>\n </Box>\n);\n\n// The populated table. Local because StyledTableContainer and StyledTable\n// cannot cross a module boundary (TS2742).\nconst columnsFor = (resolved: TableProps, selection: Selection): ColumnConfig[] =>\n (resolved.responsive ? selection.visibleColumns : resolved.columns) ?? [];\n\n// The toggle only earns its place when responsive mode has actually hidden\n// something on a narrow viewport.\nconst showsColumnToggle = (resolved: TableProps, selection: Selection): boolean =>\n Boolean(\n resolved.responsive &&\n selection.isMobile &&\n resolved.showColumnToggle &&\n selection.hiddenColumns.length > 0,\n );\n\nconst AdvancedTable: React.FC<RendererProps> = ({ resolved: p, selection, innerRef, rest }) => {\n const finalColumns = columnsFor(p, selection);\n const showToggle = showsColumnToggle(p, selection);\n\n return (\n <Box position=\"relative\">\n <StyledTableContainer\n virtualScrolling={p.virtualScrolling}\n containerHeight={p.containerHeight}\n >\n <StyledTable\n ref={innerRef}\n customVariant={p.variant}\n stripeColor={p.stripeColor}\n glow={p.glow}\n pulse={p.pulse}\n hoverable={p.hoverable}\n density={p.density}\n stickyHeader={p.stickyHeader}\n {...rest}\n >\n <EnhancedTableHeader\n columns={finalColumns}\n data={p.data ?? []}\n sortable={p.sortable}\n sortConfig={p.sortConfig}\n onSortChange={p.onSortChange}\n selectable={p.selectable}\n selectedRows={p.selectedRows}\n onSelectAll={selection.handleSelectAll}\n density={p.density}\n stickyHeader={p.stickyHeader}\n />\n <EnhancedTableBody\n data={p.data ?? []}\n columns={finalColumns}\n selectedRows={p.selectedRows}\n onRowClick={p.onRowClick}\n onRowFocus={p.onRowFocus}\n onRowBlur={p.onRowBlur}\n onSelectionChange={selection.handleSelectionChange}\n rowKeyExtractor={p.rowKeyExtractor}\n density={p.density}\n selectable={p.selectable}\n hoverable={p.hoverable}\n renderRow={p.renderRow}\n renderCell={p.renderCell}\n virtualScrolling={p.virtualScrolling}\n containerHeight={typeof p.containerHeight === 'number' ? p.containerHeight : undefined}\n rowHeight={p.rowHeight}\n overscan={p.overscan}\n />\n </StyledTable>\n </StyledTableContainer>\n\n {showToggle && (\n <ColumnToggleMenu\n columns={p.columns ?? []}\n hiddenColumns={selection.hiddenColumns}\n anchor={selection.columnMenuAnchor}\n setAnchor={selection.setColumnMenuAnchor}\n setHiddenColumns={selection.setHiddenColumns}\n />\n )}\n </Box>\n );\n};\n\n// The loading and empty states render the same shell as the populated table, so\n// they share TableShell rather than repeating it three times.\nconst buildShell = ({\n resolved,\n selection,\n innerRef,\n rest,\n finalColumns }: RendererProps & { finalColumns?: ColumnConfig[] }) => ({\n innerRef,\n variant: resolved.variant,\n stripeColor: resolved.stripeColor,\n glow: resolved.glow,\n pulse: resolved.pulse,\n hoverable: resolved.hoverable,\n density: resolved.density,\n stickyHeader: resolved.stickyHeader,\n header: resolved.columns ? (\n <EnhancedTableHeader\n columns={finalColumns ?? []}\n data={[]}\n sortable={resolved.sortable}\n sortConfig={resolved.sortConfig}\n onSortChange={resolved.onSortChange}\n selectable={resolved.selectable}\n selectedRows={resolved.selectedRows}\n onSelectAll={selection.handleSelectAll}\n density={resolved.density}\n stickyHeader={resolved.stickyHeader}\n />\n ) : null,\n rest: rest as Record<string, unknown> });\n\nconst TableLoadingState: React.FC<{\n shell: TableShellProps;\n loadingComponent?: React.ReactNode;\n columns?: ColumnConfig[];\n}> = ({ shell, loadingComponent, columns }) => (\n <TableShell {...shell}>\n <TableBody data-testid=\"table-loading\">\n {loadingComponent || <LoadingSkeletonRows columns={columns} />}\n </TableBody>\n </TableShell>\n);\n\nconst TableEmptyState: React.FC<{\n shell: TableShellProps;\n emptyStateComponent?: React.ReactNode;\n emptyText: string;\n colSpan: number;\n}> = ({ shell, emptyStateComponent, emptyText, colSpan }) => (\n <TableShell {...shell}>\n <EmptyRow colSpan={colSpan}>\n {emptyStateComponent || <NoDataPlaceholder emptyText={emptyText} />}\n </EmptyRow>\n </TableShell>\n);\n\nexport const Table = React.forwardRef<globalThis.HTMLTableElement, TableProps>(\n (tableProps, ref) => {\n const resolved = { ...TABLE_DEFAULTS, ...definedProps(tableProps) } as TableProps;\n const {\n columns,\n data,\n responsive,\n loading,\n loadingComponent,\n emptyStateComponent,\n emptyText,\n children,\n ...props\n } = resolved;\n\n const selection = useTableSelection({\n columns,\n data,\n responsive,\n columnPriorities: resolved.columnPriorities,\n selectedRows: resolved.selectedRows ?? [],\n rowKeyExtractor: resolved.rowKeyExtractor,\n onSelectionChange: resolved.onSelectionChange });\n\n const rest = props as unknown as Record<string, unknown>;\n const renderer: RendererProps = { resolved, selection, innerRef: ref, rest };\n const finalColumns = responsive ? selection.visibleColumns : columns;\n const shell = buildShell({ ...renderer, finalColumns });\n\n if (loading) {\n return (\n <TableLoadingState shell={shell} loadingComponent={loadingComponent} columns={columns} />\n );\n }\n\n if (data && data.length === 0) {\n return (\n <TableEmptyState\n shell={shell}\n emptyStateComponent={emptyStateComponent}\n emptyText={emptyText}\n colSpan={finalColumns?.length || 1}\n />\n );\n }\n\n if (columns && data) return <AdvancedTable {...renderer} />;\n\n // Basic table (backward compatibility)\n return (\n <StyledTable\n ref={ref}\n customVariant={resolved.variant}\n stripeColor={resolved.stripeColor}\n glow={resolved.glow}\n pulse={resolved.pulse}\n hoverable={resolved.hoverable}\n density={resolved.density}\n stickyHeader={resolved.stickyHeader}\n {...rest}\n >\n {children}\n </StyledTable>\n );\n },\n);\n\nTable.displayName = 'Table';"],"mappings":"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","names":[]}

package/dist/{chunk-SCRN2RE4.js → chunk-S5UY5U73.js} RENAMED Viewed

@@ -5,7 +5,6 @@ var TOOLTIP_DEFAULTS = {
   size: "md",
   glow: false,
   pulse: false,
-  maxWidth: 300,
   clickable: true
 };
 var definedProps = (props) => Object.fromEntries(
@@ -61,4 +60,4 @@ export {
   resolveTooltipProps,
   usePinnedTooltip
 };
-//# sourceMappingURL=chunk-SCRN2RE4.js.map
+//# sourceMappingURL=chunk-S5UY5U73.js.map

package/dist/chunk-S5UY5U73.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/InteractiveTooltip/InteractiveTooltip.hooks.ts"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { InteractiveTooltipProps } from './InteractiveTooltip.types';\n\n// `maxWidth` defaults where it is read (`tooltipCap`), in design px through the theme.\ntype TooltipDefaultedKeys = 'variant' | 'size' | 'glow' | 'pulse' | 'clickable';\n\ntype ResolvedTooltipProps = InteractiveTooltipProps &\n Required<Pick<InteractiveTooltipProps, TooltipDefaultedKeys>>;\n\nconst TOOLTIP_DEFAULTS: Pick<InteractiveTooltipProps, TooltipDefaultedKeys> = {\n variant: 'default',\n size: 'md',\n glow: false,\n pulse: false,\n clickable: true,\n};\n\n// Strips explicitly-undefined props before the merge, so `size={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = (props: InteractiveTooltipProps): Partial<InteractiveTooltipProps> =>\n Object.fromEntries(\n Object.entries(props).filter(([, value]) => value !== undefined),\n ) as Partial<InteractiveTooltipProps>;\n\nexport const resolveTooltipProps = (\n props: InteractiveTooltipProps,\n): ResolvedTooltipProps =>\n ({ ...TOOLTIP_DEFAULTS, ...definedProps(props) }) as ResolvedTooltipProps;\n\ninterface PinOptions {\n clickable: boolean;\n onPin?: () => void;\n onUnpin?: () => void;\n}\n\n/**\n * Clicking the trigger pins the tooltip open; clicking anywhere that is neither\n * the tooltip nor the trigger unpins it. The listener only exists while pinned,\n * so an unpinned tooltip costs nothing on every document click.\n */\nexport const usePinnedTooltip = ({ clickable, onPin, onUnpin }: PinOptions) => {\n const [isPinned, setIsPinned] = useState(false);\n const [isControlledOpen, setIsControlledOpen] = useState(false);\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!isPinned || !clickable) {\n return;\n }\n\n const handleClickOutside = (event: MouseEvent) => {\n const targetElement = event.target as Element;\n\n // Check if click was on tooltip or trigger\n const isClickOnTooltip = targetElement.closest('[role=\"tooltip\"]');\n const isClickOnTrigger = wrapperRef.current?.contains(targetElement);\n\n if (isClickOnTooltip || isClickOnTrigger) {\n return;\n }\n\n // Click was outside - unpin\n setIsPinned(false);\n setIsControlledOpen(false);\n onUnpin?.();\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [isPinned, clickable, onUnpin]);\n\n const handleClick = useCallback(\n (e: React.MouseEvent) => {\n if (!clickable) return;\n\n e.preventDefault();\n e.stopPropagation();\n\n setIsPinned((current) => {\n const newPinned = !current;\n setIsControlledOpen(newPinned);\n\n if (newPinned) {\n onPin?.();\n } else {\n onUnpin?.();\n }\n\n return newPinned;\n });\n },\n [clickable, onPin, onUnpin],\n );\n\n return { isPinned, isControlledOpen, wrapperRef, handleClick };\n};\n"],"mappings":";AAAA,SAAgB,aAAa,WAAW,QAAQ,gBAAgB;AAUhE,IAAM,mBAAwE;AAAA,EAC5E,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AACb;AAIA,IAAM,eAAe,CAAC,UACpB,OAAO;AAAA,EACL,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AACjE;AAEK,IAAM,sBAAsB,CACjC,WAEC,EAAE,GAAG,kBAAkB,GAAG,aAAa,KAAK,EAAE;AAa1C,IAAM,mBAAmB,CAAC,EAAE,WAAW,OAAO,QAAQ,MAAkB;AAC7E,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAC9D,QAAM,aAAa,OAAuB,IAAI;AAE9C,YAAU,MAAM;AACd,QAAI,CAAC,YAAY,CAAC,WAAW;AAC3B;AAAA,IACF;AAEA,UAAM,qBAAqB,CAAC,UAAsB;AAChD,YAAM,gBAAgB,MAAM;AAG5B,YAAM,mBAAmB,cAAc,QAAQ,kBAAkB;AACjE,YAAM,mBAAmB,WAAW,SAAS,SAAS,aAAa;AAEnE,UAAI,oBAAoB,kBAAkB;AACxC;AAAA,MACF;AAGA,kBAAY,KAAK;AACjB,0BAAoB,KAAK;AACzB,gBAAU;AAAA,IACZ;AAEA,aAAS,iBAAiB,aAAa,kBAAkB;AACzD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,kBAAkB;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,UAAU,WAAW,OAAO,CAAC;AAEjC,QAAM,cAAc;AAAA,IAClB,CAAC,MAAwB;AACvB,UAAI,CAAC,UAAW;AAEhB,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAElB,kBAAY,CAAC,YAAY;AACvB,cAAM,YAAY,CAAC;AACnB,4BAAoB,SAAS;AAE7B,YAAI,WAAW;AACb,kBAAQ;AAAA,QACV,OAAO;AACL,oBAAU;AAAA,QACZ;AAEA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,WAAW,OAAO,OAAO;AAAA,EAC5B;AAEA,SAAO,EAAE,UAAU,kBAAkB,YAAY,YAAY;AAC/D;","names":[]}

package/dist/{chunk-4V532JF6.js → chunk-SOHQPPYJ.js} RENAMED Viewed

@@ -1,8 +1,10 @@
+import {
+  remPx
+} from "./chunk-YKCAJ2TN.js";
 // src/components/data-display/Chart/chart-axis.ts
 var DEFAULT_MAX_CATEGORY_TICKS = 8;
 var DEFAULT_TICK_LABEL_MAX_CHARS = 12;
-var DEFAULT_BAR_RADIUS = 3;
-var DEFAULT_MAX_BAR_WIDTH = 38;
 function selectCategoryTicks(values, maxTicks) {
   if (maxTicks < 1 || values.length <= maxTicks) return void 0;
   if (new Set(values).size !== values.length) return void 0;
@@ -38,13 +40,13 @@ function resolveAxisConfig(props, tickMargin) {
     tickFormatter: (value) => truncateTickLabel(value, maxChars)
   };
 }
-function resolveBarGeometry(props) {
-  const radius = props.barRadius ?? DEFAULT_BAR_RADIUS;
+function resolveBarGeometry(props, theme) {
+  const radius = remPx(theme, props.barRadius ?? 3);
   return {
     // A stacked segment rounded on its top corners tears a notch out of the
     // segment above it, so stacks stay square.
     radius: props.stacked ? 0 : [radius, radius, 0, 0],
-    maxBarSize: props.maxBarWidth ?? DEFAULT_MAX_BAR_WIDTH
+    maxBarSize: remPx(theme, props.maxBarWidth ?? 38)
   };
 }
@@ -55,4 +57,4 @@ export {
   resolveAxisConfig,
   resolveBarGeometry
 };
-//# sourceMappingURL=chunk-4V532JF6.js.map
+//# sourceMappingURL=chunk-SOHQPPYJ.js.map

package/dist/chunk-SOHQPPYJ.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/Chart/chart-axis.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport type { ChartDataPoint, ChartProps } from './Chart.types';\nimport { remPx } from '../../../tokens/relative';\n\n/**\n * Cartesian axis + bar geometry: the rules that keep a chart readable rather\n * than merely correct (FUT-391 visual pass).\n *\n * Three of them are pass/fail by looking at the rendered chart:\n *\n * - **No overlapping text.** The bottom value tick sits ON the x-axis line and\n * the first category tick sits ON the y-axis line, so the two labels meet at\n * the corner. Recharts' default `tickMargin` of 2 leaves the category label's\n * cap height inside the value label's descender — a few px of overlap at\n * every viewport. The margin has to clear the value label's box, which grows\n * with the font, hence a per-size value ({@link SIZE_PRESETS}).\n * - **Skip every nth tick, always keep the last, truncate at ~12 chars.** With\n * more categories than fit, Recharts thins them only when it can measure text\n * (never server-side, where `getStringSize` returns 0 and every label renders\n * on top of its neighbour). Thinning here is deterministic and viewport-free.\n * - **Bars rounded, capped, never touching the frame.** A two-category bar\n * chart in a wide card draws 150px slabs flush against the axis; the cap is\n * what turns them back into bars.\n */\n\n/** Category ticks kept before thinning starts. */\nconst DEFAULT_MAX_CATEGORY_TICKS = 8;\n/** Category tick labels longer than this are truncated with an ellipsis. */\nconst DEFAULT_TICK_LABEL_MAX_CHARS = 12;\n\n/**\n * Thin a category axis to at most `maxTicks` labels, keeping every nth.\n *\n * The walk runs from the END so the last category is always labelled — the\n * most recent day/bucket is the one a reader looks for first. Returns\n * `undefined` when everything already fits, which leaves Recharts' own\n * width-aware thinning in charge of the common small-data case.\n *\n * Also `undefined` when a value repeats: Recharts places an explicit tick by\n * looking its value up in the scale, so a duplicate would land the label on\n * the first row that carries it rather than on the row it was picked for.\n */\nexport function selectCategoryTicks(\n values: ReadonlyArray<string | number>,\n maxTicks: number,\n): Array<string | number> | undefined {\n if (maxTicks < 1 || values.length <= maxTicks) return undefined;\n if (new Set(values).size !== values.length) return undefined;\n const step = Math.ceil(values.length / maxTicks);\n const kept: Array<string | number> = [];\n for (let index = values.length - 1; index >= 0; index -= step) {\n const value = values[index];\n if (value !== undefined) kept.push(value);\n }\n return kept.reverse();\n}\n\n/** The category-axis values of `data`, in row order, skipping empty cells. */\nexport function categoryValues(\n data: ReadonlyArray<ChartDataPoint>,\n xAxisKey: string,\n): Array<string | number> {\n const values: Array<string | number> = [];\n for (const row of data) {\n const value = row[xAxisKey];\n if (value !== null && value !== undefined) values.push(value);\n }\n return values;\n}\n\n/** Shorten a tick label to `maxChars`, ellipsis included, never mid-render. */\nexport function truncateTickLabel(value: unknown, maxChars: number): string {\n const text = value === null || value === undefined ? '' : String(value);\n if (maxChars < 1 || text.length <= maxChars) return text;\n return `${text.slice(0, maxChars - 1)}…`;\n}\n\n/** Resolved geometry for the shared cartesian axes. */\nexport interface CartesianAxisConfig {\n /** Gap between an axis line and its tick labels, px. */\n tickMargin: number;\n /** Explicit category ticks once thinning applies; `undefined` = Recharts decides. */\n categoryTicks: Array<string | number> | undefined;\n /** Category tick label formatter (truncation). */\n tickFormatter: (value: unknown) => string;\n}\n\n/** Resolved geometry for bar series. */\nexport interface BarGeometry {\n /** Per-corner radius in rendered px, top corners only; `0` for stacked segments. */\n radius: number | [number, number, number, number];\n /** Cap on a bar's thickness in rendered px — also what keeps bars off the frame. */\n maxBarSize: number;\n}\n\nexport function resolveAxisConfig(props: ChartProps, tickMargin: number): CartesianAxisConfig {\n const maxChars = props.tickLabelMaxChars ?? DEFAULT_TICK_LABEL_MAX_CHARS;\n return {\n tickMargin,\n categoryTicks: selectCategoryTicks(\n categoryValues(props.data, props.xAxisKey ?? 'name'),\n props.maxCategoryTicks ?? DEFAULT_MAX_CATEGORY_TICKS,\n ),\n tickFormatter: (value: unknown) => truncateTickLabel(value, maxChars),\n };\n}\n\n/**\n * The bar geometry Recharts takes as px numbers, from design px through the\n * type scale: a 3px corner and a 38px thickness cap unless the caller says\n * otherwise.\n */\nexport function resolveBarGeometry(props: ChartProps, theme: Theme): BarGeometry {\n const radius = remPx(theme, props.barRadius ?? 3);\n return {\n // A stacked segment rounded on its top corners tears a notch out of the\n // segment above it, so stacks stay square.\n radius: props.stacked ? 0 : [radius, radius, 0, 0],\n maxBarSize: remPx(theme, props.maxBarWidth ?? 38),\n };\n}\n"],"mappings":";;;;;AA2BA,IAAM,6BAA6B;AAEnC,IAAM,+BAA+B;AAc9B,SAAS,oBACd,QACA,UACoC;AACpC,MAAI,WAAW,KAAK,OAAO,UAAU,SAAU,QAAO;AACtD,MAAI,IAAI,IAAI,MAAM,EAAE,SAAS,OAAO,OAAQ,QAAO;AACnD,QAAM,OAAO,KAAK,KAAK,OAAO,SAAS,QAAQ;AAC/C,QAAM,OAA+B,CAAC;AACtC,WAAS,QAAQ,OAAO,SAAS,GAAG,SAAS,GAAG,SAAS,MAAM;AAC7D,UAAM,QAAQ,OAAO,KAAK;AAC1B,QAAI,UAAU,OAAW,MAAK,KAAK,KAAK;AAAA,EAC1C;AACA,SAAO,KAAK,QAAQ;AACtB;AAGO,SAAS,eACd,MACA,UACwB;AACxB,QAAM,SAAiC,CAAC;AACxC,aAAW,OAAO,MAAM;AACtB,UAAM,QAAQ,IAAI,QAAQ;AAC1B,QAAI,UAAU,QAAQ,UAAU,OAAW,QAAO,KAAK,KAAK;AAAA,EAC9D;AACA,SAAO;AACT;AAGO,SAAS,kBAAkB,OAAgB,UAA0B;AAC1E,QAAM,OAAO,UAAU,QAAQ,UAAU,SAAY,KAAK,OAAO,KAAK;AACtE,MAAI,WAAW,KAAK,KAAK,UAAU,SAAU,QAAO;AACpD,SAAO,GAAG,KAAK,MAAM,GAAG,WAAW,CAAC,CAAC;AACvC;AAoBO,SAAS,kBAAkB,OAAmB,YAAyC;AAC5F,QAAM,WAAW,MAAM,qBAAqB;AAC5C,SAAO;AAAA,IACL;AAAA,IACA,eAAe;AAAA,MACb,eAAe,MAAM,MAAM,MAAM,YAAY,MAAM;AAAA,MACnD,MAAM,oBAAoB;AAAA,IAC5B;AAAA,IACA,eAAe,CAAC,UAAmB,kBAAkB,OAAO,QAAQ;AAAA,EACtE;AACF;AAOO,SAAS,mBAAmB,OAAmB,OAA2B;AAC/E,QAAM,SAAS,MAAM,OAAO,MAAM,aAAa,CAAC;AAChD,SAAO;AAAA;AAAA;AAAA,IAGL,QAAQ,MAAM,UAAU,IAAI,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,IACjD,YAAY,MAAM,OAAO,MAAM,eAAe,EAAE;AAAA,EAClD;AACF;","names":[]}

package/dist/{chunk-XREYLKUX.js → chunk-SQYC57ZN.js} RENAMED Viewed

@@ -4,11 +4,11 @@ import {
   isActionable,
   isSelectable,
   slotTestIds
-} from "./chunk-NXX3ZQKO.js";
+} from "./chunk-BYH5GPLT.js";
 import {
   DragHandle,
   useDragItem
-} from "./chunk-JCJGJX7V.js";
+} from "./chunk-K4EKTMTC.js";
 import {
   CARD_ASPECT_RATIOS
 } from "./chunk-LHHAYZ55.js";
@@ -28,13 +28,14 @@ import {
   Text
 } from "./chunk-WTOYEWW6.js";
 import {
-  rem
+  rem,
+  sxRem
 } from "./chunk-YKCAJ2TN.js";
 // src/components/data-display/DataViews/base-card.tsx
 import { useTheme } from "@mui/material/styles/index.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function cardSx(opts) {
+var cardSx = (opts) => {
   const { aspectRatio, pad, scale, interactive, draggable } = opts;
   return {
     position: "relative",
@@ -47,12 +48,12 @@ function cardSx(opts) {
     cursor: draggable ? "grab" : interactive ? "pointer" : void 0,
     ...draggable ? { touchAction: "none", "&:active": { cursor: "grabbing" } } : {}
   };
-}
-var OVERLAY_BAND_PX = 42;
+};
+var OVERLAY_BAND_UNITS = 42 / 8;
 function contentGaps(opts) {
   const { hasMedia, hasBody, overlays, pad } = opts;
   const gap = pad * 0.5;
-  const clear = !hasMedia && overlays ? Math.max(0, OVERLAY_BAND_PX / 8 - pad) : 0;
+  const clear = !hasMedia && overlays ? Math.max(0, OVERLAY_BAND_UNITS - pad) : 0;
   return { body: hasMedia ? gap : clear, caption: hasMedia || hasBody ? gap : clear };
 }
 function CardOverlays({
@@ -63,7 +64,7 @@ function CardOverlays({
 }) {
   const copy = useDataViewsCopy();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    onToggleSelect && /* @__PURE__ */ jsx(default2, { sx: { position: "absolute", top: 4, left: 4, zIndex: 2 }, children: /* @__PURE__ */ jsx(
+    onToggleSelect && /* @__PURE__ */ jsx(default2, { sx: { position: "absolute", top: sxRem(4), left: sxRem(4), zIndex: 2 }, children: /* @__PURE__ */ jsx(
       Checkbox,
       {
         checked: selected,
@@ -77,7 +78,7 @@ function CardOverlays({
     menu && /* @__PURE__ */ jsx(
       default2,
       {
-        sx: { position: "absolute", top: 4, right: 4, zIndex: 2 },
+        sx: { position: "absolute", top: sxRem(4), right: sxRem(4), zIndex: 2 },
         onClick: (event) => event.stopPropagation(),
         children: menu
       }
@@ -229,7 +230,7 @@ function BaseCard(props) {
         })
       },
       children: [
-        drag.draggable && /* @__PURE__ */ jsx(default2, { sx: { position: "absolute", bottom: 4, left: 4, zIndex: 2 }, children: /* @__PURE__ */ jsx(
+        drag.draggable && /* @__PURE__ */ jsx(default2, { sx: { position: "absolute", bottom: sxRem(4), left: sxRem(4), zIndex: 2 }, children: /* @__PURE__ */ jsx(
           DragHandle,
           {
             handleProps: drag.handleProps,
@@ -267,4 +268,4 @@ function BaseCard(props) {
 export {
   BaseCard
 };
-//# sourceMappingURL=chunk-XREYLKUX.js.map
+//# sourceMappingURL=chunk-SQYC57ZN.js.map