@fragments-sdk/ui 0.14.0 → 0.15.1

package/src/components/List/List.fragment.tsx

@@ -1,152 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/core';
-import { List } from '.';
-import { Check } from '@phosphor-icons/react';
-
-export default defineFragment({
-  component: List,
-
-  meta: {
-    name: 'List',
-    description: 'Compound component for rendering ordered or unordered lists with consistent styling. Supports bullet, numbered, and icon-prefixed items.',
-    category: 'display',
-    status: 'stable',
-    tags: ['list', 'items', 'bullet', 'ordered', 'unordered'],
-    since: '0.1.0',
-  },
-
-  usage: {
-    when: [
-      'Feature lists with checkmarks or icons',
-      'Ordered steps or instructions',
-      'Navigation lists in sidebars',
-      'Pricing plan feature comparisons',
-    ],
-    whenNot: [
-      'Interactive selection lists (use Menu or Select)',
-      'Data tables with columns (use Table)',
-      'Cards in a grid (use Grid with Card)',
-      'Navigation tabs (use Tabs)',
-    ],
-    guidelines: [
-      'Use as="ol" for sequential or numbered content',
-      'Use variant="icon" with meaningful icons for feature lists',
-      'Keep list items concise and parallel in structure',
-      'Use consistent icons within a single list',
-    ],
-    accessibility: [
-      'Use semantic list elements (ul, ol) for screen reader support',
-      'List items are automatically announced with count',
-      'Icons are decorative; ensure text conveys meaning',
-      'Avoid deeply nested lists (3+ levels)',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'List.Item components',
-      required: true,
-    },
-    as: {
-      type: 'enum',
-      description: 'List type',
-      values: ['ul', 'ol'],
-      default: 'ul',
-    },
-    variant: {
-      type: 'enum',
-      description: 'List style variant',
-      values: ['none', 'disc', 'decimal', 'icon'],
-      default: 'disc',
-    },
-    gap: {
-      type: 'enum',
-      description: 'Spacing between items',
-      values: ['none', 'xs', 'sm', 'md', 'lg'],
-      default: 'sm',
-    },
-  },
-
-  relations: [
-    { component: 'Icon', relationship: 'child', note: 'Use Icon as List.Item icon prop' },
-    { component: 'Stack', relationship: 'alternative', note: 'Use Stack for non-semantic vertical lists' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'children: List.Item[] - list items (required)',
-      'as: ul|ol - list type',
-      'variant: none|disc|decimal|icon - list style',
-      'gap: none|xs|sm|md|lg - item spacing',
-    ],
-    subComponents: [
-      {
-        name: 'List.Item',
-        props: [
-          'children: ReactNode - item content',
-          'icon: ReactNode - icon for variant="icon"',
-        ],
-      },
-    ],
-    scenarioTags: [
-      'content.list',
-      'layout.vertical',
-      'display.items',
-    ],
-    a11yRules: ['A11Y_LIST_SEMANTIC', 'A11Y_LIST_NESTING'],
-  },
-
-  variants: [
-    {
-      name: 'Bullet List',
-      description: 'Default unordered list with bullets',
-      render: () => (
-        <List variant="disc">
-          <List.Item>First item</List.Item>
-          <List.Item>Second item</List.Item>
-          <List.Item>Third item</List.Item>
-        </List>
-      ),
-    },
-    {
-      name: 'Numbered List',
-      description: 'Ordered list with numbers',
-      render: () => (
-        <List as="ol" variant="decimal">
-          <List.Item>Create your account</List.Item>
-          <List.Item>Configure your settings</List.Item>
-          <List.Item>Start building</List.Item>
-        </List>
-      ),
-    },
-    {
-      name: 'Icon List',
-      description: 'List with custom icons per item',
-      render: () => (
-        <List variant="icon">
-          <List.Item icon={<Check weight="bold" color="var(--fui-color-success)" />}>
-            Unlimited projects
-          </List.Item>
-          <List.Item icon={<Check weight="bold" color="var(--fui-color-success)" />}>
-            Priority support
-          </List.Item>
-          <List.Item icon={<Check weight="bold" color="var(--fui-color-success)" />}>
-            Advanced analytics
-          </List.Item>
-        </List>
-      ),
-    },
-    {
-      name: 'No Style',
-      description: 'Plain list without markers',
-      render: () => (
-        <List variant="none" gap="md">
-          <List.Item>Dashboard</List.Item>
-          <List.Item>Settings</List.Item>
-          <List.Item>Profile</List.Item>
-        </List>
-      ),
-    },
-  ],
-});

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/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',
-      'Listbox provides arrow/home/end + Enter/Space keyboard navigation when focused',
-      '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: (event) => 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,114 +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('passes the click event object to Listbox.Item onClick', 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.mock.calls[0]?.[0]).toBeTruthy();
-    expect(handleClick.mock.calls[0]?.[0]).toEqual(expect.objectContaining({ type: 'click' }));
-  });
-
-  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/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);
-  });
-});