@dashforge/tw 0.11.0-beta → 1.1.0

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,186 @@
+import { useContext } from 'react';
+import { DashFormContext, useEngineVisibility } from '@dashforge/ui-core';
+import { cn } from '../../utils/cn.js';
+import { useAccessState } from '../../hooks/useAccessState.js';
+import {
+  getSeverityClasses,
+  getSeverityRole,
+} from '../_shared/severity/severityVariants.js';
+import { getDefaultSeverityIcon } from '../_shared/severity/severityIcons.js';
+import { alertVariants } from './alert.variants.js';
+import type { AlertProps, AlertTitleProps } from './alert.types.js';
+
+/**
+ * `<AlertTitle>` — optional title block, rendered as the first child
+ * of `<Alert>`. Pattern mirrors MUI exactly (sub-component, not a
+ * prop), so the JSX shape ports 1:1 from `@mui/material`.
+ *
+ * @example
+ * <Alert severity="warning">
+ *   <AlertTitle>Subscription expires soon</AlertTitle>
+ *   Renew before 2026-06-20 to keep access.
+ * </Alert>
+ */
+export function AlertTitle({ children, className }: AlertTitleProps) {
+  const { titleSlot } = alertVariants();
+  return (
+    <div className={cn(titleSlot(), className)}>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * `<Alert>` — inline persistent status surface.
+ *
+ * **API**: full MUI Alert parity (`severity`, `variant`, `icon`,
+ * `onClose`, `action`, `role`, `<AlertTitle>` sub-component). One
+ * deliberate divergence: `severity="danger"` instead of MUI's
+ * `severity="error"` — aligned to the `danger.*` token palette.
+ *
+ * **Bridge integration** (Dashforge extras):
+ *   - `visibleWhen` — engine-reactive predicate (re-evaluated on
+ *     every engine state change when mounted inside a `<DashForm>`)
+ *   - `access` — RBAC gating via `@dashforge/rbac`
+ *
+ * **Token-driven**: every color class flows from `dashforgePreset()`
+ * via CSS variables. No hardcoded hex, no `dark:` variants. The
+ * 3×4 color matrix lives in `_shared/severity/severityVariants.ts`
+ * and is shared with the refactored `<Snackbar>` (and future Banner).
+ *
+ * **A11y**: `role="alert"` for assertive severities (warning, danger)
+ * and `role="status"` for polite ones (info, success). Override via
+ * the `role` prop. The icon is `aria-hidden` — the message text is
+ * the semantic carrier.
+ *
+ * @example
+ * // Default — soft tinted surface, default icon
+ * <Alert severity="info">New feature: export to CSV is now in beta.</Alert>
+ *
+ * // With title (sub-component) + close button
+ * <Alert severity="warning" onClose={dismiss}>
+ *   <AlertTitle>Subscription expires soon</AlertTitle>
+ *   Your Pro plan ends in 3 days.
+ * </Alert>
+ *
+ * // Custom icon
+ * import { Bell } from 'lucide-react';
+ * <Alert severity="info" icon={<Bell size={20} />}>3 new notifications</Alert>
+ *
+ * // No icon — colored surface alone carries the severity
+ * <Alert severity="success" icon={false}>Saved 2 minutes ago.</Alert>
+ *
+ * // Custom action — CTA replaces the auto-close button
+ * <Alert severity="warning" action={<button onClick={renew}>Renew</button>}>
+ *   Trial expires in 3 days.
+ * </Alert>
+ *
+ * // Filled variant — for high-priority callouts
+ * <Alert severity="danger" variant="filled">
+ *   Couldn't save — 3 fields below contain validation errors.
+ * </Alert>
+ */
+export function Alert({
+  severity,
+  variant = 'standard',
+  children,
+  icon: iconProp,
+  onClose,
+  closeText = 'Close',
+  action,
+  role: roleProp,
+  visibleWhen,
+  access,
+  sx,
+  className,
+  slotProps,
+}: AlertProps) {
+  // Bridge — both hooks safely return defaults outside a DashForm /
+  // RbacProvider, matching the TextField pattern.
+  const bridge = useContext(DashFormContext);
+  const isVisible = useEngineVisibility(bridge?.engine, visibleWhen);
+  const accessState = useAccessState(access);
+
+  if (!isVisible || !accessState.visible) return null;
+
+  const v = alertVariants();
+  const severityClasses = getSeverityClasses(variant, severity);
+  const role = roleProp ?? getSeverityRole(severity);
+
+  // Icon resolution:
+  // - false → no icon
+  // - undefined → default per severity (lib's inline SVG)
+  // - ReactNode → consumer's custom icon
+  const renderedIcon =
+    iconProp === false
+      ? null
+      : iconProp !== undefined
+        ? iconProp
+        : getDefaultSeverityIcon(severity);
+
+  return (
+    <div
+      role={role}
+      className={cn(
+        v.root(),
+        severityClasses.surface,
+        severityClasses.border,
+        sx,
+        className,
+        slotProps?.root?.className
+      )}
+      {...slotProps?.root}
+    >
+      {renderedIcon !== null && (
+        <span
+          className={cn(
+            v.icon(),
+            severityClasses.icon,
+            slotProps?.icon?.className
+          )}
+          {...slotProps?.icon}
+        >
+          {renderedIcon}
+        </span>
+      )}
+
+      <div
+        className={cn(v.content(), slotProps?.content?.className)}
+        {...slotProps?.content}
+      >
+        {children}
+      </div>
+
+      {action ? (
+        <div
+          className={cn(v.action(), slotProps?.action?.className)}
+          {...slotProps?.action}
+        >
+          {action}
+        </div>
+      ) : onClose ? (
+        <button
+          type="button"
+          aria-label={closeText}
+          onClick={onClose}
+          className={cn(v.closeButton(), slotProps?.closeButton?.className)}
+          {...slotProps?.closeButton}
+        >
+          <svg
+            width="1em"
+            height="1em"
+            viewBox="0 0 20 20"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={1.5}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="m6 6 8 8M14 6l-8 8" />
+          </svg>
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/components/Alert/alert.types.ts

@@ -0,0 +1,144 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { ClassValue } from 'tailwind-variants';
+import type { Engine } from '@dashforge/ui-core';
+import type { AccessRequirement } from '@dashforge/rbac';
+import type { Severity, SeverityVariant } from '../_shared/severity/severity.types.js';
+
+/**
+ * Per-slot override props for `<Alert>`. Mirrors the standard
+ * `slotProps` contract used across `@dashforge/tw` components.
+ */
+export interface AlertSlotProps {
+  root?: ComponentPropsWithoutRef<'div'>;
+  icon?: ComponentPropsWithoutRef<'span'>;
+  content?: ComponentPropsWithoutRef<'div'>;
+  action?: ComponentPropsWithoutRef<'div'>;
+  closeButton?: ComponentPropsWithoutRef<'button'>;
+}
+
+/**
+ * Props for the `<Alert>` component.
+ *
+ * Mirrors the MUI Alert API surface 1:1 (drop-in muscle memory) with
+ * a single deliberate divergence: `severity` uses `'danger'` instead of
+ * MUI's `'error'` for alignment with the `danger.*` token palette in
+ * `@dashforge/tw-tokens`.
+ *
+ * In addition to the MUI surface, Dashforge adds:
+ *   - `visibleWhen` — engine-reactive visibility predicate (same
+ *     contract as `<TextField>` / `<Checkbox>` / etc.)
+ *   - `access` — RBAC integration via `@dashforge/rbac`
+ *
+ * @see https://mui.com/material-ui/api/alert/
+ */
+export interface AlertProps {
+  /**
+   * Visual severity. Drives the color treatment and the default ARIA
+   * role (`alert` for warning / danger, `status` for info / success).
+   *
+   * Note: this is `danger`, not MUI's `error`. The runtime behaviour
+   * is identical; the naming follows the Dashforge token palette.
+   */
+  severity: Severity;
+
+  /**
+   * Variant of the severity surface. Mirrors MUI's three-way axis.
+   *
+   * - `'standard'` (default) — tinted soft surface, severity-toned
+   *   text. The "all-purpose" reading.
+   * - `'filled'` — solid colored surface, light text. High visual
+   *   weight, for blocking / critical messages.
+   * - `'outlined'` — transparent surface, severity border + text.
+   *   Minimal weight, for dense layouts.
+   *
+   * @default 'standard'
+   */
+  variant?: SeverityVariant;
+
+  /** Body content of the alert. */
+  children?: ReactNode;
+
+  /**
+   * Icon control with full MUI parity.
+   *
+   * - omitted / `undefined` → default per-severity icon (lib's inline
+   *   stroke SVG)
+   * - `ReactNode` → consumer-provided custom icon (Lucide, Phosphor,
+   *   Tabler, custom SVG — bring your own iconography)
+   * - `false` → no icon rendered (the colored surface carries the
+   *   severity signal; use when icons compete with the layout)
+   */
+  icon?: ReactNode | false;
+
+  /**
+   * When defined, the alert renders a trailing close button that
+   * fires this callback on click. Ignored if `action` is provided
+   * (`action` slot wins, matching MUI behaviour).
+   */
+  onClose?: () => void;
+
+  /**
+   * `aria-label` for the close button.
+   * @default 'Close'
+   */
+  closeText?: string;
+
+  /**
+   * Custom trailing slot — CTA buttons, links, inline forms. When
+   * provided, replaces the auto-rendered close button. The consumer
+   * is responsible for wiring any close behaviour into the custom
+   * action node.
+   */
+  action?: ReactNode;
+
+  /**
+   * Override the auto-derived ARIA role. Defaults to `'alert'` for
+   * `severity={'warning' | 'danger'}` (assertive announcement) and
+   * `'status'` for `severity={'info' | 'success'}` (polite).
+   */
+  role?: 'alert' | 'status';
+
+  /**
+   * Reactive visibility predicate. Re-evaluated on every engine state
+   * change when the alert is mounted inside a `<DashForm>`; outside a
+   * form, evaluated as a plain predicate (the consumer captures any
+   * external state in the closure).
+   *
+   * When the predicate returns `false`, the component renders `null`
+   * — same contract as form fields.
+   */
+  visibleWhen?: (engine: Engine) => boolean;
+
+  /**
+   * RBAC requirement. When the current subject does not satisfy the
+   * requirement, the alert is hidden (or disabled / read-only,
+   * per `onUnauthorized`).
+   */
+  access?: AccessRequirement;
+
+  /** Root-element class shortcut (string or `clsx`-compatible value). */
+  sx?: ClassValue;
+
+  /** Standard React `className` — appended to the root via `cn()`. */
+  className?: string;
+
+  /** Per-slot overrides — typed handles for the inner elements. */
+  slotProps?: AlertSlotProps;
+}
+
+/**
+ * Props for the `<AlertTitle>` sub-component.
+ *
+ * AlertTitle is a separate exported component, not a prop on Alert —
+ * follows MUI's pattern. Pass it as the first child of `<Alert>`:
+ *
+ * @example
+ * <Alert severity="warning">
+ *   <AlertTitle>Subscription expires soon</AlertTitle>
+ *   Your Pro plan ends on 2026-06-20.
+ * </Alert>
+ */
+export interface AlertTitleProps {
+  children: ReactNode;
+  className?: string;
+}

package/src/components/Alert/alert.variants.ts

@@ -0,0 +1,71 @@
+import { tv, type VariantProps } from 'tailwind-variants';
+
+/**
+ * Tailwind-variants recipe for `<Alert>`.
+ *
+ * Slots:
+ *   - `root`         — outer surface, severity + variant color classes
+ *                      come from `_shared/severity/severityVariants`
+ *                      (NOT baked into this recipe, to keep the matrix
+ *                      shared across Alert / Snackbar / future Banner)
+ *   - `icon`         — leading severity icon container
+ *   - `titleSlot`    — `<AlertTitle>` rendered as the first content row
+ *   - `content`      — body text container
+ *   - `action`       — trailing action / close button container
+ *   - `closeButton`  — built-in close `×` (when `onClose` is defined)
+ *
+ * The severity color classes are merged at render time via `cn()` in
+ * `Alert.tsx` — see the call sites of `getSeverityClasses(variant,
+ * severity)`. This recipe owns layout + spacing + typography only.
+ */
+export const alertVariants = tv({
+  slots: {
+    root: [
+      'relative flex items-start gap-3',
+      'px-4 py-3',
+      'rounded-lg border',
+      'text-sm',
+      // Smooth visibility transition (opacity only) — matches the
+      // Snackbar entry timing, gated on motion-reduce per WCAG 2.3.3.
+      'transition-opacity duration-150 motion-reduce:transition-none motion-reduce:duration-0',
+    ],
+    icon: [
+      'shrink-0 mt-0.5',
+      'inline-flex items-center justify-center',
+    ],
+    titleSlot: [
+      'block font-medium leading-snug mb-1',
+    ],
+    content: [
+      'flex-1 min-w-0',
+      'leading-relaxed',
+    ],
+    action: [
+      'shrink-0 inline-flex items-center',
+      'ml-auto',
+    ],
+    closeButton: [
+      'shrink-0 inline-flex items-center justify-center w-6 h-6',
+      'rounded-md',
+      'opacity-70 hover:opacity-100',
+      'outline-none focus-visible:ring-2 focus-visible:ring-current',
+      'transition-opacity',
+    ],
+  },
+  variants: {
+    /**
+     * Layout density. Defaults to comfortable spacing; `compact`
+     * tightens the vertical padding for inline contexts (form
+     * validation summary at the top of a tight modal, etc.).
+     */
+    density: {
+      comfortable: { root: 'px-4 py-3' },
+      compact: { root: 'px-3 py-2 text-[13px]' },
+    },
+  },
+  defaultVariants: {
+    density: 'comfortable',
+  },
+});
+
+export type AlertVariantProps = VariantProps<typeof alertVariants>;

package/src/components/Autocomplete/autocomplete.variants.ts

@@ -61,7 +61,7 @@ export const autocompleteVariants = tv({
       'rounded-md border bg-neutral-50 border-neutral-300 shadow-lg',
       'min-w-[var(--trigger-width)]',
     ],
-    listBox: 'outline-none py-1',
+    listBox: 'outline-none py-1 list-none pl-0 m-0',
     listItem: [
       'cursor-pointer select-none px-3 py-2 text-sm text-neutral-900',
       'outline-none',

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

@@ -0,0 +1,287 @@
+// @vitest-environment jsdom
+import * as React from 'react';
+import { describe, it, expect, afterEach } from 'vitest';
+import { fireEvent, render, screen, cleanup } from '@testing-library/react';
+import { Avatar, AvatarGroup } from './Avatar.js';
+
+void React;
+afterEach(() => cleanup());
+
+/**
+ * Unit tests for the Avatar family. Covers:
+ *   - Image rendering (src + alt)
+ *   - Auto-initials from name (1 word, 2 words, edge cases)
+ *   - Fallback chain (src fail → initials → custom icon → generic)
+ *   - Shape ↔ radius interaction (radius wins when both set)
+ *   - Size axis (5 enum values map to spacing classes)
+ *   - Color × tone resolution (soft default vs explicit tone)
+ *   - AvatarGroup slicing + overflow indicator + size inheritance
+ */
+
+describe('<Avatar>', () => {
+  describe('image rendering', () => {
+    it('renders an <img> when src is set', () => {
+      const { container } = render(
+        <Avatar src="/avatar.png" alt="Maya" />
+      );
+      expect(container.querySelector('img')).toBeTruthy();
+    });
+
+    it('applies the alt attribute', () => {
+      render(<Avatar src="/x.png" alt="Maya Rodriguez" />);
+      const img = screen.getByRole('img', { name: /maya rodriguez/i });
+      expect(img).toBeTruthy();
+    });
+
+    it('falls back to initials when the image fails to load', () => {
+      const { container } = render(<Avatar src="/broken.png" name="Maya Rodriguez" />);
+      const img = container.querySelector('img')!;
+      fireEvent.error(img);
+      // After onError the img is gone, initials shown.
+      expect(container.querySelector('img')).toBeNull();
+      expect(screen.getByText('MR')).toBeTruthy();
+    });
+  });
+
+  describe('auto-initials from name', () => {
+    it('extracts MR from "Maya Rodriguez"', () => {
+      render(<Avatar name="Maya Rodriguez" />);
+      expect(screen.getByText('MR')).toBeTruthy();
+    });
+
+    it('extracts C from single-word name "Cher"', () => {
+      render(<Avatar name="Cher" />);
+      expect(screen.getByText('C')).toBeTruthy();
+    });
+
+    it('uppercases the initials', () => {
+      render(<Avatar name="maya rodriguez" />);
+      expect(screen.getByText('MR')).toBeTruthy();
+    });
+
+    it('handles extra whitespace', () => {
+      render(<Avatar name="  Maya   Rodriguez  " />);
+      expect(screen.getByText('MR')).toBeTruthy();
+    });
+
+    it('renders a generic icon when name is empty', () => {
+      const { container } = render(<Avatar name="" />);
+      expect(container.querySelector('svg')).toBeTruthy();
+    });
+
+    it('renders a generic icon when name is omitted entirely', () => {
+      const { container } = render(<Avatar />);
+      expect(container.querySelector('svg')).toBeTruthy();
+    });
+
+    it('renders fallbackIcon over the generic icon when set', () => {
+      render(<Avatar fallbackIcon={<span data-testid="custom-icon">★</span>} />);
+      expect(screen.getByTestId('custom-icon')).toBeTruthy();
+    });
+
+    it('initials win over fallbackIcon when name is present', () => {
+      render(
+        <Avatar
+          name="Maya Rodriguez"
+          fallbackIcon={<span data-testid="custom-icon">★</span>}
+        />
+      );
+      expect(screen.getByText('MR')).toBeTruthy();
+      expect(screen.queryByTestId('custom-icon')).toBeNull();
+    });
+  });
+
+  describe('shape ↔ radius', () => {
+    it('default shape=circle → rounded-full', () => {
+      const { container } = render(<Avatar name="x" />);
+      const root = container.firstElementChild!;
+      expect(root.className).toContain('rounded-full');
+    });
+
+    it('shape="rounded" → rounded-lg', () => {
+      const { container } = render(<Avatar name="x" shape="rounded" />);
+      const root = container.firstElementChild!;
+      expect(root.className).toContain('rounded-lg');
+    });
+
+    it('shape="square" → rounded-none', () => {
+      const { container } = render(<Avatar name="x" shape="square" />);
+      const root = container.firstElementChild!;
+      expect(root.className).toContain('rounded-none');
+    });
+
+    it('explicit radius wins over shape', () => {
+      const { container } = render(
+        <Avatar name="x" shape="circle" radius="md" />
+      );
+      const root = container.firstElementChild!;
+      expect(root.className).toContain('rounded-md');
+      expect(root.className).not.toContain('rounded-full');
+    });
+  });
+
+  describe('size axis', () => {
+    it.each([
+      ['xs', 'w-5'],
+      ['sm', 'w-7'],
+      ['md', 'w-9'],
+      ['lg', 'w-12'],
+      ['xl', 'w-16'],
+    ] as const)('size=%s → %s', (size, expected) => {
+      const { container } = render(<Avatar name="x" size={size} />);
+      const root = container.firstElementChild!;
+      expect(root.className).toContain(expected);
+    });
+  });
+
+  describe('color × tone resolution', () => {
+    it('default color=neutral + no tone → bg-neutral-100', () => {
+      const { container } = render(<Avatar name="x" />);
+      const root = container.firstElementChild!;
+      expect(root.className).toContain('bg-neutral-100');
+    });
+
+    it('color=primary + no tone → soft default bg-primary-100', () => {
+      const { container } = render(<Avatar name="x" color="primary" />);
+      const root = container.firstElementChild!;
+      expect(root.className).toContain('bg-primary-100');
+    });
+
+    it('color=success + tone=500 → bg-success-500 text-success-50', () => {
+      const { container } = render(<Avatar name="x" color="success" tone={500} />);
+      const root = container.firstElementChild!;
+      expect(root.className).toContain('bg-success-500');
+      expect(root.className).toContain('text-success-50');
+    });
+
+    it('color=danger + tone=700 → bg-danger-700 text-danger-50', () => {
+      const { container } = render(<Avatar name="x" color="danger" tone={700} />);
+      const root = container.firstElementChild!;
+      expect(root.className).toContain('bg-danger-700');
+    });
+
+    it('color=warning + tone=50 → bg-warning-50 text-warning-900 (dark text)', () => {
+      const { container } = render(<Avatar name="x" color="warning" tone={50} />);
+      const root = container.firstElementChild!;
+      expect(root.className).toContain('bg-warning-50');
+      expect(root.className).toContain('text-warning-900');
+    });
+
+    it('color classes are NOT applied when image loads', () => {
+      const { container } = render(<Avatar src="/x.png" alt="x" color="primary" />);
+      const root = container.firstElementChild!;
+      // Image surface — no fallback bg paint underneath (transparent
+      // PNGs would peek through otherwise).
+      expect(root.className).not.toContain('bg-primary-100');
+    });
+  });
+
+  describe('overrides', () => {
+    it('appends sx to the root', () => {
+      const { container } = render(<Avatar name="x" sx="ring-4 ring-purple-500" />);
+      const root = container.firstElementChild!;
+      expect(root.className).toContain('ring-purple-500');
+    });
+
+    it('appends className to the root', () => {
+      const { container } = render(<Avatar name="x" className="my-custom" />);
+      const root = container.firstElementChild!;
+      expect(root.className).toContain('my-custom');
+    });
+  });
+});
+
+describe('<AvatarGroup>', () => {
+  it('renders all children when total ≤ max', () => {
+    const { container } = render(
+      <AvatarGroup max={5}>
+        <Avatar name="A" />
+        <Avatar name="B" />
+        <Avatar name="C" />
+      </AvatarGroup>
+    );
+    // 3 avatars rendered, no overflow indicator
+    const avatars = container.querySelectorAll('[role="img"]');
+    expect(avatars.length).toBe(3);
+  });
+
+  it('slices to max and renders overflow indicator', () => {
+    const { container } = render(
+      <AvatarGroup max={3}>
+        <Avatar name="A" />
+        <Avatar name="B" />
+        <Avatar name="C" />
+        <Avatar name="D" />
+        <Avatar name="E" />
+      </AvatarGroup>
+    );
+    // 3 visible + 1 overflow indicator
+    const avatars = container.querySelectorAll('[role="img"]');
+    expect(avatars.length).toBe(4);
+    expect(screen.getByText('+2')).toBeTruthy();
+  });
+
+  it('default max=4 — 5th avatar collapses', () => {
+    render(
+      <AvatarGroup>
+        <Avatar name="A" />
+        <Avatar name="B" />
+        <Avatar name="C" />
+        <Avatar name="D" />
+        <Avatar name="E" />
+      </AvatarGroup>
+    );
+    expect(screen.getByText('+1')).toBeTruthy();
+  });
+
+  it('applies negative spacing class to the wrapper', () => {
+    const { container } = render(
+      <AvatarGroup spacing="md">
+        <Avatar name="A" />
+        <Avatar name="B" />
+      </AvatarGroup>
+    );
+    const wrapper = container.firstElementChild!;
+    expect(wrapper.className).toContain('-space-x-3');
+  });
+
+  it('propagates size to children when they do not override', () => {
+    const { container } = render(
+      <AvatarGroup size="xl">
+        <Avatar name="A" />
+        <Avatar name="B" size="sm" />
+      </AvatarGroup>
+    );
+    const avatars = container.querySelectorAll('[role="img"]');
+    // First child inherits xl
+    expect(avatars[0]!.className).toContain('w-16');
+    // Second child preserves sm
+    expect(avatars[1]!.className).toContain('w-7');
+  });
+
+  it('applies ring-2 halo when withRing=true (default)', () => {
+    const { container } = render(
+      <AvatarGroup>
+        <Avatar name="A" />
+        <Avatar name="B" />
+      </AvatarGroup>
+    );
+    const avatars = container.querySelectorAll('[role="img"]');
+    expect(avatars[0]!.className).toContain('ring-2');
+    // Ring uses the auto-inverting neutral-50 token (NOT
+    // `ring-white dark:ring-neutral-N` — that would violate the
+    // theme-identity rule for the neutral palette).
+    expect(avatars[0]!.className).toContain('ring-neutral-50');
+  });
+
+  it('omits ring when withRing=false', () => {
+    const { container } = render(
+      <AvatarGroup withRing={false}>
+        <Avatar name="A" />
+        <Avatar name="B" />
+      </AvatarGroup>
+    );
+    const avatars = container.querySelectorAll('[role="img"]');
+    expect(avatars[0]!.className).not.toContain('ring-2');
+  });
+});