@12-apps/ui 6.34.0 → 6.36.0

package/dist/chunk-TNQDSTIA.js

@@ -0,0 +1,280 @@
+import {
+  ACTIVE_SCALE,
+  AVATAR_SIZES,
+  AVATAR_TRANSITION_EASING,
+  AVATAR_TRANSITION_MS,
+  BORDER_HALO_ALPHA,
+  BORDER_WIDTH,
+  FADE_MS,
+  FOCUS_RING,
+  GLOW,
+  HOVER,
+  LOADING_OVERLAY,
+  PULSE,
+  ROUNDED_RADIUS_UNITS,
+  SCALE_IN_MS,
+  SHIMMER,
+  SPINNER,
+  STATUS_DOT
+} from "./chunk-6ZZGK5DT.js";
+import {
+  pulseAnimation,
+  rotateAnimation,
+  scaleInAnimation,
+  shimmerAnimation
+} from "./chunk-MTEQEPNY.js";
+import {
+  absoluteInk,
+  controlNeutral,
+  neutralTones
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Avatar/Avatar.view.tsx
+import MuiAvatar from "@mui/material/Avatar/index.js";
+import Badge from "@mui/material/Badge/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import { alpha, useTheme, styled } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var getColorFromTheme = (theme, color) => {
+  const neutral = controlNeutral(theme);
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    // `danger`, not `error`. This map was keyed on MUI's word while the prop
+    // took the house one, so `danger` matched nothing and fell through to
+    // primary — a red avatar rendering blue, silently.
+    danger: theme.palette.error,
+    neutral: { main: neutral.main, contrastText: neutral.contrastText }
+  };
+  return colorMap[color] || theme.palette.primary;
+};
+var boxPx = (size) => (AVATAR_SIZES[size] || AVATAR_SIZES.md).box;
+var boxStyles = (theme, size) => {
+  const side = rem(theme, boxPx(size));
+  return { width: side, height: side };
+};
+var glyphPx = (size) => (AVATAR_SIZES[size] || AVATAR_SIZES.md).fontSize;
+var getStatusColor = (status, theme) => {
+  const statusColorMap = {
+    online: theme.palette.success.main,
+    offline: neutralTones(theme).muted,
+    away: theme.palette.warning.main,
+    busy: theme.palette.error.main
+  };
+  return statusColorMap[status] || statusColorMap.offline;
+};
+var interactiveStyles = (theme, interactive, main) => interactive ? {
+  "&:hover": {
+    transform: `scale(${HOVER.scale}) translateY(${rem(theme, -HOVER.lift)})`,
+    boxShadow: `0 ${rems(theme, HOVER.shadowY, HOVER.shadowBlur)} ${alpha(main, HOVER.shadowAlpha)}`,
+    filter: `brightness(${HOVER.brightness})`,
+    zIndex: 10
+  },
+  "&:active": { transform: `scale(${ACTIVE_SCALE})` }
+} : {};
+var loadingStyles = (isLoading, main) => isLoading ? {
+  background: `linear-gradient(
+        90deg,
+        ${alpha(main, SHIMMER.fromAlpha)},
+        ${alpha(main, SHIMMER.toAlpha)},
+        ${alpha(main, SHIMMER.fromAlpha)}
+      )`,
+  backgroundSize: "200% 100%",
+  animation: `${shimmerAnimation} ${SHIMMER.durationMs / 1e3}s ease-in-out infinite`
+} : {};
+var variantRadius = (variant, theme) => {
+  if (variant === "square") return { borderRadius: 0 };
+  if (variant === "rounded") return { borderRadius: theme.spacing(ROUNDED_RADIUS_UNITS) };
+  return { borderRadius: "50%" };
+};
+var borderedStyles = (bordered, theme) => bordered ? {
+  border: `${rem(theme, BORDER_WIDTH)} solid ${theme.palette.background.paper}`,
+  boxShadow: `0 0 0 ${rem(theme, 1)} ${alpha(theme.palette.divider, BORDER_HALO_ALPHA)}`
+} : {};
+var glowPulseStyles = (theme, glow, pulse, main) => {
+  const styles = {};
+  if (glow) {
+    styles.boxShadow = `0 0 ${rems(theme, GLOW.blur, GLOW.spread)} ${alpha(main, GLOW.alpha)} !important`;
+    styles.filter = `brightness(${GLOW.brightness})`;
+  }
+  if (pulse) {
+    styles.position = "relative";
+    styles["&::after"] = {
+      content: '""',
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      width: "100%",
+      height: "100%",
+      borderRadius: "inherit",
+      transform: "translate(-50%, -50%)",
+      backgroundColor: main,
+      opacity: PULSE.alpha,
+      animation: `${pulseAnimation(theme)} ${PULSE.durationMs / 1e3}s infinite`,
+      pointerEvents: "none",
+      zIndex: -1
+    };
+  }
+  return styles;
+};
+var STYLED_AVATAR_PROPS = [
+  "customVariant",
+  "customSize",
+  "customColor",
+  "glow",
+  "pulse",
+  "bordered",
+  "isLoading",
+  "hasError",
+  "interactive"
+];
+var StyledAvatar = styled(MuiAvatar, {
+  shouldForwardProp: (prop) => !STYLED_AVATAR_PROPS.includes(prop)
+})(
+  ({
+    theme,
+    customVariant,
+    customSize = "md",
+    customColor = "primary",
+    glow,
+    pulse,
+    bordered,
+    isLoading,
+    hasError,
+    interactive
+  }) => {
+    const palette = getColorFromTheme(theme, customColor);
+    return {
+      ...boxStyles(theme, customSize),
+      fontSize: rem(theme, glyphPx(customSize)),
+      transition: `all ${AVATAR_TRANSITION_MS / 1e3}s ${AVATAR_TRANSITION_EASING}`,
+      position: "relative",
+      overflow: "visible",
+      animation: `${scaleInAnimation} ${SCALE_IN_MS / 1e3}s ease-out`,
+      cursor: interactive ? "pointer" : "default",
+      backgroundColor: hasError ? theme.palette.error.main : palette.main,
+      color: hasError ? theme.palette.error.contrastText : palette.contrastText ?? absoluteInk(theme).white,
+      ...interactiveStyles(theme, interactive, palette.main),
+      ...loadingStyles(isLoading, palette.main),
+      ...variantRadius(customVariant, theme),
+      ...borderedStyles(bordered, theme),
+      ...glowPulseStyles(theme, glow, pulse, palette.main),
+      "&:focus-visible": {
+        outline: `${rem(theme, FOCUS_RING.width)} solid ${alpha(palette.main, FOCUS_RING.alpha)}`,
+        outlineOffset: rem(theme, FOCUS_RING.offset)
+      }
+    };
+  }
+);
+var LoadingOverlay = styled("div")(({ theme, size }) => {
+  const box = boxPx(size);
+  return {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    ...boxStyles(theme, size),
+    borderRadius: "inherit",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: alpha(theme.palette.background.paper, LOADING_OVERLAY.paperAlpha),
+    backdropFilter: `blur(${rem(theme, LOADING_OVERLAY.blur)})`,
+    "& .loading-spinner": {
+      width: rem(theme, box * SPINNER.scale),
+      height: rem(theme, box * SPINNER.scale),
+      border: `${rem(theme, SPINNER.ringWidth)} solid ${alpha(theme.palette.primary.main, SPINNER.trackAlpha)}`,
+      borderTopColor: theme.palette.primary.main,
+      borderRadius: "50%",
+      animation: `${rotateAnimation} ${SPINNER.durationMs / 1e3}s linear infinite`
+    }
+  };
+});
+var StatusBadge = styled(Badge, {
+  shouldForwardProp: (prop) => !["statusColor", "avatarSize"].includes(prop)
+})(({ theme, statusColor, avatarSize = "md" }) => {
+  const badgeSize = rem(theme, Math.max(STATUS_DOT.min, boxPx(avatarSize) * STATUS_DOT.scale));
+  return {
+    "& .MuiBadge-badge": {
+      backgroundColor: statusColor || theme.palette.success.main,
+      color: statusColor || theme.palette.success.main,
+      width: badgeSize,
+      height: badgeSize,
+      borderRadius: "50%",
+      border: `${rem(theme, STATUS_DOT.borderWidth)} solid ${theme.palette.background.paper}`,
+      "&::after": {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        borderRadius: "50%",
+        backgroundColor: "currentColor",
+        content: '""'
+      }
+    }
+  };
+});
+function AvatarSurface(props) {
+  const { showSpinner, dataTestId, clickable } = props;
+  const testId = (suffix) => dataTestId ? `${dataTestId}-${suffix}` : void 0;
+  return /* @__PURE__ */ jsx(Fade, { in: props.mounted, timeout: FADE_MS, children: /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ jsx(
+      StyledAvatar,
+      {
+        ref: props.forwardedRef,
+        className: props.className,
+        customVariant: props.variant,
+        customSize: props.size,
+        customColor: props.color,
+        glow: props.glow,
+        pulse: props.pulse,
+        bordered: props.bordered,
+        isLoading: showSpinner,
+        hasError: props.imageError,
+        interactive: clickable,
+        src: props.imgSrc,
+        alt: props.alt,
+        onClick: props.onClick,
+        tabIndex: clickable ? 0 : void 0,
+        role: clickable ? "button" : void 0,
+        "aria-label": props.ariaLabel,
+        "data-testid": dataTestId,
+        ...props.rest,
+        slotProps: { img: { onError: props.handleImageError, onLoad: props.handleImageLoad } },
+        children: showSpinner ? null : /* @__PURE__ */ jsx("span", { "data-testid": testId(props.contentType), children: props.content })
+      }
+    ),
+    showSpinner && /* @__PURE__ */ jsx(LoadingOverlay, { size: props.size, "data-testid": testId("loading"), children: /* @__PURE__ */ jsx("div", { className: "loading-spinner", "data-testid": testId("loading-spinner") }) })
+  ] }) });
+}
+function AvatarView(props) {
+  const theme = useTheme();
+  const surface = /* @__PURE__ */ jsx(AvatarSurface, { ...props });
+  if (props.variant === "status" && props.status) {
+    return /* @__PURE__ */ jsx(
+      StatusBadge,
+      {
+        overlap: "circular",
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        variant: "dot",
+        statusColor: getStatusColor(props.status, theme),
+        avatarSize: props.size,
+        "data-testid": props.dataTestId ? `${props.dataTestId}-badge` : void 0,
+        children: surface
+      }
+    );
+  }
+  return surface;
+}
+
+export {
+  AvatarView
+};
+//# sourceMappingURL=chunk-TNQDSTIA.js.map

package/dist/chunk-TNQDSTIA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Avatar/Avatar.view.tsx"],"sourcesContent":["import MuiAvatar from '@mui/material/Avatar/index.js';\nimport Badge from '@mui/material/Badge/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport { alpha, useTheme, styled } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { pulseAnimation, rotateAnimation, scaleInAnimation, shimmerAnimation } from './Avatar.animations';\nimport {\n  AVATAR_SIZES,\n  AVATAR_TRANSITION_EASING,\n  AVATAR_TRANSITION_MS,\n  ACTIVE_SCALE,\n  BORDER_HALO_ALPHA,\n  BORDER_WIDTH,\n  FADE_MS,\n  FOCUS_RING,\n  GLOW,\n  HOVER,\n  LOADING_OVERLAY,\n  PULSE,\n  ROUNDED_RADIUS_UNITS,\n  SCALE_IN_MS,\n  SHIMMER,\n  SPINNER,\n  STATUS_DOT,\n} from './Avatar.metrics';\nimport type { AvatarSize, AvatarStatus, ContentType } from './Avatar.types';\nimport { absoluteInk, controlNeutral, neutralTones } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\nexport type { ContentType };\n\n\ninterface PaletteLike {\n  main: string;\n  contrastText?: string;\n  light?: string;\n  dark?: string;\n}\n\nconst getColorFromTheme = (theme: Theme, color: string): PaletteLike => {\n  const neutral = controlNeutral(theme);\n  const colorMap: Record<string, PaletteLike> = {\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`, not `error`. This map was keyed on MUI's word while the prop\n    // took the house one, so `danger` matched nothing and fell through to\n    // primary — a red avatar rendering blue, silently.\n    danger: theme.palette.error,\n    neutral: { main: neutral.main, contrastText: neutral.contrastText },\n  };\n\n  return colorMap[color] || theme.palette.primary;\n};\n\n// Read from the shared metrics, not restated: the native `Avatar` reads the\n// same table, so the two renderers cannot disagree on a box. Design px; every\n// read below draws it through the type scale.\nconst boxPx = (size: AvatarSize): number => (AVATAR_SIZES[size] || AVATAR_SIZES.md).box;\n\n/** The square box, as rem through the theme. */\nconst boxStyles = (theme: Theme, size: AvatarSize): CSSObject => {\n  const side = rem(theme, boxPx(size));\n  return { width: side, height: side };\n};\n\n/** The glyph size in design px, read through the type scale where it is drawn. */\nconst glyphPx = (size: AvatarSize): number => (AVATAR_SIZES[size] || AVATAR_SIZES.md).fontSize;\n\nconst getStatusColor = (status: AvatarStatus, theme: Theme): string => {\n  // The same four decisions the native half reads out of `Avatar.metrics`,\n  // against MUI's `Theme` rather than the shared one.\n  const statusColorMap: Record<AvatarStatus, string> = {\n    online: theme.palette.success.main,\n    offline: neutralTones(theme).muted,\n    away: theme.palette.warning.main,\n    busy: theme.palette.error.main,\n  };\n\n  return statusColorMap[status] || statusColorMap.offline;\n};\n\n/** Hover/active lift, only when the avatar is interactive. */\nconst interactiveStyles = (theme: Theme, interactive: boolean | undefined, main: string): CSSObject =>\n  interactive\n    ? {\n        '&:hover': {\n          transform: `scale(${HOVER.scale}) translateY(${rem(theme, -HOVER.lift)})`,\n          boxShadow: `0 ${rems(theme, HOVER.shadowY, HOVER.shadowBlur)} ${alpha(main, HOVER.shadowAlpha)}`,\n          filter: `brightness(${HOVER.brightness})`,\n          zIndex: 10,\n        },\n        '&:active': { transform: `scale(${ACTIVE_SCALE})` },\n      }\n    : {};\n\n/** Shimmer gradient while the image loads. */\nconst loadingStyles = (isLoading: boolean | undefined, main: string): CSSObject =>\n  isLoading\n    ? {\n        background: `linear-gradient(\n        90deg,\n        ${alpha(main, SHIMMER.fromAlpha)},\n        ${alpha(main, SHIMMER.toAlpha)},\n        ${alpha(main, SHIMMER.fromAlpha)}\n      )`,\n        backgroundSize: '200% 100%',\n        animation: `${shimmerAnimation} ${SHIMMER.durationMs / 1000}s ease-in-out infinite`,\n      }\n    : {};\n\n/** Corner radius per shape variant (circle/status are round). */\nconst variantRadius = (variant: string | undefined, theme: Theme): CSSObject => {\n  if (variant === 'square') return { borderRadius: 0 };\n  if (variant === 'rounded') return { borderRadius: theme.spacing(ROUNDED_RADIUS_UNITS) };\n  return { borderRadius: '50%' };\n};\n\n/** Paper ring when bordered (e.g. inside an AvatarGroup). */\nconst borderedStyles = (bordered: boolean | undefined, theme: Theme): CSSObject =>\n  bordered\n    ? {\n        border: `${rem(theme, BORDER_WIDTH)} solid ${theme.palette.background.paper}`,\n        boxShadow: `0 0 0 ${rem(theme, 1)} ${alpha(theme.palette.divider, BORDER_HALO_ALPHA)}`,\n      }\n    : {};\n\n/** Glow adds the halo; pulse adds the expanding ring — either or both. */\nconst glowPulseStyles = (\n  theme: Theme,\n  glow: boolean | undefined,\n  pulse: boolean | undefined,\n  main: string,\n): CSSObject => {\n  const styles: CSSObject = {};\n  if (glow) {\n    styles.boxShadow = `0 0 ${rems(theme, GLOW.blur, GLOW.spread)} ${alpha(main, GLOW.alpha)} !important`;\n    styles.filter = `brightness(${GLOW.brightness})`;\n  }\n  if (pulse) {\n    styles.position = 'relative';\n    styles['&::after'] = {\n      content: '\"\"',\n      position: 'absolute',\n      top: '50%',\n      left: '50%',\n      width: '100%',\n      height: '100%',\n      borderRadius: 'inherit',\n      transform: 'translate(-50%, -50%)',\n      backgroundColor: main,\n      opacity: PULSE.alpha,\n      animation: `${pulseAnimation(theme)} ${PULSE.durationMs / 1000}s infinite`,\n      pointerEvents: 'none',\n      zIndex: -1,\n    };\n  }\n  return styles;\n};\n\ninterface StyledAvatarProps {\n  customVariant?: string;\n  customSize?: AvatarSize;\n  customColor?: string;\n  glow?: boolean;\n  pulse?: boolean;\n  bordered?: boolean;\n  isLoading?: boolean;\n  hasError?: boolean;\n  interactive?: boolean;\n}\n\nconst STYLED_AVATAR_PROPS = [\n  'customVariant',\n  'customSize',\n  'customColor',\n  'glow',\n  'pulse',\n  'bordered',\n  'isLoading',\n  'hasError',\n  'interactive',\n];\n\nconst StyledAvatar = styled(MuiAvatar, {\n  shouldForwardProp: (prop) => !STYLED_AVATAR_PROPS.includes(prop as string),\n})<StyledAvatarProps>(\n  ({\n    theme,\n    customVariant,\n    customSize = 'md',\n    customColor = 'primary',\n    glow,\n    pulse,\n    bordered,\n    isLoading,\n    hasError,\n    interactive,\n  }) => {\n    const palette = getColorFromTheme(theme, customColor);\n    return {\n      ...boxStyles(theme, customSize),\n      fontSize: rem(theme, glyphPx(customSize)),\n      transition: `all ${AVATAR_TRANSITION_MS / 1000}s ${AVATAR_TRANSITION_EASING}`,\n      position: 'relative',\n      overflow: 'visible',\n      animation: `${scaleInAnimation} ${SCALE_IN_MS / 1000}s ease-out`,\n      cursor: interactive ? 'pointer' : 'default',\n      backgroundColor: hasError ? theme.palette.error.main : palette.main,\n      color: hasError ? theme.palette.error.contrastText : (palette.contrastText ?? absoluteInk(theme).white),\n      ...interactiveStyles(theme, interactive, palette.main),\n      ...loadingStyles(isLoading, palette.main),\n      ...variantRadius(customVariant, theme),\n      ...borderedStyles(bordered, theme),\n      ...glowPulseStyles(theme, glow, pulse, palette.main),\n      '&:focus-visible': {\n        outline: `${rem(theme, FOCUS_RING.width)} solid ${alpha(palette.main, FOCUS_RING.alpha)}`,\n        outlineOffset: rem(theme, FOCUS_RING.offset),\n      },\n    };\n  },\n);\n\nconst LoadingOverlay = styled('div')<{ size: AvatarSize }>(({ theme, size }) => {\n  const box = boxPx(size);\n  return {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    ...boxStyles(theme, size),\n    borderRadius: 'inherit',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: alpha(theme.palette.background.paper, LOADING_OVERLAY.paperAlpha),\n    backdropFilter: `blur(${rem(theme, LOADING_OVERLAY.blur)})`,\n    '& .loading-spinner': {\n      width: rem(theme, box * SPINNER.scale),\n      height: rem(theme, box * SPINNER.scale),\n      border: `${rem(theme, SPINNER.ringWidth)} solid ${alpha(theme.palette.primary.main, SPINNER.trackAlpha)}`,\n      borderTopColor: theme.palette.primary.main,\n      borderRadius: '50%',\n      animation: `${rotateAnimation} ${SPINNER.durationMs / 1000}s linear infinite`,\n    },\n  };\n});\n\nconst StatusBadge = styled(Badge, {\n  shouldForwardProp: (prop) => !['statusColor', 'avatarSize'].includes(prop as string),\n})<{\n  statusColor?: string;\n  avatarSize?: AvatarSize;\n}>(({ theme, statusColor, avatarSize = 'md' }) => {\n  const badgeSize = rem(theme, Math.max(STATUS_DOT.min, boxPx(avatarSize) * STATUS_DOT.scale));\n\n  return {\n    '& .MuiBadge-badge': {\n      backgroundColor: statusColor || theme.palette.success.main,\n      color: statusColor || theme.palette.success.main,\n      width: badgeSize,\n      height: badgeSize,\n      borderRadius: '50%',\n      border: `${rem(theme, STATUS_DOT.borderWidth)} solid ${theme.palette.background.paper}`,\n      '&::after': {\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        borderRadius: '50%',\n        backgroundColor: 'currentColor',\n        content: '\"\"',\n      },\n    },\n  };\n});\n\nexport interface AvatarViewProps {\n  mounted: boolean;\n  variant: string;\n  size: AvatarSize;\n  color: string;\n  glow: boolean;\n  pulse: boolean;\n  bordered: boolean;\n  showSpinner: boolean;\n  imageError: boolean;\n  clickable: boolean;\n  imgSrc?: string;\n  alt?: string;\n  ariaLabel: string;\n  content: React.ReactNode;\n  contentType: ContentType;\n  className?: string;\n  dataTestId?: string;\n  status?: AvatarStatus;\n  forwardedRef: React.Ref<HTMLDivElement>;\n  onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n  handleImageError: React.ReactEventHandler;\n  handleImageLoad: () => void;\n  rest: Record<string, unknown>;\n}\n\n/** The avatar box itself: the styled MUI avatar plus the loading overlay. */\nfunction AvatarSurface(props: AvatarViewProps): React.JSX.Element {\n  const { showSpinner, dataTestId, clickable } = props;\n  const testId = (suffix: string): string | undefined =>\n    dataTestId ? `${dataTestId}-${suffix}` : undefined;\n\n  return (\n    <Fade in={props.mounted} timeout={FADE_MS}>\n      <div style={{ position: 'relative', display: 'inline-block' }}>\n        <StyledAvatar\n          ref={props.forwardedRef}\n          className={props.className}\n          customVariant={props.variant}\n          customSize={props.size}\n          customColor={props.color}\n          glow={props.glow}\n          pulse={props.pulse}\n          bordered={props.bordered}\n          isLoading={showSpinner}\n          hasError={props.imageError}\n          interactive={clickable}\n          src={props.imgSrc}\n          alt={props.alt}\n          onClick={props.onClick}\n          tabIndex={clickable ? 0 : undefined}\n          role={clickable ? 'button' : undefined}\n          aria-label={props.ariaLabel}\n          data-testid={dataTestId}\n          {...props.rest}\n          // Load/error fire on the inner <img>, not the root — and don't bubble.\n          // Wiring them via the img slot lets `imageLoading` actually clear (else\n          // the spinner overlays the avatar forever whenever `src` is set). Keep\n          // after {...props.rest} so a consumer-supplied slotProps can't override\n          // and detach these handlers.\n          slotProps={{ img: { onError: props.handleImageError, onLoad: props.handleImageLoad } }}\n        >\n          {showSpinner ? null : (\n            <span data-testid={testId(props.contentType)}>{props.content}</span>\n          )}\n        </StyledAvatar>\n        {showSpinner && (\n          <LoadingOverlay size={props.size} data-testid={testId('loading')}>\n            <div className=\"loading-spinner\" data-testid={testId('loading-spinner')} />\n          </LoadingOverlay>\n        )}\n      </div>\n    </Fade>\n  );\n}\n\n/** Presentational avatar: the surface, wrapped in a status dot badge when requested. */\nexport function AvatarView(props: AvatarViewProps): React.JSX.Element {\n  const theme = useTheme();\n  const surface = <AvatarSurface {...props} />;\n\n  if (props.variant === 'status' && props.status) {\n    return (\n      <StatusBadge\n        overlap=\"circular\"\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        variant=\"dot\"\n        statusColor={getStatusColor(props.status, theme)}\n        avatarSize={props.size}\n        data-testid={props.dataTestId ? `${props.dataTestId}-badge` : undefined}\n      >\n        {surface}\n      </StatusBadge>\n    );\n  }\n\n  return surface;\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-TOXTJ7MU.js

@@ -0,0 +1,144 @@
+import {
+  CategorySectionHeading,
+  CategoryTreeRow
+} from "./chunk-XWWFBH2G.js";
+import {
+  categoryCheckState,
+  isLeafCategory,
+  leavesOf
+} from "./chunk-PN4HVM43.js";
+import {
+  emptySx,
+  listSx,
+  skeletonSx
+} from "./chunk-BXAL7OIS.js";
+
+// src/components/form/CategorySelect/CategoryPanelList.tsx
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Skeleton from "@mui/material/Skeleton/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SENTENCE_CASE = { textTransform: "none" };
+var SKELETON_ROWS = 6;
+function LoadingRows() {
+  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: SKELETON_ROWS }, (_unused, index) => /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", sx: skeletonSx }, index)) });
+}
+function EmptyCatalogue({
+  onCreateCategory,
+  dataTestId,
+  copy
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: emptySx, "data-testid": `${dataTestId}-empty-catalogue`, children: [
+    /* @__PURE__ */ jsx("strong", { children: copy.emptyTitle }),
+    /* @__PURE__ */ jsx("p", { children: copy.purpose }),
+    onCreateCategory && /* @__PURE__ */ jsx(Button, { variant: "contained", size: "small", sx: SENTENCE_CASE, onClick: () => onCreateCategory(), children: copy.createCategory })
+  ] });
+}
+function NoResults({
+  query,
+  onClearQuery,
+  onCreateCategory,
+  dataTestId,
+  copy
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: emptySx, "data-testid": `${dataTestId}-no-results`, children: [
+    /* @__PURE__ */ jsx("strong", { children: copy.noResults.title(query) }),
+    /* @__PURE__ */ jsx("p", { children: copy.noResults.hint }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: "6px", justifyContent: "center" }, children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "small", sx: SENTENCE_CASE, onClick: onClearQuery, children: copy.noResults.clearSearch }),
+      onCreateCategory && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "contained",
+          size: "small",
+          sx: SENTENCE_CASE,
+          "data-testid": `${dataTestId}-create`,
+          onClick: () => onCreateCategory(query.trim()),
+          children: copy.noResults.create(query.trim())
+        }
+      )
+    ] })
+  ] });
+}
+function CategoryNodeRows({
+  node,
+  depth,
+  props
+}) {
+  const { draft, query, single, allowParentSelection, rowIds, activeIndex, sheet } = props;
+  const categoryId = node.category.id;
+  const leaf = isLeafCategory(node);
+  const expanded = props.isExpanded(categoryId);
+  const selectable = allowParentSelection || leaf;
+  const asHeading = single && !selectable && !props.deepTree;
+  const selectedCount = leaf ? 0 : leavesOf(node).filter((id) => draft.has(id)).length;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    asHeading ? /* @__PURE__ */ jsx(CategorySectionHeading, { option: node.category, query }) : /* @__PURE__ */ jsx(
+      CategoryTreeRow,
+      {
+        option: node.category,
+        query,
+        depth,
+        branch: !leaf,
+        expanded,
+        active: rowIds[activeIndex] === categoryId,
+        sheet,
+        ...selectable ? { checkState: categoryCheckState(node, draft) } : {},
+        single,
+        selectedCount,
+        showCounts: props.showCounts,
+        onToggleExpanded: () => props.onToggleExpanded(categoryId),
+        onActivate: () => leaf ? props.onActivateSubcategory(categoryId) : props.onActivateCategory(node),
+        dataTestId: props.dataTestId,
+        copy: props.copy
+      }
+    ),
+    (expanded || asHeading) && node.subcategories.map((sub) => /* @__PURE__ */ jsx(CategoryNodeRows, { node: sub, depth: depth + 1, props }, sub.category.id))
+  ] });
+}
+function CategoryPanelList(props) {
+  const { groups, loading, query, listRef, sheet, dataTestId, copy } = props;
+  const body = () => {
+    if (loading) return /* @__PURE__ */ jsx(LoadingRows, {});
+    if (groups.length === 0 && query.trim().length > 0) {
+      return /* @__PURE__ */ jsx(
+        NoResults,
+        {
+          copy,
+          query,
+          onClearQuery: props.onClearQuery,
+          onCreateCategory: props.onCreateCategory,
+          dataTestId
+        }
+      );
+    }
+    if (groups.length === 0) {
+      return /* @__PURE__ */ jsx(
+        EmptyCatalogue,
+        {
+          copy,
+          onCreateCategory: props.onCreateCategory,
+          dataTestId
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children: groups.map((group) => /* @__PURE__ */ jsx(CategoryNodeRows, { node: group, depth: 0, props }, group.category.id)) });
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-multiselectable": props.single ? void 0 : true,
+      tabIndex: -1,
+      "data-testid": `${dataTestId}-list`,
+      sx: listSx(sheet),
+      children: body()
+    }
+  );
+}
+
+export {
+  CategoryPanelList
+};
+//# sourceMappingURL=chunk-TOXTJ7MU.js.map