@fragments-sdk/ui 0.14.0 → 0.15.1

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

@@ -1,224 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/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',
-    },
-    onChange: {
-      type: 'function',
-      description: 'Alias for onValueChange',
-    },
-    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',
-    },
-    wrapperClassName: {
-      type: 'string',
-      description: 'Class name for the outer wrapper element',
-    },
-    groupClassName: {
-      type: 'string',
-      description: 'Class name for the inner radio group element',
-    },
-  },
-
-  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',
-      'onChange: (value: string) => void - alias for onValueChange',
-      'orientation: horizontal|vertical (default: vertical)',
-      'size: sm|md|lg (default: md)',
-      'disabled: boolean - disable all options',
-      'wrapperClassName/groupClassName - explicit styling targets for wrapper and group',
-      'RadioGroup.Item supports controlClassName/contentClassName for item-level styling',
-    ],
-    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>
-      ),
-    },
-    {
-      name: 'Styling Targets',
-      description: 'Use explicit class names for wrapper/group/item styling hooks',
-      render: () => (
-        <RadioGroup
-          defaultValue="a"
-          label="Display mode"
-          wrapperClassName="demo-radio-wrapper"
-          groupClassName="demo-radio-group"
-        >
-          <RadioGroup.Item value="a" label="Compact" controlClassName="demo-radio-control" contentClassName="demo-radio-content" />
-          <RadioGroup.Item value="b" label="Comfortable" />
-        </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);
-  });
-});

package/src/components/ScrollArea/ScrollArea.fragment.tsx

@@ -1,185 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/core';
-import { ScrollArea } from '.';
-
-const tags = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5', 'Tag 6', 'Tag 7', 'Tag 8', 'Tag 9', 'Tag 10', 'Tag 11', 'Tag 12', 'Tag 13', 'Tag 14', 'Tag 15'];
-
-export default defineFragment({
-  component: ScrollArea,
-
-  meta: {
-    name: 'ScrollArea',
-    description: 'A styled scrollable container with thin scrollbars and optional fade indicators.',
-    category: 'layout',
-    status: 'stable',
-    tags: ['scroll', 'overflow', 'scrollbar', 'container', 'layout'],
-    since: '0.4.0',
-  },
-
-  usage: {
-    when: [
-      'Content overflows its container and needs scrolling',
-      'Horizontal tab bars or chip lists that may overflow',
-      'Scrollable panels, sidebars, or dropdown content',
-      'Any area where native scrollbars look too heavy',
-    ],
-    whenNot: [
-      'Page-level scrolling (use native body scroll)',
-      'Very short content that never overflows',
-    ],
-    guidelines: [
-      'Use `orientation` to constrain scroll direction',
-      'Use `showFades` to hint at hidden content beyond the viewport',
-      'The `hover` scrollbar visibility keeps the UI clean until the user interacts',
-      'Combine with `orientation="horizontal"` for tab bars and chip rows',
-    ],
-    accessibility: [
-      'Preserves native scroll behavior and keyboard support',
-      'Scrollbar is visible on focus for keyboard users',
-      'Respects prefers-reduced-motion for fade transitions',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'Scrollable content',
-      required: true,
-    },
-    orientation: {
-      type: 'enum',
-      description: 'Scroll direction',
-      values: ['horizontal', 'vertical', 'both'],
-      default: 'vertical',
-    },
-    scrollbarVisibility: {
-      type: 'enum',
-      description: 'When to show the scrollbar',
-      values: ['auto', 'always', 'hover'],
-      default: 'auto',
-    },
-    showFades: {
-      type: 'boolean',
-      description: 'Show gradient fade indicators at scroll edges',
-      default: false,
-    },
-  },
-
-  contract: {
-    propsSummary: [
-      'orientation: horizontal|vertical|both - scroll direction',
-      'scrollbarVisibility: auto|always|hover - scrollbar display mode',
-      'showFades: boolean - gradient edge indicators',
-    ],
-    scenarioTags: ['layout.scroll', 'container.scroll'],
-    a11yRules: [],
-  },
-
-  ai: {
-    compositionPattern: 'wrapper',
-    requiredChildren: [],
-    commonPatterns: [
-      '<ScrollArea orientation="horizontal"><div style={{ display: "flex", gap: 8 }}>{items}</div></ScrollArea>',
-      '<ScrollArea style={{ height: 300 }}>{longContent}</ScrollArea>',
-    ],
-  },
-
-  variants: [
-    {
-      name: 'Vertical',
-      description: 'Vertical scrollable area with thin scrollbar.',
-      code: `<ScrollArea style={{ height: '200px' }}>
-  {/* Long content */}
-</ScrollArea>`,
-      render: () => (
-        <div style={{ height: '200px', width: '300px', border: '1px solid var(--fui-border)' }}>
-          <ScrollArea style={{ height: '200px' }}>
-            <div style={{ padding: '16px' }}>
-              {Array.from({ length: 20 }).map((_, i) => (
-                <p key={i} style={{ margin: '0 0 12px', color: 'var(--fui-text-secondary)', fontSize: '14px' }}>
-                  Item {i + 1} — Lorem ipsum dolor sit amet
-                </p>
-              ))}
-            </div>
-          </ScrollArea>
-        </div>
-      ),
-    },
-    {
-      name: 'Horizontal',
-      description: 'Horizontal scrollable area for overflowing inline content like tabs or chips.',
-      code: `<ScrollArea orientation="horizontal">
-  <div style={{ display: 'flex', gap: '8px' }}>
-    {tags.map(tag => <Chip key={tag}>{tag}</Chip>)}
-  </div>
-</ScrollArea>`,
-      render: () => (
-        <div style={{ width: '400px', border: '1px solid var(--fui-border)', borderRadius: '8px' }}>
-          <ScrollArea orientation="horizontal">
-            <div style={{ display: 'flex', gap: '8px', padding: '12px', whiteSpace: 'nowrap' }}>
-              {tags.map(tag => (
-                <span key={tag} style={{
-                  padding: '4px 12px',
-                  borderRadius: '16px',
-                  backgroundColor: 'var(--fui-bg-secondary)',
-                  color: 'var(--fui-text-secondary)',
-                  fontSize: '13px',
-                  flexShrink: 0,
-                }}>
-                  {tag}
-                </span>
-              ))}
-            </div>
-          </ScrollArea>
-        </div>
-      ),
-    },
-    {
-      name: 'With Fades',
-      description: 'Fade indicators show when content is scrollable in either direction.',
-      code: `<ScrollArea orientation="horizontal" showFades>
-  {/* Overflowing content */}
-</ScrollArea>`,
-      render: () => (
-        <div style={{ width: '400px', border: '1px solid var(--fui-border)', borderRadius: '8px' }}>
-          <ScrollArea orientation="horizontal" showFades>
-            <div style={{ display: 'flex', gap: '8px', padding: '12px', whiteSpace: 'nowrap' }}>
-              {tags.map(tag => (
-                <span key={tag} style={{
-                  padding: '4px 12px',
-                  borderRadius: '16px',
-                  backgroundColor: 'var(--fui-bg-secondary)',
-                  color: 'var(--fui-text-secondary)',
-                  fontSize: '13px',
-                  flexShrink: 0,
-                }}>
-                  {tag}
-                </span>
-              ))}
-            </div>
-          </ScrollArea>
-        </div>
-      ),
-    },
-    {
-      name: 'Hover Scrollbar',
-      description: 'Scrollbar is hidden until the user hovers over the scroll area.',
-      code: `<ScrollArea scrollbarVisibility="hover" style={{ height: '200px' }}>
-  {/* Content */}
-</ScrollArea>`,
-      render: () => (
-        <div style={{ height: '200px', width: '300px', border: '1px solid var(--fui-border)' }}>
-          <ScrollArea scrollbarVisibility="hover" style={{ height: '200px' }}>
-            <div style={{ padding: '16px' }}>
-              {Array.from({ length: 20 }).map((_, i) => (
-                <p key={i} style={{ margin: '0 0 12px', color: 'var(--fui-text-secondary)', fontSize: '14px' }}>
-                  Item {i + 1} — Hover to reveal scrollbar
-                </p>
-              ))}
-            </div>
-          </ScrollArea>
-        </div>
-      ),
-    },
-  ],
-});

package/src/components/ScrollArea/ScrollArea.test.tsx

@@ -1,38 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { ScrollArea } from '.';
-
-describe('ScrollArea', () => {
-  it('renders children', () => {
-    render(<ScrollArea>Test content</ScrollArea>);
-    expect(screen.getByText('Test content')).toBeInTheDocument();
-  });
-
-  it('sets data-orientation attribute', () => {
-    const { container } = render(
-      <ScrollArea orientation="horizontal">Content</ScrollArea>
-    );
-    expect(container.firstChild).toHaveAttribute('data-orientation', 'horizontal');
-  });
-
-  it('defaults to vertical orientation', () => {
-    const { container } = render(<ScrollArea>Content</ScrollArea>);
-    expect(container.firstChild).toHaveAttribute('data-orientation', 'vertical');
-  });
-
-  it('passes through HTML attributes', () => {
-    render(
-      <ScrollArea data-testid="scroll-area" style={{ height: '200px' }}>
-        Content
-      </ScrollArea>
-    );
-    expect(screen.getByTestId('scroll-area')).toBeInTheDocument();
-  });
-
-  it('applies custom className', () => {
-    const { container } = render(
-      <ScrollArea className="custom-class">Content</ScrollArea>
-    );
-    expect(container.firstChild).toHaveClass('custom-class');
-  });
-});