@etus/ui 0.1.1 → 0.1.2

package/src/components/primitives/Avatar/AvatarGroup.test.tsx

@@ -1,1377 +0,0 @@
-// Avatar/AvatarGroup.test.tsx
-import { fireEvent, render, screen } from "@testing-library/react"
-import { axe, toHaveNoViolations } from "jest-axe"
-import { describe, expect, it, vi } from "vitest"
-
-import { Avatar, AvatarFallback, AvatarImage } from "./Avatar"
-import { AvatarAddButton } from "./AvatarAddButton"
-import { AvatarGroup } from "./AvatarGroup"
-import { AvatarLabelGroup, getInitials } from "./AvatarLabelGroup"
-
-expect.extend(toHaveNoViolations)
-
-// ============================================
-// RENDERING TESTS
-// ============================================
-describe("AvatarGroup", () => {
-  describe("Rendering", () => {
-    it("renders children avatars", () => {
-      render(
-        <AvatarGroup data-testid="avatar-group">
-          <Avatar data-testid="avatar-1">
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar data-testid="avatar-2">
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-          <Avatar data-testid="avatar-3">
-            <AvatarFallback>A3</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-group")).toBeInTheDocument()
-      expect(screen.getByText("A1")).toBeInTheDocument()
-      expect(screen.getByText("A2")).toBeInTheDocument()
-      expect(screen.getByText("A3")).toBeInTheDocument()
-    })
-
-    it("has data-slot attribute", () => {
-      render(
-        <AvatarGroup data-testid="avatar-group">
-          <Avatar>
-            <AvatarFallback>AB</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-group")).toHaveAttribute("data-slot", "avatar-group")
-    })
-
-    it("renders with custom className", () => {
-      render(
-        <AvatarGroup className="custom-class" data-testid="avatar-group">
-          <Avatar>
-            <AvatarFallback>AB</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-group")).toHaveClass("custom-class")
-    })
-
-    it("passes through data-* attributes", () => {
-      render(
-        <AvatarGroup data-custom="value" data-testid="avatar-group">
-          <Avatar>
-            <AvatarFallback>AB</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-group")).toHaveAttribute("data-custom", "value")
-    })
-
-    it("has role=group for accessibility", () => {
-      render(
-        <AvatarGroup data-testid="avatar-group">
-          <Avatar>
-            <AvatarFallback>AB</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-group")).toHaveAttribute("role", "group")
-    })
-  })
-
-  // ============================================
-  // MAX PROP TESTS
-  // ============================================
-  describe("Max Prop", () => {
-    it("shows +N indicator when max is exceeded", () => {
-      render(
-        <AvatarGroup max={2}>
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A3</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A4</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByText("A1")).toBeInTheDocument()
-      expect(screen.getByText("A2")).toBeInTheDocument()
-      expect(screen.queryByText("A3")).not.toBeInTheDocument()
-      expect(screen.queryByText("A4")).not.toBeInTheDocument()
-      expect(screen.getByText("+2")).toBeInTheDocument()
-    })
-
-    it("does not show +N when max equals total children", () => {
-      render(
-        <AvatarGroup max={3}>
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A3</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByText("A1")).toBeInTheDocument()
-      expect(screen.getByText("A2")).toBeInTheDocument()
-      expect(screen.getByText("A3")).toBeInTheDocument()
-      expect(screen.queryByText(/\+/)).not.toBeInTheDocument()
-    })
-
-    it("does not show +N when max is greater than total children", () => {
-      render(
-        <AvatarGroup max={10}>
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByText("A1")).toBeInTheDocument()
-      expect(screen.getByText("A2")).toBeInTheDocument()
-      expect(screen.queryByText(/\+/)).not.toBeInTheDocument()
-    })
-
-    it("shows all avatars when max is not specified", () => {
-      render(
-        <AvatarGroup>
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A3</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A4</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A5</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByText("A1")).toBeInTheDocument()
-      expect(screen.getByText("A2")).toBeInTheDocument()
-      expect(screen.getByText("A3")).toBeInTheDocument()
-      expect(screen.getByText("A4")).toBeInTheDocument()
-      expect(screen.getByText("A5")).toBeInTheDocument()
-      expect(screen.queryByText(/\+/)).not.toBeInTheDocument()
-    })
-
-    it("shows +1 when one avatar is hidden", () => {
-      render(
-        <AvatarGroup max={2}>
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A3</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByText("+1")).toBeInTheDocument()
-    })
-
-    it("calculates correct remainder count", () => {
-      render(
-        <AvatarGroup max={1}>
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A3</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A4</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A5</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByText("+4")).toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // SIZE VARIANT TESTS - NEGATIVE SPACING
-  // ============================================
-  describe("Size-Specific Spacing", () => {
-    it("applies -space-x-1 for xs size", () => {
-      render(
-        <AvatarGroup data-testid="avatar-group" size="xs">
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-group")).toHaveClass("-space-x-1")
-    })
-
-    it("applies -space-x-2 for sm size", () => {
-      render(
-        <AvatarGroup data-testid="avatar-group" size="sm">
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-group")).toHaveClass("-space-x-2")
-    })
-
-    it("applies -space-x-3 for default size", () => {
-      render(
-        <AvatarGroup data-testid="avatar-group" size="default">
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-group")).toHaveClass("-space-x-3")
-    })
-
-    it("applies -space-x-3 for lg size", () => {
-      render(
-        <AvatarGroup data-testid="avatar-group" size="lg">
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-group")).toHaveClass("-space-x-3")
-    })
-
-    it("applies -space-x-4 for xl size", () => {
-      render(
-        <AvatarGroup data-testid="avatar-group" size="xl">
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-group")).toHaveClass("-space-x-4")
-    })
-
-    it("applies -space-x-4 for 2xl size", () => {
-      render(
-        <AvatarGroup data-testid="avatar-group" size="2xl">
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-group")).toHaveClass("-space-x-4")
-    })
-
-    it("uses default spacing (-space-x-3) when size not specified", () => {
-      render(
-        <AvatarGroup data-testid="avatar-group">
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-group")).toHaveClass("-space-x-3")
-    })
-  })
-
-  // ============================================
-  // SIZE PROP APPLIED TO CHILDREN
-  // ============================================
-  describe("Size Applied to Children", () => {
-    it("applies size to child avatars", () => {
-      render(
-        <AvatarGroup size="lg">
-          <Avatar data-testid="avatar-1">
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar data-testid="avatar-2">
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-1")).toHaveClass("size-[var(--avatar-size-lg)]")
-      expect(screen.getByTestId("avatar-2")).toHaveClass("size-[var(--avatar-size-lg)]")
-    })
-
-    it("applies xs size to child avatars", () => {
-      render(
-        <AvatarGroup size="xs">
-          <Avatar data-testid="avatar-1">
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-1")).toHaveClass("size-[var(--avatar-size-xs)]")
-    })
-
-    it("applies 2xl size to child avatars", () => {
-      render(
-        <AvatarGroup size="2xl">
-          <Avatar data-testid="avatar-1">
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-1")).toHaveClass("size-[var(--avatar-size-2xl)]")
-    })
-
-    it("applies size to remainder indicator avatar", () => {
-      render(
-        <AvatarGroup max={1} size="lg">
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      // Find the +1 fallback and check its parent avatar
-      const remainderFallback = screen.getByText("+1")
-      const remainderAvatar = remainderFallback.closest('[data-slot="avatar"]')
-      expect(remainderAvatar).toHaveClass("size-[var(--avatar-size-lg)]")
-    })
-  })
-
-  // ============================================
-  // BORDERED PROP TESTS
-  // ============================================
-  describe("Bordered Prop", () => {
-    it("applies ring-2 ring-background by default (bordered=true)", () => {
-      render(
-        <AvatarGroup>
-          <Avatar data-testid="avatar-1">
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-1")).toHaveClass("ring-2")
-      expect(screen.getByTestId("avatar-1")).toHaveClass("ring-background")
-    })
-
-    it("applies ring to all child avatars when bordered=true", () => {
-      render(
-        <AvatarGroup bordered>
-          <Avatar data-testid="avatar-1">
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar data-testid="avatar-2">
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-1")).toHaveClass("ring-2")
-      expect(screen.getByTestId("avatar-2")).toHaveClass("ring-2")
-    })
-
-    it("does not apply ring when bordered=false", () => {
-      render(
-        <AvatarGroup bordered={false}>
-          <Avatar data-testid="avatar-1">
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-1")).not.toHaveClass("ring-2")
-    })
-
-    it("applies ring to remainder indicator when bordered=true", () => {
-      render(
-        <AvatarGroup bordered max={1}>
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      const remainderFallback = screen.getByText("+1")
-      const remainderAvatar = remainderFallback.closest('[data-slot="avatar"]')
-      expect(remainderAvatar).toHaveClass("ring-2")
-      expect(remainderAvatar).toHaveClass("ring-background")
-    })
-  })
-
-  // ============================================
-  // REMAINDER INDICATOR STYLING
-  // ============================================
-  describe("Remainder Indicator Styling", () => {
-    it("has bg-muted background", () => {
-      render(
-        <AvatarGroup max={1}>
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      const remainderFallback = screen.getByText("+1")
-      expect(remainderFallback).toHaveClass("bg-muted")
-    })
-
-    it("has muted foreground text color", () => {
-      render(
-        <AvatarGroup max={1}>
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      const remainderFallback = screen.getByText("+1")
-      expect(remainderFallback).toHaveClass("text-muted-foreground")
-    })
-
-    it("has text-xs for compact display", () => {
-      render(
-        <AvatarGroup max={1}>
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      const remainderFallback = screen.getByText("+1")
-      expect(remainderFallback).toHaveClass("text-xs")
-    })
-
-    it("has font-medium for readability", () => {
-      render(
-        <AvatarGroup max={1}>
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      const remainderFallback = screen.getByText("+1")
-      expect(remainderFallback).toHaveClass("font-medium")
-    })
-  })
-
-  // ============================================
-  // FLEXBOX LAYOUT TESTS
-  // ============================================
-  describe("Layout", () => {
-    it("uses flexbox layout", () => {
-      render(
-        <AvatarGroup data-testid="avatar-group">
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-group")).toHaveClass("flex")
-    })
-  })
-
-  // ============================================
-  // EDGE CASES
-  // ============================================
-  describe("Edge Cases", () => {
-    it("handles single child", () => {
-      render(
-        <AvatarGroup>
-          <Avatar data-testid="avatar-1">
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-1")).toBeInTheDocument()
-    })
-
-    it("handles max=0", () => {
-      render(
-        <AvatarGroup max={0}>
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.queryByText("A1")).not.toBeInTheDocument()
-      expect(screen.queryByText("A2")).not.toBeInTheDocument()
-      expect(screen.getByText("+2")).toBeInTheDocument()
-    })
-
-    it("handles non-Avatar children gracefully", () => {
-      render(
-        <AvatarGroup data-testid="avatar-group">
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <span data-testid="non-avatar">Text</span>
-        </AvatarGroup>
-      )
-      expect(screen.getByText("A1")).toBeInTheDocument()
-      expect(screen.getByTestId("non-avatar")).toBeInTheDocument()
-    })
-
-    it("preserves child avatar className", () => {
-      render(
-        <AvatarGroup>
-          <Avatar className="custom-avatar-class" data-testid="avatar-1">
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-1")).toHaveClass("custom-avatar-class")
-    })
-  })
-
-  // ============================================
-  // ACCESSIBILITY TESTS
-  // ============================================
-  describe("Accessibility", () => {
-    it("has no accessibility violations", async () => {
-      const { container } = render(
-        <AvatarGroup>
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no violations with max exceeded", async () => {
-      const { container } = render(
-        <AvatarGroup max={2}>
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A3</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no violations with all size variants", async () => {
-      const { container } = render(
-        <div>
-          <AvatarGroup size="xs">
-            <Avatar><AvatarFallback>XS</AvatarFallback></Avatar>
-          </AvatarGroup>
-          <AvatarGroup size="sm">
-            <Avatar><AvatarFallback>SM</AvatarFallback></Avatar>
-          </AvatarGroup>
-          <AvatarGroup size="default">
-            <Avatar><AvatarFallback>DF</AvatarFallback></Avatar>
-          </AvatarGroup>
-          <AvatarGroup size="lg">
-            <Avatar><AvatarFallback>LG</AvatarFallback></Avatar>
-          </AvatarGroup>
-          <AvatarGroup size="xl">
-            <Avatar><AvatarFallback>XL</AvatarFallback></Avatar>
-          </AvatarGroup>
-          <AvatarGroup size="2xl">
-            <Avatar><AvatarFallback>2X</AvatarFallback></Avatar>
-          </AvatarGroup>
-        </div>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has accessible label", () => {
-      render(
-        <AvatarGroup data-testid="avatar-group">
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("avatar-group")).toHaveAttribute("aria-label")
-    })
-
-    it("has descriptive label when max is exceeded", () => {
-      render(
-        <AvatarGroup data-testid="avatar-group" max={2}>
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A3</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A4</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      const ariaLabel = screen.getByTestId("avatar-group").getAttribute("aria-label")
-      expect(ariaLabel).toContain("showing 2 of 4")
-    })
-  })
-
-  // ============================================
-  // WITH AVATAR IMAGES
-  // ============================================
-  describe("With AvatarImage", () => {
-    it("renders avatars with images", () => {
-      render(
-        <AvatarGroup>
-          <Avatar data-testid="avatar-1">
-            <AvatarImage alt="User 1" src="https://example.com/1.jpg" />
-            <AvatarFallback>U1</AvatarFallback>
-          </Avatar>
-          <Avatar data-testid="avatar-2">
-            <AvatarImage alt="User 2" src="https://example.com/2.jpg" />
-            <AvatarFallback>U2</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      // Fallbacks show in JSDOM since images don't load
-      expect(screen.getByText("U1")).toBeInTheDocument()
-      expect(screen.getByText("U2")).toBeInTheDocument()
-    })
-
-    it("has no violations with avatar images", async () => {
-      const { container } = render(
-        <AvatarGroup>
-          <Avatar>
-            <AvatarImage alt="User 1" src="https://example.com/1.jpg" />
-            <AvatarFallback>U1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarImage alt="User 2" src="https://example.com/2.jpg" />
-            <AvatarFallback>U2</AvatarFallback>
-          </Avatar>
-        </AvatarGroup>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-  })
-})
-
-// ============================================
-// AVATAR LABEL GROUP TESTS
-// ============================================
-describe("AvatarLabelGroup", () => {
-  // ============================================
-  // RENDERING TESTS
-  // ============================================
-  describe("Rendering", () => {
-    it("renders avatar with name label", () => {
-      render(
-        <AvatarLabelGroup
-          data-testid="avatar-label-group"
-          name="John Doe"
-        />
-      )
-      expect(screen.getByTestId("avatar-label-group")).toBeInTheDocument()
-      expect(screen.getByText("John Doe")).toBeInTheDocument()
-    })
-
-    it("has data-slot attribute", () => {
-      render(
-        <AvatarLabelGroup
-          data-testid="avatar-label-group"
-          name="John Doe"
-        />
-      )
-      expect(screen.getByTestId("avatar-label-group")).toHaveAttribute(
-        "data-slot",
-        "avatar-label-group"
-      )
-    })
-
-    it("renders with custom className", () => {
-      render(
-        <AvatarLabelGroup
-          className="custom-class"
-          data-testid="avatar-label-group"
-          name="John Doe"
-        />
-      )
-      expect(screen.getByTestId("avatar-label-group")).toHaveClass("custom-class")
-    })
-
-    it("renders with description", () => {
-      render(
-        <AvatarLabelGroup
-          description="Software Engineer"
-          name="John Doe"
-        />
-      )
-      expect(screen.getByText("John Doe")).toBeInTheDocument()
-      expect(screen.getByText("Software Engineer")).toBeInTheDocument()
-    })
-
-    it("description is optional", () => {
-      render(
-        <AvatarLabelGroup
-          name="John Doe"
-        />
-      )
-      expect(screen.getByText("John Doe")).toBeInTheDocument()
-      expect(screen.queryByText("Software Engineer")).not.toBeInTheDocument()
-    })
-
-    it("passes through data-* attributes", () => {
-      render(
-        <AvatarLabelGroup
-          data-custom="value"
-          data-testid="avatar-label-group"
-          name="John Doe"
-        />
-      )
-      expect(screen.getByTestId("avatar-label-group")).toHaveAttribute("data-custom", "value")
-    })
-  })
-
-  // ============================================
-  // INITIALS FALLBACK TESTS
-  // ============================================
-  describe("Initials Fallback", () => {
-    it("shows fallback initials when no src provided", () => {
-      render(
-        <AvatarLabelGroup name="John Doe" />
-      )
-      expect(screen.getByText("JD")).toBeInTheDocument()
-    })
-
-    it("generates correct initials from single name", () => {
-      expect(getInitials("John")).toBe("J")
-    })
-
-    it("generates correct initials from two-word name", () => {
-      expect(getInitials("John Doe")).toBe("JD")
-    })
-
-    it("generates correct initials from three-word name (takes first two)", () => {
-      expect(getInitials("John Michael Doe")).toBe("JM")
-    })
-
-    it("uppercases initials", () => {
-      expect(getInitials("john doe")).toBe("JD")
-    })
-
-    it("limits initials to two characters", () => {
-      expect(getInitials("A B C D")).toBe("AB")
-    })
-  })
-
-  // ============================================
-  // SIZE VARIANT TESTS
-  // ============================================
-  describe("Size Variants", () => {
-    it("applies xs size to avatar", () => {
-      render(
-        <AvatarLabelGroup name="John Doe" size="xs" />
-      )
-      const avatar = screen.getByText("JD").closest('[data-slot="avatar"]')
-      expect(avatar).toHaveClass("size-[var(--avatar-size-xs)]")
-    })
-
-    it("applies sm size to avatar", () => {
-      render(
-        <AvatarLabelGroup name="John Doe" size="sm" />
-      )
-      const avatar = screen.getByText("JD").closest('[data-slot="avatar"]')
-      expect(avatar).toHaveClass("size-[var(--avatar-size-sm)]")
-    })
-
-    it("applies default size to avatar", () => {
-      render(
-        <AvatarLabelGroup name="John Doe" size="default" />
-      )
-      const avatar = screen.getByText("JD").closest('[data-slot="avatar"]')
-      expect(avatar).toHaveClass("size-[var(--avatar-size-default)]")
-    })
-
-    it("applies lg size to avatar", () => {
-      render(
-        <AvatarLabelGroup name="John Doe" size="lg" />
-      )
-      const avatar = screen.getByText("JD").closest('[data-slot="avatar"]')
-      expect(avatar).toHaveClass("size-[var(--avatar-size-lg)]")
-    })
-
-    it("applies xl size to avatar", () => {
-      render(
-        <AvatarLabelGroup name="John Doe" size="xl" />
-      )
-      const avatar = screen.getByText("JD").closest('[data-slot="avatar"]')
-      expect(avatar).toHaveClass("size-[var(--avatar-size-xl)]")
-    })
-
-    it("applies 2xl size to avatar", () => {
-      render(
-        <AvatarLabelGroup name="John Doe" size="2xl" />
-      )
-      const avatar = screen.getByText("JD").closest('[data-slot="avatar"]')
-      expect(avatar).toHaveClass("size-[var(--avatar-size-2xl)]")
-    })
-
-    it("uses default size when not specified", () => {
-      render(
-        <AvatarLabelGroup name="John Doe" />
-      )
-      const avatar = screen.getByText("JD").closest('[data-slot="avatar"]')
-      expect(avatar).toHaveClass("size-[var(--avatar-size-default)]")
-    })
-  })
-
-  // ============================================
-  // STATUS INDICATOR TESTS
-  // ============================================
-  describe("Status Indicator", () => {
-    it("renders with online status", () => {
-      render(
-        <AvatarLabelGroup name="John Doe" status="online" />
-      )
-      const status = screen.getByRole("status")
-      expect(status).toBeInTheDocument()
-      expect(status).toHaveAttribute("aria-label", "Online")
-    })
-
-    it("renders with offline status", () => {
-      render(
-        <AvatarLabelGroup name="John Doe" status="offline" />
-      )
-      const status = screen.getByRole("status")
-      expect(status).toHaveAttribute("aria-label", "Offline")
-    })
-
-    it("renders with busy status", () => {
-      render(
-        <AvatarLabelGroup name="John Doe" status="busy" />
-      )
-      const status = screen.getByRole("status")
-      expect(status).toHaveAttribute("aria-label", "Busy")
-    })
-
-    it("renders with away status", () => {
-      render(
-        <AvatarLabelGroup name="John Doe" status="away" />
-      )
-      const status = screen.getByRole("status")
-      expect(status).toHaveAttribute("aria-label", "Away")
-    })
-
-    it("does not render status when not provided", () => {
-      render(
-        <AvatarLabelGroup name="John Doe" />
-      )
-      expect(screen.queryByRole("status")).not.toBeInTheDocument()
-    })
-
-    it("status has correct data-slot", () => {
-      render(
-        <AvatarLabelGroup name="John Doe" status="online" />
-      )
-      const status = screen.getByRole("status")
-      expect(status).toHaveAttribute("data-slot", "avatar-status")
-    })
-  })
-
-  // ============================================
-  // IMAGE TESTS
-  // ============================================
-  describe("With Image", () => {
-    it("renders with avatar image", () => {
-      render(
-        <AvatarLabelGroup
-          alt="John's avatar"
-          name="John Doe"
-          src="https://example.com/avatar.jpg"
-        />
-      )
-      // In JSDOM, image won't load so fallback shows
-      expect(screen.getByText("JD")).toBeInTheDocument()
-    })
-
-    it("uses name as alt text when alt not provided", () => {
-      const { container } = render(
-        <AvatarLabelGroup
-          name="John Doe"
-          src="https://example.com/avatar.jpg"
-        />
-      )
-      // In JSDOM, the Radix Avatar image is created but may not be in DOM until loaded
-      // Check that the component renders correctly with fallback
-      expect(screen.getByText("JD")).toBeInTheDocument()
-      // Verify an Avatar exists in the container
-      const avatar = container.querySelector('[data-slot="avatar"]')
-      expect(avatar).toBeInTheDocument()
-    })
-
-    it("uses provided alt text when specified", () => {
-      const { container } = render(
-        <AvatarLabelGroup
-          alt="Custom alt text"
-          name="John Doe"
-          src="https://example.com/avatar.jpg"
-        />
-      )
-      // In JSDOM, the Radix Avatar image is created but may not be in DOM until loaded
-      // Check that the component renders correctly with fallback
-      expect(screen.getByText("JD")).toBeInTheDocument()
-      // Verify an Avatar exists in the container
-      const avatar = container.querySelector('[data-slot="avatar"]')
-      expect(avatar).toBeInTheDocument()
-    })
-  })
-
-  // ============================================
-  // LAYOUT TESTS
-  // ============================================
-  describe("Layout", () => {
-    it("uses flexbox layout", () => {
-      render(
-        <AvatarLabelGroup data-testid="avatar-label-group" name="John Doe" />
-      )
-      expect(screen.getByTestId("avatar-label-group")).toHaveClass("flex")
-    })
-
-    it("centers items vertically", () => {
-      render(
-        <AvatarLabelGroup data-testid="avatar-label-group" name="John Doe" />
-      )
-      expect(screen.getByTestId("avatar-label-group")).toHaveClass("items-center")
-    })
-
-    it("has gap-3 between avatar and text", () => {
-      render(
-        <AvatarLabelGroup data-testid="avatar-label-group" name="John Doe" />
-      )
-      expect(screen.getByTestId("avatar-label-group")).toHaveClass("gap-3")
-    })
-
-    it("name has correct text styling", () => {
-      render(
-        <AvatarLabelGroup name="John Doe" />
-      )
-      const name = screen.getByText("John Doe")
-      expect(name).toHaveClass("text-sm")
-      expect(name).toHaveClass("font-medium")
-      expect(name).toHaveClass("text-foreground")
-    })
-
-    it("description has correct text styling", () => {
-      render(
-        <AvatarLabelGroup description="Software Engineer" name="John Doe" />
-      )
-      const description = screen.getByText("Software Engineer")
-      expect(description).toHaveClass("text-sm")
-      expect(description).toHaveClass("text-muted-foreground")
-    })
-  })
-
-  // ============================================
-  // ACCESSIBILITY TESTS
-  // ============================================
-  describe("Accessibility", () => {
-    it("has no accessibility violations", async () => {
-      const { container } = render(
-        <AvatarLabelGroup description="Software Engineer" name="John Doe" />
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no violations with status indicator", async () => {
-      const { container } = render(
-        <AvatarLabelGroup name="John Doe" status="online" />
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no violations with all size variants", async () => {
-      const { container } = render(
-        <div>
-          <AvatarLabelGroup name="XS User" size="xs" />
-          <AvatarLabelGroup name="SM User" size="sm" />
-          <AvatarLabelGroup name="Default User" size="default" />
-          <AvatarLabelGroup name="LG User" size="lg" />
-          <AvatarLabelGroup name="XL User" size="xl" />
-          <AvatarLabelGroup name="2XL User" size="2xl" />
-        </div>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no violations with image", async () => {
-      const { container } = render(
-        <AvatarLabelGroup
-          alt="John's avatar"
-          name="John Doe"
-          src="https://example.com/avatar.jpg"
-        />
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-  })
-})
-
-// ============================================
-// AVATAR ADD BUTTON TESTS
-// ============================================
-describe("AvatarAddButton", () => {
-  // ============================================
-  // RENDERING TESTS
-  // ============================================
-  describe("Rendering", () => {
-    it("renders add button", () => {
-      render(<AvatarAddButton data-testid="add-button" />)
-      expect(screen.getByTestId("add-button")).toBeInTheDocument()
-    })
-
-    it("has data-slot attribute", () => {
-      render(<AvatarAddButton data-testid="add-button" />)
-      expect(screen.getByTestId("add-button")).toHaveAttribute(
-        "data-slot",
-        "avatar-add-button"
-      )
-    })
-
-    it("has accessible label (aria-label)", () => {
-      render(<AvatarAddButton data-testid="add-button" />)
-      expect(screen.getByTestId("add-button")).toHaveAttribute(
-        "aria-label",
-        "Add user"
-      )
-    })
-
-    it("is a button element with type button", () => {
-      render(<AvatarAddButton data-testid="add-button" />)
-      const button = screen.getByTestId("add-button")
-      expect(button.tagName).toBe("BUTTON")
-      expect(button).toHaveAttribute("type", "button")
-    })
-
-    it("renders plus icon", () => {
-      const { container } = render(<AvatarAddButton />)
-      const svgIcon = container.querySelector("svg")
-      expect(svgIcon).toBeInTheDocument()
-    })
-
-    it("supports custom className", () => {
-      render(<AvatarAddButton className="custom-class" data-testid="add-button" />)
-      expect(screen.getByTestId("add-button")).toHaveClass("custom-class")
-    })
-
-    it("passes through data-* attributes", () => {
-      render(<AvatarAddButton data-custom="value" data-testid="add-button" />)
-      expect(screen.getByTestId("add-button")).toHaveAttribute("data-custom", "value")
-    })
-  })
-
-  // ============================================
-  // SIZE VARIANT TESTS
-  // ============================================
-  describe("Size Variants", () => {
-    it("applies xs size", () => {
-      render(<AvatarAddButton data-testid="add-button" size="xs" />)
-      expect(screen.getByTestId("add-button")).toHaveClass("size-[var(--avatar-size-xs)]")
-    })
-
-    it("applies sm size", () => {
-      render(<AvatarAddButton data-testid="add-button" size="sm" />)
-      expect(screen.getByTestId("add-button")).toHaveClass("size-[var(--avatar-size-sm)]")
-    })
-
-    it("applies default size", () => {
-      render(<AvatarAddButton data-testid="add-button" size="default" />)
-      expect(screen.getByTestId("add-button")).toHaveClass("size-[var(--avatar-size-default)]")
-    })
-
-    it("applies lg size", () => {
-      render(<AvatarAddButton data-testid="add-button" size="lg" />)
-      expect(screen.getByTestId("add-button")).toHaveClass("size-[var(--avatar-size-lg)]")
-    })
-
-    it("applies xl size", () => {
-      render(<AvatarAddButton data-testid="add-button" size="xl" />)
-      expect(screen.getByTestId("add-button")).toHaveClass("size-[var(--avatar-size-xl)]")
-    })
-
-    it("applies 2xl size", () => {
-      render(<AvatarAddButton data-testid="add-button" size="2xl" />)
-      expect(screen.getByTestId("add-button")).toHaveClass("size-[var(--avatar-size-2xl)]")
-    })
-
-    it("uses default size when not specified", () => {
-      render(<AvatarAddButton data-testid="add-button" />)
-      expect(screen.getByTestId("add-button")).toHaveClass("size-[var(--avatar-size-default)]")
-    })
-
-    it("applies correct icon size for xs", () => {
-      const { container } = render(<AvatarAddButton size="xs" />)
-      const icon = container.querySelector("svg")
-      expect(icon).toHaveClass("size-3")
-    })
-
-    it("applies correct icon size for sm", () => {
-      const { container } = render(<AvatarAddButton size="sm" />)
-      const icon = container.querySelector("svg")
-      expect(icon).toHaveClass("size-3.5")
-    })
-
-    it("applies correct icon size for default", () => {
-      const { container } = render(<AvatarAddButton size="default" />)
-      const icon = container.querySelector("svg")
-      expect(icon).toHaveClass("size-4")
-    })
-
-    it("applies correct icon size for lg", () => {
-      const { container } = render(<AvatarAddButton size="lg" />)
-      const icon = container.querySelector("svg")
-      expect(icon).toHaveClass("size-5")
-    })
-
-    it("applies correct icon size for xl", () => {
-      const { container } = render(<AvatarAddButton size="xl" />)
-      const icon = container.querySelector("svg")
-      expect(icon).toHaveClass("size-6")
-    })
-
-    it("applies correct icon size for 2xl", () => {
-      const { container } = render(<AvatarAddButton size="2xl" />)
-      const icon = container.querySelector("svg")
-      expect(icon).toHaveClass("size-7")
-    })
-  })
-
-  // ============================================
-  // STYLING TESTS
-  // ============================================
-  describe("Styling", () => {
-    it("has dashed border styling", () => {
-      render(<AvatarAddButton data-testid="add-button" />)
-      const button = screen.getByTestId("add-button")
-      expect(button).toHaveClass("border-2")
-      expect(button).toHaveClass("border-dashed")
-      expect(button).toHaveClass("border-muted-foreground/50")
-    })
-
-    it("has muted background", () => {
-      render(<AvatarAddButton data-testid="add-button" />)
-      expect(screen.getByTestId("add-button")).toHaveClass("bg-muted")
-    })
-
-    it("has muted foreground text color", () => {
-      render(<AvatarAddButton data-testid="add-button" />)
-      expect(screen.getByTestId("add-button")).toHaveClass("text-muted-foreground")
-    })
-
-    it("has hover state classes", () => {
-      render(<AvatarAddButton data-testid="add-button" />)
-      const button = screen.getByTestId("add-button")
-      expect(button).toHaveClass("hover:border-primary")
-      expect(button).toHaveClass("hover:bg-primary/10")
-      expect(button).toHaveClass("hover:text-primary")
-    })
-
-    it("has focus ring classes", () => {
-      render(<AvatarAddButton data-testid="add-button" />)
-      const button = screen.getByTestId("add-button")
-      expect(button).toHaveClass("focus-visible:ring-2")
-      expect(button).toHaveClass("focus-visible:ring-ring")
-      expect(button).toHaveClass("focus-visible:ring-offset-2")
-    })
-
-    it("is rounded-full for circular shape", () => {
-      render(<AvatarAddButton data-testid="add-button" />)
-      expect(screen.getByTestId("add-button")).toHaveClass("rounded-full")
-    })
-
-    it("has transition-colors for smooth hover", () => {
-      render(<AvatarAddButton data-testid="add-button" />)
-      expect(screen.getByTestId("add-button")).toHaveClass("transition-colors")
-    })
-
-    it("has cursor-pointer", () => {
-      render(<AvatarAddButton data-testid="add-button" />)
-      expect(screen.getByTestId("add-button")).toHaveClass("cursor-pointer")
-    })
-  })
-
-  // ============================================
-  // INTERACTIVITY TESTS
-  // ============================================
-  describe("Interactivity", () => {
-    it("is focusable", () => {
-      render(<AvatarAddButton data-testid="add-button" />)
-      const button = screen.getByTestId("add-button")
-      button.focus()
-      expect(document.activeElement).toBe(button)
-    })
-
-    it("handles click events", () => {
-      const handleClick = vi.fn()
-      render(<AvatarAddButton data-testid="add-button" onClick={handleClick} />)
-      fireEvent.click(screen.getByTestId("add-button"))
-      expect(handleClick).toHaveBeenCalledTimes(1)
-    })
-
-    it("can be disabled", () => {
-      render(<AvatarAddButton disabled data-testid="add-button" />)
-      expect(screen.getByTestId("add-button")).toBeDisabled()
-    })
-
-    it("does not fire click when disabled", () => {
-      const handleClick = vi.fn()
-      render(<AvatarAddButton disabled data-testid="add-button" onClick={handleClick} />)
-      fireEvent.click(screen.getByTestId("add-button"))
-      expect(handleClick).not.toHaveBeenCalled()
-    })
-  })
-
-  // ============================================
-  // INTEGRATION WITH AVATAR GROUP
-  // ============================================
-  describe("Integration with AvatarGroup", () => {
-    it("renders at end of AvatarGroup", () => {
-      render(
-        <AvatarGroup>
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>A2</AvatarFallback>
-          </Avatar>
-          <AvatarAddButton data-testid="add-button" />
-        </AvatarGroup>
-      )
-      expect(screen.getByText("A1")).toBeInTheDocument()
-      expect(screen.getByText("A2")).toBeInTheDocument()
-      expect(screen.getByTestId("add-button")).toBeInTheDocument()
-    })
-
-    it("maintains circular shape in group context", () => {
-      render(
-        <AvatarGroup>
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <AvatarAddButton data-testid="add-button" />
-        </AvatarGroup>
-      )
-      expect(screen.getByTestId("add-button")).toHaveClass("rounded-full")
-    })
-  })
-
-  // ============================================
-  // ACCESSIBILITY TESTS
-  // ============================================
-  describe("Accessibility", () => {
-    it("has no accessibility violations", async () => {
-      const { container } = render(<AvatarAddButton />)
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no violations with all size variants", async () => {
-      const { container } = render(
-        <div>
-          <AvatarAddButton size="xs" />
-          <AvatarAddButton size="sm" />
-          <AvatarAddButton size="default" />
-          <AvatarAddButton size="lg" />
-          <AvatarAddButton size="xl" />
-          <AvatarAddButton size="2xl" />
-        </div>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no violations when disabled", async () => {
-      const { container } = render(<AvatarAddButton disabled />)
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no violations in AvatarGroup context", async () => {
-      const { container } = render(
-        <AvatarGroup>
-          <Avatar>
-            <AvatarFallback>A1</AvatarFallback>
-          </Avatar>
-          <AvatarAddButton />
-        </AvatarGroup>
-      )
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("supports custom aria-label", () => {
-      render(<AvatarAddButton aria-label="Add team member" data-testid="add-button" />)
-      expect(screen.getByTestId("add-button")).toHaveAttribute(
-        "aria-label",
-        "Add team member"
-      )
-    })
-  })
-})