@fragments-sdk/ui 0.13.0 → 0.15.1

package/src/components/Table/Table.test.tsx

@@ -1,219 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, expectNoA11yViolations } from '../../test/utils';
-import { Table } from './index';
-
-describe('Table', () => {
-  it('renders a table with semantic structure', () => {
-    render(
-      <Table aria-label="People">
-        <Table.Head>
-          <Table.Row>
-            <Table.HeaderCell>Name</Table.HeaderCell>
-            <Table.HeaderCell>Age</Table.HeaderCell>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell>Alice</Table.Cell>
-            <Table.Cell>30</Table.Cell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
-    );
-
-    expect(screen.getByRole('table')).toBeInTheDocument();
-    expect(screen.getAllByRole('columnheader')).toHaveLength(2);
-    expect(screen.getAllByRole('row')).toHaveLength(2);
-    expect(screen.getByText('Alice')).toBeInTheDocument();
-  });
-
-  it('adds scope="col" to header cells by default', () => {
-    render(
-      <Table aria-label="Test">
-        <Table.Head>
-          <Table.Row>
-            <Table.HeaderCell>Col 1</Table.HeaderCell>
-            <Table.HeaderCell>Col 2</Table.HeaderCell>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell>A</Table.Cell>
-            <Table.Cell>B</Table.Cell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
-    );
-
-    const headers = screen.getAllByRole('columnheader');
-    expect(headers[0]).toHaveAttribute('scope', 'col');
-    expect(headers[1]).toHaveAttribute('scope', 'col');
-  });
-
-  it('renders visible caption', () => {
-    render(
-      <Table aria-label="Test">
-        <Table.Caption>My Table</Table.Caption>
-        <Table.Head>
-          <Table.Row>
-            <Table.HeaderCell>A</Table.HeaderCell>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell>1</Table.Cell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
-    );
-
-    expect(screen.getByText('My Table')).toBeInTheDocument();
-  });
-
-  it('renders visually hidden caption', () => {
-    render(
-      <Table aria-label="Test">
-        <Table.Caption hidden>Hidden Caption</Table.Caption>
-        <Table.Head>
-          <Table.Row>
-            <Table.HeaderCell>A</Table.HeaderCell>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell>1</Table.Cell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
-    );
-
-    const caption = screen.getByText('Hidden Caption');
-    expect(caption).toBeInTheDocument();
-    expect(caption.className).toContain('captionHidden');
-  });
-
-  it('applies striped class', () => {
-    const { container } = render(
-      <Table striped aria-label="Test">
-        <Table.Body>
-          <Table.Row><Table.Cell>A</Table.Cell></Table.Row>
-          <Table.Row><Table.Cell>B</Table.Cell></Table.Row>
-        </Table.Body>
-      </Table>
-    );
-
-    expect(container.querySelector('.striped')).toBeInTheDocument();
-  });
-
-  it('applies bordered class', () => {
-    const { container } = render(
-      <Table bordered aria-label="Test">
-        <Table.Body>
-          <Table.Row><Table.Cell>A</Table.Cell></Table.Row>
-        </Table.Body>
-      </Table>
-    );
-
-    expect(container.querySelector('.bordered')).toBeInTheDocument();
-  });
-
-  it('applies sm size class', () => {
-    const { container } = render(
-      <Table size="sm" aria-label="Test">
-        <Table.Body>
-          <Table.Row><Table.Cell>A</Table.Cell></Table.Row>
-        </Table.Body>
-      </Table>
-    );
-
-    expect(container.querySelector('.sm')).toBeInTheDocument();
-  });
-
-  it('applies selected state on Row', () => {
-    render(
-      <Table aria-label="Test">
-        <Table.Body>
-          <Table.Row selected><Table.Cell>Selected row</Table.Cell></Table.Row>
-        </Table.Body>
-      </Table>
-    );
-
-    const row = screen.getByRole('row');
-    expect(row).toHaveAttribute('data-selected');
-    expect(row.className).toContain('selected');
-  });
-
-  it('forwards HTML attributes to sub-components', () => {
-    render(
-      <Table aria-label="Test" data-testid="root">
-        <Table.Head data-testid="head">
-          <Table.Row data-testid="header-row">
-            <Table.HeaderCell data-testid="header-cell">H</Table.HeaderCell>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body data-testid="body">
-          <Table.Row data-testid="body-row">
-            <Table.Cell data-testid="cell">C</Table.Cell>
-          </Table.Row>
-        </Table.Body>
-        <Table.Footer data-testid="footer">
-          <Table.Row data-testid="footer-row">
-            <Table.Cell data-testid="footer-cell">F</Table.Cell>
-          </Table.Row>
-        </Table.Footer>
-      </Table>
-    );
-
-    expect(screen.getByTestId('root')).toBeInTheDocument();
-    expect(screen.getByTestId('head')).toBeInTheDocument();
-    expect(screen.getByTestId('body')).toBeInTheDocument();
-    expect(screen.getByTestId('footer')).toBeInTheDocument();
-    expect(screen.getByTestId('header-row')).toBeInTheDocument();
-    expect(screen.getByTestId('body-row')).toBeInTheDocument();
-    expect(screen.getByTestId('footer-row')).toBeInTheDocument();
-    expect(screen.getByTestId('header-cell')).toBeInTheDocument();
-    expect(screen.getByTestId('cell')).toBeInTheDocument();
-    expect(screen.getByTestId('footer-cell')).toBeInTheDocument();
-  });
-
-  it('renders tfoot element', () => {
-    const { container } = render(
-      <Table aria-label="Test">
-        <Table.Body>
-          <Table.Row><Table.Cell>A</Table.Cell></Table.Row>
-        </Table.Body>
-        <Table.Footer>
-          <Table.Row><Table.Cell>Total</Table.Cell></Table.Row>
-        </Table.Footer>
-      </Table>
-    );
-
-    expect(container.querySelector('tfoot')).toBeInTheDocument();
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(
-      <Table aria-label="People">
-        <Table.Caption>Team Members</Table.Caption>
-        <Table.Head>
-          <Table.Row>
-            <Table.HeaderCell>Name</Table.HeaderCell>
-            <Table.HeaderCell>Role</Table.HeaderCell>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell>Alice</Table.Cell>
-            <Table.Cell>Engineer</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>Bob</Table.Cell>
-            <Table.Cell>Designer</Table.Cell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
-    );
-
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/TableOfContents/TableOfContents.fragment.tsx

@@ -1,149 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { TableOfContents } from '.';
-
-export default defineFragment({
-  component: TableOfContents,
-
-  meta: {
-    name: 'TableOfContents',
-    description: 'Sticky sidebar navigation for long-form content. Renders heading links with active state highlighting for scroll spy integration.',
-    category: 'navigation',
-    status: 'stable',
-    tags: ['toc', 'table-of-contents', 'navigation', 'sidebar', 'scroll-spy', 'headings'],
-    since: '0.9.0',
-  },
-
-  usage: {
-    when: [
-      'Long-form content pages (docs, blog posts, articles)',
-      'Component documentation with multiple sections',
-      'Any page with 3+ headings that benefits from quick navigation',
-    ],
-    whenNot: [
-      'Short pages with only 1-2 sections',
-      'Primary site navigation (use Sidebar or Header)',
-      'Step-by-step flows (use Stepper)',
-    ],
-    guidelines: [
-      'Pair with a scroll spy hook (e.g., IntersectionObserver) to track active heading',
-      'Use indent on sub-headings (h3) to show hierarchy',
-      'Place in a sticky aside for best UX',
-      'Heading IDs must match between TOC items and the actual DOM headings',
-    ],
-    accessibility: [
-      'Uses <nav aria-label="Table of contents"> for landmark navigation',
-      'Active item is marked with aria-current="true"',
-      'All items are links with smooth scroll behavior',
-      'Focus-visible ring on keyboard navigation',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'TableOfContents.Item elements',
-      required: true,
-    },
-    label: {
-      type: 'string',
-      description: 'Accessible label for the nav landmark',
-      default: '"Table of contents"',
-    },
-    title: {
-      type: 'string',
-      description: 'Visible title above the list',
-      default: '"On This Page"',
-    },
-    hideTitle: {
-      type: 'boolean',
-      description: 'Hide the visible title',
-      default: 'false',
-    },
-  },
-
-  relations: [
-    { component: 'Breadcrumbs', relationship: 'complementary', note: 'Breadcrumbs show hierarchy, TOC shows page sections' },
-    { component: 'Sidebar', relationship: 'complementary', note: 'Sidebar for site nav, TOC for in-page nav' },
-    { component: 'Tabs', relationship: 'alternative', note: 'Tabs for switching views, TOC for scrolling to sections' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'title: string - visible heading (default "On This Page")',
-      'hideTitle: boolean - hide the title',
-      'label: string - aria-label for nav landmark',
-      'TableOfContents.Item id: string - heading ID to link to',
-      'TableOfContents.Item active: boolean - highlight as current',
-      'TableOfContents.Item indent: boolean - indent for sub-headings',
-    ],
-    scenarioTags: [
-      'navigation.toc',
-      'navigation.scroll-spy',
-      'layout.sidebar',
-    ],
-    a11yRules: ['A11Y_NAV_LANDMARK', 'A11Y_ARIA_CURRENT'],
-  },
-
-  ai: {
-    compositionPattern: 'compound',
-    subComponents: ['Item'],
-    requiredChildren: ['Item'],
-    commonPatterns: [
-      '<TableOfContents>{headings.map(h => <TableOfContents.Item key={h.id} id={h.id} active={activeId === h.id} indent={h.level === 3}>{h.text}</TableOfContents.Item>)}</TableOfContents>',
-    ],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic table of contents with section links',
-      render: () => (
-        <TableOfContents>
-          <TableOfContents.Item id="introduction">Introduction</TableOfContents.Item>
-          <TableOfContents.Item id="getting-started">Getting Started</TableOfContents.Item>
-          <TableOfContents.Item id="installation" indent>Installation</TableOfContents.Item>
-          <TableOfContents.Item id="configuration" indent>Configuration</TableOfContents.Item>
-          <TableOfContents.Item id="api-reference">API Reference</TableOfContents.Item>
-          <TableOfContents.Item id="examples">Examples</TableOfContents.Item>
-        </TableOfContents>
-      ),
-    },
-    {
-      name: 'With Active Item',
-      description: 'Active state highlighting the current section',
-      render: () => (
-        <TableOfContents>
-          <TableOfContents.Item id="overview">Overview</TableOfContents.Item>
-          <TableOfContents.Item id="setup" active>Setup</TableOfContents.Item>
-          <TableOfContents.Item id="usage" indent>Basic Usage</TableOfContents.Item>
-          <TableOfContents.Item id="advanced" indent>Advanced</TableOfContents.Item>
-          <TableOfContents.Item id="props">Props</TableOfContents.Item>
-          <TableOfContents.Item id="accessibility">Accessibility</TableOfContents.Item>
-        </TableOfContents>
-      ),
-    },
-    {
-      name: 'Custom Title',
-      description: 'Table of contents with a custom title',
-      render: () => (
-        <TableOfContents title="Contents">
-          <TableOfContents.Item id="chapter-1">Chapter 1: The Beginning</TableOfContents.Item>
-          <TableOfContents.Item id="chapter-2">Chapter 2: The Middle</TableOfContents.Item>
-          <TableOfContents.Item id="chapter-3">Chapter 3: The End</TableOfContents.Item>
-        </TableOfContents>
-      ),
-    },
-    {
-      name: 'No Title',
-      description: 'Table of contents without a visible title',
-      render: () => (
-        <TableOfContents hideTitle>
-          <TableOfContents.Item id="section-a">Section A</TableOfContents.Item>
-          <TableOfContents.Item id="section-b" active>Section B</TableOfContents.Item>
-          <TableOfContents.Item id="section-c">Section C</TableOfContents.Item>
-        </TableOfContents>
-      ),
-    },
-  ],
-});

package/src/components/TableOfContents/TableOfContents.test.tsx

@@ -1,126 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
-import { TableOfContents } from './index';
-
-describe('TableOfContents', () => {
-  it('renders a nav landmark with default aria-label', () => {
-    render(
-      <TableOfContents>
-        <TableOfContents.Item id="intro">Intro</TableOfContents.Item>
-      </TableOfContents>
-    );
-    expect(screen.getByRole('navigation', { name: 'Table of contents' })).toBeInTheDocument();
-  });
-
-  it('renders the default "On This Page" title', () => {
-    render(
-      <TableOfContents>
-        <TableOfContents.Item id="intro">Intro</TableOfContents.Item>
-      </TableOfContents>
-    );
-    expect(screen.getByText('On This Page')).toBeInTheDocument();
-  });
-
-  it('renders a custom title', () => {
-    render(
-      <TableOfContents title="Contents">
-        <TableOfContents.Item id="intro">Intro</TableOfContents.Item>
-      </TableOfContents>
-    );
-    expect(screen.getByText('Contents')).toBeInTheDocument();
-    expect(screen.queryByText('On This Page')).not.toBeInTheDocument();
-  });
-
-  it('hides the title when hideTitle is true', () => {
-    render(
-      <TableOfContents hideTitle>
-        <TableOfContents.Item id="intro">Intro</TableOfContents.Item>
-      </TableOfContents>
-    );
-    expect(screen.queryByText('On This Page')).not.toBeInTheDocument();
-  });
-
-  it('renders a custom aria-label', () => {
-    render(
-      <TableOfContents label="Page sections">
-        <TableOfContents.Item id="intro">Intro</TableOfContents.Item>
-      </TableOfContents>
-    );
-    expect(screen.getByRole('navigation', { name: 'Page sections' })).toBeInTheDocument();
-  });
-
-  it('renders items as links with correct href', () => {
-    render(
-      <TableOfContents>
-        <TableOfContents.Item id="setup">Setup</TableOfContents.Item>
-        <TableOfContents.Item id="props">Props</TableOfContents.Item>
-      </TableOfContents>
-    );
-    expect(screen.getByRole('link', { name: 'Setup' })).toHaveAttribute('href', '#setup');
-    expect(screen.getByRole('link', { name: 'Props' })).toHaveAttribute('href', '#props');
-  });
-
-  it('marks active item with aria-current', () => {
-    render(
-      <TableOfContents>
-        <TableOfContents.Item id="setup" active>Setup</TableOfContents.Item>
-        <TableOfContents.Item id="props">Props</TableOfContents.Item>
-      </TableOfContents>
-    );
-    expect(screen.getByRole('link', { name: 'Setup' })).toHaveAttribute('aria-current', 'true');
-    expect(screen.getByRole('link', { name: 'Props' })).not.toHaveAttribute('aria-current');
-  });
-
-  it('scrolls to heading on click', async () => {
-    const scrollIntoViewMock = vi.fn();
-    const heading = document.createElement('h2');
-    heading.id = 'setup';
-    heading.scrollIntoView = scrollIntoViewMock;
-    document.body.appendChild(heading);
-
-    const user = userEvent.setup();
-    render(
-      <TableOfContents>
-        <TableOfContents.Item id="setup">Setup</TableOfContents.Item>
-      </TableOfContents>
-    );
-
-    await user.click(screen.getByRole('link', { name: 'Setup' }));
-    expect(scrollIntoViewMock).toHaveBeenCalledWith({ behavior: 'smooth' });
-
-    document.body.removeChild(heading);
-  });
-
-  it('renders items in a list', () => {
-    render(
-      <TableOfContents>
-        <TableOfContents.Item id="a">A</TableOfContents.Item>
-        <TableOfContents.Item id="b">B</TableOfContents.Item>
-        <TableOfContents.Item id="c">C</TableOfContents.Item>
-      </TableOfContents>
-    );
-    expect(screen.getByRole('list')).toBeInTheDocument();
-    expect(screen.getAllByRole('listitem')).toHaveLength(3);
-  });
-
-  it('passes additional className to root', () => {
-    const { container } = render(
-      <TableOfContents className="custom-class">
-        <TableOfContents.Item id="a">A</TableOfContents.Item>
-      </TableOfContents>
-    );
-    expect(container.querySelector('.custom-class')).toBeInTheDocument();
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(
-      <TableOfContents>
-        <TableOfContents.Item id="intro">Introduction</TableOfContents.Item>
-        <TableOfContents.Item id="setup" active>Setup</TableOfContents.Item>
-        <TableOfContents.Item id="api" indent>API Reference</TableOfContents.Item>
-        <TableOfContents.Item id="examples">Examples</TableOfContents.Item>
-      </TableOfContents>
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/Tabs/Tabs.fragment.tsx

@@ -1,164 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Tabs } from '.';
-
-export default defineFragment({
-  component: Tabs,
-
-  meta: {
-    name: 'Tabs',
-    description: 'Organize content into switchable panels. Use for related content that benefits from a compact, navigable layout.',
-    category: 'navigation',
-    status: 'stable',
-    tags: ['tabs', 'navigation', 'panels', 'content-switcher'],
-    since: '0.1.0',
-  },
-
-  usage: {
-    when: [
-      'Organizing related content into sections',
-      'Reducing page scrolling by grouping content',
-      'Settings pages with multiple categories',
-      'Dashboard views with different data perspectives',
-    ],
-    whenNot: [
-      'Primary navigation (use sidebar or header nav)',
-      'Sequential steps (use Stepper or wizard)',
-      'Comparing content side-by-side',
-      'Very long lists of options (use Select or Menu)',
-    ],
-    guidelines: [
-      'Keep tab labels short (1-2 words)',
-      'Order tabs by usage frequency or logical sequence',
-      'Avoid more than 5-6 tabs; consider sub-navigation for more',
-      'Tab content should be roughly equivalent in scope',
-      'Use pills variant for contained sections, underline for page-level tabs',
-    ],
-    accessibility: [
-      'Keyboard navigation with arrow keys',
-      'Tab panels are properly labeled',
-      'Focus management follows WAI-ARIA tabs pattern',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'Tab list and panels (use Tabs.List, Tabs.Tab, Tabs.Panel)',
-      required: true,
-    },
-    defaultValue: {
-      type: 'string',
-      description: 'Initially active tab (uncontrolled)',
-    },
-    value: {
-      type: 'string',
-      description: 'Controlled active tab value',
-    },
-    onValueChange: {
-      type: 'function',
-      description: 'Called when active tab changes',
-    },
-    orientation: {
-      type: 'enum',
-      description: 'Tab list orientation',
-      values: ['horizontal', 'vertical'],
-      default: 'horizontal',
-    },
-  },
-
-  relations: [
-    { component: 'Select', relationship: 'alternative', note: 'Use Select for many options in compact space' },
-    { component: 'Menu', relationship: 'alternative', note: 'Use Menu for action-based navigation' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'value: string - controlled active tab',
-      'defaultValue: string - initial active tab',
-      'onValueChange: (value) => void - tab change handler',
-      'Tabs.List variant: underline|pills - visual style',
-    ],
-    scenarioTags: [
-      'navigation.tabs',
-      'layout.panels',
-      'content.sections',
-    ],
-    a11yRules: ['A11Y_TABS_KEYBOARD', 'A11Y_TABS_LABELS'],
-  },
-
-  ai: {
-    compositionPattern: 'compound',
-    subComponents: ['List', 'Tab', 'Panel'],
-    requiredChildren: ['List', 'Panel'],
-    commonPatterns: [
-      '<Tabs defaultValue="tab1"><Tabs.List><Tabs.Tab value="tab1">{label1}</Tabs.Tab><Tabs.Tab value="tab2">{label2}</Tabs.Tab></Tabs.List><Tabs.Panel value="tab1">{content1}</Tabs.Panel><Tabs.Panel value="tab2">{content2}</Tabs.Panel></Tabs>',
-    ],
-  },
-
-  variants: [
-    {
-      name: 'Underline',
-      description: 'Default underline style tabs',
-      render: () => (
-        <Tabs defaultValue="overview">
-          <Tabs.List variant="underline">
-            <Tabs.Tab value="overview">Overview</Tabs.Tab>
-            <Tabs.Tab value="analytics">Analytics</Tabs.Tab>
-            <Tabs.Tab value="settings">Settings</Tabs.Tab>
-          </Tabs.List>
-          <Tabs.Panel value="overview">
-            <p>Overview content goes here.</p>
-          </Tabs.Panel>
-          <Tabs.Panel value="analytics">
-            <p>Analytics content goes here.</p>
-          </Tabs.Panel>
-          <Tabs.Panel value="settings">
-            <p>Settings content goes here.</p>
-          </Tabs.Panel>
-        </Tabs>
-      ),
-    },
-    {
-      name: 'Pills',
-      description: 'Pill-style tabs for contained sections',
-      render: () => (
-        <Tabs defaultValue="all">
-          <Tabs.List variant="pills">
-            <Tabs.Tab value="all">All</Tabs.Tab>
-            <Tabs.Tab value="active">Active</Tabs.Tab>
-            <Tabs.Tab value="archived">Archived</Tabs.Tab>
-          </Tabs.List>
-          <Tabs.Panel value="all">
-            <p>Showing all items.</p>
-          </Tabs.Panel>
-          <Tabs.Panel value="active">
-            <p>Showing active items only.</p>
-          </Tabs.Panel>
-          <Tabs.Panel value="archived">
-            <p>Showing archived items.</p>
-          </Tabs.Panel>
-        </Tabs>
-      ),
-    },
-    {
-      name: 'With Disabled',
-      description: 'Tabs with a disabled option',
-      render: () => (
-        <Tabs defaultValue="general">
-          <Tabs.List variant="underline">
-            <Tabs.Tab value="general">General</Tabs.Tab>
-            <Tabs.Tab value="security">Security</Tabs.Tab>
-            <Tabs.Tab value="billing" disabled>Billing</Tabs.Tab>
-          </Tabs.List>
-          <Tabs.Panel value="general">
-            <p>General settings panel.</p>
-          </Tabs.Panel>
-          <Tabs.Panel value="security">
-            <p>Security settings panel.</p>
-          </Tabs.Panel>
-        </Tabs>
-      ),
-    },
-  ],
-});