@fragments-sdk/ui 0.13.0 → 0.15.1

package/src/components/Pagination/Pagination.test.tsx

@@ -1,171 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
-import { Pagination } from './index';
-
-function renderPagination(props: Partial<React.ComponentProps<typeof Pagination>> = {}) {
-  return render(
-    <Pagination totalPages={10} defaultPage={1} {...props}>
-      <Pagination.Previous />
-      <Pagination.Items />
-      <Pagination.Next />
-    </Pagination>
-  );
-}
-
-describe('Pagination', () => {
-  it('renders correct page range', () => {
-    renderPagination({ totalPages: 5 });
-
-    expect(screen.getByLabelText('Go to page 1')).toBeInTheDocument();
-    expect(screen.getByLabelText('Go to page 2')).toBeInTheDocument();
-    expect(screen.getByLabelText('Go to page 3')).toBeInTheDocument();
-    expect(screen.getByLabelText('Go to page 4')).toBeInTheDocument();
-    expect(screen.getByLabelText('Go to page 5')).toBeInTheDocument();
-  });
-
-  it('current page is highlighted', () => {
-    renderPagination({ defaultPage: 3, totalPages: 5 });
-
-    const page3 = screen.getByLabelText('Go to page 3');
-    expect(page3).toHaveAttribute('aria-current', 'page');
-  });
-
-  it('click page changes selection', async () => {
-    const user = userEvent.setup();
-    const onPageChange = vi.fn();
-    renderPagination({ totalPages: 5, onPageChange });
-
-    await user.click(screen.getByLabelText('Go to page 3'));
-    expect(onPageChange).toHaveBeenCalledWith(3);
-  });
-
-  it('Previous/Next buttons work', async () => {
-    const user = userEvent.setup();
-    const onPageChange = vi.fn();
-    renderPagination({ totalPages: 5, defaultPage: 3, onPageChange });
-
-    await user.click(screen.getByLabelText('Go to previous page'));
-    expect(onPageChange).toHaveBeenCalledWith(2);
-
-    await user.click(screen.getByLabelText('Go to next page'));
-    // After clicking prev (now on 2), clicking next goes to 3
-    expect(onPageChange).toHaveBeenCalledWith(3);
-  });
-
-  it('Previous disabled on page 1', () => {
-    renderPagination({ defaultPage: 1, totalPages: 5 });
-
-    expect(screen.getByLabelText('Go to previous page')).toBeDisabled();
-  });
-
-  it('Next disabled on last page', () => {
-    renderPagination({ defaultPage: 5, totalPages: 5 });
-
-    expect(screen.getByLabelText('Go to next page')).toBeDisabled();
-  });
-
-  it('ellipsis renders for large ranges', () => {
-    renderPagination({ totalPages: 20, defaultPage: 10 });
-
-    const ellipses = document.querySelectorAll('[aria-hidden="true"]');
-    // Should have at least one ellipsis (excluding SVG icons)
-    const textEllipses = Array.from(ellipses).filter(
-      (el) => el.tagName !== 'svg' && el.textContent === '\u2026'
-    );
-    expect(textEllipses.length).toBeGreaterThan(0);
-  });
-
-  it('edge count customization', () => {
-    renderPagination({ totalPages: 20, defaultPage: 10, edgeCount: 2 });
-
-    // With edgeCount=2, pages 1,2 and 19,20 should show
-    expect(screen.getByLabelText('Go to page 1')).toBeInTheDocument();
-    expect(screen.getByLabelText('Go to page 2')).toBeInTheDocument();
-    expect(screen.getByLabelText('Go to page 19')).toBeInTheDocument();
-    expect(screen.getByLabelText('Go to page 20')).toBeInTheDocument();
-  });
-
-  it('sibling count customization', () => {
-    renderPagination({ totalPages: 20, defaultPage: 10, siblingCount: 2 });
-
-    // With siblingCount=2, pages 8,9,10,11,12 should show
-    expect(screen.getByLabelText('Go to page 8')).toBeInTheDocument();
-    expect(screen.getByLabelText('Go to page 9')).toBeInTheDocument();
-    expect(screen.getByLabelText('Go to page 10')).toBeInTheDocument();
-    expect(screen.getByLabelText('Go to page 11')).toBeInTheDocument();
-    expect(screen.getByLabelText('Go to page 12')).toBeInTheDocument();
-  });
-
-  it('controlled mode (page prop)', async () => {
-    const user = userEvent.setup();
-    const onPageChange = vi.fn();
-    const { rerender } = render(
-      <Pagination totalPages={5} page={3} onPageChange={onPageChange}>
-        <Pagination.Previous />
-        <Pagination.Items />
-        <Pagination.Next />
-      </Pagination>
-    );
-
-    expect(screen.getByLabelText('Go to page 3')).toHaveAttribute('aria-current', 'page');
-
-    await user.click(screen.getByLabelText('Go to page 5'));
-    expect(onPageChange).toHaveBeenCalledWith(5);
-
-    // Re-render with updated page prop
-    rerender(
-      <Pagination totalPages={5} page={5} onPageChange={onPageChange}>
-        <Pagination.Previous />
-        <Pagination.Items />
-        <Pagination.Next />
-      </Pagination>
-    );
-
-    expect(screen.getByLabelText('Go to page 5')).toHaveAttribute('aria-current', 'page');
-  });
-
-  it('keyboard navigation (Tab between buttons)', async () => {
-    const user = userEvent.setup();
-    renderPagination({ totalPages: 3 });
-
-    const prevButton = screen.getByLabelText('Go to previous page');
-    prevButton.focus();
-
-    await user.tab();
-    // Focus should move to a page button
-    expect(document.activeElement?.getAttribute('aria-label')).toMatch(/Go to page/);
-  });
-
-  it('totalPages=0 renders empty nav', () => {
-    const { container } = renderPagination({ totalPages: 0 });
-
-    expect(container.querySelector('nav')).toBeInTheDocument();
-    expect(container.querySelector('ul')).not.toBeInTheDocument();
-  });
-
-  it('totalPages=1 renders single page, no prev/next disabled correctly', () => {
-    renderPagination({ totalPages: 1 });
-
-    expect(screen.getByLabelText('Go to page 1')).toBeInTheDocument();
-    expect(screen.getByLabelText('Go to previous page')).toBeDisabled();
-    expect(screen.getByLabelText('Go to next page')).toBeDisabled();
-  });
-
-  it('out-of-range controlled page clamps to valid range', () => {
-    render(
-      <Pagination totalPages={5} page={99}>
-        <Pagination.Previous />
-        <Pagination.Items />
-        <Pagination.Next />
-      </Pagination>
-    );
-
-    expect(screen.getByLabelText('Go to page 5')).toHaveAttribute('aria-current', 'page');
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = renderPagination({ totalPages: 10, defaultPage: 5 });
-
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/Popover/Popover.fragment.tsx

@@ -1,187 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Popover } from '.';
-import { Button } from '../Button';
-import { Input } from '../Input';
-
-export default defineFragment({
-  component: Popover,
-
-  meta: {
-    name: 'Popover',
-    description: 'Rich content overlay anchored to a trigger element. Use for forms, detailed information, or interactive content that should stay in context.',
-    category: 'feedback',
-    status: 'stable',
-    tags: ['popover', 'overlay', 'dropdown', 'floating', 'contextual'],
-    since: '0.1.0',
-  },
-
-  usage: {
-    when: [
-      'Inline editing forms',
-      'Rich preview content',
-      'Filter panels',
-      'Date/color pickers',
-      'Content that needs more space than a tooltip',
-    ],
-    whenNot: [
-      'Simple hints (use Tooltip)',
-      'Action lists (use Menu)',
-      'Blocking user interaction (use Dialog)',
-      'System notifications (use Toast or Alert)',
-    ],
-    guidelines: [
-      'Keep popover content focused and minimal',
-      'Include a clear way to close (X button or action buttons)',
-      'Position to avoid covering important content',
-      'Use arrow to visually connect popover to trigger',
-    ],
-    accessibility: [
-      'Focus is moved to popover content on open',
-      'Closes on Escape key',
-      'Focus returns to trigger on close',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'Popover trigger and content',
-      required: true,
-    },
-    open: {
-      type: 'boolean',
-      description: 'Controlled open state',
-    },
-    defaultOpen: {
-      type: 'boolean',
-      description: 'Default open state (uncontrolled)',
-      default: 'false',
-    },
-    onOpenChange: {
-      type: 'function',
-      description: 'Called when open state changes',
-    },
-    modal: {
-      type: 'boolean',
-      description: 'Whether to block page interaction',
-      default: 'false',
-    },
-  },
-
-  relations: [
-    { component: 'Tooltip', relationship: 'alternative', note: 'Use Tooltip for brief, non-interactive hints' },
-    { component: 'Menu', relationship: 'alternative', note: 'Use Menu for action lists' },
-    { component: 'Dialog', relationship: 'alternative', note: 'Use Dialog for blocking interactions' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'open: boolean - controlled open state',
-      'onOpenChange: (open) => void - state handler',
-      'modal: boolean - blocks page interaction (default: false)',
-      'Popover.Content side: top|bottom|left|right - position',
-    ],
-    scenarioTags: [
-      'overlay.popover',
-      'form.inline',
-      'content.preview',
-    ],
-    a11yRules: ['A11Y_POPOVER_FOCUS', 'A11Y_POPOVER_ESCAPE', 'A11Y_TARGET_SIZE_MIN'],
-  },
-
-  ai: {
-    compositionPattern: 'compound',
-    subComponents: ['Trigger', 'Content', 'Close', 'Title', 'Description', 'Body', 'Footer'],
-    requiredChildren: ['Trigger', 'Content'],
-    commonPatterns: [
-      '<Popover><Popover.Trigger asChild><Button>Open</Button></Popover.Trigger><Popover.Content><Popover.Close /><Popover.Title>{title}</Popover.Title><Popover.Description>{description}</Popover.Description></Popover.Content></Popover>',
-    ],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic popover with content',
-      render: () => (
-        <Popover>
-          <Popover.Trigger asChild>
-            <Button variant="secondary">Open Popover</Button>
-          </Popover.Trigger>
-          <Popover.Content>
-            <Popover.Close />
-            <Popover.Title>Popover Title</Popover.Title>
-            <Popover.Description>
-              This is a popover with some content. It can contain text, forms, or other elements.
-            </Popover.Description>
-          </Popover.Content>
-        </Popover>
-      ),
-    },
-    {
-      name: 'With Form',
-      description: 'Popover containing a form',
-      render: () => (
-        <Popover>
-          <Popover.Trigger asChild>
-            <Button variant="secondary">Edit Name</Button>
-          </Popover.Trigger>
-          <Popover.Content size="sm">
-            <Popover.Close />
-            <Popover.Title>Edit Name</Popover.Title>
-            <Popover.Body>
-              <Input label="Display Name" placeholder="Enter name" />
-            </Popover.Body>
-            <Popover.Footer>
-              <Popover.Close asChild>
-                <Button variant="secondary" size="sm">Cancel</Button>
-              </Popover.Close>
-              <Button variant="primary" size="sm">Save</Button>
-            </Popover.Footer>
-          </Popover.Content>
-        </Popover>
-      ),
-    },
-    {
-      name: 'With Arrow',
-      description: 'Popover with pointing arrow',
-      render: () => (
-        <Popover>
-          <Popover.Trigger asChild>
-            <Button variant="secondary">Info</Button>
-          </Popover.Trigger>
-          <Popover.Content arrow>
-            <Popover.Title>Quick Tip</Popover.Title>
-            <Popover.Description>
-              This popover has an arrow pointing to its trigger element.
-            </Popover.Description>
-          </Popover.Content>
-        </Popover>
-      ),
-    },
-    {
-      name: 'Positions',
-      description: 'Popover on different sides',
-      render: () => (
-        <div style={{ display: 'flex', gap: '16px', padding: '60px' }}>
-          <Popover>
-            <Popover.Trigger asChild>
-              <Button variant="secondary">Top</Button>
-            </Popover.Trigger>
-            <Popover.Content side="top" size="sm">
-              <Popover.Description>Popover on top</Popover.Description>
-            </Popover.Content>
-          </Popover>
-          <Popover>
-            <Popover.Trigger asChild>
-              <Button variant="secondary">Bottom</Button>
-            </Popover.Trigger>
-            <Popover.Content side="bottom" size="sm">
-              <Popover.Description>Popover on bottom</Popover.Description>
-            </Popover.Content>
-          </Popover>
-        </div>
-      ),
-    },
-  ],
-});

package/src/components/Popover/Popover.test.tsx

@@ -1,128 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, userEvent, waitFor, expectNoA11yViolations } from '../../test/utils';
-import { Popover } from './index';
-
-function renderPopover(props: Partial<React.ComponentProps<typeof Popover>> = {}) {
-  return render(
-    <Popover {...props}>
-      <Popover.Trigger>Open Popover</Popover.Trigger>
-      <Popover.Content>
-        <Popover.Title>Popover Title</Popover.Title>
-        <Popover.Description>Popover description</Popover.Description>
-        <Popover.Body>Body text</Popover.Body>
-        <Popover.Footer>Footer content</Popover.Footer>
-        <Popover.Close />
-      </Popover.Content>
-    </Popover>
-  );
-}
-
-describe('Popover', () => {
-  it('opens when trigger is clicked', async () => {
-    const user = userEvent.setup();
-    renderPopover();
-
-    expect(screen.queryByText('Popover Title')).not.toBeInTheDocument();
-
-    await user.click(screen.getByRole('button', { name: /open popover/i }));
-    await waitFor(() => {
-      expect(screen.getByText('Popover Title')).toBeInTheDocument();
-    });
-  });
-
-  it('renders content sub-components', async () => {
-    const user = userEvent.setup();
-    renderPopover();
-
-    await user.click(screen.getByRole('button', { name: /open popover/i }));
-    await waitFor(() => {
-      expect(screen.getByText('Popover Title')).toBeInTheDocument();
-      expect(screen.getByText('Popover description')).toBeInTheDocument();
-      expect(screen.getByText('Body text')).toBeInTheDocument();
-      expect(screen.getByText('Footer content')).toBeInTheDocument();
-    });
-  });
-
-  it('forwards html props to trigger, title, description, and close', async () => {
-    const user = userEvent.setup();
-    render(
-      <Popover>
-        <Popover.Trigger id="popover-trigger">Open</Popover.Trigger>
-        <Popover.Content>
-          <Popover.Title id="popover-title">Popover Title</Popover.Title>
-          <Popover.Description id="popover-description">Popover Description</Popover.Description>
-          <Popover.Close data-testid="popover-close" />
-        </Popover.Content>
-      </Popover>
-    );
-
-    expect(screen.getByRole('button', { name: /open/i })).toHaveAttribute('id', 'popover-trigger');
-    await user.click(screen.getByRole('button', { name: /open/i }));
-
-    await waitFor(() => {
-      expect(screen.getByText('Popover Title')).toHaveAttribute('id', 'popover-title');
-      expect(screen.getByText('Popover Description')).toHaveAttribute('id', 'popover-description');
-      expect(screen.getByTestId('popover-close')).toBeInTheDocument();
-    });
-  });
-
-  it('has a close button with aria-label', async () => {
-    const user = userEvent.setup();
-    renderPopover();
-
-    await user.click(screen.getByRole('button', { name: /open popover/i }));
-    await waitFor(() => {
-      expect(screen.getByRole('button', { name: /close popover/i })).toBeInTheDocument();
-    });
-  });
-
-  it('closes when close button is clicked', async () => {
-    const user = userEvent.setup();
-    renderPopover({ defaultOpen: true });
-
-    await waitFor(() => {
-      expect(screen.getByText('Popover Title')).toBeInTheDocument();
-    });
-
-    await user.click(screen.getByRole('button', { name: /close popover/i }));
-    await waitFor(() => {
-      expect(screen.queryByText('Popover Title')).not.toBeInTheDocument();
-    });
-  });
-
-  it('supports defaultOpen prop', async () => {
-    renderPopover({ defaultOpen: true });
-
-    await waitFor(() => {
-      expect(screen.getByText('Popover Title')).toBeInTheDocument();
-    });
-  });
-
-  it('renders with arrow when enabled', async () => {
-    render(
-      <Popover defaultOpen>
-        <Popover.Trigger>Open</Popover.Trigger>
-        <Popover.Content arrow>
-          <p>With arrow</p>
-        </Popover.Content>
-      </Popover>
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('With arrow')).toBeInTheDocument();
-    });
-  });
-
-  it('has no accessibility violations when open', async () => {
-    const { container } = renderPopover({ defaultOpen: true });
-
-    await waitFor(() => {
-      expect(screen.getByText('Popover Title')).toBeInTheDocument();
-    });
-
-    await expectNoA11yViolations(container, {
-      // Base UI focus guard spans have role="button" without labels.
-      disabledRules: ['aria-command-name'],
-    });
-  });
-});

package/src/components/Progress/Progress.fragment.tsx

@@ -1,156 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Progress, CircularProgress } from '.';
-
-export default defineFragment({
-  component: Progress,
-
-  meta: {
-    name: 'Progress',
-    description: 'Visual indicator of task completion or loading state. Available in linear and circular variants.',
-    category: 'feedback',
-    status: 'stable',
-    tags: ['progress', 'loading', 'indicator', 'percentage', 'status'],
-    since: '0.1.0',
-  },
-
-  usage: {
-    when: [
-      'Showing upload/download progress',
-      'Displaying task completion percentage',
-      'Form completion indicators',
-      'Loading states with known duration',
-    ],
-    whenNot: [
-      'Unknown loading duration (use Spinner)',
-      'Step-based progress (use Stepper)',
-      'Status without percentage (use Badge)',
-    ],
-    guidelines: [
-      'Use determinate progress when you know the completion percentage',
-      'Use indeterminate for unknown durations',
-      'Include a label for context when the purpose isnt obvious',
-      'Use appropriate color variants for success/warning/danger states',
-    ],
-    accessibility: [
-      'Uses role="progressbar" with aria-valuenow',
-      'Label is associated with the progress bar',
-      'State changes are announced to screen readers',
-    ],
-  },
-
-  props: {
-    value: {
-      type: 'number',
-      description: 'Current progress value (0-100). Null for indeterminate.',
-    },
-    min: {
-      type: 'number',
-      description: 'Minimum value',
-      default: '0',
-    },
-    max: {
-      type: 'number',
-      description: 'Maximum value',
-      default: '100',
-    },
-    size: {
-      type: 'enum',
-      description: 'Size of the progress bar',
-      values: ['sm', 'md', 'lg'],
-      default: 'md',
-    },
-    variant: {
-      type: 'enum',
-      description: 'Color variant',
-      values: ['default', 'success', 'warning', 'danger'],
-      default: 'default',
-    },
-    label: {
-      type: 'string',
-      description: 'Label text above the progress bar',
-    },
-    showValue: {
-      type: 'boolean',
-      description: 'Show percentage value',
-      default: 'false',
-    },
-    formatValue: {
-      type: 'function',
-      description: 'Custom formatter for displayed progress value',
-    },
-  },
-
-  relations: [
-    { component: 'Badge', relationship: 'alternative', note: 'Use Badge for status without percentage' },
-    { component: 'Alert', relationship: 'sibling', note: 'Use Alert for completion messages' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'value: number|null - progress percentage (null for indeterminate)',
-      'size: sm|md|lg - bar thickness',
-      'variant: default|success|warning|danger - color',
-      'label: string - descriptive label',
-      'showValue: boolean - display percentage',
-    ],
-    scenarioTags: [
-      'feedback.progress',
-      'status.loading',
-      'display.percentage',
-    ],
-    a11yRules: ['A11Y_PROGRESS_ROLE', 'A11Y_PROGRESS_VALUE'],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic progress bar with percentage',
-      render: () => (
-        <Progress value={60} label="Uploading..." showValue />
-      ),
-    },
-    {
-      name: 'Variants',
-      description: 'Different color variants for different states',
-      render: () => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '300px' }}>
-          <Progress value={75} variant="default" label="Processing" showValue />
-          <Progress value={100} variant="success" label="Complete" showValue />
-          <Progress value={80} variant="warning" label="Almost full" showValue />
-          <Progress value={95} variant="danger" label="Storage critical" showValue />
-        </div>
-      ),
-    },
-    {
-      name: 'Sizes',
-      description: 'Different progress bar sizes',
-      render: () => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '300px' }}>
-          <Progress value={50} size="sm" label="Small" />
-          <Progress value={50} size="md" label="Medium" />
-          <Progress value={50} size="lg" label="Large" />
-        </div>
-      ),
-    },
-    {
-      name: 'Indeterminate',
-      description: 'Loading state with unknown duration',
-      render: () => (
-        <Progress value={null} label="Loading..." />
-      ),
-    },
-    {
-      name: 'Circular',
-      description: 'Circular progress indicator',
-      render: () => (
-        <div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>
-          <CircularProgress value={25} size="sm" />
-          <CircularProgress value={50} size="md" showValue />
-          <CircularProgress value={75} size="lg" showValue variant="success" />
-          <CircularProgress value={null} size="md" />
-        </div>
-      ),
-    },
-  ],
-});