@12-apps/ui 6.11.0 → 6.11.1

package/dist/chunk-2S2SB5C7.js

@@ -1,145 +0,0 @@
-import {
-  Skeleton
-} from "./chunk-7XUYRPRQ.js";
-
-// src/components/data-display/LoadingState/LoadingState.tsx
-import { Box, CircularProgress, Stack, Typography, useTheme } from "@mui/material";
-import React from "react";
-
-// src/components/data-display/LoadingState/LoadingState.helpers.ts
-var SIZE_MAP = {
-  xs: { spinner: 16, text: "body2" },
-  sm: { spinner: 24, text: "body2" },
-  md: { spinner: 40, text: "body1" },
-  lg: { spinner: 56, text: "h6" },
-  xl: { spinner: 64, text: "h6" }
-};
-var SKELETON_ROW_HEIGHT = {
-  xs: 14,
-  sm: 20,
-  md: 28,
-  lg: 36,
-  xl: 44
-};
-var LOADING_STATE_DEFAULTS = {
-  variant: "spinner",
-  size: "md",
-  skeletonRows: 3
-};
-var definedProps = (props) => Object.fromEntries(
-  Object.entries(props).filter(([, value]) => value !== void 0)
-);
-var resolveLoadingStateProps = (props) => ({ ...LOADING_STATE_DEFAULTS, ...definedProps(props) });
-var makeTestIds = (dataTestId) => ({
-  base: dataTestId || "loading-state",
-  optional: (suffix) => dataTestId ? `${dataTestId}-${suffix}` : void 0,
-  named: (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `loading-state-${suffix}`
-});
-
-// src/components/data-display/LoadingState/LoadingState.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var LoadingMessage = ({ message, size, testIds, sx }) => message ? /* @__PURE__ */ jsx(
-  Typography,
-  {
-    variant: SIZE_MAP[size].text,
-    color: "text.secondary",
-    sx,
-    "data-testid": testIds.named("message"),
-    children: message
-  }
-) : null;
-var SkeletonView = ({
-  message,
-  size,
-  skeletonRows,
-  className,
-  testIds
-}) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      role: "status",
-      "aria-busy": "true",
-      "aria-label": message || "Loading content",
-      className,
-      "data-testid": testIds.base,
-      sx: {
-        width: "100%",
-        padding: theme.spacing(3)
-      },
-      children: [
-        /* @__PURE__ */ jsx(Stack, { spacing: 2, children: Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsx(
-          Skeleton,
-          {
-            variant: "rectangular",
-            animation: "wave",
-            height: SKELETON_ROW_HEIGHT[size],
-            width: index === skeletonRows - 1 ? "60%" : "100%",
-            borderRadius: 4,
-            "data-testid": testIds.optional(`skeleton-${index}`)
-          },
-          `skeleton-row-${index}`
-        )) }),
-        /* @__PURE__ */ jsx(
-          LoadingMessage,
-          {
-            message,
-            size,
-            testIds,
-            sx: { mt: 2, textAlign: "center" }
-          }
-        )
-      ]
-    }
-  );
-};
-var SpinnerView = ({ message, size, className, testIds }) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      role: "status",
-      "aria-busy": "true",
-      "aria-label": message || "Loading",
-      className,
-      "data-testid": testIds.base,
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: theme.spacing(6),
-        minHeight: 200,
-        gap: theme.spacing(2)
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          CircularProgress,
-          {
-            size: SIZE_MAP[size].spinner,
-            "data-testid": testIds.named("spinner")
-          }
-        ),
-        /* @__PURE__ */ jsx(LoadingMessage, { message, size, testIds })
-      ]
-    }
-  );
-};
-var LoadingState = React.memo((rawProps) => {
-  const { variant, message, size, skeletonRows, className, dataTestId } = resolveLoadingStateProps(rawProps);
-  const viewProps = {
-    message,
-    size,
-    skeletonRows,
-    className,
-    testIds: makeTestIds(dataTestId)
-  };
-  return variant === "skeleton" ? /* @__PURE__ */ jsx(SkeletonView, { ...viewProps }) : /* @__PURE__ */ jsx(SpinnerView, { ...viewProps });
-});
-LoadingState.displayName = "LoadingState";
-
-export {
-  LoadingState
-};
-//# sourceMappingURL=chunk-2S2SB5C7.js.map

package/dist/chunk-2S2SB5C7.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/LoadingState/LoadingState.tsx","../src/components/data-display/LoadingState/LoadingState.helpers.ts"],"sourcesContent":["import { Box, CircularProgress, Stack, Typography, useTheme } from '@mui/material';\nimport React from 'react';\n\nimport { Skeleton } from '../../layout/Skeleton/Skeleton';\n\nimport {\n  makeTestIds,\n  resolveLoadingStateProps,\n  SIZE_MAP,\n  SKELETON_ROW_HEIGHT,\n} from './LoadingState.helpers';\nimport type { LoadingStateProps, LoadingStateSize } from './LoadingState.types';\n\ninterface ViewProps {\n  message?: string;\n  size: LoadingStateSize;\n  skeletonRows: number;\n  className?: string;\n  testIds: ReturnType<typeof makeTestIds>;\n}\n\nconst LoadingMessage: React.FC<{\n  message?: string;\n  size: LoadingStateSize;\n  testIds: ViewProps['testIds'];\n  sx?: object;\n}> = ({ message, size, testIds, sx }) =>\n  message ? (\n    <Typography\n      variant={SIZE_MAP[size].text}\n      color=\"text.secondary\"\n      sx={sx}\n      data-testid={testIds.named('message')}\n    >\n      {message}\n    </Typography>\n  ) : null;\n\nconst SkeletonView: React.FC<ViewProps> = ({\n  message,\n  size,\n  skeletonRows,\n  className,\n  testIds,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={message || 'Loading content'}\n      className={className}\n      data-testid={testIds.base}\n      sx={{\n        width: '100%',\n        padding: theme.spacing(3),\n      }}\n    >\n      <Stack spacing={2}>\n        {Array.from({ length: skeletonRows }).map((_, index) => (\n          <Skeleton\n            key={`skeleton-row-${index}`}\n            variant=\"rectangular\"\n            animation=\"wave\"\n            height={SKELETON_ROW_HEIGHT[size]}\n            // The last row is short, so the block reads as a paragraph of text.\n            width={index === skeletonRows - 1 ? '60%' : '100%'}\n            borderRadius={4}\n            data-testid={testIds.optional(`skeleton-${index}`)}\n          />\n        ))}\n      </Stack>\n      <LoadingMessage\n        message={message}\n        size={size}\n        testIds={testIds}\n        sx={{ mt: 2, textAlign: 'center' }}\n      />\n    </Box>\n  );\n};\n\nconst SpinnerView: React.FC<ViewProps> = ({ message, size, className, testIds }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={message || 'Loading'}\n      className={className}\n      data-testid={testIds.base}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        padding: theme.spacing(6),\n        minHeight: 200,\n        gap: theme.spacing(2),\n      }}\n    >\n      <CircularProgress\n        size={SIZE_MAP[size].spinner}\n        data-testid={testIds.named('spinner')}\n      />\n      <LoadingMessage message={message} size={size} testIds={testIds} />\n    </Box>\n  );\n};\n\nexport const LoadingState: React.FC<LoadingStateProps> = React.memo((rawProps) => {\n  const { variant, message, size, skeletonRows, className, dataTestId } =\n    resolveLoadingStateProps(rawProps);\n  const viewProps: ViewProps = {\n    message,\n    size,\n    skeletonRows,\n    className,\n    testIds: makeTestIds(dataTestId),\n  };\n\n  return variant === 'skeleton' ? (\n    <SkeletonView {...viewProps} />\n  ) : (\n    <SpinnerView {...viewProps} />\n  );\n});\n\nLoadingState.displayName = 'LoadingState';\n\nexport default LoadingState;\n","import type { LoadingStateProps, LoadingStateSize } from './LoadingState.types';\n\nexport const SIZE_MAP: Record<\n  LoadingStateSize,\n  { spinner: number; text: 'body2' | 'body1' | 'h6' }\n> = {\n  xs: { spinner: 16, text: 'body2' },\n  sm: { spinner: 24, text: 'body2' },\n  md: { spinner: 40, text: 'body1' },\n  lg: { spinner: 56, text: 'h6' },\n  xl: { spinner: 64, text: 'h6' },\n};\n\nexport const SKELETON_ROW_HEIGHT: Record<LoadingStateSize, number> = {\n  xs: 14,\n  sm: 20,\n  md: 28,\n  lg: 36,\n  xl: 44,\n};\n\ntype LoadingStateDefaultedKeys = 'variant' | 'size' | 'skeletonRows';\n\ntype ResolvedLoadingStateProps = LoadingStateProps &\n  Required<Pick<LoadingStateProps, LoadingStateDefaultedKeys>>;\n\nconst LOADING_STATE_DEFAULTS: Pick<LoadingStateProps, LoadingStateDefaultedKeys> = {\n  variant: 'spinner',\n  size: 'md',\n  skeletonRows: 3,\n};\n\n// Strips explicitly-undefined props before the merge, so `size={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = (props: LoadingStateProps): Partial<LoadingStateProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<LoadingStateProps>;\n\nexport const resolveLoadingStateProps = (\n  props: LoadingStateProps,\n): ResolvedLoadingStateProps =>\n  ({ ...LOADING_STATE_DEFAULTS, ...definedProps(props) }) as ResolvedLoadingStateProps;\n\n/**\n * Test ids come in three flavours here: the container falls back to a bare\n * `loading-state`, the labelled parts to `loading-state-<part>`, and the\n * skeleton rows to nothing at all when the caller supplied no base id.\n */\nexport const makeTestIds = (dataTestId?: string) => ({\n  base: dataTestId || 'loading-state',\n  optional: (suffix: string): string | undefined =>\n    dataTestId ? `${dataTestId}-${suffix}` : undefined,\n  named: (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `loading-state-${suffix}`,\n});\n"],"mappings":"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","names":[]}

package/dist/chunk-2XFGVZTZ.js

@@ -1,449 +0,0 @@
-// src/components/data-display/Avatar/Avatar.tsx
-import BrokenImage from "@mui/icons-material/BrokenImage";
-import Person from "@mui/icons-material/Person";
-import { styled as styled2 } from "@mui/material";
-import React, { useCallback, useEffect, useState } from "react";
-
-// src/components/data-display/Avatar/Avatar.view.tsx
-import { alpha, Avatar as MuiAvatar, Badge, Fade, keyframes, useTheme } from "@mui/material";
-import { styled } from "@mui/material";
-import { jsx, jsxs } from "react/jsx-runtime";
-var pulseAnimation = keyframes`
-  0% {
-    box-shadow: 0 0 0 0 currentColor;
-    opacity: 1;
-  }
-  70% {
-    box-shadow: 0 0 0 10px currentColor;
-    opacity: 0;
-  }
-  100% {
-    box-shadow: 0 0 0 0 currentColor;
-    opacity: 0;
-  }
-`;
-var shimmerAnimation = keyframes`
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-`;
-var scaleInAnimation = keyframes`
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-`;
-var rotateAnimation = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`;
-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`, 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: theme.palette.grey[700], contrastText: "#fff" }
-  };
-  return colorMap[color] || theme.palette.primary;
-};
-var getSizeStyles = (size) => {
-  const sizeMap = {
-    xs: { width: 24, height: 24, fontSize: "0.75rem" },
-    sm: { width: 32, height: 32, fontSize: "0.875rem" },
-    md: { width: 40, height: 40, fontSize: "1rem" },
-    lg: { width: 48, height: 48, fontSize: "1.125rem" },
-    xl: { width: 64, height: 64, fontSize: "1.5rem" },
-    xxl: { width: 80, height: 80, fontSize: "2rem" }
-  };
-  return sizeMap[size] || sizeMap.md;
-};
-var getStatusColor = (status, theme) => {
-  const statusColorMap = {
-    online: theme.palette.success.main,
-    offline: theme.palette.grey[500],
-    away: theme.palette.warning.main,
-    busy: theme.palette.error.main
-  };
-  return statusColorMap[status] || statusColorMap.offline;
-};
-var interactiveStyles = (interactive, main) => interactive ? {
-  "&:hover": {
-    transform: "scale(1.1) translateY(-2px)",
-    boxShadow: `0 8px 20px ${alpha(main, 0.3)}`,
-    filter: "brightness(1.1)",
-    zIndex: 10
-  },
-  "&:active": { transform: "scale(1.05)" }
-} : {};
-var loadingStyles = (isLoading, main) => isLoading ? {
-  background: `linear-gradient(
-        90deg,
-        ${alpha(main, 0.6)},
-        ${alpha(main, 0.8)},
-        ${alpha(main, 0.6)}
-      )`,
-  backgroundSize: "200% 100%",
-  animation: `${shimmerAnimation} 1.5s ease-in-out infinite`
-} : {};
-var variantRadius = (variant, theme) => {
-  if (variant === "square") return { borderRadius: 0 };
-  if (variant === "rounded") return { borderRadius: theme.spacing(1) };
-  return { borderRadius: "50%" };
-};
-var borderedStyles = (bordered, theme) => bordered ? {
-  border: `2px solid ${theme.palette.background.paper}`,
-  boxShadow: `0 0 0 1px ${alpha(theme.palette.divider, 0.2)}`
-} : {};
-var glowPulseStyles = (glow, pulse, main) => {
-  const styles = {};
-  if (glow) {
-    styles.boxShadow = `0 0 20px 5px ${alpha(main, 0.4)} !important`;
-    styles.filter = "brightness(1.05)";
-  }
-  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: 0.3,
-      animation: `${pulseAnimation} 2s 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 {
-      ...getSizeStyles(customSize),
-      transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-      position: "relative",
-      overflow: "visible",
-      animation: `${scaleInAnimation} 0.3s ease-out`,
-      cursor: interactive ? "pointer" : "default",
-      backgroundColor: hasError ? theme.palette.error.main : palette.main,
-      color: hasError ? theme.palette.error.contrastText : palette.contrastText ?? "#fff",
-      ...interactiveStyles(interactive, palette.main),
-      ...loadingStyles(isLoading, palette.main),
-      ...variantRadius(customVariant, theme),
-      ...borderedStyles(bordered, theme),
-      ...glowPulseStyles(glow, pulse, palette.main),
-      "&:focus-visible": {
-        outline: `3px solid ${alpha(palette.main, 0.5)}`,
-        outlineOffset: 2
-      }
-    };
-  }
-);
-var LoadingOverlay = styled("div")(({ theme, size }) => {
-  const sizeStyles = getSizeStyles(size);
-  return {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: sizeStyles.width,
-    height: sizeStyles.height,
-    borderRadius: "inherit",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: alpha(theme.palette.background.paper, 0.7),
-    backdropFilter: "blur(2px)",
-    "& .loading-spinner": {
-      width: sizeStyles.width * 0.4,
-      height: sizeStyles.height * 0.4,
-      border: `2px solid ${alpha(theme.palette.primary.main, 0.3)}`,
-      borderTopColor: theme.palette.primary.main,
-      borderRadius: "50%",
-      animation: `${rotateAnimation} 0.8s linear infinite`
-    }
-  };
-});
-var StatusBadge = styled(Badge, {
-  shouldForwardProp: (prop) => !["statusColor", "avatarSize"].includes(prop)
-})(({ theme, statusColor, avatarSize = "md" }) => {
-  const sizeStyles = getSizeStyles(avatarSize);
-  const badgeSize = Math.max(8, sizeStyles.width * 0.2);
-  return {
-    "& .MuiBadge-badge": {
-      backgroundColor: statusColor || theme.palette.success.main,
-      color: statusColor || theme.palette.success.main,
-      width: badgeSize,
-      height: badgeSize,
-      borderRadius: "50%",
-      border: `2px 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: 300, 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;
-}
-
-// src/components/data-display/Avatar/Avatar.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var AVATAR_DEFAULTS = {
-  variant: "circle",
-  size: "md",
-  glow: false,
-  pulse: false,
-  bordered: false,
-  color: "primary",
-  loading: false,
-  interactive: false,
-  showFallbackOnError: true,
-  animationDelay: 0
-};
-function resolveContent(args) {
-  const { children, fallback, icon, imageError, showFallbackOnError } = args;
-  if (imageError && showFallbackOnError) {
-    if (fallback) return { content: fallback, contentType: "fallback" };
-    if (icon) return { content: icon, contentType: "icon" };
-    return { content: /* @__PURE__ */ jsx2(BrokenImage, {}), contentType: "icon" };
-  }
-  if (children) return { content: children, contentType: "children" };
-  if (fallback) return { content: fallback, contentType: "fallback" };
-  if (icon) return { content: icon, contentType: "icon" };
-  return { content: /* @__PURE__ */ jsx2(Person, {}), contentType: "default" };
-}
-function useMountedFade(animationDelay) {
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
-    const timer = window.setTimeout(() => setMounted(true), animationDelay);
-    return () => window.clearTimeout(timer);
-  }, [animationDelay]);
-  return mounted;
-}
-function useImageState(src, onError) {
-  const [imageError, setImageError] = useState(false);
-  const [imageLoading, setImageLoading] = useState(!!src);
-  useEffect(() => {
-    setImageError(false);
-    setImageLoading(!!src);
-  }, [src]);
-  const handleImageError = useCallback(
-    (event) => {
-      setImageError(true);
-      setImageLoading(false);
-      onError?.(event);
-    },
-    [onError]
-  );
-  const handleImageLoad = useCallback(() => setImageLoading(false), []);
-  return { imageError, imageLoading, handleImageError, handleImageLoad };
-}
-function useAvatarModel(raw, ref) {
-  const {
-    variant,
-    size,
-    glow,
-    pulse,
-    status,
-    fallback,
-    icon,
-    bordered,
-    color,
-    src,
-    alt,
-    children,
-    loading,
-    onError,
-    onClick,
-    interactive,
-    showFallbackOnError,
-    animationDelay,
-    className,
-    dataTestId,
-    ...rest
-  } = { ...AVATAR_DEFAULTS, ...raw };
-  const mounted = useMountedFade(animationDelay);
-  const { imageError, imageLoading, handleImageError, handleImageLoad } = useImageState(src, onError);
-  const handleClick = useCallback(
-    (event) => onClick?.(event),
-    [onClick]
-  );
-  const { content, contentType } = resolveContent({
-    children,
-    fallback,
-    icon,
-    imageError,
-    showFallbackOnError
-  });
-  return {
-    mounted,
-    variant,
-    size,
-    color,
-    glow,
-    pulse,
-    bordered,
-    showSpinner: loading || imageLoading,
-    imageError,
-    clickable: interactive || !!onClick,
-    imgSrc: imageError ? void 0 : src,
-    alt,
-    ariaLabel: rest["aria-label"] || alt || "Avatar",
-    content,
-    contentType,
-    className,
-    dataTestId,
-    status,
-    forwardedRef: ref,
-    onClick: handleClick,
-    handleImageError,
-    handleImageLoad,
-    rest
-  };
-}
-var Avatar = React.forwardRef((props, ref) => /* @__PURE__ */ jsx2(AvatarView, { ...useAvatarModel(props, ref) }));
-Avatar.displayName = "Avatar";
-var AvatarGroupContainer = styled2("div")(({ theme, overlap = 8 }) => ({
-  display: "flex",
-  alignItems: "center",
-  "& > *": {
-    marginLeft: -overlap,
-    transition: "all 0.3s ease",
-    position: "relative",
-    border: `2px solid ${theme.palette.background.paper}`,
-    "&:hover": {
-      zIndex: 100,
-      transform: "scale(1.1) translateY(-4px)"
-    },
-    "&:first-of-type": {
-      marginLeft: 0
-    }
-  }
-}));
-var AvatarGroup = ({ children, max = 4, overlap = 8, className, dataTestId }) => {
-  const childrenArray = React.Children.toArray(children);
-  const visibleChildren = max ? childrenArray.slice(0, max) : childrenArray;
-  const remainingCount = childrenArray.length - visibleChildren.length;
-  return /* @__PURE__ */ jsxs2(AvatarGroupContainer, { overlap, className, "data-testid": dataTestId, children: [
-    visibleChildren,
-    remainingCount > 0 && /* @__PURE__ */ jsx2(
-      Avatar,
-      {
-        size: visibleChildren[0]?.props?.size || "md",
-        color: "neutral",
-        fallback: `+${remainingCount}`,
-        bordered: true,
-        dataTestId: dataTestId ? `${dataTestId}-overflow` : void 0
-      }
-    )
-  ] });
-};
-AvatarGroup.displayName = "AvatarGroup";
-
-export {
-  Avatar,
-  AvatarGroup
-};
-//# sourceMappingURL=chunk-2XFGVZTZ.js.map

package/dist/chunk-2XFGVZTZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/Avatar/Avatar.tsx","../src/components/data-display/Avatar/Avatar.view.tsx"],"sourcesContent":["import BrokenImage from '@mui/icons-material/BrokenImage';\nimport Person from '@mui/icons-material/Person';\nimport { styled } from '@mui/material';\nimport React, { useCallback, useEffect, useState } from 'react';\n\nimport type { AvatarProps } from './Avatar.types';\nimport { AvatarView, type AvatarViewProps, type ContentType } from './Avatar.view';\n\n/** Applied via a single spread so no per-field default inflates cyclomatic complexity. */\nconst AVATAR_DEFAULTS = {\n  variant: 'circle',\n  size: 'md',\n  glow: false,\n  pulse: false,\n  bordered: false,\n  color: 'primary',\n  loading: false,\n  interactive: false,\n  showFallbackOnError: true,\n  animationDelay: 0,\n} satisfies Partial<AvatarProps>;\n\n/**\n * Pick what renders inside the avatar. On an image error (with fallback enabled)\n * the fallback/icon/broken-image wins; otherwise children → fallback → icon → the\n * default person glyph.\n */\nfunction resolveContent(args: {\n  children?: React.ReactNode;\n  fallback?: React.ReactNode;\n  icon?: React.ReactNode;\n  imageError: boolean;\n  showFallbackOnError: boolean;\n}): { content: React.ReactNode; contentType: ContentType } {\n  const { children, fallback, icon, imageError, showFallbackOnError } = args;\n  if (imageError && showFallbackOnError) {\n    if (fallback) return { content: fallback, contentType: 'fallback' };\n    if (icon) return { content: icon, contentType: 'icon' };\n    return { content: <BrokenImage />, contentType: 'icon' };\n  }\n  if (children) return { content: children, contentType: 'children' };\n  if (fallback) return { content: fallback, contentType: 'fallback' };\n  if (icon) return { content: icon, contentType: 'icon' };\n  return { content: <Person />, contentType: 'default' };\n}\n\n/** Fades the avatar in after `animationDelay`ms. */\nfunction useMountedFade(animationDelay: number): boolean {\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => {\n    const timer = window.setTimeout(() => setMounted(true), animationDelay);\n    return () => window.clearTimeout(timer);\n  }, [animationDelay]);\n  return mounted;\n}\n\ninterface ImageState {\n  imageError: boolean;\n  imageLoading: boolean;\n  handleImageError: React.ReactEventHandler;\n  handleImageLoad: () => void;\n}\n\n/**\n * Tracks the `<img>` load lifecycle. `imageLoading` starts true whenever there is\n * a `src` and clears on load/error — the handlers must be wired to the actual img\n * (via `slotProps.img` in the view), since load/error don't bubble to the root.\n */\nfunction useImageState(src: string | undefined, onError?: React.ReactEventHandler): ImageState {\n  const [imageError, setImageError] = useState(false);\n  const [imageLoading, setImageLoading] = useState(!!src);\n\n  useEffect(() => {\n    setImageError(false);\n    setImageLoading(!!src);\n  }, [src]);\n\n  const handleImageError = useCallback<React.ReactEventHandler>(\n    (event) => {\n      setImageError(true);\n      setImageLoading(false);\n      onError?.(event);\n    },\n    [onError],\n  );\n\n  const handleImageLoad = useCallback(() => setImageLoading(false), []);\n\n  return { imageError, imageLoading, handleImageError, handleImageLoad };\n}\n\n/** Normalizes props (defaults + rest passthrough) and derives everything the view needs. */\nfunction useAvatarModel(raw: AvatarProps, ref: React.Ref<HTMLDivElement>): AvatarViewProps {\n  const {\n    variant,\n    size,\n    glow,\n    pulse,\n    status,\n    fallback,\n    icon,\n    bordered,\n    color,\n    src,\n    alt,\n    children,\n    loading,\n    onError,\n    onClick,\n    interactive,\n    showFallbackOnError,\n    animationDelay,\n    className,\n    dataTestId,\n    ...rest\n  } = { ...AVATAR_DEFAULTS, ...raw };\n\n  const mounted = useMountedFade(animationDelay);\n  const { imageError, imageLoading, handleImageError, handleImageLoad } = useImageState(src, onError);\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => onClick?.(event),\n    [onClick],\n  );\n  const { content, contentType } = resolveContent({\n    children,\n    fallback,\n    icon,\n    imageError,\n    showFallbackOnError,\n  });\n\n  return {\n    mounted,\n    variant,\n    size,\n    color,\n    glow,\n    pulse,\n    bordered,\n    showSpinner: loading || imageLoading,\n    imageError,\n    clickable: interactive || !!onClick,\n    imgSrc: imageError ? undefined : src,\n    alt,\n    ariaLabel: (rest['aria-label'] as string) || alt || 'Avatar',\n    content,\n    contentType,\n    className,\n    dataTestId,\n    status,\n    forwardedRef: ref,\n    onClick: handleClick,\n    handleImageError,\n    handleImageLoad,\n    rest,\n  };\n}\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>((props, ref) => (\n  <AvatarView {...useAvatarModel(props, ref)} />\n));\n\nAvatar.displayName = 'Avatar';\n\nconst AvatarGroupContainer = styled('div')<{ overlap?: number }>(({ theme, overlap = 8 }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  '& > *': {\n    marginLeft: -overlap,\n    transition: 'all 0.3s ease',\n    position: 'relative',\n    border: `2px solid ${theme.palette.background.paper}`,\n    '&:hover': {\n      zIndex: 100,\n      transform: 'scale(1.1) translateY(-4px)',\n    },\n    '&:first-of-type': {\n      marginLeft: 0,\n    },\n  },\n}));\n\n// Export AvatarGroup for grouped avatars\nexport const AvatarGroup: React.FC<{\n  children: React.ReactNode;\n  max?: number;\n  overlap?: number;\n  className?: string;\n  dataTestId?: string;\n}> = ({ children, max = 4, overlap = 8, className, dataTestId }) => {\n  const childrenArray = React.Children.toArray(children);\n  const visibleChildren = max ? childrenArray.slice(0, max) : childrenArray;\n  const remainingCount = childrenArray.length - visibleChildren.length;\n\n  return (\n    <AvatarGroupContainer overlap={overlap} className={className} data-testid={dataTestId}>\n      {visibleChildren}\n      {remainingCount > 0 && (\n        <Avatar\n          size={(visibleChildren[0] as React.ReactElement<AvatarProps>)?.props?.size || 'md'}\n          color=\"neutral\"\n          fallback={`+${remainingCount}`}\n          bordered\n          dataTestId={dataTestId ? `${dataTestId}-overflow` : undefined}\n        />\n      )}\n    </AvatarGroupContainer>\n  );\n};\n\nAvatarGroup.displayName = 'AvatarGroup';\n","import { alpha, Avatar as MuiAvatar, Badge, Fade, keyframes, useTheme } from '@mui/material';\nimport type { CSSObject, Theme } from '@mui/material';\nimport { styled } from '@mui/material';\nimport React from 'react';\n\nimport type { AvatarSize, AvatarStatus } from './Avatar.types';\n\nexport type ContentType = 'children' | 'fallback' | 'icon' | 'default';\n\nconst pulseAnimation = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 10px currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\nconst shimmerAnimation = keyframes`\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n`;\n\nconst scaleInAnimation = keyframes`\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n`;\n\nconst rotateAnimation = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\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 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: theme.palette.grey[700], contrastText: '#fff' },\n  };\n\n  return colorMap[color] || theme.palette.primary;\n};\n\ninterface SizeStyle {\n  width: number;\n  height: number;\n  fontSize: string;\n}\n\nconst getSizeStyles = (size: AvatarSize): SizeStyle => {\n  const sizeMap: Record<AvatarSize, SizeStyle> = {\n    xs: { width: 24, height: 24, fontSize: '0.75rem' },\n    sm: { width: 32, height: 32, fontSize: '0.875rem' },\n    md: { width: 40, height: 40, fontSize: '1rem' },\n    lg: { width: 48, height: 48, fontSize: '1.125rem' },\n    xl: { width: 64, height: 64, fontSize: '1.5rem' },\n    xxl: { width: 80, height: 80, fontSize: '2rem' },\n  };\n\n  return sizeMap[size] || sizeMap.md;\n};\n\nconst getStatusColor = (status: AvatarStatus, theme: Theme): string => {\n  const statusColorMap: Record<AvatarStatus, string> = {\n    online: theme.palette.success.main,\n    offline: theme.palette.grey[500],\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 = (interactive: boolean | undefined, main: string): CSSObject =>\n  interactive\n    ? {\n        '&:hover': {\n          transform: 'scale(1.1) translateY(-2px)',\n          boxShadow: `0 8px 20px ${alpha(main, 0.3)}`,\n          filter: 'brightness(1.1)',\n          zIndex: 10,\n        },\n        '&:active': { transform: 'scale(1.05)' },\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, 0.6)},\n        ${alpha(main, 0.8)},\n        ${alpha(main, 0.6)}\n      )`,\n        backgroundSize: '200% 100%',\n        animation: `${shimmerAnimation} 1.5s 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(1) };\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: `2px solid ${theme.palette.background.paper}`,\n        boxShadow: `0 0 0 1px ${alpha(theme.palette.divider, 0.2)}`,\n      }\n    : {};\n\n/** Glow adds the halo; pulse adds the expanding ring — either or both. */\nconst glowPulseStyles = (\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 20px 5px ${alpha(main, 0.4)} !important`;\n    styles.filter = 'brightness(1.05)';\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: 0.3,\n      animation: `${pulseAnimation} 2s 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      ...getSizeStyles(customSize),\n      transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n      position: 'relative',\n      overflow: 'visible',\n      animation: `${scaleInAnimation} 0.3s 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 ?? '#fff'),\n      ...interactiveStyles(interactive, palette.main),\n      ...loadingStyles(isLoading, palette.main),\n      ...variantRadius(customVariant, theme),\n      ...borderedStyles(bordered, theme),\n      ...glowPulseStyles(glow, pulse, palette.main),\n      '&:focus-visible': {\n        outline: `3px solid ${alpha(palette.main, 0.5)}`,\n        outlineOffset: 2,\n      },\n    };\n  },\n);\n\nconst LoadingOverlay = styled('div')<{ size: AvatarSize }>(({ theme, size }) => {\n  const sizeStyles = getSizeStyles(size);\n  return {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: sizeStyles.width,\n    height: sizeStyles.height,\n    borderRadius: 'inherit',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: alpha(theme.palette.background.paper, 0.7),\n    backdropFilter: 'blur(2px)',\n    '& .loading-spinner': {\n      width: sizeStyles.width * 0.4,\n      height: sizeStyles.height * 0.4,\n      border: `2px solid ${alpha(theme.palette.primary.main, 0.3)}`,\n      borderTopColor: theme.palette.primary.main,\n      borderRadius: '50%',\n      animation: `${rotateAnimation} 0.8s 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 sizeStyles = getSizeStyles(avatarSize);\n  const badgeSize = Math.max(8, sizeStyles.width * 0.2);\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: `2px 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={300}>\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":["styled","jsx","jsxs","styled"]}