@tribepad/themis 1.0.0

package/dist/chunk-AL6P275L.mjs

@@ -0,0 +1,435 @@
+import { cn } from './chunk-E2KQFV3O.mjs';
+import { BaseComponentPropsSchema } from './chunk-5SVLJN2C.mjs';
+import { memo, forwardRef, useState, useCallback, Children, isValidElement, cloneElement } from 'react';
+import { Button } from 'react-aria-components';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { z } from 'zod';
+
+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 = 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 = 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 = memo(
+  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] = useState(
+        src ? "loading" : "error"
+      );
+      const handleImageLoad = useCallback(() => {
+        setLoadingState("loaded");
+      }, []);
+      const handleImageError = 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__ */ 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__ */ 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__ */ 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__ */ jsx("span", { "aria-hidden": "true", children: initials })
+          ]
+        }
+      );
+      if (isInteractive) {
+        return /* @__PURE__ */ jsx(
+          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__ */ 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 = 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 = 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
+  }
+});
+var AvatarGroup = memo(
+  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 = 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) {
+        Children.forEach(children, (child) => {
+          if (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 (!isValidElement(child)) return null;
+        const childProps = child.props;
+        const zIndex = visibleCount - index;
+        const individualOnPress = isGroupInteractive ? void 0 : childProps.onPress;
+        return /* @__PURE__ */ 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: 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__ */ 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__ */ jsxs(Fragment, { children: [
+        visibleAvatars,
+        overflowIndicator
+      ] });
+      if (isGroupInteractive) {
+        return /* @__PURE__ */ jsx(
+          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__ */ 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 AvatarSizeSchema = z.enum(["sm", "default", "lg"]);
+var AvatarShapeSchema = z.enum(["circle", "rounded"]);
+var AvatarStatusSchema = 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: z.string().optional(),
+  /**
+   * Alt text for the avatar image (required for accessibility)
+   * When actionable, this is used for the aria-label
+   */
+  alt: 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: 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: z.function().optional()
+});
+var AvatarGroupPropsSchema = BaseComponentPropsSchema.extend({
+  /**
+   * Maximum avatars to display before overflow (+X indicator)
+   * Default: 3
+   */
+  max: 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: z.function().optional()
+});
+
+export { AVATAR_OVERLAP_BY_SIZE, Avatar, AvatarGroup, AvatarGroupPropsSchema, AvatarPropsSchema, AvatarShapeSchema, AvatarSizeSchema, AvatarStatusSchema, avatarOuterVariants, avatarOverflowVariants, avatarVisualVariants };
+//# sourceMappingURL=chunk-AL6P275L.mjs.map
+//# sourceMappingURL=chunk-AL6P275L.mjs.map

package/dist/chunk-AL6P275L.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/Avatar/Avatar.tsx","../src/elements/Avatar/AvatarGroup.tsx","../src/elements/Avatar/Avatar.types.ts"],"names":["AriaButton","cva","memo","forwardRef","jsx","jsxs"],"mappings":";;;;;;;;AAkCA,SAAS,YAAY,IAAA,EAAkC;AACrD,EAAA,IAAI,CAAC,IAAA,IAAQ,CAAC,IAAA,CAAK,IAAA,IAAQ,OAAO,EAAA;AAElC,EAAA,MAAM,KAAA,GAAQ,KAAK,IAAA,EAAK,CAAE,MAAM,KAAK,CAAA,CAAE,OAAO,OAAO,CAAA;AACrD,EAAA,IAAI,KAAA,CAAM,MAAA,KAAW,CAAA,EAAG,OAAO,EAAA;AAE/B,EAAA,MAAM,SAAA,GAAY,MAAM,CAAC,CAAA;AACzB,EAAA,IAAI,KAAA,CAAM,WAAW,CAAA,EAAG;AACtB,IAAA,OAAO,YAAY,SAAA,CAAU,MAAA,CAAO,CAAC,CAAA,CAAE,aAAY,GAAI,EAAA;AAAA,EACzD;AAGA,EAAA,MAAM,QAAA,GAAW,KAAA,CAAM,KAAA,CAAM,MAAA,GAAS,CAAC,CAAA;AACvC,EAAA,MAAM,QAAQ,SAAA,GAAY,SAAA,CAAU,OAAO,CAAC,CAAA,CAAE,aAAY,GAAI,EAAA;AAC9D,EAAA,MAAM,OAAO,QAAA,GAAW,QAAA,CAAS,OAAO,CAAC,CAAA,CAAE,aAAY,GAAI,EAAA;AAC3D,EAAA,OAAO,KAAA,GAAQ,IAAA;AACjB;AAOO,IAAM,mBAAA,GAAsB,GAAA;AAAA,EACjC,kDAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,2BAAA;AAAA,QACJ,OAAA,EAAS,2BAAA;AAAA,QACT,EAAA,EAAI;AAAA,OACN;AAAA,MACA,WAAA,EAAa;AAAA,QACX,IAAA,EAAM;AAAA,UACJ,gBAAA;AAAA,UACA,4BAAA;AAAA,UACA,sBAAA;AAAA,UACA,kCAAA;AAAA,UACA,6BAAA;AAAA,UACA,oDAAA;AAAA,UACA,kCAAA;AAAA,UACA,0BAAA;AAAA,UACA,sBAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,SAAA;AAAA,MACN,WAAA,EAAa;AAAA;AACf;AAEJ;AAMO,IAAM,oBAAA,GAAuB,GAAA;AAAA,EAClC;AAAA,IACE,kDAAA;AAAA,IACA,iBAAA;AAAA,IACA,+BAAA;AAAA,IACA,iCAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,iBAAA;AAAA,QACJ,OAAA,EAAS,mBAAA;AAAA,QACT,EAAA,EAAI;AAAA,OACN;AAAA,MACA,KAAA,EAAO;AAAA,QACL,MAAA,EAAQ,cAAA;AAAA,QACR,OAAA,EAAS;AAAA,OACX;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,MAAA,EAAQ,gDAAA;AAAA,QACR,OAAA,EAAS,iDAAA;AAAA,QACT,IAAA,EAAM,8CAAA;AAAA,QACN,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,SAAA;AAAA,MACN,KAAA,EAAO;AAAA;AACT;AAEJ;AAUA,IAAM,MAAA,GAAS,IAAA;AAAA,EACb,UAAA;AAAA,IACE,CACE;AAAA,MACE,GAAA;AAAA,MACA,GAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA,GAAO,SAAA;AAAA,MACP,KAAA,GAAQ,QAAA;AAAA,MACR,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,EAAA;AAAA,MACA,aAAA,EAAe,UAAA;AAAA,MACf,YAAA,EAAc,SAAA;AAAA,MACd,iBAAA,EAAmB,cAAA;AAAA,MACnB,kBAAA,EAAoB,eAAA;AAAA,MACpB;AAAA,OAEF,GAAA,KACiB;AAEjB,MAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,QAAA;AAAA,QACtC,MAAM,SAAA,GAAY;AAAA,OACpB;AAEA,MAAA,MAAM,eAAA,GAAkB,YAAY,MAAM;AACxC,QAAA,eAAA,CAAgB,QAAQ,CAAA;AAAA,MAC1B,CAAA,EAAG,EAAE,CAAA;AAEL,MAAA,MAAM,gBAAA,GAAmB,YAAY,MAAM;AACzC,QAAA,eAAA,CAAgB,OAAO,CAAA;AAAA,MACzB,CAAA,EAAG,EAAE,CAAA;AAEL,MAAA,MAAM,QAAA,GAAW,YAAY,IAAI,CAAA;AACjC,MAAA,MAAM,aAAA,GAAgB,QAAQ,OAAO,CAAA;AAGrC,MAAA,MAAM,iBAAA,GACJ,cACC,aAAA,IAAiB,MAAA,GAAS,GAAG,GAAG,CAAA,EAAA,EAAK,MAAM,CAAA,CAAA,GAAK,MAAA,CAAA;AAInD,MAAA,MAAM,eAAA,GACJ,WAAA,KAAgB,MAAA,GAAY,CAAA,GAAI,cAAc,IAAA,GAAO,MAAA;AAGvD,MAAA,MAAM,aAAA,mBACJ,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAY,eAAA;AAAA,UACZ,SAAA,EAAW,GAAG,oBAAA,CAAqB,EAAE,MAAM,KAAA,EAAO,MAAA,EAAQ,CAAC,CAAA;AAAA,UAC3D,KAAA,EAAO,oBAAoB,MAAA,GAAY,EAAE,QAAQ,CAAA,WAAA,EAAc,eAAe,KAAI,GAAI,MAAA;AAAA,UAKrF,QAAA,EAAA;AAAA,YAAA,YAAA,KAAiB,SAAA,oBAChB,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,aAAA,EAAY,iBAAA;AAAA,gBACZ,SAAA,EAAW,EAAA;AAAA,kBACT,8DAAA;AAAA,kBACA,KAAA,KAAU,WAAW,cAAA,GAAiB;AAAA,iBACxC;AAAA,gBACA,aAAA,EAAY;AAAA;AAAA,aACd;AAAA,YAID,OAAO,YAAA,KAAiB,OAAA;AAAA,4BAEvB,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,GAAA;AAAA,gBACA,GAAA,EAAK,gBAAgB,EAAA,GAAK,GAAA;AAAA,gBAC1B,MAAA,EAAQ,eAAA;AAAA,gBACR,OAAA,EAAS,gBAAA;AAAA,gBACT,SAAA,EAAW,EAAA;AAAA,kBACT,4BAAA;AAAA,kBACA,iBAAiB,SAAA,IAAa;AAAA;AAChC;AAAA,aACF;AAAA,YAID,iBAAiB,OAAA,IAAW,QAAA,wBAC1B,MAAA,EAAA,EAAK,aAAA,EAAY,QAAQ,QAAA,EAAA,QAAA,EAAS;AAAA;AAAA;AAAA,OAEvC;AAIF,MAAA,IAAI,aAAA,EAAe;AACjB,QAAA,uBACE,GAAA;AAAA,UAACA,MAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,EAAA;AAAA,YACA,eAAa,UAAA,IAAc,cAAA;AAAA,YAC3B,cAAY,iBAAA,IAAqB,GAAA;AAAA,YACjC,iBAAA,EAAiB,cAAA;AAAA,YACjB,kBAAA,EAAkB,eAAA;AAAA,YAClB,OAAA;AAAA,YACA,SAAA,EAAW,EAAA;AAAA,cACT,mBAAA,CAAoB,EAAE,IAAA,EAAM,WAAA,EAAa,MAAM,CAAA;AAAA,cAC/C;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,MAEJ;AAGA,MAAA,uBACE,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,EAAA;AAAA,UACA,eAAa,UAAA,IAAc,cAAA;AAAA,UAC3B,YAAA,EAAY,SAAA;AAAA,UACZ,iBAAA,EAAiB,cAAA;AAAA,UACjB,kBAAA,EAAkB,eAAA;AAAA,UAClB,SAAA,EAAW,EAAA;AAAA,YACT,mBAAA,CAAoB,EAAE,IAAA,EAAM,WAAA,EAAa,OAAO,CAAA;AAAA,YAChD;AAAA,WACF;AAAA,UAEC,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,IAEJ;AAAA;AAEJ;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;ACxOrB,IAAM,qBAAA,GAAoD;AAAA,EACxD,EAAA,EAAI,OAAA;AAAA,EACJ,OAAA,EAAS,OAAA;AAAA,EACT,EAAA,EAAI;AACN,CAAA;AAKA,IAAM,sBAAA,GAAyBC,GAAAA;AAAA,EAC7B;AAAA,IACE,kDAAA;AAAA,IACA,uBAAA;AAAA,IACA,oCAAA;AAAA,IACA,eAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,iBAAA;AAAA,QACJ,OAAA,EAAS,mBAAA;AAAA,QACT,EAAA,EAAI;AAAA,OACN;AAAA,MACA,KAAA,EAAO;AAAA,QACL,MAAA,EAAQ,cAAA;AAAA,QACR,OAAA,EAAS;AAAA;AACX,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,SAAA;AAAA,MACN,KAAA,EAAO;AAAA;AACT;AAEJ;AAKA,IAAM,mBAAA,GAAsBA,IAAI,0BAAA,EAA4B;AAAA,EAC1D,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,IAAA,EAAM;AAAA,QACJ,gBAAA;AAAA,QACA,4BAAA;AAAA,QACA,sBAAA;AAAA,QACA,kCAAA;AAAA,QACA,6BAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,WAAA,EAAa;AAAA;AAEjB,CAAC,CAAA;AAMD,IAAM,WAAA,GAAcC,IAAAA;AAAA,EAClBC,UAAAA;AAAA,IACE,CACE;AAAA,MACE,GAAA,GAAM,CAAA;AAAA,MACN,KAAA,GAAQ,QAAA;AAAA,MACR,IAAA,GAAO,SAAA;AAAA,MACP,OAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,EAAA;AAAA,MACA,aAAA,EAAe,UAAA;AAAA,MACf,YAAA,EAAc,SAAA;AAAA,MACd,iBAAA,EAAmB,cAAA;AAAA,MACnB,kBAAA,EAAoB;AAAA,OAEtB,GAAA,KACiB;AACjB,MAAA,MAAM,UAAA,GAAa,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA;AAC5C,MAAA,MAAM,aAAa,UAAA,CAAW,MAAA;AAC9B,MAAA,MAAM,YAAA,GAAe,IAAA,CAAK,GAAA,CAAI,UAAA,EAAY,GAAG,CAAA;AAC7C,MAAA,MAAM,gBAAgB,UAAA,GAAa,YAAA;AAEnC,MAAA,MAAM,kBAAA,GAAqB,QAAQ,OAAO,CAAA;AAC1C,MAAA,MAAM,YAAA,GAAe,sBAAsB,IAAI,CAAA;AAI/C,MAAA,IAAI,OAAA,CAAQ,GAAA,CAAI,QAAA,KAAa,YAAA,IAAgB,kBAAA,EAAoB;AAC/D,QAAA,QAAA,CAAS,OAAA,CAAQ,QAAA,EAAU,CAAC,KAAA,KAAU;AACpC,UAAA,IACE,cAAA,CAAe,KAAK,CAAA,IACnB,KAAA,CAAM,MAAgC,OAAA,EACvC;AACA,YAAA,OAAA,CAAQ,IAAA;AAAA,cACN;AAAA,aAEF;AAAA,UACF;AAAA,QACF,CAAC,CAAA;AAAA,MACH;AAGA,MAAA,MAAM,cAAA,GAAiB,WAAW,KAAA,CAAM,CAAA,EAAG,YAAY,CAAA,CAAE,GAAA,CAAI,CAAC,KAAA,EAAO,KAAA,KAAU;AAC7E,QAAA,IAAI,CAAC,cAAA,CAAe,KAAK,CAAA,EAAG,OAAO,IAAA;AAGnC,QAAA,MAAM,aAAa,KAAA,CAAM,KAAA;AAQzB,QAAA,MAAM,SAAS,YAAA,GAAe,KAAA;AAI9B,QAAA,MAAM,iBAAA,GAAoB,kBAAA,GACtB,MAAA,GACA,UAAA,CAAW,OAAA;AAEf,QAAA,uBACEC,GAAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YAEC,aAAA,EAAY,mBAAA;AAAA,YACZ,SAAA,EAAW,EAAA;AAAA,cACT,UAAA;AAAA;AAAA,cAEA,0CAAA;AAAA,cACA,KAAA,KAAU,WAAW,cAAA,GAAiB,YAAA;AAAA;AAAA,cAEtC,QAAQ,CAAA,IAAK,YAAA;AAAA;AAAA;AAAA,cAGb,CAAC,kBAAA,IAAsB;AAAA,gBACrB,kCAAA;AAAA,gBACA,0BAAA;AAAA,gBACA,sBAAA;AAAA,gBACA,gCAAA;AAAA,gBACA;AAAA;AACF,aACF;AAAA,YACA,KAAA,EAAO,EAAE,MAAA,EAAO;AAAA,YAEf,uBAAa,KAAA,EAAuB;AAAA,cACnC,IAAA;AAAA,cACA,KAAA;AAAA;AAAA,cAEA,OAAA,EAAS,iBAAA;AAAA;AAAA,cAET,WAAA,EAAa,KAAA;AAAA;AAAA,cAEb,SAAA,EAAW,EAAA;AAAA,gBACT,UAAA,CAAW,SAAA;AAAA;AAAA,gBAEX;AAAA;AACF,aAC6B;AAAA,WAAA;AAAA,UAlC1B;AAAA,SAmCP;AAAA,MAEJ,CAAC,CAAA;AAGD,MAAA,MAAM,iBAAA,GACJ,aAAA,GAAgB,CAAA,mBACdC,IAAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAY,iBAAA;AAAA,UACZ,SAAA,EAAW,EAAA;AAAA,YACT,sBAAA,CAAuB,EAAE,IAAA,EAAM,KAAA,EAAO,CAAA;AAAA,YACtC;AAAA,WACF;AAAA,UACA,KAAA,EAAO,EAAE,MAAA,EAAQ,CAAA,EAAE;AAAA,UACnB,aAAA,EAAY,MAAA;AAAA,UACb,QAAA,EAAA;AAAA,YAAA,GAAA;AAAA,YACG;AAAA;AAAA;AAAA,OACJ,GACE,IAAA;AAGN,MAAA,MAAM,iBAAA,GACJ,aACA,CAAA,EAAG,UAAU,IAAI,UAAA,KAAe,CAAA,GAAI,WAAW,SAAS,CAAA,CAAA;AAG1D,MAAA,MAAM,YAAA,mBACJA,IAAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,cAAA;AAAA,QACA;AAAA,OAAA,EACH,CAAA;AAKF,MAAA,IAAI,kBAAA,EAAoB;AACtB,QAAA,uBACED,GAAAA;AAAA,UAACJ,MAAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,EAAA;AAAA,YACA,aAAA,EAAa,UAAA;AAAA,YACb,YAAA,EAAY,iBAAA;AAAA,YACZ,iBAAA,EAAiB,cAAA;AAAA,YACjB,kBAAA,EAAkB,eAAA;AAAA,YAClB,OAAA;AAAA,YACA,SAAA,EAAW,GAAG,mBAAA,CAAoB,EAAE,aAAa,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,YAElE,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,MAEJ;AAGA,MAAA,uBACEI,GAAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,EAAA;AAAA,UACA,aAAA,EAAa,UAAA;AAAA,UACb,IAAA,EAAK,OAAA;AAAA,UACL,YAAA,EAAY,iBAAA;AAAA,UACZ,iBAAA,EAAiB,cAAA;AAAA,UACjB,kBAAA,EAAkB,eAAA;AAAA,UAClB,SAAA,EAAW,GAAG,mBAAA,CAAoB,EAAE,aAAa,KAAA,EAAO,GAAG,SAAS,CAAA;AAAA,UAEnE,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,IAEJ;AAAA;AAEJ;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;AC9PnB,IAAM,mBAAmB,CAAA,CAAE,IAAA,CAAK,CAAC,IAAA,EAAM,SAAA,EAAW,IAAI,CAAC;AAQvD,IAAM,oBAAoB,CAAA,CAAE,IAAA,CAAK,CAAC,QAAA,EAAU,SAAS,CAAC;AAYtD,IAAM,kBAAA,GAAqB,EAAE,IAAA,CAAK,CAAC,UAAU,SAAA,EAAW,MAAA,EAAQ,MAAM,CAAC;AAOvE,IAAM,sBAAA,GAAqD;AAAA,EAChE,EAAA,EAAI,CAAA;AAAA,EACJ,OAAA,EAAS,EAAA;AAAA,EACT,EAAA,EAAI;AACN;AAUO,IAAM,iBAAA,GAAoB,yBAAyB,MAAA,CAAO;AAAA;AAAA,EAE/D,GAAA,EAAK,CAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS;AAAA;AAAA;AAAA;AAAA;AAAA,EAMzB,KAAK,CAAA,CAAE,MAAA,EAAO,CAAE,GAAA,CAAI,GAAG,mCAAmC,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ1D,IAAA,EAAM,CAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS;AAAA;AAAA,EAG1B,IAAA,EAAM,gBAAA,CAAiB,QAAA,EAAS,CAAE,QAAQ,SAAS,CAAA;AAAA;AAAA,EAGnD,KAAA,EAAO,iBAAA,CAAkB,QAAA,EAAS,CAAE,QAAQ,QAAQ,CAAA;AAAA;AAAA,EAGpD,MAAA,EAAQ,mBAAmB,QAAA,EAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOpC,OAAA,EAAS,CAAA,CAAE,QAAA,EAAS,CAAE,QAAA;AACxB,CAAC;AAoBM,IAAM,sBAAA,GAAyB,yBAAyB,MAAA,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpE,GAAA,EAAK,CAAA,CAAE,MAAA,EAAO,CAAE,GAAA,EAAI,CAAE,QAAA,EAAS,CAAE,QAAA,EAAS,CAAE,OAAA,CAAQ,CAAC,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrD,KAAA,EAAO,iBAAA,CAAkB,QAAA,EAAS,CAAE,QAAQ,QAAQ,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOpD,IAAA,EAAM,gBAAA,CAAiB,QAAA,EAAS,CAAE,QAAQ,SAAS,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOnD,OAAA,EAAS,CAAA,CAAE,QAAA,EAAS,CAAE,QAAA;AACxB,CAAC","file":"chunk-AL6P275L.mjs","sourcesContent":["'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';\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"]}

package/dist/chunk-AZ3RJYTB.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var zod = require('zod');
+
+var RegistryItemSchema = zod.z.object({
+  $schema: zod.z.literal("https://ui.shadcn.com/schema/registry-item.json"),
+  name: zod.z.string().regex(/^[a-z-]+$/, "Name must be lowercase kebab-case"),
+  type: zod.z.literal("registry:ui"),
+  title: zod.z.string().min(1),
+  description: zod.z.string().min(10, "Description must be at least 10 characters"),
+  dependencies: zod.z.array(zod.z.string()).default([]),
+  files: zod.z.array(
+    zod.z.object({
+      path: zod.z.string().regex(/\.tsx?$/, "Must be TypeScript file"),
+      type: zod.z.literal("registry:component")
+    })
+  ).min(1, "Must include at least one file")
+});
+var MasterRegistrySchema = zod.z.object({
+  $schema: zod.z.literal("https://ui.shadcn.com/schema/registry.json"),
+  name: zod.z.string(),
+  homepage: zod.z.string().url().optional(),
+  items: zod.z.array(RegistryItemSchema)
+});
+function validateRegistry(registry) {
+  return RegistryItemSchema.safeParse(registry);
+}
+function validateMasterRegistry(registry) {
+  return MasterRegistrySchema.safeParse(registry);
+}
+
+exports.MasterRegistrySchema = MasterRegistrySchema;
+exports.RegistryItemSchema = RegistryItemSchema;
+exports.validateMasterRegistry = validateMasterRegistry;
+exports.validateRegistry = validateRegistry;
+//# sourceMappingURL=chunk-AZ3RJYTB.js.map
+//# sourceMappingURL=chunk-AZ3RJYTB.js.map

package/dist/chunk-AZ3RJYTB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/schemas/RegistryItem.ts"],"names":["z"],"mappings":";;;;AASO,IAAM,kBAAA,GAAqBA,MAAE,MAAA,CAAO;AAAA,EACzC,OAAA,EAASA,KAAA,CAAE,OAAA,CAAQ,iDAAiD,CAAA;AAAA,EACpE,MAAMA,KAAA,CAAE,MAAA,EAAO,CAAE,KAAA,CAAM,aAAa,mCAAmC,CAAA;AAAA,EACvE,IAAA,EAAMA,KAAA,CAAE,OAAA,CAAQ,aAAa,CAAA;AAAA,EAC7B,KAAA,EAAOA,KAAA,CAAE,MAAA,EAAO,CAAE,IAAI,CAAC,CAAA;AAAA,EACvB,aAAaA,KAAA,CAAE,MAAA,EAAO,CAAE,GAAA,CAAI,IAAI,4CAA4C,CAAA;AAAA,EAC5E,YAAA,EAAcA,MAAE,KAAA,CAAMA,KAAA,CAAE,QAAQ,CAAA,CAAE,OAAA,CAAQ,EAAE,CAAA;AAAA,EAC5C,OAAOA,KAAA,CACJ,KAAA;AAAA,IACCA,MAAE,MAAA,CAAO;AAAA,MACP,MAAMA,KAAA,CAAE,MAAA,EAAO,CAAE,KAAA,CAAM,WAAW,yBAAyB,CAAA;AAAA,MAC3D,IAAA,EAAMA,KAAA,CAAE,OAAA,CAAQ,oBAAoB;AAAA,KACrC;AAAA,GACH,CACC,GAAA,CAAI,CAAA,EAAG,gCAAgC;AAC5C,CAAC;AAOM,IAAM,oBAAA,GAAuBA,MAAE,MAAA,CAAO;AAAA,EAC3C,OAAA,EAASA,KAAA,CAAE,OAAA,CAAQ,4CAA4C,CAAA;AAAA,EAC/D,IAAA,EAAMA,MAAE,MAAA,EAAO;AAAA,EACf,UAAUA,KAAA,CAAE,MAAA,EAAO,CAAE,GAAA,GAAM,QAAA,EAAS;AAAA,EACpC,KAAA,EAAOA,KAAA,CAAE,KAAA,CAAM,kBAAkB;AACnC,CAAC;AASM,SAAS,iBAAiB,QAAA,EAAqD;AACpF,EAAA,OAAO,kBAAA,CAAmB,UAAU,QAAQ,CAAA;AAC9C;AAOO,SAAS,uBAAuB,QAAA,EAAuD;AAC5F,EAAA,OAAO,oBAAA,CAAqB,UAAU,QAAQ,CAAA;AAChD","file":"chunk-AZ3RJYTB.js","sourcesContent":["import { z } from 'zod';\nimport type { ZodSafeParseResult } from 'zod';\n\n/**\n * Zod schema for ShadCN-compatible registry JSON validation\n *\n * @see spec.md FR-004 to FR-008 (Registry System Requirements)\n * @see https://ui.shadcn.com/schema/registry-item.json\n */\nexport const RegistryItemSchema = z.object({\n  $schema: z.literal('https://ui.shadcn.com/schema/registry-item.json'),\n  name: z.string().regex(/^[a-z-]+$/, 'Name must be lowercase kebab-case'),\n  type: z.literal('registry:ui'),\n  title: z.string().min(1),\n  description: z.string().min(10, 'Description must be at least 10 characters'),\n  dependencies: z.array(z.string()).default([]),\n  files: z\n    .array(\n      z.object({\n        path: z.string().regex(/\\.tsx?$/, 'Must be TypeScript file'),\n        type: z.literal('registry:component'),\n      })\n    )\n    .min(1, 'Must include at least one file'),\n});\n\nexport type RegistryItem = z.infer<typeof RegistryItemSchema>;\n\n/**\n * Master registry schema for the complete component catalog\n */\nexport const MasterRegistrySchema = z.object({\n  $schema: z.literal('https://ui.shadcn.com/schema/registry.json'),\n  name: z.string(),\n  homepage: z.string().url().optional(),\n  items: z.array(RegistryItemSchema),\n});\n\nexport type MasterRegistry = z.infer<typeof MasterRegistrySchema>;\n\n/**\n * Validate a registry file against the RegistryItem schema\n * @param registry - The registry object to validate\n * @returns Validation result with parsed data or error\n */\nexport function validateRegistry(registry: unknown): ZodSafeParseResult<RegistryItem> {\n  return RegistryItemSchema.safeParse(registry);\n}\n\n/**\n * Validate master registry file against MasterRegistry schema\n * @param registry - The master registry object to validate\n * @returns Validation result with parsed data or error\n */\nexport function validateMasterRegistry(registry: unknown): ZodSafeParseResult<MasterRegistry> {\n  return MasterRegistrySchema.safeParse(registry);\n}\n"]}

package/dist/chunk-B5Q4UPL6.js

@@ -0,0 +1,32 @@
+'use strict';
+
+// src/styles/interaction-states.ts
+var FOCUS_STYLES = "data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--themis-ring)] data-[focus-visible]:ring-offset-2";
+var PRESSED_STYLES = "data-[pressed]:scale-[0.97]";
+var PRESSED_STYLES_BASE = "data-[pressed]:transition-transform data-[pressed]:duration-100";
+var HOVER_STYLES = "data-[hovered]:shadow-md";
+var HOVER_STYLES_BASE = "data-[hovered]:transition-shadow data-[hovered]:duration-200";
+var HIGH_CONTRAST_FOCUS = "hc:data-[focus-visible]:outline hc:data-[focus-visible]:outline-4 hc:data-[focus-visible]:outline-offset-2 hc:data-[focus-visible]:outline-foreground";
+var HIGH_CONTRAST_HOVER = "hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground";
+var HIGH_CONTRAST_PRESSED = "hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground";
+var HIGH_CONTRAST_INTERACTIONS = `${HIGH_CONTRAST_FOCUS} ${HIGH_CONTRAST_HOVER} ${HIGH_CONTRAST_PRESSED}`;
+var DISABLED_STYLES = "disabled:pointer-events-none disabled:opacity-50";
+var DEFAULT_INTERACTIONS = `${FOCUS_STYLES} ${PRESSED_STYLES} ${HOVER_STYLES} ${HIGH_CONTRAST_FOCUS} ${HIGH_CONTRAST_HOVER} ${HIGH_CONTRAST_PRESSED}`;
+var SUBTLE_INTERACTIONS = `${FOCUS_STYLES} ${HIGH_CONTRAST_FOCUS}`;
+var NON_INTERACTIVE = "cursor-default select-none";
+
+exports.DEFAULT_INTERACTIONS = DEFAULT_INTERACTIONS;
+exports.DISABLED_STYLES = DISABLED_STYLES;
+exports.FOCUS_STYLES = FOCUS_STYLES;
+exports.HIGH_CONTRAST_FOCUS = HIGH_CONTRAST_FOCUS;
+exports.HIGH_CONTRAST_HOVER = HIGH_CONTRAST_HOVER;
+exports.HIGH_CONTRAST_INTERACTIONS = HIGH_CONTRAST_INTERACTIONS;
+exports.HIGH_CONTRAST_PRESSED = HIGH_CONTRAST_PRESSED;
+exports.HOVER_STYLES = HOVER_STYLES;
+exports.HOVER_STYLES_BASE = HOVER_STYLES_BASE;
+exports.NON_INTERACTIVE = NON_INTERACTIVE;
+exports.PRESSED_STYLES = PRESSED_STYLES;
+exports.PRESSED_STYLES_BASE = PRESSED_STYLES_BASE;
+exports.SUBTLE_INTERACTIONS = SUBTLE_INTERACTIONS;
+//# sourceMappingURL=chunk-B5Q4UPL6.js.map
+//# sourceMappingURL=chunk-B5Q4UPL6.js.map

package/dist/chunk-B5Q4UPL6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles/interaction-states.ts"],"names":[],"mappings":";;;AAoBO,IAAM,YAAA,GAAe;AAUrB,IAAM,cAAA,GAAiB;AAKvB,IAAM,mBAAA,GAAsB;AAU5B,IAAM,YAAA,GAAe;AAKrB,IAAM,iBAAA,GAAoB;AAQ1B,IAAM,mBAAA,GAAsB;AAM5B,IAAM,mBAAA,GAAsB;AAM5B,IAAM,qBAAA,GAAwB;AAM9B,IAAM,6BAA6B,CAAA,EAAG,mBAAmB,CAAA,CAAA,EAAI,mBAAmB,IAAI,qBAAqB,CAAA;AAMzG,IAAM,eAAA,GAAkB;AAWxB,IAAM,oBAAA,GAAuB,CAAA,EAAG,YAAY,CAAA,CAAA,EAAI,cAAc,CAAA,CAAA,EAAI,YAAY,CAAA,CAAA,EAAI,mBAAmB,CAAA,CAAA,EAAI,mBAAmB,CAAA,CAAA,EAAI,qBAAqB,CAAA;AAQrJ,IAAM,mBAAA,GAAsB,CAAA,EAAG,YAAY,CAAA,CAAA,EAAI,mBAAmB,CAAA;AAMlE,IAAM,eAAA,GAAkB","file":"chunk-B5Q4UPL6.js","sourcesContent":["/**\n * Global Interaction State Styles\n *\n * Consistent interaction patterns across all Themis components.\n * These styles ensure WCAG 2.2 AAA compliance and predictable UX.\n *\n * @see spec.md FR-010 (Visible focus ring for keyboard navigation)\n * @see spec.md FR-031 (Pressed state feedback)\n * @see spec.md FR-012 (High contrast mode support)\n * @see constitution.md Principle IV (Accessibility First)\n */\n\n/**\n * Focus state styles (FR-010)\n * Visible focus ring for keyboard navigation - WCAG 2.2 Level AAA\n *\n * Components can override by extending these styles:\n * @example\n * cn(FOCUS_STYLES, \"ring-4\") // Increases ring width to 4px\n */\nexport const FOCUS_STYLES = \"data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--themis-ring)] data-[focus-visible]:ring-offset-2\";\n\n/**\n * Pressed/Active state styles (FR-031)\n * Visual feedback for press interactions\n *\n * Components can override the scale amount:\n * @example\n * cn(PRESSED_STYLES_BASE, \"data-[pressed]:scale-[0.95]\") // More pronounced scale\n */\nexport const PRESSED_STYLES = \"data-[pressed]:scale-[0.97]\";\n\n/**\n * Base pressed styles without scale (for components that need different feedback)\n */\nexport const PRESSED_STYLES_BASE = \"data-[pressed]:transition-transform data-[pressed]:duration-100\";\n\n/**\n * Hover state styles\n * Elevation change on hover for better affordance\n *\n * Components can override shadow depth:\n * @example\n * cn(HOVER_STYLES_BASE, \"data-[hovered]:shadow-lg\") // Larger shadow\n */\nexport const HOVER_STYLES = \"data-[hovered]:shadow-md\";\n\n/**\n * Base hover styles without shadow (for components that use different hover effects)\n */\nexport const HOVER_STYLES_BASE = \"data-[hovered]:transition-shadow data-[hovered]:duration-200\";\n\n/**\n * High contrast mode focus (FR-012)\n * Enhanced outlines for users requiring high contrast\n *\n * Uses 'hc:' prefix for prefers-contrast: more media query\n */\nexport const HIGH_CONTRAST_FOCUS = \"hc:data-[focus-visible]:outline hc:data-[focus-visible]:outline-4 hc:data-[focus-visible]:outline-offset-2 hc:data-[focus-visible]:outline-foreground\";\n\n/**\n * High contrast mode hover (FR-012)\n * Enhanced outlines for hover in high contrast mode\n */\nexport const HIGH_CONTRAST_HOVER = \"hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground\";\n\n/**\n * High contrast mode pressed state\n * Enhanced outlines for pressed state in high contrast mode\n */\nexport const HIGH_CONTRAST_PRESSED = \"hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground\";\n\n/**\n * Combined high contrast styles\n * Use this for components that need all high contrast interaction states\n */\nexport const HIGH_CONTRAST_INTERACTIONS = `${HIGH_CONTRAST_FOCUS} ${HIGH_CONTRAST_HOVER} ${HIGH_CONTRAST_PRESSED}`;\n\n/**\n * Disabled state styles\n * Consistent disabled appearance across all components\n */\nexport const DISABLED_STYLES = \"disabled:pointer-events-none disabled:opacity-50\";\n\n/**\n * Default interaction bundle\n * Most common combination for interactive components\n *\n * Includes: focus ring, pressed scale, hover shadow, high contrast enhancements\n *\n * @example\n * <button className={cn(DEFAULT_INTERACTIONS, \"bg-primary\")}>Click</button>\n */\nexport const DEFAULT_INTERACTIONS = `${FOCUS_STYLES} ${PRESSED_STYLES} ${HOVER_STYLES} ${HIGH_CONTRAST_FOCUS} ${HIGH_CONTRAST_HOVER} ${HIGH_CONTRAST_PRESSED}`;\n\n/**\n * Subtle interaction bundle\n * For components that need less pronounced feedback\n *\n * Includes: focus ring and high contrast, but no hover shadow or pressed scale\n */\nexport const SUBTLE_INTERACTIONS = `${FOCUS_STYLES} ${HIGH_CONTRAST_FOCUS}`;\n\n/**\n * Non-interactive element styles\n * For elements that should indicate they are not interactive\n */\nexport const NON_INTERACTIVE = \"cursor-default select-none\";\n"]}