@12-apps/ui 6.19.1 → 6.21.0

package/dist/chunk-EPNUVSNK.js

@@ -0,0 +1,161 @@
+import {
+  arrowSx,
+  cardSx,
+  getAnchorOrigin,
+  getTransformOrigin,
+  sideOf
+} from "./chunk-KSLNO5NG.js";
+import {
+  useHoverCard
+} from "./chunk-SXYIXCUB.js";
+import {
+  HoverCardContent
+} from "./chunk-O26MKGIC.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/data-display/HoverCard/HoverCard.tsx
+import Box from "@mui/material/Box/index.js";
+import Card from "@mui/material/Card/index.js";
+import CardContent from "@mui/material/CardContent/index.js";
+import Popover from "@mui/material/Popover/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ArrowContainer = styled("div")(
+  ({ theme, placement }) => ({ ...arrowSx(theme, placement) })
+);
+var StyledCard = styled(Card, {
+  shouldForwardProp: (prop) => !["customVariant", "glow", "pulse", "animation"].includes(prop)
+})(({ theme, ...flags }) => ({ ...cardSx(theme, flags) }));
+var StyledPopover = styled(Popover, {
+  shouldForwardProp: (prop) => prop !== "customAnimation"
+})(({ customAnimation }) => ({
+  // The popover only positions; StyledCard draws the surface.
+  "& .MuiPopover-paper": {
+    backgroundColor: "transparent",
+    boxShadow: "none",
+    overflow: "visible",
+    ...customAnimation === "scale" && { transformOrigin: "center" }
+  }
+}));
+var DEFAULTS = {
+  variant: "default",
+  glow: false,
+  pulse: false,
+  placement: "bottom",
+  showArrow: false,
+  animation: "fade",
+  enterDelay: 700,
+  exitDelay: 0,
+  maxWidth: 400,
+  loading: false,
+  touchEnabled: true,
+  offset: 8,
+  disabled: false
+};
+var CONTENT_PADDING = { detailed: 3, minimal: 1.5 };
+var offsetMargin = (placement, offset) => {
+  const side = sideOf(placement);
+  const key = { top: "mt", bottom: "mb", left: "ml", right: "mr" }[side];
+  return { [key]: `${offset}px` };
+};
+var HoverCard = React.forwardRef((props, ref) => {
+  const {
+    variant,
+    glow,
+    pulse,
+    title,
+    description,
+    avatar,
+    trigger,
+    placement,
+    showArrow,
+    animation,
+    enterDelay,
+    exitDelay,
+    maxWidth,
+    loading,
+    loadingComponent,
+    loadingText,
+    touchEnabled,
+    offset,
+    disabled,
+    onOpen,
+    onClose,
+    children,
+    dataTestId,
+    ...rest
+  } = withDefaults(props, DEFAULTS);
+  const { anchorEl, isOpen, handleClose, triggerHandlers, cardHandlers } = useHoverCard({
+    disabled,
+    touchEnabled,
+    enterDelay,
+    exitDelay,
+    onOpen,
+    onClose
+  });
+  const triggerProps = {
+    ...triggerHandlers,
+    style: { cursor: disabled ? "default" : "pointer" },
+    "data-testid": dataTestId ? `${dataTestId}-trigger` : "hover-card-trigger"
+  };
+  const triggerElement = trigger ? React.cloneElement(trigger, triggerProps) : /* @__PURE__ */ jsx("span", { ...triggerProps, style: { display: "inline-block", ...triggerProps.style }, children });
+  const padding = CONTENT_PADDING[variant] ?? 2;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    triggerElement,
+    /* @__PURE__ */ jsx(
+      StyledPopover,
+      {
+        ref,
+        open: isOpen && !disabled,
+        anchorEl,
+        onClose: handleClose,
+        anchorOrigin: getAnchorOrigin(placement),
+        transformOrigin: getTransformOrigin(placement),
+        ...cardHandlers,
+        disableAutoFocus: true,
+        disableEnforceFocus: true,
+        disableRestoreFocus: true,
+        customAnimation: animation,
+        slotProps: { paper: { style: { pointerEvents: "auto" } } },
+        ...rest,
+        children: /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+          showArrow && /* @__PURE__ */ jsx(ArrowContainer, { placement, offset }),
+          /* @__PURE__ */ jsx(
+            StyledCard,
+            {
+              customVariant: variant,
+              glow,
+              pulse,
+              animation,
+              "data-testid": dataTestId || "hover-card-content",
+              sx: { maxWidth, ...offsetMargin(placement, offset) },
+              children: /* @__PURE__ */ jsx(CardContent, { sx: { p: padding, "&:last-child": { pb: padding } }, children: /* @__PURE__ */ jsx(
+                HoverCardContent,
+                {
+                  loadingText,
+                  variant,
+                  title,
+                  description,
+                  avatar,
+                  loading,
+                  loadingComponent,
+                  dataTestId,
+                  children
+                }
+              ) })
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+});
+HoverCard.displayName = "HoverCard";
+
+export {
+  HoverCard
+};
+//# sourceMappingURL=chunk-EPNUVSNK.js.map

package/dist/chunk-EZSEAYYT.js

@@ -0,0 +1,200 @@
+import {
+  badgeVariantStyles
+} from "./chunk-ZTF5C2GA.js";
+import {
+  bounceAnimation,
+  fadeInScaleAnimation,
+  glowPulseAnimation,
+  pulseAnimation,
+  shimmerAnimation
+} from "./chunk-HI2OFZSZ.js";
+import {
+  BADGE_BORDER_WIDTH,
+  BADGE_CONTENT_GAP,
+  BADGE_FONT_WEIGHT,
+  BADGE_LETTER_SPACING_EM,
+  BADGE_SIZES,
+  BADGE_TRANSITION_EASING,
+  BADGE_TRANSITION_MS,
+  BOUNCE,
+  FADE_IN_SCALE,
+  GLOW,
+  HOVER_SCALE,
+  PULSE,
+  SHIMMER,
+  badgeAnchor
+} from "./chunk-KVEHH4SA.js";
+import {
+  px
+} from "./chunk-NQN5Z36J.js";
+
+// src/components/data-display/Badge/Badge.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var getColorFromTheme = (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`, the house word the prop actually takes. Keyed on MUI's `error`
+    // it matched nothing and fell through to the default.
+    danger: theme.palette.error,
+    neutral: {
+      main: theme.palette.grey[600],
+      light: theme.palette.grey[400],
+      dark: theme.palette.grey[800],
+      contrastText: theme.palette.getContrastText(theme.palette.grey[600])
+    }
+  };
+  return colorMap[color] || theme.palette.primary;
+};
+var sizeMap = Object.fromEntries(
+  Object.entries(BADGE_SIZES).map(([size, metrics]) => [
+    size,
+    {
+      minWidth: metrics.minWidth,
+      height: metrics.height,
+      fontSize: px(metrics.fontSize),
+      padding: `0 ${metrics.paddingHorizontal}px`,
+      dotSize: metrics.dotSize,
+      iconSize: px(metrics.iconSize)
+    }
+  ])
+);
+var getSizeStyles = (size) => sizeMap[size] || sizeMap.md;
+var getAnchorOrigin = (position) => badgeAnchor(position || "top-right");
+var rgbValuesOf = (color) => {
+  if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    const [r, g, b] = [0, 2, 4].map((offset) => parseInt(hex.slice(offset, offset + 2), 16));
+    return `${r}, ${g}, ${b}`;
+  }
+  const match = color.match(/\d+/g);
+  if (match) return `${match[0]}, ${match[1]}, ${match[2]}`;
+  return "255, 255, 255";
+};
+var badgeLightingStyles = ({
+  glow,
+  pulse,
+  colorPalette
+}) => ({
+  // Glow effect
+  ...glow && !pulse && {
+    boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)}`,
+    filter: `brightness(${GLOW.brightness})`,
+    "&:hover": {
+      boxShadow: `0 0 ${GLOW.hoverBlur}px ${GLOW.hoverSpread}px ${alpha(colorPalette.main, GLOW.hoverAlpha)}`
+    }
+  },
+  // Pulse animation
+  ...pulse && !glow && {
+    animation: `${pulseAnimation} ${PULSE.durationMs / 1e3}s ease-in-out infinite`
+  },
+  // Both glow and pulse
+  ...glow && pulse && {
+    animation: `${glowPulseAnimation} ${PULSE.durationMs / 1e3}s ease-in-out infinite, ${pulseAnimation} ${PULSE.durationMs / 1e3}s ease-in-out infinite`,
+    filter: `brightness(${GLOW.brightness})`
+  }
+});
+var badgeAnimationStyles = ({
+  animate,
+  bounce,
+  shimmer,
+  glow: _glow,
+  pulse: _pulse,
+  customVariant,
+  colorPalette,
+  theme
+}) => ({
+  ...animate && !bounce && {
+    animation: `${fadeInScaleAnimation} ${FADE_IN_SCALE.durationMs / 1e3}s cubic-bezier(0.68, -0.55, 0.265, 1.55)`
+  },
+  // Bounce animation
+  ...bounce && {
+    animation: `${bounceAnimation} ${BOUNCE.durationMs / 1e3}s ease-in-out`
+  },
+  // Shimmer effect
+  ...shimmer && {
+    background: customVariant === "gradient" ? `linear-gradient(135deg, ${colorPalette.main} 0%, ${colorPalette.dark || colorPalette.main} 100%)` : colorPalette.main,
+    backgroundSize: shimmer ? "1000px 100%" : "auto",
+    position: "relative",
+    overflow: "hidden",
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      background: `linear-gradient(
+            90deg,
+            transparent,
+            ${alpha(theme.palette.common.white, SHIMMER.alpha)},
+            transparent
+          )`,
+      animation: `${shimmerAnimation} ${SHIMMER.durationMs / 1e3}s infinite`
+    }
+  }
+});
+var badgeStyles = ({
+  theme,
+  customVariant,
+  customSize = "md",
+  customColor = "primary",
+  glow,
+  pulse,
+  animate,
+  shimmer,
+  bounce,
+  hasIcon
+}) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  const sizeStyles = getSizeStyles(customSize);
+  return {
+    "--glow-color": rgbValuesOf(colorPalette.main),
+    "& .MuiBadge-badge": {
+      transition: `all ${BADGE_TRANSITION_MS / 1e3}s ${BADGE_TRANSITION_EASING}`,
+      fontWeight: BADGE_FONT_WEIGHT,
+      border: `${BADGE_BORDER_WIDTH}px solid ${theme.palette.background.paper}`,
+      letterSpacing: `${BADGE_LETTER_SPACING_EM}em`,
+      textTransform: customVariant === "gradient" || customVariant === "glass" ? "uppercase" : "none",
+      willChange: "transform, opacity",
+      backfaceVisibility: "hidden",
+      // Outline variant
+      // Destructive variant
+      // Warning variant
+      // Adjust padding when icon is present
+      ...badgeVariantStyles(theme, colorPalette, sizeStyles, customVariant),
+      ...hasIcon && {
+        paddingLeft: sizeStyles.padding.split(" ")[1],
+        display: "inline-flex",
+        alignItems: "center",
+        gap: `${BADGE_CONTENT_GAP}px`
+      },
+      // Animation on mount
+      ...badgeAnimationStyles({
+        animate,
+        bounce,
+        shimmer,
+        glow,
+        pulse,
+        customVariant,
+        colorPalette,
+        theme
+      }),
+      ...badgeLightingStyles({ glow, pulse, colorPalette }),
+      "&:not(.MuiBadge-dot):hover": {
+        transform: `scale(${HOVER_SCALE})`,
+        zIndex: 1
+      }
+    }
+  };
+};
+
+export {
+  getSizeStyles,
+  getAnchorOrigin,
+  badgeStyles
+};
+//# sourceMappingURL=chunk-EZSEAYYT.js.map

package/dist/chunk-EZSEAYYT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Badge/Badge.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport {\n  bounceAnimation,\n  fadeInScaleAnimation,\n  glowPulseAnimation,\n  pulseAnimation,\n  shimmerAnimation } from './Badge.animations';\nimport {\n  BADGE_BORDER_WIDTH,\n  BADGE_CONTENT_GAP,\n  BADGE_FONT_WEIGHT,\n  BADGE_LETTER_SPACING_EM,\n  BADGE_SIZES,\n  BADGE_TRANSITION_EASING,\n  BADGE_TRANSITION_MS,\n  BOUNCE,\n  FADE_IN_SCALE,\n  GLOW,\n  HOVER_SCALE,\n  PULSE,\n  SHIMMER,\n  badgeAnchor,\n} from './Badge.metrics';\nimport { badgeVariantStyles } from './Badge.variants';\nimport type { BadgeSize, BadgeVariant } from './Badge.types';\nimport { px } from '../../../tokens/theme';\n\nexport type BadgePalette = {\n  main: string;\n  light?: string;\n  dark?: string;\n  contrastText?: string;\n};\nexport type BadgeSizeStyles = ReturnType<typeof getSizeStyles>;\n\nconst getColorFromTheme = (theme: Theme, color: string) => {\n  const colorMap: Record<string, ReturnType<typeof theme.palette.augmentColor>> = {\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`, the house word the prop actually takes. Keyed on MUI's `error`\n    // it matched nothing and fell through to the default.\n    danger: theme.palette.error,\n    neutral: {\n      main: theme.palette.grey[600],\n      light: theme.palette.grey[400],\n      dark: theme.palette.grey[800],\n      contrastText: theme.palette.getContrastText(theme.palette.grey[600]) } };\n\n  return colorMap[color] || theme.palette.primary;\n};\n\n// Derived from the shared metrics, not restated: the native `Badge` reads the\n// same table, so the two renderers cannot disagree on a chip.\nconst sizeMap: Record<\n  BadgeSize,\n  {\n    minWidth: number;\n    height: number;\n    fontSize: string;\n    padding: string;\n    dotSize: number;\n    iconSize: string;\n  }\n> = Object.fromEntries(\n  Object.entries(BADGE_SIZES).map(([size, metrics]) => [\n    size,\n    {\n      minWidth: metrics.minWidth,\n      height: metrics.height,\n      fontSize: px(metrics.fontSize),\n      padding: `0 ${metrics.paddingHorizontal}px`,\n      dotSize: metrics.dotSize,\n      iconSize: px(metrics.iconSize),\n    },\n  ]),\n) as Record<\n  BadgeSize,\n  { minWidth: number; height: number; fontSize: string; padding: string; dotSize: number; iconSize: string }\n>;\n\nexport const getSizeStyles = (size: BadgeSize) => sizeMap[size] || sizeMap.md;\n\nexport const getAnchorOrigin = (position: string) =>\n  badgeAnchor((position || 'top-right') as Parameters<typeof badgeAnchor>[0]);\n\n// Exactly one variant applies, so a lookup replaces ten mutually exclusive\n// spreads inside the style object.\n// The glow effect needs the badge colour as bare RGB components for a CSS\n// variable, and the palette hands them over as hex or rgb().\nconst rgbValuesOf = (color: string): string => {\n  if (color.startsWith('#')) {\n    const hex = color.slice(1);\n    const [r, g, b] = [0, 2, 4].map((offset) => parseInt(hex.slice(offset, offset + 2), 16));\n    return `${r}, ${g}, ${b}`;\n  }\n\n  const match = color.match(/\\d+/g);\n  if (match) return `${match[0]}, ${match[1]}, ${match[2]}`;\n  return '255, 255, 255';\n};\n\n// Glow and pulse combine into a third, distinct treatment rather than stacking.\nconst badgeLightingStyles = ({\n  glow,\n  pulse,\n  colorPalette }: {\n  glow?: boolean;\n  pulse?: boolean;\n  colorPalette: BadgePalette;\n}): CSSObject => ({\n      // Glow effect\n      ...(glow &&\n        !pulse && {\n          boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)}`,\n          filter: `brightness(${GLOW.brightness})`,\n          '&:hover': {\n            boxShadow: `0 0 ${GLOW.hoverBlur}px ${GLOW.hoverSpread}px ${alpha(colorPalette.main, GLOW.hoverAlpha)}` } }),\n\n      // Pulse animation\n      ...(pulse &&\n        !glow && {\n          animation: `${pulseAnimation} ${PULSE.durationMs / 1000}s ease-in-out infinite` }),\n\n      // Both glow and pulse\n      ...(glow &&\n        pulse && {\n          animation: `${glowPulseAnimation} ${PULSE.durationMs / 1000}s ease-in-out infinite, ${pulseAnimation} ${PULSE.durationMs / 1000}s ease-in-out infinite`,\n          filter: `brightness(${GLOW.brightness})`,\n        }),\n\n});\n\nconst badgeAnimationStyles = ({\n  animate,\n  bounce,\n  shimmer,\n  glow: _glow,\n  pulse: _pulse,\n  customVariant,\n  colorPalette,\n  theme }: {\n  animate?: boolean;\n  bounce?: boolean;\n  shimmer?: boolean;\n  glow?: boolean;\n  pulse?: boolean;\n  customVariant?: BadgeVariant;\n  colorPalette: BadgePalette;\n  theme: Theme;\n}): CSSObject => ({\n      ...(animate &&\n        !bounce && {\n          animation: `${fadeInScaleAnimation} ${FADE_IN_SCALE.durationMs / 1000}s cubic-bezier(0.68, -0.55, 0.265, 1.55)` }),\n\n      // Bounce animation\n      ...(bounce && {\n        animation: `${bounceAnimation} ${BOUNCE.durationMs / 1000}s ease-in-out` }),\n\n      // Shimmer effect\n      ...(shimmer && {\n        background:\n          customVariant === 'gradient'\n            ? `linear-gradient(135deg, ${colorPalette.main} 0%, ${colorPalette.dark || colorPalette.main} 100%)`\n            : colorPalette.main,\n        backgroundSize: shimmer ? '1000px 100%' : 'auto',\n        position: 'relative',\n        overflow: 'hidden',\n        '&::after': {\n          content: '\"\"',\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          width: '100%',\n          height: '100%',\n          background: `linear-gradient(\n            90deg,\n            transparent,\n            ${alpha(theme.palette.common.white, SHIMMER.alpha)},\n            transparent\n          )`,\n          animation: `${shimmerAnimation} ${SHIMMER.durationMs / 1000}s infinite` } }) });\n\n// The badge chip's own styling, lifted out so the styled() callback just\n// forwards its props.\ninterface BadgeStyleArgs {\n  theme: Theme;\n  customVariant?: BadgeVariant;\n  customSize?: BadgeSize;\n  customColor?: string;\n  glow?: boolean;\n  pulse?: boolean;\n  animate?: boolean;\n  shimmer?: boolean;\n  bounce?: boolean;\n  hasIcon?: boolean;\n}\n\nexport const badgeStyles = ({\n  theme,\n  customVariant,\n  customSize = 'md',\n  customColor = 'primary',\n  glow,\n  pulse,\n  animate,\n  shimmer,\n  bounce,\n  hasIcon }: BadgeStyleArgs): CSSObject => {\n  const colorPalette = getColorFromTheme(theme, customColor);\n  const sizeStyles = getSizeStyles(customSize);\n\n  return {\n    '--glow-color': rgbValuesOf(colorPalette.main),\n    '& .MuiBadge-badge': {\n      transition: `all ${BADGE_TRANSITION_MS / 1000}s ${BADGE_TRANSITION_EASING}`,\n      fontWeight: BADGE_FONT_WEIGHT,\n      border: `${BADGE_BORDER_WIDTH}px solid ${theme.palette.background.paper}`,\n      letterSpacing: `${BADGE_LETTER_SPACING_EM}em`,\n      textTransform:\n        customVariant === 'gradient' || customVariant === 'glass' ? 'uppercase' : 'none',\n      willChange: 'transform, opacity',\n      backfaceVisibility: 'hidden',\n\n      // Outline variant\n\n      // Destructive variant\n\n      // Warning variant\n\n      // Adjust padding when icon is present\n      ...badgeVariantStyles(theme, colorPalette, sizeStyles, customVariant),\n      ...(hasIcon && {\n        paddingLeft: sizeStyles.padding.split(' ')[1],\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: `${BADGE_CONTENT_GAP}px`,\n      }),\n\n      // Animation on mount\n      ...badgeAnimationStyles({\n        animate,\n        bounce,\n        shimmer,\n        glow,\n        pulse,\n        customVariant,\n        colorPalette,\n        theme }),\n      ...badgeLightingStyles({ glow, pulse, colorPalette }),\n\n      '&:not(.MuiBadge-dot):hover': {\n        transform: `scale(${HOVER_SCALE})`,\n        zIndex: 1 } } };\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-FAITHWIO.js

@@ -0,0 +1,73 @@
+// src/components/data-display/Avatar/Avatar.metrics.ts
+var AVATAR_SIZES = {
+  xs: { box: 24, fontSize: 12 },
+  sm: { box: 32, fontSize: 14 },
+  md: { box: 40, fontSize: 16 },
+  lg: { box: 48, fontSize: 18 },
+  xl: { box: 64, fontSize: 24 },
+  xxl: { box: 80, fontSize: 32 }
+};
+var ROUNDED_RADIUS_UNITS = 1;
+var BORDER_WIDTH = 2;
+var BORDER_HALO_ALPHA = 0.2;
+var GLOW = { blur: 20, spread: 5, alpha: 0.4, brightness: 1.05 };
+var PULSE = { durationMs: 2e3, alpha: 0.3, spread: 10 };
+var SHIMMER = { durationMs: 1500, fromAlpha: 0.6, toAlpha: 0.8 };
+var LOADING_OVERLAY = { paperAlpha: 0.7, blur: 2 };
+var SPINNER = {
+  /** A share of the avatar's box. */
+  scale: 0.4,
+  ringWidth: 2,
+  trackAlpha: 0.3,
+  durationMs: 800
+};
+var STATUS_DOT = { scale: 0.2, min: 8, borderWidth: 2, anchor: 0.14 };
+var GLYPH_SIZE = 24;
+var FADE_MS = 300;
+var SCALE_IN_MS = 300;
+var AVATAR_TRANSITION_MS = 300;
+var AVATAR_TRANSITION_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
+var HOVER = { scale: 1.1, lift: 2, shadowY: 8, shadowBlur: 20, shadowAlpha: 0.3, brightness: 1.1 };
+var ACTIVE_SCALE = 1.05;
+var FOCUS_RING = { width: 3, offset: 2, alpha: 0.5 };
+var GROUP_OVERLAP = 8;
+var GROUP_MAX = 4;
+var GROUP_HOVER = { scale: 1.1, lift: 4 };
+function statusColor(theme, status) {
+  if (status === "online") return theme.palette.success.main;
+  if (status === "away") return theme.palette.warning.main;
+  if (status === "busy") return theme.palette.danger.main;
+  return theme.palette.grey[500];
+}
+function avatarAccent(theme, color) {
+  if (color === "neutral") return { main: theme.palette.grey[700], contrastText: "#fff" };
+  const accent = theme.palette[color];
+  return { main: accent.main, contrastText: accent.contrastText || "#fff" };
+}
+
+export {
+  AVATAR_SIZES,
+  ROUNDED_RADIUS_UNITS,
+  BORDER_WIDTH,
+  BORDER_HALO_ALPHA,
+  GLOW,
+  PULSE,
+  SHIMMER,
+  LOADING_OVERLAY,
+  SPINNER,
+  STATUS_DOT,
+  GLYPH_SIZE,
+  FADE_MS,
+  SCALE_IN_MS,
+  AVATAR_TRANSITION_MS,
+  AVATAR_TRANSITION_EASING,
+  HOVER,
+  ACTIVE_SCALE,
+  FOCUS_RING,
+  GROUP_OVERLAP,
+  GROUP_MAX,
+  GROUP_HOVER,
+  statusColor,
+  avatarAccent
+};
+//# sourceMappingURL=chunk-FAITHWIO.js.map

package/dist/chunk-FAITHWIO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Avatar/Avatar.metrics.ts"],"sourcesContent":["import type { AvatarSize, AvatarStatus } from './Avatar.base';\nimport type { UiTheme } from '../../../tokens/theme';\nimport type { ColorValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `Avatar` RENDERERS DRAW WITH.\n *\n * `Avatar.view.tsx` (web, emotion over MUI's `Avatar` and `Badge`) and\n * `Avatar.native.tsx` (React Native) read this one table: the six boxes and\n * their type, the status dot, the glow, the shimmer and the spinner. The web\n * turns the px into rem; native uses the numbers.\n */\nexport interface AvatarSizeMetrics {\n  /** The square the portrait fills, in px. */\n  box: number;\n  /** The initials' type size, in px. */\n  fontSize: number;\n}\n\nexport const AVATAR_SIZES: Record<AvatarSize, AvatarSizeMetrics> = {\n  xs: { box: 24, fontSize: 12 },\n  sm: { box: 32, fontSize: 14 },\n  md: { box: 40, fontSize: 16 },\n  lg: { box: 48, fontSize: 18 },\n  xl: { box: 64, fontSize: 24 },\n  xxl: { box: 80, fontSize: 32 },\n};\n\n/** `rounded` takes one spacing unit; `circle` and `status` are round. */\nexport const ROUNDED_RADIUS_UNITS = 1;\n\n/** The paper ring an avatar takes inside a group, and the hairline outside it. */\nexport const BORDER_WIDTH = 2;\nexport const BORDER_HALO_ALPHA = 0.2;\n\n/** `glow`: a 20px halo at five pixels of spread, and a brightness lift. */\nexport const GLOW = { blur: 20, spread: 5, alpha: 0.4, brightness: 1.05 } as const;\n\n/** `pulse`: the `::after` ring, from nothing to 10px while it fades out. */\nexport const PULSE = { durationMs: 2000, alpha: 0.3, spread: 10 } as const;\n\n/** The shimmer that runs across a loading avatar. */\nexport const SHIMMER = { durationMs: 1500, fromAlpha: 0.6, toAlpha: 0.8 } as const;\n\n/** The overlay over a loading avatar, and the ring spinning in it. */\nexport const LOADING_OVERLAY = { paperAlpha: 0.7, blur: 2 } as const;\nexport const SPINNER = {\n  /** A share of the avatar's box. */\n  scale: 0.4,\n  ringWidth: 2,\n  trackAlpha: 0.3,\n  durationMs: 800,\n} as const;\n\n/**\n * The status dot: a fifth of the box, never below 8px, inside a paper ring.\n * `anchor` is MUI's `overlap=\"circular\"` inset — the dot's CENTRE sits 14% of\n * the box in from the bottom-right corner.\n */\nexport const STATUS_DOT = { scale: 0.2, min: 8, borderWidth: 2, anchor: 0.14 } as const;\n\n/**\n * The default and broken-image glyphs are ordinary `SvgIcon`s here, not MUI's\n * own `.MuiAvatar-fallback` (which is 75% of the box): this component passes\n * them as CHILDREN, so they render at the icon default whatever the box is.\n */\nexport const GLYPH_SIZE = 24;\n\n/** MUI's `Fade` timeout on mount, and the scale-in behind it. */\nexport const FADE_MS = 300;\nexport const SCALE_IN_MS = 300;\n\n/** `transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)`. */\nexport const AVATAR_TRANSITION_MS = 300;\nexport const AVATAR_TRANSITION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n/** The interactive lift, which is a `:hover` on the web. */\nexport const HOVER = { scale: 1.1, lift: 2, shadowY: 8, shadowBlur: 20, shadowAlpha: 0.3, brightness: 1.1 } as const;\nexport const ACTIVE_SCALE = 1.05;\n\n/** The focus ring `:focus-visible` draws. */\nexport const FOCUS_RING = { width: 3, offset: 2, alpha: 0.5 } as const;\n\n/** An avatar group's default overlap, in px, and its hover lift. */\nexport const GROUP_OVERLAP = 8;\nexport const GROUP_MAX = 4;\nexport const GROUP_HOVER = { scale: 1.1, lift: 4 } as const;\n\n/** The dot's colour per status. `offline` is the ramp, the rest are semantic. */\nexport function statusColor(theme: UiTheme, status: AvatarStatus): string {\n  if (status === 'online') return theme.palette.success.main;\n  if (status === 'away') return theme.palette.warning.main;\n  if (status === 'busy') return theme.palette.danger.main;\n  return theme.palette.grey[500];\n}\n\nexport interface AvatarAccent {\n  main: string;\n  contrastText: string;\n}\n\n/**\n * The accent behind the initials. `danger`, NOT `error` — the web map was keyed\n * on MUI's word while the prop took the house one, so `danger` matched nothing\n * and fell through to primary: a red avatar rendering blue, silently.\n */\nexport function avatarAccent(theme: UiTheme, color: ColorValue): AvatarAccent {\n  if (color === 'neutral') return { main: theme.palette.grey[700], contrastText: '#fff' };\n  const accent = theme.palette[color];\n  return { main: accent.main, contrastText: accent.contrastText || '#fff' };\n}\n"],"mappings":";AAmBO,IAAM,eAAsD;AAAA,EACjE,IAAI,EAAE,KAAK,IAAI,UAAU,GAAG;AAAA,EAC5B,IAAI,EAAE,KAAK,IAAI,UAAU,GAAG;AAAA,EAC5B,IAAI,EAAE,KAAK,IAAI,UAAU,GAAG;AAAA,EAC5B,IAAI,EAAE,KAAK,IAAI,UAAU,GAAG;AAAA,EAC5B,IAAI,EAAE,KAAK,IAAI,UAAU,GAAG;AAAA,EAC5B,KAAK,EAAE,KAAK,IAAI,UAAU,GAAG;AAC/B;AAGO,IAAM,uBAAuB;AAG7B,IAAM,eAAe;AACrB,IAAM,oBAAoB;AAG1B,IAAM,OAAO,EAAE,MAAM,IAAI,QAAQ,GAAG,OAAO,KAAK,YAAY,KAAK;AAGjE,IAAM,QAAQ,EAAE,YAAY,KAAM,OAAO,KAAK,QAAQ,GAAG;AAGzD,IAAM,UAAU,EAAE,YAAY,MAAM,WAAW,KAAK,SAAS,IAAI;AAGjE,IAAM,kBAAkB,EAAE,YAAY,KAAK,MAAM,EAAE;AACnD,IAAM,UAAU;AAAA;AAAA,EAErB,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,YAAY;AACd;AAOO,IAAM,aAAa,EAAE,OAAO,KAAK,KAAK,GAAG,aAAa,GAAG,QAAQ,KAAK;AAOtE,IAAM,aAAa;AAGnB,IAAM,UAAU;AAChB,IAAM,cAAc;AAGpB,IAAM,uBAAuB;AAC7B,IAAM,2BAA2B;AAGjC,IAAM,QAAQ,EAAE,OAAO,KAAK,MAAM,GAAG,SAAS,GAAG,YAAY,IAAI,aAAa,KAAK,YAAY,IAAI;AACnG,IAAM,eAAe;AAGrB,IAAM,aAAa,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,IAAI;AAGrD,IAAM,gBAAgB;AACtB,IAAM,YAAY;AAClB,IAAM,cAAc,EAAE,OAAO,KAAK,MAAM,EAAE;AAG1C,SAAS,YAAY,OAAgB,QAA8B;AACxE,MAAI,WAAW,SAAU,QAAO,MAAM,QAAQ,QAAQ;AACtD,MAAI,WAAW,OAAQ,QAAO,MAAM,QAAQ,QAAQ;AACpD,MAAI,WAAW,OAAQ,QAAO,MAAM,QAAQ,OAAO;AACnD,SAAO,MAAM,QAAQ,KAAK,GAAG;AAC/B;AAYO,SAAS,aAAa,OAAgB,OAAiC;AAC5E,MAAI,UAAU,UAAW,QAAO,EAAE,MAAM,MAAM,QAAQ,KAAK,GAAG,GAAG,cAAc,OAAO;AACtF,QAAM,SAAS,MAAM,QAAQ,KAAK;AAClC,SAAO,EAAE,MAAM,OAAO,MAAM,cAAc,OAAO,gBAAgB,OAAO;AAC1E;","names":[]}

package/dist/chunk-FB36IHCE.js

@@ -0,0 +1,219 @@
+import {
+  alertEmphasisStyles,
+  alertLayoutStyles,
+  alertVariantStyles,
+  fadeInScale,
+  getColorFromTheme,
+  getVariantIcon
+} from "./chunk-6Z4H2Y77.js";
+import {
+  defaultAriaLive,
+  resolveAlertProps,
+  testIdFor
+} from "./chunk-N3QUEBNS.js";
+import {
+  ACTIVE,
+  ALERT_EASING,
+  ALERT_RADIUS_UNITS,
+  ALERT_TRANSITION_MS,
+  CLOSE_BUTTON,
+  CLOSE_DELAY_MS,
+  COLLAPSE_MS,
+  DESCRIPTION,
+  FADE_IN,
+  FOCUS,
+  HOVER,
+  TITLE,
+  seconds
+} from "./chunk-B2Y3BABA.js";
+import {
+  resolveTestId,
+  withoutTestIdProps
+} from "./chunk-6F5IKY32.js";
+import {
+  px
+} from "./chunk-NQN5Z36J.js";
+
+// src/components/data-display/Alert/Alert.tsx
+import Close from "@mui/icons-material/Close";
+import MuiAlert from "@mui/material/Alert/index.js";
+import AlertTitle from "@mui/material/AlertTitle/index.js";
+import Box from "@mui/material/Box/index.js";
+import Collapse from "@mui/material/Collapse/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import { alpha, styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var transition = `all ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`;
+var StyledAlert = styled(MuiAlert, {
+  shouldForwardProp: (prop) => !["customVariant", "customColor", "glow", "pulse", "animate"].includes(prop)
+})(({ theme, customVariant, customColor, glow, pulse, animate }) => {
+  const colorPalette = getColorFromTheme(theme, customColor || customVariant || "info");
+  return {
+    borderRadius: theme.spacing(ALERT_RADIUS_UNITS),
+    transition,
+    position: "relative",
+    overflow: "hidden",
+    animation: animate ? `${fadeInScale} ${seconds(FADE_IN.ms)} ease-out` : "none",
+    willChange: "transform, opacity",
+    ...alertLayoutStyles(theme, colorPalette, animate),
+    // Hover effects
+    "&:hover": {
+      transform: `translateY(-${HOVER.lift}px) scale(${HOVER.scale})`,
+      boxShadow: `0 ${HOVER.shadowY}px ${HOVER.shadowBlur}px ${alpha(colorPalette.main, HOVER.shadowAlpha)}`,
+      transition,
+      ".MuiAlert-icon": {
+        transform: `scale(${HOVER.iconScale}) rotate(${HOVER.iconRotateDeg}deg)`
+      },
+      "&::before": {
+        opacity: 1
+      }
+    },
+    // Active state
+    "&:active": {
+      transform: `translateY(-${ACTIVE.lift}px) scale(${ACTIVE.scale})`,
+      transition: `transform ${seconds(ACTIVE.ms)} ease`
+    },
+    // Focus styles for accessibility
+    "&:focus-within": {
+      outline: `${FOCUS.ringWidth}px solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,
+      outlineOffset: `${FOCUS.offset}px`,
+      boxShadow: `0 0 0 ${FOCUS.haloSpread}px ${alpha(colorPalette.main, FOCUS.haloAlpha)}`,
+      transition: `all ${seconds(FOCUS.ms)} ease`
+    },
+    ...alertVariantStyles(theme, customVariant, colorPalette),
+    ...alertEmphasisStyles(colorPalette, Boolean(glow), Boolean(pulse))
+  };
+});
+var MUI_SEVERITY = {
+  danger: "error",
+  glass: "info",
+  gradient: "info"
+};
+var toMuiSeverity = (variant) => MUI_SEVERITY[variant] ?? variant;
+var AlertContent = ({ title, description, dataTestId, children }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  title && /* @__PURE__ */ jsx(
+    AlertTitle,
+    {
+      "data-testid": testIdFor(dataTestId, "title"),
+      sx: {
+        fontWeight: TITLE.fontWeight,
+        fontSize: px(TITLE.fontSize),
+        marginBottom: description ? TITLE.marginBottomUnits : 0,
+        wordWrap: "break-word",
+        overflowWrap: "break-word",
+        wordBreak: "break-word"
+      },
+      children: title
+    }
+  ),
+  description && /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "div",
+      "data-testid": testIdFor(dataTestId, "message"),
+      sx: {
+        opacity: DESCRIPTION.opacity,
+        fontSize: px(DESCRIPTION.fontSize),
+        wordWrap: "break-word",
+        overflowWrap: "break-word",
+        wordBreak: "break-word"
+      },
+      children: description
+    }
+  ),
+  children
+] });
+var AlertCloseButton = ({
+  dataTestId,
+  label,
+  onClose
+}) => /* @__PURE__ */ jsx(
+  IconButton,
+  {
+    "data-testid": testIdFor(dataTestId, "close"),
+    "aria-label": label,
+    color: "inherit",
+    size: "small",
+    onClick: onClose,
+    sx: (theme) => ({
+      transition,
+      opacity: CLOSE_BUTTON.opacity,
+      "&:hover": {
+        transform: `rotate(${CLOSE_BUTTON.hoverRotateDeg}deg) scale(${CLOSE_BUTTON.hoverScale})`,
+        opacity: 1,
+        backgroundColor: alpha(theme.palette.action.hover, CLOSE_BUTTON.washAlpha)
+      },
+      "&:focus": {
+        opacity: 1,
+        outline: "none",
+        backgroundColor: alpha(theme.palette.action.focus, CLOSE_BUTTON.washAlpha)
+      }
+    }),
+    children: /* @__PURE__ */ jsx(Close, { fontSize: "inherit" })
+  }
+);
+function dismissButton(props, dataTestId, onClose) {
+  if (!props.closable) return null;
+  return /* @__PURE__ */ jsx(AlertCloseButton, { dataTestId, label: props.closeLabel, onClose });
+}
+var Alert = React.forwardRef((alertProps, ref) => {
+  const {
+    variant,
+    color,
+    glow,
+    pulse,
+    icon,
+    showIcon,
+    onClose,
+    title,
+    description,
+    children,
+    animate,
+    role,
+    "aria-atomic": ariaAtomic,
+    ...others
+  } = resolveAlertProps(alertProps);
+  const dataTestId = resolveTestId(others, "alert");
+  const props = withoutTestIdProps(others);
+  const ariaLive = alertProps["aria-live"] ?? defaultAriaLive(variant);
+  const [open, setOpen] = React.useState(true);
+  const [isClosing, setIsClosing] = React.useState(false);
+  const handleClose = () => {
+    setIsClosing(true);
+    window.setTimeout(() => {
+      setOpen(false);
+      onClose?.();
+    }, CLOSE_DELAY_MS);
+  };
+  const severity = toMuiSeverity(variant);
+  const displayIcon = showIcon ? /* @__PURE__ */ jsx(Box, { component: "span", "data-testid": testIdFor(dataTestId, "icon"), children: icon || getVariantIcon(variant) }) : false;
+  const content = /* @__PURE__ */ jsx(AlertContent, { title, description, dataTestId, children });
+  return /* @__PURE__ */ jsx(Collapse, { in: open && !isClosing, timeout: COLLAPSE_MS, children: /* @__PURE__ */ jsx(
+    StyledAlert,
+    {
+      ref,
+      "data-testid": dataTestId,
+      severity,
+      customVariant: variant,
+      customColor: color,
+      glow,
+      pulse,
+      animate,
+      icon: displayIcon,
+      role,
+      "aria-live": ariaLive,
+      "aria-atomic": ariaAtomic,
+      tabIndex: 0,
+      action: dismissButton(alertProps, dataTestId, handleClose),
+      ...props,
+      children: content
+    }
+  ) });
+});
+Alert.displayName = "Alert";
+
+export {
+  Alert
+};
+//# sourceMappingURL=chunk-FB36IHCE.js.map