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

@12-apps/ui 6.34.0 → 6.35.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 (1130) hide show

package/dist/{chunk-CRDOMIEG.js → chunk-H6YVO55T.js} RENAMED Viewed

@@ -1,15 +1,18 @@
 import {
   accentFor
 } from "./chunk-TCAQOUIB.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 // src/components/data-display/Carousel/Carousel.styles.ts
 import { alpha } from "@mui/material/styles/index.js";
 var SIZES = {
-  xs: { height: 200, fontSize: "0.75rem" },
-  sm: { height: 300, fontSize: "0.875rem" },
-  md: { height: 400, fontSize: "1rem" },
-  lg: { height: 500, fontSize: "1.125rem" },
-  xl: { height: 600, fontSize: "1.25rem" }
+  xs: { height: 200, fontSize: sxRem(12) },
+  sm: { height: 300, fontSize: sxRem(14) },
+  md: { height: 400, fontSize: sxRem(16) },
+  lg: { height: 500, fontSize: sxRem(18) },
+  xl: { height: 600, fontSize: sxRem(20) }
 };
 var sizeStyles = (size) => SIZES[size] ?? SIZES.md;
 var SURFACES = {
@@ -56,4 +59,4 @@ var containerStyles = (input) => {
 export {
   containerStyles
 };
-//# sourceMappingURL=chunk-CRDOMIEG.js.map
+//# sourceMappingURL=chunk-H6YVO55T.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/Carousel/Carousel.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type { CarouselProps } from './Carousel.types';\nimport { accentFor, sxRem } from '../../../tokens/scales';\n\ntype Variant = NonNullable<CarouselProps['variant']>;\ntype Size = NonNullable<CarouselProps['size']>;\ntype Color = NonNullable<CarouselProps['color']>;\n\nconst SIZES: Record<Size, { height: number; fontSize: (theme: Theme) => string }> = {\n xs: { height: 200, fontSize: sxRem(12) },\n sm: { height: 300, fontSize: sxRem(14) },\n md: { height: 400, fontSize: sxRem(16) },\n lg: { height: 500, fontSize: sxRem(18) },\n xl: { height: 600, fontSize: sxRem(20) },\n};\n\nconst sizeStyles = (size: Size) => SIZES[size] ?? SIZES.md;\n\ninterface ContainerStyleInput {\n theme: Theme;\n variant: Variant;\n size: Size;\n color: Color;\n height: number | string;\n width: number | string;\n glow: boolean;\n pulse: boolean;\n glass: boolean;\n gradient: boolean;\n}\n\n/**\n * Each variant's own additions to the shared frame. The old switch re-spread the\n * same base, glow and pulse objects in all six arms before adding these; only\n * these differ, so the shared prefix is applied once by `containerStyles`.\n */\nconst SURFACES: Record<Variant, (input: ContainerStyleInput) => CSSObject> = {\n glass: ({ theme, color, glass }) => ({\n backgroundColor: alpha(theme.palette.background.paper, glass ? 0.1 : 0.9),\n backdropFilter: 'blur(20px)',\n border: `1px solid ${alpha(accentFor(theme, color).main, 0.2)}`,\n }),\n\n gradient: ({ theme, color, gradient }) => ({\n background: gradient\n ? `linear-gradient(135deg, ${alpha(accentFor(theme, color).light, 0.1)}, ${alpha(accentFor(theme, color).dark, 0.1)})`\n : 'transparent',\n }),\n\n elevated: ({ theme }) => ({ boxShadow: theme.shadows[8] }),\n\n minimal: () => ({ border: 'none', boxShadow: 'none' }),\n\n cards: ({ theme }) => ({ padding: theme.spacing(2) }),\n\n default: () => ({}),\n};\n\nexport const containerStyles = (input: ContainerStyleInput): CSSObject => {\n const { theme, variant, size, color, height, width, glow, pulse } = input;\n const accent = accentFor(theme, color).main;\n\n return {\n position: 'relative' as const,\n width,\n // A numeric height is taken literally; anything else falls back to the size\n // preset, since a percentage cannot resolve against an unsized parent here.\n height: typeof height === 'number' ? height : sizeStyles(size).height,\n overflow: 'hidden',\n borderRadius: theme.spacing(1),\n transition: theme.transitions.create(['all'], {\n duration: theme.transitions.duration.standard,\n }),\n ...(glow && { boxShadow: `0 0 30px ${alpha(accent, 0.4)}` }),\n ...(pulse && {\n animation: 'pulse 2s infinite',\n '@keyframes pulse': {\n '0%': { boxShadow: `0 0 0 0 ${alpha(accent, 0.4)}` },\n '70%': { boxShadow: `0 0 0 20px ${alpha(accent, 0)}` },\n '100%': { boxShadow: `0 0 0 0 ${alpha(accent, 0)}` },\n },\n }),\n ...(SURFACES[variant] ?? SURFACES.default)(input),\n };\n};\n"],"mappings":";;;;;;;;AAAA,SAAS,aAAa;AAUtB,IAAM,QAA8E;AAAA,EAClF,IAAI,EAAE,QAAQ,KAAK,UAAU,MAAM,EAAE,EAAE;AAAA,EACvC,IAAI,EAAE,QAAQ,KAAK,UAAU,MAAM,EAAE,EAAE;AAAA,EACvC,IAAI,EAAE,QAAQ,KAAK,UAAU,MAAM,EAAE,EAAE;AAAA,EACvC,IAAI,EAAE,QAAQ,KAAK,UAAU,MAAM,EAAE,EAAE;AAAA,EACvC,IAAI,EAAE,QAAQ,KAAK,UAAU,MAAM,EAAE,EAAE;AACzC;AAEA,IAAM,aAAa,CAAC,SAAe,MAAM,IAAI,KAAK,MAAM;AAoBxD,IAAM,WAAuE;AAAA,EAC3E,OAAO,CAAC,EAAE,OAAO,OAAO,MAAM,OAAO;AAAA,IACnC,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,QAAQ,MAAM,GAAG;AAAA,IACxE,gBAAgB;AAAA,IAChB,QAAQ,aAAa,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,GAAG,CAAC;AAAA,EAC/D;AAAA,EAEA,UAAU,CAAC,EAAE,OAAO,OAAO,SAAS,OAAO;AAAA,IACzC,YAAY,WACR,2BAA2B,MAAM,UAAU,OAAO,KAAK,EAAE,OAAO,GAAG,CAAC,KAAK,MAAM,UAAU,OAAO,KAAK,EAAE,MAAM,GAAG,CAAC,MACjH;AAAA,EACN;AAAA,EAEA,UAAU,CAAC,EAAE,MAAM,OAAO,EAAE,WAAW,MAAM,QAAQ,CAAC,EAAE;AAAA,EAExD,SAAS,OAAO,EAAE,QAAQ,QAAQ,WAAW,OAAO;AAAA,EAEpD,OAAO,CAAC,EAAE,MAAM,OAAO,EAAE,SAAS,MAAM,QAAQ,CAAC,EAAE;AAAA,EAEnD,SAAS,OAAO,CAAC;AACnB;AAEO,IAAM,kBAAkB,CAAC,UAA0C;AACxE,QAAM,EAAE,OAAO,SAAS,MAAM,OAAO,QAAQ,OAAO,MAAM,MAAM,IAAI;AACpE,QAAM,SAAS,UAAU,OAAO,KAAK,EAAE;AAEvC,SAAO;AAAA,IACL,UAAU;AAAA,IACV;AAAA;AAAA;AAAA,IAGA,QAAQ,OAAO,WAAW,WAAW,SAAS,WAAW,IAAI,EAAE;AAAA,IAC/D,UAAU;AAAA,IACV,cAAc,MAAM,QAAQ,CAAC;AAAA,IAC7B,YAAY,MAAM,YAAY,OAAO,CAAC,KAAK,GAAG;AAAA,MAC5C,UAAU,MAAM,YAAY,SAAS;AAAA,IACvC,CAAC;AAAA,IACD,GAAI,QAAQ,EAAE,WAAW,YAAY,MAAM,QAAQ,GAAG,CAAC,GAAG;AAAA,IAC1D,GAAI,SAAS;AAAA,MACX,WAAW;AAAA,MACX,oBAAoB;AAAA,QAClB,MAAM,EAAE,WAAW,WAAW,MAAM,QAAQ,GAAG,CAAC,GAAG;AAAA,QACnD,OAAO,EAAE,WAAW,cAAc,MAAM,QAAQ,CAAC,CAAC,GAAG;AAAA,QACrD,QAAQ,EAAE,WAAW,WAAW,MAAM,QAAQ,CAAC,CAAC,GAAG;AAAA,MACrD;AAAA,IACF;AAAA,IACA,IAAI,SAAS,OAAO,KAAK,SAAS,SAAS,KAAK;AAAA,EAClD;AACF;","names":[]}

package/dist/{chunk-BIIAMH47.js → chunk-HAQMKV5P.js} RENAMED Viewed

@@ -2,7 +2,7 @@ import {
   FormControl,
   FormLabel,
   FormMessage
-} from "./chunk-IPPTOL53.js";
+} from "./chunk-2HVNPWFV.js";
 import {
   fieldControlStyles
 } from "./chunk-CGO452DC.js";
@@ -165,4 +165,4 @@ function CreatableSelect({
 export {
   CreatableSelect
 };
-//# sourceMappingURL=chunk-BIIAMH47.js.map
+//# sourceMappingURL=chunk-HAQMKV5P.js.map

package/dist/{chunk-BOU3HR4C.js → chunk-HBICO6AX.js} RENAMED Viewed

@@ -7,9 +7,6 @@ import {
   fieldBorder,
   fieldHeight
 } from "./chunk-CGO452DC.js";
-import {
-  px
-} from "./chunk-PE4ZW3IA.js";
 import {
   inkOver
 } from "./chunk-2BYKTBDL.js";
@@ -17,6 +14,9 @@ import {
   absoluteInk,
   controlNeutral
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 // src/components/form/Button/Button.styles.ts
 import { alpha, darken, keyframes, lighten } from "@mui/material/styles/index.js";
@@ -58,23 +58,25 @@ var getColorFromTheme = (theme, color) => {
 var SIZE_MAP = Object.fromEntries(
   Object.entries(BUTTON_SIZES).map(([size, m]) => [
     size,
-    { padding: `${m.paddingVertical}px ${m.paddingHorizontal}px`, fontSize: px(m.fontSize) }
+    { padding: `${m.paddingVertical}px ${m.paddingHorizontal}px`, fontPx: m.fontSize }
   ])
 );
 var DEFAULT_SIZE = SIZE_MAP.md;
+var sizeOf = (size) => SIZE_MAP[size] ?? DEFAULT_SIZE;
 var ICON_ONLY_PADDING2 = Object.fromEntries(
   Object.entries(ICON_ONLY_PADDING).map(([size, padding]) => [size, `${padding}px`])
 );
-var iconOnlySize = (size) => ({
+var iconOnlySize = (theme, size) => ({
   minWidth: 0,
   padding: ICON_ONLY_PADDING2[size] ?? ICON_ONLY_PADDING2.md,
-  fontSize: SIZE_MAP[size]?.fontSize ?? DEFAULT_SIZE.fontSize,
+  fontSize: rem(theme, sizeOf(size).fontPx),
   "& .MuiButton-startIcon, & .MuiButton-endIcon": { margin: 0 }
 });
 var buttonSize = (size, iconOnly) => (theme) => {
   const height = fieldHeight(theme, asFieldSize(size));
-  if (iconOnly) return { ...iconOnlySize(size), padding: 0, minWidth: height, minHeight: height };
-  return { ...SIZE_MAP[size] ?? DEFAULT_SIZE, minHeight: height, paddingTop: 0, paddingBottom: 0 };
+  if (iconOnly) return { ...iconOnlySize(theme, size), padding: 0, minWidth: height, minHeight: height };
+  const { padding, fontPx } = sizeOf(size);
+  return { padding, fontSize: rem(theme, fontPx), minHeight: height, paddingTop: 0, paddingBottom: 0 };
 };
 var iconAlignmentStyles = (theme) => ({
   "& .MuiButton-startIcon, & .MuiButton-endIcon": {
@@ -213,4 +215,4 @@ export {
   buttonVariantStyles,
   buttonEmphasisStyles
 };
-//# sourceMappingURL=chunk-BOU3HR4C.js.map
+//# sourceMappingURL=chunk-HBICO6AX.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/form/Button/Button.styles.ts"],"sourcesContent":["import { alpha, darken, keyframes, lighten } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { BUTTON_SIZES, ICON_ONLY_PADDING as ICON_ONLY_PADDING_PX } from './Button.metrics';\nimport { asFieldSize, fieldBorder, fieldHeight } from '../../../tokens/field-height';\nimport { absoluteInk, controlNeutral } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\nimport { inkOver } from '../../../tokens/theme';\n\n// Define pulse animation globally\nconst pulseAnimation = keyframes`\n 0% {\n box-shadow: 0 0 0 0 currentColor;\n opacity: 1;\n }\n 70% {\n box-shadow: 0 0 0 15px currentColor;\n opacity: 0;\n }\n 100% {\n box-shadow: 0 0 0 0 currentColor;\n opacity: 0;\n }\n`;\n\ninterface ColorPalette {\n main: string;\n dark: string;\n light: string;\n contrastText: string;\n}\n\nconst shade = (\n palette: ColorPalette | undefined,\n key: 'dark' | 'light',\n fallback: ColorPalette,\n): string => palette?.[key] || palette?.main || fallback[key];\n\n/** `neutral` has no MUI palette entry, so its four shades come from grey. */\nconst neutralPalette = (theme: Theme): ColorPalette => controlNeutral(theme);\n\nexport const getColorFromTheme = (theme: Theme, color: string): ColorPalette => {\n if (color === 'neutral') return neutralPalette(theme);\n\n const colorMap: Record<string, ColorPalette> = {\n primary: theme.palette.primary as ColorPalette,\n secondary: theme.palette.secondary as ColorPalette,\n success: theme.palette.success as ColorPalette,\n warning: theme.palette.warning as ColorPalette,\n info: theme.palette.info as ColorPalette,\n danger: theme.palette.error as ColorPalette,\n };\n\n const fallback = theme.palette.primary as ColorPalette;\n const palette = colorMap[color] || fallback;\n\n // Ensure palette has required properties\n return {\n main: palette?.main || fallback.main,\n dark: shade(palette, 'dark', fallback),\n light: shade(palette, 'light', fallback),\n contrastText: palette?.contrastText || absoluteInk(theme).white,\n };\n};\n\n/** A size's padding shorthand and its type in design px, read through the type scale. */\ninterface WebButtonSize {\n padding: string;\n fontPx: number;\n}\n\n// Derived from `Button.metrics.ts`, which the native `Button` reads too — one\n// table, so a size cannot differ between the renderers.\nconst SIZE_MAP: Record<string, WebButtonSize> = Object.fromEntries(\n Object.entries(BUTTON_SIZES).map(([size, m]) => [\n size,\n { padding: `${m.paddingVertical}px ${m.paddingHorizontal}px`, fontPx: m.fontSize },\n ]),\n);\n\n/** What an unrecognised size falls back to, named so indexing can never be undefined. */\nconst DEFAULT_SIZE: WebButtonSize = SIZE_MAP.md as WebButtonSize;\n\nconst sizeOf = (size: string): WebButtonSize => SIZE_MAP[size] ?? DEFAULT_SIZE;\n\n/**\n * A BUTTON THAT IS ONLY AN ICON IS SQUARE.\n *\n * MUI puts a 64px `min-width` on every button, which is right for a label and\n * wrong for a glyph: three dots in a 64px slab reads as a button that failed to\n * load its text, and at the end of a dense row it claims space the row needs.\n * The horizontal padding goes too — a square of padding round a square glyph —\n * and so does the gap MUI reserves beside a start/end icon, since there is\n * nothing on the other side of it.\n *\n * Derived, not declared: a button with an `icon` and no children can only be an\n * icon button, so no consumer has to opt in and none can forget to.\n */\nconst ICON_ONLY_PADDING: Record<string, string> = Object.fromEntries(\n Object.entries(ICON_ONLY_PADDING_PX).map(([size, padding]) => [size, `${padding}px`]),\n);\n\nconst iconOnlySize = (theme: Theme, size: string): CSSObject => ({\n minWidth: 0,\n padding: ICON_ONLY_PADDING[size] ?? ICON_ONLY_PADDING.md,\n fontSize: rem(theme, sizeOf(size).fontPx),\n '& .MuiButton-startIcon, & .MuiButton-endIcon': { margin: 0 },\n});\n\n/**\n * The size styles for a button, square when it carries nothing but an icon.\n *\n * The HEIGHT is the theme's field height for the size (`tokens/field-height`),\n * so a button stands level with the field beside it: the vertical padding goes\n * and the label is centred in a box at least that tall — a label that wraps\n * still grows it. An icon-only button is that height on every side.\n */\nexport const buttonSize =\n (size: string, iconOnly: boolean) =>\n (theme: Theme): CSSObject => {\n const height = fieldHeight(theme, asFieldSize(size));\n if (iconOnly) return { ...iconOnlySize(theme, size), padding: 0, minWidth: height, minHeight: height };\n const { padding, fontPx } = sizeOf(size);\n return { padding, fontSize: rem(theme, fontPx), minHeight: height, paddingTop: 0, paddingBottom: 0 };\n };\n\n/**\n * MUI centres icons with a negative margin that fights our own padding, so the\n * flex alignment is restated here rather than fought with `!important`.\n */\nexport const iconAlignmentStyles = (theme: Theme): CSSObject => ({\n '& .MuiButton-startIcon, & .MuiButton-endIcon': {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n margin: 0,\n verticalAlign: 'middle',\n '& > *': {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n lineHeight: 0,\n },\n },\n '& .MuiButton-startIcon': {\n marginRight: theme.spacing(0.5),\n },\n '& .MuiButton-endIcon': {\n marginLeft: theme.spacing(0.5),\n },\n});\n\n// Gradients run between two related hues; the named colours pick a specific pair,\n// anything else runs from its own main to its own dark.\nconst GRADIENT_PAIRS: Record<string, (theme: Theme) => [string, string]> = {\n primary: (theme) => [theme.palette.primary.main, theme.palette.secondary.main],\n secondary: (theme) => [theme.palette.secondary.main, theme.palette.primary.main],\n success: (theme) => [theme.palette.success.light, theme.palette.success.dark],\n warning: (theme) => [theme.palette.warning.light, theme.palette.warning.dark],\n danger: (theme) => [theme.palette.error.light, theme.palette.error.dark],\n};\n\nconst gradientStops = (theme: Theme, color: string, palette: ColorPalette): [string, string] =>\n GRADIENT_PAIRS[color]?.(theme) ?? [palette.main, palette.dark];\n\nconst gradientFor = (theme: Theme, color: string, palette: ColorPalette): string => {\n const [from, to] = gradientStops(theme, color, palette);\n return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;\n};\n\n/**\n * The label colour for `gradient`, which used to be `#fff` outright (FUT-1924).\n *\n * Every other filled variant reads `palette.contrastText`, derived from `main`\n * — so a white-labelled host handing the library a pale brand got dark ink on\n * its solid buttons and white ink on its gradient one. That store had exactly\n * one button in the library whose label it could not read, in LIGHT mode,\n * before dark mode existed anywhere.\n *\n * `contrastText` is still not the right thing to read, and that is why this\n * goes through {@link inkOver}: a gradient is TWO fills, the named pairs run\n * light-to-dark, and an ink chosen against `main` says nothing about the end\n * the gradient actually reaches. Both stops go in, and the ink has to survive\n * the worse of them.\n */\nconst gradientInk = (theme: Theme, color: string, palette: ColorPalette): string =>\n inkOver(gradientStops(theme, color, palette), palette.contrastText || absoluteInk(theme).white);\n\n/**\n * The label colour for the two variants that paint no background of their own.\n *\n * `ghost` and `text` used `palette.main` directly, which is the same mistake\n * the Alert made with its body text: a palette's `main` is chosen to sit UNDER\n * white — it is the fill of a solid button — and it is not chosen to be read AS\n * text. `#6366F1`, the default primary, is 3.6:1 on white and worse on any\n * tinted surface, so a \"Cancelar\" or an \"Agora não\" placed on a coloured panel\n * turned into a smudge. That is precisely where these two variants belong: they\n * exist to be the quiet option NEXT to a solid one, so they are the buttons\n * most likely to be sitting on something other than plain paper.\n *\n * One step darker (lighter, on a dark theme) keeps the hue the caller asked for\n * and buys the contrast back. `main` still drives the hover wash and every\n * bordered variant, so nothing that was already legible moves.\n */\nconst quietInk = (theme: Theme, palette: ColorPalette): string =>\n theme.palette.mode === 'dark' ? lighten(palette.main, 0.35) : darken(palette.main, 0.3);\n\nconst VARIANT_STYLES: Record<\n string,\n (theme: Theme, palette: ColorPalette, color: string) => CSSObject\n> = {\n solid: (theme, palette) => ({\n backgroundColor: palette.main,\n color: palette.contrastText || absoluteInk(theme).white,\n '&:hover': {\n backgroundColor: palette.dark,\n transform: 'translateY(-2px)',\n boxShadow: theme.shadows[8],\n },\n }),\n // A NEUTRAL outline is a field-row control (\"Mais\", \"Exibir\"), so it rests on\n // the one field border; a coloured outline keeps its colour, which is the\n // point of asking for one.\n outline: (theme, palette, color) => ({\n backgroundColor: 'transparent',\n color: palette.main,\n border: color === 'neutral' ? fieldBorder(theme) : `1px solid ${palette.main}`,\n '&:hover': {\n backgroundColor: alpha(palette.main, 0.1),\n borderColor: palette.dark,\n },\n }),\n ghost: (theme, palette) => ({\n backgroundColor: 'transparent',\n color: quietInk(theme, palette),\n '&:hover': {\n backgroundColor: alpha(palette.main, 0.1),\n },\n }),\n text: (theme, palette) => ({\n backgroundColor: 'transparent',\n color: quietInk(theme, palette),\n border: `none`,\n '&:hover': {\n backgroundColor: alpha(palette.main, 0.1),\n },\n '&.active': {\n backgroundColor: alpha(palette.main, 0.1),\n color: quietInk(theme, palette),\n },\n }),\n glass: (theme, palette) => ({\n backgroundColor: alpha(theme.palette.background.paper, 0.1),\n backdropFilter: 'blur(20px)',\n border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n color: palette.main,\n '&:hover': {\n backgroundColor: alpha(theme.palette.background.paper, 0.2),\n transform: 'translateY(-2px)',\n },\n }),\n gradient: (theme, palette, color) => ({\n background: gradientFor(theme, color, palette),\n color: gradientInk(theme, color, palette),\n '&:hover': {\n filter: 'brightness(1.1)',\n transform: 'translateY(-2px)',\n boxShadow: theme.shadows[12],\n },\n }),\n};\n\nexport const buttonVariantStyles = (\n theme: Theme,\n variant: string | undefined,\n palette: ColorPalette,\n color: string,\n): CSSObject => VARIANT_STYLES[variant ?? '']?.(theme, palette, color) ?? {};\n\n// Glow effect - applied with !important to override variant shadows\nconst glowStyles = (palette: ColorPalette): CSSObject => ({\n boxShadow: `0 0 20px 5px ${alpha(palette.main, 0.6)}, 0 0 40px 10px ${alpha(palette.main, 0.3)} !important`,\n filter: 'brightness(1.05)',\n '&:hover': {\n boxShadow: `0 0 25px 8px ${alpha(palette.main, 0.7)}, 0 0 50px 15px ${alpha(palette.main, 0.4)} !important`,\n filter: 'brightness(1.1)',\n transform: 'translateY(-2px) scale(1.02)',\n },\n});\n\n// Pulse animation using pseudo-element\nconst pulseStyles = (palette: ColorPalette): CSSObject => ({\n position: 'relative',\n overflow: 'visible',\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n top: '50%',\n left: '50%',\n width: '100%',\n height: '100%',\n borderRadius: 'inherit',\n transform: 'translate(-50%, -50%)',\n backgroundColor: palette.main,\n opacity: 0.3,\n animation: `${pulseAnimation} 2s infinite`,\n pointerEvents: 'none',\n zIndex: -1,\n },\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.\n */\nexport const buttonEmphasisStyles = (\n palette: ColorPalette,\n glow?: boolean,\n pulse?: boolean,\n): CSSObject => ({\n ...(glow ? glowStyles(palette) : {}),\n ...(pulse ? pulseStyles(palette) : {}),\n});\n"],"mappings":"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","names":["ICON_ONLY_PADDING"]}

package/dist/{chunk-7QLHYUDW.js → chunk-HC5ZSCRG.js} RENAMED Viewed

@@ -11,6 +11,9 @@ import {
 import {
   controlNeutral
 } from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
 // src/components/form/ToggleGroup/ToggleGroup.tsx
 import Box from "@mui/material/Box/index.js";
@@ -76,11 +79,11 @@ var ToggleGroup = forwardRef(
     const theme = useTheme();
     const colorPalette = getColorFromTheme(theme, color);
     const sizeMap = {
-      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" }
+      xs: { padding: "4px 8px", fontSize: rem(theme, 12) },
+      sm: { padding: "6px 12px", fontSize: rem(theme, 14) },
+      md: { padding: "8px 16px", fontSize: rem(theme, 16) },
+      lg: { padding: "10px 20px", fontSize: rem(theme, 18) },
+      xl: { padding: "12px 24px", fontSize: rem(theme, 20) }
     };
     return /* @__PURE__ */ jsx(
       StyledToggleGroup,
@@ -133,4 +136,4 @@ ToggleGroup.displayName = "ToggleGroup";
 export {
   ToggleGroup
 };
-//# sourceMappingURL=chunk-7QLHYUDW.js.map
+//# sourceMappingURL=chunk-HC5ZSCRG.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/form/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport ToggleButton from '@mui/material/ToggleButton/index.js';\nimport ToggleButtonGroup from '@mui/material/ToggleButtonGroup/index.js';\nimport { alpha, useTheme, styled } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React, { forwardRef } from 'react';\n\nimport type { ToggleGroupProps } from './ToggleGroup.types';\nimport { cssLengthToPx } from '../../../tokens/css-units';\nimport { asFieldSize, fieldHeight } from '../../../tokens/field-height';\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { controlNeutral } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\nconst GLASS_PADDING = 4;\nconst GLASS_BORDER = 1;\n\nconst getColorFromTheme = (theme: Theme, color: string) => {\n if (color === 'neutral') {\n const neutral = controlNeutral(theme);\n return { ...neutral, contrastText: theme.palette.getContrastText(neutral.main) };\n }\n\n const colorMap = {\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 palette = colorMap[color as keyof typeof colorMap] || theme.palette.primary;\n\n // Ensure palette has required properties\n return {\n main: palette.main,\n dark: palette.dark || palette.main,\n light: palette.light || palette.main,\n contrastText: palette.contrastText || theme.palette.getContrastText(palette.main),\n };\n};\n\nconst StyledToggleGroup = styled(ToggleButtonGroup, {\n shouldForwardProp: (prop) => !['customColor', 'customSize', 'glass'].includes(prop as string),\n})<{\n customColor?: string;\n customSize?: string;\n glass?: boolean;\n}>(({ theme, glass }) => {\n // Each button is the field, so it takes the field radius. The glass frame\n // around them is inset by its padding, the buttons' margin and its border,\n // and rounds by that much more so the two corners stay concentric.\n const radius = fieldRadius(theme);\n const inset = GLASS_PADDING + cssLengthToPx(theme.spacing(0.5), 4) + GLASS_BORDER;\n return {\n backgroundColor: glass ? alpha(theme.palette.background.paper, 0.1) : 'transparent',\n backdropFilter: glass ? 'blur(20px)' : 'none',\n borderRadius: glass ? radius + inset : radius,\n padding: glass ? GLASS_PADDING : 0,\n border: glass ? `${GLASS_BORDER}px solid ${alpha(theme.palette.divider, 0.2)}` : 'none',\n\n '& .MuiToggleButtonGroup-grouped': {\n margin: theme.spacing(0.5),\n border: 0,\n borderRadius: `${radius}px !important`,\n },\n };\n});\n\nexport const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(\n (\n {\n variant = 'single',\n color = 'primary',\n size = 'md',\n options,\n glass = false,\n gradient = false,\n value,\n onChange,\n dataTestId = 'toggle-group',\n ...props\n },\n ref,\n ) => {\n const theme = useTheme();\n const colorPalette = getColorFromTheme(theme, color);\n\n const sizeMap = {\n xs: { padding: '4px 8px', fontSize: rem(theme, 12) },\n sm: { padding: '6px 12px', fontSize: rem(theme, 14) },\n md: { padding: '8px 16px', fontSize: rem(theme, 16) },\n lg: { padding: '10px 20px', fontSize: rem(theme, 18) },\n xl: { padding: '12px 24px', fontSize: rem(theme, 20) },\n };\n\n return (\n <StyledToggleGroup\n ref={ref}\n customColor={color}\n customSize={size}\n glass={glass}\n value={value}\n onChange={onChange}\n exclusive={variant === 'exclusive' || variant === 'single'}\n data-testid={dataTestId}\n {...props}\n >\n {options.map((option) => (\n <ToggleButton\n key={option.value}\n value={option.value}\n disabled={option.disabled}\n data-testid={`${dataTestId}-item-${option.value}`}\n sx={{\n textTransform: 'none',\n fontWeight: 500,\n transition: 'all 0.3s ease',\n ...sizeMap[size as keyof typeof sizeMap],\n // The theme's field height for the size; the label centres in it.\n minHeight: (theme) => fieldHeight(theme, asFieldSize(size)),\n paddingTop: 0,\n paddingBottom: 0,\n\n '&.Mui-selected': {\n backgroundColor: colorPalette.main,\n color: colorPalette.contrastText,\n\n ...(gradient && {\n background: `linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.dark})`,\n }),\n },\n }}\n >\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n {option.icon}\n {option.label}\n </Box>\n </ToggleButton>\n ))}\n </StyledToggleGroup>\n );\n },\n);\n\nToggleGroup.displayName = 'ToggleGroup';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,kBAAkB;AACzB,OAAO,uBAAuB;AAC9B,SAAS,OAAO,UAAU,cAAc;AAExC,SAAgB,kBAAkB;AAyGxB,cAyBE,YAzBF;AAhGV,IAAM,gBAAgB;AACtB,IAAM,eAAe;AAErB,IAAM,oBAAoB,CAAC,OAAc,UAAkB;AACzD,MAAI,UAAU,WAAW;AACvB,UAAM,UAAU,eAAe,KAAK;AACpC,WAAO,EAAE,GAAG,SAAS,cAAc,MAAM,QAAQ,gBAAgB,QAAQ,IAAI,EAAE;AAAA,EACjF;AAEA,QAAM,WAAW;AAAA,IACf,SAAS,MAAM,QAAQ;AAAA,IACvB,WAAW,MAAM,QAAQ;AAAA,IACzB,SAAS,MAAM,QAAQ;AAAA,IACvB,SAAS,MAAM,QAAQ;AAAA,IACvB,MAAM,MAAM,QAAQ;AAAA,IACpB,QAAQ,MAAM,QAAQ;AAAA,EACxB;AAEA,QAAM,UAAU,SAAS,KAA8B,KAAK,MAAM,QAAQ;AAG1E,SAAO;AAAA,IACL,MAAM,QAAQ;AAAA,IACd,MAAM,QAAQ,QAAQ,QAAQ;AAAA,IAC9B,OAAO,QAAQ,SAAS,QAAQ;AAAA,IAChC,cAAc,QAAQ,gBAAgB,MAAM,QAAQ,gBAAgB,QAAQ,IAAI;AAAA,EAClF;AACF;AAEA,IAAM,oBAAoB,OAAO,mBAAmB;AAAA,EAClD,mBAAmB,CAAC,SAAS,CAAC,CAAC,eAAe,cAAc,OAAO,EAAE,SAAS,IAAc;AAC9F,CAAC,EAIE,CAAC,EAAE,OAAO,MAAM,MAAM;AAIvB,QAAM,SAAS,YAAY,KAAK;AAChC,QAAM,QAAQ,gBAAgB,cAAc,MAAM,QAAQ,GAAG,GAAG,CAAC,IAAI;AACrE,SAAO;AAAA,IACL,iBAAiB,QAAQ,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,IAAI;AAAA,IACtE,gBAAgB,QAAQ,eAAe;AAAA,IACvC,cAAc,QAAQ,SAAS,QAAQ;AAAA,IACvC,SAAS,QAAQ,gBAAgB;AAAA,IACjC,QAAQ,QAAQ,GAAG,YAAY,YAAY,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC,KAAK;AAAA,IAEjF,mCAAmC;AAAA,MACjC,QAAQ,MAAM,QAAQ,GAAG;AAAA,MACzB,QAAQ;AAAA,MACR,cAAc,GAAG,MAAM;AAAA,IACzB;AAAA,EACF;AACF,CAAC;AAEM,IAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,QAAQ,SAAS;AACvB,UAAM,eAAe,kBAAkB,OAAO,KAAK;AAEnD,UAAM,UAAU;AAAA,MACd,IAAI,EAAE,SAAS,WAAW,UAAU,IAAI,OAAO,EAAE,EAAE;AAAA,MACnD,IAAI,EAAE,SAAS,YAAY,UAAU,IAAI,OAAO,EAAE,EAAE;AAAA,MACpD,IAAI,EAAE,SAAS,YAAY,UAAU,IAAI,OAAO,EAAE,EAAE;AAAA,MACpD,IAAI,EAAE,SAAS,aAAa,UAAU,IAAI,OAAO,EAAE,EAAE;AAAA,MACrD,IAAI,EAAE,SAAS,aAAa,UAAU,IAAI,OAAO,EAAE,EAAE;AAAA,IACvD;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,aAAa;AAAA,QACb,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,YAAY,eAAe,YAAY;AAAA,QAClD,eAAa;AAAA,QACZ,GAAG;AAAA,QAEH,kBAAQ,IAAI,CAAC,WACZ;AAAA,UAAC;AAAA;AAAA,YAEC,OAAO,OAAO;AAAA,YACd,UAAU,OAAO;AAAA,YACjB,eAAa,GAAG,UAAU,SAAS,OAAO,KAAK;AAAA,YAC/C,IAAI;AAAA,cACF,eAAe;AAAA,cACf,YAAY;AAAA,cACZ,YAAY;AAAA,cACZ,GAAG,QAAQ,IAA4B;AAAA;AAAA,cAEvC,WAAW,CAACA,WAAU,YAAYA,QAAO,YAAY,IAAI,CAAC;AAAA,cAC1D,YAAY;AAAA,cACZ,eAAe;AAAA,cAEf,kBAAkB;AAAA,gBAChB,iBAAiB,aAAa;AAAA,gBAC9B,OAAO,aAAa;AAAA,gBAEpB,GAAI,YAAY;AAAA,kBACd,YAAY,2BAA2B,aAAa,IAAI,KAAK,aAAa,IAAI;AAAA,gBAChF;AAAA,cACF;AAAA,YACF;AAAA,YAEA,+BAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAE,GACtD;AAAA,qBAAO;AAAA,cACP,OAAO;AAAA,eACV;AAAA;AAAA,UA3BK,OAAO;AAAA,QA4Bd,CACD;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;","names":["theme"]}

package/dist/{chunk-XOL2QCSP.js → chunk-HJWOB62A.js} RENAMED Viewed

@@ -1,25 +1,25 @@
 import {
   DataViewsBoard
-} from "./chunk-VLVMJDGD.js";
+} from "./chunk-YDPUBGJ7.js";
 import {
   SelectAllStrip
-} from "./chunk-DSIJEJQ7.js";
+} from "./chunk-JFBEZXNL.js";
 import {
   toGridExpansion
 } from "./chunk-O5UGAL2V.js";
 import {
   cardGridTracks
-} from "./chunk-TNDV33LP.js";
+} from "./chunk-LOJK733T.js";
 import {
   ListCardGroup
-} from "./chunk-TAB6AIPN.js";
+} from "./chunk-JFEEV3XI.js";
 import {
   DENSITY_BOARD_SCALE,
   DENSITY_ROW_PADDING,
   cardScaleForZoom,
   cardTargetWidthFor,
   useDataViewsLayout
-} from "./chunk-2XGGHYEA.js";
+} from "./chunk-4LQZH4PU.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
@@ -29,6 +29,9 @@ import {
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 // src/components/data-display/DataViews/data-views-grid-bodies.tsx
 import React from "react";
@@ -58,8 +61,8 @@ function GridBody({
         // Tabwoah-style dense rows: MUI's default TableCell padding keeps rows
         // tall regardless of rowHeight, so the DENSITY preference is applied
         // here rather than through `rowHeight`, which it would fight.
-        "& .MuiTableCell-root": { py: rowPadding, fontSize: "0.8125rem" },
-        "& .MuiTableCell-head": { py: 0.5, fontSize: "0.75rem" }
+        "& .MuiTableCell-root": { py: rowPadding, fontSize: sxRem(13) },
+        "& .MuiTableCell-head": { py: 0.5, fontSize: sxRem(12) }
       },
       children: /* @__PURE__ */ jsx(
         DataGrid,
@@ -270,4 +273,4 @@ function GridMain(props) {
 export {
   GridMain
 };
-//# sourceMappingURL=chunk-XOL2QCSP.js.map
+//# sourceMappingURL=chunk-HJWOB62A.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/DataViews/data-views-grid-bodies.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\n\nimport { DataGrid, type GridColumn, type GridSort } from \"../DataGrid\";\nimport { Box } from \"../../../mui/Box\";\n\nimport {\n cardTargetWidthFor,\n cardScaleForZoom,\n DENSITY_BOARD_SCALE,\n DENSITY_ROW_PADDING,\n useDataViewsLayout,\n type DataViewsDensity,\n} from \"./data-views-layout-context\";\nimport { cardGridTracks } from \"./data-views-grid-helpers\";\nimport { DataViewsBoard, type BoardConfig } from \"./DataViewsBoard\";\nimport { SelectAllStrip } from \"./data-views-select-all-strip\";\nimport { ListCardGroup, type ListGroupConfig } from \"./list-card-rails\";\nimport type { DataViewCardSelection } from \"./data-views-types\";\nimport { toGridExpansion, type DataViewRowDetail } from \"./data-views-row-detail\";\nimport type { DataViewsController } from \"./use-data-views-state\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { sxRem } from \"../../../tokens/relative\";\n\n/* ── Body (grid) ─────────────────────────────────────────────────────────── */\n\ninterface GridBodyProps<T extends Record<string, unknown>> {\n rows: T[];\n columns: GridColumn<T>[];\n getRowId: (row: T) => string | number;\n selectedIds: Array<string | number>;\n onChangeSelected: (ids: Array<string | number>) => void;\n sortBy: GridSort[];\n onChangeSortBy: (next: GridSort[]) => void;\n /** \"server\" defers ordering to the backend (rows render as-is); \"client\" sorts in-grid. */\n sortMode: \"client\" | \"server\";\n /** Vertical cell padding, from the density preference. */\n rowPadding: number;\n rowDetail?: DataViewRowDetail<T>;\n dataTestId?: string;\n emptyState?: React.ReactNode;\n}\n\n/** The dense DataGrid with multi-select, wrapped in the scrollable table region. */\nfunction GridBody<T extends Record<string, unknown>>({\n rows,\n columns,\n getRowId,\n selectedIds,\n onChangeSelected,\n sortBy,\n onChangeSortBy,\n sortMode,\n rowPadding,\n rowDetail,\n dataTestId,\n emptyState,\n}: GridBodyProps<T>): React.JSX.Element {\n const copy = useDataViewsCopy();\n return (\n <Box\n sx={{\n width: \"100%\",\n overflowX: \"auto\",\n mt: 1.5,\n // Tabwoah-style dense rows: MUI's default TableCell padding keeps rows\n // tall regardless of rowHeight, so the DENSITY preference is applied\n // here rather than through `rowHeight`, which it would fight.\n \"& .MuiTableCell-root\": { py: rowPadding, fontSize: sxRem(13) },\n \"& .MuiTableCell-head\": { py: 0.5, fontSize: sxRem(12) },\n }}\n >\n <DataGrid<T>\n rows={rows}\n columns={columns}\n getRowId={(row) => getRowId(row)}\n virtualizeRows={false}\n density=\"compact\"\n rowHeight={36}\n headerHeight={36}\n selection={{ mode: \"multi\", selectedRowIds: selectedIds, onChangeSelected }}\n sorting={{ mode: sortMode, sortBy, onChangeSortBy }}\n expansion={toGridExpansion(rowDetail, copy)}\n data-testid={dataTestId}\n emptyState={emptyState}\n emptyText={copy.grid.emptyFilteredTitle}\n />\n </Box>\n );\n}\n\n/* ── Body (cards) ────────────────────────────────────────────────────────── */\n\ninterface CardBodyProps<T extends Record<string, unknown>> {\n rows: T[];\n renderCard: (row: T, selection: DataViewCardSelection) => React.ReactNode;\n getRowId: (row: T) => string | number;\n selectedIds: Set<string | number>;\n onToggleId: (id: string | number) => void;\n /** The width each card asks for; `auto-fill` turns it into a column count. */\n targetCardWidth: number;\n /** Content scale (padding + type) handed to each card, from the zoom slider. */\n cardScale: number;\n dataTestId?: string;\n emptyState?: React.ReactNode;\n}\n\n/**\n * The \"Grade\" layout: the filtered/sorted rows rendered as an auto-filling grid\n * of entity-supplied cards. Reuses `rows` (= `c.matched`), so search/filter/sort\n * apply; the column width comes from the zoom slider, and each card is handed its\n * selection state so it can drive its own checkbox (BaseCard) — the same\n * selection model as the table.\n */\nfunction CardBody<T extends Record<string, unknown>>({\n rows,\n renderCard,\n getRowId,\n selectedIds,\n onToggleId,\n targetCardWidth,\n cardScale,\n dataTestId,\n emptyState,\n}: CardBodyProps<T>): React.JSX.Element {\n if (rows.length === 0) {\n return <Box sx={{ mt: 1.5 }}>{emptyState}</Box>;\n }\n return (\n <Box\n sx={{\n mt: 1.5,\n display: \"grid\",\n // Fixed inter-card gap — deliberately NOT scaled by the zoom slider, so\n // only the cards grow while the space between them stays constant.\n gap: 1.5,\n ...cardGridTracks(targetCardWidth),\n }}\n data-testid={dataTestId ? `${dataTestId}-cards` : \"data-views-cards\"}\n >\n {rows.map((row) => {\n const id = getRowId(row);\n return (\n <Box key={id}>\n {renderCard(row, {\n selected: selectedIds.has(id),\n onToggleSelect: () => onToggleId(id),\n scale: cardScale,\n })}\n </Box>\n );\n })}\n </Box>\n );\n}\n\n/* ── Body (list) ─────────────────────────────────────────────────────────── */\n\ninterface ListBodyProps<T extends Record<string, unknown>> {\n rows: T[];\n renderListRow: (row: T, selection: DataViewCardSelection) => React.ReactNode;\n getRowId: (row: T) => string | number;\n selectedIds: Set<string | number>;\n onToggleId: (id: string | number) => void;\n /** Gap between rows, from the density preference. */\n rowGap: number;\n /** The list's shared column config. See {@link ListGroupConfig}. */\n group?: ListGroupConfig<T>;\n /** The density every row answers, handed to the group when there is one. */\n density: DataViewsDensity;\n dataTestId?: string;\n emptyState?: React.ReactNode;\n}\n\n/**\n * The \"Lista\" layout: one FULL-WIDTH row per record, rendered by the entity — a\n * marker, a title, a subtitle and a value on the right is the shape it was\n * designed for (FUT-733).\n *\n * It sits between the table and the cards rather than replacing either: the\n * table is for comparing many columns, the cards are for browsing, and the list\n * is for scanning a queue on a narrow screen. Selection is the SAME model as\n * both — each row receives its selection state, so it can drive its own\n * checkbox and the bulk menu behaves identically in every layout.\n *\n * `scale` is handed over as 1 rather than the zoom multiplier, and the zoom\n * slider is hidden in this layout: a full-width row has no card size to\n * multiply. See {@link DataViewsZoomSlider}.\n */\nfunction ListBody<T extends Record<string, unknown>>({\n rows,\n renderListRow,\n getRowId,\n selectedIds,\n onToggleId,\n rowGap,\n group,\n density,\n dataTestId,\n emptyState,\n}: ListBodyProps<T>): React.JSX.Element {\n if (rows.length === 0) {\n return <Box sx={{ mt: 1.5 }}>{emptyState}</Box>;\n }\n const testId = dataTestId ? `${dataTestId}-list` : \"data-views-list\";\n const selectionFor = (id: string | number): DataViewCardSelection => ({\n selected: selectedIds.has(id),\n onToggleSelect: () => onToggleId(id),\n scale: 1,\n });\n\n if (group) {\n return (\n <Box sx={{ mt: 1.5 }}>\n <ListCardGroup\n cells={group.cells}\n metaColumns={group.metaColumns}\n rails={group.rails}\n reserveGutters={group.reserveGutters}\n density={density}\n gap={rowGap}\n dataTestId={testId}\n >\n {rows.map((row) => {\n const id = getRowId(row);\n // A FRAGMENT, NOT A BOX. The row is subgrid over the group's tracks\n // (`gridColumn: span railCount`), which only resolves while the card\n // is a DIRECT child of the group's grid. One wrapper element and the\n // span is measured against a grid that isn't there, so every rail\n // collapses — the exact failure the group exists to prevent.\n return (\n <React.Fragment key={id}>\n {renderListRow(row, selectionFor(id))}\n </React.Fragment>\n );\n })}\n </ListCardGroup>\n </Box>\n );\n }\n\n return (\n <Box\n sx={{ mt: 1.5, display: \"flex\", flexDirection: \"column\", gap: rowGap }}\n data-testid={testId}\n >\n {rows.map((row) => {\n const id = getRowId(row);\n return <Box key={id}>{renderListRow(row, selectionFor(id))}</Box>;\n })}\n </Box>\n );\n}\n\n/* ── Body selector (board vs list vs cards vs table, from context) ───────── */\n\ninterface GridMainProps<T extends Record<string, unknown>> {\n c: DataViewsController<T>;\n getRowId: (row: T) => string | number;\n renderCard?: (row: T, selection: DataViewCardSelection) => React.ReactNode;\n /** Opt-in \"Lista\" layout — one full-width row per record. */\n renderListRow?: (row: T, selection: DataViewCardSelection) => React.ReactNode;\n /** The Lista's shared columns. Omitted, each row resolves its own tracks. */\n listGroup?: ListGroupConfig<T>;\n /** Opt-in \"Quadro\" (board) layout — needs `renderCard`, since it reuses the card. */\n board?: BoardConfig<T>;\n /** Opt-in expandable rows — the TABLE only; the headerless layouts ignore it. */\n rowDetail?: DataViewRowDetail<T>;\n dataTestId?: string;\n emptyState?: React.ReactNode;\n testIdPrefix: string;\n}\n\n/**\n * The headerless layouts, each preceded by its own select-all.\n *\n * The strip is rendered HERE rather than inside each body so all three agree on\n * where it sits and what it says — and so the table, which already has one in\n * its `<thead>`, never gets a second.\n */\nfunction Headerless<T extends Record<string, unknown>>({\n c,\n getRowId,\n testIdPrefix,\n children,\n}: {\n c: DataViewsController<T>;\n getRowId: (row: T) => string | number;\n testIdPrefix: string;\n children: React.ReactNode;\n}): React.JSX.Element {\n return (\n <>\n <SelectAllStrip\n rows={c.matched}\n getRowId={getRowId}\n selectedIds={c.selectedIds}\n onChange={(next) => c.setSelectedIds(next)}\n testIdPrefix={testIdPrefix}\n />\n {children}\n </>\n );\n}\n\n/**\n * The body for one of the three HEADERLESS layouts, or `null` for the table.\n *\n * Split out from {@link GridMain} so the select-all strip is wrapped around the\n * result exactly once instead of being repeated identically in every branch —\n * which is also what keeps either function inside the line budget.\n */\nfunction headerlessBody<T extends Record<string, unknown>>(\n { c, getRowId, renderCard, renderListRow, listGroup, board, dataTestId, emptyState }: GridMainProps<T>,\n { layout, zoom, density }: ReturnType<typeof useDataViewsLayout>,\n): React.ReactNode | null {\n if (layout === \"list\" && renderListRow) {\n return (\n <ListBody\n rows={c.matched}\n renderListRow={renderListRow}\n getRowId={getRowId}\n selectedIds={c.selectedIds}\n onToggleId={c.toggleId}\n rowGap={DENSITY_ROW_PADDING[density]}\n group={listGroup}\n density={density}\n dataTestId={dataTestId}\n emptyState={emptyState}\n />\n );\n }\n if (layout === \"board\" && board && renderCard) {\n return (\n <DataViewsBoard\n rows={c.matched}\n board={board}\n getRowId={getRowId}\n renderCard={renderCard}\n selectedIds={c.selectedIds}\n onToggleId={c.toggleId}\n // DENSITY, not zoom: the board's own knob in the Exibição tab is how\n // wide its columns are, and it is the only sizing control the board\n // has since the zoom slider was removed.\n cardScale={DENSITY_BOARD_SCALE[density]}\n dataTestId={dataTestId}\n />\n );\n }\n if (layout === \"cards\" && renderCard) {\n return (\n <CardBody\n rows={c.matched}\n renderCard={renderCard}\n getRowId={getRowId}\n selectedIds={c.selectedIds}\n onToggleId={c.toggleId}\n targetCardWidth={cardTargetWidthFor(zoom, density)}\n cardScale={cardScaleForZoom(zoom)}\n dataTestId={dataTestId}\n emptyState={emptyState}\n />\n );\n }\n return null;\n}\n\n/** Picks the body from the layout context: board, list, cards, or the dense grid. */\nexport function GridMain<T extends Record<string, unknown>>(props: GridMainProps<T>): React.JSX.Element {\n const { c, getRowId, dataTestId, emptyState, testIdPrefix } = props;\n const layoutState = useDataViewsLayout();\n const body = headerlessBody(props, layoutState);\n if (body) {\n return (\n <Headerless c={c} getRowId={getRowId} testIdPrefix={testIdPrefix}>\n {body}\n </Headerless>\n );\n }\n return (\n <GridBody\n rows={c.matched}\n columns={c.gridColumns}\n getRowId={getRowId}\n selectedIds={[...c.selectedIds]}\n onChangeSelected={(ids) => c.setSelectedIds(new Set(ids))}\n sortBy={c.state.sortBy}\n onChangeSortBy={(next: GridSort[]) => c.patch({ sortBy: next })}\n sortMode={c.serverMode ? \"server\" : \"client\"}\n rowPadding={DENSITY_ROW_PADDING[layoutState.density]}\n rowDetail={props.rowDetail}\n dataTestId={dataTestId}\n emptyState={emptyState}\n />\n );\n}\n\n"],"mappings":"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","names":["default"]}

package/dist/{chunk-NMX3JAAB.js → chunk-HXEBKOSM.js} RENAMED Viewed

@@ -5,6 +5,9 @@ import {
 import {
   fieldTextFieldStyles
 } from "./chunk-CGO452DC.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 // src/components/layout/TableFilter/TableFilter.tsx
 import CloseIcon from "@mui/icons-material/Close";
@@ -104,7 +107,7 @@ var TableFilterPanel = ({
                 underline: "hover",
                 "data-testid": clearTestId,
                 onClick: onClearAll,
-                sx: { fontSize: "0.75rem", color: "text.secondary" },
+                sx: { fontSize: sxRem(12), color: "text.secondary" },
                 children: copy.clearAllFilters
               }
             ) }),
@@ -138,7 +141,7 @@ var TableFilterKeyword = ({
     if (value !== "") onChange("");
   };
   return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
-    /* @__PURE__ */ jsx(Typography, { component: "label", sx: { fontSize: "0.75rem", fontWeight: 500, color: "text.secondary" }, children: label }),
+    /* @__PURE__ */ jsx(Typography, { component: "label", sx: { fontSize: sxRem(12), fontWeight: 500, color: "text.secondary" }, children: label }),
     /* @__PURE__ */ jsx(
       TextField,
       {
@@ -156,7 +159,7 @@ var TableFilterKeyword = ({
         },
         inputProps: { "aria-label": label, "data-testid": testId },
         InputProps: {
-          startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { sx: { fontSize: 16, color: "text.secondary" } }) }),
+          startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { sx: { fontSize: sxRem(16), color: "text.secondary" } }) }),
           endAdornment: draft !== "" ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
             IconButton,
             {
@@ -165,7 +168,7 @@ var TableFilterKeyword = ({
               "data-testid": testId ? `${testId}-clear` : void 0,
               onMouseDown: (event) => event.preventDefault(),
               onClick: clearKeyword,
-              children: /* @__PURE__ */ jsx(CloseIcon, { sx: { fontSize: 16 } })
+              children: /* @__PURE__ */ jsx(CloseIcon, { sx: { fontSize: sxRem(16) } })
             }
           ) }) : null
         }
@@ -177,7 +180,7 @@ TableFilterKeyword.displayName = "TableFilter.Keyword";
 var TableFilterSection = ({ title, children }) => /* @__PURE__ */ jsxs(Box, { children: [
   /* @__PURE__ */ jsx(Divider, { sx: { mb: 2.5 } }),
   /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: [
-    /* @__PURE__ */ jsx(Typography, { component: "h2", sx: { fontSize: "0.875rem", fontWeight: 600, color: "text.primary" }, children: title }),
+    /* @__PURE__ */ jsx(Typography, { component: "h2", sx: { fontSize: sxRem(14), fontWeight: 600, color: "text.primary" }, children: title }),
     /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children })
   ] })
 ] });
@@ -190,7 +193,7 @@ function TableFilterCheckboxField({
   testId
 }) {
   return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, "data-testid": testId, children: [
-    /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.75rem", fontWeight: 500, color: "text.secondary" }, children: label }),
+    /* @__PURE__ */ jsx(Typography, { sx: { fontSize: sxRem(12), fontWeight: 500, color: "text.secondary" }, children: label }),
     /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "column" }, children: options.map((option) => {
       const checked = selected.has(option.value);
       return /* @__PURE__ */ jsx(
@@ -206,7 +209,7 @@ function TableFilterCheckboxField({
               sx: { py: 0.25 }
             }
           ),
-          label: /* @__PURE__ */ jsxs(Box, { component: "span", sx: { fontSize: "0.875rem" }, children: [
+          label: /* @__PURE__ */ jsxs(Box, { component: "span", sx: { fontSize: sxRem(14) }, children: [
             option.label,
             option.count != null && /* @__PURE__ */ jsxs(Box, { component: "span", sx: { color: "text.secondary" }, children: [
               " ",
@@ -269,7 +272,7 @@ var TableFilterRangeField = ({
   const maxText = maxPlaceholder ?? copy.rangeMax;
   const invalidText = invalidLabel ?? copy.invalidRange;
   return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, "data-testid": testId, children: [
-    /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: "0.75rem", fontWeight: 500, color: "text.secondary" }, children: [
+    /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: sxRem(12), fontWeight: 500, color: "text.secondary" }, children: [
       label,
       unit ? ` (${unit})` : ""
     ] }),
@@ -305,7 +308,7 @@ var TableFilterRangeField = ({
       {
         role: "alert",
         "data-testid": testId ? `${testId}-error` : void 0,
-        sx: { fontSize: "0.7rem", color: "error.main" },
+        sx: { fontSize: sxRem(11.2), color: "error.main" },
         children: invalidText
       }
     )
@@ -323,4 +326,4 @@ TableFilter.RangeField = TableFilterRangeField;
 export {
   TableFilter
 };
-//# sourceMappingURL=chunk-NMX3JAAB.js.map
+//# sourceMappingURL=chunk-HXEBKOSM.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/layout/TableFilter/TableFilter.tsx"],"sourcesContent":["'use client';\n\nimport CloseIcon from '@mui/icons-material/Close';\nimport SearchIcon from '@mui/icons-material/Search';\nimport Box from '@mui/material/Box/index.js';\nimport Checkbox from '@mui/material/Checkbox/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport FormControlLabel from '@mui/material/FormControlLabel/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport InputAdornment from '@mui/material/InputAdornment/index.js';\nimport Link from '@mui/material/Link/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React, { useRef, useState } from 'react';\n\nimport { TableFilterContext, useTableFilterContext } from './TableFilterContext';\nimport type {\n TableFilterCheckboxFieldProps,\n TableFilterKeywordProps,\n TableFilterLayoutProps,\n TableFilterMainProps,\n TableFilterPanelProps,\n TableFilterProps,\n TableFilterRangeFieldProps,\n TableFilterSectionProps,\n} from './TableFilter.types';\nimport { fieldTextFieldStyles } from '../../../tokens/field-height';\nimport { sxRem } from '../../../tokens/relative';\n\nconst PANEL_WIDTH = 280;\n\n/**\n * Compound filter-panel system, MUI port of the reference `TableFilter`. Provides\n * open/close state; `Panel` slides in from the right beside `Main` (no overlap).\n *\n * @example\n * ```tsx\n * <TableFilter open={open} onOpenChange={setOpen} hasActiveFilters={n > 0}>\n * <TableFilter.Layout>\n * <TableFilter.Main>{table}</TableFilter.Main>\n * <TableFilter.Panel onClearAll={clearAll}>\n * <TableFilter.Keyword value={q} onChange={setQ} />\n * <TableFilter.Section title=\"Attributes\">\n * <TableFilter.CheckboxField label=\"Category\" options={cats} selected={sel} onToggle={toggle} />\n * <TableFilter.RangeField label=\"Price\" unit=\"R$\" value={price} onChange={setPrice} />\n * </TableFilter.Section>\n * </TableFilter.Panel>\n * </TableFilter.Layout>\n * </TableFilter>\n * ```\n */\nexport function TableFilter({\n children,\n open,\n onOpenChange,\n hasActiveFilters = false,\n copy,\n}: TableFilterProps): React.JSX.Element {\n return (\n <TableFilterContext.Provider value={{ open, onOpenChange, hasActiveFilters, copy }}>\n {children}\n </TableFilterContext.Provider>\n );\n}\nTableFilter.displayName = 'TableFilter';\n\nconst TableFilterLayout = ({ children, className }: TableFilterLayoutProps): React.JSX.Element => {\n const { open } = useTableFilterContext();\n return (\n <Box\n className={className}\n sx={{\n display: 'flex',\n minHeight: 0,\n minWidth: 0,\n flex: 1,\n alignItems: 'stretch',\n overflow: 'hidden',\n gap: open ? 2 : 0,\n }}\n >\n {children}\n </Box>\n );\n};\nTableFilterLayout.displayName = 'TableFilter.Layout';\n\nconst TableFilterMain = ({ children, className }: TableFilterMainProps): React.JSX.Element => (\n <Box className={className} sx={{ minWidth: 0, flex: 1, overflowY: 'auto', overflowX: 'hidden' }}>\n {children}\n </Box>\n);\nTableFilterMain.displayName = 'TableFilter.Main';\n\nconst TableFilterPanel = ({\n children,\n onClearAll,\n ariaLabel = 'Filters',\n clearTestId,\n}: TableFilterPanelProps): React.JSX.Element => {\n const { open, copy } = useTableFilterContext();\n return (\n <Box\n component=\"aside\"\n aria-label={ariaLabel}\n aria-hidden={!open}\n sx={{\n display: 'flex',\n minHeight: 0,\n flexShrink: 0,\n flexDirection: 'column',\n alignSelf: 'stretch',\n overflow: 'hidden',\n bgcolor: 'background.paper',\n width: open ? PANEL_WIDTH : 0,\n borderLeft: open ? 1 : 0,\n borderColor: 'divider',\n transition: 'width 300ms ease-in-out',\n '@media (prefers-reduced-motion: reduce)': { transition: 'none' },\n }}\n >\n <Box\n sx={{\n display: 'flex',\n minHeight: 0,\n flex: 1,\n flexDirection: 'column',\n overflowY: 'auto',\n overflowX: 'hidden',\n visibility: open ? 'visible' : 'hidden',\n opacity: open ? 1 : 0,\n pointerEvents: open ? 'auto' : 'none',\n transition: 'opacity 200ms ease-out',\n }}\n >\n <Box sx={{ boxSizing: 'border-box', display: 'flex', width: '100%', minWidth: 0, flexDirection: 'column', gap: 2.5, p: 2 }}>\n <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>\n <Link\n component=\"button\"\n type=\"button\"\n underline=\"hover\"\n data-testid={clearTestId}\n onClick={onClearAll}\n sx={{ fontSize: sxRem(12), color: 'text.secondary' }}\n >\n {copy.clearAllFilters}\n </Link>\n </Box>\n {children}\n </Box>\n </Box>\n </Box>\n );\n};\nTableFilterPanel.displayName = 'TableFilter.Panel';\n\nconst TableFilterKeyword = ({\n value,\n onChange,\n placeholder = 'Press Enter to filter',\n label = 'Filter by keyword',\n testId,\n}: TableFilterKeywordProps): React.JSX.Element => {\n const { copy } = useTableFilterContext();\n const [draft, setDraft] = useState(value);\n const prevValue = useRef(value);\n if (prevValue.current !== value) {\n prevValue.current = value;\n if (draft !== value) setDraft(value);\n }\n\n const commit = (): void => {\n if (draft !== value) onChange(draft);\n };\n const clearKeyword = (): void => {\n setDraft('');\n if (value !== '') onChange('');\n };\n\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>\n <Typography component=\"label\" sx={{ fontSize: sxRem(12), fontWeight: 500, color: 'text.secondary' }}>\n {label}\n </Typography>\n <TextField\n size=\"small\"\n sx={fieldTextFieldStyles}\n name=\"keyword\"\n placeholder={placeholder}\n value={draft}\n onChange={(event) => setDraft(event.target.value)}\n onBlur={commit}\n onKeyDown={(event) => {\n if (event.key !== 'Enter') return;\n event.preventDefault();\n commit();\n }}\n inputProps={{ 'aria-label': label, 'data-testid': testId }}\n InputProps={{\n startAdornment: (\n <InputAdornment position=\"start\">\n <SearchIcon sx={{ fontSize: sxRem(16), color: 'text.secondary' }} />\n </InputAdornment>\n ),\n endAdornment:\n draft !== '' ? (\n <InputAdornment position=\"end\">\n <IconButton\n size=\"small\"\n aria-label={copy.clearKeyword}\n data-testid={testId ? `${testId}-clear` : undefined}\n onMouseDown={(event) => event.preventDefault()}\n onClick={clearKeyword}\n >\n <CloseIcon sx={{ fontSize: sxRem(16) }} />\n </IconButton>\n </InputAdornment>\n ) : null,\n }}\n />\n </Box>\n );\n};\nTableFilterKeyword.displayName = 'TableFilter.Keyword';\n\nconst TableFilterSection = ({ title, children }: TableFilterSectionProps): React.JSX.Element => (\n <Box>\n <Divider sx={{ mb: 2.5 }} />\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n <Typography component=\"h2\" sx={{ fontSize: sxRem(14), fontWeight: 600, color: 'text.primary' }}>\n {title}\n </Typography>\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>{children}</Box>\n </Box>\n </Box>\n);\nTableFilterSection.displayName = 'TableFilter.Section';\n\nfunction TableFilterCheckboxField<TValue extends string = string>({\n label,\n options,\n selected,\n onToggle,\n testId,\n}: TableFilterCheckboxFieldProps<TValue>): React.JSX.Element {\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }} data-testid={testId}>\n <Typography sx={{ fontSize: sxRem(12), fontWeight: 500, color: 'text.secondary' }}>{label}</Typography>\n <Box sx={{ display: 'flex', flexDirection: 'column' }}>\n {options.map((option) => {\n const checked = selected.has(option.value);\n return (\n <FormControlLabel\n key={option.value}\n control={\n <Checkbox\n size=\"small\"\n checked={checked}\n onChange={(event) => onToggle(option.value, event.target.checked)}\n data-testid={testId ? `${testId}-${option.value}` : undefined}\n sx={{ py: 0.25 }}\n />\n }\n label={\n <Box component=\"span\" sx={{ fontSize: sxRem(14) }}>\n {option.label}\n {option.count != null && (\n <Box component=\"span\" sx={{ color: 'text.secondary' }}>\n {' '}\n ({option.count})\n </Box>\n )}\n </Box>\n }\n sx={{ ml: -0.5, mr: 0 }}\n />\n );\n })}\n </Box>\n </Box>\n );\n}\nTableFilterCheckboxField.displayName = 'TableFilter.CheckboxField';\n\nfunction parseBound(text: string): number | undefined {\n if (text.trim() === '') return undefined;\n const parsed = Number(text);\n return Number.isNaN(parsed) ? undefined : parsed;\n}\n\n/** One numeric bound input (min or max) for {@link TableFilterRangeField}. */\nfunction RangeBound({\n bound,\n error,\n placeholder,\n step,\n ariaLabel,\n testId,\n onChange,\n}: {\n bound: number | undefined;\n error: boolean;\n placeholder: string;\n step?: number;\n ariaLabel: string;\n testId?: string;\n onChange: (next: number | undefined) => void;\n}): React.JSX.Element {\n return (\n <TextField\n size=\"small\"\n sx={fieldTextFieldStyles}\n type=\"number\"\n error={error}\n placeholder={placeholder}\n value={bound != null ? String(bound) : ''}\n onChange={(event) => onChange(parseBound(event.target.value))}\n inputProps={{ step, 'aria-label': ariaLabel, 'data-testid': testId }}\n />\n );\n}\n\n/** Inverted range: both ends set and max < min (surfaced to the user as an error). */\nconst isRangeInverted = (value: { min?: number; max?: number }): boolean =>\n value.min != null && value.max != null && value.max < value.min;\n\nconst TableFilterRangeField = ({\n label,\n value,\n onChange,\n unit,\n step,\n minPlaceholder,\n maxPlaceholder,\n invalidLabel,\n testId,\n}: TableFilterRangeFieldProps): React.JSX.Element => {\n const { copy } = useTableFilterContext();\n const invalid = isRangeInverted(value);\n // A field may override any of the three; unset, they come from the root's\n // table. Neither path reaches an English literal in this package.\n const minText = minPlaceholder ?? copy.rangeMin;\n const maxText = maxPlaceholder ?? copy.rangeMax;\n const invalidText = invalidLabel ?? copy.invalidRange;\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }} data-testid={testId}>\n <Typography sx={{ fontSize: sxRem(12), fontWeight: 500, color: 'text.secondary' }}>\n {label}\n {unit ? ` (${unit})` : ''}\n </Typography>\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n <RangeBound\n bound={value.min}\n error={invalid}\n placeholder={minText}\n step={step}\n ariaLabel={`${label} ${minText}`}\n testId={testId ? `${testId}-min` : undefined}\n onChange={(min) => onChange({ ...value, min })}\n />\n <Typography component=\"span\" sx={{ color: 'text.secondary' }}>\n –\n </Typography>\n <RangeBound\n bound={value.max}\n error={invalid}\n placeholder={maxText}\n step={step}\n ariaLabel={`${label} ${maxText}`}\n testId={testId ? `${testId}-max` : undefined}\n onChange={(max) => onChange({ ...value, max })}\n />\n </Box>\n {invalid && (\n <Typography\n role=\"alert\"\n data-testid={testId ? `${testId}-error` : undefined}\n sx={{ fontSize: sxRem(11.2), color: 'error.main' }}\n >\n {invalidText}\n </Typography>\n )}\n </Box>\n );\n};\nTableFilterRangeField.displayName = 'TableFilter.RangeField';\n\nTableFilter.Layout = TableFilterLayout;\nTableFilter.Main = TableFilterMain;\nTableFilter.Panel = TableFilterPanel;\nTableFilter.Keyword = TableFilterKeyword;\nTableFilter.Section = TableFilterSection;\nTableFilter.CheckboxField = TableFilterCheckboxField;\nTableFilter.RangeField = TableFilterRangeField;\n"],"mappings":"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","names":[]}

package/dist/{chunk-5QTMJ2RU.js → chunk-I2CRLUS7.js} RENAMED Viewed

@@ -1,21 +1,24 @@
 import {
   PillControl
-} from "./chunk-EVSKEIXI.js";
+} from "./chunk-SN2YMCTL.js";
 import {
   PanelRangeField
-} from "./chunk-ZHFS5L6Q.js";
+} from "./chunk-Y2E73IG2.js";
 import {
   useDataViewsCopy
 } from "./chunk-KHG57NAE.js";
 import {
   TableFilter
-} from "./chunk-NMX3JAAB.js";
+} from "./chunk-HXEBKOSM.js";
 import {
   StackedModal
 } from "./chunk-IL7JZKXY.js";
 import {
   StackedModalContent
 } from "./chunk-RWTFZ7J5.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 // src/components/data-display/DataViews/data-views-filter-panel.tsx
 import Box from "@mui/material/Box/index.js";
@@ -140,7 +143,7 @@ function FilterDialog({
             underline: "hover",
             onClick: props.onClearAll,
             "data-testid": `${props.testIdPrefix}-clear-filters`,
-            sx: { fontSize: "0.75rem", color: "text.secondary" },
+            sx: { fontSize: sxRem(12), color: "text.secondary" },
             children: copy.filters.clearAllFilters
           }
         ) }),
@@ -154,4 +157,4 @@ export {
   GridFilterPanel,
   FilterDialog
 };
-//# sourceMappingURL=chunk-5QTMJ2RU.js.map
+//# sourceMappingURL=chunk-I2CRLUS7.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/DataViews/data-views-filter-panel.tsx"],"sourcesContent":["\"use client\";\n\nimport Box from \"@mui/material/Box/index.js\";\nimport Link from \"@mui/material/Link/index.js\";\n\nimport { StackedModal, StackedModalContent } from \"../../feedback/StackedModal\";\nimport { TableFilter } from \"../../layout/TableFilter\";\n\nimport { PillControl } from \"./data-views-category-pill\";\nimport { PanelRangeField } from \"./data-views-range-pill\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport type {\n FilterFieldConfig,\n RangeFieldConfig,\n RangeValue,\n} from \"./data-views-types\";\nimport { sxRem } from \"../../../tokens/relative\";\n\n/* ── Filter panel ────────────────────────────────────────────────────────── */\n\nexport interface GridFilterPanelProps<T extends Record<string, unknown>> {\n testIdPrefix: string;\n search: string;\n fields: FilterFieldConfig<T>[];\n rangeFields: RangeFieldConfig<T>[];\n pills: Record<string, string[]>;\n ranges: Record<string, RangeValue>;\n onSearchChange: (value: string) => void;\n onTogglePill: (fieldId: string, value: string, checked: boolean) => void;\n onChangeRange: (fieldId: string, range: RangeValue) => void;\n onClearField: (fieldId: string) => void;\n onClearAll: () => void;\n}\n\n/** One pill field: a compact multi-select for long lists, else a checkbox list. */\nfunction PillField<T extends Record<string, unknown>>({\n field,\n selected,\n testIdPrefix,\n onTogglePill,\n onClearField,\n}: {\n field: FilterFieldConfig<T>;\n selected: string[];\n testIdPrefix: string;\n onTogglePill: (fieldId: string, value: string, checked: boolean) => void;\n onClearField: (fieldId: string) => void;\n}): React.JSX.Element {\n const testId = `${testIdPrefix}-filter-${field.id}`;\n // `searchEnabled` forces the searchable multi-select; a plain `multiselect`\n // keeps the auto \"search only when the list is long\" rule. `category` is the\n // hierarchical tree — see PillControl.\n if (field.searchEnabled || field.control === \"multiselect\" || field.control === \"category\") {\n return (\n <PillControl\n fieldId={field.id}\n pill={field}\n selected={selected}\n onTogglePill={onTogglePill}\n onClearField={onClearField}\n testIdPrefix={testIdPrefix}\n layout=\"stacked\"\n />\n );\n }\n return (\n <TableFilter.CheckboxField\n label={field.label}\n options={field.options}\n selected={new Set(selected)}\n onToggle={(value, checked) => onTogglePill(field.id, value, checked)}\n testId={testId}\n />\n );\n}\n\n/** The filter controls (keyword + pill facets + numeric ranges), surface-agnostic. */\nfunction FilterControls<T extends Record<string, unknown>>({\n testIdPrefix,\n search,\n fields,\n rangeFields,\n pills,\n ranges,\n onSearchChange,\n onTogglePill,\n onChangeRange,\n onClearField,\n}: Omit<GridFilterPanelProps<T>, \"onClearAll\">): React.JSX.Element {\n const copy = useDataViewsCopy();\n return (\n <>\n <TableFilter.Keyword\n value={search}\n onChange={onSearchChange}\n label={copy.search.allColumnsLabel}\n placeholder={copy.search.keywordPlaceholder}\n testId={`${testIdPrefix}-search-all`}\n />\n {(fields.length > 0 || rangeFields.length > 0) && (\n <TableFilter.Section title={copy.filters.panelTitle}>\n {fields.map((field) => (\n <PillField\n key={field.id}\n field={field}\n selected={pills[field.id] ?? []}\n testIdPrefix={testIdPrefix}\n onTogglePill={onTogglePill}\n onClearField={onClearField}\n />\n ))}\n {rangeFields.map((field) => (\n <PanelRangeField\n key={field.id}\n field={field}\n value={ranges[field.id] ?? {}}\n onChange={(range) => onChangeRange(field.id, range)}\n testId={`${testIdPrefix}-range-${field.id}`}\n />\n ))}\n </TableFilter.Section>\n )}\n </>\n );\n}\n\n/** The slide-in filter panel: keyword + checkbox facets + numeric ranges. */\nexport function GridFilterPanel<T extends Record<string, unknown>>(\n props: GridFilterPanelProps<T>,\n): React.JSX.Element {\n const copy = useDataViewsCopy();\n return (\n <TableFilter.Panel\n onClearAll={props.onClearAll}\n clearTestId={`${props.testIdPrefix}-clear-filters`}\n ariaLabel={copy.filters.panelTitle}\n >\n <FilterControls {...props} />\n </TableFilter.Panel>\n );\n}\n\n/** Props for the modal filter surface used below the inline breakpoint. */\ninterface FilterDialogProps<T extends Record<string, unknown>> extends GridFilterPanelProps<T> {\n open: boolean;\n onClose: () => void;\n}\n\n/**\n * The same filter controls in a centered modal — used on smaller screens where the\n * slide-in panel would overlap the table. The \"Filtros\" toolbar button opens it.\n */\nexport function FilterDialog<T extends Record<string, unknown>>({\n open,\n onClose,\n ...props\n}: FilterDialogProps<T>): React.JSX.Element {\n const copy = useDataViewsCopy();\n return (\n <StackedModal\n open={open}\n onClose={onClose}\n navigationTitle={copy.filters.panelTitle}\n backLabel={copy.nav.goBack}\n modalId={`${props.testIdPrefix}-filters`}\n maxWidth=\"xs\"\n dataTestId={`${props.testIdPrefix}-filter-dialog`}\n >\n <StackedModalContent>\n <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 2.5 }}>\n <Box sx={{ display: \"flex\", justifyContent: \"flex-end\" }}>\n <Link\n component=\"button\"\n type=\"button\"\n underline=\"hover\"\n onClick={props.onClearAll}\n data-testid={`${props.testIdPrefix}-clear-filters`}\n sx={{ fontSize: sxRem(12), color: \"text.secondary\" }}\n >\n {copy.filters.clearAllFilters}\n </Link>\n </Box>\n <FilterControls {...props} />\n </Box>\n </StackedModalContent>\n </StackedModal>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAO,SAAS;AAChB,OAAO,UAAU;AAmDX,SAqCF,UArCE,KA8CE,YA9CF;AAnBN,SAAS,UAA6C;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMsB;AACpB,QAAM,SAAS,GAAG,YAAY,WAAW,MAAM,EAAE;AAIjD,MAAI,MAAM,iBAAiB,MAAM,YAAY,iBAAiB,MAAM,YAAY,YAAY;AAC1F,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM;AAAA,QACf,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAO;AAAA;AAAA,IACT;AAAA,EAEJ;AACA,SACE;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACC,OAAO,MAAM;AAAA,MACb,SAAS,MAAM;AAAA,MACf,UAAU,IAAI,IAAI,QAAQ;AAAA,MAC1B,UAAU,CAAC,OAAO,YAAY,aAAa,MAAM,IAAI,OAAO,OAAO;AAAA,MACnE;AAAA;AAAA,EACF;AAEJ;AAGA,SAAS,eAAkD;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmE;AACjE,QAAM,OAAO,iBAAiB;AAC9B,SACE,iCACE;AAAA;AAAA,MAAC,YAAY;AAAA,MAAZ;AAAA,QACC,OAAO;AAAA,QACP,UAAU;AAAA,QACV,OAAO,KAAK,OAAO;AAAA,QACnB,aAAa,KAAK,OAAO;AAAA,QACzB,QAAQ,GAAG,YAAY;AAAA;AAAA,IACzB;AAAA,KACE,OAAO,SAAS,KAAK,YAAY,SAAS,MAC1C,qBAAC,YAAY,SAAZ,EAAoB,OAAO,KAAK,QAAQ,YACtC;AAAA,aAAO,IAAI,CAAC,UACX;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA,UAAU,MAAM,MAAM,EAAE,KAAK,CAAC;AAAA,UAC9B;AAAA,UACA;AAAA,UACA;AAAA;AAAA,QALK,MAAM;AAAA,MAMb,CACD;AAAA,MACA,YAAY,IAAI,CAAC,UAChB;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA,OAAO,OAAO,MAAM,EAAE,KAAK,CAAC;AAAA,UAC5B,UAAU,CAAC,UAAU,cAAc,MAAM,IAAI,KAAK;AAAA,UAClD,QAAQ,GAAG,YAAY,UAAU,MAAM,EAAE;AAAA;AAAA,QAJpC,MAAM;AAAA,MAKb,CACD;AAAA,OACH;AAAA,KAEJ;AAEJ;AAGO,SAAS,gBACd,OACmB;AACnB,QAAM,OAAO,iBAAiB;AAC9B,SACE;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACC,YAAY,MAAM;AAAA,MAClB,aAAa,GAAG,MAAM,YAAY;AAAA,MAClC,WAAW,KAAK,QAAQ;AAAA,MAExB,8BAAC,kBAAgB,GAAG,OAAO;AAAA;AAAA,EAC7B;AAEJ;AAYO,SAAS,aAAgD;AAAA,EAC9D;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA4C;AAC1C,QAAM,OAAO,iBAAiB;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,iBAAiB,KAAK,QAAQ;AAAA,MAC9B,WAAW,KAAK,IAAI;AAAA,MACpB,SAAS,GAAG,MAAM,YAAY;AAAA,MAC9B,UAAS;AAAA,MACT,YAAY,GAAG,MAAM,YAAY;AAAA,MAEjC,8BAAC,uBACC,+BAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,IAAI,GAC5D;AAAA,4BAAC,OAAI,IAAI,EAAE,SAAS,QAAQ,gBAAgB,WAAW,GACrD;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS,MAAM;AAAA,YACf,eAAa,GAAG,MAAM,YAAY;AAAA,YAClC,IAAI,EAAE,UAAU,MAAM,EAAE,GAAG,OAAO,iBAAiB;AAAA,YAElD,eAAK,QAAQ;AAAA;AAAA,QAChB,GACF;AAAA,QACA,oBAAC,kBAAgB,GAAG,OAAO;AAAA,SAC7B,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/{chunk-VMZ3JJGG.js → chunk-I62ALI7F.js} RENAMED Viewed

@@ -13,10 +13,10 @@ import {
 } from "./chunk-N6CSXHFJ.js";
 import {
   Button
-} from "./chunk-3EDZU2H7.js";
+} from "./chunk-KH25WUSX.js";
 import {
   Text
-} from "./chunk-H57ZS6W2.js";
+} from "./chunk-WTOYEWW6.js";
 import {
   uiInk
 } from "./chunk-FQ6UW7IY.js";
@@ -205,4 +205,4 @@ export {
   SocialLoginButton,
   SocialLoginContainer
 };
-//# sourceMappingURL=chunk-VMZ3JJGG.js.map
+//# sourceMappingURL=chunk-I62ALI7F.js.map

package/dist/{chunk-JKNLKUCX.js → chunk-I6EVBLFX.js} RENAMED Viewed

@@ -4,19 +4,22 @@ import {
 import {
   uiInk
 } from "./chunk-FQ6UW7IY.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
 // src/components/data-display/Chart/chart-internals.ts
 import { alpha } from "@mui/material/styles/index.js";
 var SIZE_PRESETS = {
-  xs: { height: 200, fontSize: "0.75rem", tickMargin: 10 },
-  sm: { height: 300, fontSize: "0.875rem", tickMargin: 12 },
-  md: { height: 400, fontSize: "1rem", tickMargin: 14 },
-  lg: { height: 500, fontSize: "1.125rem", tickMargin: 16 },
-  xl: { height: 600, fontSize: "1.25rem", tickMargin: 18 }
+  xs: { height: 200, fontSize: sxRem(12), tickMargin: 10 },
+  sm: { height: 300, fontSize: sxRem(14), tickMargin: 12 },
+  md: { height: 400, fontSize: sxRem(16), tickMargin: 14 },
+  lg: { height: 500, fontSize: sxRem(18), tickMargin: 16 },
+  xl: { height: 600, fontSize: sxRem(20), tickMargin: 18 }
 };
-function getSizeStyles(size, height) {
+function getSizeStyles(theme, size, height) {
   const preset = SIZE_PRESETS[size ?? "md"] ?? SIZE_PRESETS.md;
-  return { ...preset, height: height ?? preset.height };
+  return { ...preset, fontSize: preset.fontSize(theme), height: height ?? preset.height };
 }
 function getDefaultColors(theme, variant, colors) {
   if (colors) return colors;
@@ -117,4 +120,4 @@ export {
   resolveSeries,
   getAxisStyles
 };
-//# sourceMappingURL=chunk-JKNLKUCX.js.map
+//# sourceMappingURL=chunk-I6EVBLFX.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/data-display/Chart/chart-internals.ts"],"sourcesContent":["import { alpha, type Theme } from '@mui/material/styles/index.js';\nimport type { CSSProperties } from 'react';\n\nimport type { ChartProps, ChartSeries } from './Chart.types';\nimport { uiInk } from '../../../tokens/ink';\nimport { accentFor, sxRem } from '../../../tokens/scales';\n\n/**\n * Non-JSX internals of the prop-driven Chart: size/variant styling, palette\n * resolution and series auto-detection. Split from Chart.tsx to keep every\n * function inside the repo's complexity budget.\n */\n\nexport interface SizeStyles {\n height: number;\n fontSize: string;\n /**\n * Gap between an axis line and its tick labels, px.\n *\n * Recharts' default of 2 is not enough. The bottom VALUE tick is centred on\n * the x-axis line, so its text box reaches ~0.79em BELOW that line, while\n * the category labels begin 2px under the 6px tick mark — the two collide at\n * the axis corner, at every viewport. Each value below is ~0.8em of its own\n * font size, which clears the value label's descender with ~6px to spare.\n */\n tickMargin: number;\n}\n\ntype SizePreset = Omit<SizeStyles, 'fontSize'> & { fontSize: (theme: Theme) => string };\n\nconst SIZE_PRESETS: Record<NonNullable<ChartProps['size']>, SizePreset> = {\n xs: { height: 200, fontSize: sxRem(12), tickMargin: 10 },\n sm: { height: 300, fontSize: sxRem(14), tickMargin: 12 },\n md: { height: 400, fontSize: sxRem(16), tickMargin: 14 },\n lg: { height: 500, fontSize: sxRem(18), tickMargin: 16 },\n xl: { height: 600, fontSize: sxRem(20), tickMargin: 18 },\n};\n\nexport function getSizeStyles(theme: Theme, size: ChartProps['size'], height?: number): SizeStyles {\n const preset = SIZE_PRESETS[size ?? 'md'] ?? SIZE_PRESETS.md;\n return { ...preset, fontSize: preset.fontSize(theme), height: height ?? preset.height };\n}\n\nexport function getDefaultColors(theme: Theme, variant: ChartProps['variant'], colors?: string[]): string[] {\n if (colors) return colors;\n if (variant === 'neon') return [...uiInk(theme).dataVizNeon.series];\n return [\n theme.palette.primary.main,\n theme.palette.secondary.main,\n theme.palette.success.main,\n theme.palette.warning.main,\n theme.palette.error.main,\n theme.palette.info.main,\n ];\n}\n\ntype SxStyles = Record<string, unknown>;\n\ninterface VariantOptions {\n variant: NonNullable<ChartProps['variant']>;\n color: NonNullable<ChartProps['color']>;\n glow: boolean;\n pulse: boolean;\n glass: boolean;\n gradient: boolean;\n disabled: boolean;\n}\n\nfunction effectStyles(theme: Theme, options: VariantOptions): SxStyles {\n const accent = accentFor(theme, options.color).main;\n const glow = options.glow ? { boxShadow: `0 0 30px ${alpha(accent, 0.4)}` } : {};\n const pulse = options.pulse\n ? {\n animation: 'pulse 2s infinite',\n '@keyframes pulse': {\n '0%': { boxShadow: `0 0 0 0 ${alpha(accent, 0.4)}` },\n '70%': { boxShadow: `0 0 0 20px ${alpha(accent, 0)}` },\n '100%': { boxShadow: `0 0 0 0 ${alpha(accent, 0)}` },\n },\n }\n : {};\n return { ...glow, ...pulse };\n}\n\nfunction variantSurface(theme: Theme, options: VariantOptions): SxStyles {\n switch (options.variant) {\n case 'glass':\n return {\n backgroundColor: alpha(theme.palette.background.paper, options.glass ? 0.1 : 0.9),\n backdropFilter: 'blur(20px)',\n border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,\n };\n case 'gradient':\n return {\n background: options.gradient\n ? `linear-gradient(135deg, ${alpha(accentFor(theme, options.color).light, 0.05)}, ${alpha(accentFor(theme, options.color).dark, 0.05)})`\n : theme.palette.background.paper,\n };\n case 'elevated':\n return { boxShadow: theme.shadows[4] };\n case 'minimal':\n return { border: 'none', backgroundColor: 'transparent' };\n case 'neon': {\n const neon = uiInk(theme).dataVizNeon;\n return {\n backgroundColor: neon.ground,\n border: `1px solid ${alpha(neon.accent, 0.3)}`,\n '& .recharts-cartesian-grid-horizontal line, & .recharts-cartesian-grid-vertical line': {\n stroke: alpha(neon.accent, 0.1),\n },\n };\n }\n default:\n return { backgroundColor: theme.palette.background.paper };\n }\n}\n\nexport function getVariantStyles(theme: Theme, options: VariantOptions): SxStyles {\n return {\n borderRadius: theme.spacing(1),\n transition: theme.transitions.create(['all'], {\n duration: theme.transitions.duration.standard,\n }),\n opacity: options.disabled ? 0.5 : 1,\n pointerEvents: options.disabled ? ('none' as const) : ('auto' as const),\n ...effectStyles(theme, options),\n ...variantSurface(theme, options),\n };\n}\n\n/** Explicit series, or one series per non-axis key found in the first row. */\nexport function resolveSeries(\n data: ChartProps['data'],\n series: ChartSeries[] | undefined,\n xAxisKey: string,\n palette: string[],\n): ChartSeries[] {\n if (series) return series;\n if (data.length === 0) return [];\n return Object.keys(data[0] ?? {})\n .filter((key) => key !== xAxisKey)\n .map((key, index) => ({\n dataKey: key,\n name: key,\n color: palette[index % palette.length],\n }));\n}\n\ninterface AxisTextStyles {\n axisStyle: CSSProperties;\n gridStroke: string;\n /**\n * Multiplier applied to `gridStroke`'s own alpha. Gridlines must read one\n * step BELOW the card border — the border is `divider`, so half of it —\n * without being dashed at data weight. Expressing the step as an opacity\n * rather than a second colour keeps it derived from the theme's divider\n * whatever form that takes (rgba, hex, or a CSS variable, which the colour\n * helpers cannot decompose).\n */\n gridOpacity: number;\n}\n\nexport function getAxisStyles(theme: Theme, variant: ChartProps['variant'], fontSize: string): AxisTextStyles {\n const neon = variant === 'neon';\n const neonAccent = uiInk(theme).dataVizNeon.accent;\n return {\n axisStyle: {\n fontSize,\n fill: neon ? neonAccent : theme.palette.text.secondary,\n // Ticks are columns of digits: they have to line up between rows.\n fontVariantNumeric: 'tabular-nums',\n },\n gridStroke: neon ? alpha(neonAccent, 0.1) : theme.palette.divider,\n // The neon grid is already a 10%-alpha cyan; halving it again would erase it.\n gridOpacity: neon ? 1 : 0.5,\n };\n}\n"],"mappings":"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","names":[]}