@fragments-sdk/ui 0.13.0 → 0.15.1

package/src/components/Progress/Progress.test.tsx

@@ -1,58 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, expectNoA11yViolations } from '../../test/utils';
-import { Progress, CircularProgress } from './index';
-
-describe('Progress', () => {
-  it('renders a progressbar role', () => {
-    render(<Progress value={50} />);
-    expect(screen.getByRole('progressbar')).toBeInTheDocument();
-  });
-
-  it('sets aria-valuenow, aria-valuemin, and aria-valuemax', () => {
-    render(<Progress value={30} min={0} max={100} />);
-    const bar = screen.getByRole('progressbar');
-    expect(bar).toHaveAttribute('aria-valuenow', '30');
-    expect(bar).toHaveAttribute('aria-valuemin', '0');
-    expect(bar).toHaveAttribute('aria-valuemax', '100');
-  });
-
-  it('renders as indeterminate when value is null', () => {
-    render(<Progress value={null} />);
-    const bar = screen.getByRole('progressbar');
-    // indeterminate — no aria-valuenow
-    expect(bar).not.toHaveAttribute('aria-valuenow');
-  });
-
-  it('renders a label', () => {
-    render(<Progress value={40} label="Upload progress" />);
-    expect(screen.getByText('Upload progress')).toBeInTheDocument();
-  });
-
-  it('shows percentage when showValue is true', () => {
-    render(<Progress value={75} showValue />);
-    expect(screen.getByText('75%')).toBeInTheDocument();
-  });
-
-  it('applies size class to track', () => {
-    const { container } = render(<Progress value={50} size="lg" />);
-    const track = container.querySelector('[class*="track"]');
-    expect(track?.className).toContain('trackLg');
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(<Progress value={60} label="Loading" />);
-    await expectNoA11yViolations(container);
-  });
-});
-
-describe('CircularProgress', () => {
-  it('renders a progressbar role', () => {
-    render(<CircularProgress value={50} aria-label="Loading" />);
-    expect(screen.getByRole('progressbar')).toBeInTheDocument();
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(<CircularProgress value={50} aria-label="Loading" />);
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/Prompt/Prompt.fragment.tsx

@@ -1,242 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Prompt } from '.';
-
-export default defineFragment({
-  component: Prompt,
-
-  meta: {
-    name: 'Prompt',
-    description: 'Multi-line input with toolbar for AI/chat interfaces',
-    category: 'ai',
-    status: 'stable',
-    tags: ['prompt', 'chat', 'ai', 'input', 'textarea', 'form'],
-  },
-
-  usage: {
-    when: [
-      'Building chat or AI assistant interfaces',
-      'Need multi-line input with submit action',
-      'Require toolbar with actions like attachments or model selection',
-    ],
-    whenNot: [
-      'Simple single-line text input (use Input)',
-      'Basic multi-line without toolbar (use Textarea)',
-      'Search-only interface (use Input with search variant)',
-    ],
-    guidelines: [
-      'Always provide an onSubmit handler',
-      'Use loading state during API calls',
-      'Consider showing usage/token limits for AI contexts',
-    ],
-    accessibility: [
-      'Enter submits, Shift+Enter for newline',
-      'Submit button is keyboard accessible',
-      'Loading state prevents duplicate submissions',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'Prompt composition using Prompt sub-components',
-      required: true,
-    },
-    value: {
-      type: 'string',
-      description: 'Controlled input value',
-    },
-    defaultValue: {
-      type: 'string',
-      description: 'Uncontrolled default value',
-    },
-    onChange: {
-      type: 'function',
-      description: 'Called when value changes',
-    },
-    onSubmit: {
-      type: 'function',
-      description: 'Called on form submission',
-    },
-    placeholder: {
-      type: 'string',
-      default: '"Ask, Search or Chat..."',
-      description: 'Placeholder text for the textarea',
-    },
-    disabled: {
-      type: 'boolean',
-      default: 'false',
-      description: 'Disable the entire prompt',
-    },
-    loading: {
-      type: 'boolean',
-      default: 'false',
-      description: 'Show loading state',
-    },
-    minRows: {
-      type: 'number',
-      default: '1',
-      description: 'Minimum number of visible rows',
-    },
-    maxRows: {
-      type: 'number',
-      default: '8',
-      description: 'Maximum number of visible rows',
-    },
-    autoResize: {
-      type: 'boolean',
-      default: 'true',
-      description: 'Enable auto-resize based on content',
-    },
-    submitOnEnter: {
-      type: 'boolean',
-      default: 'true',
-      description: 'Submit on Enter (Shift+Enter for newline)',
-    },
-    variant: {
-      type: 'enum',
-      values: ['default', 'fixed', 'sticky'],
-      default: 'default',
-      description: 'Visual/positioning variant',
-    },
-  },
-
-  relations: [
-    {
-      component: 'Input',
-      relationship: 'alternative',
-      note: 'Use Input for simple single-line text input',
-    },
-    {
-      component: 'Textarea',
-      relationship: 'alternative',
-      note: 'Use Textarea for multi-line without toolbar',
-    },
-  ],
-
-  contract: {
-    propsSummary: [
-      'value: string - controlled input value',
-      'onSubmit: (value: string) => void - submission handler',
-      'placeholder: string - hint text (default: "Ask, Search or Chat...")',
-      'disabled: boolean - disables interaction',
-      'loading: boolean - shows loading state',
-      'minRows/maxRows: number - row constraints (default: 1/8)',
-      'submitOnEnter: boolean - Enter key behavior (default: true)',
-    ],
-    scenarioTags: [
-      'form.prompt',
-      'form.chat',
-      'form.ai',
-      'ui.chat-input',
-    ],
-    a11yRules: [
-      'A11Y_TEXTAREA_LABEL',
-      'A11Y_BUTTON_LABEL',
-    ],
-    bans: [],
-  },
-
-  variants: [
-    {
-      name: 'Basic',
-      description: 'Simple prompt with submit button',
-      render: () => (
-        <Prompt onSubmit={(value) => console.log(value)}>
-          <Prompt.Textarea />
-          <Prompt.Toolbar>
-            <Prompt.Actions />
-            <Prompt.Info>
-              <Prompt.Submit />
-            </Prompt.Info>
-          </Prompt.Toolbar>
-        </Prompt>
-      ),
-    },
-    {
-      name: 'With Actions',
-      description: 'Prompt with attachment and mode buttons',
-      render: () => (
-        <Prompt onSubmit={(value) => console.log(value)}>
-          <Prompt.Textarea />
-          <Prompt.Toolbar>
-            <Prompt.Actions>
-              <Prompt.ActionButton aria-label="Add attachment">
-                +
-              </Prompt.ActionButton>
-              <Prompt.ModeButton>Auto</Prompt.ModeButton>
-            </Prompt.Actions>
-            <Prompt.Info>
-              <Prompt.Submit />
-            </Prompt.Info>
-          </Prompt.Toolbar>
-        </Prompt>
-      ),
-    },
-    {
-      name: 'With Usage',
-      description: 'Shows token usage indicator',
-      render: () => (
-        <Prompt onSubmit={(value) => console.log(value)}>
-          <Prompt.Textarea />
-          <Prompt.Toolbar>
-            <Prompt.Actions>
-              <Prompt.ActionButton aria-label="Add attachment">
-                +
-              </Prompt.ActionButton>
-              <Prompt.ModeButton active>Auto</Prompt.ModeButton>
-            </Prompt.Actions>
-            <Prompt.Info>
-              <Prompt.Usage>52% used</Prompt.Usage>
-              <Prompt.Submit />
-            </Prompt.Info>
-          </Prompt.Toolbar>
-        </Prompt>
-      ),
-    },
-    {
-      name: 'Loading State',
-      description: 'During API submission',
-      render: () => (
-        <Prompt
-          onSubmit={(value) => console.log(value)}
-          loading
-          defaultValue="Tell me about the weather..."
-        >
-          <Prompt.Textarea />
-          <Prompt.Toolbar>
-            <Prompt.Actions>
-              <Prompt.ActionButton aria-label="Add attachment">
-                +
-              </Prompt.ActionButton>
-              <Prompt.ModeButton>Auto</Prompt.ModeButton>
-            </Prompt.Actions>
-            <Prompt.Info>
-              <Prompt.Usage>52% used</Prompt.Usage>
-              <Prompt.Submit />
-            </Prompt.Info>
-          </Prompt.Toolbar>
-        </Prompt>
-      ),
-    },
-    {
-      name: 'Disabled',
-      description: 'Non-interactive prompt',
-      render: () => (
-        <Prompt onSubmit={(value) => console.log(value)} disabled>
-          <Prompt.Textarea />
-          <Prompt.Toolbar>
-            <Prompt.Actions>
-              <Prompt.ActionButton aria-label="Add attachment">
-                +
-              </Prompt.ActionButton>
-            </Prompt.Actions>
-            <Prompt.Info>
-              <Prompt.Submit />
-            </Prompt.Info>
-          </Prompt.Toolbar>
-        </Prompt>
-      ),
-    },
-  ],
-});

package/src/components/Prompt/Prompt.test.tsx

@@ -1,97 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
-import { Prompt } from './index';
-
-function renderPrompt(props: {
-  onSubmit?: (v: string) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  defaultValue?: string;
-  loading?: boolean;
-} = {}) {
-  return render(
-    <Prompt
-      placeholder={props.placeholder ?? 'Ask something...'}
-      onSubmit={props.onSubmit}
-      disabled={props.disabled}
-      defaultValue={props.defaultValue}
-      loading={props.loading}
-    >
-      <Prompt.Textarea />
-      <Prompt.Toolbar>
-        <Prompt.Actions>
-          <Prompt.ActionButton aria-label="Attach file">Attach</Prompt.ActionButton>
-        </Prompt.Actions>
-      </Prompt.Toolbar>
-      <Prompt.Submit />
-    </Prompt>
-  );
-}
-
-describe('Prompt', () => {
-  it('renders a textarea with placeholder', () => {
-    renderPrompt({ placeholder: 'Type here...' });
-    expect(screen.getByPlaceholderText('Type here...')).toBeInTheDocument();
-  });
-
-  it('renders compound sub-components (Toolbar, Actions)', () => {
-    renderPrompt();
-    expect(screen.getByRole('button', { name: /attach file/i })).toBeInTheDocument();
-  });
-
-  it('renders submit button', () => {
-    renderPrompt();
-    expect(screen.getByRole('button', { name: /submit/i })).toBeInTheDocument();
-  });
-
-  it('disables submit when value is empty', () => {
-    renderPrompt();
-    expect(screen.getByRole('button', { name: /submit/i })).toBeDisabled();
-  });
-
-  it('enables submit when user types text', async () => {
-    const user = userEvent.setup();
-    renderPrompt();
-    const textarea = screen.getByPlaceholderText('Ask something...');
-    await user.type(textarea, 'Hello');
-    expect(screen.getByRole('button', { name: /submit/i })).not.toBeDisabled();
-  });
-
-  it('calls onSubmit when submit button is clicked', async () => {
-    const user = userEvent.setup();
-    const handleSubmit = vi.fn();
-    renderPrompt({ onSubmit: handleSubmit, defaultValue: 'Test message' });
-
-    await user.click(screen.getByRole('button', { name: /submit/i }));
-    expect(handleSubmit).toHaveBeenCalledWith('Test message');
-  });
-
-  it('submits on Enter key by default (submitOnEnter)', async () => {
-    const user = userEvent.setup();
-    const handleSubmit = vi.fn();
-    renderPrompt({ onSubmit: handleSubmit });
-
-    const textarea = screen.getByPlaceholderText('Ask something...');
-    await user.type(textarea, 'Hello');
-    await user.keyboard('{Enter}');
-    expect(handleSubmit).toHaveBeenCalledWith('Hello');
-  });
-
-  it('disables all controls when disabled prop is true', () => {
-    renderPrompt({ disabled: true });
-    expect(screen.getByPlaceholderText('Ask something...')).toBeDisabled();
-    expect(screen.getByRole('button', { name: /attach file/i })).toBeDisabled();
-    expect(screen.getByRole('button', { name: /submit/i })).toBeDisabled();
-  });
-
-  it('shows loading spinner icon in submit button when loading', () => {
-    renderPrompt({ loading: true, defaultValue: 'Submitting...' });
-    expect(screen.getByRole('button', { name: /submit/i })).toBeDisabled();
-    expect(screen.getByRole('status', { name: /submitting/i })).toBeInTheDocument();
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = renderPrompt();
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/RadioGroup/RadioGroup.fragment.tsx

@@ -1,194 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { RadioGroup } from '.';
-
-export default defineFragment({
-  component: RadioGroup,
-
-  meta: {
-    name: 'RadioGroup',
-    description: 'Single selection from a list of mutually exclusive options',
-    category: 'forms',
-    status: 'stable',
-    tags: ['form', 'radio', 'selection', 'options'],
-  },
-
-  usage: {
-    when: [
-      'User must select exactly one option from a small set',
-      'Options are mutually exclusive',
-      'All options should be visible at once',
-      '2-5 options available',
-    ],
-    whenNot: [
-      'Multiple selections allowed (use Checkbox group)',
-      'Many options (use Select)',
-      'Binary on/off choice (use Switch)',
-      'Options need to be searchable (use Combobox)',
-    ],
-    guidelines: [
-      'Always have one option pre-selected when possible',
-      'Order options logically (alphabetical, frequency, etc.)',
-      'Keep option labels concise',
-      'Use descriptions for complex options',
-    ],
-    accessibility: [
-      'Group must have an accessible label',
-      'Use arrow keys to navigate between options',
-      'Selected option should be clearly indicated',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'RadioGroup.Item elements',
-      required: true,
-    },
-    value: {
-      type: 'string',
-      description: 'Controlled selected value',
-    },
-    defaultValue: {
-      type: 'string',
-      description: 'Default value (uncontrolled)',
-    },
-    onValueChange: {
-      type: 'function',
-      description: 'Callback when selection changes',
-    },
-    orientation: {
-      type: 'enum',
-      values: ['horizontal', 'vertical'],
-      default: 'vertical',
-      description: 'Layout orientation',
-    },
-    size: {
-      type: 'enum',
-      values: ['sm', 'md', 'lg'],
-      default: 'md',
-      description: 'Size variant',
-    },
-    disabled: {
-      type: 'boolean',
-      default: false,
-      description: 'Disable all options',
-    },
-    label: {
-      type: 'string',
-      description: 'Group label',
-    },
-    error: {
-      type: 'string',
-      description: 'Error message',
-    },
-  },
-
-  relations: [
-    {
-      component: 'Checkbox',
-      relationship: 'alternative',
-      note: 'Use Checkbox for multiple selections',
-    },
-    {
-      component: 'Select',
-      relationship: 'alternative',
-      note: 'Use Select for many options or limited space',
-    },
-    {
-      component: 'Switch',
-      relationship: 'alternative',
-      note: 'Use Switch for binary on/off choices',
-    },
-  ],
-
-  contract: {
-    propsSummary: [
-      'value: string - selected value',
-      'onValueChange: (value: string) => void',
-      'orientation: horizontal|vertical (default: vertical)',
-      'size: sm|md|lg (default: md)',
-      'disabled: boolean - disable all options',
-    ],
-    scenarioTags: [
-      'form.selection',
-      'form.preference',
-      'form.option',
-    ],
-    a11yRules: [
-      'A11Y_RADIO_GROUP',
-      'A11Y_LABEL_REQUIRED',
-      'A11Y_TARGET_SIZE_MIN',
-    ],
-    bans: [],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic radio group with labels',
-      render: () => (
-        <RadioGroup defaultValue="option1" label="Select an option">
-          <RadioGroup.Item value="option1" label="Option 1" />
-          <RadioGroup.Item value="option2" label="Option 2" />
-          <RadioGroup.Item value="option3" label="Option 3" />
-        </RadioGroup>
-      ),
-    },
-    {
-      name: 'With Descriptions',
-      description: 'Radio items with additional context',
-      render: () => (
-        <RadioGroup defaultValue="standard" label="Shipping Method">
-          <RadioGroup.Item
-            value="standard"
-            label="Standard"
-            description="5-7 business days"
-          />
-          <RadioGroup.Item
-            value="express"
-            label="Express"
-            description="2-3 business days"
-          />
-          <RadioGroup.Item
-            value="overnight"
-            label="Overnight"
-            description="Next business day"
-          />
-        </RadioGroup>
-      ),
-    },
-    {
-      name: 'Horizontal',
-      description: 'Side-by-side layout',
-      render: () => (
-        <RadioGroup orientation="horizontal" defaultValue="small" label="Size">
-          <RadioGroup.Item value="small" label="S" />
-          <RadioGroup.Item value="medium" label="M" />
-          <RadioGroup.Item value="large" label="L" />
-          <RadioGroup.Item value="xlarge" label="XL" />
-        </RadioGroup>
-      ),
-    },
-    {
-      name: 'With Error',
-      description: 'Validation error state',
-      render: () => (
-        <RadioGroup label="Required selection" error="Please select an option">
-          <RadioGroup.Item value="a" label="Option A" />
-          <RadioGroup.Item value="b" label="Option B" />
-        </RadioGroup>
-      ),
-    },
-    {
-      name: 'Disabled',
-      description: 'Non-interactive state',
-      render: () => (
-        <RadioGroup disabled defaultValue="locked" label="Locked selection">
-          <RadioGroup.Item value="locked" label="This is locked" />
-          <RadioGroup.Item value="other" label="Cannot select" />
-        </RadioGroup>
-      ),
-    },
-  ],
-});

package/src/components/RadioGroup/RadioGroup.test.tsx

@@ -1,105 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
-import { RadioGroup } from './index';
-
-describe('RadioGroup', () => {
-  it('renders a radiogroup role', () => {
-    render(
-      <RadioGroup label="Color">
-        <RadioGroup.Item value="red" label="Red" />
-        <RadioGroup.Item value="blue" label="Blue" />
-      </RadioGroup>
-    );
-    expect(screen.getByRole('radiogroup')).toBeInTheDocument();
-  });
-
-  it('renders radio items', () => {
-    render(
-      <RadioGroup label="Color">
-        <RadioGroup.Item value="red" label="Red" />
-        <RadioGroup.Item value="blue" label="Blue" />
-      </RadioGroup>
-    );
-    expect(screen.getAllByRole('radio')).toHaveLength(2);
-  });
-
-  it('selects a radio on click', async () => {
-    const user = userEvent.setup();
-    render(
-      <RadioGroup label="Color">
-        <RadioGroup.Item value="red" label="Red" />
-        <RadioGroup.Item value="blue" label="Blue" />
-      </RadioGroup>
-    );
-    const radios = screen.getAllByRole('radio');
-    await user.click(radios[1]);
-    expect(radios[1]).toBeChecked();
-  });
-
-  it('renders the group label', () => {
-    render(
-      <RadioGroup label="Choose a color">
-        <RadioGroup.Item value="red" label="Red" />
-      </RadioGroup>
-    );
-    expect(screen.getByText('Choose a color')).toBeInTheDocument();
-  });
-
-  it('sets defaultValue as the initially selected radio', () => {
-    render(
-      <RadioGroup label="Color" defaultValue="blue">
-        <RadioGroup.Item value="red" label="Red" />
-        <RadioGroup.Item value="blue" label="Blue" />
-      </RadioGroup>
-    );
-    const radios = screen.getAllByRole('radio');
-    expect(radios[1]).toBeChecked();
-  });
-
-  it('disables all items when disabled prop is set', () => {
-    render(
-      <RadioGroup label="Color" disabled>
-        <RadioGroup.Item value="red" label="Red" />
-        <RadioGroup.Item value="blue" label="Blue" />
-      </RadioGroup>
-    );
-    const radios = screen.getAllByRole('radio');
-    radios.forEach((radio) => expect(radio).toHaveAttribute('aria-disabled', 'true'));
-  });
-
-  it('disables individual items', () => {
-    render(
-      <RadioGroup label="Color">
-        <RadioGroup.Item value="red" label="Red" disabled />
-        <RadioGroup.Item value="blue" label="Blue" />
-      </RadioGroup>
-    );
-    const radios = screen.getAllByRole('radio');
-    expect(radios[0]).toHaveAttribute('aria-disabled', 'true');
-    expect(radios[1]).not.toHaveAttribute('aria-disabled', 'true');
-  });
-
-  it('calls onValueChange with the selected value', async () => {
-    const handleChange = vi.fn();
-    const user = userEvent.setup();
-    render(
-      <RadioGroup label="Color" onValueChange={handleChange}>
-        <RadioGroup.Item value="red" label="Red" />
-        <RadioGroup.Item value="blue" label="Blue" />
-      </RadioGroup>
-    );
-    await user.click(screen.getAllByRole('radio')[0]);
-    expect(handleChange).toHaveBeenCalled();
-    expect(handleChange.mock.calls[0][0]).toBe('red');
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(
-      <RadioGroup label="Accessible group">
-        <RadioGroup.Item value="a" label="Option A" />
-        <RadioGroup.Item value="b" label="Option B" />
-      </RadioGroup>
-    );
-    await expectNoA11yViolations(container);
-  });
-});