@12-apps/ui 6.34.0 → 6.36.0

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-GE2EKMDT.js

@@ -0,0 +1,90 @@
+import {
+  asFieldSize,
+  fieldHeight
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadius
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+import {
+  absoluteInk,
+  controlNeutral
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/InputOTP/InputOTP.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+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 SIZES = {
+  xs: { fontPx: 12 },
+  sm: { fontPx: 14 },
+  md: { fontPx: 16 },
+  lg: { fontPx: 18 },
+  xl: { fontPx: 20 }
+};
+var otpSlotSx = (theme, flags) => {
+  const { customColor = "primary", customSize = "md", glass, gradient } = flags;
+  const palette = getColorFromTheme(theme, customColor);
+  const { fontPx } = SIZES[customSize] ?? SIZES.md;
+  const side = fieldHeight(theme, asFieldSize(customSize));
+  return {
+    width: side,
+    height: side,
+    "& .MuiOutlinedInput-root": {
+      width: side,
+      height: side,
+      fontSize: rem(theme, fontPx),
+      fontWeight: 600,
+      textAlign: "center",
+      borderRadius: fieldRadius(theme),
+      ...glass && {
+        backgroundColor: alpha(theme.palette.background.paper, 0.1),
+        backdropFilter: "blur(20px)",
+        "& fieldset": { border: `1px solid ${fieldEdge(theme)}` }
+      },
+      ...gradient && {
+        "&.Mui-focused fieldset": {
+          background: `linear-gradient(135deg, ${palette.main}, ${palette.light})`,
+          borderWidth: "2px"
+        }
+      },
+      "& input": { textAlign: "center", padding: 0, fontWeight: "inherit" },
+      ...!glass && { "& fieldset": { borderColor: fieldEdge(theme) } },
+      "&:hover fieldset": { borderColor: palette.main },
+      "&.Mui-focused fieldset": { borderColor: palette.main, borderWidth: "2px" }
+    }
+  };
+};
+
+export {
+  otpSlotSx
+};
+//# sourceMappingURL=chunk-GE2EKMDT.js.map

package/dist/chunk-GE2EKMDT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/InputOTP/InputOTP.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { asFieldSize, fieldHeight } from '../../../tokens/field-height';\nimport { absoluteInk, controlNeutral } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\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 built from the grey ramp. */\nconst neutralPalette = (theme: Theme): ColorPalette => controlNeutral(theme);\n\n/** `danger` is this component's name for the error palette. */\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\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  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\n/** Each slot's type, in design px. Its side is the theme's field height for the size (a square). */\nconst SIZES: Record<SizeKey, { fontPx: number }> = {\n  xs: { fontPx: 12 },\n  sm: { fontPx: 14 },\n  md: { fontPx: 16 },\n  lg: { fontPx: 18 },\n  xl: { fontPx: 20 },\n};\n\nexport interface OtpSlotFlags {\n  customColor?: string;\n  customSize?: string;\n  glass?: boolean;\n  gradient?: boolean;\n}\n\nexport const otpSlotSx = (theme: Theme, flags: OtpSlotFlags): CSSObject => {\n  const { customColor = 'primary', customSize = 'md', glass, gradient } = flags;\n  const palette = getColorFromTheme(theme, customColor);\n  const { fontPx } = SIZES[customSize as SizeKey] ?? SIZES.md;\n  // A slot is a field: a square of the theme's field height for its size.\n  const side = fieldHeight(theme, asFieldSize(customSize));\n\n  return {\n    width: side,\n    height: side,\n    '& .MuiOutlinedInput-root': {\n      width: side,\n      height: side,\n      fontSize: rem(theme, fontPx),\n      fontWeight: 600,\n      textAlign: 'center',\n      borderRadius: fieldRadius(theme),\n      ...(glass && {\n        backgroundColor: alpha(theme.palette.background.paper, 0.1),\n        backdropFilter: 'blur(20px)',\n        '& fieldset': { border: `1px solid ${fieldEdge(theme)}` },\n      }),\n      ...(gradient && {\n        '&.Mui-focused fieldset': {\n          background: `linear-gradient(135deg, ${palette.main}, ${palette.light})`,\n          borderWidth: '2px',\n        },\n      }),\n      '& input': { textAlign: 'center', padding: 0, fontWeight: 'inherit' },\n      ...(!glass && { '& fieldset': { borderColor: fieldEdge(theme) } }),\n      '&:hover fieldset': { borderColor: palette.main },\n      '&.Mui-focused fieldset': { borderColor: palette.main, borderWidth: '2px' },\n    },\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,SAAS,aAAa;AAiBtB,IAAM,iBAAiB,CAAC,UAA+B,eAAe,KAAK;AAG3E,IAAM,eAAe,CAAC,OAAc,UAAgC;AAClE,QAAM,WAAyC;AAAA,IAC7C,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,SAAO,SAAS,KAAK,KAAK,MAAM,QAAQ;AAC1C;AAEA,IAAM,oBAAoB,CAAC,OAAc,UAAgC;AACvE,MAAI,UAAU,WAAW;AACvB,WAAO,eAAe,KAAK;AAAA,EAC7B;AAEA,QAAM,UAAU,aAAa,OAAO,KAAK;AACzC,QAAM,EAAE,QAAQ,IAAI,MAAM;AAE1B,SAAO;AAAA,IACL,MAAM,QAAQ,QAAQ,QAAQ;AAAA,IAC9B,MAAM,QAAQ,QAAQ,QAAQ,QAAQ,QAAQ;AAAA,IAC9C,OAAO,QAAQ,SAAS,QAAQ,QAAQ,QAAQ;AAAA,IAChD,cAAc,QAAQ,gBAAgB,YAAY,KAAK,EAAE;AAAA,EAC3D;AACF;AAKA,IAAM,QAA6C;AAAA,EACjD,IAAI,EAAE,QAAQ,GAAG;AAAA,EACjB,IAAI,EAAE,QAAQ,GAAG;AAAA,EACjB,IAAI,EAAE,QAAQ,GAAG;AAAA,EACjB,IAAI,EAAE,QAAQ,GAAG;AAAA,EACjB,IAAI,EAAE,QAAQ,GAAG;AACnB;AASO,IAAM,YAAY,CAAC,OAAc,UAAmC;AACzE,QAAM,EAAE,cAAc,WAAW,aAAa,MAAM,OAAO,SAAS,IAAI;AACxE,QAAM,UAAU,kBAAkB,OAAO,WAAW;AACpD,QAAM,EAAE,OAAO,IAAI,MAAM,UAAqB,KAAK,MAAM;AAEzD,QAAM,OAAO,YAAY,OAAO,YAAY,UAAU,CAAC;AAEvD,SAAO;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,4BAA4B;AAAA,MAC1B,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU,IAAI,OAAO,MAAM;AAAA,MAC3B,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,cAAc,YAAY,KAAK;AAAA,MAC/B,GAAI,SAAS;AAAA,QACX,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,QAC1D,gBAAgB;AAAA,QAChB,cAAc,EAAE,QAAQ,aAAa,UAAU,KAAK,CAAC,GAAG;AAAA,MAC1D;AAAA,MACA,GAAI,YAAY;AAAA,QACd,0BAA0B;AAAA,UACxB,YAAY,2BAA2B,QAAQ,IAAI,KAAK,QAAQ,KAAK;AAAA,UACrE,aAAa;AAAA,QACf;AAAA,MACF;AAAA,MACA,WAAW,EAAE,WAAW,UAAU,SAAS,GAAG,YAAY,UAAU;AAAA,MACpE,GAAI,CAAC,SAAS,EAAE,cAAc,EAAE,aAAa,UAAU,KAAK,EAAE,EAAE;AAAA,MAChE,oBAAoB,EAAE,aAAa,QAAQ,KAAK;AAAA,MAChD,0BAA0B,EAAE,aAAa,QAAQ,MAAM,aAAa,MAAM;AAAA,IAC5E;AAAA,EACF;AACF;","names":[]}

package/dist/chunk-GEXM6DNR.js

@@ -0,0 +1,76 @@
+import {
+  UploadDropzone,
+  UploadFeedback,
+  UploadTrigger
+} from "./chunk-U4H6MGVE.js";
+import {
+  useUploadButton
+} from "./chunk-QWVETTIY.js";
+
+// src/components/form/UploadButton/UploadButton.tsx
+import Box from "@mui/material/Box/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var UploadButton = React.forwardRef((props, ref) => {
+  const {
+    copy,
+    variant = "default",
+    label = props.copy.buttonLabel,
+    disabled = false,
+    multiple = false,
+    accept,
+    capture,
+    helperText,
+    icon,
+    className,
+    "data-testid": dataTestId
+  } = props;
+  const { inputRef, inputId, state, drag, derived, openPicker, handleInputChange } = useUploadButton(props);
+  const trigger = {
+    copy,
+    label,
+    icon,
+    disabled,
+    className,
+    dataTestId,
+    describedBy: derived.describedBy,
+    onOpen: openPicker
+  };
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: ref || inputRef,
+        id: inputId,
+        type: "file",
+        accept,
+        multiple,
+        capture,
+        onChange: handleInputChange,
+        style: { display: "none" },
+        disabled,
+        "aria-hidden": "true"
+      }
+    ),
+    variant === "dropzone" ? /* @__PURE__ */ jsx(UploadDropzone, { ...trigger, isDragOver: state.isDragOver, drag }) : /* @__PURE__ */ jsx(UploadTrigger, { ...trigger, variant, isUploading: derived.isUploading }),
+    /* @__PURE__ */ jsx(
+      UploadFeedback,
+      {
+        copy,
+        isUploading: derived.isUploading,
+        progress: derived.progress,
+        helperText,
+        helperId: derived.helperId,
+        error: derived.error,
+        errorId: derived.errorId,
+        announceDragOver: variant === "dropzone" && state.isDragOver
+      }
+    )
+  ] });
+});
+UploadButton.displayName = "UploadButton";
+
+export {
+  UploadButton
+};
+//# sourceMappingURL=chunk-GEXM6DNR.js.map

package/dist/chunk-GGWICBJD.js

@@ -0,0 +1,58 @@
+import {
+  FormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  Form
+} from "./chunk-2HVNPWFV.js";
+
+// src/components/form/total-form/FormContainer.tsx
+import { validateFields } from "@12-apps/forms-core";
+import { useCallback, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+function FormContainer({
+  initialValues,
+  schema,
+  onSubmit,
+  children,
+  dataTestId = "total-form"
+}) {
+  const [values, setValues] = useState(initialValues);
+  const [errors, setErrors] = useState({});
+  const [submitting, setSubmitting] = useState(false);
+  const setFieldValue = useCallback((name, value) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+    setErrors((prev) => {
+      if (!prev[name]) return prev;
+      const next = { ...prev };
+      delete next[name];
+      return next;
+    });
+  }, []);
+  const handleSubmit = useCallback(
+    async (event) => {
+      event.preventDefault();
+      const nextErrors = schema ? validateFields(values, schema) : {};
+      setErrors(nextErrors);
+      if (Object.values(nextErrors).some(Boolean)) return;
+      setSubmitting(true);
+      try {
+        await onSubmit(values, {
+          setFieldErrors: (fieldErrors) => setErrors(fieldErrors)
+        });
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [onSubmit, schema, values]
+  );
+  const contextValue = useMemo(
+    () => ({ values, errors, submitting, setFieldValue }),
+    [errors, setFieldValue, submitting, values]
+  );
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Form, { dataTestId, onSubmit: handleSubmit, noValidate: true, children }) });
+}
+
+export {
+  FormContainer
+};
+//# sourceMappingURL=chunk-GGWICBJD.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":[]}

package/dist/chunk-GJRKWDRR.js

@@ -0,0 +1,89 @@
+import {
+  CHIP_SIZES,
+  CHIP_TRANSITION_EASING,
+  CHIP_TRANSITION_MS,
+  HOVER_LIFT_PX,
+  HOVER_SHADOW
+} from "./chunk-KU6VHNRV.js";
+import {
+  chipKeyAction
+} from "./chunk-BF4FYOAR.js";
+import {
+  shadowInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Chip/Chip.styles.tsx
+import Avatar from "@mui/material/Avatar/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var makeKeyDownHandler = (args) => (event) => {
+  const action = chipKeyAction(event.key, args);
+  if (action === null) return;
+  event.preventDefault();
+  if (action === "delete") {
+    args.onDelete?.();
+    return;
+  }
+  args.onClick?.();
+};
+var avatarFor = (avatar, avatarSrc) => {
+  if (avatar && React.isValidElement(avatar)) {
+    return avatar;
+  }
+  if (avatarSrc) {
+    const { avatarSize } = CHIP_SIZES.medium;
+    return /* @__PURE__ */ jsx(Avatar, { src: avatarSrc, sx: { width: sxRem(avatarSize), height: sxRem(avatarSize) } });
+  }
+  return void 0;
+};
+var hoverShadow = (theme) => `0 ${rems(theme, HOVER_SHADOW.offsetY, HOVER_SHADOW.blur)} ${shadowInk(
+  theme,
+  theme.palette.mode === "dark" ? HOVER_SHADOW.alphaDark : HOVER_SHADOW.alphaLight
+)}`;
+var chipStyles = ({
+  variant,
+  selected,
+  clickable,
+  disabled
+}) => {
+  const lifts = clickable && !disabled;
+  return {
+    // Enhanced styling for outlined variant
+    ...variant === "outlined" && {
+      borderWidth: "1px",
+      borderStyle: "solid",
+      backgroundColor: "transparent"
+    },
+    ...selected && variant === "outlined" && {
+      backgroundColor: (theme) => theme.palette.action.selected
+    },
+    "&:hover": {
+      ...lifts && {
+        transform: (theme) => `translateY(${rem(theme, -HOVER_LIFT_PX)})`,
+        boxShadow: (theme) => hoverShadow(theme)
+      }
+    },
+    "&:active": {
+      ...lifts && {
+        transform: "translateY(0px)"
+      }
+    },
+    transition: `all ${CHIP_TRANSITION_MS / 1e3}s ${CHIP_TRANSITION_EASING}`
+  };
+};
+var iconWithTestId = (icon, testId) => icon && React.isValidElement(icon) ? React.cloneElement(icon, {
+  "data-testid": testId
+}) : void 0;
+
+export {
+  makeKeyDownHandler,
+  avatarFor,
+  chipStyles,
+  iconWithTestId
+};
+//# sourceMappingURL=chunk-GJRKWDRR.js.map