@fragments-sdk/ui 0.13.0 → 0.15.1

package/src/components/List/List.test.tsx

@@ -1,57 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, expectNoA11yViolations } from '../../test/utils';
-import { List } from './index';
-
-describe('List', () => {
-  it('renders as <ul> by default', () => {
-    render(
-      <List>
-        <List.Item>Item 1</List.Item>
-        <List.Item>Item 2</List.Item>
-      </List>
-    );
-    expect(screen.getByRole('list').tagName).toBe('UL');
-  });
-
-  it('renders as <ol> when as="ol"', () => {
-    render(
-      <List as="ol">
-        <List.Item>First</List.Item>
-      </List>
-    );
-    expect(screen.getByRole('list').tagName).toBe('OL');
-  });
-
-  it('renders list items', () => {
-    render(
-      <List>
-        <List.Item>Alpha</List.Item>
-        <List.Item>Beta</List.Item>
-        <List.Item>Gamma</List.Item>
-      </List>
-    );
-    const items = screen.getAllByRole('listitem');
-    expect(items).toHaveLength(3);
-    expect(items[0]).toHaveTextContent('Alpha');
-  });
-
-  it('renders icon items when variant is "icon"', () => {
-    render(
-      <List variant="icon">
-        <List.Item icon={<span data-testid="star">*</span>}>Starred</List.Item>
-      </List>
-    );
-    expect(screen.getByTestId('star')).toBeInTheDocument();
-    expect(screen.getByText('Starred')).toBeInTheDocument();
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(
-      <List>
-        <List.Item>Item A</List.Item>
-        <List.Item>Item B</List.Item>
-      </List>
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/Listbox/Listbox.fragment.tsx

@@ -1,179 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Listbox } from '.';
-
-export default defineFragment({
-  component: Listbox,
-
-  meta: {
-    name: 'Listbox',
-    description: 'Controlled listbox for search results, autocomplete dropdowns, and command menus. Provides Menu-like styling without requiring a trigger.',
-    category: 'forms',
-    status: 'stable',
-    tags: ['listbox', 'search', 'autocomplete', 'combobox', 'command', 'dropdown'],
-    since: '0.3.0',
-  },
-
-  usage: {
-    when: [
-      'Search result dropdowns',
-      'Autocomplete suggestions',
-      'Command palette results',
-      'Keyboard-navigable option lists',
-    ],
-    whenNot: [
-      'Static lists without selection (use List)',
-      'Action menus with trigger button (use Menu)',
-      'Form field selection (use Select)',
-      'Navigation menus (use Sidebar or Tabs)',
-    ],
-    guidelines: [
-      'Control open/close state externally based on input focus or query',
-      'Implement keyboard navigation (arrow keys, enter, escape) in parent',
-      'Use Listbox.Empty for no results state',
-      'Group related items with Listbox.Group when appropriate',
-    ],
-    accessibility: [
-      'Uses listbox and option ARIA roles',
-      'aria-selected indicates current selection',
-      'aria-disabled for non-interactive items',
-      'Connect to input with aria-controls for full combobox pattern',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'Listbox.Item, Listbox.Group, or Listbox.Empty components',
-      required: true,
-    },
-  },
-
-  relations: [
-    { component: 'Input', relationship: 'sibling', note: 'Pair with Input for search/autocomplete patterns' },
-    { component: 'Menu', relationship: 'alternative', note: 'Use Menu when you need a trigger button' },
-    { component: 'Select', relationship: 'alternative', note: 'Use Select for form field selection' },
-    { component: 'List', relationship: 'alternative', note: 'Use List for static, non-interactive lists' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'children: ReactNode - Listbox.Item components (required)',
-      'aria-label: string - accessible label',
-      'Listbox.Item selected: boolean - highlight state',
-      'Listbox.Item disabled: boolean - non-interactive',
-    ],
-    subComponents: [
-      {
-        name: 'Listbox.Item',
-        props: [
-          'children: ReactNode - item content',
-          'selected: boolean - highlight/selected state',
-          'disabled: boolean - non-interactive',
-          'onClick: () => void - click handler',
-          'onMouseEnter: () => void - hover handler',
-        ],
-      },
-      {
-        name: 'Listbox.Group',
-        props: [
-          'children: ReactNode - grouped items',
-          'label: string - group heading',
-        ],
-      },
-      {
-        name: 'Listbox.Empty',
-        props: [
-          'children: ReactNode - empty state message',
-        ],
-      },
-    ],
-    scenarioTags: [
-      'form.search',
-      'form.autocomplete',
-      'action.command',
-      'display.results',
-    ],
-    a11yRules: ['A11Y_LISTBOX_ROLE', 'A11Y_OPTION_ROLE'],
-  },
-
-  ai: {
-    compositionPattern: 'compound',
-    subComponents: ['Item', 'Group', 'Empty'],
-    requiredChildren: ['Item'],
-    commonPatterns: [
-      '<Listbox aria-label="Search results">{results.map(item => <Listbox.Item key={item.id} selected={item.id === selectedId} onClick={() => onSelect(item)}>{item.label}</Listbox.Item>)}</Listbox>',
-    ],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic listbox with selectable items',
-      render: () => (
-        <Listbox aria-label="Options">
-          <Listbox.Item selected>First option</Listbox.Item>
-          <Listbox.Item>Second option</Listbox.Item>
-          <Listbox.Item>Third option</Listbox.Item>
-        </Listbox>
-      ),
-    },
-    {
-      name: 'Search Results',
-      description: 'Typical search results pattern with label and metadata',
-      render: () => (
-        <Listbox aria-label="Search results">
-          <Listbox.Item selected>
-            <span style={{ fontWeight: 500 }}>Button</span>
-            <span style={{ marginLeft: 'auto', fontSize: '0.75rem', color: 'var(--fui-text-tertiary)' }}>Components</span>
-          </Listbox.Item>
-          <Listbox.Item>
-            <span style={{ fontWeight: 500 }}>Badge</span>
-            <span style={{ marginLeft: 'auto', fontSize: '0.75rem', color: 'var(--fui-text-tertiary)' }}>Components</span>
-          </Listbox.Item>
-          <Listbox.Item>
-            <span style={{ fontWeight: 500 }}>Box</span>
-            <span style={{ marginLeft: 'auto', fontSize: '0.75rem', color: 'var(--fui-text-tertiary)' }}>Layout</span>
-          </Listbox.Item>
-        </Listbox>
-      ),
-    },
-    {
-      name: 'With Groups',
-      description: 'Grouped items with labels',
-      render: () => (
-        <Listbox aria-label="Commands">
-          <Listbox.Group label="Recent">
-            <Listbox.Item selected>Open file...</Listbox.Item>
-            <Listbox.Item>Save as...</Listbox.Item>
-          </Listbox.Group>
-          <Listbox.Group label="Actions">
-            <Listbox.Item>Copy</Listbox.Item>
-            <Listbox.Item>Paste</Listbox.Item>
-            <Listbox.Item disabled>Cut</Listbox.Item>
-          </Listbox.Group>
-        </Listbox>
-      ),
-    },
-    {
-      name: 'Empty State',
-      description: 'No results found message',
-      render: () => (
-        <Listbox aria-label="Search results">
-          <Listbox.Empty>No results found</Listbox.Empty>
-        </Listbox>
-      ),
-    },
-    {
-      name: 'With Disabled Items',
-      description: 'Mix of enabled and disabled items',
-      render: () => (
-        <Listbox aria-label="Options">
-          <Listbox.Item>Available option</Listbox.Item>
-          <Listbox.Item disabled>Disabled option</Listbox.Item>
-          <Listbox.Item>Another option</Listbox.Item>
-        </Listbox>
-      ),
-    },
-  ],
-});

package/src/components/Listbox/Listbox.test.tsx

@@ -1,100 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
-import { Listbox } from './index';
-
-describe('Listbox', () => {
-  it('renders with listbox role', () => {
-    render(
-      <Listbox aria-label="Fruits">
-        <Listbox.Item>Apple</Listbox.Item>
-        <Listbox.Item>Banana</Listbox.Item>
-      </Listbox>
-    );
-    expect(screen.getByRole('listbox')).toBeInTheDocument();
-  });
-
-  it('renders items with option role', () => {
-    render(
-      <Listbox aria-label="Fruits">
-        <Listbox.Item>Apple</Listbox.Item>
-        <Listbox.Item>Banana</Listbox.Item>
-      </Listbox>
-    );
-    const options = screen.getAllByRole('option');
-    expect(options).toHaveLength(2);
-    expect(options[0]).toHaveTextContent('Apple');
-  });
-
-  it('reflects selected state with aria-selected', () => {
-    render(
-      <Listbox aria-label="Fruits">
-        <Listbox.Item selected>Apple</Listbox.Item>
-        <Listbox.Item>Banana</Listbox.Item>
-      </Listbox>
-    );
-    expect(screen.getByText('Apple').closest('[role="option"]')).toHaveAttribute('aria-selected', 'true');
-    expect(screen.getByText('Banana').closest('[role="option"]')).toHaveAttribute('aria-selected', 'false');
-  });
-
-  it('marks disabled items with aria-disabled', () => {
-    render(
-      <Listbox aria-label="Fruits">
-        <Listbox.Item disabled>Apple</Listbox.Item>
-        <Listbox.Item>Banana</Listbox.Item>
-      </Listbox>
-    );
-    expect(screen.getByText('Apple').closest('[role="option"]')).toHaveAttribute('aria-disabled', 'true');
-  });
-
-  it('calls onClick when an item is clicked', async () => {
-    const user = userEvent.setup();
-    const handleClick = vi.fn();
-    render(
-      <Listbox aria-label="Fruits">
-        <Listbox.Item onClick={handleClick}>Apple</Listbox.Item>
-      </Listbox>
-    );
-    await user.click(screen.getByRole('option'));
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not call onClick on disabled items', async () => {
-    const user = userEvent.setup();
-    const handleClick = vi.fn();
-    render(
-      <Listbox aria-label="Fruits">
-        <Listbox.Item disabled onClick={handleClick}>Apple</Listbox.Item>
-      </Listbox>
-    );
-    await user.click(screen.getByRole('option'));
-    expect(handleClick).not.toHaveBeenCalled();
-  });
-
-  it('renders groups with a label', () => {
-    render(
-      <Listbox aria-label="Food">
-        <Listbox.Group label="Fruits">
-          <Listbox.Item>Apple</Listbox.Item>
-        </Listbox.Group>
-        <Listbox.Group label="Vegetables">
-          <Listbox.Item>Carrot</Listbox.Item>
-        </Listbox.Group>
-      </Listbox>
-    );
-    expect(screen.getByText('Fruits')).toBeInTheDocument();
-    expect(screen.getByText('Vegetables')).toBeInTheDocument();
-    const groups = screen.getAllByRole('group');
-    expect(groups).toHaveLength(2);
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(
-      <Listbox aria-label="Fruits">
-        <Listbox.Item>Apple</Listbox.Item>
-        <Listbox.Item selected>Banana</Listbox.Item>
-        <Listbox.Item disabled>Cherry</Listbox.Item>
-      </Listbox>
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/Loading/Loading.fragment.tsx

@@ -1,153 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Loading } from '.';
-
-export default defineFragment({
-  component: Loading,
-
-  meta: {
-    name: 'Loading',
-    description: 'Versatile loading indicator with multiple variants for showing progress or waiting states',
-    category: 'feedback',
-    status: 'stable',
-    tags: ['loading', 'spinner', 'progress', 'feedback', 'indicator', 'async'],
-  },
-
-  usage: {
-    when: [
-      'Indicating content is being fetched or processed',
-      'Showing a pending state while waiting for an async operation',
-      'Displaying loading state for buttons, forms, or page sections',
-      'Full-screen loading during initial app/page load',
-    ],
-    whenNot: [
-      'For showing determinate progress - use Progress component instead',
-      'For showing skeleton placeholders - use Skeleton component instead',
-      'For AI-specific thinking states - use ThinkingIndicator instead',
-    ],
-    guidelines: [
-      'Use spinner variant for general loading states',
-      'Use dots variant for chat/messaging contexts',
-      'Use pulse variant for subtle, ambient loading',
-      'Always provide a meaningful label for screen readers',
-      'Consider using Loading.Screen for initial page loads',
-      'Use Loading.Inline when loading indicator should flow with text',
-    ],
-    accessibility: [
-      'Component uses role="status" and aria-live="polite"',
-      'Always provide descriptive label prop for screen readers',
-      'Animations respect prefers-reduced-motion preference',
-    ],
-  },
-
-  props: {
-    size: {
-      type: 'enum',
-      values: ['sm', 'md', 'lg', 'xl'],
-      default: 'md',
-      description: 'Size of the loading indicator',
-    },
-    variant: {
-      type: 'enum',
-      values: ['spinner', 'dots', 'pulse'],
-      default: 'spinner',
-      description: 'Visual style of the loading animation',
-    },
-    label: {
-      type: 'string',
-      default: 'Loading...',
-      description: 'Accessible label for screen readers',
-    },
-    centered: {
-      type: 'boolean',
-      default: false,
-      description: 'Whether to center the loading indicator in its container',
-    },
-    fill: {
-      type: 'boolean',
-      default: false,
-      description: 'Whether to fill the parent container',
-    },
-    overlay: {
-      type: 'boolean',
-      default: false,
-      description: 'Whether to show with a backdrop overlay',
-    },
-    color: {
-      type: 'enum',
-      values: ['accent', 'current', 'muted'],
-      default: 'accent',
-      description: 'Color variant - accent uses theme color, current inherits text color',
-    },
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Default spinner loading indicator',
-      render: () => <Loading />,
-    },
-    {
-      name: 'Sizes',
-      description: 'Loading indicators in different sizes',
-      render: () => (
-        <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
-          <Loading size="sm" />
-          <Loading size="md" />
-          <Loading size="lg" />
-          <Loading size="xl" />
-        </div>
-      ),
-    },
-    {
-      name: 'Dots',
-      description: 'Bouncing dots animation',
-      render: () => <Loading variant="dots" />,
-    },
-    {
-      name: 'Pulse',
-      description: 'Pulsing circle animation',
-      render: () => <Loading variant="pulse" />,
-    },
-    {
-      name: 'Colors',
-      description: 'Different color variants',
-      render: () => (
-        <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
-          <Loading color="accent" />
-          <Loading color="muted" />
-          <span style={{ color: '#3b82f6' }}>
-            <Loading color="current" />
-          </span>
-        </div>
-      ),
-    },
-    {
-      name: 'Inline',
-      description: 'Inline loading indicator that flows with text',
-      render: () => (
-        <p style={{ margin: 0 }}>
-          Processing your request <Loading.Inline /> please wait...
-        </p>
-      ),
-    },
-    {
-      name: 'Centered',
-      description: 'Centered in container',
-      render: () => (
-        <div style={{ width: '200px', height: '100px', border: '1px dashed #ccc', borderRadius: '8px' }}>
-          <Loading centered fill />
-        </div>
-      ),
-    },
-    {
-      name: 'Screen',
-      description: 'Full-screen loading state with optional label',
-      render: () => (
-        <div style={{ position: 'relative', width: '300px', height: '200px', border: '1px solid #ccc', borderRadius: '8px', overflow: 'hidden', transform: 'scale(1)' }}>
-          <Loading.Screen size="lg" label="Loading application..." showLabel />
-        </div>
-      ),
-    },
-  ],
-});

package/src/components/Loading/Loading.test.tsx

@@ -1,38 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, expectNoA11yViolations } from '../../test/utils';
-import { Loading } from './index';
-
-describe('Loading', () => {
-  it('renders with role="status"', () => {
-    render(<Loading />);
-    expect(screen.getByRole('status')).toBeInTheDocument();
-  });
-
-  it('has default aria-label "Loading..."', () => {
-    render(<Loading />);
-    expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'Loading...');
-  });
-
-  it('accepts custom aria-label', () => {
-    render(<Loading label="Saving data..." />);
-    expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'Saving data...');
-  });
-
-  it('renders Loading.Inline with role="status"', () => {
-    render(<Loading.Inline label="Uploading..." />);
-    expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'Uploading...');
-  });
-
-  it('renders Loading.Screen with role="status"', () => {
-    render(<Loading.Screen label="Loading page..." />);
-    // Loading.Screen itself has role="status" plus a nested Loading
-    const statuses = screen.getAllByRole('status');
-    expect(statuses.length).toBeGreaterThanOrEqual(1);
-    expect(statuses[0]).toHaveAttribute('aria-label', 'Loading page...');
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(<Loading label="Loading content" />);
-    await expectNoA11yViolations(container);
-  });
-});