@fragments-sdk/ui 0.14.0 → 0.15.1

package/src/components/ButtonGroup/ButtonGroup.fragment.tsx

@@ -1,155 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/core';
-import { ButtonGroup } from '.';
-import { Button } from '../Button';
-
-export default defineFragment({
-  component: ButtonGroup,
-
-  meta: {
-    name: 'ButtonGroup',
-    description: 'Groups related buttons together with consistent spacing and alignment. Useful for action bars, toolbars, and related button sets.',
-    category: 'forms',
-    status: 'stable',
-    tags: ['button', 'group', 'toolbar', 'actions', 'layout'],
-    since: '0.2.0',
-  },
-
-  usage: {
-    when: [
-      'Grouping related actions together',
-      'Creating toolbars or action bars',
-      'Form submit/cancel button pairs',
-      'Pagination controls',
-    ],
-    whenNot: [
-      'Unrelated buttons (use Stack instead)',
-      'Navigation links (use nav element)',
-      'Single button (no grouping needed)',
-    ],
-    guidelines: [
-      'Keep button groups focused on related actions',
-      'Use consistent button variants within a group',
-      'Consider visual hierarchy - primary action should stand out',
-      'Limit to 2-4 buttons per group for clarity',
-      'Pass role/aria-label/id/data-* directly to ButtonGroup when you need semantic grouping hooks',
-    ],
-    accessibility: [
-      'Group provides semantic relationship between buttons',
-      'Each button remains individually focusable',
-      'Consider using role="group" with aria-label for screen readers',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'Button elements to group together',
-      required: true,
-    },
-    gap: {
-      type: 'enum',
-      description: 'Spacing between buttons',
-      values: ['none', 'xs', 'sm', 'md'],
-      default: 'sm',
-    },
-    wrap: {
-      type: 'boolean',
-      description: 'Allow buttons to wrap to next line',
-      default: 'false',
-    },
-    align: {
-      type: 'enum',
-      description: 'Alignment of buttons',
-      values: ['start', 'center', 'end'],
-    },
-  },
-
-  relations: [
-    { component: 'Button', relationship: 'child', note: 'ButtonGroup contains Button components' },
-    { component: 'Stack', relationship: 'alternative', note: 'Use Stack for more general layout needs' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'children: ReactNode - buttons to group',
-      'gap: none|xs|sm|md - spacing between buttons',
-      'wrap: boolean - allow wrapping',
-      'align: start|center|end - alignment',
-      'Pass-through DOM props supported on root (id, role, aria-*, data-*, handlers)',
-    ],
-    scenarioTags: [
-      'layout.group',
-      'actions.toolbar',
-      'buttons.related',
-    ],
-    a11yRules: ['A11Y_GROUP_LABEL'],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic button group with default spacing',
-      render: () => (
-        <ButtonGroup>
-          <Button variant="secondary">Cancel</Button>
-          <Button variant="primary">Save</Button>
-        </ButtonGroup>
-      ),
-    },
-    {
-      name: 'Gap Variants',
-      description: 'Different spacing options',
-      render: () => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-          <ButtonGroup gap="none">
-            <Button variant="secondary" size="sm">None</Button>
-            <Button variant="secondary" size="sm">Gap</Button>
-          </ButtonGroup>
-          <ButtonGroup gap="xs">
-            <Button variant="secondary" size="sm">XS</Button>
-            <Button variant="secondary" size="sm">Gap</Button>
-          </ButtonGroup>
-          <ButtonGroup gap="sm">
-            <Button variant="secondary" size="sm">SM</Button>
-            <Button variant="secondary" size="sm">Gap</Button>
-          </ButtonGroup>
-          <ButtonGroup gap="md">
-            <Button variant="secondary" size="sm">MD</Button>
-            <Button variant="secondary" size="sm">Gap</Button>
-          </ButtonGroup>
-        </div>
-      ),
-    },
-    {
-      name: 'Alignment',
-      description: 'Different alignment options',
-      render: () => (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '300px' }}>
-          <ButtonGroup align="start">
-            <Button variant="secondary" size="sm">Start</Button>
-            <Button variant="secondary" size="sm">Aligned</Button>
-          </ButtonGroup>
-          <ButtonGroup align="center">
-            <Button variant="secondary" size="sm">Center</Button>
-            <Button variant="secondary" size="sm">Aligned</Button>
-          </ButtonGroup>
-          <ButtonGroup align="end">
-            <Button variant="secondary" size="sm">End</Button>
-            <Button variant="secondary" size="sm">Aligned</Button>
-          </ButtonGroup>
-        </div>
-      ),
-    },
-    {
-      name: 'Form Actions',
-      description: 'Common pattern for form submit/cancel',
-      render: () => (
-        <ButtonGroup align="end" role="group" aria-label="Form actions">
-          <Button variant="ghost">Cancel</Button>
-          <Button variant="primary">Submit</Button>
-        </ButtonGroup>
-      ),
-    },
-  ],
-});

package/src/components/ButtonGroup/ButtonGroup.test.tsx

@@ -1,54 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, expectNoA11yViolations } from '../../test/utils';
-import { ButtonGroup } from './index';
-
-describe('ButtonGroup', () => {
-  it('renders children buttons', () => {
-    render(
-      <ButtonGroup>
-        <button>Save</button>
-        <button>Cancel</button>
-      </ButtonGroup>
-    );
-    expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
-  });
-
-  it('applies gap class', () => {
-    const { container } = render(
-      <ButtonGroup gap="md">
-        <button>A</button>
-      </ButtonGroup>
-    );
-    expect(container.firstElementChild).toHaveClass('gap-md');
-  });
-
-  it('applies wrap class when wrap is true', () => {
-    const { container } = render(
-      <ButtonGroup wrap>
-        <button>A</button>
-      </ButtonGroup>
-    );
-    expect(container.firstElementChild).toHaveClass('wrap');
-  });
-
-  it('forwards DOM props to the group root', () => {
-    render(
-      <ButtonGroup data-testid="group" role="group" aria-label="Actions">
-        <button>Save</button>
-      </ButtonGroup>
-    );
-    expect(screen.getByTestId('group')).toHaveAttribute('aria-label', 'Actions');
-    expect(screen.getByTestId('group')).toHaveAttribute('role', 'group');
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(
-      <ButtonGroup>
-        <button>OK</button>
-        <button>Cancel</button>
-      </ButtonGroup>
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/Card/Card.fragment.tsx

@@ -1,209 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/core';
-import { Card } from '.';
-
-export default defineFragment({
-  component: Card,
-
-  meta: {
-    name: 'Card',
-    description: 'Container for grouping related content',
-    category: 'layout',
-    status: 'stable',
-    tags: ['container', 'layout', 'surface'],
-  },
-
-  usage: {
-    when: [
-      'Grouping related pieces of content together',
-      'Creating visual separation between content sections',
-      'Displaying a preview or summary of an item',
-      'Building dashboard widgets or tiles',
-    ],
-    whenNot: [
-      'Simple text content that does not need grouping',
-      'Modal or dialog content (use Dialog component)',
-      'Navigation items (use List or Sidebar patterns)',
-    ],
-    guidelines: [
-      'Use consistent card variants within the same context',
-      'Cards in a grid should have uniform sizing',
-      'Use elevated variant sparingly for emphasis',
-      'If a card is clickable, provide clear hover/focus affordances and prefer explicit buttons/links inside the card',
-    ],
-    accessibility: [
-      'Card is a semantic container (article/div/section); onClick does not automatically add button semantics',
-      'Card titles should be appropriate heading levels',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'Card content - use Card.Header, Card.Body, Card.Footer sub-components',
-    },
-    variant: {
-      type: 'enum',
-      values: ['default', 'outlined', 'outline', 'elevated'],
-      default: 'default',
-      description: 'Visual style of the card surface',
-      constraints: ['Use "elevated" sparingly to maintain visual hierarchy'],
-    },
-    padding: {
-      type: 'enum',
-      values: ['none', 'sm', 'md', 'lg'],
-      default: 'md',
-      description: 'Internal padding size',
-    },
-    as: {
-      type: 'enum',
-      values: ['article', 'div', 'section'],
-      default: 'article',
-      description: 'Semantic HTML element for the card root',
-    },
-  },
-
-  relations: [
-    {
-      component: 'Grid',
-      relationship: 'parent',
-      note: 'Use Grid + Card for responsive card layouts',
-    },
-    {
-      component: 'List',
-      relationship: 'alternative',
-      note: 'Use List for linear, text-first layouts',
-    },
-  ],
-
-  contract: {
-    propsSummary: [
-      'variant: default|outlined|outline|elevated (default: default)',
-      'padding: none|sm|md|lg (default: md)',
-      'as: article|div|section (default: article) - card root element',
-      'onClick: (event) => void - click handler on root (semantics unchanged)',
-      'Sub-components: Card.Header, Card.Title, Card.Description, Card.Body, Card.Footer',
-    ],
-    scenarioTags: [
-      'layout.container',
-      'content.group',
-      'pattern.widget',
-      'pattern.tile',
-    ],
-    a11yRules: [
-      'A11Y_CARD_HEADING',
-      'A11Y_CARD_INTERACTIVE',
-    ],
-  },
-
-  ai: {
-    compositionPattern: 'compound',
-    subComponents: ['Header', 'Title', 'Description', 'Body', 'Footer'],
-    requiredChildren: ['Body'],
-    commonPatterns: [
-      '<Card><Card.Body>{content}</Card.Body></Card>',
-      '<Card><Card.Header><Card.Title>{title}</Card.Title></Card.Header><Card.Body>{content}</Card.Body></Card>',
-      '<Card><Card.Header><Card.Title>{title}</Card.Title><Card.Description>{desc}</Card.Description></Card.Header><Card.Body>{content}</Card.Body><Card.Footer>{actions}</Card.Footer></Card>',
-    ],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Standard card with subtle shadow',
-      render: () => (
-        <Card>
-          <Card.Header>
-            <Card.Title>Card Title</Card.Title>
-            <Card.Description>A brief description</Card.Description>
-          </Card.Header>
-          <Card.Body>Card content goes here.</Card.Body>
-        </Card>
-      ),
-    },
-    {
-      name: 'Outlined',
-      description: 'Card with border instead of shadow',
-      render: () => (
-        <Card variant="outlined">
-          <Card.Header>
-            <Card.Title>Outlined Card</Card.Title>
-          </Card.Header>
-          <Card.Body>Content with border.</Card.Body>
-        </Card>
-      ),
-    },
-    {
-      name: 'Outline',
-      description: 'Card with border, using the "outline" alias for "outlined"',
-      render: () => (
-        <Card variant="outline">
-          <Card.Header>
-            <Card.Title>Outline Card</Card.Title>
-          </Card.Header>
-          <Card.Body>Uses the Radix/Shadcn-style alias.</Card.Body>
-        </Card>
-      ),
-    },
-    {
-      name: 'Elevated',
-      description: 'Card with prominent shadow for emphasis',
-      render: () => (
-        <Card variant="elevated">
-          <Card.Header>
-            <Card.Title>Featured Item</Card.Title>
-          </Card.Header>
-          <Card.Body>Important content.</Card.Body>
-        </Card>
-      ),
-    },
-    {
-      name: 'Interactive',
-      description: 'Clickable card surface (root stays a semantic container)',
-      render: () => (
-        <Card as="section" onClick={() => alert('Card clicked!')}>
-          <Card.Header>
-            <Card.Title>Click Me</Card.Title>
-            <Card.Description>This card is interactive</Card.Description>
-          </Card.Header>
-          <Card.Body>Click anywhere on this card.</Card.Body>
-        </Card>
-      ),
-    },
-    {
-      name: 'Section Root',
-      description: 'Use the as prop to match the surrounding document semantics',
-      render: () => (
-        <Card as="section" aria-labelledby="billing-card-title">
-          <Card.Header>
-            <Card.Title id="billing-card-title">Billing Summary</Card.Title>
-          </Card.Header>
-          <Card.Body>Section semantics can improve document structure for grouped content.</Card.Body>
-        </Card>
-      ),
-    },
-    {
-      name: 'With Footer',
-      description: 'Card with header, body, and footer',
-      render: () => (
-        <Card>
-          <Card.Header>
-            <Card.Title>Card with Footer</Card.Title>
-            <Card.Description>Complete card layout</Card.Description>
-          </Card.Header>
-          <Card.Body>Main content area.</Card.Body>
-          <Card.Footer>Footer actions go here</Card.Footer>
-        </Card>
-      ),
-    },
-    {
-      name: 'Content Only',
-      description: 'Card with just body content',
-      render: () => (
-        <Card>
-          <Card.Body>Just content, no header or footer.</Card.Body>
-        </Card>
-      ),
-    },
-  ],
-});

package/src/components/Card/Card.test.tsx

@@ -1,75 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
-import { Card } from './index';
-
-describe('Card', () => {
-  it('renders as <article> by default', () => {
-    render(<Card>Content</Card>);
-    expect(screen.getByRole('article')).toBeInTheDocument();
-  });
-
-  it('stays as <article> with interactive class when onClick is provided', () => {
-    render(<Card onClick={() => {}}>Click me</Card>);
-    expect(screen.getByRole('article')).toHaveClass('interactive');
-  });
-
-  it('applies variant classes', () => {
-    const { rerender } = render(<Card variant="outlined">Content</Card>);
-    expect(screen.getByRole('article')).toHaveClass('outlined');
-
-    rerender(<Card variant="elevated">Content</Card>);
-    expect(screen.getByRole('article')).toHaveClass('elevated');
-  });
-
-  it('applies padding classes', () => {
-    render(<Card padding="lg">Content</Card>);
-    expect(screen.getByRole('article')).toHaveClass('paddingLg');
-  });
-
-  it('fires onClick callback', async () => {
-    const handleClick = vi.fn();
-    const user = userEvent.setup();
-    render(<Card onClick={handleClick}>Click me</Card>);
-    await user.click(screen.getByRole('article'));
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('renders compound sub-components', () => {
-    render(
-      <Card>
-        <Card.Header>Header</Card.Header>
-        <Card.Title>Title</Card.Title>
-        <Card.Description>Description</Card.Description>
-        <Card.Body>Body</Card.Body>
-        <Card.Footer>Footer</Card.Footer>
-      </Card>
-    );
-    expect(screen.getByText('Header')).toHaveClass('header');
-    expect(screen.getByText('Title').tagName).toBe('H3');
-    expect(screen.getByText('Description').tagName).toBe('P');
-    expect(screen.getByText('Body')).toHaveClass('body');
-    expect(screen.getByText('Footer')).toHaveClass('footer');
-  });
-
-  it('adds interactive class when onClick is provided', () => {
-    render(<Card onClick={() => {}}>Content</Card>);
-    expect(screen.getByRole('article')).toHaveClass('interactive');
-  });
-
-  it('resolves variant="outline" to "outlined"', () => {
-    render(<Card variant="outline">Content</Card>);
-    expect(screen.getByRole('article')).toHaveClass('outlined');
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(
-      <Card>
-        <Card.Header>
-          <Card.Title>Card Title</Card.Title>
-        </Card.Header>
-        <Card.Body>Card body content</Card.Body>
-      </Card>
-    );
-    await expectNoA11yViolations(container);
-  });
-});