@usefragments/ui 1.1.1 → 1.2.0

package/src/components/Fieldset/Fieldset.stories.tsx

@@ -1,116 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Fieldset } from '.';
-import { Field } from '../Field';
-import { Input } from '../Input';
-import { Grid } from '../Grid';
-
-/**
- * Fieldset groups related form fields with an accessible legend. It is a
- * compound component: compose Fieldset.Legend and Fieldset.Description inside
- * the root, alongside the grouped Field components.
- */
-const meta = {
-  title: 'Forms/Fieldset',
-  component: Fieldset,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Groups related form fields with an accessible legend.',
-      },
-    },
-  },
-  argTypes: {
-    disabled: {
-      control: 'boolean',
-      description: 'Disables all fields within the fieldset',
-    },
-  },
-  args: {
-    children: (
-      <>
-        <Fieldset.Legend>Personal Information</Fieldset.Legend>
-        <Field name="firstName">
-          <Field.Label>First Name</Field.Label>
-          <Field.Control>
-            <Input placeholder="Jane" />
-          </Field.Control>
-        </Field>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Fieldset>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const TwoColumnLayout: Story = {
-  render: () => (
-    <Fieldset>
-      <Fieldset.Legend>Personal Information</Fieldset.Legend>
-      <Grid columns={2} gap="md">
-        <Field name="firstName">
-          <Field.Label>First Name</Field.Label>
-          <Field.Control>
-            <Input placeholder="Jane" />
-          </Field.Control>
-        </Field>
-        <Field name="lastName">
-          <Field.Label>Last Name</Field.Label>
-          <Field.Control>
-            <Input placeholder="Doe" />
-          </Field.Control>
-        </Field>
-        <Grid.Item colSpan="full">
-          <Field name="email">
-            <Field.Label>Email</Field.Label>
-            <Field.Control>
-              <Input type="email" placeholder="jane@example.com" />
-            </Field.Control>
-          </Field>
-        </Grid.Item>
-      </Grid>
-    </Fieldset>
-  ),
-};
-
-export const WithDescription: Story = {
-  render: () => (
-    <Fieldset>
-      <Fieldset.Legend>Account Details</Fieldset.Legend>
-      <Fieldset.Description>
-        Choose how others will see you on the platform.
-      </Fieldset.Description>
-      <Field name="displayName">
-        <Field.Label>Display Name</Field.Label>
-        <Field.Control>
-          <Input placeholder="How others see you" />
-        </Field.Control>
-      </Field>
-    </Fieldset>
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <Fieldset disabled>
-      <Fieldset.Legend>Locked Section</Fieldset.Legend>
-      <Grid columns={2} gap="md">
-        <Field name="lockedFirst">
-          <Field.Label>First Name</Field.Label>
-          <Field.Control>
-            <Input defaultValue="Jane" />
-          </Field.Control>
-        </Field>
-        <Field name="lockedLast">
-          <Field.Label>Last Name</Field.Label>
-          <Field.Control>
-            <Input defaultValue="Doe" />
-          </Field.Control>
-        </Field>
-      </Grid>
-    </Fieldset>
-  ),
-};

package/src/components/Form/Form.stories.tsx

@@ -1,142 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Form } from '.';
-import { Field } from '../Field';
-import { Input } from '../Input';
-import { Grid } from '../Grid';
-import { Button } from '../Button';
-
-/**
- * Form is a wrapper that handles server-side error distribution to Field
- * components by field name. It pairs with Field and Fieldset for complete form
- * validation, and renders a semantic form element.
- */
-const meta = {
-  title: 'Forms/Form',
-  component: Form,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Form wrapper that distributes server-side errors to Field components.',
-      },
-    },
-  },
-  argTypes: {
-    validationMode: {
-      control: 'select',
-      options: ['onSubmit', 'onBlur', 'onChange'],
-      description: 'When field validation should run',
-    },
-  },
-  args: {
-    children: (
-      <Grid columns={1} gap="md">
-        <Field name="email">
-          <Field.Label>Email</Field.Label>
-          <Field.Control>
-            <Input type="email" placeholder="jane@example.com" />
-          </Field.Control>
-        </Field>
-        <Button type="submit" variant="primary">
-          Submit
-        </Button>
-      </Grid>
-    ),
-  },
-} satisfies Meta<typeof Form>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const SignUp: Story = {
-  render: () => (
-    <Form onSubmit={(e) => e.preventDefault()}>
-      <Grid columns={2} gap="md">
-        <Field name="firstName">
-          <Field.Label>First Name</Field.Label>
-          <Field.Control>
-            <Input placeholder="Jane" />
-          </Field.Control>
-        </Field>
-        <Field name="lastName">
-          <Field.Label>Last Name</Field.Label>
-          <Field.Control>
-            <Input placeholder="Doe" />
-          </Field.Control>
-        </Field>
-        <Grid.Item colSpan="full">
-          <Field name="email">
-            <Field.Label>Email</Field.Label>
-            <Field.Control>
-              <Input type="email" placeholder="jane@example.com" />
-            </Field.Control>
-            <Field.Error match="typeMismatch">
-              Enter a valid email address
-            </Field.Error>
-          </Field>
-        </Grid.Item>
-        <Grid.Item colSpan="full">
-          <Button type="submit" variant="primary">
-            Create Account
-          </Button>
-        </Grid.Item>
-      </Grid>
-    </Form>
-  ),
-};
-
-export const WithServerErrors: Story = {
-  render: () => (
-    <Form
-      errors={{
-        username: 'Username is already taken',
-        email: 'Email is already registered',
-      }}
-    >
-      <Grid columns={2} gap="md">
-        <Field name="username">
-          <Field.Label>Username</Field.Label>
-          <Field.Control>
-            <Input defaultValue="janedoe" />
-          </Field.Control>
-          <Field.Error match="customError" />
-        </Field>
-        <Field name="email">
-          <Field.Label>Email</Field.Label>
-          <Field.Control>
-            <Input type="email" defaultValue="jane@example.com" />
-          </Field.Control>
-          <Field.Error match="customError" />
-        </Field>
-        <Grid.Item colSpan="full">
-          <Button type="submit" variant="primary">
-            Submit
-          </Button>
-        </Grid.Item>
-      </Grid>
-    </Form>
-  ),
-};
-
-export const ValidateOnBlur: Story = {
-  render: () => (
-    <Form validationMode="onBlur" onSubmit={(e) => e.preventDefault()}>
-      <Grid columns={1} gap="md">
-        <Field name="email">
-          <Field.Label>Email</Field.Label>
-          <Field.Control>
-            <Input type="email" placeholder="you@example.com" />
-          </Field.Control>
-          <Field.Error match="typeMismatch">
-            Enter a valid email address
-          </Field.Error>
-        </Field>
-        <Button type="submit" variant="primary">
-          Submit
-        </Button>
-      </Grid>
-    </Form>
-  ),
-};

package/src/components/Grid/Grid.stories.tsx

@@ -1,125 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import type { CSSProperties } from 'react';
-import { Grid } from '.';
-
-/**
- * Grid is a responsive CSS Grid layout for arranging items in columns with
- * consistent spacing. Columns accept a fixed number (1-12), a responsive
- * object, or "auto" for auto-fill. Use Grid.Item with colSpan for asymmetric
- * layouts.
- */
-const cell: CSSProperties = {
-  padding: 'var(--fui-space-2, 0.5rem)',
-  background: 'var(--fui-bg-secondary, #f4f4f5)',
-  borderRadius: 'var(--fui-radius-sm, 4px)',
-};
-
-const meta = {
-  title: 'Layout/Grid',
-  component: Grid,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Responsive grid layout for arranging items in columns with consistent spacing.',
-      },
-    },
-  },
-  argTypes: {
-    gap: {
-      control: 'select',
-      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'Gap between grid items',
-    },
-    alignItems: {
-      control: 'select',
-      options: ['start', 'center', 'end', 'stretch'],
-      description: 'Vertical alignment of items within their cells',
-    },
-    justifyItems: {
-      control: 'select',
-      options: ['start', 'center', 'end', 'stretch'],
-      description: 'Horizontal alignment of items within their cells',
-    },
-    padding: {
-      control: 'select',
-      options: ['none', 'sm', 'md', 'lg'],
-      description: 'Internal padding of the grid container',
-    },
-  },
-  args: {
-    columns: 3,
-    gap: 'md',
-    children: (
-      <>
-        <div style={cell}>Item 1</div>
-        <div style={cell}>Item 2</div>
-        <div style={cell}>Item 3</div>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Grid>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    columns: 3,
-    gap: 'md',
-    children: (
-      <>
-        <div style={cell}>Item 1</div>
-        <div style={cell}>Item 2</div>
-        <div style={cell}>Item 3</div>
-      </>
-    ),
-  },
-};
-
-export const Responsive: Story = {
-  args: {
-    columns: { base: 1, md: 2, lg: 3 },
-    gap: 'md',
-    children: (
-      <>
-        <div style={cell}>Card 1</div>
-        <div style={cell}>Card 2</div>
-        <div style={cell}>Card 3</div>
-      </>
-    ),
-  },
-};
-
-export const AutoFill: Story = {
-  args: {
-    columns: 'auto',
-    minChildWidth: '12rem',
-    gap: 'md',
-    children: (
-      <>
-        <div style={cell}>Card 1</div>
-        <div style={cell}>Card 2</div>
-        <div style={cell}>Card 3</div>
-        <div style={cell}>Card 4</div>
-      </>
-    ),
-  },
-};
-
-export const WithSpanning: Story = {
-  render: () => (
-    <Grid columns={4} gap="md">
-      <Grid.Item colSpan={2}>
-        <div style={cell}>Spans 2 cols</div>
-      </Grid.Item>
-      <div style={cell}>1 col</div>
-      <div style={cell}>1 col</div>
-      <Grid.Item colSpan="full">
-        <div style={cell}>Full width</div>
-      </Grid.Item>
-    </Grid>
-  ),
-};

package/src/components/Header/Header.stories.tsx

@@ -1,133 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Header } from '.';
-import { Button } from '../Button';
-
-/**
- * Header is a composable header with slots for brand, navigation, search, and
- * actions. It is a compound component: compose Header.Brand, Header.Nav,
- * Header.NavItem, Header.Spacer, and Header.Actions inside the root. Designed
- * for use within AppShell with responsive mobile support.
- */
-const meta = {
-  title: 'Navigation/Header',
-  component: Header,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Composable header with slots for brand, navigation, search, and actions.',
-      },
-    },
-  },
-  argTypes: {
-    position: {
-      control: 'select',
-      options: ['static', 'fixed', 'sticky'],
-      description: 'Position behavior (usually controlled by AppShell)',
-    },
-  },
-  args: {
-    position: 'static',
-    children: (
-      <>
-        <Header.Brand href="/">MyApp</Header.Brand>
-        <Header.Nav>
-          <Header.NavItem href="/dashboard" active>
-            Dashboard
-          </Header.NavItem>
-          <Header.NavItem href="/projects">Projects</Header.NavItem>
-        </Header.Nav>
-        <Header.Spacer />
-        <Header.Actions>
-          <Button variant="secondary" size="sm">
-            Sign In
-          </Button>
-        </Header.Actions>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Header>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Header>
-      <Header.SkipLink />
-      <Header.Brand href="/">MyApp</Header.Brand>
-      <Header.Nav>
-        <Header.NavItem href="/dashboard" active>
-          Dashboard
-        </Header.NavItem>
-        <Header.NavItem href="/projects">Projects</Header.NavItem>
-        <Header.NavItem href="/settings">Settings</Header.NavItem>
-      </Header.Nav>
-      <Header.Spacer />
-      <Header.Actions>
-        <Button variant="secondary" size="sm">
-          Sign In
-        </Button>
-      </Header.Actions>
-    </Header>
-  ),
-};
-
-export const WithDropdownNav: Story = {
-  render: () => (
-    <Header>
-      <Header.Brand href="/">MyApp</Header.Brand>
-      <Header.Nav>
-        <Header.NavItem href="/components" active>
-          Components
-        </Header.NavItem>
-        <Header.NavItem href="/blocks">Blocks</Header.NavItem>
-        <Header.NavMenu label="Docs">
-          <Header.NavMenuItem href="/getting-started">
-            Getting Started
-          </Header.NavMenuItem>
-          <Header.NavMenuItem href="/cli">CLI Reference</Header.NavMenuItem>
-          <Header.NavMenuItem href="/mcp">MCP Tools</Header.NavMenuItem>
-        </Header.NavMenu>
-        <Header.NavItem href="/blog">Blog</Header.NavItem>
-      </Header.Nav>
-      <Header.Spacer />
-      <Header.Actions>
-        <Button variant="primary" size="sm">
-          Sign Up
-        </Button>
-      </Header.Actions>
-    </Header>
-  ),
-};
-
-export const Minimal: Story = {
-  render: () => (
-    <Header>
-      <Header.Brand href="/">MyApp</Header.Brand>
-      <Header.Spacer />
-      <Header.Actions>
-        <Button variant="secondary" size="sm">
-          Account
-        </Button>
-      </Header.Actions>
-    </Header>
-  ),
-};
-
-export const Sticky: Story = {
-  render: () => (
-    <Header position="sticky">
-      <Header.Brand href="/">MyApp</Header.Brand>
-      <Header.Nav>
-        <Header.NavItem href="/" active>
-          Home
-        </Header.NavItem>
-        <Header.NavItem href="/about">About</Header.NavItem>
-      </Header.Nav>
-      <Header.Spacer />
-    </Header>
-  ),
-};

package/src/components/Icon/Icon.stories.tsx

@@ -1,80 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Heart, Star, Check, Warning, Info } from '@phosphor-icons/react';
-import { Icon } from '.';
-
-/**
- * Icon is a wrapper for icon components with consistent sizing and semantic
- * colors. Pass any icon component (Phosphor, Lucide, etc.) via the required
- * `icon` prop. Icons are decorative by default and should be paired with text
- * for meaning.
- */
-const meta = {
-  title: 'Display/Icon',
-  component: Icon,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Wrapper for icon components with consistent sizing and semantic colors.',
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'Icon size',
-    },
-    weight: {
-      control: 'select',
-      options: ['thin', 'light', 'regular', 'bold', 'fill', 'duotone'],
-      description: 'Optional icon style/weight hint',
-    },
-    variant: {
-      control: 'select',
-      options: [
-        'default',
-        'primary',
-        'secondary',
-        'tertiary',
-        'accent',
-        'success',
-        'warning',
-        'error',
-      ],
-      description: 'Semantic color variant',
-    },
-  },
-  args: {
-    icon: Heart,
-    size: 'md',
-    weight: 'regular',
-    variant: 'default',
-  },
-} satisfies Meta<typeof Icon>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { icon: Heart },
-};
-
-export const Large: Story = {
-  args: { icon: Star, size: 'xl' },
-};
-
-export const Success: Story = {
-  args: { icon: Check, variant: 'success' },
-};
-
-export const Warning_: Story = {
-  name: 'Warning',
-  args: { icon: Warning, variant: 'warning' },
-};
-
-export const Accent: Story = {
-  args: { icon: Info, variant: 'accent', weight: 'fill' },
-};

package/src/components/IconButton/IconButton.stories.tsx

@@ -1,78 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Gear, Trash, Plus, DotsThree } from '@phosphor-icons/react';
-import { IconButton } from '.';
-
-/**
- * IconButton is a compact square button for icon-only affordances such as
- * topbar actions, row controls, and workspace rails. Icon-only buttons need an
- * accessible name, so always provide an aria-label describing the action.
- */
-const meta = {
-  title: 'Components/IconButton',
-  component: IconButton,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Compact square button for icon-only affordances in dense chrome.',
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['ghost', 'subtle', 'outlined'],
-      description: 'Visual style variant',
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Button size',
-    },
-    pressed: {
-      control: 'boolean',
-      description: 'Mark as pressed for toggle-style affordances',
-    },
-  },
-  args: {
-    variant: 'ghost',
-    size: 'md',
-    'aria-label': 'Settings',
-    children: <Gear />,
-  },
-} satisfies Meta<typeof IconButton>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Ghost: Story = {
-  args: { variant: 'ghost', 'aria-label': 'More options', children: <DotsThree /> },
-};
-
-export const Subtle: Story = {
-  args: { variant: 'subtle', 'aria-label': 'Add item', children: <Plus /> },
-};
-
-export const Outlined: Story = {
-  args: { variant: 'outlined', 'aria-label': 'Settings', children: <Gear /> },
-};
-
-export const Pressed: Story = {
-  args: {
-    variant: 'subtle',
-    pressed: true,
-    'aria-label': 'Toggle setting',
-    children: <Gear />,
-  },
-};
-
-export const Destructive: Story = {
-  args: {
-    variant: 'outlined',
-    size: 'lg',
-    'aria-label': 'Delete',
-    children: <Trash />,
-  },
-};