@fragments-sdk/ui 0.13.0 → 0.15.1

package/src/components/Input/Input.fragment.tsx

@@ -1,192 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Input } from '.';
-
-export default defineFragment({
-  component: Input,
-
-  meta: {
-    name: 'Input',
-    description: 'Text input field for single-line user data entry',
-    category: 'forms',
-    status: 'stable',
-    tags: ['form', 'input', 'text'],
-  },
-
-  usage: {
-    when: [
-      'Collecting single-line text data from users',
-      'Email, password, phone number, or URL input',
-      'Search fields',
-      'Short form fields (name, title, etc.)',
-    ],
-    whenNot: [
-      'Multi-line text (use Textarea)',
-      'Selecting from predefined options (use Select)',
-      'Boolean input (use Checkbox or Switch)',
-      'Date/time input (use DatePicker)',
-    ],
-    guidelines: [
-      'Always provide a label for accessibility',
-      'Use appropriate input type for data validation',
-      'Show validation errors with error prop and helperText',
-      'Use placeholder for format hints, not labels',
-    ],
-    accessibility: [
-      'Labels must be associated with inputs',
-      'Error messages should be announced to screen readers',
-      'Required fields should be indicated',
-    ],
-  },
-
-  props: {
-    value: {
-      type: 'string',
-      description: 'Current input value (controlled)',
-    },
-    placeholder: {
-      type: 'string',
-      description: 'Placeholder text shown when empty',
-      constraints: ['Use for format hints only, not as a replacement for labels'],
-    },
-    type: {
-      type: 'enum',
-      values: ['text', 'email', 'password', 'number', 'tel', 'url'],
-      default: 'text',
-      description: 'HTML input type for validation and keyboard',
-    },
-    size: {
-      type: 'enum',
-      values: ['sm', 'md', 'lg'],
-      default: 'md',
-      description: 'Size variant',
-    },
-    disabled: {
-      type: 'boolean',
-      default: false,
-      description: 'Whether the input is interactive',
-    },
-    error: {
-      type: 'boolean',
-      default: false,
-      description: 'Whether to show error styling',
-    },
-    label: {
-      type: 'string',
-      description: 'Label text displayed above input',
-    },
-    helperText: {
-      type: 'string',
-      description: 'Helper or error message below input',
-    },
-    shortcut: {
-      type: 'string',
-      description: 'Keyboard shortcut hint displayed inside the input',
-    },
-    onChange: {
-      type: 'function',
-      description: 'Called with new value on change',
-    },
-    inputStyle: {
-      type: 'object',
-      description: 'Inline styles applied directly to the input element',
-    },
-    inputClassName: {
-      type: 'string',
-      description: 'Class name applied directly to the input element',
-    },
-  },
-
-  relations: [
-    {
-      component: 'Textarea',
-      relationship: 'alternative',
-      note: 'Use Textarea for multi-line text input',
-    },
-    {
-      component: 'Select',
-      relationship: 'alternative',
-      note: 'Use Select when choosing from predefined options',
-    },
-    {
-      component: 'Field',
-      relationship: 'parent',
-      note: 'Use Field for advanced form composition and custom controls',
-    },
-  ],
-
-  contract: {
-    propsSummary: [
-      'type: text|email|password|number|tel|url (default: text)',
-      'value: string - controlled input value',
-      'label: string - accessible label text',
-      'placeholder: string - format hint only',
-      'disabled: boolean - disables interaction',
-      'error: boolean - shows error styling',
-      'helperText: string - helper/error message',
-    ],
-    scenarioTags: [
-      'form.input',
-      'form.text',
-      'form.email',
-      'form.password',
-      'form.search',
-    ],
-    a11yRules: [
-      'A11Y_INPUT_LABEL',
-      'A11Y_INPUT_ERROR',
-      'A11Y_INPUT_REQUIRED',
-    ],
-    bans: [
-      {
-        pattern: 'placeholder=.*label',
-        message: 'Use label prop for labels, not placeholder',
-      },
-    ],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic text input',
-      render: () => <Input label="Name" placeholder="Enter your name" />,
-    },
-    {
-      name: 'With Value',
-      description: 'Input with pre-filled value',
-      render: () => <Input label="Email" type="email" value="user@example.com" />,
-    },
-    {
-      name: 'With Helper',
-      description: 'Input with helper text',
-      render: () => (
-        <Input
-          label="Password"
-          type="password"
-          placeholder="Create a password"
-          helperText="Must be at least 8 characters"
-        />
-      ),
-    },
-    {
-      name: 'Error State',
-      description: 'Input showing validation error',
-      render: () => (
-        <Input
-          label="Email"
-          type="email"
-          value="invalid-email"
-          error
-          helperText="Please enter a valid email address"
-        />
-      ),
-    },
-    {
-      name: 'Disabled',
-      description: 'Non-interactive input',
-      render: () => (
-        <Input label="Username" value="readonly-user" disabled />
-      ),
-    },
-  ],
-});

package/src/components/Input/Input.test.tsx

@@ -1,107 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
-import { Input } from './index';
-
-describe('Input', () => {
-  it('renders a textbox', () => {
-    render(<Input aria-label="Name" />);
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
-  });
-
-  it('renders label via Field.Label when label prop is provided', () => {
-    render(<Input label="Email" />);
-    const input = screen.getByRole('textbox');
-    expect(screen.getByText('Email')).toBeInTheDocument();
-    // Field.Label associates via htmlFor — input should be labelled
-    expect(input).toHaveAccessibleName('Email');
-  });
-
-  it('associates helperText via aria-describedby', () => {
-    render(<Input label="Password" helperText="Must be 8+ characters" />);
-    const input = screen.getByRole('textbox');
-    expect(input).toHaveAccessibleDescription('Must be 8+ characters');
-  });
-
-  it('sets aria-invalid when error is true', () => {
-    render(<Input label="Email" error />);
-    const input = screen.getByRole('textbox');
-    expect(input).toHaveAttribute('aria-invalid', 'true');
-  });
-
-  it('disables the input when disabled prop is true', () => {
-    render(<Input label="Name" disabled />);
-    expect(screen.getByRole('textbox')).toBeDisabled();
-  });
-
-  it('renders a controlled value', () => {
-    render(<Input label="Name" value="hello" onChange={() => {}} />);
-    expect(screen.getByRole('textbox')).toHaveValue('hello');
-  });
-
-  it('renders shortcut as a kbd element', () => {
-    const { container } = render(<Input aria-label="Search" shortcut="⌘K" />);
-    const kbd = container.querySelector('kbd');
-    expect(kbd).toBeInTheDocument();
-    expect(kbd).toHaveTextContent('⌘K');
-  });
-
-  it('applies size class', () => {
-    render(<Input aria-label="Name" size="sm" />);
-    const input = screen.getByRole('textbox');
-    expect(input.className).toContain('sm');
-  });
-
-  it('forwards ref to the input element', () => {
-    const ref = vi.fn<(el: HTMLInputElement | null) => void>();
-    render(<Input aria-label="Name" ref={ref} />);
-    expect(ref).toHaveBeenCalledWith(expect.any(HTMLInputElement));
-  });
-
-  it('calls onChange with the string value', async () => {
-    const handleChange = vi.fn();
-    const user = userEvent.setup();
-    render(<Input label="Name" onChange={handleChange} />);
-    await user.type(screen.getByRole('textbox'), 'a');
-    expect(handleChange).toHaveBeenCalledWith('a');
-  });
-
-  it('focuses the input when shortcut key is pressed', () => {
-    render(<Input aria-label="Search" shortcut="⌘K" />);
-    const input = screen.getByRole('textbox');
-    expect(document.activeElement).not.toBe(input);
-
-    // Simulate pressing ⌘K (Meta+K)
-    document.dispatchEvent(
-      new KeyboardEvent('keydown', { key: 'k', metaKey: true, bubbles: true })
-    );
-
-    expect(document.activeElement).toBe(input);
-  });
-
-  it('focuses the input when Ctrl+K is pressed (Windows/Linux)', () => {
-    render(<Input aria-label="Search" shortcut="⌘K" />);
-    const input = screen.getByRole('textbox');
-
-    document.dispatchEvent(
-      new KeyboardEvent('keydown', { key: 'k', ctrlKey: true, bubbles: true })
-    );
-
-    expect(document.activeElement).toBe(input);
-  });
-
-  it('does not focus when wrong key is pressed', () => {
-    render(<Input aria-label="Search" shortcut="⌘K" />);
-    const input = screen.getByRole('textbox');
-
-    document.dispatchEvent(
-      new KeyboardEvent('keydown', { key: 'j', metaKey: true, bubbles: true })
-    );
-
-    expect(document.activeElement).not.toBe(input);
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(<Input label="Accessible input" />);
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/Link/Link.fragment.tsx

@@ -1,145 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Link } from '.';
-
-export default defineFragment({
-  component: Link,
-
-  meta: {
-    name: 'Link',
-    description: 'Styled anchor element for navigation. Supports internal and external links with consistent visual treatment.',
-    category: 'navigation',
-    status: 'stable',
-    tags: ['link', 'anchor', 'navigation', 'href', 'url'],
-    since: '0.1.0',
-  },
-
-  usage: {
-    when: [
-      'Inline text links within paragraphs',
-      'Navigation links in footers or sidebars',
-      '"Forgot password?" or "Sign up" links in forms',
-      'External links to documentation or resources',
-    ],
-    whenNot: [
-      'Primary call-to-action (use Button instead)',
-      'Navigation tabs (use Tabs component)',
-      'Menu items in dropdowns (use Menu component)',
-      'Cards that link to detail pages (use Card with onClick)',
-    ],
-    guidelines: [
-      'Link text should describe the destination, not "click here"',
-      'Use external prop for links that open in new tabs',
-      'Use subtle variant for secondary/contextual links',
-      'Ensure links are distinguishable from regular text',
-    ],
-    accessibility: [
-      'Link text must be descriptive of the destination',
-      'External links should indicate they open in new window',
-      'Links must have visible focus indicators',
-      'Avoid using links that look like buttons without button semantics',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'Link text content',
-      required: true,
-    },
-    variant: {
-      type: 'enum',
-      description: 'Visual style variant',
-      values: ['default', 'subtle', 'muted'],
-      default: 'default',
-    },
-    underline: {
-      type: 'enum',
-      description: 'Underline behavior',
-      values: ['always', 'hover', 'none'],
-      default: 'hover',
-    },
-    external: {
-      type: 'boolean',
-      description: 'Opens in new tab with noopener noreferrer',
-      default: 'false',
-    },
-    asChild: {
-      type: 'boolean',
-      description: 'Render as child element (polymorphic). Merges link props onto the single child. Useful for rendering as Next.js Link for client-side navigation.',
-      default: 'false',
-    },
-  },
-
-  relations: [
-    { component: 'Button', relationship: 'alternative', note: 'Use Button for primary actions, Link for navigation' },
-    { component: 'Text', relationship: 'parent', note: 'Links often appear within Text components' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'children: ReactNode - link text (required)',
-      'href: string - destination URL',
-      'variant: default|subtle|muted - visual style',
-      'underline: always|hover|none - underline behavior',
-      'external: boolean - opens in new tab',
-      'asChild: boolean - render as child element for polymorphic usage (e.g. Next.js Link)',
-    ],
-    scenarioTags: [
-      'navigation.link',
-      'content.inline',
-      'action.navigate',
-    ],
-    a11yRules: ['A11Y_LINK_TEXT', 'A11Y_LINK_FOCUS'],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Standard link with hover underline',
-      render: () => <Link href="#">Learn more about our services</Link>,
-    },
-    {
-      name: 'Variants',
-      description: 'Visual style options',
-      render: () => (
-        <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
-          <Link href="#" variant="default">Default</Link>
-          <Link href="#" variant="subtle">Subtle</Link>
-          <Link href="#" variant="muted">Muted</Link>
-        </div>
-      ),
-    },
-    {
-      name: 'Underline Styles',
-      description: 'Different underline behaviors',
-      render: () => (
-        <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
-          <Link href="#" underline="always">Always underlined</Link>
-          <Link href="#" underline="hover">Underline on hover</Link>
-          <Link href="#" underline="none">No underline</Link>
-        </div>
-      ),
-    },
-    {
-      name: 'External Link',
-      description: 'Link that opens in new tab',
-      render: () => (
-        <Link href="https://example.com" external>
-          View documentation ↗
-        </Link>
-      ),
-    },
-    {
-      name: 'As Child (Polymorphic)',
-      description: 'Renders as a custom element while applying Link styles. Useful with Next.js Link for client-side navigation.',
-      render: () => (
-        <Link asChild variant="subtle">
-          <button type="button" onClick={() => alert('Navigated!')}>
-            Polymorphic link as button
-          </button>
-        </Link>
-      ),
-    },
-  ],
-});

package/src/components/Link/Link.test.tsx

@@ -1,60 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, expectNoA11yViolations } from '../../test/utils';
-import { Link } from './index';
-
-describe('Link', () => {
-  it('renders an anchor element', () => {
-    render(<Link href="/page">Go</Link>);
-    const link = screen.getByRole('link', { name: 'Go' });
-    expect(link.tagName).toBe('A');
-    expect(link).toHaveAttribute('href', '/page');
-  });
-
-  it('applies variant and underline classes', () => {
-    render(<Link href="#" variant="subtle" underline="always">Styled</Link>);
-    const link = screen.getByRole('link');
-    expect(link).toHaveClass('subtle');
-    expect(link).toHaveClass('underline-always');
-  });
-
-  it('adds external link attributes', () => {
-    render(<Link href="https://example.com" external>External</Link>);
-    const link = screen.getByRole('link');
-    expect(link).toHaveAttribute('target', '_blank');
-    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
-  });
-
-  it('forwards ref', () => {
-    const ref = vi.fn();
-    render(<Link ref={ref} href="#">Ref</Link>);
-    expect(ref).toHaveBeenCalled();
-  });
-
-  it('renders as child element when asChild is true', () => {
-    render(
-      <Link asChild variant="subtle">
-        <button type="button">Click me</button>
-      </Link>
-    );
-    const btn = screen.getByRole('button', { name: 'Click me' });
-    expect(btn.tagName).toBe('BUTTON');
-    expect(btn).toHaveClass('link');
-    expect(btn).toHaveClass('subtle');
-  });
-
-  it('merges classNames when asChild is true', () => {
-    render(
-      <Link asChild variant="default">
-        <a href="/test" className="custom-class">Test</a>
-      </Link>
-    );
-    const link = screen.getByRole('link', { name: 'Test' });
-    expect(link).toHaveClass('link');
-    expect(link).toHaveClass('custom-class');
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(<Link href="/page">Accessible link</Link>);
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/List/List.fragment.tsx

@@ -1,152 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { List } from '.';
-import { Check } from '@phosphor-icons/react';
-
-export default defineFragment({
-  component: List,
-
-  meta: {
-    name: 'List',
-    description: 'Compound component for rendering ordered or unordered lists with consistent styling. Supports bullet, numbered, and icon-prefixed items.',
-    category: 'display',
-    status: 'stable',
-    tags: ['list', 'items', 'bullet', 'ordered', 'unordered'],
-    since: '0.1.0',
-  },
-
-  usage: {
-    when: [
-      'Feature lists with checkmarks or icons',
-      'Ordered steps or instructions',
-      'Navigation lists in sidebars',
-      'Pricing plan feature comparisons',
-    ],
-    whenNot: [
-      'Interactive selection lists (use Menu or Select)',
-      'Data tables with columns (use Table)',
-      'Cards in a grid (use Grid with Card)',
-      'Navigation tabs (use Tabs)',
-    ],
-    guidelines: [
-      'Use as="ol" for sequential or numbered content',
-      'Use variant="icon" with meaningful icons for feature lists',
-      'Keep list items concise and parallel in structure',
-      'Use consistent icons within a single list',
-    ],
-    accessibility: [
-      'Use semantic list elements (ul, ol) for screen reader support',
-      'List items are automatically announced with count',
-      'Icons are decorative; ensure text conveys meaning',
-      'Avoid deeply nested lists (3+ levels)',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'List.Item components',
-      required: true,
-    },
-    as: {
-      type: 'enum',
-      description: 'List type',
-      values: ['ul', 'ol'],
-      default: 'ul',
-    },
-    variant: {
-      type: 'enum',
-      description: 'List style variant',
-      values: ['none', 'disc', 'decimal', 'icon'],
-      default: 'disc',
-    },
-    gap: {
-      type: 'enum',
-      description: 'Spacing between items',
-      values: ['none', 'xs', 'sm', 'md', 'lg'],
-      default: 'sm',
-    },
-  },
-
-  relations: [
-    { component: 'Icon', relationship: 'child', note: 'Use Icon as List.Item icon prop' },
-    { component: 'Stack', relationship: 'alternative', note: 'Use Stack for non-semantic vertical lists' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'children: List.Item[] - list items (required)',
-      'as: ul|ol - list type',
-      'variant: none|disc|decimal|icon - list style',
-      'gap: none|xs|sm|md|lg - item spacing',
-    ],
-    subComponents: [
-      {
-        name: 'List.Item',
-        props: [
-          'children: ReactNode - item content',
-          'icon: ReactNode - icon for variant="icon"',
-        ],
-      },
-    ],
-    scenarioTags: [
-      'content.list',
-      'layout.vertical',
-      'display.items',
-    ],
-    a11yRules: ['A11Y_LIST_SEMANTIC', 'A11Y_LIST_NESTING'],
-  },
-
-  variants: [
-    {
-      name: 'Bullet List',
-      description: 'Default unordered list with bullets',
-      render: () => (
-        <List variant="disc">
-          <List.Item>First item</List.Item>
-          <List.Item>Second item</List.Item>
-          <List.Item>Third item</List.Item>
-        </List>
-      ),
-    },
-    {
-      name: 'Numbered List',
-      description: 'Ordered list with numbers',
-      render: () => (
-        <List as="ol" variant="decimal">
-          <List.Item>Create your account</List.Item>
-          <List.Item>Configure your settings</List.Item>
-          <List.Item>Start building</List.Item>
-        </List>
-      ),
-    },
-    {
-      name: 'Icon List',
-      description: 'List with custom icons per item',
-      render: () => (
-        <List variant="icon">
-          <List.Item icon={<Check weight="bold" color="var(--fui-color-success)" />}>
-            Unlimited projects
-          </List.Item>
-          <List.Item icon={<Check weight="bold" color="var(--fui-color-success)" />}>
-            Priority support
-          </List.Item>
-          <List.Item icon={<Check weight="bold" color="var(--fui-color-success)" />}>
-            Advanced analytics
-          </List.Item>
-        </List>
-      ),
-    },
-    {
-      name: 'No Style',
-      description: 'Plain list without markers',
-      render: () => (
-        <List variant="none" gap="md">
-          <List.Item>Dashboard</List.Item>
-          <List.Item>Settings</List.Item>
-          <List.Item>Profile</List.Item>
-        </List>
-      ),
-    },
-  ],
-});