@usefragments/ui 1.0.2 → 1.2.0

package/src/components/BentoGrid/BentoGrid.stories.tsx

@@ -1,98 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { BentoGrid } from '.';
-
-/**
- * BentoGrid is an asymmetric grid layout with responsive column/row spans and
- * built-in surface styling for bento-style feature sections. Compose
- * BentoGrid.Item children, optionally with colSpan and rowSpan.
- */
-const meta = {
-  title: 'Layout/BentoGrid',
-  component: BentoGrid,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Asymmetric grid layout with responsive spans and built-in surface styling.',
-      },
-    },
-  },
-  argTypes: {
-    columns: {
-      control: 'select',
-      options: ['2', '3', '4'],
-      description: 'Number of columns — auto-collapses responsively',
-    },
-    gap: {
-      control: 'select',
-      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'Gap between grid items',
-    },
-  },
-  args: {
-    columns: 3,
-    gap: 'md',
-    children: (
-      <>
-        <BentoGrid.Item>Item 1</BentoGrid.Item>
-        <BentoGrid.Item>Item 2</BentoGrid.Item>
-        <BentoGrid.Item>Item 3</BentoGrid.Item>
-      </>
-    ),
-  },
-} satisfies Meta<typeof BentoGrid>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <BentoGrid columns={3} gap="md">
-      <BentoGrid.Item>Item 1</BentoGrid.Item>
-      <BentoGrid.Item>Item 2</BentoGrid.Item>
-      <BentoGrid.Item>Item 3</BentoGrid.Item>
-      <BentoGrid.Item>Item 4</BentoGrid.Item>
-      <BentoGrid.Item>Item 5</BentoGrid.Item>
-      <BentoGrid.Item>Item 6</BentoGrid.Item>
-    </BentoGrid>
-  ),
-};
-
-export const HeroLayout: Story = {
-  render: () => (
-    <BentoGrid columns={3} gap="md">
-      <BentoGrid.Item colSpan={{ base: 1, lg: 2 }} rowSpan={{ base: 1, lg: 2 }}>
-        Hero content
-      </BentoGrid.Item>
-      <BentoGrid.Item>Item 2</BentoGrid.Item>
-      <BentoGrid.Item>Item 3</BentoGrid.Item>
-      <BentoGrid.Item>Item 4</BentoGrid.Item>
-      <BentoGrid.Item>Item 5</BentoGrid.Item>
-    </BentoGrid>
-  ),
-};
-
-export const TwoColumn: Story = {
-  render: () => (
-    <BentoGrid columns={2} gap="md">
-      <BentoGrid.Item>Item 1</BentoGrid.Item>
-      <BentoGrid.Item>Item 2</BentoGrid.Item>
-      <BentoGrid.Item colSpan={2}>Wide item</BentoGrid.Item>
-      <BentoGrid.Item>Item 4</BentoGrid.Item>
-      <BentoGrid.Item>Item 5</BentoGrid.Item>
-    </BentoGrid>
-  ),
-};
-
-export const FullWidthBanner: Story = {
-  render: () => (
-    <BentoGrid columns={3} gap="md">
-      <BentoGrid.Item>Item 1</BentoGrid.Item>
-      <BentoGrid.Item>Item 2</BentoGrid.Item>
-      <BentoGrid.Item>Item 3</BentoGrid.Item>
-      <BentoGrid.Item colSpan={3}>Full-width banner</BentoGrid.Item>
-    </BentoGrid>
-  ),
-};

package/src/components/Box/Box.stories.tsx

@@ -1,150 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Box } from '.';
-
-/**
- * Box is the primitive layout container for applying spacing, backgrounds, and
- * borders. It renders any semantic element via the `as` prop and is the
- * building block for custom layouts not covered by Stack or Grid.
- */
-const meta = {
-  title: 'Layout/Box',
-  component: Box,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Primitive layout container for applying spacing, backgrounds, and borders.',
-      },
-    },
-  },
-  argTypes: {
-    as: {
-      control: 'select',
-      options: ['div', 'section', 'article', 'aside', 'main', 'header', 'footer', 'nav', 'span'],
-      description: 'HTML element to render',
-    },
-    padding: {
-      control: 'select',
-      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'Padding on all sides',
-    },
-    paddingX: {
-      control: 'select',
-      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'Horizontal padding',
-    },
-    paddingY: {
-      control: 'select',
-      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'Vertical padding',
-    },
-    margin: {
-      control: 'select',
-      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'auto'],
-      description: 'Margin on all sides',
-    },
-    marginX: {
-      control: 'select',
-      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'auto'],
-      description: 'Horizontal margin',
-    },
-    marginY: {
-      control: 'select',
-      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'auto'],
-      description: 'Vertical margin',
-    },
-    background: {
-      control: 'select',
-      options: ['none', 'primary', 'secondary', 'tertiary', 'elevated'],
-      description: 'Background color',
-    },
-    rounded: {
-      control: 'select',
-      options: ['none', 'sm', 'md', 'lg', 'full'],
-      description: 'Border radius',
-    },
-    borderColor: {
-      control: 'select',
-      options: ['default', 'strong', 'accent', 'danger'],
-      description: 'Border color variant',
-    },
-    shadow: {
-      control: 'select',
-      options: ['none', 'sm', 'md', 'lg'],
-      description: 'Box shadow',
-    },
-    overflow: {
-      control: 'select',
-      options: ['hidden', 'auto', 'scroll', 'visible'],
-      description: 'Overflow behavior',
-    },
-    color: {
-      control: 'select',
-      options: ['primary', 'secondary', 'tertiary', 'accent', 'inverse'],
-      description: 'Text color',
-    },
-    display: {
-      control: 'select',
-      options: ['none', 'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid'],
-      description: 'Display type',
-    },
-    border: { control: 'boolean', description: 'Show border' },
-    borderTop: { control: 'boolean', description: 'Show top border only' },
-    borderBottom: { control: 'boolean', description: 'Show bottom border only' },
-    borderLeft: { control: 'boolean', description: 'Show left border only' },
-    borderRight: { control: 'boolean', description: 'Show right border only' },
-  },
-  args: {
-    padding: 'md',
-    background: 'secondary',
-    rounded: 'md',
-    children: 'Content with padding and background',
-  },
-} satisfies Meta<typeof Box>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    padding: 'md',
-    background: 'secondary',
-    rounded: 'md',
-    children: 'Content with padding and background',
-  },
-};
-
-export const Bordered: Story = {
-  args: { padding: 'lg', border: true, rounded: 'md', children: 'Bordered content area' },
-};
-
-export const Elevated: Story = {
-  args: {
-    padding: 'lg',
-    rounded: 'md',
-    shadow: 'md',
-    background: 'primary',
-    children: 'Elevated content with shadow',
-  },
-};
-
-export const DirectionalPadding: Story = {
-  args: {
-    paddingX: 'xl',
-    paddingY: 'sm',
-    background: 'tertiary',
-    rounded: 'sm',
-    children: 'Wide horizontal padding, short vertical',
-  },
-};
-
-export const DirectionalBorders: Story = {
-  args: {
-    padding: 'md',
-    borderTop: true,
-    borderBottom: true,
-    children: 'Top and bottom borders only',
-  },
-};

package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,87 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Breadcrumbs } from '.';
-
-/**
- * Breadcrumbs show the current page location within a hierarchy and let users
- * navigate back through parent pages. It is a compound component: compose
- * Breadcrumbs.Item children, marking the last one with `current`.
- */
-const meta = {
-  title: 'Navigation/Breadcrumbs',
-  component: Breadcrumbs,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Breadcrumb navigation showing the current page location within a hierarchy.',
-      },
-    },
-  },
-  argTypes: {
-    maxItems: {
-      control: 'number',
-      description: 'Maximum visible items before collapsing middle items with ellipsis',
-    },
-    label: {
-      control: 'text',
-      description: 'Custom aria-label for the breadcrumb nav landmark',
-    },
-  },
-  args: {
-    children: (
-      <>
-        <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
-        <Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
-        <Breadcrumbs.Item current>Current Page</Breadcrumbs.Item>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Breadcrumbs>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Breadcrumbs>
-      <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
-      <Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
-      <Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>
-      <Breadcrumbs.Item current>Current Page</Breadcrumbs.Item>
-    </Breadcrumbs>
-  ),
-};
-
-export const Collapsed: Story = {
-  render: () => (
-    <Breadcrumbs maxItems={3}>
-      <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
-      <Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>
-      <Breadcrumbs.Item href="#">Subcategory</Breadcrumbs.Item>
-      <Breadcrumbs.Item href="#">Section</Breadcrumbs.Item>
-      <Breadcrumbs.Item current>Current Page</Breadcrumbs.Item>
-    </Breadcrumbs>
-  ),
-};
-
-export const CustomSeparator: Story = {
-  render: () => (
-    <Breadcrumbs separator=">">
-      <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
-      <Breadcrumbs.Item href="#">Settings</Breadcrumbs.Item>
-      <Breadcrumbs.Item current>Profile</Breadcrumbs.Item>
-    </Breadcrumbs>
-  ),
-};
-
-export const CustomLandmarkLabel: Story = {
-  render: () => (
-    <Breadcrumbs label="Documentation breadcrumbs">
-      <Breadcrumbs.Item href="#">Docs</Breadcrumbs.Item>
-      <Breadcrumbs.Item href="#">Components</Breadcrumbs.Item>
-      <Breadcrumbs.Item current>Breadcrumbs</Breadcrumbs.Item>
-    </Breadcrumbs>
-  ),
-};

package/src/components/Button/Button.stories.tsx

@@ -1,103 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { CaretDown } from "@phosphor-icons/react";
-import { Button } from ".";
-import { ButtonGroup } from "../ButtonGroup";
-import { Stack } from "../Stack";
-
-/**
- * The Button is the canonical action primitive. Every CTA, form submit, and
- * row action in the design system routes through it — agents should reuse it
- * rather than hand-rolling a styled `<button>`.
- */
-const meta = {
-  title: "Forms/Button",
-  component: Button,
-  tags: ["autodocs", "canonical"],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Interactive element for user actions and form submissions. Prefer this over a raw <button>.",
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["primary", "secondary", "ghost", "link", "danger", "outlined", "icon"],
-      description: "Visual style variant",
-    },
-    size: {
-      control: "select",
-      options: ["xs", "sm", "md", "lg"],
-      description: "Button size",
-    },
-    icon: { control: "boolean", description: "Icon-only square layout" },
-    fullWidth: { control: "boolean", description: "Stretch to container width" },
-    disabled: { control: "boolean" },
-  },
-  args: {
-    variant: "primary",
-    size: "md",
-    children: "Save changes",
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: { variant: "primary", children: "Save changes" },
-};
-
-export const Secondary: Story = {
-  args: { variant: "secondary", children: "Cancel" },
-};
-
-export const Ghost: Story = {
-  args: { variant: "ghost", children: "Dismiss" },
-};
-
-export const Danger: Story = {
-  args: { variant: "danger", children: "Delete" },
-};
-
-export const Small: Story = {
-  args: { size: "sm", children: "Compact" },
-};
-
-export const FullWidth: Story = {
-  args: { fullWidth: true, children: "Continue" },
-};
-
-export const Disabled: Story = {
-  args: { disabled: true, children: "Unavailable" },
-};
-
-export const ReferenceChrome: Story = {
-  render: () => (
-    <Stack direction="row" gap="lg" align="center" wrap>
-      <ButtonGroup gap="none" role="group" aria-label="RSVP answer">
-        <Button variant="primary" size="lg">
-          Yes
-        </Button>
-        <Button variant="primary" size="lg" icon aria-label="More yes options">
-          <CaretDown weight="bold" />
-        </Button>
-      </ButtonGroup>
-
-      <Button variant="secondary" size="lg">
-        No
-      </Button>
-
-      <Button variant="secondary" size="lg">
-        Maybe
-      </Button>
-
-      <Button variant="secondary" size="lg">
-        Add Note
-      </Button>
-    </Stack>
-  ),
-};

package/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,97 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ButtonGroup } from '.';
-import { Button } from '../Button';
-
-/**
- * ButtonGroup groups related buttons together with consistent spacing and
- * alignment. Use it for action bars, toolbars, and form submit/cancel pairs.
- * It expects Button children.
- */
-const meta = {
-  title: 'Forms/ButtonGroup',
-  component: ButtonGroup,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Groups related buttons together with consistent spacing and alignment.',
-      },
-    },
-  },
-  argTypes: {
-    gap: {
-      control: 'select',
-      options: ['none', 'xs', 'sm', 'md'],
-      description: 'Spacing between buttons',
-    },
-    align: {
-      control: 'select',
-      options: ['start', 'center', 'end'],
-      description: 'Alignment of buttons',
-    },
-    wrap: {
-      control: 'boolean',
-      description: 'Allow buttons to wrap to next line',
-    },
-  },
-  args: {
-    gap: 'sm',
-    children: (
-      <>
-        <Button variant="secondary">Cancel</Button>
-        <Button variant="primary">Save</Button>
-      </>
-    ),
-  },
-} satisfies Meta<typeof ButtonGroup>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <ButtonGroup>
-      <Button variant="secondary">Cancel</Button>
-      <Button variant="primary">Save</Button>
-    </ButtonGroup>
-  ),
-};
-
-export const Tight: Story = {
-  render: () => (
-    <ButtonGroup gap="none">
-      <Button variant="secondary" size="sm">
-        Bold
-      </Button>
-      <Button variant="secondary" size="sm">
-        Italic
-      </Button>
-      <Button variant="secondary" size="sm">
-        Underline
-      </Button>
-    </ButtonGroup>
-  ),
-};
-
-export const AlignedEnd: Story = {
-  render: () => (
-    <ButtonGroup align="end">
-      <Button variant="secondary" size="sm">
-        End
-      </Button>
-      <Button variant="secondary" size="sm">
-        Aligned
-      </Button>
-    </ButtonGroup>
-  ),
-};
-
-export const FormActions: Story = {
-  render: () => (
-    <ButtonGroup align="end" role="group" aria-label="Form actions">
-      <Button variant="ghost">Cancel</Button>
-      <Button variant="primary">Submit</Button>
-    </ButtonGroup>
-  ),
-};

package/src/components/Card/Card.stories.tsx

@@ -1,144 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Card } from ".";
-import { Progress } from "../Progress";
-import { Stack } from "../Stack";
-import { Text } from "../Text";
-
-/**
- * Card is a container for grouping related content into a distinct surface. It
- * is a compound component: compose Card.Header, Card.Title, Card.Description,
- * Card.Body, and Card.Footer inside the root.
- */
-const meta = {
-  title: "Layout/Card",
-  component: Card,
-  tags: ["autodocs", "canonical"],
-  parameters: {
-    docs: {
-      description: { component: "Container for grouping related content." },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["default", "outlined", "outline", "elevated", "stat", "panel"],
-      description: "Visual style of the card surface",
-    },
-    padding: {
-      control: "select",
-      options: ["none", "sm", "md", "lg"],
-      description: "Internal padding size",
-    },
-    as: {
-      control: "select",
-      options: ["article", "div", "section"],
-      description: "Semantic HTML element for the card root",
-    },
-  },
-  args: {
-    variant: "default",
-    padding: "md",
-    children: (
-      <>
-        <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>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Card>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  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>
-  ),
-};
-
-export const Outlined: Story = {
-  render: () => (
-    <Card variant="outlined">
-      <Card.Header>
-        <Card.Title>Outlined Card</Card.Title>
-      </Card.Header>
-      <Card.Body>Content with border.</Card.Body>
-    </Card>
-  ),
-};
-
-export const Elevated: Story = {
-  render: () => (
-    <Card variant="elevated">
-      <Card.Header>
-        <Card.Title>Featured Item</Card.Title>
-      </Card.Header>
-      <Card.Body>Important content.</Card.Body>
-    </Card>
-  ),
-};
-
-export const Stat: Story = {
-  render: () => (
-    <Card variant="stat" style={{ width: 280 }}>
-      <Stack gap="md">
-        <Stack gap="xs">
-          <Text as="strong" size="2xl" weight="bold" letterSpacing="tighter" tabularNums>
-            94%
-          </Text>
-          <Text as="p" size="sm" color="secondary">
-            Component coverage
-          </Text>
-        </Stack>
-        <Progress value={94} variant="success" size="sm" />
-      </Stack>
-    </Card>
-  ),
-};
-
-export const Panel: Story = {
-  render: () => (
-    <Card variant="panel" padding="none" style={{ width: 360 }}>
-      <Card.Header divided>
-        <Card.Title>System states</Card.Title>
-      </Card.Header>
-      <Card.Body padding="md">
-        <Text as="p" size="sm" color="secondary">
-          Use panel cards for bordered dashboard regions with their own internal header and body
-          rhythm.
-        </Text>
-      </Card.Body>
-    </Card>
-  ),
-};
-
-export const WithFooter: Story = {
-  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>
-  ),
-};
-
-export const ContentOnly: Story = {
-  render: () => (
-    <Card>
-      <Card.Body>Just content, no header or footer.</Card.Body>
-    </Card>
-  ),
-};