@fragments-sdk/ui 0.13.0 → 0.15.1

package/src/components/Tabs/Tabs.test.tsx

@@ -1,180 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
-import { Tabs } from './index';
-
-function renderTabs(props: Partial<React.ComponentProps<typeof Tabs>> = {}) {
-  return render(
-    <Tabs defaultValue="tab1" {...props}>
-      <Tabs.List>
-        <Tabs.Tab value="tab1">Tab One</Tabs.Tab>
-        <Tabs.Tab value="tab2">Tab Two</Tabs.Tab>
-        <Tabs.Tab value="tab3" disabled>Tab Three</Tabs.Tab>
-      </Tabs.List>
-      <Tabs.Panel value="tab1">Panel One Content</Tabs.Panel>
-      <Tabs.Panel value="tab2">Panel Two Content</Tabs.Panel>
-      <Tabs.Panel value="tab3">Panel Three Content</Tabs.Panel>
-    </Tabs>
-  );
-}
-
-describe('Tabs', () => {
-  it('renders tablist and tab roles', () => {
-    renderTabs();
-    expect(screen.getByRole('tablist')).toBeInTheDocument();
-    expect(screen.getAllByRole('tab')).toHaveLength(3);
-  });
-
-  it('renders tabpanel role for active panel', () => {
-    renderTabs();
-    expect(screen.getByRole('tabpanel')).toBeInTheDocument();
-    expect(screen.getByText('Panel One Content')).toBeInTheDocument();
-  });
-
-  it('switches panel on tab click', async () => {
-    const user = userEvent.setup();
-    renderTabs();
-
-    await user.click(screen.getByRole('tab', { name: /tab two/i }));
-    expect(screen.getByText('Panel Two Content')).toBeInTheDocument();
-  });
-
-  it('marks active tab with aria-selected', async () => {
-    const user = userEvent.setup();
-    renderTabs();
-
-    const tabOne = screen.getByRole('tab', { name: /tab one/i });
-    const tabTwo = screen.getByRole('tab', { name: /tab two/i });
-
-    expect(tabOne).toHaveAttribute('aria-selected', 'true');
-    expect(tabTwo).toHaveAttribute('aria-selected', 'false');
-
-    await user.click(tabTwo);
-    expect(tabTwo).toHaveAttribute('aria-selected', 'true');
-    expect(tabOne).toHaveAttribute('aria-selected', 'false');
-  });
-
-  it('disables a tab when disabled prop is set', () => {
-    renderTabs();
-    const disabledTab = screen.getByRole('tab', { name: /tab three/i });
-    // Base UI uses aria-disabled instead of the HTML disabled attribute
-    expect(disabledTab).toHaveAttribute('aria-disabled', 'true');
-  });
-
-  it('supports controlled value prop', async () => {
-    const onValueChange = vi.fn();
-    render(
-      <Tabs value="tab1" onValueChange={onValueChange}>
-        <Tabs.List>
-          <Tabs.Tab value="tab1">Tab One</Tabs.Tab>
-          <Tabs.Tab value="tab2">Tab Two</Tabs.Tab>
-        </Tabs.List>
-        <Tabs.Panel value="tab1">Panel One</Tabs.Panel>
-        <Tabs.Panel value="tab2">Panel Two</Tabs.Panel>
-      </Tabs>
-    );
-
-    const user = userEvent.setup();
-    await user.click(screen.getByRole('tab', { name: /tab two/i }));
-    expect(onValueChange).toHaveBeenCalled();
-    expect(onValueChange.mock.calls[0][0]).toBe('tab2');
-  });
-
-  it('supports vertical orientation', () => {
-    renderTabs({ orientation: 'vertical' });
-    const tablist = screen.getByRole('tablist');
-    expect(tablist).toHaveAttribute('aria-orientation', 'vertical');
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = renderTabs();
-    await expectNoA11yViolations(container);
-  });
-
-  describe('keyboard & focus', () => {
-    it('ArrowRight moves focus to the next tab', async () => {
-      const user = userEvent.setup();
-      renderTabs();
-
-      await user.tab(); // focus enters the tablist on the active tab
-      expect(screen.getByRole('tab', { name: /tab one/i })).toHaveFocus();
-
-      await user.keyboard('{ArrowRight}');
-      expect(screen.getByRole('tab', { name: /tab two/i })).toHaveFocus();
-    });
-
-    it('ArrowLeft moves focus to the previous tab', async () => {
-      const user = userEvent.setup();
-      renderTabs({ defaultValue: 'tab2' });
-
-      await user.tab();
-      expect(screen.getByRole('tab', { name: /tab two/i })).toHaveFocus();
-
-      await user.keyboard('{ArrowLeft}');
-      expect(screen.getByRole('tab', { name: /tab one/i })).toHaveFocus();
-    });
-
-    it('disabled tab receives focus but cannot be activated', async () => {
-      const user = userEvent.setup();
-      renderTabs({ defaultValue: 'tab2' });
-
-      await user.tab();
-      await user.keyboard('{ArrowRight}'); // moves to disabled Tab Three
-      expect(screen.getByRole('tab', { name: /tab three/i })).toHaveFocus();
-      // Pressing Enter/Space on a disabled tab should not activate it
-      await user.keyboard('{Enter}');
-      expect(screen.getByRole('tab', { name: /tab three/i })).toHaveAttribute('aria-selected', 'false');
-    });
-
-    it('wraps from last tab to first', async () => {
-      const user = userEvent.setup();
-      renderTabs();
-
-      await user.tab();
-      // Navigate: Tab One -> Tab Two -> Tab Three -> wraps to Tab One
-      await user.keyboard('{ArrowRight}');
-      await user.keyboard('{ArrowRight}');
-      await user.keyboard('{ArrowRight}');
-      expect(screen.getByRole('tab', { name: /tab one/i })).toHaveFocus();
-    });
-
-    it('Home key moves focus to the first tab', async () => {
-      const user = userEvent.setup();
-      renderTabs({ defaultValue: 'tab2' });
-
-      await user.tab();
-      await user.keyboard('{Home}');
-      expect(screen.getByRole('tab', { name: /tab one/i })).toHaveFocus();
-    });
-
-    it('End key moves focus to the last tab', async () => {
-      const user = userEvent.setup();
-      renderTabs();
-
-      await user.tab();
-      await user.keyboard('{End}');
-      expect(screen.getByRole('tab', { name: /tab three/i })).toHaveFocus();
-    });
-
-    it('ArrowDown navigates tabs in vertical orientation', async () => {
-      const user = userEvent.setup();
-      renderTabs({ orientation: 'vertical' });
-
-      await user.tab();
-      expect(screen.getByRole('tab', { name: /tab one/i })).toHaveFocus();
-
-      await user.keyboard('{ArrowDown}');
-      expect(screen.getByRole('tab', { name: /tab two/i })).toHaveFocus();
-    });
-
-    it('ArrowUp navigates tabs backward in vertical orientation', async () => {
-      const user = userEvent.setup();
-      renderTabs({ orientation: 'vertical', defaultValue: 'tab2' });
-
-      await user.tab();
-      expect(screen.getByRole('tab', { name: /tab two/i })).toHaveFocus();
-
-      await user.keyboard('{ArrowUp}');
-      expect(screen.getByRole('tab', { name: /tab one/i })).toHaveFocus();
-    });
-  });
-});

package/src/components/Text/Text.fragment.tsx

@@ -1,190 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Text } from '.';
-
-export default defineFragment({
-  component: Text,
-
-  meta: {
-    name: 'Text',
-    description: 'Typography component for rendering text with consistent styling. Supports various sizes, weights, colors, and semantic elements.',
-    category: 'display',
-    status: 'stable',
-    tags: ['text', 'typography', 'heading', 'paragraph', 'font'],
-    since: '0.2.0',
-  },
-
-  usage: {
-    when: [
-      'Displaying text with specific typography styles',
-      'Creating headings, paragraphs, or labels',
-      'Text that needs truncation or line clamping',
-      'Consistent typography across the application',
-    ],
-    whenNot: [
-      'Complex rich text (use a rich text editor)',
-      'Code display (use CodeBlock)',
-      'Interactive text (use Link or Button)',
-    ],
-    guidelines: [
-      'Use semantic elements (h1-h6, p) via the "as" prop',
-      'Maintain heading hierarchy for accessibility',
-      'Use color variants sparingly for visual hierarchy',
-      'Consider truncation for user-generated content',
-    ],
-    accessibility: [
-      'Use proper heading levels (h1-h6) for document structure',
-      'Semantic elements convey meaning to screen readers',
-      'Truncated text should have full content in title/tooltip',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'Text content',
-      required: true,
-    },
-    as: {
-      type: 'enum',
-      description: 'HTML element to render',
-      values: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'label', 'div', 'strong', 'em', 'small', 'code'],
-      default: 'span',
-    },
-    size: {
-      type: 'enum',
-      description: 'Font size (md is an alias for base)',
-      values: ['2xs', 'xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl'],
-    },
-    weight: {
-      type: 'enum',
-      description: 'Font weight',
-      values: ['normal', 'medium', 'semibold', 'bold'],
-    },
-    color: {
-      type: 'enum',
-      description: 'Text color (muted is an alias for tertiary)',
-      values: ['primary', 'secondary', 'tertiary', 'muted'],
-    },
-    font: {
-      type: 'enum',
-      description: 'Font family',
-      values: ['sans', 'mono'],
-      default: 'sans',
-    },
-    truncate: {
-      type: 'boolean',
-      description: 'Truncate with ellipsis on overflow',
-    },
-    lineClamp: {
-      type: 'number',
-      description: 'Number of lines before truncating (requires truncate)',
-    },
-  },
-
-  relations: [
-    { component: 'Link', relationship: 'sibling', note: 'Use Link for clickable text' },
-    { component: 'CodeBlock', relationship: 'alternative', note: 'Use CodeBlock for code display' },
-    { component: 'Badge', relationship: 'sibling', note: 'Use Badge for labels/tags' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'as: string - HTML element',
-      'size: 2xs|xs|sm|base|md|lg|xl|2xl - font size (md = base)',
-      'weight: normal|medium|semibold|bold - font weight',
-      'color: primary|secondary|tertiary|muted - text color (muted = tertiary)',
-      'font: sans|mono - font family',
-      'truncate: boolean - enable truncation',
-      'lineClamp: number - max lines',
-    ],
-    scenarioTags: [
-      'typography.text',
-      'display.content',
-      'semantic.elements',
-    ],
-    a11yRules: ['A11Y_HEADING_HIERARCHY', 'A11Y_SEMANTIC_ELEMENTS'],
-  },
-
-  variants: [
-    {
-      name: 'Sizes',
-      description: 'Different text sizes',
-      render: () => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-          <Text size="2xs">Extra extra small (2xs)</Text>
-          <Text size="xs">Extra small (xs)</Text>
-          <Text size="sm">Small (sm)</Text>
-          <Text size="base">Base size</Text>
-          <Text size="lg">Large (lg)</Text>
-          <Text size="xl">Extra large (xl)</Text>
-          <Text size="2xl">Extra extra large (2xl)</Text>
-        </div>
-      ),
-    },
-    {
-      name: 'Weights',
-      description: 'Different font weights',
-      render: () => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-          <Text weight="normal">Normal weight</Text>
-          <Text weight="medium">Medium weight</Text>
-          <Text weight="semibold">Semibold weight</Text>
-          <Text weight="bold">Bold weight</Text>
-        </div>
-      ),
-    },
-    {
-      name: 'Colors',
-      description: 'Different text colors',
-      render: () => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-          <Text color="primary">Primary color (default)</Text>
-          <Text color="secondary">Secondary color</Text>
-          <Text color="tertiary">Tertiary color</Text>
-          <Text color="muted">Muted color (alias for tertiary)</Text>
-        </div>
-      ),
-    },
-    {
-      name: 'Semantic Elements',
-      description: 'Using appropriate HTML elements',
-      render: () => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-          <Text as="h1" size="2xl" weight="semibold">Heading 1</Text>
-          <Text as="h2" size="xl" weight="semibold">Heading 2</Text>
-          <Text as="h3" size="lg" weight="medium">Heading 3</Text>
-          <Text as="p" color="secondary">
-            This is a paragraph of text that demonstrates the Text component
-            with semantic paragraph element.
-          </Text>
-        </div>
-      ),
-    },
-    {
-      name: 'Monospace',
-      description: 'Monospace font for code-like text',
-      render: () => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-          <Text font="mono" size="sm">const greeting = "Hello, World!";</Text>
-          <Text font="mono" size="sm" color="secondary">npm install @fragments-sdk/ui</Text>
-        </div>
-      ),
-    },
-    {
-      name: 'Truncation',
-      description: 'Text truncation with ellipsis',
-      render: () => (
-        <div style={{ width: '200px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
-          <Text truncate>
-            This is a very long text that will be truncated with an ellipsis when it overflows.
-          </Text>
-          <Text truncate lineClamp={2}>
-            This text will be clamped to two lines. Any content beyond two lines
-            will be hidden and replaced with an ellipsis at the end.
-          </Text>
-        </div>
-      ),
-    },
-  ],
-});

package/src/components/Text/Text.test.tsx

@@ -1,60 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, expectNoA11yViolations } from '../../test/utils';
-import { Text } from './index';
-
-describe('Text', () => {
-  it('renders a span by default', () => {
-    render(<Text>Hello</Text>);
-    const el = screen.getByText('Hello');
-    expect(el.tagName).toBe('SPAN');
-  });
-
-  it('renders as a different element via "as" prop', () => {
-    render(<Text as="h1">Heading</Text>);
-    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Heading');
-  });
-
-  it('applies size, weight, and color classes', () => {
-    render(<Text size="lg" weight="semibold" color="secondary">Styled</Text>);
-    const el = screen.getByText('Styled');
-    expect(el).toHaveClass('size-lg');
-    expect(el).toHaveClass('weight-semibold');
-    expect(el).toHaveClass('color-secondary');
-  });
-
-  it('applies bold weight class', () => {
-    render(<Text weight="bold">Bold text</Text>);
-    expect(screen.getByText('Bold text')).toHaveClass('weight-bold');
-  });
-
-  it('applies muted color class (alias for tertiary)', () => {
-    render(<Text color="muted">Muted text</Text>);
-    expect(screen.getByText('Muted text')).toHaveClass('color-muted');
-  });
-
-  it('applies md size class (alias for base)', () => {
-    render(<Text size="md">Medium text</Text>);
-    expect(screen.getByText('Medium text')).toHaveClass('size-md');
-  });
-
-  it('applies section-label variant class', () => {
-    render(<Text variant="section-label">Label</Text>);
-    expect(screen.getByText('Label')).toHaveClass('variant-section-label');
-  });
-
-  it('applies truncate class', () => {
-    render(<Text truncate>Long text that should truncate</Text>);
-    expect(screen.getByText('Long text that should truncate')).toHaveClass('truncate');
-  });
-
-  it('forwards ref', () => {
-    const ref = vi.fn();
-    render(<Text ref={ref}>Ref</Text>);
-    expect(ref).toHaveBeenCalled();
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(<Text>Accessible text</Text>);
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/Textarea/Textarea.fragment.tsx

@@ -1,179 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Textarea } from '.';
-
-export default defineFragment({
-  component: Textarea,
-
-  meta: {
-    name: 'Textarea',
-    description: 'Multi-line text input for longer form content',
-    category: 'forms',
-    status: 'stable',
-    tags: ['input', 'text', 'form', 'multiline'],
-  },
-
-  usage: {
-    when: [
-      'Collecting multi-line text (comments, descriptions)',
-      'Free-form text input that may span multiple lines',
-      'Message composition fields',
-      'Code or content editing',
-    ],
-    whenNot: [
-      'Single-line input (use Input)',
-      'Rich text editing (use rich text editor)',
-      'Selecting from predefined options (use Select)',
-    ],
-    guidelines: [
-      'Set appropriate rows for expected content length',
-      'Use placeholder to show example format',
-      'Show character count when maxLength is set',
-      'Consider auto-resize for better UX',
-    ],
-    accessibility: [
-      'Always provide a visible label',
-      'Use helperText for format hints',
-      'Error messages should be descriptive',
-    ],
-  },
-
-  props: {
-    value: {
-      type: 'string',
-      description: 'Controlled value',
-    },
-    placeholder: {
-      type: 'string',
-      description: 'Placeholder text',
-    },
-    rows: {
-      type: 'number',
-      default: 3,
-      description: 'Number of visible text rows',
-    },
-    minRows: {
-      type: 'number',
-      description: 'Minimum number of rows when auto-resizing',
-    },
-    maxRows: {
-      type: 'number',
-      description: 'Maximum number of rows when auto-resizing',
-    },
-    label: {
-      type: 'string',
-      description: 'Label text above the textarea',
-    },
-    helperText: {
-      type: 'string',
-      description: 'Helper text below the textarea',
-    },
-    error: {
-      type: 'boolean',
-      default: false,
-      description: 'Error state',
-    },
-    disabled: {
-      type: 'boolean',
-      default: false,
-      description: 'Disabled state',
-    },
-    resize: {
-      type: 'enum',
-      values: ['none', 'vertical', 'horizontal', 'both'],
-      default: 'vertical',
-      description: 'Resize behavior',
-    },
-    maxLength: {
-      type: 'number',
-      description: 'Maximum character length',
-    },
-  },
-
-  relations: [
-    {
-      component: 'Input',
-      relationship: 'alternative',
-      note: 'Use Input for single-line text',
-    },
-  ],
-
-  contract: {
-    propsSummary: [
-      'value: string - controlled value',
-      'rows: number - visible rows (default: 3)',
-      'label: string - label text',
-      'error: boolean - error state',
-      'disabled: boolean - disabled state',
-      'resize: none|vertical|horizontal|both',
-    ],
-    scenarioTags: [
-      'form.textarea',
-      'form.comment',
-      'form.description',
-    ],
-    a11yRules: [
-      'A11Y_LABEL_REQUIRED',
-    ],
-    bans: [],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic textarea with label',
-      render: () => (
-        <Textarea
-          label="Description"
-          placeholder="Enter a description..."
-        />
-      ),
-    },
-    {
-      name: 'With Helper Text',
-      description: 'Textarea with additional guidance',
-      render: () => (
-        <Textarea
-          label="Bio"
-          placeholder="Tell us about yourself..."
-          helperText="Max 500 characters"
-          maxLength={500}
-        />
-      ),
-    },
-    {
-      name: 'Error State',
-      description: 'Textarea showing validation error',
-      render: () => (
-        <Textarea
-          label="Comments"
-          placeholder="Add your comments..."
-          error
-          helperText="This field is required"
-        />
-      ),
-    },
-    {
-      name: 'Disabled',
-      description: 'Non-interactive textarea',
-      render: () => (
-        <Textarea
-          label="Notes"
-          placeholder="Cannot edit..."
-          disabled
-        />
-      ),
-    },
-    {
-      name: 'Custom Rows',
-      description: 'Textarea with more visible rows',
-      render: () => (
-        <Textarea
-          label="Long Description"
-          placeholder="Enter detailed information..."
-          rows={6}
-        />
-      ),
-    },
-  ],
-});

package/src/components/Textarea/Textarea.test.tsx

@@ -1,57 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
-import { Textarea } from './index';
-
-describe('Textarea', () => {
-  it('renders a textbox', () => {
-    render(<Textarea aria-label="Notes" />);
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
-  });
-
-  it('renders a label associated with the textarea', () => {
-    render(<Textarea label="Description" />);
-    const textarea = screen.getByRole('textbox');
-    expect(textarea).toHaveAccessibleName('Description');
-  });
-
-  it('applies resize style class', () => {
-    render(<Textarea aria-label="Notes" resize="none" />);
-    const textarea = screen.getByRole('textbox');
-    expect(textarea.className).toContain('resize-none');
-  });
-
-  it('sets min and max height styles from minRows and maxRows', () => {
-    render(<Textarea aria-label="Notes" minRows={2} maxRows={5} />);
-    const textarea = screen.getByRole('textbox');
-    expect(textarea.style.minHeight).toBeTruthy();
-    expect(textarea.style.maxHeight).toBeTruthy();
-  });
-
-  it('sets aria-invalid when error is true', () => {
-    render(<Textarea label="Notes" error />);
-    expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid', 'true');
-  });
-
-  it('disables the textarea when disabled prop is true', () => {
-    render(<Textarea label="Notes" disabled />);
-    expect(screen.getByRole('textbox')).toBeDisabled();
-  });
-
-  it('associates helperText via aria-describedby', () => {
-    render(<Textarea label="Notes" helperText="Optional field" />);
-    expect(screen.getByRole('textbox')).toHaveAccessibleDescription('Optional field');
-  });
-
-  it('calls onChange with the string value', async () => {
-    const handleChange = vi.fn();
-    const user = userEvent.setup();
-    render(<Textarea label="Notes" onChange={handleChange} />);
-    await user.type(screen.getByRole('textbox'), 'x');
-    expect(handleChange).toHaveBeenCalledWith('x');
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(<Textarea label="Accessible textarea" />);
-    await expectNoA11yViolations(container);
-  });
-});