@fragments-sdk/ui 0.13.0 → 0.15.1

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

@@ -1,185 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/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');
-  });
-});

package/src/components/Select/Select.fragment.tsx

@@ -1,238 +0,0 @@
-import React, { useState } from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Select } from '.';
-
-// Stateful wrapper for interactive demos
-function StatefulSelect(props: React.ComponentProps<typeof Select> & {
-  children: React.ReactNode;
-  initialValue?: string;
-}) {
-  const { initialValue, children, ...rest } = props;
-  const [value, setValue] = useState<string | null>(initialValue ?? null);
-  return (
-    <Select {...rest} value={value} onValueChange={setValue}>
-      {children}
-    </Select>
-  );
-}
-
-export default defineFragment({
-  component: Select,
-
-  meta: {
-    name: 'Select',
-    description: 'Dropdown for choosing from a list of options. Use when there are more than 4-5 choices that would clutter the UI.',
-    category: 'forms',
-    status: 'stable',
-    tags: ['select', 'dropdown', 'form', 'options', 'picker'],
-    since: '0.1.0',
-  },
-
-  usage: {
-    when: [
-      'Choosing from a predefined list of options',
-      'More than 4-5 options that would clutter UI as radio buttons',
-      'Space-constrained forms',
-      'When users need to see all options at once',
-    ],
-    whenNot: [
-      'Very few options (2-3) - use radio buttons',
-      'Users might type custom values - use Combobox',
-      'Multiple selections needed - use Checkbox group or MultiSelect',
-      'Actions, not selection - use Menu',
-    ],
-    guidelines: [
-      'Include a placeholder that explains what to select',
-      'Group related options with SelectGroup',
-      'Keep option text concise',
-      'Order options logically (alphabetical, by frequency, or by category)',
-    ],
-    accessibility: [
-      'Full keyboard navigation support',
-      'Type-ahead search within options',
-      'Proper ARIA roles and attributes',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'Select trigger and content',
-      required: true,
-    },
-    value: {
-      type: 'string',
-      description: 'Controlled selected value',
-    },
-    defaultValue: {
-      type: 'string',
-      description: 'Default selected value (uncontrolled)',
-    },
-    onValueChange: {
-      type: 'function',
-      description: 'Called when selection changes',
-    },
-    open: {
-      type: 'boolean',
-      description: 'Controlled open state of the dropdown',
-    },
-    defaultOpen: {
-      type: 'boolean',
-      description: 'Initial open state for uncontrolled usage',
-      default: 'false',
-    },
-    onOpenChange: {
-      type: 'function',
-      description: 'Called when dropdown open state changes',
-    },
-    placeholder: {
-      type: 'string',
-      description: 'Placeholder text when no value selected',
-    },
-    disabled: {
-      type: 'boolean',
-      description: 'Disable the select',
-      default: 'false',
-    },
-  },
-
-  relations: [
-    { component: 'Menu', relationship: 'alternative', note: 'Use Menu for action-based dropdowns' },
-    { component: 'Input', relationship: 'sibling', note: 'Use Input for free-form text entry' },
-    { component: 'Checkbox', relationship: 'alternative', note: 'Use Checkbox group for multiple selections' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'value: string - controlled selected value',
-      'onValueChange: (value) => void - selection handler',
-      'placeholder: string - placeholder text',
-      'disabled: boolean - disable select',
-      'maxVisibleItems: number - max visible options before scrolling (default 4)',
-    ],
-    scenarioTags: [
-      'form.select',
-      'form.dropdown',
-      'input.options',
-    ],
-    a11yRules: ['A11Y_SELECT_KEYBOARD', 'A11Y_SELECT_LABEL'],
-  },
-
-  ai: {
-    compositionPattern: 'compound',
-    subComponents: ['Trigger', 'Content', 'Item', 'Group', 'GroupLabel'],
-    requiredChildren: ['Trigger', 'Content'],
-    commonPatterns: [
-      '<Select placeholder="Select option"><Select.Trigger /><Select.Content><Select.Item value="opt1">{label1}</Select.Item><Select.Item value="opt2">{label2}</Select.Item></Select.Content></Select>',
-    ],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic select dropdown',
-      render: () => (
-        <StatefulSelect placeholder="Select a fruit">
-          <Select.Trigger />
-          <Select.Content>
-            <Select.Item value="apple">Apple</Select.Item>
-            <Select.Item value="banana">Banana</Select.Item>
-            <Select.Item value="orange">Orange</Select.Item>
-            <Select.Item value="grape">Grape</Select.Item>
-          </Select.Content>
-        </StatefulSelect>
-      ),
-    },
-    {
-      name: 'With Groups',
-      description: 'Options organized into groups',
-      render: () => (
-        <StatefulSelect placeholder="Select a country">
-          <Select.Trigger />
-          <Select.Content>
-            <Select.Group>
-              <Select.GroupLabel>North America</Select.GroupLabel>
-              <Select.Item value="us">United States</Select.Item>
-              <Select.Item value="ca">Canada</Select.Item>
-              <Select.Item value="mx">Mexico</Select.Item>
-            </Select.Group>
-            <Select.Group>
-              <Select.GroupLabel>Europe</Select.GroupLabel>
-              <Select.Item value="uk">United Kingdom</Select.Item>
-              <Select.Item value="de">Germany</Select.Item>
-              <Select.Item value="fr">France</Select.Item>
-            </Select.Group>
-          </Select.Content>
-        </StatefulSelect>
-      ),
-    },
-    {
-      name: 'With Disabled Options',
-      description: 'Some options are disabled',
-      render: () => (
-        <StatefulSelect placeholder="Select a plan">
-          <Select.Trigger />
-          <Select.Content>
-            <Select.Item value="free">Free</Select.Item>
-            <Select.Item value="pro">Pro</Select.Item>
-            <Select.Item value="enterprise" disabled>Enterprise (Contact Sales)</Select.Item>
-          </Select.Content>
-        </StatefulSelect>
-      ),
-    },
-    {
-      name: 'Scrollable List',
-      description: 'Long list with scroll hint — shows 4 items with half-peek of the 5th to indicate more',
-      render: () => (
-        <StatefulSelect placeholder="Select a timezone">
-          <Select.Trigger />
-          <Select.Content>
-            <Select.Item value="utc-8">Pacific Time (UTC-8)</Select.Item>
-            <Select.Item value="utc-7">Mountain Time (UTC-7)</Select.Item>
-            <Select.Item value="utc-6">Central Time (UTC-6)</Select.Item>
-            <Select.Item value="utc-5">Eastern Time (UTC-5)</Select.Item>
-            <Select.Item value="utc-4">Atlantic Time (UTC-4)</Select.Item>
-            <Select.Item value="utc+0">GMT (UTC+0)</Select.Item>
-            <Select.Item value="utc+1">Central European (UTC+1)</Select.Item>
-            <Select.Item value="utc+5.5">India Standard (UTC+5:30)</Select.Item>
-            <Select.Item value="utc+8">China Standard (UTC+8)</Select.Item>
-            <Select.Item value="utc+9">Japan Standard (UTC+9)</Select.Item>
-          </Select.Content>
-        </StatefulSelect>
-      ),
-    },
-    {
-      name: 'Custom Max Visible Items',
-      description: 'Show 6 items before scrolling with half-peek scroll hint',
-      render: () => (
-        <StatefulSelect placeholder="Select a color">
-          <Select.Trigger />
-          <Select.Content maxVisibleItems={6}>
-            <Select.Item value="red">Red</Select.Item>
-            <Select.Item value="orange">Orange</Select.Item>
-            <Select.Item value="yellow">Yellow</Select.Item>
-            <Select.Item value="green">Green</Select.Item>
-            <Select.Item value="blue">Blue</Select.Item>
-            <Select.Item value="indigo">Indigo</Select.Item>
-            <Select.Item value="violet">Violet</Select.Item>
-            <Select.Item value="pink">Pink</Select.Item>
-            <Select.Item value="teal">Teal</Select.Item>
-            <Select.Item value="cyan">Cyan</Select.Item>
-          </Select.Content>
-        </StatefulSelect>
-      ),
-    },
-    {
-      name: 'Disabled',
-      description: 'Disabled select',
-      render: () => (
-        <Select disabled placeholder="Select an option">
-          <Select.Trigger />
-          <Select.Content>
-            <Select.Item value="1">Option 1</Select.Item>
-          </Select.Content>
-        </Select>
-      ),
-    },
-  ],
-});

package/src/components/Select/Select.test.tsx

@@ -1,202 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
-import { Select } from './index';
-
-function renderSelect(props: { onValueChange?: (v: string | null) => void; disabled?: boolean; value?: string; placeholder?: string } = {}) {
-  return render(
-    <Select
-      placeholder={props.placeholder ?? 'Pick one'}
-      onValueChange={props.onValueChange}
-      disabled={props.disabled}
-      value={props.value}
-    >
-      <Select.Trigger />
-      <Select.Content>
-        <Select.Item value="apple">Apple</Select.Item>
-        <Select.Item value="banana">Banana</Select.Item>
-        <Select.Item value="cherry" disabled>Cherry</Select.Item>
-      </Select.Content>
-    </Select>
-  );
-}
-
-describe('Select', () => {
-  it('renders a trigger button', () => {
-    renderSelect();
-    expect(screen.getByRole('combobox')).toBeInTheDocument();
-  });
-
-  it('shows placeholder text when no value selected', () => {
-    renderSelect({ placeholder: 'Choose fruit' });
-    expect(screen.getByText('Choose fruit')).toBeInTheDocument();
-  });
-
-  it('opens dropdown and selects an option on click', async () => {
-    const user = userEvent.setup();
-    const onChange = vi.fn();
-    renderSelect({ onValueChange: onChange });
-
-    await user.click(screen.getByRole('combobox'));
-    const option = await screen.findByRole('option', { name: 'Apple' });
-    await user.click(option);
-    expect(onChange).toHaveBeenCalledWith('apple');
-  });
-
-  it('renders with a controlled value', async () => {
-    const user = userEvent.setup();
-    renderSelect({ value: 'banana' });
-    // The trigger should display the selected item label
-    await user.click(screen.getByRole('combobox'));
-    const bananaOption = await screen.findByRole('option', { name: 'Banana' });
-    expect(bananaOption).toHaveAttribute('aria-selected', 'true');
-  });
-
-  it('disables the trigger when disabled prop is true', () => {
-    renderSelect({ disabled: true });
-    expect(screen.getByRole('combobox')).toBeDisabled();
-  });
-
-  it('renders groups and group labels', async () => {
-    const user = userEvent.setup();
-    render(
-      <Select placeholder="Pick">
-        <Select.Trigger />
-        <Select.Content>
-          <Select.Group>
-            <Select.GroupLabel>Fruits</Select.GroupLabel>
-            <Select.Item value="apple">Apple</Select.Item>
-          </Select.Group>
-        </Select.Content>
-      </Select>
-    );
-    await user.click(screen.getByRole('combobox'));
-    expect(await screen.findByText('Fruits')).toBeInTheDocument();
-  });
-
-  it('forwards html props to item and group labels', async () => {
-    const user = userEvent.setup();
-    render(
-      <Select placeholder="Pick">
-        <Select.Trigger />
-        <Select.Content>
-          <Select.Group id="fruit-group">
-            <Select.GroupLabel id="fruit-group-label">Fruits</Select.GroupLabel>
-            <Select.Item id="apple-option" value="apple">Apple</Select.Item>
-          </Select.Group>
-        </Select.Content>
-      </Select>
-    );
-
-    await user.click(screen.getByRole('combobox'));
-    expect(await screen.findByRole('option', { name: 'Apple' })).toHaveAttribute('id', 'apple-option');
-    expect(screen.getByText('Fruits')).toHaveAttribute('id', 'fruit-group-label');
-    expect(screen.getByText('Fruits').closest('#fruit-group')).toBeInTheDocument();
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(
-      <Select placeholder="Pick one">
-        <Select.Trigger aria-label="Select a fruit" />
-        <Select.Content>
-          <Select.Item value="apple">Apple</Select.Item>
-        </Select.Content>
-      </Select>
-    );
-    await expectNoA11yViolations(container);
-  });
-
-  describe('keyboard & focus', () => {
-    it('ArrowDown opens the dropdown from focused trigger', async () => {
-      const user = userEvent.setup();
-      renderSelect();
-
-      await user.tab(); // focus trigger
-      await user.keyboard('{ArrowDown}');
-      expect(await screen.findByRole('option', { name: 'Apple' })).toBeInTheDocument();
-    });
-
-    it('listbox receives focus when dropdown opens', async () => {
-      const user = userEvent.setup();
-      renderSelect();
-
-      await user.click(screen.getByRole('combobox'));
-      const listbox = await screen.findByRole('listbox');
-      expect(listbox).toBeInTheDocument();
-    });
-
-    it('all options are rendered in the listbox', async () => {
-      const user = userEvent.setup();
-      renderSelect();
-
-      await user.click(screen.getByRole('combobox'));
-      expect(await screen.findByRole('option', { name: 'Apple' })).toBeInTheDocument();
-      expect(screen.getByRole('option', { name: 'Banana' })).toBeInTheDocument();
-      expect(screen.getByRole('option', { name: 'Cherry' })).toBeInTheDocument();
-    });
-
-    it('clicking an option selects it', async () => {
-      const user = userEvent.setup();
-      const onChange = vi.fn();
-      renderSelect({ onValueChange: onChange });
-
-      await user.click(screen.getByRole('combobox'));
-      await user.click(await screen.findByRole('option', { name: 'Banana' }));
-      expect(onChange).toHaveBeenCalledWith('banana');
-    });
-
-    it('Escape closes the dropdown', async () => {
-      const user = userEvent.setup();
-      renderSelect();
-
-      await user.click(screen.getByRole('combobox'));
-      await screen.findByRole('option', { name: 'Apple' });
-
-      await user.keyboard('{Escape}');
-      expect(screen.queryByRole('option')).not.toBeInTheDocument();
-    });
-
-    it('trigger is focusable after closing dropdown', async () => {
-      const user = userEvent.setup();
-      renderSelect();
-
-      const trigger = screen.getByRole('combobox');
-      await user.click(trigger);
-      await screen.findByRole('option', { name: 'Apple' });
-
-      await user.keyboard('{Escape}');
-      // After closing, the trigger should still be accessible
-      expect(trigger).toBeInTheDocument();
-      expect(trigger).not.toBeDisabled();
-    });
-
-    it('disabled option has aria-disabled attribute', async () => {
-      const user = userEvent.setup();
-      renderSelect();
-
-      await user.click(screen.getByRole('combobox'));
-      const cherry = await screen.findByRole('option', { name: 'Cherry' });
-      expect(cherry).toHaveAttribute('aria-disabled', 'true');
-    });
-  });
-
-  it('updates trigger label when selected option is removed', async () => {
-    const renderDemo = (showApple: boolean) => (
-      <Select value="apple" placeholder="Pick one" defaultOpen>
-        <Select.Trigger />
-        <Select.Content>
-          {showApple && <Select.Item value="apple">Apple</Select.Item>}
-          <Select.Item value="banana">Banana</Select.Item>
-        </Select.Content>
-      </Select>
-    );
-
-    const { rerender } = render(renderDemo(true));
-
-    await screen.findByRole('option', { name: 'Apple' });
-    expect(screen.getByRole('combobox')).toHaveTextContent('Apple');
-
-    rerender(renderDemo(false));
-
-    expect(await screen.findByRole('combobox')).toHaveTextContent('Pick one');
-  });
-});