@tribepad/themis 1.0.0 → 1.0.1

package/dist/elements/Avatar/index.js

@@ -1,54 +1,470 @@
+"use client";
 'use strict';
 
-var chunkGE5XTSDZ_js = require('../../chunk-GE5XTSDZ.js');
-require('../../chunk-VIREG536.js');
-require('../../chunk-T4COXKQ3.js');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+var zod = require('zod');
 
-
-
-Object.defineProperty(exports, "AVATAR_OVERLAP_BY_SIZE", {
-  enumerable: true,
-  get: function () { return chunkGE5XTSDZ_js.AVATAR_OVERLAP_BY_SIZE; }
-});
-Object.defineProperty(exports, "Avatar", {
-  enumerable: true,
-  get: function () { return chunkGE5XTSDZ_js.Avatar; }
-});
-Object.defineProperty(exports, "AvatarGroup", {
-  enumerable: true,
-  get: function () { return chunkGE5XTSDZ_js.AvatarGroup; }
-});
-Object.defineProperty(exports, "AvatarGroupPropsSchema", {
-  enumerable: true,
-  get: function () { return chunkGE5XTSDZ_js.AvatarGroupPropsSchema; }
-});
-Object.defineProperty(exports, "AvatarPropsSchema", {
-  enumerable: true,
-  get: function () { return chunkGE5XTSDZ_js.AvatarPropsSchema; }
+// src/elements/Avatar/Avatar.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function getInitials(name) {
+  if (!name || !name.trim()) return "";
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "";
+  const firstPart = parts[0];
+  if (parts.length === 1) {
+    return firstPart ? firstPart.charAt(0).toUpperCase() : "";
+  }
+  const lastPart = parts[parts.length - 1];
+  const first = firstPart ? firstPart.charAt(0).toUpperCase() : "";
+  const last = lastPart ? lastPart.charAt(0).toUpperCase() : "";
+  return first + last;
+}
+var avatarOuterVariants = classVarianceAuthority.cva(
+  "relative inline-flex items-center justify-center",
+  {
+    variants: {
+      size: {
+        sm: "min-h-[44px] min-w-[44px]",
+        default: "min-h-[44px] min-w-[44px]",
+        lg: "min-h-[48px] min-w-[48px]"
+      },
+      interactive: {
+        true: [
+          "cursor-pointer",
+          "focus-visible:outline-none",
+          "focus-visible:ring-2",
+          "focus-visible:ring-[var(--ring)]",
+          "focus-visible:ring-offset-2",
+          "focus-visible:ring-offset-[var(--page-background)]",
+          "motion-safe:transition-transform",
+          "motion-safe:duration-150",
+          "motion-safe:ease-out",
+          "motion-safe:hover:scale-105"
+        ],
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      interactive: false
+    }
+  }
+);
+var avatarVisualVariants = classVarianceAuthority.cva(
+  [
+    "relative inline-flex items-center justify-center",
+    "overflow-hidden",
+    "bg-[var(--accent-background)]",
+    "text-[var(--accent-foreground)]",
+    "font-medium",
+    "select-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8 w-8 text-xs",
+        default: "h-11 w-11 text-sm",
+        lg: "h-12 w-12 text-base"
+      },
+      shape: {
+        circle: "rounded-full",
+        rounded: "rounded-lg"
+      },
+      status: {
+        online: "ring-[3px] ring-[var(--status-online,#22c55e)]",
+        offline: "ring-[3px] ring-[var(--status-offline,#6b7280)]",
+        busy: "ring-[3px] ring-[var(--status-busy,#ef4444)]",
+        away: "ring-[3px] ring-[var(--status-away,#eab308)]"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      shape: "circle"
+    }
+  }
+);
+var Avatar = react.memo(
+  react.forwardRef(
+    ({
+      src,
+      alt,
+      name,
+      size = "default",
+      shape = "circle",
+      status,
+      onPress,
+      className,
+      id,
+      "data-testid": dataTestId,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      _groupIndex
+    }, ref) => {
+      const [loadingState, setLoadingState] = react.useState(
+        src ? "loading" : "error"
+      );
+      const handleImageLoad = react.useCallback(() => {
+        setLoadingState("loaded");
+      }, []);
+      const handleImageError = react.useCallback(() => {
+        setLoadingState("error");
+      }, []);
+      const initials = getInitials(name);
+      const isInteractive = Boolean(onPress);
+      const computedAriaLabel = ariaLabel || (isInteractive && status ? `${alt}, ${status}` : void 0);
+      const groupBrightness = _groupIndex !== void 0 ? 1 - _groupIndex * 0.05 : void 0;
+      const visualContent = /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          "data-testid": "avatar-visual",
+          className: cn(avatarVisualVariants({ size, shape, status })),
+          style: groupBrightness !== void 0 ? { filter: `brightness(${groupBrightness})` } : void 0,
+          children: [
+            loadingState === "loading" && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-testid": "avatar-skeleton",
+                className: cn(
+                  "absolute inset-0 animate-pulse bg-[var(--accent-background)]",
+                  shape === "circle" ? "rounded-full" : "rounded-lg"
+                ),
+                "aria-hidden": "true"
+              }
+            ),
+            src && loadingState !== "error" && // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- onLoad/onError are lifecycle events, not interactions
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src,
+                alt: isInteractive ? "" : alt,
+                onLoad: handleImageLoad,
+                onError: handleImageError,
+                className: cn(
+                  "h-full w-full object-cover",
+                  loadingState === "loading" && "invisible"
+                )
+              }
+            ),
+            loadingState === "error" && initials && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: initials })
+          ]
+        }
+      );
+      if (isInteractive) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          reactAriaComponents.Button,
+          {
+            ref,
+            id,
+            "data-testid": dataTestId || "avatar-outer",
+            "aria-label": computedAriaLabel || alt,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": ariaDescribedBy,
+            onPress,
+            className: cn(
+              avatarOuterVariants({ size, interactive: true }),
+              className
+            ),
+            children: visualContent
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref,
+          id,
+          "data-testid": dataTestId || "avatar-outer",
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
+          className: cn(
+            avatarOuterVariants({ size, interactive: false }),
+            className
+          ),
+          children: visualContent
+        }
+      );
+    }
+  )
+);
+Avatar.displayName = "Avatar";
+var OVERLAP_CLASS_BY_SIZE = {
+  sm: "-ml-2",
+  default: "-ml-3",
+  lg: "-ml-4"
+};
+var avatarOverflowVariants = classVarianceAuthority.cva(
+  [
+    "relative inline-flex items-center justify-center",
+    "bg-[var(--secondary)]",
+    "text-[var(--secondary-foreground)]",
+    "font-semibold",
+    "select-none",
+    "border-2 border-[var(--page-background)]"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8 w-8 text-xs",
+        default: "h-11 w-11 text-sm",
+        lg: "h-12 w-12 text-base"
+      },
+      shape: {
+        circle: "rounded-full",
+        rounded: "rounded-lg"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      shape: "circle"
+    }
+  }
+);
+var avatarGroupVariants = classVarianceAuthority.cva("inline-flex items-center", {
+  variants: {
+    interactive: {
+      true: [
+        "cursor-pointer",
+        "focus-visible:outline-none",
+        "focus-visible:ring-2",
+        "focus-visible:ring-[var(--ring)]",
+        "focus-visible:ring-offset-2",
+        "focus-visible:ring-offset-[var(--page-background)]"
+      ],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    interactive: false
+  }
 });
-Object.defineProperty(exports, "AvatarShapeSchema", {
-  enumerable: true,
-  get: function () { return chunkGE5XTSDZ_js.AvatarShapeSchema; }
+var AvatarGroup = react.memo(
+  react.forwardRef(
+    ({
+      max = 3,
+      shape = "circle",
+      size = "default",
+      onPress,
+      className,
+      children,
+      id,
+      "data-testid": dataTestId,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy
+    }, ref) => {
+      const childArray = react.Children.toArray(children);
+      const totalCount = childArray.length;
+      const visibleCount = Math.min(totalCount, max);
+      const overflowCount = totalCount - visibleCount;
+      const isGroupInteractive = Boolean(onPress);
+      const overlapClass = OVERLAP_CLASS_BY_SIZE[size];
+      if (process.env.NODE_ENV !== "production" && isGroupInteractive) {
+        react.Children.forEach(children, (child) => {
+          if (react.isValidElement(child) && child.props.onPress) {
+            console.warn(
+              "[AvatarGroup] onPress on individual avatars is ignored when AvatarGroup has onPress. Actions are mutually exclusive - use group onPress OR individual onPress, not both."
+            );
+          }
+        });
+      }
+      const visibleAvatars = childArray.slice(0, visibleCount).map((child, index) => {
+        if (!react.isValidElement(child)) return null;
+        const childProps = child.props;
+        const zIndex = visibleCount - index;
+        const individualOnPress = isGroupInteractive ? void 0 : childProps.onPress;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-testid": "avatar-group-item",
+            className: cn(
+              "relative",
+              // 2px border for visual separation (Clarification 1 & 7)
+              "border-2 border-[var(--page-background)]",
+              shape === "circle" ? "rounded-full" : "rounded-lg",
+              // Overlap negative margin (except first)
+              index > 0 && overlapClass,
+              // Hover lift animation when group is NOT actionable
+              // Individual avatars get lift effect regardless of their own onPress
+              !isGroupInteractive && [
+                "motion-safe:transition-transform",
+                "motion-safe:duration-150",
+                "motion-safe:ease-out",
+                "motion-safe:hover:scale-[1.15]",
+                "motion-safe:hover:z-10"
+              ]
+            ),
+            style: { zIndex },
+            children: react.cloneElement(child, {
+              size,
+              shape,
+              // Individual onPress is ignored if group has onPress
+              onPress: individualOnPress,
+              // Pass group index for progressive darkening
+              _groupIndex: index,
+              // Remove outer wrapper styling since we handle it
+              className: cn(
+                childProps.className,
+                // Remove min dimensions since group item handles touch target
+                "!min-h-0 !min-w-0"
+              )
+            })
+          },
+          index
+        );
+      });
+      const overflowIndicator = overflowCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          "data-testid": "avatar-overflow",
+          className: cn(
+            avatarOverflowVariants({ size, shape }),
+            overlapClass
+          ),
+          style: { zIndex: 0 },
+          "aria-hidden": "true",
+          children: [
+            "+",
+            overflowCount
+          ]
+        }
+      ) : null;
+      const computedAriaLabel = ariaLabel || `${totalCount} ${totalCount === 1 ? "member" : "members"}`;
+      const groupContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        visibleAvatars,
+        overflowIndicator
+      ] });
+      if (isGroupInteractive) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          reactAriaComponents.Button,
+          {
+            ref,
+            id,
+            "data-testid": dataTestId,
+            "aria-label": computedAriaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": ariaDescribedBy,
+            onPress,
+            className: cn(avatarGroupVariants({ interactive: true }), className),
+            children: groupContent
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref,
+          id,
+          "data-testid": dataTestId,
+          role: "group",
+          "aria-label": computedAriaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
+          className: cn(avatarGroupVariants({ interactive: false }), className),
+          children: groupContent
+        }
+      );
+    }
+  )
+);
+AvatarGroup.displayName = "AvatarGroup";
+var BaseComponentPropsSchema = zod.z.object({
+  // Styling
+  className: zod.z.string().optional(),
+  // React
+  children: zod.z.any().optional(),
+  // ReactNode not directly supported by Zod
+  id: zod.z.string().optional(),
+  // Accessibility (WCAG 2.2 AA requirements)
+  "aria-label": zod.z.string().optional(),
+  "aria-labelledby": zod.z.string().optional(),
+  "aria-describedby": zod.z.string().optional(),
+  "aria-live": zod.z.enum(["off", "polite", "assertive"]).optional(),
+  "aria-hidden": zod.z.boolean().optional(),
+  // Testing & Development
+  "data-testid": zod.z.string().optional()
 });
-Object.defineProperty(exports, "AvatarSizeSchema", {
-  enumerable: true,
-  get: function () { return chunkGE5XTSDZ_js.AvatarSizeSchema; }
-});
-Object.defineProperty(exports, "AvatarStatusSchema", {
-  enumerable: true,
-  get: function () { return chunkGE5XTSDZ_js.AvatarStatusSchema; }
-});
-Object.defineProperty(exports, "avatarOuterVariants", {
-  enumerable: true,
-  get: function () { return chunkGE5XTSDZ_js.avatarOuterVariants; }
-});
-Object.defineProperty(exports, "avatarOverflowVariants", {
-  enumerable: true,
-  get: function () { return chunkGE5XTSDZ_js.avatarOverflowVariants; }
+
+// src/elements/Avatar/Avatar.types.ts
+var AvatarSizeSchema = zod.z.enum(["sm", "default", "lg"]);
+var AvatarShapeSchema = zod.z.enum(["circle", "rounded"]);
+var AvatarStatusSchema = zod.z.enum(["online", "offline", "busy", "away"]);
+var AVATAR_OVERLAP_BY_SIZE = {
+  sm: 8,
+  default: 12,
+  lg: 16
+};
+var AvatarPropsSchema = BaseComponentPropsSchema.extend({
+  /** Image source URL */
+  src: zod.z.string().optional(),
+  /**
+   * Alt text for the avatar image (required for accessibility)
+   * When actionable, this is used for the aria-label
+   */
+  alt: zod.z.string().min(1, "alt is required for accessibility"),
+  /**
+   * Name used to generate initials fallback
+   * - "Jane Doe" → "JD"
+   * - "Jane" → "J"
+   * - "Jane Marie Doe" → "JD" (first and last)
+   */
+  name: zod.z.string().optional(),
+  /** Visual size variant (touch target always 44x44px min for sm/default) */
+  size: AvatarSizeSchema.optional().default("default"),
+  /** Shape variant */
+  shape: AvatarShapeSchema.optional().default("circle"),
+  /** Status ring indicator */
+  status: AvatarStatusSchema.optional(),
+  /**
+   * Click handler for actionable avatar
+   * When provided, renders as Button with 3-layer architecture
+   * @see plan.md Clarification 2 (mutually exclusive with group onPress)
+   */
+  onPress: zod.z.function().optional()
 });
-Object.defineProperty(exports, "avatarVisualVariants", {
-  enumerable: true,
-  get: function () { return chunkGE5XTSDZ_js.avatarVisualVariants; }
+var AvatarGroupPropsSchema = BaseComponentPropsSchema.extend({
+  /**
+   * Maximum avatars to display before overflow (+X indicator)
+   * Default: 3
+   */
+  max: zod.z.number().int().positive().optional().default(3),
+  /**
+   * Shape inherited by all child avatars
+   * Individual avatar shape props are ignored in groups
+   */
+  shape: AvatarShapeSchema.optional().default("circle"),
+  /**
+   * Size inherited by all child avatars
+   * Individual avatar size props are ignored in groups
+   * Also determines overlap spacing (sm: 8px, default: 12px, lg: 16px)
+   */
+  size: AvatarSizeSchema.optional().default("default"),
+  /**
+   * Click handler for the entire group
+   * When provided, individual avatar onPress handlers are ignored
+   * @see plan.md Clarification 2 (Mutually exclusive)
+   */
+  onPress: zod.z.function().optional()
 });
+
+exports.AVATAR_OVERLAP_BY_SIZE = AVATAR_OVERLAP_BY_SIZE;
+exports.Avatar = Avatar;
+exports.AvatarGroup = AvatarGroup;
+exports.AvatarGroupPropsSchema = AvatarGroupPropsSchema;
+exports.AvatarPropsSchema = AvatarPropsSchema;
+exports.AvatarShapeSchema = AvatarShapeSchema;
+exports.AvatarSizeSchema = AvatarSizeSchema;
+exports.AvatarStatusSchema = AvatarStatusSchema;
+exports.avatarOuterVariants = avatarOuterVariants;
+exports.avatarOverflowVariants = avatarOverflowVariants;
+exports.avatarVisualVariants = avatarVisualVariants;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/elements/Avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/elements/Avatar/Avatar.tsx","../../../src/elements/Avatar/AvatarGroup.tsx","../../../src/schemas/BaseComponentProps.ts","../../../src/elements/Avatar/Avatar.types.ts"],"names":["twMerge","clsx","cva","memo","forwardRef","useState","useCallback","jsxs","jsx","AriaButton","Children","isValidElement","Fragment","z"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Class Name Utility\n * Merges Tailwind CSS classes with conflict resolution\n *\n * Combines clsx for conditional classes and tailwind-merge for deduplication\n *\n * @example\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)\n * cn('text-red-500', condition && 'text-blue-500') // => conditional application\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\n/**\n * Avatar Component - 3-Layer Architecture\n * Accessible avatar with React Aria primitives and CVA styling\n *\n * Architecture:\n * - Layer 1: Touch Target (44x44px WCAG AAA compliant)\n * - Layer 2: Visual Avatar (configurable size, shape, status ring)\n * - Layer 3: Content (image, initials, skeleton shimmer)\n *\n * @see plan.md for implementation details\n * @see avatar-prd.md for requirements\n * @see constitution.md Principle IV (Accessibility First)\n */\n\nimport { forwardRef, memo, useState, useCallback, type ReactElement } from 'react';\nimport { Button as AriaButton } from 'react-aria-components';\nimport { cva } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport type {\n  AvatarProps,\n  AvatarSize,\n  AvatarShape,\n  AvatarStatus,\n  AvatarLoadingState,\n} from './Avatar.types';\n\n/**\n * Extract initials from a name\n * - \"Jane Doe\" → \"JD\"\n * - \"Jane\" → \"J\"\n * - \"Jane Marie Doe\" → \"JD\" (first and last)\n */\nfunction getInitials(name: string | undefined): string {\n  if (!name || !name.trim()) return '';\n\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return '';\n\n  const firstPart = parts[0];\n  if (parts.length === 1) {\n    return firstPart ? firstPart.charAt(0).toUpperCase() : '';\n  }\n\n  // First and last initials (max 2 characters)\n  const lastPart = parts[parts.length - 1];\n  const first = firstPart ? firstPart.charAt(0).toUpperCase() : '';\n  const last = lastPart ? lastPart.charAt(0).toUpperCase() : '';\n  return first + last;\n}\n\n/**\n * Layer 1: Transparent outer touch target (44x44px minimum)\n * Handles WCAG 2.2 AAA touch target requirement\n * IMPORTANT: Focus ring stays on Layer 1 for AAA compliance (2.4.13)\n */\nexport const avatarOuterVariants = cva(\n  'relative inline-flex items-center justify-center',\n  {\n    variants: {\n      size: {\n        sm: 'min-h-[44px] min-w-[44px]',\n        default: 'min-h-[44px] min-w-[44px]',\n        lg: 'min-h-[48px] min-w-[48px]',\n      },\n      interactive: {\n        true: [\n          'cursor-pointer',\n          'focus-visible:outline-none',\n          'focus-visible:ring-2',\n          'focus-visible:ring-[var(--ring)]',\n          'focus-visible:ring-offset-2',\n          'focus-visible:ring-offset-[var(--page-background)]',\n          'motion-safe:transition-transform',\n          'motion-safe:duration-150',\n          'motion-safe:ease-out',\n          'motion-safe:hover:scale-105',\n        ],\n        false: '',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      interactive: false,\n    },\n  }\n);\n\n/**\n * Layer 2: Visual avatar appearance\n * Provides the visual appearance with configurable size, shape, and status ring\n */\nexport const avatarVisualVariants = cva(\n  [\n    'relative inline-flex items-center justify-center',\n    'overflow-hidden',\n    'bg-[var(--accent-background)]',\n    'text-[var(--accent-foreground)]',\n    'font-medium',\n    'select-none',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-8 w-8 text-xs',\n        default: 'h-11 w-11 text-sm',\n        lg: 'h-12 w-12 text-base',\n      },\n      shape: {\n        circle: 'rounded-full',\n        rounded: 'rounded-lg',\n      },\n      status: {\n        online: 'ring-[3px] ring-[var(--status-online,#22c55e)]',\n        offline: 'ring-[3px] ring-[var(--status-offline,#6b7280)]',\n        busy: 'ring-[3px] ring-[var(--status-busy,#ef4444)]',\n        away: 'ring-[3px] ring-[var(--status-away,#eab308)]',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      shape: 'circle',\n    },\n  }\n);\n\n/**\n * Avatar Component - 3-Layer Architecture\n * Displays user avatar with image or initials fallback\n *\n * Layer 1: Touch Target - 44x44px WCAG AAA compliant\n * Layer 2: Visual Avatar - configurable appearance\n * Layer 3: Content - image, initials, or loading skeleton\n */\nconst Avatar = memo(\n  forwardRef<HTMLDivElement, AvatarProps>(\n    (\n      {\n        src,\n        alt,\n        name,\n        size = 'default',\n        shape = 'circle',\n        status,\n        onPress,\n        className,\n        id,\n        'data-testid': dataTestId,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        'aria-describedby': ariaDescribedBy,\n        _groupIndex,\n      },\n      ref\n    ): ReactElement => {\n      // Loading state machine: loading → loaded | error\n      const [loadingState, setLoadingState] = useState<AvatarLoadingState>(\n        src ? 'loading' : 'error'\n      );\n\n      const handleImageLoad = useCallback(() => {\n        setLoadingState('loaded');\n      }, []);\n\n      const handleImageError = useCallback(() => {\n        setLoadingState('error');\n      }, []);\n\n      const initials = getInitials(name);\n      const isInteractive = Boolean(onPress);\n\n      // Build aria-label for actionable avatars with status\n      const computedAriaLabel =\n        ariaLabel ||\n        (isInteractive && status ? `${alt}, ${status}` : undefined);\n\n      // Calculate brightness for group darkening effect\n      // First avatar (index 0) = 100%, each subsequent gets 5% darker\n      const groupBrightness =\n        _groupIndex !== undefined ? 1 - _groupIndex * 0.05 : undefined;\n\n      // Common visual layer content\n      const visualContent = (\n        <div\n          data-testid=\"avatar-visual\"\n          className={cn(avatarVisualVariants({ size, shape, status }))}\n          style={groupBrightness !== undefined ? { filter: `brightness(${groupBrightness})` } : undefined}\n        >\n          {/* Layer 3: Content */}\n\n          {/* Skeleton shimmer while loading */}\n          {loadingState === 'loading' && (\n            <div\n              data-testid=\"avatar-skeleton\"\n              className={cn(\n                'absolute inset-0 animate-pulse bg-[var(--accent-background)]',\n                shape === 'circle' ? 'rounded-full' : 'rounded-lg'\n              )}\n              aria-hidden=\"true\"\n            />\n          )}\n\n          {/* Image (hidden during loading, removed on error) */}\n          {src && loadingState !== 'error' && (\n            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- onLoad/onError are lifecycle events, not interactions\n            <img\n              src={src}\n              alt={isInteractive ? '' : alt}\n              onLoad={handleImageLoad}\n              onError={handleImageError}\n              className={cn(\n                'h-full w-full object-cover',\n                loadingState === 'loading' && 'invisible'\n              )}\n            />\n          )}\n\n          {/* Initials fallback (shown when no src or on error) */}\n          {loadingState === 'error' && initials && (\n            <span aria-hidden=\"true\">{initials}</span>\n          )}\n        </div>\n      );\n\n      // Render as button if interactive\n      if (isInteractive) {\n        return (\n          <AriaButton\n            ref={ref as React.Ref<HTMLButtonElement>}\n            id={id}\n            data-testid={dataTestId || 'avatar-outer'}\n            aria-label={computedAriaLabel || alt}\n            aria-labelledby={ariaLabelledBy}\n            aria-describedby={ariaDescribedBy}\n            onPress={onPress}\n            className={cn(\n              avatarOuterVariants({ size, interactive: true }),\n              className\n            )}\n          >\n            {visualContent}\n          </AriaButton>\n        );\n      }\n\n      // Render as non-interactive div\n      return (\n        <div\n          ref={ref}\n          id={id}\n          data-testid={dataTestId || 'avatar-outer'}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          className={cn(\n            avatarOuterVariants({ size, interactive: false }),\n            className\n          )}\n        >\n          {visualContent}\n        </div>\n      );\n    }\n  )\n);\n\nAvatar.displayName = 'Avatar';\n\nexport { Avatar };\nexport type { AvatarProps, AvatarSize, AvatarShape, AvatarStatus };\n","'use client';\n\n/**\n * AvatarGroup Component\n * Displays multiple avatars with overlap, overflow indicator, and optional actionability\n *\n * Features:\n * - Overlapping display with configurable overlap\n * - Overflow indicator (+X) when exceeding max\n * - 2px border for visual separation\n * - First avatar on top (highest z-index)\n * - Mutually exclusive actions (group OR individual, not both)\n * - Shape/size inheritance to children\n *\n * @see plan.md Clarifications 1, 2, 5, 6, 7\n * @see avatar-prd.md US-5, US-7\n */\n\nimport {\n  forwardRef,\n  memo,\n  Children,\n  isValidElement,\n  cloneElement,\n  type ReactElement,\n} from 'react';\nimport { Button as AriaButton } from 'react-aria-components';\nimport { cva } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport type { AvatarGroupProps, AvatarSize, AvatarShape } from './Avatar.types';\n\n/**\n * Overlap class by size (proportional)\n * sm: 8px (-ml-2), default: 12px (-ml-3), lg: 16px (-ml-4)\n */\nconst OVERLAP_CLASS_BY_SIZE: Record<AvatarSize, string> = {\n  sm: '-ml-2',\n  default: '-ml-3',\n  lg: '-ml-4',\n};\n\n/**\n * Overflow indicator variants (the +X badge)\n */\nconst avatarOverflowVariants = cva(\n  [\n    'relative inline-flex items-center justify-center',\n    'bg-[var(--secondary)]',\n    'text-[var(--secondary-foreground)]',\n    'font-semibold',\n    'select-none',\n    'border-2 border-[var(--page-background)]',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-8 w-8 text-xs',\n        default: 'h-11 w-11 text-sm',\n        lg: 'h-12 w-12 text-base',\n      },\n      shape: {\n        circle: 'rounded-full',\n        rounded: 'rounded-lg',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      shape: 'circle',\n    },\n  }\n);\n\n/**\n * Group outer variants\n */\nconst avatarGroupVariants = cva('inline-flex items-center', {\n  variants: {\n    interactive: {\n      true: [\n        'cursor-pointer',\n        'focus-visible:outline-none',\n        'focus-visible:ring-2',\n        'focus-visible:ring-[var(--ring)]',\n        'focus-visible:ring-offset-2',\n        'focus-visible:ring-offset-[var(--page-background)]',\n      ],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    interactive: false,\n  },\n});\n\n/**\n * AvatarGroup Component\n * Groups multiple Avatar components with overlap and overflow handling\n */\nconst AvatarGroup = memo(\n  forwardRef<HTMLDivElement, AvatarGroupProps>(\n    (\n      {\n        max = 3,\n        shape = 'circle',\n        size = 'default',\n        onPress,\n        className,\n        children,\n        id,\n        'data-testid': dataTestId,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        'aria-describedby': ariaDescribedBy,\n      },\n      ref\n    ): ReactElement => {\n      const childArray = Children.toArray(children);\n      const totalCount = childArray.length;\n      const visibleCount = Math.min(totalCount, max);\n      const overflowCount = totalCount - visibleCount;\n\n      const isGroupInteractive = Boolean(onPress);\n      const overlapClass = OVERLAP_CLASS_BY_SIZE[size];\n\n      // Warn about mutually exclusive actions (Clarification 2)\n      // Uses !== 'production' to work in both development and test modes\n      if (process.env.NODE_ENV !== 'production' && isGroupInteractive) {\n        Children.forEach(children, (child) => {\n          if (\n            isValidElement(child) &&\n            (child.props as { onPress?: unknown }).onPress\n          ) {\n            console.warn(\n              '[AvatarGroup] onPress on individual avatars is ignored when AvatarGroup has onPress. ' +\n                'Actions are mutually exclusive - use group onPress OR individual onPress, not both.'\n            );\n          }\n        });\n      }\n\n      // Build visible avatars with proper styling\n      const visibleAvatars = childArray.slice(0, visibleCount).map((child, index) => {\n        if (!isValidElement(child)) return null;\n\n        // Clone child with inherited props and group styling\n        const childProps = child.props as {\n          size?: AvatarSize;\n          shape?: AvatarShape;\n          onPress?: unknown;\n          className?: string;\n        };\n\n        // First avatar has highest z-index (Clarification 5)\n        const zIndex = visibleCount - index;\n\n        // Determine if individual avatar is interactive\n        // If group has onPress, individual onPress is ignored\n        const individualOnPress = isGroupInteractive\n          ? undefined\n          : childProps.onPress;\n\n        return (\n          <div\n            key={index}\n            data-testid=\"avatar-group-item\"\n            className={cn(\n              'relative',\n              // 2px border for visual separation (Clarification 1 & 7)\n              'border-2 border-[var(--page-background)]',\n              shape === 'circle' ? 'rounded-full' : 'rounded-lg',\n              // Overlap negative margin (except first)\n              index > 0 && overlapClass,\n              // Hover lift animation when group is NOT actionable\n              // Individual avatars get lift effect regardless of their own onPress\n              !isGroupInteractive && [\n                'motion-safe:transition-transform',\n                'motion-safe:duration-150',\n                'motion-safe:ease-out',\n                'motion-safe:hover:scale-[1.15]',\n                'motion-safe:hover:z-10',\n              ]\n            )}\n            style={{ zIndex }}\n          >\n            {cloneElement(child as ReactElement, {\n              size,\n              shape,\n              // Individual onPress is ignored if group has onPress\n              onPress: individualOnPress,\n              // Pass group index for progressive darkening\n              _groupIndex: index,\n              // Remove outer wrapper styling since we handle it\n              className: cn(\n                childProps.className,\n                // Remove min dimensions since group item handles touch target\n                '!min-h-0 !min-w-0'\n              ),\n            } as Partial<typeof childProps>)}\n          </div>\n        );\n      });\n\n      // Overflow indicator (+X)\n      const overflowIndicator =\n        overflowCount > 0 ? (\n          <div\n            data-testid=\"avatar-overflow\"\n            className={cn(\n              avatarOverflowVariants({ size, shape }),\n              overlapClass\n            )}\n            style={{ zIndex: 0 }}\n            aria-hidden=\"true\"\n          >\n            +{overflowCount}\n          </div>\n        ) : null;\n\n      // Auto-generate aria-label if not provided\n      const computedAriaLabel =\n        ariaLabel ||\n        `${totalCount} ${totalCount === 1 ? 'member' : 'members'}`;\n\n      // Group content\n      const groupContent = (\n        <>\n          {visibleAvatars}\n          {overflowIndicator}\n        </>\n      );\n\n      // Render as button if group is interactive\n      // Button inherently has role=\"button\", aria-label provides group context\n      if (isGroupInteractive) {\n        return (\n          <AriaButton\n            ref={ref as React.Ref<HTMLButtonElement>}\n            id={id}\n            data-testid={dataTestId}\n            aria-label={computedAriaLabel}\n            aria-labelledby={ariaLabelledBy}\n            aria-describedby={ariaDescribedBy}\n            onPress={onPress}\n            className={cn(avatarGroupVariants({ interactive: true }), className)}\n          >\n            {groupContent}\n          </AriaButton>\n        );\n      }\n\n      // Render as non-interactive div with role=\"group\"\n      return (\n        <div\n          ref={ref}\n          id={id}\n          data-testid={dataTestId}\n          role=\"group\"\n          aria-label={computedAriaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          className={cn(avatarGroupVariants({ interactive: false }), className)}\n        >\n          {groupContent}\n        </div>\n      );\n    }\n  )\n);\n\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport { AvatarGroup, avatarOverflowVariants };\nexport type { AvatarGroupProps };\n","import { z } from 'zod';\n\n/**\n * Base props schema for all Themis components\n * Ensures consistent accessibility and styling APIs across the library\n *\n * @see spec.md FR-009 to FR-014 (Accessibility Requirements)\n * @see constitution.md Principle IV (Accessibility First - WCAG 2.2 AA minimum)\n */\nexport const BaseComponentPropsSchema = z.object({\n  // Styling\n  className: z.string().optional(),\n\n  // React\n  children: z.any().optional(), // ReactNode not directly supported by Zod\n  id: z.string().optional(),\n\n  // Accessibility (WCAG 2.2 AA requirements)\n  'aria-label': z.string().optional(),\n  'aria-labelledby': z.string().optional(),\n  'aria-describedby': z.string().optional(),\n  'aria-live': z.enum(['off', 'polite', 'assertive']).optional(),\n  'aria-hidden': z.boolean().optional(),\n\n  // Testing & Development\n  'data-testid': z.string().optional(),\n});\n\nexport type BaseComponentProps = z.infer<typeof BaseComponentPropsSchema>;\n","import { z } from 'zod';\nimport type { PressEvent } from 'react-aria-components';\nimport { BaseComponentPropsSchema } from '../../schemas/BaseComponentProps';\n\n/**\n * Avatar size schema\n *\n * Size mappings (visual | touch target | overlap):\n * - sm: 32px | 44x44px | 8px\n * - default: 44px | 44x44px | 12px\n * - lg: 48px | 48x48px | 16px\n *\n * @see plan.md Clarification 6 (Overlap Scale)\n * @see spec.md FR-009 (WCAG 2.2 AAA - 44x44px touch targets)\n */\nexport const AvatarSizeSchema = z.enum(['sm', 'default', 'lg']);\nexport type AvatarSize = z.infer<typeof AvatarSizeSchema>;\n\n/**\n * Avatar shape schema\n * - circle: Fully rounded (rounded-full)\n * - rounded: Rounded corners (rounded-lg)\n */\nexport const AvatarShapeSchema = z.enum(['circle', 'rounded']);\nexport type AvatarShape = z.infer<typeof AvatarShapeSchema>;\n\n/**\n * Avatar status schema for ring indicators\n *\n * Status ring colors:\n * - online: green (#22c55e)\n * - offline: gray (#6b7280)\n * - busy: red (#ef4444)\n * - away: yellow (#eab308)\n */\nexport const AvatarStatusSchema = z.enum(['online', 'offline', 'busy', 'away']);\nexport type AvatarStatus = z.infer<typeof AvatarStatusSchema>;\n\n/**\n * Overlap values by size (in pixels)\n * @see plan.md Clarification 6 (Overlap Scale)\n */\nexport const AVATAR_OVERLAP_BY_SIZE: Record<AvatarSize, number> = {\n  sm: 8,\n  default: 12,\n  lg: 16,\n};\n\n/**\n * Avatar props schema extending BaseComponentProps\n *\n * @see React Aria Button: https://react-aria.adobe.com/Button\n * @see ShadCN Avatar: https://ui.shadcn.com/docs/components/avatar\n * @see plan.md Phase 1 (Type System)\n * @see constitution.md Principle IV (Accessibility First)\n */\nexport const AvatarPropsSchema = BaseComponentPropsSchema.extend({\n  /** Image source URL */\n  src: z.string().optional(),\n\n  /**\n   * Alt text for the avatar image (required for accessibility)\n   * When actionable, this is used for the aria-label\n   */\n  alt: z.string().min(1, 'alt is required for accessibility'),\n\n  /**\n   * Name used to generate initials fallback\n   * - \"Jane Doe\" → \"JD\"\n   * - \"Jane\" → \"J\"\n   * - \"Jane Marie Doe\" → \"JD\" (first and last)\n   */\n  name: z.string().optional(),\n\n  /** Visual size variant (touch target always 44x44px min for sm/default) */\n  size: AvatarSizeSchema.optional().default('default'),\n\n  /** Shape variant */\n  shape: AvatarShapeSchema.optional().default('circle'),\n\n  /** Status ring indicator */\n  status: AvatarStatusSchema.optional(),\n\n  /**\n   * Click handler for actionable avatar\n   * When provided, renders as Button with 3-layer architecture\n   * @see plan.md Clarification 2 (mutually exclusive with group onPress)\n   */\n  onPress: z.function().optional(),\n});\n\nexport type AvatarProps = Omit<z.infer<typeof AvatarPropsSchema>, 'onPress'> & {\n  /** Click handler for actionable avatar */\n  onPress?: (e: PressEvent) => void;\n  /**\n   * Internal: Position index within AvatarGroup (0-indexed)\n   * Used to progressively darken backgrounds in groups\n   * @internal Set by AvatarGroup, do not use directly\n   */\n  _groupIndex?: number;\n};\n\n/**\n * Avatar group props schema extending BaseComponentProps\n *\n * @see plan.md Clarification 1 (Group Border)\n * @see plan.md Clarification 5 (Stack Order - first on top)\n * @see plan.md Clarification 7 (Border Scope - groups only)\n */\nexport const AvatarGroupPropsSchema = BaseComponentPropsSchema.extend({\n  /**\n   * Maximum avatars to display before overflow (+X indicator)\n   * Default: 3\n   */\n  max: z.number().int().positive().optional().default(3),\n\n  /**\n   * Shape inherited by all child avatars\n   * Individual avatar shape props are ignored in groups\n   */\n  shape: AvatarShapeSchema.optional().default('circle'),\n\n  /**\n   * Size inherited by all child avatars\n   * Individual avatar size props are ignored in groups\n   * Also determines overlap spacing (sm: 8px, default: 12px, lg: 16px)\n   */\n  size: AvatarSizeSchema.optional().default('default'),\n\n  /**\n   * Click handler for the entire group\n   * When provided, individual avatar onPress handlers are ignored\n   * @see plan.md Clarification 2 (Mutually exclusive)\n   */\n  onPress: z.function().optional(),\n});\n\nexport type AvatarGroupProps = Omit<z.infer<typeof AvatarGroupPropsSchema>, 'onPress'> & {\n  /** Click handler for the entire group */\n  onPress?: (e: PressEvent) => void;\n};\n\n/**\n * Internal loading state for avatar images\n * @see plan.md Clarification 4 (Loading State)\n */\nexport type AvatarLoadingState = 'loading' | 'loaded' | 'error';\n"]}