@usefragments/ui 1.0.2 → 1.2.0

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -1,80 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Skeleton } from '.';
-
-/**
- * Skeleton is a placeholder loading state for content. Semantic variants
- * auto-size to common shapes, while width/height allow custom dimensions.
- * Includes Skeleton.Text and Skeleton.Circle subcomponents.
- */
-const meta = {
-  title: 'Feedback/Skeleton',
-  component: Skeleton,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Placeholder loading state for content.',
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['text', 'heading', 'avatar', 'button', 'input', 'rect'],
-      description: 'Semantic variant that auto-sizes',
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Size for avatar/button variants',
-    },
-    radius: {
-      control: 'select',
-      options: ['sm', 'md', 'lg', 'none', 'full'],
-      description: 'Border radius override',
-    },
-    fill: { control: 'boolean', description: 'Fill parent container' },
-    static: { control: 'boolean', description: 'Disable skeleton animation' },
-  },
-  args: { variant: 'rect', width: 200, height: 20 },
-} satisfies Meta<typeof Skeleton>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { variant: 'rect', width: 200, height: 20 },
-};
-
-export const Heading: Story = {
-  args: { variant: 'heading', width: 200 },
-};
-
-export const TextLines: Story = {
-  render: () => <Skeleton.Text lines={3} />,
-};
-
-export const Avatars: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: 'var(--fui-space-1)', alignItems: 'center' }}>
-      <Skeleton.Circle size="sm" />
-      <Skeleton.Circle size="md" />
-      <Skeleton.Circle size="lg" />
-    </div>
-  ),
-};
-
-export const Card: Story = {
-  render: () => (
-    <div style={{ width: 300 }}>
-      <Skeleton variant="rect" height={120} radius="md" />
-      <div style={{ marginTop: 'var(--fui-space-2)' }}>
-        <Skeleton variant="heading" width="60%" />
-      </div>
-      <div style={{ marginTop: 'var(--fui-space-1)' }}>
-        <Skeleton.Text lines={2} />
-      </div>
-    </div>
-  ),
-};

package/src/components/Slider/Slider.stories.tsx

@@ -1,73 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Slider } from '.';
-
-/**
- * Slider is a range input control for selecting a numeric value within a
- * defined range. It supports a label, value display, a custom step interval,
- * and a value suffix for units.
- */
-const meta = {
-  title: 'Forms/Slider',
-  component: Slider,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Range input control for selecting a numeric value within a defined range.',
-      },
-    },
-  },
-  argTypes: {
-    showValue: { control: 'boolean', description: 'Display current value' },
-    showValueOnDrag: {
-      control: 'boolean',
-      description: 'Show a floating value bubble while dragging',
-    },
-    error: { control: 'boolean', description: 'Show error styling' },
-    disabled: { control: 'boolean', description: 'Disable the slider' },
-  },
-  args: { label: 'Volume', defaultValue: 50, min: 0, max: 100, step: 1 },
-  render: (args) => (
-    <div style={{ width: 300 }}>
-      <Slider {...args} />
-    </div>
-  ),
-} satisfies Meta<typeof Slider>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { label: 'Volume', defaultValue: 50 },
-};
-
-export const WithValue: Story = {
-  args: { label: 'Brightness', defaultValue: 75, showValue: true, valueSuffix: '%' },
-};
-
-export const CustomRange: Story = {
-  args: {
-    label: 'Temperature',
-    min: 60,
-    max: 80,
-    step: 1,
-    defaultValue: 72,
-    showValue: true,
-    valueSuffix: '°F',
-  },
-};
-
-export const WithHelperText: Story = {
-  args: {
-    label: 'Quality',
-    defaultValue: 80,
-    showValue: true,
-    valueSuffix: '%',
-    helperText: 'Higher quality increases file size',
-  },
-};
-
-export const Disabled: Story = {
-  args: { label: 'Locked setting', defaultValue: 30, showValue: true, disabled: true },
-};

package/src/components/Stack/Stack.stories.tsx

@@ -1,73 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Stack } from '.';
-
-/**
- * Stack is a flexbox layout primitive for arranging children in rows or
- * columns with consistent spacing. Direction and gap accept tokens, numbers,
- * or responsive objects.
- */
-const meta = {
-  title: 'Layout/Stack',
-  component: Stack,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Flexbox layout component for arranging children in rows or columns.',
-      },
-    },
-  },
-  argTypes: {
-    align: {
-      control: 'select',
-      options: ['start', 'center', 'end', 'stretch', 'baseline'],
-      description: 'Cross-axis alignment',
-    },
-    justify: {
-      control: 'select',
-      options: ['start', 'center', 'end', 'between'],
-      description: 'Main-axis alignment',
-    },
-    as: {
-      control: 'select',
-      options: ['div', 'section', 'nav', 'article', 'aside', 'header', 'footer', 'main', 'ul', 'ol'],
-      description: 'HTML element to render',
-    },
-    wrap: { control: 'boolean', description: 'Allow items to wrap' },
-  },
-  args: {
-    direction: 'column',
-    gap: 'md',
-    children: (
-      <>
-        <div style={{ padding: 8, background: 'var(--fui-bg-secondary)' }}>Item 1</div>
-        <div style={{ padding: 8, background: 'var(--fui-bg-secondary)' }}>Item 2</div>
-        <div style={{ padding: 8, background: 'var(--fui-bg-secondary)' }}>Item 3</div>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Stack>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Vertical: Story = {
-  args: { direction: 'column', gap: 'sm' },
-};
-
-export const Horizontal: Story = {
-  args: { direction: 'row', gap: 'sm' },
-};
-
-export const NumericGap: Story = {
-  args: { direction: 'row', gap: 4 },
-};
-
-export const WithSeparator: Story = {
-  args: { direction: 'column', gap: 'md', separator: true },
-};
-
-export const SemanticElement: Story = {
-  args: { as: 'nav', direction: 'row', gap: 'md' },
-};

package/src/components/Switch/Switch.stories.tsx

@@ -1,59 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Switch } from '.';
-
-/**
- * Switch is a binary on/off control for settings and preferences. It supports
- * controlled and uncontrolled checked state, an optional label, helper text,
- * and three sizes.
- */
-const meta = {
-  title: 'Forms/Switch',
-  component: Switch,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Binary on/off switch for settings and preferences.',
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Size variant',
-    },
-    disabled: { control: 'boolean', description: 'Disable the switch' },
-    readOnly: { control: 'boolean', description: 'Prevent the user from toggling' },
-    required: { control: 'boolean', description: 'Mark the switch as required' },
-    defaultChecked: { control: 'boolean', description: 'Default checked state (uncontrolled)' },
-  },
-  args: { label: 'Enable notifications', size: 'md', defaultChecked: false },
-} satisfies Meta<typeof Switch>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { label: 'Enable notifications' },
-};
-
-export const Checked: Story = {
-  args: { label: 'Auto-save', defaultChecked: true },
-};
-
-export const WithHelperText: Story = {
-  args: {
-    label: 'Marketing emails',
-    helperText: 'Receive occasional product updates and offers.',
-  },
-};
-
-export const Small: Story = {
-  args: { label: 'Compact mode', size: 'sm', defaultChecked: true },
-};
-
-export const Disabled: Story = {
-  args: { label: 'Locked setting', disabled: true, defaultChecked: true },
-};

package/src/components/Table/Table.stories.tsx

@@ -1,219 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Table } from '.';
-
-/**
- * Table is the canonical semantic-HTML table primitive. Reach for it whenever
- * you need to render static tabular data with headers, rows, and footers —
- * agents should compose `Table.Head`/`Table.Body`/`Table.Row` rather than
- * hand-rolling `<table>` markup. For sorting and selection, use DataTable.
- */
-const meta = {
-  title: 'Display/Table',
-  component: Table,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Semantic HTML table with a compound API. Prefer this over a raw <table>; use DataTable when you need sorting or selection.',
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md'],
-      description: 'Table density',
-    },
-    striped: { control: 'boolean', description: 'Show alternating row backgrounds' },
-    bordered: { control: 'boolean', description: 'Wrap table in a bordered container' },
-  },
-  args: {
-    size: 'md',
-    striped: false,
-    bordered: false,
-  },
-} satisfies Meta<typeof Table>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Table {...args} 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>
-  ),
-};
-
-export const Striped: Story = {
-  args: { striped: true },
-  render: (args) => (
-    <Table {...args} 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.Body>
-    </Table>
-  ),
-};
-
-export const Bordered: Story = {
-  args: { bordered: true },
-  render: (args) => (
-    <Table {...args} 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>
-  ),
-};
-
-export const Compact: Story = {
-  args: { size: 'sm' },
-  render: (args) => (
-    <Table {...args} 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>
-  ),
-};
-
-export const WithCaption: Story = {
-  render: (args) => (
-    <Table {...args} 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>
-  ),
-};
-
-export const WithFooter: Story = {
-  args: { bordered: true },
-  render: (args) => (
-    <Table {...args} 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>
-  ),
-};

package/src/components/TableOfContents/TableOfContents.stories.tsx

@@ -1,120 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { TableOfContents } from '.';
-
-/**
- * TableOfContents is the canonical in-page navigation primitive — a sticky
- * sidebar of heading links with a continuous hierarchy rail and active-segment
- * highlighting. Use it for docs, long-form content, or filterable grouped
- * lists; agents should compose `TableOfContents.Item`/`TableOfContents.Group`
- * rather than hand-rolling a nav landmark.
- */
-const meta = {
-  title: 'Navigation/TableOfContents',
-  component: TableOfContents,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Sticky sidebar navigation for long-form content or filterable lists. Prefer this over a hand-rolled in-page nav.',
-      },
-    },
-  },
-  argTypes: {
-    title: { control: 'text', description: 'Visible title above the list' },
-    label: { control: 'text', description: 'Accessible label for the nav landmark' },
-    hideTitle: { control: 'boolean', description: 'Hide the visible title' },
-  },
-  args: {
-    title: 'On This Page',
-    children: (
-      <>
-        <TableOfContents.Item id="introduction">Introduction</TableOfContents.Item>
-        <TableOfContents.Item id="getting-started">Getting Started</TableOfContents.Item>
-        <TableOfContents.Item id="api-reference">API Reference</TableOfContents.Item>
-      </>
-    ),
-  },
-} satisfies Meta<typeof TableOfContents>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <TableOfContents {...args}>
-      <TableOfContents.Item id="introduction">Introduction</TableOfContents.Item>
-      <TableOfContents.Item id="getting-started">Getting Started</TableOfContents.Item>
-      <TableOfContents.Item id="installation" indent>
-        Installation
-      </TableOfContents.Item>
-      <TableOfContents.Item id="configuration" indent>
-        Configuration
-      </TableOfContents.Item>
-      <TableOfContents.Item id="api-reference">API Reference</TableOfContents.Item>
-      <TableOfContents.Item id="examples">Examples</TableOfContents.Item>
-    </TableOfContents>
-  ),
-};
-
-export const NestedGroups: Story = {
-  render: () => (
-    <TableOfContents title="Components">
-      <TableOfContents.Item id="all" active>
-        All
-      </TableOfContents.Item>
-      <TableOfContents.Group label="Primitives" trailing={<span>3</span>}>
-        <TableOfContents.Item id="button">Button</TableOfContents.Item>
-        <TableOfContents.Item id="card">Card</TableOfContents.Item>
-        <TableOfContents.Item id="input">Input</TableOfContents.Item>
-      </TableOfContents.Group>
-      <TableOfContents.Group label="Custom" defaultOpen={false}>
-        <TableOfContents.Item id="features">Features</TableOfContents.Item>
-        <TableOfContents.Item id="plans">Plans</TableOfContents.Item>
-      </TableOfContents.Group>
-    </TableOfContents>
-  ),
-};
-
-export const WithActiveItem: Story = {
-  render: () => (
-    <TableOfContents>
-      <TableOfContents.Item id="overview">Overview</TableOfContents.Item>
-      <TableOfContents.Item id="setup" active>
-        Setup
-      </TableOfContents.Item>
-      <TableOfContents.Item id="usage" indent>
-        Basic Usage
-      </TableOfContents.Item>
-      <TableOfContents.Item id="advanced" indent>
-        Advanced
-      </TableOfContents.Item>
-      <TableOfContents.Item id="props">Props</TableOfContents.Item>
-      <TableOfContents.Item id="accessibility">Accessibility</TableOfContents.Item>
-    </TableOfContents>
-  ),
-};
-
-export const CustomTitle: Story = {
-  render: () => (
-    <TableOfContents title="Contents">
-      <TableOfContents.Item id="chapter-1">Chapter 1: The Beginning</TableOfContents.Item>
-      <TableOfContents.Item id="chapter-2">Chapter 2: The Middle</TableOfContents.Item>
-      <TableOfContents.Item id="chapter-3">Chapter 3: The End</TableOfContents.Item>
-    </TableOfContents>
-  ),
-};
-
-export const NoTitle: Story = {
-  args: { hideTitle: true },
-  render: (args) => (
-    <TableOfContents {...args}>
-      <TableOfContents.Item id="section-a">Section A</TableOfContents.Item>
-      <TableOfContents.Item id="section-b" active>
-        Section B
-      </TableOfContents.Item>
-      <TableOfContents.Item id="section-c">Section C</TableOfContents.Item>
-    </TableOfContents>
-  ),
-};