@fragments-sdk/ui 0.7.4 → 0.7.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/ui",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "description": "Customizable UI components built on Base UI headless primitives",
   "repository": {
     "type": "git",
@@ -48,12 +48,18 @@
     "shiki": "^3.0.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.0",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "jsdom": "^25.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "sass": "^1.83.0",
     "typescript": "^5.7.0",
+    "vitest": "^2.1.8",
+    "vitest-axe": "^0.1.0",
     "@fragments-sdk/cli": "0.5.2"
   },
   "files": [
@@ -64,6 +70,7 @@
     "dev": "fragments dev",
     "build": "node ../../packages/cli/dist/bin.js build",
     "lint": "eslint src",
-    "validate": "fragments validate"
+    "validate": "fragments validate",
+    "test": "vitest run"
   }
 }

package/src/components/Accordion/Accordion.test.tsx

@@ -0,0 +1,171 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { Accordion } from './index';
+
+function renderAccordion(props: Partial<React.ComponentProps<typeof Accordion>> = {}) {
+  return render(
+    <Accordion {...props}>
+      <Accordion.Item value="one">
+        <Accordion.Trigger>Item One</Accordion.Trigger>
+        <Accordion.Content>Content One</Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="two">
+        <Accordion.Trigger>Item Two</Accordion.Trigger>
+        <Accordion.Content>Content Two</Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="three">
+        <Accordion.Trigger>Item Three</Accordion.Trigger>
+        <Accordion.Content>Content Three</Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+  );
+}
+
+describe('Accordion', () => {
+  it('renders all triggers', () => {
+    renderAccordion();
+    expect(screen.getByText('Item One')).toBeInTheDocument();
+    expect(screen.getByText('Item Two')).toBeInTheDocument();
+    expect(screen.getByText('Item Three')).toBeInTheDocument();
+  });
+
+  it('opens an item when its trigger is clicked', async () => {
+    const user = userEvent.setup();
+    renderAccordion();
+
+    const trigger = screen.getByRole('button', { name: /item one/i });
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Content One')).toBeInTheDocument();
+  });
+
+  it('single type only allows one item open at a time', async () => {
+    const user = userEvent.setup();
+    renderAccordion({ type: 'single', collapsible: true });
+
+    const triggerOne = screen.getByRole('button', { name: /item one/i });
+    const triggerTwo = screen.getByRole('button', { name: /item two/i });
+
+    await user.click(triggerOne);
+    expect(triggerOne).toHaveAttribute('aria-expanded', 'true');
+
+    await user.click(triggerTwo);
+    expect(triggerTwo).toHaveAttribute('aria-expanded', 'true');
+    expect(triggerOne).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('multiple type allows multiple items open at once', async () => {
+    const user = userEvent.setup();
+    renderAccordion({ type: 'multiple' });
+
+    const triggerOne = screen.getByRole('button', { name: /item one/i });
+    const triggerTwo = screen.getByRole('button', { name: /item two/i });
+
+    await user.click(triggerOne);
+    await user.click(triggerTwo);
+
+    expect(triggerOne).toHaveAttribute('aria-expanded', 'true');
+    expect(triggerTwo).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('links trigger aria-controls to content id', async () => {
+    const user = userEvent.setup();
+    renderAccordion({ defaultValue: 'one' });
+
+    const trigger = screen.getByRole('button', { name: /item one/i });
+    const contentId = trigger.getAttribute('aria-controls');
+    expect(contentId).toBeTruthy();
+    expect(document.getElementById(contentId!)).toBeInTheDocument();
+  });
+
+  it('renders correct heading level', () => {
+    renderAccordion({ headingLevel: 4 });
+    const headings = document.querySelectorAll('h4');
+    expect(headings.length).toBe(3);
+  });
+
+  it('defaults heading level to h3', () => {
+    renderAccordion();
+    const headings = document.querySelectorAll('h3');
+    expect(headings.length).toBe(3);
+  });
+
+  it('disables an item when disabled prop is set', async () => {
+    const user = userEvent.setup();
+    render(
+      <Accordion>
+        <Accordion.Item value="one" disabled>
+          <Accordion.Trigger>Disabled Item</Accordion.Trigger>
+          <Accordion.Content>Hidden Content</Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+    );
+
+    const trigger = screen.getByRole('button', { name: /disabled item/i });
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('supports controlled value prop', async () => {
+    const onValueChange = vi.fn();
+    const { rerender } = render(
+      <Accordion value="one" onValueChange={onValueChange}>
+        <Accordion.Item value="one">
+          <Accordion.Trigger>Item One</Accordion.Trigger>
+          <Accordion.Content>Content One</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="two">
+          <Accordion.Trigger>Item Two</Accordion.Trigger>
+          <Accordion.Content>Content Two</Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+    );
+
+    const triggerOne = screen.getByRole('button', { name: /item one/i });
+    expect(triggerOne).toHaveAttribute('aria-expanded', 'true');
+
+    const user = userEvent.setup();
+    const triggerTwo = screen.getByRole('button', { name: /item two/i });
+    await user.click(triggerTwo);
+    expect(onValueChange).toHaveBeenCalledWith('two');
+  });
+
+  it('supports defaultValue for uncontrolled usage', () => {
+    renderAccordion({ defaultValue: 'two' });
+    const trigger = screen.getByRole('button', { name: /item two/i });
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('collapsible prop allows full collapse in single type', async () => {
+    const user = userEvent.setup();
+    renderAccordion({ type: 'single', collapsible: true, defaultValue: 'one' });
+
+    const trigger = screen.getByRole('button', { name: /item one/i });
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('non-collapsible single type prevents full collapse', async () => {
+    const user = userEvent.setup();
+    renderAccordion({ type: 'single', collapsible: false, defaultValue: 'one' });
+
+    const trigger = screen.getByRole('button', { name: /item one/i });
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+
+    await user.click(trigger);
+    // Should stay open because collapsible=false
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = renderAccordion({ defaultValue: 'one' });
+    await expectNoA11yViolations(container, {
+      // Accordion root role="region" + content panel role="region" triggers this.
+      disabledRules: ['landmark-unique'],
+    });
+  });
+});

package/src/components/Alert/Alert.test.tsx

@@ -0,0 +1,127 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { Alert } from './index';
+
+describe('Alert', () => {
+  it('renders with role="alert"', () => {
+    render(
+      <Alert>
+        <Alert.Title>Info</Alert.Title>
+        <Alert.Content>Details</Alert.Content>
+      </Alert>
+    );
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+  });
+
+  it('applies severity variant class', () => {
+    const { rerender } = render(
+      <Alert severity="error">
+        <Alert.Title>Error</Alert.Title>
+      </Alert>
+    );
+    expect(screen.getByRole('alert')).toHaveClass('error');
+
+    rerender(
+      <Alert severity="success">
+        <Alert.Title>Success</Alert.Title>
+      </Alert>
+    );
+    expect(screen.getByRole('alert')).toHaveClass('success');
+  });
+
+  it('links title and content via aria-labelledby and aria-describedby', () => {
+    render(
+      <Alert>
+        <Alert.Title>Title</Alert.Title>
+        <Alert.Content>Content</Alert.Content>
+      </Alert>
+    );
+    const alertEl = screen.getByRole('alert');
+    const titleId = alertEl.getAttribute('aria-labelledby');
+    const descId = alertEl.getAttribute('aria-describedby');
+    expect(titleId).toBeTruthy();
+    expect(descId).toBeTruthy();
+    expect(screen.getByText('Title')).toHaveAttribute('id', titleId);
+    expect(screen.getByText('Content')).toHaveAttribute('id', descId);
+  });
+
+  it('dismisses when close button is clicked', async () => {
+    const user = userEvent.setup();
+    render(
+      <Alert>
+        <Alert.Title>Dismissable</Alert.Title>
+        <Alert.Close />
+      </Alert>
+    );
+    expect(screen.getByRole('alert')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /dismiss alert/i }));
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+
+  it('renders default severity icon', () => {
+    render(
+      <Alert severity="success">
+        <Alert.Icon />
+        <Alert.Title>Done</Alert.Title>
+      </Alert>
+    );
+    // success icon character is checkmark
+    expect(screen.getByText('\u2713')).toBeInTheDocument();
+  });
+
+  it('renders compound sub-components', () => {
+    render(
+      <Alert>
+        <Alert.Icon />
+        <Alert.Body>
+          <Alert.Title>Title</Alert.Title>
+          <Alert.Content>Description</Alert.Content>
+        </Alert.Body>
+        <Alert.Actions>
+          <Alert.Action onClick={() => {}}>Retry</Alert.Action>
+        </Alert.Actions>
+      </Alert>
+    );
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(screen.getByText('Retry')).toBeInTheDocument();
+  });
+
+  it('fires action callback', async () => {
+    const handleAction = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <Alert>
+        <Alert.Title>Alert</Alert.Title>
+        <Alert.Actions>
+          <Alert.Action onClick={handleAction}>Retry</Alert.Action>
+        </Alert.Actions>
+      </Alert>
+    );
+    await user.click(screen.getByText('Retry'));
+    expect(handleAction).toHaveBeenCalledTimes(1);
+  });
+
+  it('defaults to info severity', () => {
+    render(
+      <Alert>
+        <Alert.Title>Default</Alert.Title>
+      </Alert>
+    );
+    expect(screen.getByRole('alert')).toHaveClass('info');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <Alert severity="warning">
+        <Alert.Icon />
+        <Alert.Body>
+          <Alert.Title>Warning</Alert.Title>
+          <Alert.Content>Something happened</Alert.Content>
+        </Alert.Body>
+        <Alert.Close />
+      </Alert>
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/AppShell/AppShell.test.tsx

@@ -0,0 +1,80 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { AppShell } from './index';
+
+// Mock matchMedia for Sidebar/AppShell which use useIsMobile
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+describe('AppShell', () => {
+  it('renders children in a layout container', () => {
+    render(
+      <AppShell>
+        <AppShell.Main>Main Content</AppShell.Main>
+      </AppShell>
+    );
+    expect(screen.getByText('Main Content')).toBeInTheDocument();
+  });
+
+  it('renders the main region with role="main"', () => {
+    render(
+      <AppShell>
+        <AppShell.Main>Content</AppShell.Main>
+      </AppShell>
+    );
+    expect(screen.getByRole('main')).toBeInTheDocument();
+  });
+
+  it('renders header, sidebar, and main slots', () => {
+    render(
+      <AppShell>
+        <AppShell.Header>Header Content</AppShell.Header>
+        <AppShell.Sidebar>Sidebar Content</AppShell.Sidebar>
+        <AppShell.Main>Main Content</AppShell.Main>
+      </AppShell>
+    );
+    expect(screen.getByText('Header Content')).toBeInTheDocument();
+    expect(screen.getByText('Sidebar Content')).toBeInTheDocument();
+    expect(screen.getByText('Main Content')).toBeInTheDocument();
+  });
+
+  it('renders aside slot when visible', () => {
+    render(
+      <AppShell>
+        <AppShell.Main>Main</AppShell.Main>
+        <AppShell.Aside visible>Aside Panel</AppShell.Aside>
+      </AppShell>
+    );
+    expect(screen.getByText('Aside Panel')).toBeInTheDocument();
+  });
+
+  it('hides aside when visible is false', () => {
+    render(
+      <AppShell>
+        <AppShell.Main>Main</AppShell.Main>
+        <AppShell.Aside visible={false}>Hidden Aside</AppShell.Aside>
+      </AppShell>
+    );
+    expect(screen.queryByText('Hidden Aside')).not.toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <AppShell>
+        <AppShell.Main>Content</AppShell.Main>
+      </AppShell>
+    );
+    await expectNoA11yViolations(container);
+  });
+});

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

@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { Avatar } from './index';
+
+describe('Avatar', () => {
+  it('renders an image when src is provided', () => {
+    render(<Avatar src="https://example.com/photo.jpg" alt="Jane Doe" />);
+    const img = screen.getByRole('img');
+    expect(img).toHaveAttribute('src', 'https://example.com/photo.jpg');
+    expect(img).toHaveAttribute('alt', 'Jane Doe');
+  });
+
+  it('renders initials from the name prop when no src', () => {
+    render(<Avatar name="John Smith" />);
+    expect(screen.getByText('JS')).toBeInTheDocument();
+  });
+
+  it('renders explicit initials prop over name-derived initials', () => {
+    render(<Avatar name="John Smith" initials="AB" />);
+    expect(screen.getByText('AB')).toBeInTheDocument();
+  });
+
+  it('renders Avatar.Group and limits visible avatars with max', () => {
+    render(
+      <Avatar.Group max={2}>
+        <Avatar name="Alice" />
+        <Avatar name="Bob" />
+        <Avatar name="Charlie" />
+        <Avatar name="Diana" />
+      </Avatar.Group>
+    );
+    // 2 visible + 1 overflow indicator
+    expect(screen.getByText('+2')).toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Avatar name="Jane Doe" />);
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,58 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { Badge } from './index';
+
+describe('Badge', () => {
+  it('renders with children', () => {
+    render(<Badge>New</Badge>);
+    expect(screen.getByText('New')).toBeInTheDocument();
+  });
+
+  it('applies variant classes', () => {
+    const { container } = render(<Badge variant="success">OK</Badge>);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveClass('success');
+  });
+
+  it('applies size classes', () => {
+    const { container } = render(<Badge size="sm">Small</Badge>);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveClass('sm');
+  });
+
+  it('renders dot with aria-hidden', () => {
+    const { container } = render(<Badge dot>Status</Badge>);
+    const dot = container.querySelector('.dot');
+    expect(dot).toBeInTheDocument();
+    expect(dot).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('renders icon with aria-hidden', () => {
+    const { container } = render(<Badge icon={<svg data-testid="icon" />}>Info</Badge>);
+    const iconWrapper = container.querySelector('.icon');
+    expect(iconWrapper).toHaveAttribute('aria-hidden', 'true');
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+  });
+
+  it('renders remove button with aria-label', async () => {
+    const user = userEvent.setup();
+    const onRemove = vi.fn();
+    render(<Badge onRemove={onRemove}>Tag</Badge>);
+    const removeBtn = screen.getByRole('button', { name: 'Remove Tag' });
+    expect(removeBtn).toBeInTheDocument();
+    await user.click(removeBtn);
+    expect(onRemove).toHaveBeenCalledOnce();
+  });
+
+  it('sets role="status" and aria-label for status variants', () => {
+    const { container } = render(<Badge variant="error">Failed</Badge>);
+    const badge = container.firstChild as HTMLElement;
+    expect(badge).toHaveAttribute('role', 'status');
+    expect(badge).toHaveAttribute('aria-label', 'error: Failed');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Badge>Accessible</Badge>);
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Box/Box.test.tsx

@@ -0,0 +1,43 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { Box } from './index';
+
+describe('Box', () => {
+  it('renders a div by default', () => {
+    render(<Box>Content</Box>);
+    const el = screen.getByText('Content');
+    expect(el.tagName).toBe('DIV');
+  });
+
+  it('renders as a different element via "as" prop', () => {
+    render(<Box as="section">Content</Box>);
+    const el = screen.getByText('Content');
+    expect(el.tagName).toBe('SECTION');
+  });
+
+  it('forwards className and ref', () => {
+    const ref = vi.fn();
+    const { container } = render(<Box ref={ref} className="custom">Content</Box>);
+    expect(ref).toHaveBeenCalled();
+    expect(container.firstChild).toHaveClass('custom');
+  });
+
+  it('applies padding and background classes', () => {
+    const { container } = render(<Box padding="lg" background="elevated">Content</Box>);
+    const el = container.firstChild as HTMLElement;
+    expect(el).toHaveClass('p-lg');
+    expect(el).toHaveClass('bg-elevated');
+  });
+
+  it('sets width/height as inline styles', () => {
+    const { container } = render(<Box width={300} height="50%">Content</Box>);
+    const el = container.firstChild as HTMLElement;
+    expect(el.style.width).toBe('300px');
+    expect(el.style.height).toBe('50%');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Box>Accessible</Box>);
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -0,0 +1,75 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { Breadcrumbs } from './index';
+
+describe('Breadcrumbs', () => {
+  it('renders a nav landmark with aria-label "Breadcrumb"', () => {
+    render(
+      <Breadcrumbs>
+        <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
+        <Breadcrumbs.Item current>Page</Breadcrumbs.Item>
+      </Breadcrumbs>
+    );
+    expect(screen.getByRole('navigation', { name: 'Breadcrumb' })).toBeInTheDocument();
+  });
+
+  it('marks current page with aria-current="page"', () => {
+    render(
+      <Breadcrumbs>
+        <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
+        <Breadcrumbs.Item current>Current</Breadcrumbs.Item>
+      </Breadcrumbs>
+    );
+    expect(screen.getByText('Current').closest('[aria-current="page"]')).toBeInTheDocument();
+  });
+
+  it('renders separator between items', () => {
+    render(
+      <Breadcrumbs separator=">">
+        <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
+        <Breadcrumbs.Item current>Page</Breadcrumbs.Item>
+      </Breadcrumbs>
+    );
+    expect(screen.getByText('>')).toBeInTheDocument();
+  });
+
+  it('renders items as links when href is provided', () => {
+    render(
+      <Breadcrumbs>
+        <Breadcrumbs.Item href="/about">About</Breadcrumbs.Item>
+        <Breadcrumbs.Item current>Contact</Breadcrumbs.Item>
+      </Breadcrumbs>
+    );
+    expect(screen.getByRole('link', { name: 'About' })).toHaveAttribute('href', '/about');
+  });
+
+  it('collapses middle items when maxItems is set', async () => {
+    const user = userEvent.setup();
+    render(
+      <Breadcrumbs maxItems={2}>
+        <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
+        <Breadcrumbs.Item href="/a">A</Breadcrumbs.Item>
+        <Breadcrumbs.Item href="/b">B</Breadcrumbs.Item>
+        <Breadcrumbs.Item current>C</Breadcrumbs.Item>
+      </Breadcrumbs>
+    );
+    // Middle items should be collapsed with an ellipsis button
+    expect(screen.getByRole('button', { name: /show collapsed/i })).toBeInTheDocument();
+    expect(screen.queryByText('A')).not.toBeInTheDocument();
+
+    // Expand collapsed items
+    await user.click(screen.getByRole('button', { name: /show collapsed/i }));
+    expect(screen.getByText('A')).toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <Breadcrumbs>
+        <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
+        <Breadcrumbs.Item href="/products">Products</Breadcrumbs.Item>
+        <Breadcrumbs.Item current>Widget</Breadcrumbs.Item>
+      </Breadcrumbs>
+    );
+    await expectNoA11yViolations(container);
+  });
+});