@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-VURQZBFH.js

@@ -0,0 +1,125 @@
+import {
+  TextFieldSlim
+} from "./chunk-SL6454K7.js";
+import {
+  filledStyles,
+  floatingLabelStyles,
+  glowStyles,
+  inputBaseStyles,
+  inputRadiusStyles,
+  outlinedStyles,
+  pulseStyles
+} from "./chunk-THMT3G3L.js";
+import {
+  INPUT_LOADING,
+  SIZE_MAP,
+  muiVariantFor
+} from "./chunk-RNIU447I.js";
+import {
+  splitTestId
+} from "./chunk-TYJR4GOF.js";
+import {
+  fieldControlStyles
+} from "./chunk-CGO452DC.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Input/Input.tsx
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import InputAdornment from "@mui/material/InputAdornment/index.js";
+import { styled, useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var StyledTextField = styled(TextFieldSlim, {
+  shouldForwardProp: (prop) => !["customVariant", "fieldSize", "floating", "glow", "pulse", "loading"].includes(prop)
+})(({ theme, customVariant, fieldSize, floating, glow, pulse, loading }) => ({
+  position: "relative",
+  // The theme's field height for this size (outlined family, one line).
+  ...fieldControlStyles(theme, fieldSize),
+  opacity: loading ? INPUT_LOADING.opacity : 1,
+  ...glow ? glowStyles(theme) : {},
+  ...pulse ? pulseStyles(theme, fieldSize) : {},
+  ...floating ? floatingLabelStyles(theme) : {},
+  "& .MuiInputBase-root": {
+    transition: "all 0.3s ease",
+    ...inputRadiusStyles(theme, customVariant),
+    ...inputBaseStyles(theme, customVariant)
+  },
+  "& .MuiOutlinedInput-root": outlinedStyles(theme),
+  "& .MuiFilledInput-root": filledStyles(theme)
+}));
+var EndAdornment = ({
+  loading,
+  endAdornment
+}) => {
+  const theme = useTheme();
+  if (loading) {
+    return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(CircularProgress, { size: rem(theme, INPUT_LOADING.spinnerSize) }) });
+  }
+  if (!endAdornment) return null;
+  return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: endAdornment });
+};
+var interactionProps = (loading, onClick, disabled) => ({
+  disabled: loading || disabled,
+  onClick: loading ? void 0 : onClick
+});
+var Input = React.forwardRef(
+  ({
+    variant = "outlined",
+    size = "md",
+    label,
+    error,
+    helperText,
+    startAdornment,
+    endAdornment,
+    fullWidth = true,
+    floating = false,
+    glow = false,
+    pulse = false,
+    loading = false,
+    onClick,
+    onFocus,
+    onBlur,
+    "aria-label": ariaLabel,
+    ...rest
+  }, ref) => {
+    const { testId: dataTestId, rest: props } = splitTestId(rest);
+    return /* @__PURE__ */ jsx(
+      StyledTextField,
+      {
+        ref,
+        variant: muiVariantFor(variant),
+        customVariant: variant,
+        fieldSize: size,
+        floating,
+        glow,
+        pulse,
+        loading,
+        label,
+        error,
+        helperText,
+        fullWidth,
+        ...interactionProps(loading, onClick, props.disabled),
+        onFocus,
+        onBlur,
+        inputProps: {
+          "data-testid": dataTestId,
+          ...ariaLabel === void 0 ? {} : { "aria-label": ariaLabel }
+        },
+        InputProps: {
+          startAdornment: startAdornment && /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: startAdornment }),
+          endAdornment: /* @__PURE__ */ jsx(EndAdornment, { loading, endAdornment })
+        },
+        ...SIZE_MAP[size],
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+export {
+  Input
+};
+//# sourceMappingURL=chunk-VURQZBFH.js.map

package/dist/chunk-VURQZBFH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Input/Input.tsx"],"sourcesContent":["import CircularProgress from '@mui/material/CircularProgress/index.js';\nimport InputAdornment from '@mui/material/InputAdornment/index.js';\nimport { styled, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { INPUT_LOADING } from './Input.metrics';\nimport { TextFieldSlim } from './text-field-slim';\n\nimport {\n  filledStyles,\n  floatingLabelStyles,\n  glowStyles,\n  inputBaseStyles,\n  inputRadiusStyles,\n  muiVariantFor,\n  outlinedStyles,\n  pulseStyles,\n  SIZE_MAP,\n} from './Input.styles';\nimport type { InputProps } from './Input.types';\nimport { splitTestId } from '../../../platform/test-id';\nimport { fieldControlStyles } from '../../../tokens/field-height';\nimport { rem } from '../../../tokens/relative';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\n/**\n * `TextFieldSlim`, not `TextField` — see `text-field-slim.tsx`. MUI's own\n * `TextField` imports `Select` unconditionally, and through it `Menu`,\n * `Popover`, `Modal` and seven more component modules, so every screen with one\n * text box shipped a dropdown it can never render. Same composition, same DOM,\n * same prop routing; the select branch is the only thing missing.\n */\nconst StyledTextField = styled(TextFieldSlim, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'fieldSize', 'floating', 'glow', 'pulse', 'loading'].includes(prop as string),\n})<{\n  customVariant?: InputProps['variant'];\n  fieldSize: SizeValue;\n  floating?: boolean;\n  glow?: boolean;\n  pulse?: boolean;\n  loading?: boolean;\n}>(({ theme, customVariant, fieldSize, floating, glow, pulse, loading }) => ({\n  position: 'relative',\n  // The theme's field height for this size (outlined family, one line).\n  ...fieldControlStyles(theme, fieldSize),\n  opacity: loading ? INPUT_LOADING.opacity : 1,\n\n  ...(glow ? glowStyles(theme) : {}),\n  ...(pulse ? pulseStyles(theme, fieldSize) : {}),\n  ...(floating ? floatingLabelStyles(theme) : {}),\n\n  '& .MuiInputBase-root': {\n    transition: 'all 0.3s ease',\n    ...inputRadiusStyles(theme, customVariant),\n    ...inputBaseStyles(theme, customVariant),\n  },\n\n  '& .MuiOutlinedInput-root': outlinedStyles(theme),\n  '& .MuiFilledInput-root': filledStyles(theme),\n}));\n\n/** Only one adornment shows at a time: the spinner replaces the caller's while loading. */\nconst EndAdornment: React.FC<{ loading: boolean; endAdornment?: React.ReactNode }> = ({\n  loading,\n  endAdornment,\n}) => {\n  const theme = useTheme();\n  if (loading) {\n    return (\n      <InputAdornment position=\"end\">\n        <CircularProgress size={rem(theme, INPUT_LOADING.spinnerSize)} />\n      </InputAdornment>\n    );\n  }\n\n  if (!endAdornment) return null;\n\n  return <InputAdornment position=\"end\">{endAdornment}</InputAdornment>;\n};\n\n/** While loading the field is inert: no clicks, and disabled to assistive tech. */\nconst interactionProps = (\n  loading: boolean,\n  onClick: InputProps['onClick'],\n  disabled?: boolean,\n) => ({\n  disabled: loading || disabled,\n  onClick: loading ? undefined : onClick,\n});\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      variant = 'outlined',\n      size = 'md',\n      label,\n      error,\n      helperText,\n      startAdornment,\n      endAdornment,\n      fullWidth = true,\n      floating = false,\n      glow = false,\n      pulse = false,\n      loading = false,\n      onClick,\n      onFocus,\n      onBlur,\n      'aria-label': ariaLabel,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { testId: dataTestId, rest: props } = splitTestId(rest);\n    return (\n      <StyledTextField\n        ref={ref}\n        variant={muiVariantFor(variant)}\n        customVariant={variant}\n        fieldSize={size}\n        floating={floating}\n        glow={glow}\n        pulse={pulse}\n        loading={loading}\n        label={label}\n        error={error}\n        helperText={helperText}\n        fullWidth={fullWidth}\n        {...interactionProps(loading, onClick, props.disabled)}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        /*\n         * `aria-label` has to ride `inputProps` to reach the `<input>` (FUT-755).\n         * Spread with the rest it lands on the FormControl DIV that the text\n         * field renders as its root, which carries no role — so the field kept\n         * no accessible name, and a source grep saying \"this input is labelled\"\n         * disagreed with the DOM. The reports search box and the block-title\n         * inputs were both named in source and anonymous to a screen reader.\n         */\n        inputProps={{\n          'data-testid': dataTestId,\n          ...(ariaLabel === undefined ? {} : { 'aria-label': ariaLabel }),\n        }}\n        InputProps={{\n          startAdornment: startAdornment && (\n            <InputAdornment position=\"start\">{startAdornment}</InputAdornment>\n          ),\n          endAdornment: <EndAdornment loading={loading} endAdornment={endAdornment} />,\n        }}\n        {...SIZE_MAP[size]}\n        {...props}\n      />\n    );\n  },\n);\n\nInput.displayName = 'Input';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,sBAAsB;AAC7B,OAAO,oBAAoB;AAC3B,SAAS,QAAQ,gBAAgB;AACjC,OAAO,WAAW;AAoEV;AAvCR,IAAM,kBAAkB,OAAO,eAAe;AAAA,EAC5C,mBAAmB,CAAC,SAClB,CAAC,CAAC,iBAAiB,aAAa,YAAY,QAAQ,SAAS,SAAS,EAAE,SAAS,IAAc;AACnG,CAAC,EAOE,CAAC,EAAE,OAAO,eAAe,WAAW,UAAU,MAAM,OAAO,QAAQ,OAAO;AAAA,EAC3E,UAAU;AAAA;AAAA,EAEV,GAAG,mBAAmB,OAAO,SAAS;AAAA,EACtC,SAAS,UAAU,cAAc,UAAU;AAAA,EAE3C,GAAI,OAAO,WAAW,KAAK,IAAI,CAAC;AAAA,EAChC,GAAI,QAAQ,YAAY,OAAO,SAAS,IAAI,CAAC;AAAA,EAC7C,GAAI,WAAW,oBAAoB,KAAK,IAAI,CAAC;AAAA,EAE7C,wBAAwB;AAAA,IACtB,YAAY;AAAA,IACZ,GAAG,kBAAkB,OAAO,aAAa;AAAA,IACzC,GAAG,gBAAgB,OAAO,aAAa;AAAA,EACzC;AAAA,EAEA,4BAA4B,eAAe,KAAK;AAAA,EAChD,0BAA0B,aAAa,KAAK;AAC9C,EAAE;AAGF,IAAM,eAA+E,CAAC;AAAA,EACpF;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,MAAI,SAAS;AACX,WACE,oBAAC,kBAAe,UAAS,OACvB,8BAAC,oBAAiB,MAAM,IAAI,OAAO,cAAc,WAAW,GAAG,GACjE;AAAA,EAEJ;AAEA,MAAI,CAAC,aAAc,QAAO;AAE1B,SAAO,oBAAC,kBAAe,UAAS,OAAO,wBAAa;AACtD;AAGA,IAAM,mBAAmB,CACvB,SACA,SACA,cACI;AAAA,EACJ,UAAU,WAAW;AAAA,EACrB,SAAS,UAAU,SAAY;AACjC;AAEO,IAAM,QAAQ,MAAM;AAAA,EACzB,CACE;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,QAAQ,YAAY,MAAM,MAAM,IAAI,YAAY,IAAI;AAC5D,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS,cAAc,OAAO;AAAA,QAC9B,eAAe;AAAA,QACf,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG,iBAAiB,SAAS,SAAS,MAAM,QAAQ;AAAA,QACrD;AAAA,QACA;AAAA,QASA,YAAY;AAAA,UACV,eAAe;AAAA,UACf,GAAI,cAAc,SAAY,CAAC,IAAI,EAAE,cAAc,UAAU;AAAA,QAC/D;AAAA,QACA,YAAY;AAAA,UACV,gBAAgB,kBACd,oBAAC,kBAAe,UAAS,SAAS,0BAAe;AAAA,UAEnD,cAAc,oBAAC,gBAAa,SAAkB,cAA4B;AAAA,QAC5E;AAAA,QACC,GAAG,SAAS,IAAI;AAAA,QAChB,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc;","names":[]}

package/dist/chunk-VY2BMSHN.js

@@ -0,0 +1,150 @@
+import {
+  accentFor
+} from "./chunk-TCAQOUIB.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Label/Label.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var SIZES = {
+  xs: (theme) => ({ fontSize: rem(theme, 12), lineHeight: 1.2, padding: theme.spacing(0.25, 0.5) }),
+  sm: (theme) => ({ fontSize: rem(theme, 14), lineHeight: 1.3, padding: theme.spacing(0.5, 0.75) }),
+  md: (theme) => ({ fontSize: rem(theme, 16), lineHeight: 1.5, padding: theme.spacing(0.75, 1) }),
+  lg: (theme) => ({ fontSize: rem(theme, 18), lineHeight: 1.6, padding: theme.spacing(1, 1.25) }),
+  xl: (theme) => ({ fontSize: rem(theme, 20), lineHeight: 1.7, padding: theme.spacing(1.25, 1.5) })
+};
+var sizeStyles = (theme, size) => (SIZES[size] ?? SIZES.md)(theme);
+var WEIGHTS = {
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};
+var fontWeight = (weight) => WEIGHTS[weight] ?? WEIGHTS.regular;
+var textColor = (theme, flags) => {
+  if (flags.error) return theme.palette.error.main;
+  if (flags.disabled) return theme.palette.text.disabled;
+  if (flags.color === "neutral") return theme.palette.text.primary;
+  return accentFor(theme, flags.color).main;
+};
+var rippleStyles = (theme) => ({
+  overflow: "hidden",
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: 0,
+    height: 0,
+    borderRadius: "50%",
+    backgroundColor: alpha(theme.palette.primary.main, 0.3),
+    transform: "translate(-50%, -50%)",
+    transition: "width 0.6s, height 0.6s"
+  },
+  "&:active::after": { width: "300%", height: "300%" }
+});
+var SURFACES = {
+  filled: ({ theme, flags, accent }) => ({
+    backgroundColor: alpha(accent, 0.1),
+    borderRadius: theme.spacing(0.5),
+    "&:hover": flags.clickable ? { backgroundColor: alpha(accent, 0.15) } : {}
+  }),
+  outlined: ({ theme, flags, accent }) => ({
+    border: `1px solid ${alpha(accent, 0.5)}`,
+    borderRadius: theme.spacing(0.5),
+    "&:hover": flags.clickable ? { borderColor: accent, backgroundColor: alpha(accent, 0.05) } : {}
+  }),
+  glass: ({ theme, flags }) => ({
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    borderRadius: theme.spacing(0.5),
+    "&:hover": flags.clickable ? {
+      backgroundColor: alpha(theme.palette.background.paper, 0.15),
+      borderColor: alpha(theme.palette.primary.main, 0.3)
+    } : {}
+  }),
+  gradient: ({ theme, flags }) => {
+    const accent = accentFor(theme, flags.color === "neutral" ? "primary" : flags.color);
+    const clip = {
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent",
+      backgroundClip: "text"
+    };
+    return {
+      background: `linear-gradient(135deg, ${accent.light}, ${accent.main})`,
+      ...clip,
+      "&:hover": flags.clickable ? {
+        background: `linear-gradient(135deg, ${accent.main}, ${accent.dark})`,
+        ...clip
+      } : {}
+    };
+  },
+  minimal: ({ theme, flags }) => ({
+    padding: 0,
+    "&:hover": flags.clickable ? { color: theme.palette.primary.main } : {}
+  }),
+  default: () => ({})
+};
+var textLayout = (theme, flags) => {
+  const { srOnly, clickable, align, weight, transform, nowrap, truncate } = flags;
+  return {
+    display: srOnly ? "none" : "inline-flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    transition: theme.transitions.create(["all"], {
+      duration: theme.transitions.duration.standard
+    }),
+    cursor: clickable ? "pointer" : "default",
+    textAlign: align,
+    fontWeight: fontWeight(weight),
+    textTransform: transform,
+    whiteSpace: nowrap ? "nowrap" : "normal",
+    overflow: truncate ? "hidden" : "visible",
+    textOverflow: truncate ? "ellipsis" : "clip",
+    position: "relative"
+  };
+};
+var labelStyles = (theme, flags) => {
+  const { variant, size, clickable } = flags;
+  const color = textColor(theme, flags);
+  const accent = color || theme.palette.primary.main;
+  return {
+    ...textLayout(theme, flags),
+    ...sizeStyles(theme, size),
+    color,
+    ...flags.glow && { textShadow: `0 0 ${rem(theme, 10)} ${alpha(accent, 0.5)}` },
+    ...flags.pulse && {
+      animation: "pulse 2s infinite",
+      "@keyframes pulse": {
+        "0%": { opacity: 1 },
+        "50%": { opacity: 0.6 },
+        "100%": { opacity: 1 }
+      }
+    },
+    ...flags.ripple && clickable && rippleStyles(theme),
+    ...(SURFACES[variant] ?? SURFACES.default)({ theme, flags, accent })
+  };
+};
+var SR_ONLY_SX = {
+  position: "absolute",
+  width: sxRem(1),
+  height: sxRem(1),
+  padding: 0,
+  margin: sxRem(-1),
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+
+export {
+  sizeStyles,
+  textColor,
+  labelStyles,
+  SR_ONLY_SX
+};
+//# sourceMappingURL=chunk-VY2BMSHN.js.map

package/dist/chunk-VY2BMSHN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Label/Label.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, SxProps, Theme } from '@mui/material/styles/index.js';\n\nimport type { LabelProps } from './Label.types';\nimport { accentFor, rem, sxRem } from '../../../tokens/scales';\n\ntype Size = NonNullable<LabelProps['size']>;\ntype Variant = NonNullable<LabelProps['variant']>;\ntype Weight = NonNullable<LabelProps['weight']>;\n\nconst SIZES: Record<Size, (theme: Theme) => CSSObject> = {\n  xs: (theme) => ({ fontSize: rem(theme, 12), lineHeight: 1.2, padding: theme.spacing(0.25, 0.5) }),\n  sm: (theme) => ({ fontSize: rem(theme, 14), lineHeight: 1.3, padding: theme.spacing(0.5, 0.75) }),\n  md: (theme) => ({ fontSize: rem(theme, 16), lineHeight: 1.5, padding: theme.spacing(0.75, 1) }),\n  lg: (theme) => ({ fontSize: rem(theme, 18), lineHeight: 1.6, padding: theme.spacing(1, 1.25) }),\n  xl: (theme) => ({ fontSize: rem(theme, 20), lineHeight: 1.7, padding: theme.spacing(1.25, 1.5) }),\n};\n\nexport const sizeStyles = (theme: Theme, size: Size): CSSObject => (SIZES[size] ?? SIZES.md)(theme);\n\nconst WEIGHTS: Record<Weight, number> = {\n  light: 300,\n  regular: 400,\n  medium: 500,\n  semibold: 600,\n  bold: 700,\n};\n\nconst fontWeight = (weight: Weight) => WEIGHTS[weight] ?? WEIGHTS.regular;\n\nexport interface LabelStyleFlags {\n  variant: Variant;\n  size: Size;\n  color: NonNullable<LabelProps['color']>;\n  weight: Weight;\n  transform: NonNullable<LabelProps['transform']>;\n  align: NonNullable<LabelProps['align']>;\n  error: boolean;\n  disabled: boolean;\n  glow: boolean;\n  pulse: boolean;\n  ripple: boolean;\n  srOnly: boolean;\n  nowrap: boolean;\n  truncate: boolean;\n  clickable: boolean;\n}\n\n/**\n * The text colour, which error and disabled override before the palette is\n * consulted at all. Resolved once and threaded through — the variant styles\n * read it up to four times each.\n */\nexport const textColor = (theme: Theme, flags: LabelStyleFlags): string => {\n  if (flags.error) return theme.palette.error.main;\n  if (flags.disabled) return theme.palette.text.disabled;\n  if (flags.color === 'neutral') return theme.palette.text.primary;\n  return accentFor(theme, flags.color).main;\n};\n\n/** The ripple that expands from the centre on press, for clickable labels. */\nconst rippleStyles = (theme: Theme): CSSObject => ({\n  overflow: 'hidden',\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(theme.palette.primary.main, 0.3),\n    transform: 'translate(-50%, -50%)',\n    transition: 'width 0.6s, height 0.6s',\n  },\n  '&:active::after': { width: '300%', height: '300%' },\n});\n\ninterface SurfaceInput {\n  theme: Theme;\n  flags: LabelStyleFlags;\n  /** The resolved text colour, or the primary accent when it resolves to none. */\n  accent: string;\n}\n\n/**\n * Each variant's own additions. Every arm previously re-spread the same base,\n * glow, pulse and ripple objects and re-derived the colour for each use; the\n * shared prefix is applied once by `labelStyles`.\n *\n * The hover rules are only attached when the label is clickable, which is what\n * the `onClick ? {…} : {}` in every arm was saying.\n */\nconst SURFACES: Record<Variant, (input: SurfaceInput) => CSSObject> = {\n  filled: ({ theme, flags, accent }) => ({\n    backgroundColor: alpha(accent, 0.1),\n    borderRadius: theme.spacing(0.5),\n    '&:hover': flags.clickable ? { backgroundColor: alpha(accent, 0.15) } : {},\n  }),\n\n  outlined: ({ theme, flags, accent }) => ({\n    border: `1px solid ${alpha(accent, 0.5)}`,\n    borderRadius: theme.spacing(0.5),\n    '&:hover': flags.clickable\n      ? { borderColor: accent, backgroundColor: alpha(accent, 0.05) }\n      : {},\n  }),\n\n  glass: ({ theme, flags }) => ({\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: `blur(${rem(theme, 10)})`,\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    borderRadius: theme.spacing(0.5),\n    '&:hover': flags.clickable\n      ? {\n          backgroundColor: alpha(theme.palette.background.paper, 0.15),\n          borderColor: alpha(theme.palette.primary.main, 0.3),\n        }\n      : {},\n  }),\n\n  gradient: ({ theme, flags }) => {\n    // `neutral` has no accent of its own in the gradient; it borrows primary,\n    // which is what this branch already did before the vocabulary was named.\n    const accent = accentFor(theme, flags.color === 'neutral' ? 'primary' : flags.color);\n    // The gradient paints the glyphs themselves rather than the box behind them.\n    const clip = {\n      WebkitBackgroundClip: 'text',\n      WebkitTextFillColor: 'transparent',\n      backgroundClip: 'text',\n    };\n\n    return {\n      background: `linear-gradient(135deg, ${accent.light}, ${accent.main})`,\n      ...clip,\n      '&:hover': flags.clickable\n        ? {\n            background: `linear-gradient(135deg, ${accent.main}, ${accent.dark})`,\n            ...clip,\n          }\n        : {},\n    };\n  },\n\n  minimal: ({ theme, flags }) => ({\n    padding: 0,\n    '&:hover': flags.clickable ? { color: theme.palette.primary.main } : {},\n  }),\n\n  default: () => ({}),\n};\n\n/** How the text sits: its alignment, weight, casing and overflow behaviour. */\nconst textLayout = (theme: Theme, flags: LabelStyleFlags): CSSObject => {\n  const { srOnly, clickable, align, weight, transform, nowrap, truncate } = flags;\n\n  return {\n    display: srOnly ? 'none' : 'inline-flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n    transition: theme.transitions.create(['all'], {\n      duration: theme.transitions.duration.standard,\n    }),\n    cursor: clickable ? 'pointer' : 'default',\n    textAlign: align,\n    fontWeight: fontWeight(weight),\n    textTransform: transform,\n    whiteSpace: nowrap ? 'nowrap' : 'normal',\n    overflow: truncate ? 'hidden' : 'visible',\n    textOverflow: truncate ? 'ellipsis' : 'clip',\n    position: 'relative' as const,\n  };\n};\n\nexport const labelStyles = (theme: Theme, flags: LabelStyleFlags): CSSObject => {\n  const { variant, size, clickable } = flags;\n  const color = textColor(theme, flags);\n  const accent = color || theme.palette.primary.main;\n\n  return {\n    ...textLayout(theme, flags),\n    ...sizeStyles(theme, size),\n    color,\n    ...(flags.glow && { textShadow: `0 0 ${rem(theme, 10)} ${alpha(accent, 0.5)}` }),\n    ...(flags.pulse && {\n      animation: 'pulse 2s infinite',\n      '@keyframes pulse': {\n        '0%': { opacity: 1 },\n        '50%': { opacity: 0.6 },\n        '100%': { opacity: 1 },\n      },\n    }),\n    ...(flags.ripple && clickable && rippleStyles(theme)),\n    ...(SURFACES[variant] ?? SURFACES.default)({ theme, flags, accent }),\n  };\n};\n\n/** Visually hidden but still read aloud, for the `srOnly` label. */\nexport const SR_ONLY_SX: SxProps<Theme> = {\n  position: 'absolute',\n  width: sxRem(1),\n  height: sxRem(1),\n  padding: 0,\n  margin: sxRem(-1),\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n  border: 0,\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-VZIB5W5L.js

@@ -0,0 +1,127 @@
+import {
+  SwitchControl,
+  SwitchHelper,
+  SwitchRow
+} from "./chunk-4JFL62K3.js";
+import {
+  switchIds
+} from "./chunk-SZS7VZJN.js";
+import {
+  splitTestId
+} from "./chunk-TYJR4GOF.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/form/Switch/Switch.tsx
+import Box from "@mui/material/Box/index.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULTS = {
+  variant: "default",
+  color: "primary",
+  size: "md",
+  glow: false,
+  glass: false,
+  gradient: false,
+  labelPosition: "end",
+  error: false,
+  animated: true,
+  loading: false,
+  ripple: false,
+  pulse: false
+};
+var Switch = forwardRef((props, ref) => {
+  const {
+    variant,
+    color,
+    size,
+    label,
+    description,
+    glow,
+    glass,
+    gradient,
+    labelPosition,
+    onIcon,
+    offIcon,
+    onText,
+    offText,
+    error,
+    helperText,
+    trackWidth,
+    trackHeight,
+    checked,
+    onChange,
+    animated,
+    loading,
+    ripple,
+    pulse,
+    id,
+    inputProps,
+    ...others
+  } = withDefaults(props, DEFAULTS);
+  const { testId: dataTestId, rest } = splitTestId(others);
+  const containerTestId = dataTestId ? `${dataTestId}-container` : "switch-container";
+  const { inputId, descriptionId, helperId, describedBy } = switchIds({
+    generated: useId(),
+    id,
+    inputProps,
+    description,
+    helperText,
+    callerDescribedBy: rest["aria-describedby"]
+  });
+  const control = /* @__PURE__ */ jsx(
+    SwitchControl,
+    {
+      customVariant: variant,
+      customColor: color,
+      customSize: size,
+      glow,
+      glass,
+      gradient,
+      trackWidth,
+      trackHeight,
+      onText,
+      offText,
+      loading,
+      ripple,
+      pulse,
+      checked,
+      onChange,
+      onIcon,
+      offIcon,
+      animated,
+      size,
+      dataTestId,
+      switchRef: ref,
+      inputId,
+      inputProps,
+      describedBy,
+      rest
+    }
+  );
+  const helper = /* @__PURE__ */ jsx(SwitchHelper, { helperText, error, dataTestId, id: helperId });
+  return /* @__PURE__ */ jsxs(Box, { "data-testid": containerTestId, children: [
+    /* @__PURE__ */ jsx(
+      SwitchRow,
+      {
+        label,
+        description,
+        labelPosition,
+        error,
+        dataTestId,
+        htmlFor: inputId,
+        descriptionId,
+        disabled: Boolean(rest.disabled) || loading,
+        control
+      }
+    ),
+    helper
+  ] });
+});
+Switch.displayName = "Switch";
+
+export {
+  Switch
+};
+//# sourceMappingURL=chunk-VZIB5W5L.js.map

package/dist/chunk-W5TI46QN.js

@@ -0,0 +1,143 @@
+import {
+  asFieldSize,
+  fieldHeight
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadius
+} from "./chunk-GDN2LUTZ.js";
+import {
+  cssLengthToPx
+} from "./chunk-AG66JBNH.js";
+import {
+  FIELD_BORDER_WIDTH
+} from "./chunk-PZBK3F52.js";
+import {
+  controlNeutral
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  remPx,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/ToggleGroup/ToggleGroup.tsx
+import Box from "@mui/material/Box/index.js";
+import ToggleButton from "@mui/material/ToggleButton/index.js";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup/index.js";
+import { alpha, useTheme, styled } from "@mui/material/styles/index.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var glassPadding = (theme) => rem(theme, 4);
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    const neutral = controlNeutral(theme);
+    return { ...neutral, contrastText: theme.palette.getContrastText(neutral.main) };
+  }
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    danger: theme.palette.error
+  };
+  const palette = colorMap[color] || theme.palette.primary;
+  return {
+    main: palette.main,
+    dark: palette.dark || palette.main,
+    light: palette.light || palette.main,
+    contrastText: palette.contrastText || theme.palette.getContrastText(palette.main)
+  };
+};
+var glassFrameRadius = (theme) => fieldRadius(theme) + remPx(theme, 4) + cssLengthToPx(theme.spacing(0.5), 4) + FIELD_BORDER_WIDTH;
+var StyledToggleGroup = styled(ToggleButtonGroup, {
+  shouldForwardProp: (prop) => !["customColor", "customSize", "glass"].includes(prop)
+})(({ theme, glass }) => {
+  const radius = fieldRadius(theme);
+  return {
+    backgroundColor: glass ? alpha(theme.palette.background.paper, 0.1) : "transparent",
+    backdropFilter: glass ? `blur(${rem(theme, 20)})` : "none",
+    borderRadius: glass ? glassFrameRadius(theme) : radius,
+    padding: glass ? glassPadding(theme) : 0,
+    border: glass ? `${FIELD_BORDER_WIDTH}px solid ${alpha(theme.palette.divider, 0.2)}` : "none",
+    "& .MuiToggleButtonGroup-grouped": {
+      margin: theme.spacing(0.5),
+      border: 0,
+      borderRadius: `${radius}px !important`
+    }
+  };
+});
+var ToggleGroup = forwardRef(
+  ({
+    variant = "single",
+    color = "primary",
+    size = "md",
+    options,
+    glass = false,
+    gradient = false,
+    value,
+    onChange,
+    dataTestId = "toggle-group",
+    ...props
+  }, ref) => {
+    const theme = useTheme();
+    const colorPalette = getColorFromTheme(theme, color);
+    const sizeMap = {
+      xs: { padding: rems(theme, 4, 8), fontSize: rem(theme, 12) },
+      sm: { padding: rems(theme, 6, 12), fontSize: rem(theme, 14) },
+      md: { padding: rems(theme, 8, 16), fontSize: rem(theme, 16) },
+      lg: { padding: rems(theme, 10, 20), fontSize: rem(theme, 18) },
+      xl: { padding: rems(theme, 12, 24), fontSize: rem(theme, 20) }
+    };
+    return /* @__PURE__ */ jsx(
+      StyledToggleGroup,
+      {
+        ref,
+        customColor: color,
+        customSize: size,
+        glass,
+        value,
+        onChange,
+        exclusive: variant === "exclusive" || variant === "single",
+        "data-testid": dataTestId,
+        ...props,
+        children: options.map((option) => /* @__PURE__ */ jsx(
+          ToggleButton,
+          {
+            value: option.value,
+            disabled: option.disabled,
+            "data-testid": `${dataTestId}-item-${option.value}`,
+            sx: {
+              textTransform: "none",
+              fontWeight: 500,
+              transition: "all 0.3s ease",
+              ...sizeMap[size],
+              // The theme's field height for the size; the label centres in it.
+              minHeight: (theme2) => fieldHeight(theme2, asFieldSize(size)),
+              paddingTop: 0,
+              paddingBottom: 0,
+              "&.Mui-selected": {
+                backgroundColor: colorPalette.main,
+                color: colorPalette.contrastText,
+                ...gradient && {
+                  background: `linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.dark})`
+                }
+              }
+            },
+            children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              option.icon,
+              option.label
+            ] })
+          },
+          option.value
+        ))
+      }
+    );
+  }
+);
+ToggleGroup.displayName = "ToggleGroup";
+
+export {
+  ToggleGroup
+};
+//# sourceMappingURL=chunk-W5TI46QN.js.map

package/dist/chunk-W5TI46QN.js.map

@@ -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 { asFieldSize, FIELD_BORDER_WIDTH, fieldHeight } from '../../../tokens/field-height';\nimport { fieldRadius } from '../../../tokens/field-radius';\nimport { controlNeutral } from '../../../tokens/ink';\nimport { rem, remPx, rems } from '../../../tokens/relative';\nimport { cssLengthToPx } from '../../../tokens/css-units';\n\n/** The glass frame's padding (4px at the design scale); its border is the field hairline. */\nconst glassPadding = (theme: Theme): string => rem(theme, 4);\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\n/** The glass frame's radius: the field radius plus its padding, the buttons' margin and its border. */\nconst glassFrameRadius = (theme: Theme): number =>\n  fieldRadius(theme) + remPx(theme, 4) + cssLengthToPx(theme.spacing(0.5), 4) + FIELD_BORDER_WIDTH;\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  return {\n    backgroundColor: glass ? alpha(theme.palette.background.paper, 0.1) : 'transparent',\n    backdropFilter: glass ? `blur(${rem(theme, 20)})` : 'none',\n    borderRadius: glass ? glassFrameRadius(theme) : radius,\n    padding: glass ? glassPadding(theme) : 0,\n    border: glass ? `${FIELD_BORDER_WIDTH}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: rems(theme, 4, 8), fontSize: rem(theme, 12) },\n      sm: { padding: rems(theme, 6, 12), fontSize: rem(theme, 14) },\n      md: { padding: rems(theme, 8, 16), fontSize: rem(theme, 16) },\n      lg: { padding: rems(theme, 10, 20), fontSize: rem(theme, 18) },\n      xl: { padding: rems(theme, 12, 24), 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":"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","names":["theme"]}

package/dist/chunk-WE3LJPRN.js

@@ -0,0 +1,28 @@
+import {
+  DropdownMenu
+} from "./chunk-VFHGILXI.js";
+import {
+  Button
+} from "./chunk-2EAAWOZ2.js";
+
+// src/components/data-display/CardKit/CardKebab.tsx
+import { jsx } from "react/jsx-runtime";
+function CardKebab({
+  items,
+  menuLabel,
+  dataTestId
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      size: "sm",
+      items,
+      trigger: /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", "aria-label": menuLabel, dataTestId, children: "\u22EE" })
+    }
+  );
+}
+
+export {
+  CardKebab
+};
+//# sourceMappingURL=chunk-WE3LJPRN.js.map