@fragments-sdk/ui 0.13.0 → 0.15.1

package/src/components/Collapsible/Collapsible.fragment.tsx

@@ -1,199 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Collapsible } from '.';
-
-export default defineFragment({
-  component: Collapsible,
-
-  meta: {
-    name: 'Collapsible',
-    description: 'An interactive component that expands/collapses to show or hide content',
-    category: 'layout',
-    status: 'stable',
-    tags: ['collapsible', 'expandable', 'accordion', 'disclosure', 'toggle'],
-  },
-
-  usage: {
-    when: [
-      'Showing/hiding additional content on demand',
-      'Building accordions or expandable sections',
-      'Collapsible navigation sections',
-      'FAQ sections with expandable answers',
-      'Settings panels with grouped options',
-    ],
-    whenNot: [
-      'Single item disclosure (use Accordion instead)',
-      'Navigation menus with complex interactions (use Menu)',
-      'Modal or overlay content (use Dialog or Popover)',
-    ],
-    guidelines: [
-      'Use clear trigger labels that indicate expandable content',
-      'Consider defaultOpen for primary content users often need',
-      'Keep trigger text concise but descriptive',
-      'Use chevron icons consistently to indicate collapsible state',
-    ],
-    accessibility: [
-      'Trigger must have aria-expanded to indicate state',
-      'Content region needs aria-labelledby pointing to trigger',
-      'Keyboard: Enter/Space toggles open state',
-      'Focus should remain on trigger after toggle',
-    ],
-  },
-
-  props: {
-    defaultOpen: {
-      type: 'boolean',
-      default: false,
-      description: 'Whether the collapsible is initially open (uncontrolled)',
-    },
-    open: {
-      type: 'boolean',
-      description: 'Controlled open state',
-    },
-    onOpenChange: {
-      type: 'function',
-      description: 'Callback when open state changes - (open: boolean) => void',
-    },
-    disabled: {
-      type: 'boolean',
-      default: false,
-      description: 'Whether the collapsible is disabled',
-    },
-    children: {
-      type: 'node',
-      required: true,
-      description: 'Collapsible.Trigger and Collapsible.Content components',
-    },
-  },
-
-  relations: [
-    {
-      component: 'Accordion',
-      relationship: 'alternative',
-      note: 'Use Accordion for multiple exclusive collapsible sections',
-    },
-    {
-      component: 'Sidebar',
-      relationship: 'used-by',
-      note: 'Sidebar uses Collapsible for section expand/collapse',
-    },
-    {
-      component: 'Menu',
-      relationship: 'alternative',
-      note: 'Use Menu for dropdown navigation with actions',
-    },
-  ],
-
-  contract: {
-    propsSummary: [
-      'defaultOpen: boolean - initial open state (default: false)',
-      'open: boolean - controlled open state',
-      'onOpenChange: (open: boolean) => void - state change callback',
-      'disabled: boolean - prevents interaction',
-    ],
-    scenarioTags: [
-      'disclosure.expandable',
-      'navigation.collapsible',
-      'content.toggle',
-    ],
-    a11yRules: [
-      'A11Y_EXPANDED_STATE',
-      'A11Y_REGION_LABEL',
-      'A11Y_KEYBOARD_NAV',
-    ],
-    bans: [],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic collapsible with trigger and content',
-      render: () => (
-        <Collapsible>
-          <Collapsible.Trigger>Click to expand</Collapsible.Trigger>
-          <Collapsible.Content>
-            <p>This content is hidden by default and revealed when the trigger is clicked.</p>
-          </Collapsible.Content>
-        </Collapsible>
-      ),
-    },
-    {
-      name: 'Default Open',
-      description: 'Collapsible that starts in the expanded state',
-      render: () => (
-        <Collapsible defaultOpen>
-          <Collapsible.Trigger>Section Title</Collapsible.Trigger>
-          <Collapsible.Content>
-            <p>This content is visible by default. Click the trigger to collapse.</p>
-          </Collapsible.Content>
-        </Collapsible>
-      ),
-    },
-    {
-      name: 'Chevron Start',
-      description: 'Collapsible with chevron icon on the left',
-      render: () => (
-        <Collapsible>
-          <Collapsible.Trigger chevronPosition="start">Navigation</Collapsible.Trigger>
-          <Collapsible.Content>
-            <ul style={{ margin: 0, paddingLeft: '1.5rem' }}>
-              <li>Dashboard</li>
-              <li>Settings</li>
-              <li>Profile</li>
-            </ul>
-          </Collapsible.Content>
-        </Collapsible>
-      ),
-    },
-    {
-      name: 'No Chevron',
-      description: 'Collapsible without chevron indicator',
-      render: () => (
-        <Collapsible>
-          <Collapsible.Trigger showChevron={false}>Show more details</Collapsible.Trigger>
-          <Collapsible.Content>
-            <p>Hidden details that appear when triggered.</p>
-          </Collapsible.Content>
-        </Collapsible>
-      ),
-    },
-    {
-      name: 'Disabled',
-      description: 'Collapsible in disabled state',
-      render: () => (
-        <Collapsible disabled>
-          <Collapsible.Trigger>Cannot toggle (disabled)</Collapsible.Trigger>
-          <Collapsible.Content>
-            <p>This content cannot be shown because the collapsible is disabled.</p>
-          </Collapsible.Content>
-        </Collapsible>
-      ),
-    },
-    {
-      name: 'Multiple Sections',
-      description: 'Multiple independent collapsible sections',
-      render: () => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-          <Collapsible defaultOpen>
-            <Collapsible.Trigger>Getting Started</Collapsible.Trigger>
-            <Collapsible.Content>
-              <p>Introduction and setup instructions.</p>
-            </Collapsible.Content>
-          </Collapsible>
-          <Collapsible>
-            <Collapsible.Trigger>Advanced Usage</Collapsible.Trigger>
-            <Collapsible.Content>
-              <p>Advanced configuration options.</p>
-            </Collapsible.Content>
-          </Collapsible>
-          <Collapsible>
-            <Collapsible.Trigger>API Reference</Collapsible.Trigger>
-            <Collapsible.Content>
-              <p>Complete API documentation.</p>
-            </Collapsible.Content>
-          </Collapsible>
-        </div>
-      ),
-    },
-  ],
-});

package/src/components/Collapsible/Collapsible.test.tsx

@@ -1,144 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
-import { Collapsible } from './index';
-
-function renderCollapsible(props: Partial<React.ComponentProps<typeof Collapsible>> = {}) {
-  return render(
-    <Collapsible {...props}>
-      <Collapsible.Trigger>Toggle</Collapsible.Trigger>
-      <Collapsible.Content>Collapsible content here</Collapsible.Content>
-    </Collapsible>
-  );
-}
-
-describe('Collapsible', () => {
-  it('renders the trigger', () => {
-    renderCollapsible();
-    expect(screen.getByRole('button', { name: /toggle/i })).toBeInTheDocument();
-  });
-
-  it('opens content when trigger is clicked', async () => {
-    const user = userEvent.setup();
-    renderCollapsible();
-
-    expect(screen.queryByText('Collapsible content here')).not.toBeInTheDocument();
-
-    await user.click(screen.getByRole('button', { name: /toggle/i }));
-    expect(screen.getByText('Collapsible content here')).toBeInTheDocument();
-  });
-
-  it('closes content when trigger is clicked again', async () => {
-    const user = userEvent.setup();
-    renderCollapsible({ defaultOpen: true });
-
-    expect(screen.getByText('Collapsible content here')).toBeInTheDocument();
-
-    await user.click(screen.getByRole('button', { name: /toggle/i }));
-    expect(screen.queryByText('Collapsible content here')).not.toBeInTheDocument();
-  });
-
-  it('sets aria-expanded on the trigger', async () => {
-    const user = userEvent.setup();
-    renderCollapsible();
-
-    const trigger = screen.getByRole('button', { name: /toggle/i });
-    expect(trigger).toHaveAttribute('aria-expanded', 'false');
-
-    await user.click(trigger);
-    expect(trigger).toHaveAttribute('aria-expanded', 'true');
-  });
-
-  it('links trigger aria-controls to content id', () => {
-    renderCollapsible({ defaultOpen: true });
-    const trigger = screen.getByRole('button', { name: /toggle/i });
-    const contentId = trigger.getAttribute('aria-controls');
-    expect(contentId).toBeTruthy();
-    expect(document.getElementById(contentId!)).toBeInTheDocument();
-  });
-
-  it('supports controlled open prop', () => {
-    const { rerender } = render(
-      <Collapsible open={false}>
-        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
-        <Collapsible.Content>Content</Collapsible.Content>
-      </Collapsible>
-    );
-
-    expect(screen.queryByText('Content')).not.toBeInTheDocument();
-
-    rerender(
-      <Collapsible open={true}>
-        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
-        <Collapsible.Content>Content</Collapsible.Content>
-      </Collapsible>
-    );
-
-    expect(screen.getByText('Content')).toBeInTheDocument();
-  });
-
-  it('fires onOpenChange callback', async () => {
-    const onOpenChange = vi.fn();
-    const user = userEvent.setup();
-    renderCollapsible({ onOpenChange });
-
-    await user.click(screen.getByRole('button', { name: /toggle/i }));
-    expect(onOpenChange).toHaveBeenCalledWith(true);
-  });
-
-  it('does not toggle when disabled', async () => {
-    const user = userEvent.setup();
-    renderCollapsible({ disabled: true });
-
-    const trigger = screen.getByRole('button', { name: /toggle/i });
-    expect(trigger).toBeDisabled();
-
-    await user.click(trigger);
-    expect(screen.queryByText('Collapsible content here')).not.toBeInTheDocument();
-  });
-
-  it('composes child handlers when trigger uses asChild', async () => {
-    const user = userEvent.setup();
-    const childClick = vi.fn();
-    const childKeyDown = vi.fn();
-
-    render(
-      <Collapsible>
-        <Collapsible.Trigger asChild>
-          <button onClick={childClick} onKeyDown={childKeyDown}>Toggle</button>
-        </Collapsible.Trigger>
-        <Collapsible.Content>Collapsible content here</Collapsible.Content>
-      </Collapsible>
-    );
-
-    const trigger = screen.getByRole('button', { name: /toggle/i });
-    await user.click(trigger);
-    expect(childClick).toHaveBeenCalled();
-    expect(screen.getByText('Collapsible content here')).toBeInTheDocument();
-
-    await user.keyboard('{Enter}');
-    expect(childKeyDown).toHaveBeenCalled();
-  });
-
-  it('forwards html props to root, trigger, and content', async () => {
-    const user = userEvent.setup();
-    render(
-      <Collapsible data-testid="root" data-track="collapsible-root">
-        <Collapsible.Trigger data-testid="trigger" aria-label="Toggle section">Toggle</Collapsible.Trigger>
-        <Collapsible.Content data-testid="content" data-panel="details">
-          Collapsible content here
-        </Collapsible.Content>
-      </Collapsible>
-    );
-
-    await user.click(screen.getByTestId('trigger'));
-
-    expect(screen.getByTestId('root')).toHaveAttribute('data-track', 'collapsible-root');
-    expect(screen.getByTestId('trigger')).toHaveAttribute('aria-label', 'Toggle section');
-    expect(screen.getByTestId('content')).toHaveAttribute('data-panel', 'details');
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = renderCollapsible({ defaultOpen: true });
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/ColorPicker/ColorPicker.fragment.tsx

@@ -1,201 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { ColorPicker } from '.';
-
-function ControlledColorPickerDemo() {
-  const [color, setColor] = React.useState('#ef4444');
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-      <ColorPicker
-        label="Accent Color"
-        value={color}
-        onChange={setColor}
-      />
-      <div style={{ fontSize: '14px', color: 'var(--fui-text-secondary)' }}>
-        Selected: {color}
-      </div>
-    </div>
-  );
-}
-
-export default defineFragment({
-  component: ColorPicker,
-
-  meta: {
-    name: 'ColorPicker',
-    description: 'Color selection control with hex input and visual picker. Displays a swatch that opens a full color picker on click.',
-    category: 'forms',
-    status: 'stable',
-    tags: ['color', 'picker', 'input', 'hex', 'swatch', 'theme'],
-    since: '0.2.0',
-    dependencies: [
-      { name: 'react-colorful', version: '>=5.0.0', reason: 'Color picker widget' },
-    ],
-  },
-
-  usage: {
-    when: [
-      'Theme customization interfaces',
-      'Brand color selection',
-      'Design tool color inputs',
-      'User preference settings for colors',
-    ],
-    whenNot: [
-      'Predefined color options only (use RadioGroup with swatches)',
-      'Simple color display without editing (use a colored Badge)',
-      'Color indication only (use semantic color tokens)',
-    ],
-    guidelines: [
-      'Always provide a label to describe what the color is for',
-      'Use description to explain color usage or constraints',
-      'Consider providing color presets alongside the picker for common choices',
-      'Validate hex format (#RRGGBB) on input',
-    ],
-    accessibility: [
-      'Label is associated with the color input',
-      'Swatch button has appropriate aria-label',
-      'Color picker popup is keyboard accessible',
-      'Hex input allows direct text entry',
-    ],
-  },
-
-  props: {
-    value: {
-      type: 'string',
-      description: 'Controlled color value in hex format (#RRGGBB)',
-    },
-    defaultValue: {
-      type: 'string',
-      description: 'Default color for uncontrolled usage',
-      default: '#000000',
-    },
-    onChange: {
-      type: 'function',
-      description: 'Called with new color value when changed',
-    },
-    label: {
-      type: 'string',
-      description: 'Label text above the picker',
-    },
-    description: {
-      type: 'string',
-      description: 'Helper text below the picker',
-    },
-    disabled: {
-      type: 'boolean',
-      description: 'Disable the color picker',
-      default: 'false',
-    },
-    size: {
-      type: 'enum',
-      description: 'Size variant',
-      values: ['sm', 'md'],
-      default: 'md',
-    },
-    showInput: {
-      type: 'boolean',
-      description: 'Show the hex input field',
-      default: 'true',
-    },
-  },
-
-  relations: [
-    { component: 'Input', relationship: 'sibling', note: 'ColorPicker is a specialized input for colors' },
-    { component: 'RadioGroup', relationship: 'alternative', note: 'Use RadioGroup for predefined color choices' },
-    { component: 'Field', relationship: 'parent', note: 'ColorPicker uses Field internally for structure' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'value: string - controlled hex color (#RRGGBB)',
-      'defaultValue: string - initial color for uncontrolled usage',
-      'onChange: (color: string) => void - change handler',
-      'label: string - field label',
-      'description: string - helper text',
-      'disabled: boolean - disable interaction',
-      'size: sm|md - size variant',
-      'showInput: boolean - show hex input field',
-    ],
-    scenarioTags: [
-      'forms.color',
-      'input.specialized',
-      'theme.customization',
-    ],
-    a11yRules: ['A11Y_LABEL_REQUIRED', 'A11Y_FOCUS_VISIBLE', 'A11Y_TARGET_SIZE_MIN'],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic color picker with label',
-      render: () => (
-        <ColorPicker
-          label="Brand Color"
-          defaultValue="#3b82f6"
-        />
-      ),
-    },
-    {
-      name: 'With Description',
-      description: 'Color picker with helper text',
-      render: () => (
-        <ColorPicker
-          label="Primary Color"
-          defaultValue="#10b981"
-          description="This color will be used for buttons and links"
-        />
-      ),
-    },
-    {
-      name: 'Controlled',
-      description: 'Controlled color picker that logs changes',
-      render: () => <ControlledColorPickerDemo />,
-    },
-    {
-      name: 'Multiple Pickers',
-      description: 'Multiple color pickers for theme configuration',
-      render: () => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '240px' }}>
-          <ColorPicker label="Primary" defaultValue="#3b82f6" />
-          <ColorPicker label="Success" defaultValue="#22c55e" />
-          <ColorPicker label="Warning" defaultValue="#f59e0b" />
-          <ColorPicker label="Danger" defaultValue="#ef4444" />
-        </div>
-      ),
-    },
-    {
-      name: 'Compact',
-      description: 'Small size with swatch only (no input)',
-      render: () => (
-        <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-          <ColorPicker defaultValue="#ef4444" size="sm" showInput={false} />
-          <ColorPicker defaultValue="#f59e0b" size="sm" showInput={false} />
-          <ColorPicker defaultValue="#22c55e" size="sm" showInput={false} />
-          <ColorPicker defaultValue="#3b82f6" size="sm" showInput={false} />
-        </div>
-      ),
-    },
-    {
-      name: 'Sizes',
-      description: 'Different size variants',
-      render: () => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '240px' }}>
-          <ColorPicker label="Small" defaultValue="#3b82f6" size="sm" />
-          <ColorPicker label="Medium (default)" defaultValue="#3b82f6" size="md" />
-        </div>
-      ),
-    },
-    {
-      name: 'Disabled',
-      description: 'Disabled color picker',
-      render: () => (
-        <ColorPicker
-          label="Locked Color"
-          defaultValue="#64748b"
-          description="This color cannot be changed"
-          disabled
-        />
-      ),
-    },
-  ],
-});

package/src/components/ColorPicker/ColorPicker.test.tsx

@@ -1,55 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
-import { ColorPicker } from './index';
-
-// Mock react-colorful to avoid canvas rendering issues in jsdom
-vi.mock('react-colorful', () => ({
-  HexColorPicker: ({ color, onChange }: { color: string; onChange: (c: string) => void }) => (
-    <div data-testid="hex-picker" data-color={color} onClick={() => onChange('#ff0000')}>
-      Mock Picker
-    </div>
-  ),
-}));
-
-describe('ColorPicker', () => {
-  it('renders with a label', () => {
-    render(<ColorPicker label="Brand Color" />);
-    expect(screen.getByText('Brand Color')).toBeInTheDocument();
-  });
-
-  it('renders the color swatch trigger', () => {
-    render(<ColorPicker label="Color" />);
-    expect(screen.getByRole('button', { name: /edit color color/i })).toBeInTheDocument();
-  });
-
-  it('renders the hex input field when showInput is true', () => {
-    render(<ColorPicker label="Color" showInput />);
-    expect(screen.getByRole('textbox', { name: /hex value/i })).toBeInTheDocument();
-  });
-
-  it('hides the hex input when showInput is false', () => {
-    render(<ColorPicker label="Color" showInput={false} />);
-    expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
-  });
-
-  it('calls onChange when color changes via hex input', async () => {
-    const user = userEvent.setup();
-    const handleChange = vi.fn();
-    render(<ColorPicker label="Color" onChange={handleChange} defaultValue="#000000" />);
-
-    const input = screen.getByRole('textbox', { name: /hex value/i });
-    await user.clear(input);
-    await user.type(input, '#ff5500');
-    expect(handleChange).toHaveBeenCalledWith('#ff5500');
-  });
-
-  it('renders description text', () => {
-    render(<ColorPicker label="Color" description="Choose a brand color" />);
-    expect(screen.getByText('Choose a brand color')).toBeInTheDocument();
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(<ColorPicker label="Brand Color" />);
-    await expectNoA11yViolations(container);
-  });
-});