@usefragments/ui 1.0.2 → 1.2.0

package/src/components/Image/Image.stories.tsx

@@ -1,109 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Image } from '.';
-
-/**
- * Image is a responsive image component with aspect-ratio control, loading
- * states, and error fallbacks. The src and alt props are required; alt must
- * describe the image content for accessibility.
- */
-const SAMPLE_SRC =
-  'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&h=300&fit=crop';
-
-const meta = {
-  title: 'Display/Image',
-  component: Image,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Responsive image with aspect-ratio control, loading states, and error fallbacks.',
-      },
-    },
-  },
-  argTypes: {
-    aspectRatio: {
-      control: 'select',
-      options: ['1:1', '4:3', '16:9', '21:9', 'auto'],
-      description: 'Aspect ratio of the image container',
-    },
-    objectFit: {
-      control: 'select',
-      options: ['cover', 'contain', 'fill', 'none'],
-      description: 'How the image fits within its container',
-    },
-    rounded: {
-      control: 'select',
-      options: ['none', 'sm', 'md', 'lg', 'full'],
-      description: 'Border radius',
-    },
-  },
-  args: {
-    src: SAMPLE_SRC,
-    alt: 'Code on a screen',
-    width: 300,
-  },
-} satisfies Meta<typeof Image>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { src: SAMPLE_SRC, alt: 'Code on a screen', width: 300 },
-};
-
-export const Square: Story = {
-  args: {
-    src: SAMPLE_SRC,
-    alt: 'Square crop',
-    aspectRatio: '1:1',
-    width: 200,
-  },
-};
-
-export const Widescreen: Story = {
-  args: {
-    src: SAMPLE_SRC,
-    alt: 'Widescreen crop',
-    aspectRatio: '16:9',
-    width: 320,
-    rounded: 'md',
-  },
-};
-
-export const Rounded: Story = {
-  args: {
-    src: SAMPLE_SRC,
-    alt: 'Rounded image',
-    aspectRatio: '1:1',
-    rounded: 'full',
-    width: 120,
-    height: 120,
-  },
-};
-
-export const WithFallback: Story = {
-  args: {
-    src: 'https://invalid-url.example/image.jpg',
-    alt: 'Image that will fail to load',
-    width: 200,
-    height: 150,
-    rounded: 'md',
-    fallback: (
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: '100%',
-          background: 'var(--fui-color-surface-secondary, #f4f4f5)',
-        }}
-      >
-        <span style={{ color: 'var(--fui-color-text-tertiary, #71717a)' }}>
-          No image
-        </span>
-      </div>
-    ),
-  },
-};

package/src/components/Input/Input.stories.tsx

@@ -1,104 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { MagnifyingGlass } from "@phosphor-icons/react";
-import { Input } from ".";
-
-/**
- * Single-line text input with built-in label, helper text, and validation states.
- * Supports controlled/uncontrolled values, adornments, and a keyboard shortcut hint.
- */
-const meta = {
-  title: "Forms/Input",
-  component: Input,
-  tags: ["autodocs", "canonical"],
-  parameters: {
-    docs: {
-      description: {
-        component: "Text input field for single-line user data entry.",
-      },
-    },
-  },
-  argTypes: {
-    type: {
-      control: "select",
-      options: ["number", "text", "email", "password", "tel", "url"],
-      description: "HTML input type for validation and keyboard",
-    },
-    size: {
-      control: "select",
-      options: ["sm", "md", "lg"],
-      description: "Size variant",
-    },
-    shortcutBehavior: {
-      control: "select",
-      options: ["display-only", "focus-input"],
-      description: "Whether the shortcut hint is visual only or registers a hotkey",
-    },
-    disabled: { control: "boolean" },
-    error: { control: "boolean" },
-    success: { control: "boolean" },
-    required: { control: "boolean" },
-    withFieldWrapper: { control: "boolean" },
-  },
-  args: {
-    label: "Name",
-    placeholder: "Enter your name",
-    type: "text",
-    size: "md",
-  },
-} satisfies Meta<typeof Input>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { label: "Name", placeholder: "Enter your name" },
-};
-
-export const Email: Story = {
-  args: { label: "Email", type: "email", placeholder: "user@example.com" },
-};
-
-export const WithHelper: Story = {
-  args: {
-    label: "Password",
-    type: "password",
-    placeholder: "Create a password",
-    helperText: "Must be at least 8 characters",
-  },
-};
-
-export const ErrorState: Story = {
-  args: {
-    label: "Email",
-    type: "email",
-    value: "invalid-email",
-    error: true,
-    helperText: "Please enter a valid email address",
-  },
-};
-
-export const Disabled: Story = {
-  args: { label: "Username", value: "readonly-user", disabled: true },
-};
-
-export const Required: Story = {
-  args: {
-    label: "Email",
-    type: "email",
-    placeholder: "user@example.com",
-    required: true,
-  },
-};
-
-export const SearchWithShortcut: Story = {
-  args: {
-    "aria-label": "Search findings",
-    placeholder: "Search findings...",
-    shortcut: "⌘K",
-    shortcutBehavior: "focus-input",
-    startAdornment: <MagnifyingGlass aria-hidden="true" />,
-    withFieldWrapper: false,
-    rootProps: { style: { maxWidth: 420 } },
-  },
-};

package/src/components/Link/Link.stories.tsx

@@ -1,67 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Link } from '.';
-
-/**
- * Styled anchor element for navigation. Supports internal and external links
- * with consistent visual treatment, variants, and underline behaviors.
- */
-const meta = {
-  title: 'Navigation/Link',
-  component: Link,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Styled anchor element for internal and external navigation.',
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'subtle', 'muted'],
-      description: 'Visual style variant',
-    },
-    underline: {
-      control: 'select',
-      options: ['always', 'hover', 'none'],
-      description: 'Underline behavior',
-    },
-    external: { control: 'boolean' },
-    asChild: { control: 'boolean' },
-  },
-  args: {
-    href: '#',
-    variant: 'default',
-    underline: 'hover',
-    children: 'Learn more about our services',
-  },
-} satisfies Meta<typeof Link>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { href: '#', children: 'Learn more about our services' },
-};
-
-export const Subtle: Story = {
-  args: { href: '#', variant: 'subtle', children: 'Secondary link' },
-};
-
-export const Muted: Story = {
-  args: { href: '#', variant: 'muted', children: 'Muted link' },
-};
-
-export const AlwaysUnderlined: Story = {
-  args: { href: '#', underline: 'always', children: 'Always underlined' },
-};
-
-export const External: Story = {
-  args: {
-    href: 'https://example.com',
-    external: true,
-    children: 'View documentation',
-  },
-};

package/src/components/List/List.stories.tsx

@@ -1,95 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { List } from '.';
-
-/**
- * Compound component for ordered or unordered lists with consistent styling.
- * Compose with `List.Item`. Supports bullet, numbered, icon, and unstyled variants.
- */
-const meta = {
-  title: 'Display/List',
-  component: List,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Renders ordered or unordered lists with consistent styling.',
-      },
-    },
-  },
-  argTypes: {
-    as: {
-      control: 'select',
-      options: ['ul', 'ol'],
-      description: 'Underlying list element',
-    },
-    variant: {
-      control: 'select',
-      options: ['none', 'disc', 'decimal', 'icon'],
-      description: 'List style variant',
-    },
-    gap: {
-      control: 'select',
-      options: ['none', 'xs', 'sm', 'md', 'lg'],
-      description: 'Spacing between items',
-    },
-  },
-  args: {
-    variant: 'disc',
-    gap: 'sm',
-    children: (
-      <>
-        <List.Item>First item</List.Item>
-        <List.Item>Second item</List.Item>
-        <List.Item>Third item</List.Item>
-      </>
-    ),
-  },
-} satisfies Meta<typeof List>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Bullet: Story = {
-  args: { variant: 'disc' },
-  render: (args) => (
-    <List {...args}>
-      <List.Item>First item</List.Item>
-      <List.Item>Second item</List.Item>
-      <List.Item>Third item</List.Item>
-    </List>
-  ),
-};
-
-export const Numbered: Story = {
-  args: { as: 'ol', variant: 'decimal' },
-  render: (args) => (
-    <List {...args}>
-      <List.Item>Create your account</List.Item>
-      <List.Item>Configure your settings</List.Item>
-      <List.Item>Start building</List.Item>
-    </List>
-  ),
-};
-
-export const IconList: Story = {
-  args: { variant: 'icon' },
-  render: (args) => (
-    <List {...args}>
-      <List.Item icon={<span aria-hidden>✓</span>}>Unlimited projects</List.Item>
-      <List.Item icon={<span aria-hidden>✓</span>}>Priority support</List.Item>
-      <List.Item icon={<span aria-hidden>✓</span>}>Advanced analytics</List.Item>
-    </List>
-  ),
-};
-
-export const Unstyled: Story = {
-  args: { variant: 'none', gap: 'md' },
-  render: (args) => (
-    <List {...args}>
-      <List.Item>Dashboard</List.Item>
-      <List.Item>Settings</List.Item>
-      <List.Item>Profile</List.Item>
-    </List>
-  ),
-};

package/src/components/Listbox/Listbox.stories.tsx

@@ -1,81 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Listbox } from '.';
-
-/**
- * Controlled listbox for search results, autocomplete dropdowns, and command menus.
- * Compose with `Listbox.Item`, `Listbox.Group`, and `Listbox.Empty`; provides
- * arrow/home/end keyboard navigation when focused.
- */
-const meta = {
-  title: 'Forms/Listbox',
-  component: Listbox,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Controlled option list for search results, autocomplete, and command menus.',
-      },
-    },
-  },
-  args: {
-    'aria-label': 'Options',
-    children: (
-      <>
-        <Listbox.Item selected>First option</Listbox.Item>
-        <Listbox.Item>Second option</Listbox.Item>
-        <Listbox.Item>Third option</Listbox.Item>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Listbox>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Listbox {...args}>
-      <Listbox.Item selected>First option</Listbox.Item>
-      <Listbox.Item>Second option</Listbox.Item>
-      <Listbox.Item>Third option</Listbox.Item>
-    </Listbox>
-  ),
-};
-
-export const WithGroups: Story = {
-  args: { 'aria-label': 'Commands' },
-  render: (args) => (
-    <Listbox {...args}>
-      <Listbox.Group label="Recent">
-        <Listbox.Item selected>Open file...</Listbox.Item>
-        <Listbox.Item>Save as...</Listbox.Item>
-      </Listbox.Group>
-      <Listbox.Group label="Actions">
-        <Listbox.Item>Copy</Listbox.Item>
-        <Listbox.Item>Paste</Listbox.Item>
-        <Listbox.Item disabled>Cut</Listbox.Item>
-      </Listbox.Group>
-    </Listbox>
-  ),
-};
-
-export const WithDisabledItems: Story = {
-  render: (args) => (
-    <Listbox {...args}>
-      <Listbox.Item>Available option</Listbox.Item>
-      <Listbox.Item disabled>Disabled option</Listbox.Item>
-      <Listbox.Item>Another option</Listbox.Item>
-    </Listbox>
-  ),
-};
-
-export const EmptyState: Story = {
-  args: { 'aria-label': 'Search results' },
-  render: (args) => (
-    <Listbox {...args}>
-      <Listbox.Empty>No results found</Listbox.Empty>
-    </Listbox>
-  ),
-};

package/src/components/Loading/Loading.stories.tsx

@@ -1,69 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Loading } from '.';
-
-/**
- * Loading indicator for showing progress or waiting states. Offers spinner,
- * dots, and pulse variants plus `Loading.Inline` and `Loading.Screen` helpers.
- */
-const meta = {
-  title: 'Feedback/Loading',
-  component: Loading,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Versatile loading indicator with spinner, dots, and pulse variants.',
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg', 'xl'],
-      description: 'Size of the loading indicator',
-    },
-    variant: {
-      control: 'select',
-      options: ['spinner', 'dots', 'pulse'],
-      description: 'Visual style of the loading animation',
-    },
-    color: {
-      control: 'select',
-      options: ['accent', 'current', 'muted'],
-      description: 'Color variant',
-    },
-    centered: { control: 'boolean' },
-    fill: { control: 'boolean' },
-    overlay: { control: 'boolean' },
-  },
-  args: {
-    size: 'md',
-    variant: 'spinner',
-    color: 'accent',
-    label: 'Loading...',
-  },
-} satisfies Meta<typeof Loading>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Spinner: Story = {
-  args: { variant: 'spinner' },
-};
-
-export const Dots: Story = {
-  args: { variant: 'dots' },
-};
-
-export const Pulse: Story = {
-  args: { variant: 'pulse' },
-};
-
-export const Large: Story = {
-  args: { variant: 'spinner', size: 'xl' },
-};
-
-export const Muted: Story = {
-  args: { variant: 'spinner', color: 'muted' },
-};

package/src/components/Markdown/Markdown.stories.tsx

@@ -1,75 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Markdown } from '.';
-
-/**
- * Renders markdown strings as styled prose via react-markdown and remark-gfm.
- * Supports headings, lists, tables, code blocks, blockquotes, and task lists.
- */
-const meta = {
-  title: 'Display/Markdown',
-  component: Markdown,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Renders a markdown string as styled prose.',
-      },
-    },
-  },
-  args: {
-    content: [
-      '# Hello World',
-      '',
-      'This is a paragraph with **bold text** and *italic text*.',
-      '',
-      'Here is some `inline code` within a sentence.',
-      '',
-      '- First item',
-      '- Second item',
-      '- Third item',
-      '',
-      '> A blockquote for emphasis.',
-    ].join('\n'),
-  },
-} satisfies Meta<typeof Markdown>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Table: Story = {
-  args: {
-    content: [
-      '## Data Overview',
-      '',
-      '| Feature    | Status    | Priority |',
-      '|------------|-----------|----------|',
-      '| Markdown   | Done      | High     |',
-      '| Tables     | Done      | Medium   |',
-      '| Task Lists | Planned   | Low      |',
-      '',
-      'Notes:',
-      '- [x] Support GFM tables',
-      '- [x] Support task lists',
-      '- [ ] Syntax highlighting',
-    ].join('\n'),
-  },
-};
-
-export const CodeBlock: Story = {
-  args: {
-    content: [
-      '## Code Example',
-      '',
-      'Here is a JavaScript function:',
-      '',
-      '```js',
-      'function greet(name) {',
-      '  return `Hello, ${name}!`;',
-      '}',
-      '```',
-    ].join('\n'),
-  },
-};