@fragments-sdk/ui 0.13.0 → 0.15.1

package/src/components/Stack/Stack.fragment.tsx

@@ -1,230 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Stack } from '.';
-import { Button } from '../Button';
-import { Badge } from '../Badge';
-
-export default defineFragment({
-  component: Stack,
-
-  meta: {
-    name: 'Stack',
-    description: 'Flexible layout component for arranging children in rows or columns with consistent spacing. Supports responsive direction and gap.',
-    category: 'layout',
-    status: 'stable',
-    tags: ['stack', 'layout', 'flex', 'spacing', 'responsive'],
-    since: '0.2.0',
-  },
-
-  usage: {
-    when: [
-      'Arranging elements in a row or column',
-      'Creating consistent spacing between items',
-      'Building responsive layouts',
-      'Simple flexbox-based arrangements',
-    ],
-    whenNot: [
-      'Complex grid layouts (use Grid)',
-      'Button-specific grouping (use ButtonGroup)',
-      'Page-level layout (use AppShell)',
-    ],
-    guidelines: [
-      'Use semantic elements via the "as" prop when appropriate',
-      'Leverage responsive props for mobile-first layouts',
-      'Keep spacing consistent within related sections',
-      'Consider alignment for visual balance',
-    ],
-    accessibility: [
-      'Use semantic elements (nav, section, etc.) via "as" prop',
-      'Maintains source order for screen readers',
-      'No accessibility concerns with visual arrangement',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'Elements to arrange',
-      required: true,
-    },
-    direction: {
-      type: 'union',
-      description: 'Stack direction: "row", "column", or responsive object',
-      default: 'column',
-    },
-    gap: {
-      type: 'union',
-      description: 'Spacing between items: "none"|"xs"|"sm"|"md"|"lg"|"xl", a number (1-8) for space scale, or responsive object',
-      default: 'md',
-    },
-    align: {
-      type: 'enum',
-      description: 'Cross-axis alignment',
-      values: ['start', 'center', 'end', 'stretch', 'baseline'],
-    },
-    justify: {
-      type: 'enum',
-      description: 'Main-axis alignment',
-      values: ['start', 'center', 'end', 'between'],
-    },
-    wrap: {
-      type: 'boolean',
-      description: 'Allow items to wrap',
-      default: 'false',
-    },
-    separator: {
-      type: 'custom',
-      description: 'Render a separator between children. true = default 1px line, or pass a ReactNode for custom separators.',
-    },
-    as: {
-      type: 'enum',
-      description: 'HTML element to render',
-      values: ['div', 'section', 'nav', 'article', 'aside', 'header', 'footer', 'main', 'ul', 'ol'],
-      default: 'div',
-    },
-  },
-
-  relations: [
-    { component: 'Grid', relationship: 'alternative', note: 'Use Grid for complex 2D layouts' },
-    { component: 'ButtonGroup', relationship: 'sibling', note: 'ButtonGroup is specialized for buttons' },
-    { component: 'Box', relationship: 'sibling', note: 'Box for single-element styling' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'direction: row|column|{responsive} - stack direction',
-      'gap: none|xs|sm|md|lg|xl|number|{responsive} - spacing (number maps to space scale)',
-      'align: start|center|end|stretch|baseline - cross-axis',
-      'justify: start|center|end|between - main-axis',
-      'wrap: boolean - allow wrapping',
-      'separator: boolean|ReactNode - divider between children',
-      'as: string - HTML element',
-    ],
-    scenarioTags: [
-      'layout.flex',
-      'spacing.consistent',
-      'responsive.layout',
-    ],
-    a11yRules: ['A11Y_SEMANTIC_ELEMENTS'],
-  },
-
-  variants: [
-    {
-      name: 'Vertical Stack',
-      description: 'Default column layout',
-      render: () => (
-        <Stack gap="sm">
-          <Badge>Item 1</Badge>
-          <Badge>Item 2</Badge>
-          <Badge>Item 3</Badge>
-        </Stack>
-      ),
-    },
-    {
-      name: 'Horizontal Stack',
-      description: 'Row layout',
-      render: () => (
-        <Stack direction="row" gap="sm">
-          <Badge>Item 1</Badge>
-          <Badge>Item 2</Badge>
-          <Badge>Item 3</Badge>
-        </Stack>
-      ),
-    },
-    {
-      name: 'Gap Sizes',
-      description: 'Different spacing options',
-      render: () => (
-        <Stack gap="lg">
-          <Stack direction="row" gap="xs">
-            <Badge variant="info">XS</Badge>
-            <Badge variant="info">Gap</Badge>
-          </Stack>
-          <Stack direction="row" gap="sm">
-            <Badge variant="info">SM</Badge>
-            <Badge variant="info">Gap</Badge>
-          </Stack>
-          <Stack direction="row" gap="md">
-            <Badge variant="info">MD</Badge>
-            <Badge variant="info">Gap</Badge>
-          </Stack>
-          <Stack direction="row" gap="lg">
-            <Badge variant="info">LG</Badge>
-            <Badge variant="info">Gap</Badge>
-          </Stack>
-        </Stack>
-      ),
-    },
-    {
-      name: 'Numeric Gap',
-      description: 'Using number values (1-8) mapped to the spacing scale',
-      render: () => (
-        <Stack gap="lg">
-          <Stack direction="row" gap={2}>
-            <Badge variant="info">Gap 2</Badge>
-            <Badge variant="info">Gap 2</Badge>
-          </Stack>
-          <Stack direction="row" gap={4}>
-            <Badge variant="info">Gap 4</Badge>
-            <Badge variant="info">Gap 4</Badge>
-          </Stack>
-          <Stack direction="row" gap={6}>
-            <Badge variant="info">Gap 6</Badge>
-            <Badge variant="info">Gap 6</Badge>
-          </Stack>
-        </Stack>
-      ),
-    },
-    {
-      name: 'Alignment',
-      description: 'Cross-axis and main-axis alignment',
-      render: () => (
-        <Stack gap="md">
-          <Stack direction="row" gap="sm" justify="between" style={{ width: '200px', padding: '8px', background: 'var(--fui-bg-secondary)', borderRadius: '4px' }}>
-            <Badge>Start</Badge>
-            <Badge>End</Badge>
-          </Stack>
-          <Stack direction="row" gap="sm" justify="center" style={{ width: '200px', padding: '8px', background: 'var(--fui-bg-secondary)', borderRadius: '4px' }}>
-            <Badge>Centered</Badge>
-          </Stack>
-        </Stack>
-      ),
-    },
-    {
-      name: 'Responsive',
-      description: 'Direction changes at breakpoints',
-      render: () => (
-        <Stack
-          direction={{ base: 'column', md: 'row' }}
-          gap={{ base: 'sm', md: 'lg' }}
-        >
-          <Button variant="secondary">First</Button>
-          <Button variant="secondary">Second</Button>
-          <Button variant="secondary">Third</Button>
-        </Stack>
-      ),
-    },
-    {
-      name: 'With Separator',
-      description: 'Default line separator between items',
-      render: () => (
-        <Stack gap="md" separator>
-          <div>Section One</div>
-          <div>Section Two</div>
-          <div>Section Three</div>
-        </Stack>
-      ),
-    },
-    {
-      name: 'Semantic Element',
-      description: 'Using nav element for navigation',
-      render: () => (
-        <Stack as="nav" direction="row" gap="md">
-          <Button variant="ghost" size="sm">Home</Button>
-          <Button variant="ghost" size="sm">About</Button>
-          <Button variant="ghost" size="sm">Contact</Button>
-        </Stack>
-      ),
-    },
-  ],
-});

package/src/components/Stack/Stack.test.tsx

@@ -1,53 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, expectNoA11yViolations } from '../../test/utils';
-import { Stack } from './index';
-
-describe('Stack', () => {
-  it('renders children in a div by default', () => {
-    render(<Stack><span>A</span><span>B</span></Stack>);
-    expect(screen.getByText('A')).toBeInTheDocument();
-    expect(screen.getByText('B')).toBeInTheDocument();
-  });
-
-  it('applies direction class', () => {
-    const { container } = render(<Stack direction="row"><span>A</span></Stack>);
-    expect(container.firstChild).toHaveClass('row');
-  });
-
-  it('applies gap class', () => {
-    const { container } = render(<Stack gap="lg"><span>A</span></Stack>);
-    expect(container.firstChild).toHaveClass('gap-lg');
-  });
-
-  it('applies alignment and justify classes', () => {
-    const { container } = render(
-      <Stack align="center" justify="between"><span>A</span></Stack>
-    );
-    const el = container.firstChild as HTMLElement;
-    expect(el).toHaveClass('align-center');
-    expect(el).toHaveClass('justify-between');
-  });
-
-  it('renders as a different element via "as" prop', () => {
-    render(<Stack as="nav"><span>Item</span></Stack>);
-    const nav = screen.getByText('Item').parentElement!;
-    expect(nav.tagName).toBe('NAV');
-  });
-
-  it('forwards ref', () => {
-    const ref = vi.fn();
-    render(<Stack ref={ref}><span>A</span></Stack>);
-    expect(ref).toHaveBeenCalled();
-  });
-
-  it('applies inline style for numeric gap values', () => {
-    const { container } = render(<Stack gap={4}><span>A</span></Stack>);
-    const el = container.firstChild as HTMLElement;
-    expect(el.style.gap).toBe('var(--fui-space-4)');
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(<Stack><span>A</span><span>B</span></Stack>);
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/Table/Table.fragment.tsx

@@ -1,281 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Table } from '.';
-
-export default defineFragment({
-  component: Table,
-
-  meta: {
-    name: 'Table',
-    description: 'Semantic HTML table with compound API. For data-rich tables with sorting and selection, use DataTable.',
-    category: 'display',
-    status: 'stable',
-    tags: ['table', 'semantic', 'html', 'layout'],
-    since: '0.1.0',
-  },
-
-  usage: {
-    when: [
-      'Displaying simple tabular data with semantic HTML',
-      'Static data that does not need sorting or selection',
-      'Showing structured information with headers and rows',
-      'Tables with footers or captions',
-    ],
-    whenNot: [
-      'Data that needs sorting (use DataTable)',
-      'Data that needs row selection (use DataTable)',
-      'Data that needs clickable rows (use DataTable)',
-      'Simple lists (use List component)',
-    ],
-    guidelines: [
-      'Use Table.HeaderCell for column headers (adds scope="col" by default)',
-      'Use Table.Caption for table descriptions (can be visually hidden)',
-      'Keep tables simple — use DataTable for interactive features',
-      'Consider mobile responsiveness; table scrolls horizontally on small screens',
-    ],
-    accessibility: [
-      'Semantic HTML table elements (thead, tbody, tfoot, th, td)',
-      'Column headers have scope="col" by default',
-      'Caption provides table description for screen readers',
-      'Supports visually-hidden caption for screen-reader-only labels',
-    ],
-  },
-
-  props: {
-    size: {
-      type: 'enum',
-      description: 'Table density',
-      values: ['sm', 'md'],
-      default: 'md',
-    },
-    striped: {
-      type: 'boolean',
-      description: 'Show alternating row backgrounds',
-      default: 'false',
-    },
-    bordered: {
-      type: 'boolean',
-      description: 'Wrap table in a bordered container',
-      default: 'false',
-    },
-  },
-
-  relations: [
-    { component: 'DataTable', relationship: 'alternative', note: 'Use DataTable for sorting, selection, and TanStack features' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'size: sm|md - table density',
-      'striped: boolean - alternating row backgrounds',
-      'bordered: boolean - bordered container',
-      'Table.Head, Table.Body, Table.Footer - section wrappers',
-      'Table.Row - table row with optional selected prop',
-      'Table.HeaderCell - th with scope="col"',
-      'Table.Cell - td element',
-      'Table.Caption - caption with optional hidden prop',
-    ],
-    scenarioTags: [
-      'display.table',
-      'layout.table',
-      'semantic.html',
-    ],
-    a11yRules: ['A11Y_TABLE_HEADERS', 'A11Y_TABLE_CAPTION'],
-  },
-
-  ai: {
-    compositionPattern: 'compound',
-    commonPatterns: [
-      '<Table><Table.Head><Table.Row><Table.HeaderCell>Name</Table.HeaderCell></Table.Row></Table.Head><Table.Body><Table.Row><Table.Cell>Alice</Table.Cell></Table.Row></Table.Body></Table>',
-    ],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic semantic table',
-      render: () => (
-        <Table aria-label="Team members">
-          <Table.Head>
-            <Table.Row>
-              <Table.HeaderCell>Name</Table.HeaderCell>
-              <Table.HeaderCell>Role</Table.HeaderCell>
-              <Table.HeaderCell>Status</Table.HeaderCell>
-            </Table.Row>
-          </Table.Head>
-          <Table.Body>
-            <Table.Row>
-              <Table.Cell>Alice Johnson</Table.Cell>
-              <Table.Cell>Engineer</Table.Cell>
-              <Table.Cell>Active</Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell>Bob Smith</Table.Cell>
-              <Table.Cell>Designer</Table.Cell>
-              <Table.Cell>Active</Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell>Carol Williams</Table.Cell>
-              <Table.Cell>PM</Table.Cell>
-              <Table.Cell>Away</Table.Cell>
-            </Table.Row>
-          </Table.Body>
-        </Table>
-      ),
-    },
-    {
-      name: 'Striped',
-      description: 'Alternating row backgrounds for readability',
-      render: () => (
-        <Table striped aria-label="Inventory">
-          <Table.Head>
-            <Table.Row>
-              <Table.HeaderCell>Item</Table.HeaderCell>
-              <Table.HeaderCell>Category</Table.HeaderCell>
-              <Table.HeaderCell>Qty</Table.HeaderCell>
-            </Table.Row>
-          </Table.Head>
-          <Table.Body>
-            <Table.Row>
-              <Table.Cell>Widget A</Table.Cell>
-              <Table.Cell>Hardware</Table.Cell>
-              <Table.Cell>120</Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell>Widget B</Table.Cell>
-              <Table.Cell>Software</Table.Cell>
-              <Table.Cell>85</Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell>Widget C</Table.Cell>
-              <Table.Cell>Hardware</Table.Cell>
-              <Table.Cell>200</Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell>Widget D</Table.Cell>
-              <Table.Cell>Software</Table.Cell>
-              <Table.Cell>50</Table.Cell>
-            </Table.Row>
-          </Table.Body>
-        </Table>
-      ),
-    },
-    {
-      name: 'Bordered',
-      description: 'Table with bordered container',
-      render: () => (
-        <Table bordered aria-label="Pricing">
-          <Table.Head>
-            <Table.Row>
-              <Table.HeaderCell>Plan</Table.HeaderCell>
-              <Table.HeaderCell>Price</Table.HeaderCell>
-              <Table.HeaderCell>Features</Table.HeaderCell>
-            </Table.Row>
-          </Table.Head>
-          <Table.Body>
-            <Table.Row>
-              <Table.Cell>Basic</Table.Cell>
-              <Table.Cell>$9/mo</Table.Cell>
-              <Table.Cell>5 projects</Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell>Pro</Table.Cell>
-              <Table.Cell>$29/mo</Table.Cell>
-              <Table.Cell>Unlimited</Table.Cell>
-            </Table.Row>
-          </Table.Body>
-        </Table>
-      ),
-    },
-    {
-      name: 'Compact',
-      description: 'Small, dense table',
-      render: () => (
-        <Table size="sm" aria-label="Shortcuts">
-          <Table.Head>
-            <Table.Row>
-              <Table.HeaderCell>Key</Table.HeaderCell>
-              <Table.HeaderCell>Action</Table.HeaderCell>
-            </Table.Row>
-          </Table.Head>
-          <Table.Body>
-            <Table.Row>
-              <Table.Cell>Ctrl+S</Table.Cell>
-              <Table.Cell>Save</Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell>Ctrl+Z</Table.Cell>
-              <Table.Cell>Undo</Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell>Ctrl+C</Table.Cell>
-              <Table.Cell>Copy</Table.Cell>
-            </Table.Row>
-          </Table.Body>
-        </Table>
-      ),
-    },
-    {
-      name: 'With Caption',
-      description: 'Table with visible caption',
-      render: () => (
-        <Table aria-label="Q1 results">
-          <Table.Caption>Quarterly Results (Q1 2026)</Table.Caption>
-          <Table.Head>
-            <Table.Row>
-              <Table.HeaderCell>Metric</Table.HeaderCell>
-              <Table.HeaderCell>Value</Table.HeaderCell>
-              <Table.HeaderCell>Change</Table.HeaderCell>
-            </Table.Row>
-          </Table.Head>
-          <Table.Body>
-            <Table.Row>
-              <Table.Cell>Revenue</Table.Cell>
-              <Table.Cell>$1.2M</Table.Cell>
-              <Table.Cell>+15%</Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell>Users</Table.Cell>
-              <Table.Cell>24,500</Table.Cell>
-              <Table.Cell>+8%</Table.Cell>
-            </Table.Row>
-          </Table.Body>
-        </Table>
-      ),
-    },
-    {
-      name: 'With Footer',
-      description: 'Table with footer row for totals',
-      render: () => (
-        <Table bordered aria-label="Expenses">
-          <Table.Head>
-            <Table.Row>
-              <Table.HeaderCell>Category</Table.HeaderCell>
-              <Table.HeaderCell>Amount</Table.HeaderCell>
-            </Table.Row>
-          </Table.Head>
-          <Table.Body>
-            <Table.Row>
-              <Table.Cell>Marketing</Table.Cell>
-              <Table.Cell>$12,000</Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell>Engineering</Table.Cell>
-              <Table.Cell>$45,000</Table.Cell>
-            </Table.Row>
-            <Table.Row>
-              <Table.Cell>Operations</Table.Cell>
-              <Table.Cell>$8,000</Table.Cell>
-            </Table.Row>
-          </Table.Body>
-          <Table.Footer>
-            <Table.Row>
-              <Table.Cell>Total</Table.Cell>
-              <Table.Cell>$65,000</Table.Cell>
-            </Table.Row>
-          </Table.Footer>
-        </Table>
-      ),
-    },
-  ],
-});