@fragments-sdk/ui 0.13.0 → 0.15.1

package/src/components/Header/Header.test.tsx

@@ -1,188 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, userEvent, waitFor, expectNoA11yViolations } from '../../test/utils';
-import { Header } from './index';
-
-describe('Header', () => {
-  it('renders as a banner landmark (header element)', () => {
-    render(
-      <Header>
-        <Header.Brand>Logo</Header.Brand>
-      </Header>
-    );
-    expect(screen.getByRole('banner')).toBeInTheDocument();
-  });
-
-  it('renders Brand slot content', () => {
-    render(
-      <Header>
-        <Header.Brand>My App</Header.Brand>
-      </Header>
-    );
-    expect(screen.getByText('My App')).toBeInTheDocument();
-  });
-
-  it('renders Brand as a link when href is provided', () => {
-    render(
-      <Header>
-        <Header.Brand href="/">Home</Header.Brand>
-      </Header>
-    );
-    const link = screen.getByRole('link', { name: 'Home' });
-    expect(link).toHaveAttribute('href', '/');
-  });
-
-  it('renders navigation with accessible label', () => {
-    render(
-      <Header>
-        <Header.Nav aria-label="Primary navigation">
-          <Header.NavItem href="/about">About</Header.NavItem>
-          <Header.NavItem href="/contact">Contact</Header.NavItem>
-        </Header.Nav>
-      </Header>
-    );
-    expect(screen.getByRole('navigation', { name: 'Primary navigation' })).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: 'About' })).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: 'Contact' })).toBeInTheDocument();
-  });
-
-  it('marks active NavItem with aria-current="page"', () => {
-    render(
-      <Header>
-        <Header.Nav>
-          <Header.NavItem href="/about" active>About</Header.NavItem>
-          <Header.NavItem href="/contact">Contact</Header.NavItem>
-        </Header.Nav>
-      </Header>
-    );
-    expect(screen.getByRole('link', { name: 'About' })).toHaveAttribute('aria-current', 'page');
-    expect(screen.getByRole('link', { name: 'Contact' })).not.toHaveAttribute('aria-current');
-  });
-
-  it('renders Actions slot', () => {
-    render(
-      <Header>
-        <Header.Actions>
-          <button>Sign In</button>
-        </Header.Actions>
-      </Header>
-    );
-    expect(screen.getByRole('button', { name: 'Sign In' })).toBeInTheDocument();
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(
-      <Header>
-        <Header.Brand>Logo</Header.Brand>
-        <Header.Nav aria-label="Main">
-          <Header.NavItem href="/home">Home</Header.NavItem>
-        </Header.Nav>
-      </Header>
-    );
-    await expectNoA11yViolations(container);
-  });
-});
-
-describe('Header.NavMenu', () => {
-  it('renders a trigger button with the label', () => {
-    render(
-      <Header>
-        <Header.Nav>
-          <Header.NavMenu label="Docs">
-            <Header.NavMenuItem href="/cli">CLI</Header.NavMenuItem>
-          </Header.NavMenu>
-        </Header.Nav>
-      </Header>
-    );
-    expect(screen.getByRole('button', { name: /Docs/ })).toBeInTheDocument();
-  });
-
-  it('opens dropdown on click and shows menu items', async () => {
-    const user = userEvent.setup();
-    render(
-      <Header>
-        <Header.Nav>
-          <Header.NavMenu label="Docs">
-            <Header.NavMenuItem href="/cli">CLI Reference</Header.NavMenuItem>
-            <Header.NavMenuItem href="/mcp">MCP Tools</Header.NavMenuItem>
-          </Header.NavMenu>
-        </Header.Nav>
-      </Header>
-    );
-
-    await user.click(screen.getByRole('button', { name: /Docs/ }));
-    await waitFor(() => {
-      expect(screen.getByText('CLI Reference')).toBeInTheDocument();
-      expect(screen.getByText('MCP Tools')).toBeInTheDocument();
-    });
-  });
-
-  it('applies active class to trigger when active prop is true', () => {
-    render(
-      <Header>
-        <Header.Nav>
-          <Header.NavMenu label="Docs" active>
-            <Header.NavMenuItem href="/cli">CLI</Header.NavMenuItem>
-          </Header.NavMenu>
-        </Header.Nav>
-      </Header>
-    );
-    const trigger = screen.getByRole('button', { name: /Docs/ });
-    expect(trigger.className).toMatch(/navItemActive/);
-  });
-
-  it('renders NavMenuItem with href as a link', async () => {
-    const user = userEvent.setup();
-    render(
-      <Header>
-        <Header.Nav>
-          <Header.NavMenu label="Docs">
-            <Header.NavMenuItem href="/getting-started">Getting Started</Header.NavMenuItem>
-          </Header.NavMenu>
-        </Header.Nav>
-      </Header>
-    );
-
-    await user.click(screen.getByRole('button', { name: /Docs/ }));
-    await waitFor(() => {
-      const item = screen.getByText('Getting Started');
-      const link = item.closest('a') || item;
-      expect(link).toHaveAttribute('href', '/getting-started');
-    });
-  });
-
-  it('applies active class to NavMenuItem when active', async () => {
-    const user = userEvent.setup();
-    render(
-      <Header>
-        <Header.Nav>
-          <Header.NavMenu label="Docs">
-            <Header.NavMenuItem href="/cli" active>CLI</Header.NavMenuItem>
-          </Header.NavMenu>
-        </Header.Nav>
-      </Header>
-    );
-
-    await user.click(screen.getByRole('button', { name: /Docs/ }));
-    await waitFor(() => {
-      const item = screen.getByText('CLI');
-      expect(item.className).toMatch(/navMenuItemActive/);
-    });
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(
-      <Header>
-        <Header.Nav aria-label="Main">
-          <Header.NavItem href="/home">Home</Header.NavItem>
-          <Header.NavMenu label="Docs">
-            <Header.NavMenuItem href="/cli">CLI</Header.NavMenuItem>
-            <Header.NavMenuItem href="/mcp">MCP</Header.NavMenuItem>
-          </Header.NavMenu>
-        </Header.Nav>
-      </Header>
-    );
-    await expectNoA11yViolations(container, {
-      disabledRules: ['aria-command-name'],
-    });
-  });
-});

package/src/components/Icon/Icon.fragment.tsx

@@ -1,143 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Icon } from '.';
-import { Heart, Star, Check, Warning, Info } from '@phosphor-icons/react';
-
-export default defineFragment({
-  component: Icon,
-
-  meta: {
-    name: 'Icon',
-    description: 'Wrapper for Phosphor icons with consistent sizing and semantic colors. Provides standardized icon rendering across the design system.',
-    category: 'display',
-    status: 'stable',
-    tags: ['icon', 'phosphor', 'visual', 'symbol', 'graphic'],
-    since: '0.1.0',
-  },
-
-  usage: {
-    when: [
-      'Displaying UI icons alongside text or in buttons',
-      'Indicating status or state visually',
-      'Adding visual hierarchy to feature lists',
-      'Decorating cards or stats with relevant symbols',
-    ],
-    whenNot: [
-      'Large decorative illustrations (use Image or custom SVG)',
-      'Logo display (use dedicated Logo component)',
-      'Complex graphics with multiple colors',
-      'Animated icons (use custom implementation)',
-    ],
-    guidelines: [
-      'Use semantic color variants (success, error, warning) for status indication',
-      'Pair icons with text labels for accessibility',
-      'Match icon weight to surrounding text weight for visual consistency',
-      'Use consistent sizes within the same context',
-    ],
-    accessibility: [
-      'Icons are decorative by default (aria-hidden)',
-      'Always pair with visible or visually-hidden text for meaning',
-      'Do not rely on color alone to convey information',
-      'Consider using VisuallyHidden for icon-only buttons',
-    ],
-  },
-
-  props: {
-    icon: {
-      type: 'custom',
-      description: 'Phosphor icon component to render',
-      required: true,
-    },
-    size: {
-      type: 'enum',
-      description: 'Icon size',
-      values: ['xs', 'sm', 'md', 'lg', 'xl'],
-      default: 'md',
-    },
-    weight: {
-      type: 'enum',
-      description: 'Icon stroke weight/style',
-      values: ['thin', 'light', 'regular', 'bold', 'fill', 'duotone'],
-      default: 'regular',
-    },
-    variant: {
-      type: 'enum',
-      description: 'Semantic color variant',
-      values: ['default', 'primary', 'secondary', 'tertiary', 'accent', 'success', 'warning', 'error'],
-      default: 'default',
-    },
-    color: {
-      type: 'enum',
-      description: 'Deprecated alias for variant',
-      values: ['primary', 'secondary', 'tertiary', 'accent', 'success', 'warning', 'error'],
-    },
-  },
-
-  relations: [
-    { component: 'Button', relationship: 'child', note: 'Use inside icon-only buttons with VisuallyHidden label' },
-    { component: 'VisuallyHidden', relationship: 'sibling', note: 'Pair with VisuallyHidden for accessible icon-only elements' },
-    { component: 'Badge', relationship: 'child', note: 'Can be used as badge icon prop' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'icon: PhosphorIcon - icon component (required)',
-      'size: xs|sm|md|lg|xl - icon size',
-      'weight: thin|light|regular|bold|fill|duotone - stroke style',
-      'variant: default|primary|secondary|tertiary|accent|success|warning|error - color',
-    ],
-    scenarioTags: [
-      'display.icon',
-      'feedback.status',
-      'decoration.visual',
-    ],
-    a11yRules: ['A11Y_ICON_LABEL', 'A11Y_COLOR_CONTRAST'],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic icon with default styling',
-      render: () => <Icon icon={Heart} />,
-    },
-    {
-      name: 'Sizes',
-      description: 'Available size options',
-      render: () => (
-        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-          <Icon icon={Star} size="xs" />
-          <Icon icon={Star} size="sm" />
-          <Icon icon={Star} size="md" />
-          <Icon icon={Star} size="lg" />
-          <Icon icon={Star} size="xl" />
-        </div>
-      ),
-    },
-    {
-      name: 'Semantic Colors',
-      description: 'Status and semantic color variants',
-      render: () => (
-        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-          <Icon icon={Check} variant="success" />
-          <Icon icon={Warning} variant="warning" />
-          <Icon icon={Warning} variant="error" />
-          <Icon icon={Info} variant="accent" />
-        </div>
-      ),
-    },
-    {
-      name: 'Weights',
-      description: 'Icon weight/style options',
-      render: () => (
-        <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-          <Icon icon={Heart} weight="thin" />
-          <Icon icon={Heart} weight="light" />
-          <Icon icon={Heart} weight="regular" />
-          <Icon icon={Heart} weight="bold" />
-          <Icon icon={Heart} weight="fill" />
-          <Icon icon={Heart} weight="duotone" />
-        </div>
-      ),
-    },
-  ],
-});

package/src/components/Icon/Icon.test.tsx

@@ -1,38 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, expectNoA11yViolations } from '../../test/utils';
-import { Icon } from './index';
-
-// Mock Phosphor icon component
-function MockIcon(props: { size?: number; weight?: string }) {
-  return <svg data-testid="mock-icon" data-size={props.size} data-weight={props.weight} />;
-}
-
-describe('Icon', () => {
-  it('renders the icon component inside a span', () => {
-    const { container } = render(<Icon icon={MockIcon} />);
-    const wrapper = container.firstChild as HTMLElement;
-    expect(wrapper.tagName).toBe('SPAN');
-    expect(wrapper.querySelector('svg')).toBeInTheDocument();
-  });
-
-  it('passes the correct pixel size to the icon', () => {
-    const { container } = render(<Icon icon={MockIcon} size="lg" />);
-    const svg = container.querySelector('[data-testid="mock-icon"]');
-    expect(svg).toHaveAttribute('data-size', '24');
-  });
-
-  it('applies variant color class', () => {
-    const { container } = render(<Icon icon={MockIcon} variant="error" />);
-    expect(container.firstChild).toHaveClass('error');
-  });
-
-  it('does not add aria-hidden by default (wrapping span is presentational)', () => {
-    const { container } = render(<Icon icon={MockIcon} aria-hidden="true" />);
-    expect(container.firstChild).toHaveAttribute('aria-hidden', 'true');
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(<Icon icon={MockIcon} aria-hidden="true" />);
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/Image/Image.fragment.tsx

@@ -1,195 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Image } from '.';
-
-export default defineFragment({
-  component: Image,
-
-  meta: {
-    name: 'Image',
-    description: 'Responsive image component with aspect ratio control, loading states, and error fallbacks. Handles image display with consistent styling.',
-    category: 'display',
-    status: 'stable',
-    tags: ['image', 'media', 'photo', 'picture', 'visual'],
-    since: '0.1.0',
-  },
-
-  usage: {
-    when: [
-      'Displaying product images in cards or grids',
-      'Hero images with specific aspect ratios',
-      'User-uploaded content that may fail to load',
-      'Thumbnails in lists or galleries',
-    ],
-    whenNot: [
-      'User avatars (use Avatar component)',
-      'Icons or symbols (use Icon component)',
-      'Background images (use CSS background-image)',
-      'SVG illustrations (use inline SVG or Image component)',
-    ],
-    guidelines: [
-      'Always provide meaningful alt text for accessibility',
-      'Use appropriate aspect ratios for consistent layouts',
-      'Provide fallback content for failed loads',
-      'Use objectFit="contain" for logos to preserve aspect ratio',
-    ],
-    accessibility: [
-      'Alt text is required and must describe the image content',
-      'Decorative images should have empty alt=""',
-      'Avoid text in images; if necessary, describe the text in alt',
-      'Ensure sufficient contrast between image and surrounding content',
-    ],
-  },
-
-  props: {
-    src: {
-      type: 'string',
-      description: 'Image source URL',
-      required: true,
-    },
-    alt: {
-      type: 'string',
-      description: 'Alt text for accessibility (required)',
-      required: true,
-    },
-    aspectRatio: {
-      type: 'enum',
-      description: 'Aspect ratio of the image container',
-      values: ['1:1', '4:3', '16:9', '21:9', 'auto'],
-      default: 'auto',
-    },
-    objectFit: {
-      type: 'enum',
-      description: 'How the image fits within its container',
-      values: ['cover', 'contain', 'fill', 'none'],
-      default: 'cover',
-    },
-    width: {
-      type: 'union',
-      description: 'Width of the image container',
-    },
-    height: {
-      type: 'union',
-      description: 'Height of the image container',
-    },
-    rounded: {
-      type: 'enum',
-      description: 'Border radius',
-      values: ['none', 'sm', 'md', 'lg', 'full'],
-      default: 'none',
-    },
-    fallback: {
-      type: 'node',
-      description: 'Content to show while loading or on error',
-    },
-  },
-
-  relations: [
-    { component: 'Card', relationship: 'child', note: 'Common pattern to use Image at top of product cards' },
-    { component: 'Avatar', relationship: 'alternative', note: 'Use Avatar for user profile pictures' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'src: string - image URL (required)',
-      'alt: string - accessibility text (required)',
-      'aspectRatio: 1:1|4:3|16:9|21:9|auto - container ratio',
-      'objectFit: cover|contain|fill|none - image fitting',
-      'rounded: none|sm|md|lg|full - border radius',
-      'fallback: ReactNode - loading/error content',
-    ],
-    scenarioTags: [
-      'media.image',
-      'content.visual',
-      'product.display',
-    ],
-    a11yRules: ['A11Y_IMG_ALT', 'A11Y_IMG_DECORATIVE'],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic image display',
-      render: () => (
-        <Image
-          src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&h=300&fit=crop"
-          alt="Code on a screen"
-          width={300}
-        />
-      ),
-    },
-    {
-      name: 'Aspect Ratios',
-      description: 'Different aspect ratio options',
-      render: () => (
-        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
-          <Image
-            src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=200&h=200&fit=crop"
-            alt="Square image"
-            aspectRatio="1:1"
-            width={100}
-          />
-          <Image
-            src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=200&h=150&fit=crop"
-            alt="4:3 image"
-            aspectRatio="4:3"
-            width={120}
-          />
-          <Image
-            src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=320&h=180&fit=crop"
-            alt="16:9 image"
-            aspectRatio="16:9"
-            width={160}
-          />
-        </div>
-      ),
-    },
-    {
-      name: 'Rounded Corners',
-      description: 'Border radius options',
-      render: () => (
-        <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
-          <Image
-            src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=100&h=100&fit=crop"
-            alt="No rounding"
-            rounded="none"
-            width={80}
-            height={80}
-          />
-          <Image
-            src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=100&h=100&fit=crop"
-            alt="Medium rounding"
-            rounded="md"
-            width={80}
-            height={80}
-          />
-          <Image
-            src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=100&h=100&fit=crop"
-            alt="Full rounding"
-            rounded="full"
-            width={80}
-            height={80}
-          />
-        </div>
-      ),
-    },
-    {
-      name: 'With Fallback',
-      description: 'Fallback content for loading/error states',
-      render: () => (
-        <Image
-          src="https://invalid-url.example/image.jpg"
-          alt="Image that will fail"
-          width={200}
-          height={150}
-          rounded="md"
-          fallback={
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', background: 'var(--fui-color-surface-secondary)' }}>
-              <span style={{ color: 'var(--fui-color-text-tertiary)' }}>No image</span>
-            </div>
-          }
-        />
-      ),
-    },
-  ],
-});

package/src/components/Image/Image.test.tsx

@@ -1,39 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, act, expectNoA11yViolations } from '../../test/utils';
-import { Image } from './index';
-
-describe('Image', () => {
-  it('renders an img element with src and alt', () => {
-    render(<Image src="/photo.jpg" alt="A photo" />);
-    const img = screen.getByRole('img', { name: 'A photo' });
-    expect(img).toHaveAttribute('src', '/photo.jpg');
-  });
-
-  it('shows fallback while loading', () => {
-    render(<Image src="/photo.jpg" alt="Photo" fallback={<span>Loading...</span>} />);
-    expect(screen.getByText('Loading...')).toBeInTheDocument();
-    // Image should be present but hidden (opacity 0)
-    const img = screen.getByRole('img');
-    expect(img.style.opacity).toBe('0');
-  });
-
-  it('shows fallback on error', () => {
-    render(<Image src="/broken.jpg" alt="Broken" fallback={<span>Error</span>} />);
-    const img = screen.getByRole('img');
-    // Simulate error
-    act(() => {
-      img.dispatchEvent(new Event('error', { bubbles: false }));
-    });
-    expect(screen.getByText('Error')).toBeInTheDocument();
-  });
-
-  it('applies aspect ratio class', () => {
-    const { container } = render(<Image src="/photo.jpg" alt="Photo" aspectRatio="16:9" />);
-    expect(container.firstChild).toHaveClass('aspect-16-9');
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(<Image src="/photo.jpg" alt="Accessible photo" />);
-    await expectNoA11yViolations(container);
-  });
-});