@fragments-sdk/ui 0.14.0 → 0.15.1

package/src/components/Sidebar/Sidebar.test.tsx

@@ -1,224 +0,0 @@
-import { describe, it, expect, vi, beforeAll } from 'vitest';
-import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
-import { Sidebar } from './index';
-
-function mockMatchMedia(matches: boolean) {
-  Object.defineProperty(window, 'matchMedia', {
-    writable: true,
-    value: vi.fn().mockImplementation((query: string) => ({
-      matches,
-      media: query,
-      onchange: null,
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    })),
-  });
-}
-
-// Mock matchMedia for jsdom
-beforeAll(() => {
-  mockMatchMedia(false);
-});
-
-function renderSidebar(props: Partial<React.ComponentProps<typeof Sidebar>> = {}) {
-  return render(
-    <Sidebar aria-label="Test sidebar" {...props}>
-      <Sidebar.Header>Header Content</Sidebar.Header>
-      <Sidebar.Nav aria-label="Main">
-        <Sidebar.Section label="Section One">
-          <Sidebar.Item icon={<span>I</span>}>Dashboard</Sidebar.Item>
-          <Sidebar.Item icon={<span>I</span>} active>Settings</Sidebar.Item>
-          <Sidebar.Item icon={<span>I</span>} disabled>Disabled</Sidebar.Item>
-        </Sidebar.Section>
-      </Sidebar.Nav>
-      <Sidebar.Footer>Footer Content</Sidebar.Footer>
-    </Sidebar>
-  );
-}
-
-describe('Sidebar', () => {
-  it('renders as an aside element', () => {
-    renderSidebar();
-    const aside = document.querySelector('aside');
-    expect(aside).toBeInTheDocument();
-  });
-
-  it('renders compound sub-components', () => {
-    renderSidebar();
-    expect(screen.getByText('Header Content')).toBeInTheDocument();
-    expect(screen.getByText('Dashboard')).toBeInTheDocument();
-    expect(screen.getByText('Settings')).toBeInTheDocument();
-    expect(screen.getByText('Footer Content')).toBeInTheDocument();
-  });
-
-  it('renders nav landmark', () => {
-    renderSidebar();
-    expect(screen.getByRole('navigation', { name: /main/i })).toBeInTheDocument();
-  });
-
-  it('uses ScrollArea with fade indicators in nav content', () => {
-    renderSidebar();
-    const scrollAreaRoot = screen.getByRole('navigation', { name: /main/i }).querySelector('[data-orientation="vertical"]');
-    expect(scrollAreaRoot).toBeInTheDocument();
-  });
-
-  it('renders section with label', () => {
-    renderSidebar();
-    expect(screen.getByText('Section One')).toBeInTheDocument();
-  });
-
-  it('marks active item with aria-current="page"', () => {
-    renderSidebar();
-    const activeItem = screen.getByText('Settings').closest('[aria-current]');
-    expect(activeItem).toHaveAttribute('aria-current', 'page');
-  });
-
-  it('disables items with disabled prop', () => {
-    renderSidebar();
-    const disabledItem = screen.getByText('Disabled').closest('button');
-    expect(disabledItem).toHaveAttribute('tabindex', '-1');
-  });
-
-  it('supports data-state attribute', () => {
-    renderSidebar();
-    const aside = document.querySelector('aside');
-    expect(aside).toHaveAttribute('data-state');
-  });
-
-  it('uses icon collapse width when collapsed with icons', () => {
-    renderSidebar({ collapsed: true });
-    const aside = document.querySelector('aside');
-    expect(aside).toHaveStyle('--sidebar-effective-collapsed-width: 56px');
-    expect(aside).toHaveAttribute('data-icon-collapse', 'icons');
-  });
-
-  it('collapses fully when collapsed with no item icons and keeps toggle visible', () => {
-    render(
-      <Sidebar collapsed aria-label="Text-only sidebar">
-        <Sidebar.Header>
-          Header Content
-          <Sidebar.CollapseToggle />
-        </Sidebar.Header>
-        <Sidebar.Nav aria-label="Main">
-          <Sidebar.Section label="Section One">
-            <Sidebar.Item>Dashboard</Sidebar.Item>
-            <Sidebar.Item active>Settings</Sidebar.Item>
-          </Sidebar.Section>
-        </Sidebar.Nav>
-      </Sidebar>
-    );
-
-    const aside = document.querySelector('aside');
-    expect(aside).toHaveStyle('--sidebar-effective-collapsed-width: 0px');
-    expect(aside).toHaveAttribute('data-icon-collapse', 'none');
-    expect(screen.getByRole('button', { name: /expand sidebar/i })).toBeInTheDocument();
-  });
-
-  it('composes child click handler in Sidebar.Item asChild mode', async () => {
-    const user = userEvent.setup();
-    const childClick = vi.fn();
-    const onItemClick = vi.fn();
-
-    render(
-      <Sidebar aria-label="Test sidebar">
-        <Sidebar.Nav aria-label="Main">
-          <Sidebar.Section label="Section One">
-            <Sidebar.Item asChild icon={<span>I</span>} onClick={onItemClick}>
-              <a href="#dashboard" onClick={childClick}>Dashboard</a>
-            </Sidebar.Item>
-          </Sidebar.Section>
-        </Sidebar.Nav>
-      </Sidebar>
-    );
-
-    await user.click(screen.getByRole('link', { name: /dashboard/i }));
-
-    expect(childClick).toHaveBeenCalled();
-    expect(onItemClick).toHaveBeenCalled();
-    expect(onItemClick.mock.calls[0][0]).toBeDefined();
-  });
-
-  it('passes event object to Sidebar.SubItem onClick', async () => {
-    const user = userEvent.setup();
-    const onClick = vi.fn();
-
-    render(
-      <Sidebar aria-label="Test sidebar">
-        <Sidebar.Nav aria-label="Main">
-          <Sidebar.Section label="Section">
-            <Sidebar.Item icon={<span>I</span>} hasSubmenu defaultExpanded>
-              Parent
-            </Sidebar.Item>
-            <Sidebar.Submenu>
-              <Sidebar.SubItem onClick={onClick}>Child</Sidebar.SubItem>
-            </Sidebar.Submenu>
-          </Sidebar.Section>
-        </Sidebar.Nav>
-      </Sidebar>
-    );
-
-    await user.click(screen.getByRole('button', { name: 'Child' }));
-    expect(onClick).toHaveBeenCalled();
-    expect(onClick.mock.calls[0][0]).toBeDefined();
-  });
-
-  it('forwards html props to desktop compound parts', () => {
-    render(
-      <Sidebar aria-label="Test sidebar">
-        <Sidebar.Header data-testid="header" data-part="header">Header</Sidebar.Header>
-        <Sidebar.Nav aria-label="Main" data-testid="nav" data-part="nav">
-          <Sidebar.Section data-testid="section" data-part="section" label="Section One">
-            <Sidebar.Item icon={<span>I</span>}>Dashboard</Sidebar.Item>
-          </Sidebar.Section>
-        </Sidebar.Nav>
-        <Sidebar.Footer data-testid="footer" data-part="footer">Footer</Sidebar.Footer>
-        <Sidebar.CollapseToggle data-testid="collapse-toggle" data-part="collapse-toggle" />
-        <Sidebar.Rail data-testid="rail" data-part="rail" />
-      </Sidebar>
-    );
-
-    expect(screen.getByTestId('header')).toHaveAttribute('data-part', 'header');
-    expect(screen.getByTestId('nav')).toHaveAttribute('data-part', 'nav');
-    expect(screen.getByTestId('section')).toHaveAttribute('data-part', 'section');
-    expect(screen.getByTestId('footer')).toHaveAttribute('data-part', 'footer');
-    expect(screen.getByTestId('collapse-toggle')).toHaveAttribute('data-part', 'collapse-toggle');
-    expect(screen.getByTestId('rail')).toHaveAttribute('data-part', 'rail');
-  });
-
-  it('forwards props to mobile Trigger/Overlay and composes overlay click', async () => {
-    mockMatchMedia(true);
-    const user = userEvent.setup();
-    const overlayClick = vi.fn();
-
-    render(
-      <Sidebar defaultOpen aria-label="Mobile sidebar">
-        <Sidebar.Trigger data-testid="trigger" data-part="trigger" />
-        <Sidebar.Overlay data-testid="overlay" data-part="overlay" onClick={overlayClick} />
-        <Sidebar.Nav aria-label="Main">
-          <Sidebar.Section label="Section One">
-            <Sidebar.Item icon={<span>I</span>}>Dashboard</Sidebar.Item>
-          </Sidebar.Section>
-        </Sidebar.Nav>
-      </Sidebar>
-    );
-
-    const trigger = await screen.findByTestId('trigger');
-    const overlay = await screen.findByTestId('overlay');
-
-    expect(trigger).toHaveAttribute('data-part', 'trigger');
-    expect(overlay).toHaveAttribute('data-part', 'overlay');
-
-    await user.click(overlay);
-    expect(overlayClick).toHaveBeenCalled();
-
-    mockMatchMedia(false);
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = renderSidebar();
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/Skeleton/Skeleton.fragment.tsx

@@ -1,154 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/core';
-import { Skeleton } from '.';
-
-export default defineFragment({
-  component: Skeleton,
-
-  meta: {
-    name: 'Skeleton',
-    description: 'Placeholder loading state for content',
-    category: 'feedback',
-    status: 'stable',
-    tags: ['loading', 'placeholder', 'skeleton', 'shimmer'],
-  },
-
-  usage: {
-    when: [
-      'Content is loading asynchronously',
-      'Preventing layout shift during data fetching',
-      'Providing visual feedback that content is coming',
-      'Improving perceived performance',
-    ],
-    whenNot: [
-      'Short loading times (< 300ms)',
-      'When spinner is more appropriate',
-      'Background operations without visible impact',
-    ],
-    guidelines: [
-      'Match skeleton shape to expected content',
-      'Use semantic variants (text, heading, avatar) for consistency',
-      'Maintain similar dimensions to loaded content',
-      'Avoid too many skeleton elements - simplify complex layouts',
-      'Skeleton and Skeleton.Text forward DOM props (id, aria-*, data-*, handlers)',
-    ],
-    accessibility: [
-      'Skeletons are decorative - use aria-hidden',
-      'Announce loading state separately if needed',
-      'Ensure sufficient contrast for the animation',
-    ],
-  },
-
-  props: {
-    variant: {
-      type: 'enum',
-      values: ['text', 'heading', 'avatar', 'button', 'input', 'rect'],
-      default: 'rect',
-      description: 'Semantic variant that auto-sizes',
-    },
-    size: {
-      type: 'enum',
-      values: ['sm', 'md', 'lg'],
-      default: 'md',
-      description: 'Size for avatar/button variants',
-    },
-    width: {
-      type: 'union',
-      description: 'Custom width (string or number)',
-    },
-    height: {
-      type: 'union',
-      description: 'Custom height (string or number)',
-    },
-    fill: {
-      type: 'boolean',
-      default: false,
-      description: 'Fill parent container',
-    },
-    radius: {
-      type: 'enum',
-      values: ['none', 'sm', 'md', 'lg', 'full'],
-      description: 'Border radius override',
-    },
-    static: {
-      type: 'boolean',
-      default: false,
-      description: 'Disable skeleton animation',
-    },
-  },
-
-  relations: [
-    {
-      component: 'Progress',
-      relationship: 'alternative',
-      note: 'Use Progress for determinate loading',
-    },
-  ],
-
-  contract: {
-    propsSummary: [
-      'variant: text|heading|avatar|button|input|rect',
-      'size: sm|md|lg (for avatar/button)',
-      'width/height: custom dimensions',
-      'fill: boolean - fill parent',
-      'Skeleton / Skeleton.Text forward div DOM props',
-    ],
-    scenarioTags: [
-      'loading.content',
-      'loading.list',
-      'loading.card',
-    ],
-    a11yRules: [],
-    bans: [],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic rectangle skeleton',
-      render: () => <Skeleton width={200} height={20} />,
-    },
-    {
-      name: 'Text Lines',
-      description: 'Multi-line text placeholder',
-      render: () => <Skeleton.Text lines={3} />,
-    },
-    {
-      name: 'Semantic Variants',
-      description: 'Pre-configured shapes for common elements',
-      render: () => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--fui-space-2)' }}>
-          <Skeleton variant="heading" width={200} />
-          <Skeleton variant="text" width="100%" />
-          <Skeleton variant="text" width="80%" />
-        </div>
-      ),
-    },
-    {
-      name: 'Avatar Skeleton',
-      description: 'Circular placeholder for avatars',
-      render: () => (
-        <div style={{ display: 'flex', gap: 'var(--fui-space-1)', alignItems: 'center' }}>
-          <Skeleton.Circle size="sm" />
-          <Skeleton.Circle size="md" />
-          <Skeleton.Circle size="lg" />
-        </div>
-      ),
-    },
-    {
-      name: 'Card Skeleton',
-      description: 'Composed skeleton for a card layout',
-      render: () => (
-        <div style={{ width: 300, padding: 'var(--fui-space-2)', border: '1px solid var(--fui-border)', borderRadius: 'var(--fui-radius-lg)' }}>
-          <Skeleton variant="rect" height={120} radius="md" />
-          <div style={{ marginTop: 'var(--fui-space-2)' }}>
-            <Skeleton variant="heading" width="60%" />
-          </div>
-          <div style={{ marginTop: 'var(--fui-space-1)' }}>
-            <Skeleton.Text lines={2} />
-          </div>
-        </div>
-      ),
-    },
-  ],
-});

package/src/components/Skeleton/Skeleton.test.tsx

@@ -1,68 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, expectNoA11yViolations } from '../../test/utils';
-import { Skeleton } from './index';
-
-describe('Skeleton', () => {
-  it('renders with aria-hidden="true"', () => {
-    const { container } = render(<Skeleton />);
-    expect(container.firstElementChild).toHaveAttribute('aria-hidden', 'true');
-  });
-
-  it('applies variant classes', () => {
-    const { container: c1 } = render(<Skeleton variant="text" />);
-    expect(c1.firstElementChild).toHaveClass('text');
-
-    const { container: c2 } = render(<Skeleton variant="avatar" />);
-    expect(c2.firstElementChild).toHaveClass('avatar');
-
-    const { container: c3 } = render(<Skeleton variant="button" />);
-    expect(c3.firstElementChild).toHaveClass('button');
-  });
-
-  it('applies static class when animation is disabled', () => {
-    const { container } = render(<Skeleton static />);
-    expect(container.firstElementChild).toHaveClass('static');
-  });
-
-  it('applies custom dimensions via style', () => {
-    const { container } = render(<Skeleton width={200} height={100} />);
-    const el = container.firstElementChild as HTMLElement;
-    expect(el.style.width).toBe('200px');
-    expect(el.style.height).toBe('100px');
-  });
-
-  it('applies fill class', () => {
-    const { container } = render(<Skeleton fill />);
-    expect(container.firstElementChild).toHaveClass('fill');
-  });
-
-  it('renders Skeleton.Text with multiple lines', () => {
-    const { container } = render(<Skeleton.Text lines={4} />);
-    expect(container.firstElementChild).toHaveAttribute('aria-hidden', 'true');
-    const lines = container.querySelectorAll('.textLine');
-    expect(lines).toHaveLength(4);
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(
-      <div>
-        <Skeleton variant="text" />
-        <Skeleton variant="avatar" />
-        <Skeleton.Text lines={3} />
-      </div>
-    );
-    await expectNoA11yViolations(container);
-  });
-
-  it('forwards DOM props on Skeleton and Skeleton.Text', () => {
-    const { container } = render(
-      <div>
-        <Skeleton data-testid="sk" id="skeleton-root" />
-        <Skeleton.Text data-testid="sk-text" id="skeleton-text" lines={2} />
-      </div>
-    );
-
-    expect(container.querySelector('#skeleton-root')).toHaveAttribute('data-testid', 'sk');
-    expect(container.querySelector('#skeleton-text')).toHaveAttribute('data-testid', 'sk-text');
-  });
-});

package/src/components/Slider/Slider.fragment.tsx

@@ -1,227 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/core';
-import { Slider } from '.';
-
-function ControlledSliderDemo() {
-  const [value, setValue] = React.useState(50);
-  return (
-    <div style={{ width: '300px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
-      <Slider
-        label="Opacity"
-        value={value}
-        onChange={setValue}
-        showValue
-        valueSuffix="%"
-      />
-      <div style={{ fontSize: '14px', color: 'var(--fui-text-secondary)' }}>
-        Current value: {value}%
-      </div>
-    </div>
-  );
-}
-
-export default defineFragment({
-  component: Slider,
-
-  meta: {
-    name: 'Slider',
-    description: 'Range input control for selecting a numeric value within a defined range. Supports labels, value display, and custom step intervals.',
-    category: 'forms',
-    status: 'stable',
-    tags: ['slider', 'range', 'input', 'number', 'control'],
-    since: '0.2.0',
-  },
-
-  usage: {
-    when: [
-      'Selecting a value from a continuous range',
-      'Volume or brightness controls',
-      'Price range filters',
-      'Settings that benefit from visual feedback',
-    ],
-    whenNot: [
-      'Precise numeric input (use Input type="number")',
-      'Discrete options (use RadioGroup or Select)',
-      'Yes/no choices (use Switch)',
-    ],
-    guidelines: [
-      'Always provide a label describing what the slider controls',
-      'Show the current value when precision matters',
-      'Use appropriate min/max values for the context',
-      'Consider step size for usability',
-    ],
-    accessibility: [
-      'Label is associated with the slider',
-      'Keyboard accessible with arrow keys',
-      'Current value is announced to screen readers',
-      'Uses native slider semantics',
-    ],
-  },
-
-  props: {
-    value: {
-      type: 'number',
-      description: 'Controlled value',
-    },
-    defaultValue: {
-      type: 'number',
-      description: 'Default value for uncontrolled usage',
-    },
-    onChange: {
-      type: 'function',
-      description: 'Called with new value when changed',
-    },
-    onValueChange: {
-      type: 'function',
-      description: 'Alias for onChange (Radix convention): (value: number) => void',
-    },
-    min: {
-      type: 'number',
-      description: 'Minimum value',
-      default: '0',
-    },
-    max: {
-      type: 'number',
-      description: 'Maximum value',
-      default: '100',
-    },
-    step: {
-      type: 'number',
-      description: 'Step interval',
-      default: '1',
-    },
-    label: {
-      type: 'string',
-      description: 'Label text',
-    },
-    showValue: {
-      type: 'boolean',
-      description: 'Display current value',
-      default: 'false',
-    },
-    showValueOnDrag: {
-      type: 'boolean',
-      description: 'Show current value in a floating bubble while dragging the thumb',
-      default: 'false',
-    },
-    valueSuffix: {
-      type: 'string',
-      description: 'Suffix after value (e.g., "%", "px")',
-    },
-    disabled: {
-      type: 'boolean',
-      description: 'Disable the slider',
-      default: 'false',
-    },
-  },
-
-  relations: [
-    { component: 'Input', relationship: 'alternative', note: 'Use Input for precise numeric entry' },
-    { component: 'Progress', relationship: 'sibling', note: 'Similar visual, but Progress is read-only' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'value: number - controlled value',
-      'defaultValue: number - initial value',
-      'onChange: (value: number) => void - change handler (or onValueChange)',
-      'min/max: number - range bounds',
-      'step: number - increment size',
-      'label: string - field label',
-      'showValue: boolean - display value',
-      'showValueOnDrag: boolean - show value bubble during drag',
-      'valueSuffix: string - unit suffix',
-    ],
-    scenarioTags: [
-      'forms.range',
-      'input.numeric',
-      'control.slider',
-    ],
-    a11yRules: ['A11Y_LABEL_REQUIRED', 'A11Y_KEYBOARD_ACCESSIBLE', 'A11Y_TARGET_SIZE_MIN'],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic slider with label',
-      render: () => (
-        <div style={{ width: '300px' }}>
-          <Slider label="Volume" defaultValue={50} />
-        </div>
-      ),
-    },
-    {
-      name: 'With Value Display',
-      description: 'Shows current value alongside the slider',
-      render: () => (
-        <div style={{ width: '300px' }}>
-          <Slider
-            label="Brightness"
-            defaultValue={75}
-            showValue
-            valueSuffix="%"
-          />
-        </div>
-      ),
-    },
-    {
-      name: 'Custom Range',
-      description: 'Custom min, max, and step values',
-      render: () => (
-        <div style={{ width: '300px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
-          <Slider
-            label="Temperature"
-            min={60}
-            max={80}
-            step={1}
-            defaultValue={72}
-            showValue
-            valueSuffix="°F"
-          />
-          <Slider
-            label="Font Size"
-            min={12}
-            max={32}
-            step={2}
-            defaultValue={16}
-            showValue
-            valueSuffix="px"
-          />
-        </div>
-      ),
-    },
-    {
-      name: 'Controlled',
-      description: 'Controlled slider with external state',
-      render: () => <ControlledSliderDemo />,
-    },
-    {
-      name: 'Drag Value Bubble',
-      description: 'Shows a floating value bubble while the thumb is being dragged',
-      render: () => (
-        <div style={{ width: '300px' }}>
-          <Slider
-            label="Mix"
-            defaultValue={40}
-            showValueOnDrag
-            valueSuffix="%"
-          />
-        </div>
-      ),
-    },
-    {
-      name: 'Disabled',
-      description: 'Disabled slider',
-      render: () => (
-        <div style={{ width: '300px' }}>
-          <Slider
-            label="Locked Setting"
-            defaultValue={30}
-            showValue
-            disabled
-          />
-        </div>
-      ),
-    },
-  ],
-});