@usefragments/ui 1.0.2 → 1.2.0

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,136 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Tabs } from '.';
-
-/**
- * Tabs is the canonical content-switcher primitive. Use it to organize related
- * content into navigable panels — agents should compose
- * `Tabs.List`/`Tabs.Tab`/`Tabs.Panel` rather than hand-rolling a tab control
- * with manual focus management.
- */
-const meta = {
-  title: 'Navigation/Tabs',
-  component: Tabs,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Organize content into switchable panels following the WAI-ARIA tabs pattern. Prefer this over a hand-rolled tab control.',
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['underline', 'pills'],
-      description: 'Default visual style for Tabs.List',
-    },
-    orientation: {
-      control: 'select',
-      options: ['horizontal', 'vertical'],
-      description: 'Tab list orientation',
-    },
-  },
-  args: {
-    variant: 'underline',
-    orientation: 'horizontal',
-    defaultValue: 'overview',
-    children: (
-      <>
-        <Tabs.List>
-          <Tabs.Tab value="overview">Overview</Tabs.Tab>
-          <Tabs.Tab value="analytics">Analytics</Tabs.Tab>
-        </Tabs.List>
-        <Tabs.Panel value="overview">
-          <p>Overview content goes here.</p>
-        </Tabs.Panel>
-        <Tabs.Panel value="analytics">
-          <p>Analytics content goes here.</p>
-        </Tabs.Panel>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Tabs>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Underline: Story = {
-  render: () => (
-    <Tabs defaultValue="overview" variant="underline">
-      <Tabs.List>
-        <Tabs.Tab value="overview">Overview</Tabs.Tab>
-        <Tabs.Tab value="analytics">Analytics</Tabs.Tab>
-        <Tabs.Tab value="settings">Settings</Tabs.Tab>
-      </Tabs.List>
-      <Tabs.Panel value="overview">
-        <p>Overview content goes here.</p>
-      </Tabs.Panel>
-      <Tabs.Panel value="analytics">
-        <p>Analytics content goes here.</p>
-      </Tabs.Panel>
-      <Tabs.Panel value="settings">
-        <p>Settings content goes here.</p>
-      </Tabs.Panel>
-    </Tabs>
-  ),
-};
-
-export const Pills: Story = {
-  render: () => (
-    <Tabs defaultValue="all" variant="pills">
-      <Tabs.List>
-        <Tabs.Tab value="all">All</Tabs.Tab>
-        <Tabs.Tab value="active">Active</Tabs.Tab>
-        <Tabs.Tab value="archived">Archived</Tabs.Tab>
-      </Tabs.List>
-      <Tabs.Panel value="all">
-        <p>Showing all items.</p>
-      </Tabs.Panel>
-      <Tabs.Panel value="active">
-        <p>Showing active items only.</p>
-      </Tabs.Panel>
-      <Tabs.Panel value="archived">
-        <p>Showing archived items.</p>
-      </Tabs.Panel>
-    </Tabs>
-  ),
-};
-
-export const WithDisabled: Story = {
-  render: () => (
-    <Tabs defaultValue="general" variant="underline">
-      <Tabs.List>
-        <Tabs.Tab value="general">General</Tabs.Tab>
-        <Tabs.Tab value="security">Security</Tabs.Tab>
-        <Tabs.Tab value="billing" disabled>
-          Billing
-        </Tabs.Tab>
-      </Tabs.List>
-      <Tabs.Panel value="general">
-        <p>General settings panel.</p>
-      </Tabs.Panel>
-      <Tabs.Panel value="security">
-        <p>Security settings panel.</p>
-      </Tabs.Panel>
-    </Tabs>
-  ),
-};
-
-export const ListVariantOverride: Story = {
-  render: () => (
-    <Tabs defaultValue="overview" variant="pills">
-      <Tabs.List variant="underline">
-        <Tabs.Tab value="overview">Overview</Tabs.Tab>
-        <Tabs.Tab value="activity">Activity</Tabs.Tab>
-      </Tabs.List>
-      <Tabs.Panel value="overview">
-        <p>Root sets pills, but this list overrides to underline.</p>
-      </Tabs.Panel>
-      <Tabs.Panel value="activity">
-        <p>Per-list variant override example.</p>
-      </Tabs.Panel>
-    </Tabs>
-  ),
-};

package/src/components/Text/Text.stories.tsx

@@ -1,133 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Text } from '.';
-
-/**
- * Text is the canonical typography primitive. Every heading, paragraph, label,
- * and inline string in the design system routes through it for consistent size,
- * weight, color, and font — agents should reuse it rather than styling raw
- * `<p>`/`<span>`/`<h1>` elements by hand.
- */
-const meta = {
-  title: 'Display/Text',
-  component: Text,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Typography component for rendering text with consistent styling and semantic elements. Prefer this over raw <p>, <span>, or heading tags.',
-      },
-    },
-  },
-  argTypes: {
-    as: {
-      control: 'select',
-      options: [
-        'h1',
-        'h2',
-        'h3',
-        'h4',
-        'h5',
-        'h6',
-        'p',
-        'span',
-        'label',
-        'div',
-        'strong',
-        'em',
-        'small',
-        'mark',
-        'del',
-        'ins',
-        'sub',
-        'sup',
-        'time',
-        'address',
-        'blockquote',
-        'cite',
-        'code',
-        'abbr',
-      ],
-      description: 'HTML element to render',
-    },
-    variant: {
-      control: 'select',
-      options: ['section-label'],
-      description: 'Preset text variant',
-    },
-    size: {
-      control: 'select',
-      options: ['2xs', 'xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
-      description: 'Font size',
-    },
-    weight: {
-      control: 'select',
-      options: ['normal', 'medium', 'semibold', 'bold'],
-      description: 'Font weight',
-    },
-    color: {
-      control: 'select',
-      options: ['primary', 'secondary', 'tertiary', 'muted'],
-      description: 'Text color (muted is an alias for tertiary)',
-    },
-    font: {
-      control: 'select',
-      options: ['sans', 'mono'],
-      description: 'Font family',
-    },
-    truncate: { control: 'boolean', description: 'Truncate with ellipsis on overflow' },
-  },
-  args: {
-    children: 'The quick brown fox jumps over the lazy dog',
-    size: 'md',
-    weight: 'normal',
-    color: 'primary',
-  },
-} satisfies Meta<typeof Text>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { children: 'The quick brown fox jumps over the lazy dog' },
-};
-
-export const Heading: Story = {
-  args: { as: 'h1', size: '3xl', weight: 'semibold', children: 'Page title' },
-};
-
-export const Paragraph: Story = {
-  args: {
-    as: 'p',
-    size: 'md',
-    color: 'secondary',
-    children:
-      'This is a paragraph of body text that demonstrates the Text component using a semantic paragraph element.',
-  },
-};
-
-export const SectionLabel: Story = {
-  args: { as: 'p', variant: 'section-label', children: 'On This Page' },
-};
-
-export const Bold: Story = {
-  args: { weight: 'bold', children: 'Bold weight text' },
-};
-
-export const Secondary: Story = {
-  args: { color: 'secondary', children: 'Secondary color text' },
-};
-
-export const Monospace: Story = {
-  args: { font: 'mono', size: 'sm', children: 'npm install @usefragments/ui' },
-};
-
-export const Truncated: Story = {
-  args: {
-    truncate: true,
-    style: { display: 'block', maxWidth: '200px' },
-    children:
-      'This is a very long text that will be truncated with an ellipsis when it overflows the container.',
-  },
-};

package/src/components/Textarea/Textarea.stories.tsx

@@ -1,107 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Textarea } from '.';
-
-/**
- * Textarea is the canonical multi-line text input. Use it for comments,
- * descriptions, bios, and message composition — agents should reuse it (with
- * its built-in label, helper text, validation states, and character counter)
- * rather than styling a raw `<textarea>`.
- */
-const meta = {
-  title: 'Forms/Textarea',
-  component: Textarea,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Multi-line text input for longer form content with label, helper text, and validation states. Prefer this over a raw <textarea>.',
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Size variant',
-    },
-    resize: {
-      control: 'select',
-      options: ['none', 'vertical', 'horizontal', 'both'],
-      description: 'Resize behavior',
-    },
-    disabled: { control: 'boolean', description: 'Disabled state' },
-    error: { control: 'boolean', description: 'Error state' },
-    success: { control: 'boolean', description: 'Show success/validated styling' },
-    showCharCount: {
-      control: 'boolean',
-      description: 'Show character counter when maxLength is set',
-    },
-  },
-  args: {
-    label: 'Description',
-    placeholder: 'Enter a description...',
-    size: 'md',
-    rows: 3,
-  },
-} satisfies Meta<typeof Textarea>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { label: 'Description', placeholder: 'Enter a description...' },
-};
-
-export const WithHelperText: Story = {
-  args: {
-    label: 'Bio',
-    placeholder: 'Tell us about yourself...',
-    helperText: 'Max 500 characters',
-    maxLength: 500,
-  },
-};
-
-export const ErrorState: Story = {
-  args: {
-    label: 'Comments',
-    placeholder: 'Add your comments...',
-    error: true,
-    helperText: 'This field is required',
-  },
-};
-
-export const SuccessState: Story = {
-  args: {
-    label: 'Bio',
-    defaultValue: 'A short bio about myself.',
-    success: true,
-    helperText: 'Looks great!',
-  },
-};
-
-export const Disabled: Story = {
-  args: { label: 'Notes', placeholder: 'Cannot edit...', disabled: true },
-};
-
-export const CustomRows: Story = {
-  args: {
-    label: 'Long Description',
-    placeholder: 'Enter detailed information...',
-    rows: 6,
-  },
-};
-
-export const WithCharacterCounter: Story = {
-  args: {
-    label: 'Bio',
-    placeholder: 'Tell us about yourself...',
-    maxLength: 200,
-    showCharCount: true,
-  },
-};
-
-export const Large: Story = {
-  args: { label: 'Large', size: 'lg', placeholder: 'Large textarea' },
-};

package/src/components/Theme/Theme.stories.tsx

@@ -1,95 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThemeProvider, ThemeToggle } from '.';
-
-/**
- * ThemeProvider is the canonical theme-management primitive. Wrap your app with
- * it once at the root to supply light/dark/system mode via CSS custom
- * properties, with localStorage persistence — agents should use it (paired with
- * `useTheme` and `ThemeToggle`) rather than wiring up bespoke theme state.
- */
-const meta = {
-  title: 'Navigation/ThemeProvider',
-  component: ThemeProvider,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Theme context provider supporting light, dark, and system modes with localStorage persistence. Prefer this over hand-rolled theme state.',
-      },
-    },
-  },
-  argTypes: {
-    defaultMode: {
-      control: 'select',
-      options: ['light', 'dark', 'system'],
-      description: 'Default theme mode for uncontrolled usage',
-    },
-    mode: {
-      control: 'select',
-      options: ['light', 'dark', 'system'],
-      description: 'Controlled theme mode',
-    },
-    attribute: {
-      control: 'select',
-      options: ['data-theme', 'class'],
-      description: 'How to apply the theme to the DOM',
-    },
-    storageKey: { control: 'text', description: 'localStorage key for persistence' },
-  },
-  args: {
-    defaultMode: 'system',
-    children: (
-      <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-        <ThemeToggle />
-        <span>Click to cycle themes</span>
-      </div>
-    ),
-  },
-} satisfies Meta<typeof ThemeProvider>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <ThemeProvider {...args}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-        <ThemeToggle />
-        <span>Click to cycle themes</span>
-      </div>
-    </ThemeProvider>
-  ),
-};
-
-export const WithToggle: Story = {
-  args: { defaultMode: 'light' },
-  render: (args) => (
-    <ThemeProvider {...args}>
-      <ThemeToggle />
-    </ThemeProvider>
-  ),
-};
-
-export const ToggleSizes: Story = {
-  args: { defaultMode: 'light' },
-  render: (args) => (
-    <ThemeProvider {...args}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-        <ThemeToggle size="sm" />
-        <ThemeToggle size="md" />
-        <ThemeToggle size="lg" />
-      </div>
-    </ThemeProvider>
-  ),
-};
-
-export const DarkDefault: Story = {
-  args: { defaultMode: 'dark' },
-  render: (args) => (
-    <ThemeProvider {...args}>
-      <ThemeToggle showSystem />
-    </ThemeProvider>
-  ),
-};

package/src/components/ThinkingIndicator/ThinkingIndicator.stories.tsx

@@ -1,85 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ThinkingIndicator } from '.';
-
-/**
- * ThinkingIndicator is the canonical AI-processing indicator. Use it to show
- * that an assistant is working — animated dots/pulse/spinner, optional elapsed
- * time, and multi-step progress — and prefer it over a generic spinner whenever
- * the wait is driven by an AI request.
- */
-const meta = {
-  title: 'Ai/ThinkingIndicator',
-  component: ThinkingIndicator,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Animated indicator showing AI is processing, with optional elapsed time and multi-step progress. Prefer this over a generic spinner for AI operations.',
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['dots', 'pulse', 'spinner'],
-      description: 'Animation style',
-    },
-    active: { control: 'boolean', description: 'Whether the indicator is visible' },
-    showElapsed: { control: 'boolean', description: 'Show elapsed time' },
-    label: { control: 'text', description: 'Status text' },
-  },
-  args: {
-    variant: 'dots',
-    label: 'Thinking...',
-    active: true,
-  },
-} satisfies Meta<typeof ThinkingIndicator>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Dots: Story = {
-  args: { variant: 'dots', label: 'Thinking...' },
-};
-
-export const Pulse: Story = {
-  args: { variant: 'pulse', label: 'Processing...' },
-};
-
-export const Spinner: Story = {
-  args: { variant: 'spinner', label: 'Loading...' },
-};
-
-export const WithElapsedTime: Story = {
-  args: { variant: 'dots', label: 'Generating response...', showElapsed: true },
-};
-
-export const CustomLabel: Story = {
-  args: { variant: 'dots', label: 'Claude is writing code...' },
-};
-
-export const MultiStepProgress: Story = {
-  args: {
-    variant: 'spinner',
-    label: 'Working...',
-    steps: [
-      { id: '1', label: 'Analyzing request', status: 'complete' },
-      { id: '2', label: 'Searching knowledge base', status: 'active' },
-      { id: '3', label: 'Generating response', status: 'pending' },
-    ],
-  },
-};
-
-export const WithErrorStep: Story = {
-  args: {
-    variant: 'spinner',
-    label: 'Retrying...',
-    steps: [
-      { id: '1', label: 'Connecting to API', status: 'complete' },
-      { id: '2', label: 'Fetching data', status: 'error' },
-      { id: '3', label: 'Retrying with fallback', status: 'active' },
-    ],
-  },
-};

package/src/components/Toast/Toast.stories.tsx

@@ -1,91 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Toast } from '.';
-
-/**
- * Toast is the canonical transient-notification primitive. Use it for brief,
- * non-blocking feedback after an action (saved, deleted, failed). In an app,
- * wrap the tree in `Toast.Provider` and dispatch via `useToast()`; agents
- * should reuse this rather than hand-rolling a notification component.
- */
-const meta = {
-  title: 'Feedback/Toast',
-  component: Toast,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Brief, non-blocking notification messages. Prefer this (via Toast.Provider + useToast) over a hand-rolled notification system.',
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'success', 'error', 'warning', 'info'],
-      description: 'Visual variant indicating message type',
-    },
-    title: { control: 'text', description: 'Toast title' },
-    description: { control: 'text', description: 'Additional message content' },
-    duration: {
-      control: 'number',
-      description: 'Auto-dismiss duration in ms (0 = no auto-dismiss)',
-    },
-  },
-  args: {
-    title: 'Notification',
-    description: 'This is a toast message.',
-    variant: 'default',
-  },
-} satisfies Meta<typeof Toast>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { title: 'Heads up', description: 'Something just happened.', variant: 'default' },
-};
-
-export const Success: Story = {
-  args: {
-    title: 'Success!',
-    description: 'Your changes have been saved.',
-    variant: 'success',
-  },
-};
-
-export const Error: Story = {
-  args: {
-    title: 'Error',
-    description: 'Failed to save changes. Please try again.',
-    variant: 'error',
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    title: 'Warning',
-    description: 'This action cannot be undone.',
-    variant: 'warning',
-  },
-};
-
-export const Info: Story = {
-  args: {
-    title: 'New Update',
-    description: 'Version 2.0 is now available.',
-    variant: 'info',
-  },
-};
-
-export const WithAction: Story = {
-  args: {
-    title: 'File deleted',
-    description: 'The file has been moved to trash.',
-    action: {
-      label: 'Undo',
-      onClick: () => {},
-    },
-  },
-};