@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-G3XLFQ2Z.js

@@ -0,0 +1,267 @@
+import {
+  glowAnimation,
+  rippleAnimation,
+  scaleAnimation,
+  slideAnimation
+} from "./chunk-Z6WSW6B4.js";
+import {
+  asFieldSize,
+  fieldHeight
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadius
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+import {
+  FIELD_BORDER_WIDTH
+} from "./chunk-PZBK3F52.js";
+import {
+  absoluteInk,
+  controlNeutral
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  remPx,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/RadioGroup/RadioGroup.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var segmentTrackPadding = (theme) => rem(theme, 4);
+var neutralPalette = (theme) => controlNeutral(theme);
+var namedPalette = (theme, color) => {
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    danger: theme.palette.error
+  };
+  return colorMap[color] || theme.palette.primary;
+};
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    return neutralPalette(theme);
+  }
+  const palette = namedPalette(theme, color);
+  const { primary } = theme.palette;
+  return {
+    main: palette.main || primary.main,
+    dark: palette.dark || palette.main || primary.dark,
+    light: palette.light || palette.main || primary.light,
+    contrastText: palette.contrastText || absoluteInk(theme).white
+  };
+};
+var pickSize = (map, size) => map[size] ?? map.md;
+var CARD_SIZES = {
+  xs: (theme) => ({ padding: rem(theme, 8), minHeight: rem(theme, 60) }),
+  sm: (theme) => ({ padding: rem(theme, 12), minHeight: rem(theme, 70) }),
+  md: (theme) => ({ padding: rem(theme, 16), minHeight: rem(theme, 80) }),
+  lg: (theme) => ({ padding: rem(theme, 20), minHeight: rem(theme, 90) }),
+  xl: (theme) => ({ padding: rem(theme, 24), minHeight: rem(theme, 100) })
+};
+var BUTTON_SIZES = {
+  xs: (theme) => ({ padding: rems(theme, 6, 12), fontSize: rem(theme, 12), minHeight: rem(theme, 32) }),
+  sm: (theme) => ({ padding: rems(theme, 8, 16), fontSize: rem(theme, 14), minHeight: rem(theme, 36) }),
+  md: (theme) => ({ padding: rems(theme, 10, 20), fontSize: rem(theme, 16), minHeight: rem(theme, 40) }),
+  lg: (theme) => ({ padding: rems(theme, 12, 24), fontSize: rem(theme, 18), minHeight: rem(theme, 44) }),
+  xl: (theme) => ({ padding: rems(theme, 14, 28), fontSize: rem(theme, 20), minHeight: rem(theme, 48) })
+};
+var SEGMENT_SIZES = {
+  xs: (theme) => ({ padding: rems(theme, 4, 8), fontSize: rem(theme, 12) }),
+  sm: (theme) => ({ padding: rems(theme, 6, 12), fontSize: rem(theme, 14) }),
+  md: (theme) => ({ padding: rems(theme, 8, 16), fontSize: rem(theme, 16) }),
+  lg: (theme) => ({ padding: rems(theme, 10, 20), fontSize: rem(theme, 18) }),
+  xl: (theme) => ({ padding: rems(theme, 12, 24), fontSize: rem(theme, 20) })
+};
+var formLabelSx = (theme, glass, error) => ({
+  marginBottom: theme.spacing(2),
+  fontWeight: 600,
+  color: error ? theme.palette.error.main : theme.palette.text.primary,
+  ...glass && {
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    padding: rems(theme, 8, 12),
+    borderRadius: rem(theme, 8),
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    display: "inline-block"
+  }
+});
+var cardBase = (theme, flags, palette) => {
+  const { selected, animated, customSize = "md" } = flags;
+  return {
+    cursor: "pointer",
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    border: `${rem(theme, 2)} solid ${selected ? palette.main : fieldEdge(theme)}`,
+    backgroundColor: selected ? alpha(palette.main, 0.05) : theme.palette.background.paper,
+    position: "relative",
+    overflow: "hidden",
+    ...animated && { animation: `${slideAnimation(theme)} 0.4s ease-out` },
+    // A radial wash that grows from the centre as the card is selected or hovered.
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      width: selected ? "100%" : "0",
+      height: selected ? "100%" : "0",
+      background: `radial-gradient(circle, ${alpha(palette.main, 0.1)} 0%, transparent 70%)`,
+      transform: "translate(-50%, -50%)",
+      transition: "all 0.5s ease",
+      borderRadius: "50%"
+    },
+    "&:hover": {
+      borderColor: palette.main,
+      backgroundColor: alpha(palette.main, 0.02),
+      transform: `translateY(${rem(theme, -2)}) scale(1.02)`,
+      boxShadow: `${theme.shadows[4]}, 0 ${rems(theme, 10, 30, -5)} ${alpha(palette.main, 0.2)}`,
+      "&::before": { width: "120%", height: "120%" }
+    },
+    "&:active": { transform: "scale(0.98)" },
+    ...pickSize(CARD_SIZES, customSize)(theme)
+  };
+};
+var radioCardSx = (theme, flags) => {
+  const { selected, customColor = "primary", glass, gradient, glow } = flags;
+  const palette = getColorFromTheme(theme, customColor);
+  return {
+    ...cardBase(theme, flags, palette),
+    ...glass && {
+      backgroundColor: selected ? alpha(palette.main, 0.1) : alpha(theme.palette.background.paper, 0.1),
+      backdropFilter: `blur(${rem(theme, 20)})`,
+      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
+    },
+    ...gradient && selected && {
+      background: `linear-gradient(135deg, ${alpha(palette.main, 0.1)}, ${alpha(palette.light || palette.main, 0.05)})`,
+      borderColor: palette.main
+    },
+    ...glow && selected && {
+      animation: `${glowAnimation(theme)} 2s ease-in-out infinite`,
+      boxShadow: `0 0 ${rem(theme, 15)} ${alpha(palette.main, 0.4)}`
+    }
+  };
+};
+var buttonBase = (theme, flags, palette) => {
+  const { selected, animated, customSize = "md" } = flags;
+  return {
+    borderRadius: fieldRadius(theme),
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    fontWeight: 500,
+    border: `${FIELD_BORDER_WIDTH}px solid ${selected ? palette.main : fieldEdge(theme)}`,
+    backgroundColor: selected ? palette.main : "transparent",
+    color: selected ? palette.contrastText || absoluteInk(theme).white : theme.palette.text.primary,
+    position: "relative",
+    overflow: "hidden",
+    ...animated && selected && { animation: `${scaleAnimation} 0.3s ease-out` },
+    // Sized to zero until pressed, when the ripple keyframes expand it.
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      width: 0,
+      height: 0,
+      borderRadius: "50%",
+      backgroundColor: alpha(palette.contrastText || absoluteInk(theme).white, 0.3),
+      transform: "translate(-50%, -50%)",
+      pointerEvents: "none"
+    },
+    "&:active::after": {
+      animation: `${rippleAnimation} 0.6s ease-out`,
+      width: "100%",
+      height: "100%"
+    },
+    "&:hover": {
+      borderColor: palette.main,
+      backgroundColor: selected ? palette.dark : alpha(palette.main, 0.1),
+      transform: `translateY(${rem(theme, -1)}) scale(1.02)`,
+      boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(palette.main, 0.2)}`
+    },
+    "&:active": { transform: "scale(0.98)" },
+    ...pickSize(BUTTON_SIZES, customSize)(theme),
+    // The theme's field height for the size, in place of the table's own.
+    minHeight: fieldHeight(theme, asFieldSize(customSize)),
+    paddingTop: 0,
+    paddingBottom: 0
+  };
+};
+var buttonRadioSx = (theme, flags) => {
+  const { selected, customColor = "primary", glass, gradient } = flags;
+  const palette = getColorFromTheme(theme, customColor);
+  return {
+    ...buttonBase(theme, flags, palette),
+    ...glass && {
+      backgroundColor: selected ? alpha(palette.main, 0.8) : alpha(theme.palette.background.paper, 0.1),
+      backdropFilter: `blur(${rem(theme, 20)})`,
+      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
+    },
+    ...gradient && selected && {
+      background: `linear-gradient(135deg, ${palette.main}, ${palette.dark})`,
+      border: "none"
+    }
+  };
+};
+var segmentContainerSx = (theme, glass, customColor = "primary") => {
+  const palette = getColorFromTheme(theme, customColor);
+  return {
+    padding: segmentTrackPadding(theme),
+    // Concentric with the segments inside it, which take the field radius.
+    borderRadius: fieldRadius(theme) + remPx(theme, 4) + FIELD_BORDER_WIDTH,
+    backgroundColor: glass ? alpha(theme.palette.background.paper, 0.1) : alpha(palette.main, 0.05),
+    backdropFilter: glass ? `blur(${rem(theme, 20)})` : "none",
+    border: `${FIELD_BORDER_WIDTH}px solid ${alpha(theme.palette.divider, 0.2)}`,
+    display: "flex",
+    gap: rem(theme, 2)
+  };
+};
+var segmentUnderline = (theme, color, selected) => ({
+  content: '""',
+  position: "absolute",
+  bottom: 0,
+  left: selected ? 0 : "50%",
+  width: selected ? "100%" : 0,
+  height: rem(theme, 2),
+  backgroundColor: color,
+  transition: "all 0.3s ease",
+  transform: selected ? "translateX(0)" : "translateX(-50%)"
+});
+var segmentButtonSx = (theme, flags) => {
+  const { selected, customColor = "primary", customSize = "md", animated } = flags;
+  const palette = getColorFromTheme(theme, customColor);
+  return {
+    flex: 1,
+    borderRadius: fieldRadius(theme),
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    fontWeight: 500,
+    backgroundColor: selected ? theme.palette.background.paper : "transparent",
+    color: selected ? palette.main : theme.palette.text.secondary,
+    boxShadow: selected ? `${theme.shadows[2]}, inset 0 ${rems(theme, 1, 3)} ${alpha(palette.main, 0.1)}` : "none",
+    position: "relative",
+    overflow: "hidden",
+    ...animated && selected && { animation: `${scaleAnimation} 0.3s ease-out` },
+    "&::before": segmentUnderline(theme, palette.main, Boolean(selected)),
+    "&:hover": {
+      backgroundColor: selected ? theme.palette.background.paper : alpha(theme.palette.action.hover, 0.08),
+      color: palette.main,
+      "&::before": { width: "100%", left: 0, transform: "translateX(0)" }
+    },
+    "&:active": { transform: "scale(0.98)" },
+    ...pickSize(SEGMENT_SIZES, customSize)(theme),
+    // Each segment is a field; the track around it adds its own inset.
+    minHeight: fieldHeight(theme, asFieldSize(customSize)),
+    paddingTop: 0,
+    paddingBottom: 0
+  };
+};
+
+export {
+  formLabelSx,
+  radioCardSx,
+  buttonRadioSx,
+  segmentContainerSx,
+  segmentButtonSx
+};
+//# sourceMappingURL=chunk-G3XLFQ2Z.js.map

package/dist/chunk-G3XLFQ2Z.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/RadioGroup/RadioGroup.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { glowAnimation, rippleAnimation, scaleAnimation, slideAnimation } from './RadioGroup.animations';\n\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { asFieldSize, FIELD_BORDER_WIDTH, fieldHeight } from '../../../tokens/field-height';\nimport { absoluteInk, controlNeutral } from '../../../tokens/ink';\nimport { rem, remPx, rems } from '../../../tokens/relative';\n\n/**\n * The segment track's padding (4px at the design scale); its border is the\n * field hairline. Its corner is the segments' radius plus both.\n */\nconst segmentTrackPadding = (theme: Theme): string => rem(theme, 4);\n\ninterface ColorPalette {\n  main: string;\n  dark?: string;\n  light?: string;\n  contrastText?: string;\n}\n\n/** `neutral` is not a MUI palette entry, so it is the controls' neutral tone. */\nconst neutralPalette = (theme: Theme): ColorPalette => controlNeutral(theme);\n\n/** `danger` is this component's name for the error palette; the rest map straight through. */\nconst namedPalette = (theme: Theme, color: string): ColorPalette => {\n  const colorMap: Record<string, ColorPalette> = {\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  return colorMap[color] || theme.palette.primary;\n};\n\n/**\n * Resolves a colour name to a full palette, filling any step the theme leaves\n * out from `main` and then from the primary palette. Split into three so the\n * fallback chains do not all count against one function.\n */\nconst getColorFromTheme = (theme: Theme, color: string): ColorPalette => {\n  if (color === 'neutral') {\n    return neutralPalette(theme);\n  }\n\n  const palette = namedPalette(theme, color);\n  const { primary } = theme.palette;\n\n  // namedPalette always yields a palette, so these need no optional chaining;\n  // each step still falls back to `main` and then to primary when the theme\n  // leaves it out.\n  return {\n    main: palette.main || primary.main,\n    dark: palette.dark || palette.main || primary.dark,\n    light: palette.light || palette.main || primary.light,\n    contrastText: palette.contrastText || absoluteInk(theme).white,\n  };\n};\n\ntype SizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nconst pickSize = <T,>(map: Record<SizeKey, T>, size: string): T => map[size as SizeKey] ?? map.md;\n\nconst CARD_SIZES: Record<SizeKey, (theme: Theme) => CSSObject> = {\n  xs: (theme) => ({ padding: rem(theme, 8), minHeight: rem(theme, 60) }),\n  sm: (theme) => ({ padding: rem(theme, 12), minHeight: rem(theme, 70) }),\n  md: (theme) => ({ padding: rem(theme, 16), minHeight: rem(theme, 80) }),\n  lg: (theme) => ({ padding: rem(theme, 20), minHeight: rem(theme, 90) }),\n  xl: (theme) => ({ padding: rem(theme, 24), minHeight: rem(theme, 100) }),\n};\n\nconst BUTTON_SIZES: Record<SizeKey, (theme: Theme) => CSSObject> = {\n  xs: (theme) => ({ padding: rems(theme, 6, 12), fontSize: rem(theme, 12), minHeight: rem(theme, 32) }),\n  sm: (theme) => ({ padding: rems(theme, 8, 16), fontSize: rem(theme, 14), minHeight: rem(theme, 36) }),\n  md: (theme) => ({ padding: rems(theme, 10, 20), fontSize: rem(theme, 16), minHeight: rem(theme, 40) }),\n  lg: (theme) => ({ padding: rems(theme, 12, 24), fontSize: rem(theme, 18), minHeight: rem(theme, 44) }),\n  xl: (theme) => ({ padding: rems(theme, 14, 28), fontSize: rem(theme, 20), minHeight: rem(theme, 48) }),\n};\n\nconst SEGMENT_SIZES: Record<SizeKey, (theme: Theme) => CSSObject> = {\n  xs: (theme) => ({ padding: rems(theme, 4, 8), fontSize: rem(theme, 12) }),\n  sm: (theme) => ({ padding: rems(theme, 6, 12), fontSize: rem(theme, 14) }),\n  md: (theme) => ({ padding: rems(theme, 8, 16), fontSize: rem(theme, 16) }),\n  lg: (theme) => ({ padding: rems(theme, 10, 20), fontSize: rem(theme, 18) }),\n  xl: (theme) => ({ padding: rems(theme, 12, 24), fontSize: rem(theme, 20) }),\n};\n\nexport interface SurfaceFlags {\n  selected?: boolean;\n  customColor?: string;\n  glass?: boolean;\n  gradient?: boolean;\n  glow?: boolean;\n  customSize?: string;\n  animated?: boolean;\n}\n\nexport const formLabelSx = (theme: Theme, glass?: boolean, error?: boolean): CSSObject => ({\n  marginBottom: theme.spacing(2),\n  fontWeight: 600,\n  color: error ? theme.palette.error.main : theme.palette.text.primary,\n  ...(glass && {\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: `blur(${rem(theme, 10)})`,\n    padding: rems(theme, 8, 12),\n    borderRadius: rem(theme, 8),\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    display: 'inline-block',\n  }),\n});\n\n/** The card's resting surface, before glass/gradient/glow override parts of it. */\nconst cardBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): CSSObject => {\n  const { selected, animated, customSize = 'md' } = flags;\n\n  return {\n    cursor: 'pointer',\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    border: `${rem(theme, 2)} solid ${selected ? palette.main : fieldEdge(theme)}`,\n    backgroundColor: selected ? alpha(palette.main, 0.05) : theme.palette.background.paper,\n    position: 'relative' as const,\n    overflow: 'hidden' as const,\n    ...(animated && { animation: `${slideAnimation(theme)} 0.4s ease-out` }),\n    // A radial wash that grows from the centre as the card is selected or hovered.\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: '50%',\n      left: '50%',\n      width: selected ? '100%' : '0',\n      height: selected ? '100%' : '0',\n      background: `radial-gradient(circle, ${alpha(palette.main, 0.1)} 0%, transparent 70%)`,\n      transform: 'translate(-50%, -50%)',\n      transition: 'all 0.5s ease',\n      borderRadius: '50%',\n    },\n    '&:hover': {\n      borderColor: palette.main,\n      backgroundColor: alpha(palette.main, 0.02),\n      transform: `translateY(${rem(theme, -2)}) scale(1.02)`,\n      boxShadow: `${theme.shadows[4]}, 0 ${rems(theme, 10, 30, -5)} ${alpha(palette.main, 0.2)}`,\n      '&::before': { width: '120%', height: '120%' },\n    },\n    '&:active': { transform: 'scale(0.98)' },\n    ...pickSize(CARD_SIZES, customSize)(theme),\n  };\n};\n\nexport const radioCardSx = (theme: Theme, flags: SurfaceFlags): CSSObject => {\n  const { selected, customColor = 'primary', glass, gradient, glow } = flags;\n  const palette = getColorFromTheme(theme, customColor);\n\n  return {\n    ...cardBase(theme, flags, palette),\n    ...(glass && {\n      backgroundColor: selected\n        ? alpha(palette.main, 0.1)\n        : alpha(theme.palette.background.paper, 0.1),\n      backdropFilter: `blur(${rem(theme, 20)})`,\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    }),\n    ...(gradient &&\n      selected && {\n        background: `linear-gradient(135deg, ${alpha(palette.main, 0.1)}, ${alpha(palette.light || palette.main, 0.05)})`,\n        borderColor: palette.main,\n      }),\n    ...(glow &&\n      selected && {\n        animation: `${glowAnimation(theme)} 2s ease-in-out infinite`,\n        boxShadow: `0 0 ${rem(theme, 15)} ${alpha(palette.main, 0.4)}`,\n      }),\n  };\n};\n\n/** The pill button's resting surface, before glass/gradient override parts of it. */\nconst buttonBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): CSSObject => {\n  const { selected, animated, customSize = 'md' } = flags;\n\n  return {\n    borderRadius: fieldRadius(theme),\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    fontWeight: 500,\n    border: `${FIELD_BORDER_WIDTH}px solid ${selected ? palette.main : fieldEdge(theme)}`,\n    backgroundColor: selected ? palette.main : 'transparent',\n    color: selected ? palette.contrastText || absoluteInk(theme).white : theme.palette.text.primary,\n    position: 'relative' as const,\n    overflow: 'hidden' as const,\n    ...(animated && selected && { animation: `${scaleAnimation} 0.3s ease-out` }),\n    // Sized to zero until pressed, when the ripple keyframes expand it.\n    '&::after': {\n      content: '\"\"',\n      position: 'absolute',\n      top: '50%',\n      left: '50%',\n      width: 0,\n      height: 0,\n      borderRadius: '50%',\n      backgroundColor: alpha(palette.contrastText || absoluteInk(theme).white, 0.3),\n      transform: 'translate(-50%, -50%)',\n      pointerEvents: 'none' as const,\n    },\n    '&:active::after': {\n      animation: `${rippleAnimation} 0.6s ease-out`,\n      width: '100%',\n      height: '100%',\n    },\n    '&:hover': {\n      borderColor: palette.main,\n      backgroundColor: selected ? palette.dark : alpha(palette.main, 0.1),\n      transform: `translateY(${rem(theme, -1)}) scale(1.02)`,\n      boxShadow: `0 ${rems(theme, 4, 12)} ${alpha(palette.main, 0.2)}`,\n    },\n    '&:active': { transform: 'scale(0.98)' },\n    ...pickSize(BUTTON_SIZES, customSize)(theme),\n    // The theme's field height for the size, in place of the table's own.\n    minHeight: fieldHeight(theme, asFieldSize(customSize)),\n    paddingTop: 0,\n    paddingBottom: 0,\n  };\n};\n\nexport const buttonRadioSx = (theme: Theme, flags: SurfaceFlags): CSSObject => {\n  const { selected, customColor = 'primary', glass, gradient } = flags;\n  const palette = getColorFromTheme(theme, customColor);\n\n  return {\n    ...buttonBase(theme, flags, palette),\n    ...(glass && {\n      backgroundColor: selected\n        ? alpha(palette.main, 0.8)\n        : alpha(theme.palette.background.paper, 0.1),\n      backdropFilter: `blur(${rem(theme, 20)})`,\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    }),\n    ...(gradient &&\n      selected && {\n        background: `linear-gradient(135deg, ${palette.main}, ${palette.dark})`,\n        border: 'none',\n      }),\n  };\n};\n\nexport const segmentContainerSx = (\n  theme: Theme,\n  glass?: boolean,\n  customColor = 'primary',\n): CSSObject => {\n  const palette = getColorFromTheme(theme, customColor);\n\n  return {\n    padding: segmentTrackPadding(theme),\n    // Concentric with the segments inside it, which take the field radius.\n    borderRadius: fieldRadius(theme) + remPx(theme, 4) + FIELD_BORDER_WIDTH,\n    backgroundColor: glass\n      ? alpha(theme.palette.background.paper, 0.1)\n      : alpha(palette.main, 0.05),\n    backdropFilter: glass ? `blur(${rem(theme, 20)})` : 'none',\n    border: `${FIELD_BORDER_WIDTH}px solid ${alpha(theme.palette.divider, 0.2)}`,\n    display: 'flex',\n    gap: rem(theme, 2),\n  };\n};\n\n/**\n * An underline that grows from the centre outwards, and is already full width\n * when the segment is the selected one.\n */\nconst segmentUnderline = (theme: Theme, color: string, selected: boolean): CSSObject => ({\n  content: '\"\"',\n  position: 'absolute',\n  bottom: 0,\n  left: selected ? 0 : '50%',\n  width: selected ? '100%' : 0,\n  height: rem(theme, 2),\n  backgroundColor: color,\n  transition: 'all 0.3s ease',\n  transform: selected ? 'translateX(0)' : 'translateX(-50%)',\n});\n\nexport const segmentButtonSx = (theme: Theme, flags: SurfaceFlags): CSSObject => {\n  const { selected, customColor = 'primary', customSize = 'md', animated } = flags;\n  const palette = getColorFromTheme(theme, customColor);\n\n  return {\n    flex: 1,\n    borderRadius: fieldRadius(theme),\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    fontWeight: 500,\n    backgroundColor: selected ? theme.palette.background.paper : 'transparent',\n    color: selected ? palette.main : theme.palette.text.secondary,\n    boxShadow: selected\n      ? `${theme.shadows[2]}, inset 0 ${rems(theme, 1, 3)} ${alpha(palette.main, 0.1)}`\n      : 'none',\n    position: 'relative' as const,\n    overflow: 'hidden' as const,\n    ...(animated && selected && { animation: `${scaleAnimation} 0.3s ease-out` }),\n    '&::before': segmentUnderline(theme, palette.main, Boolean(selected)),\n    '&:hover': {\n      backgroundColor: selected\n        ? theme.palette.background.paper\n        : alpha(theme.palette.action.hover, 0.08),\n      color: palette.main,\n      '&::before': { width: '100%', left: 0, transform: 'translateX(0)' },\n    },\n    '&:active': { transform: 'scale(0.98)' },\n    ...pickSize(SEGMENT_SIZES, customSize)(theme),\n    // Each segment is a field; the track around it adds its own inset.\n    minHeight: fieldHeight(theme, asFieldSize(customSize)),\n    paddingTop: 0,\n    paddingBottom: 0,\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-G4HBNILE.js

@@ -0,0 +1,120 @@
+import {
+  DataGridEmpty,
+  DataGridError,
+  DataGridLoading
+} from "./chunk-EARWC6PD.js";
+import {
+  useDataGridModel
+} from "./chunk-DLJGBJZW.js";
+import {
+  GridBody,
+  GridHeader
+} from "./chunk-HTZNB6IV.js";
+
+// src/components/data-display/DataGrid/DataGrid.tsx
+import Paper from "@mui/material/Paper/index.js";
+import Table from "@mui/material/Table/index.js";
+import TableContainer from "@mui/material/TableContainer/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function resolveChrome(props) {
+  const { className, style, "data-testid": dataTestId, ...rest } = props;
+  const stickyHeader = props.stickyHeader ?? true;
+  return {
+    dataAttrs: {
+      "data-ui": "datagrid",
+      "data-density": props.density ?? "comfortable",
+      "data-size-mode": props.sizeMode ?? "auto",
+      "data-virtual-rows": props.virtualizeRows ?? true,
+      "data-virtual-cols": props.virtualizeColumns ?? false,
+      "data-sticky-header": stickyHeader
+    },
+    placeholder: {
+      dataTestId,
+      ariaLabel: props.ariaLabel ?? "Data grid",
+      className,
+      style,
+      // Only the DOM-safe leftovers reach the element: every grid-specific prop
+      // is named in `GRID_ONLY_PROPS`, so this cannot smuggle `rows` onto a div.
+      htmlProps: omitGridProps(rest)
+    }
+  };
+}
+var DataGrid = (props) => {
+  const model = useDataGridModel(props);
+  const { dataAttrs, placeholder } = resolveChrome(props);
+  if (props.loading) return /* @__PURE__ */ jsx(DataGridLoading, { ...placeholder });
+  if (props.error) return /* @__PURE__ */ jsx(DataGridError, { ...placeholder, error: props.error });
+  if (model.processedRows.length === 0) {
+    return /* @__PURE__ */ jsx(DataGridEmpty, { ...placeholder, emptyState: props.emptyState, emptyText: props.emptyText });
+  }
+  const leadingColumns = (props.selection?.mode ?? "none") !== "none" ? 1 : 0;
+  const totalColumns = model.visibleColumns.length + leadingColumns + (props.expansion ? 1 : 0);
+  const section = { model, props, totalColumns };
+  return /* @__PURE__ */ jsx(
+    Paper,
+    {
+      ref: model.containerRef,
+      ...dataAttrs,
+      "data-testid": placeholder.dataTestId,
+      className: placeholder.className,
+      style: placeholder.style,
+      role: "grid",
+      "aria-label": placeholder.ariaLabel,
+      "aria-description": props.ariaDescription,
+      "aria-rowcount": model.processedRows.length + 1,
+      "aria-colcount": totalColumns,
+      sx: { height: "100%", overflow: "hidden", display: "flex", flexDirection: "column" },
+      ...placeholder.htmlProps,
+      children: /* @__PURE__ */ jsx(
+        TableContainer,
+        {
+          sx: { flex: 1, overflow: "auto", position: "relative" },
+          onScroll: model.onScroll,
+          children: /* @__PURE__ */ jsxs(Table, { stickyHeader: props.stickyHeader ?? true, children: [
+            /* @__PURE__ */ jsx(GridHeader, { ...section }),
+            /* @__PURE__ */ jsx(GridBody, { ...section })
+          ] })
+        }
+      )
+    }
+  );
+};
+var GRID_ONLY_PROPS = [
+  "rows",
+  "columns",
+  "getRowId",
+  "sizeMode",
+  "density",
+  "rowHeight",
+  "headerHeight",
+  "footerHeight",
+  "selection",
+  "pagination",
+  "sorting",
+  "filtering",
+  "expansion",
+  "editing",
+  "virtualizeRows",
+  "virtualizeColumns",
+  "stickyHeader",
+  "stickyFooter",
+  "loading",
+  "error",
+  "emptyState",
+  "emptyText",
+  "onRequestData",
+  "ariaLabel",
+  "ariaDescription"
+];
+function omitGridProps(rest) {
+  const html = { ...rest };
+  for (const key of GRID_ONLY_PROPS) delete html[key];
+  return html;
+}
+DataGrid.displayName = "DataGrid";
+
+export {
+  DataGrid,
+  GRID_ONLY_PROPS
+};
+//# sourceMappingURL=chunk-G4HBNILE.js.map

package/dist/chunk-GHTBUJ6E.js

@@ -0,0 +1,208 @@
+import {
+  Skeleton
+} from "./chunk-7F7TTOYN.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/StatCard/StatCard.tsx
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import RemoveIcon from "@mui/icons-material/Remove";
+import Box from "@mui/material/Box/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DIRECTION_ICON = {
+  up: ArrowUpwardIcon,
+  down: ArrowDownwardIcon,
+  neutral: RemoveIcon
+};
+var DIRECTION_WORD = {
+  up: "Increase of",
+  down: "Decrease of",
+  neutral: "Change of"
+};
+var IMPLIED_TONE = {
+  up: "positive",
+  down: "negative",
+  neutral: "neutral"
+};
+function toneColor(tone, theme) {
+  if (tone === "positive") return theme.palette.success.main;
+  if (tone === "negative") return theme.palette.error.main;
+  return theme.palette.text.secondary;
+}
+function deltaAriaLabel(delta) {
+  if (delta.ariaLabel) return delta.ariaLabel;
+  const suffix = delta.label ? ` ${delta.label}` : "";
+  return `${DIRECTION_WORD[delta.direction]} ${delta.value}${suffix}`;
+}
+function DeltaRow({ delta, testId }) {
+  const theme = useTheme();
+  const tone = delta.tone ?? IMPLIED_TONE[delta.direction];
+  const Icon = DIRECTION_ICON[delta.direction];
+  const color = toneColor(tone, theme);
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "row",
+      spacing: 0.5,
+      sx: { alignItems: "center", flexWrap: "wrap" },
+      "data-testid": testId,
+      "data-direction": delta.direction,
+      "data-tone": tone,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", sx: { fontSize: sxRem(16), color } }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body2",
+            component: "span",
+            "aria-label": deltaAriaLabel(delta),
+            sx: { color, fontWeight: theme.typography.fontWeightMedium },
+            children: delta.value
+          }
+        ),
+        delta.label && /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "span", sx: { color: theme.palette.text.secondary }, children: delta.label })
+      ]
+    }
+  );
+}
+function LabelRow({
+  label,
+  icon,
+  labelId,
+  testId
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
+    icon && /* @__PURE__ */ jsx(
+      Box,
+      {
+        "aria-hidden": "true",
+        "data-testid": `${testId}-icon`,
+        sx: { display: "flex", color: theme.palette.text.secondary },
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        id: labelId,
+        variant: "caption",
+        component: "p",
+        "data-testid": `${testId}-label`,
+        sx: { color: theme.palette.text.secondary },
+        children: label
+      }
+    )
+  ] });
+}
+function ValueRow({
+  value,
+  loading,
+  testId
+}) {
+  const theme = useTheme();
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rectangular",
+        height: rem(theme, 28),
+        width: "60%",
+        borderRadius: 4,
+        "data-testid": `${testId}-value-skeleton`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "h6",
+      component: "p",
+      "data-testid": `${testId}-value`,
+      sx: {
+        fontWeight: theme.typography.fontWeightMedium,
+        color: theme.palette.text.primary,
+        overflowWrap: "anywhere"
+      },
+      children: value
+    }
+  );
+}
+function DeltaSlot({
+  delta,
+  loading,
+  testId
+}) {
+  const theme = useTheme();
+  if (!delta) return null;
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rectangular",
+        height: rem(theme, 16),
+        width: "40%",
+        borderRadius: 4,
+        "data-testid": `${testId}-delta-skeleton`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(DeltaRow, { delta, testId: `${testId}-delta` });
+}
+var StatCard = React.memo(
+  ({ label, value, delta, icon, hint, loading = false, className, dataTestId }) => {
+    const theme = useTheme();
+    const labelId = React.useId();
+    const testId = dataTestId || "stat-card";
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        role: "group",
+        "aria-labelledby": labelId,
+        "aria-busy": loading || void 0,
+        className,
+        "data-testid": testId,
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: theme.spacing(0.5),
+          padding: theme.spacing(2),
+          borderRadius: theme.shape.borderRadius / 4,
+          border: `1px solid ${theme.palette.divider}`,
+          backgroundColor: theme.palette.background.paper,
+          minWidth: 0
+        },
+        children: [
+          /* @__PURE__ */ jsx(LabelRow, { label, icon, labelId, testId }),
+          /* @__PURE__ */ jsx(ValueRow, { value, loading, testId }),
+          /* @__PURE__ */ jsx(DeltaSlot, { delta, loading, testId }),
+          hint && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              component: "p",
+              "data-testid": `${testId}-hint`,
+              sx: { color: theme.palette.text.secondary },
+              children: hint
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+StatCard.displayName = "StatCard";
+var StatCard_default = StatCard;
+
+export {
+  StatCard,
+  StatCard_default
+};
+//# sourceMappingURL=chunk-GHTBUJ6E.js.map

package/dist/chunk-GHTBUJ6E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/StatCard/StatCard.tsx"],"sourcesContent":["import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';\nimport ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';\nimport RemoveIcon from '@mui/icons-material/Remove';\nimport Box from '@mui/material/Box/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { Skeleton } from '../../layout/Skeleton/Skeleton';\n\nimport type {\n  StatCardDelta,\n  StatCardDeltaDirection,\n  StatCardDeltaTone,\n  StatCardProps,\n} from './StatCard.types';\nimport { rem, sxRem } from '../../../tokens/relative';\n\n/** The arrow each direction renders (decorative — the text carries the meaning). */\nconst DIRECTION_ICON: Record<StatCardDeltaDirection, typeof ArrowUpwardIcon> = {\n  up: ArrowUpwardIcon,\n  down: ArrowDownwardIcon,\n  neutral: RemoveIcon,\n};\n\n/** How each direction reads to a screen reader when no `ariaLabel` is given. */\nconst DIRECTION_WORD: Record<StatCardDeltaDirection, string> = {\n  up: 'Increase of',\n  down: 'Decrease of',\n  neutral: 'Change of',\n};\n\n/** A direction's natural tone, used when the caller doesn't override it. */\nconst IMPLIED_TONE: Record<StatCardDeltaDirection, StatCardDeltaTone> = {\n  up: 'positive',\n  down: 'negative',\n  neutral: 'neutral',\n};\n\n/** Resolve a tone to its semantic palette colour (never a hardcoded hex). */\nfunction toneColor(tone: StatCardDeltaTone, theme: Theme): string {\n  if (tone === 'positive') return theme.palette.success.main;\n  if (tone === 'negative') return theme.palette.error.main;\n  return theme.palette.text.secondary;\n}\n\n/** The screen-reader sentence for a delta: caller override, else generated. */\nfunction deltaAriaLabel(delta: StatCardDelta): string {\n  if (delta.ariaLabel) return delta.ariaLabel;\n  const suffix = delta.label ? ` ${delta.label}` : '';\n  return `${DIRECTION_WORD[delta.direction]} ${delta.value}${suffix}`;\n}\n\n/** The delta row: a decorative arrow plus the pre-formatted change and context. */\nfunction DeltaRow({ delta, testId }: { delta: StatCardDelta; testId: string }): React.JSX.Element {\n  const theme = useTheme();\n  const tone = delta.tone ?? IMPLIED_TONE[delta.direction];\n  const Icon = DIRECTION_ICON[delta.direction];\n  const color = toneColor(tone, theme);\n\n  return (\n    <Stack\n      direction=\"row\"\n      spacing={0.5}\n      sx={{ alignItems: 'center', flexWrap: 'wrap' }}\n      data-testid={testId}\n      data-direction={delta.direction}\n      data-tone={tone}\n    >\n      {/* The arrow duplicates what the aria-label already says, so it is hidden\n          from assistive tech rather than read twice. */}\n      <Icon aria-hidden=\"true\" sx={{ fontSize: sxRem(16), color }} />\n      <Typography\n        variant=\"body2\"\n        component=\"span\"\n        aria-label={deltaAriaLabel(delta)}\n        sx={{ color, fontWeight: theme.typography.fontWeightMedium }}\n      >\n        {delta.value}\n      </Typography>\n      {delta.label && (\n        <Typography variant=\"caption\" component=\"span\" sx={{ color: theme.palette.text.secondary }}>\n          {delta.label}\n        </Typography>\n      )}\n    </Stack>\n  );\n}\n\n/** The label row: the optional decorative icon plus the metric's name. */\nfunction LabelRow({\n  label,\n  icon,\n  labelId,\n  testId,\n}: Pick<StatCardProps, 'label' | 'icon'> & {\n  labelId: string;\n  testId: string;\n}): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Stack direction=\"row\" spacing={1} sx={{ alignItems: 'center' }}>\n      {icon && (\n        <Box\n          aria-hidden=\"true\"\n          data-testid={`${testId}-icon`}\n          sx={{ display: 'flex', color: theme.palette.text.secondary }}\n        >\n          {icon}\n        </Box>\n      )}\n      <Typography\n        id={labelId}\n        variant=\"caption\"\n        component=\"p\"\n        data-testid={`${testId}-label`}\n        sx={{ color: theme.palette.text.secondary }}\n      >\n        {label}\n      </Typography>\n    </Stack>\n  );\n}\n\n/** The figure itself, or its skeleton while the tile is loading. */\nfunction ValueRow({\n  value,\n  loading,\n  testId,\n}: Pick<StatCardProps, 'value' | 'loading'> & { testId: string }): React.JSX.Element {\n  const theme = useTheme();\n  if (loading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        height={rem(theme, 28)}\n        width=\"60%\"\n        borderRadius={4}\n        data-testid={`${testId}-value-skeleton`}\n      />\n    );\n  }\n  return (\n    <Typography\n      variant=\"h6\"\n      component=\"p\"\n      data-testid={`${testId}-value`}\n      sx={{\n        fontWeight: theme.typography.fontWeightMedium,\n        color: theme.palette.text.primary,\n        overflowWrap: 'anywhere',\n      }}\n    >\n      {value}\n    </Typography>\n  );\n}\n\n/** The delta slot: its skeleton while loading, the row once resolved, else nothing. */\nfunction DeltaSlot({\n  delta,\n  loading,\n  testId,\n}: {\n  delta?: StatCardDelta;\n  loading: boolean;\n  testId: string;\n}): React.JSX.Element | null {\n  const theme = useTheme();\n  if (!delta) return null;\n  if (loading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        height={rem(theme, 16)}\n        width=\"40%\"\n        borderRadius={4}\n        data-testid={`${testId}-delta-skeleton`}\n      />\n    );\n  }\n  return <DeltaRow delta={delta} testId={`${testId}-delta`} />;\n}\n\n/**\n * StatCard (KPI tile) — one labelled figure with an optional period-over-period\n * delta, leading icon, hint line and loading state. The single shared tile for\n * dashboards and summary bands, so surfaces stop hand-rolling the pattern.\n *\n * The tile is presentation only: `value` and `delta.value` arrive ALREADY\n * formatted, so locale/currency rules stay with the data owner. Colour comes\n * from the MUI palette (`success` / `error` / `text.secondary`), and the delta's\n * meaning is separable from its arrow via {@link StatCardDelta.tone} — a rise in\n * cost can render \"up\" while reading as negative.\n */\nexport const StatCard: React.FC<StatCardProps> = React.memo(\n  ({ label, value, delta, icon, hint, loading = false, className, dataTestId }) => {\n    const theme = useTheme();\n    const labelId = React.useId();\n    const testId = dataTestId || 'stat-card';\n\n    return (\n      <Box\n        role=\"group\"\n        aria-labelledby={labelId}\n        aria-busy={loading || undefined}\n        className={className}\n        data-testid={testId}\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: theme.spacing(0.5),\n          padding: theme.spacing(2),\n          borderRadius: theme.shape.borderRadius / 4,\n          border: `1px solid ${theme.palette.divider}`,\n          backgroundColor: theme.palette.background.paper,\n          minWidth: 0,\n        }}\n      >\n        <LabelRow label={label} icon={icon} labelId={labelId} testId={testId} />\n        <ValueRow value={value} loading={loading} testId={testId} />\n        <DeltaSlot delta={delta} loading={loading} testId={testId} />\n        {hint && (\n          <Typography\n            variant=\"caption\"\n            component=\"p\"\n            data-testid={`${testId}-hint`}\n            sx={{ color: theme.palette.text.secondary }}\n          >\n            {hint}\n          </Typography>\n        )}\n      </Box>\n    );\n  },\n);\n\nStatCard.displayName = 'StatCard';\n\nexport default StatCard;\n"],"mappings":"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","names":[]}