@usefragments/ui 1.0.2 → 1.2.0

package/src/components/Prompt/Prompt.stories.tsx

@@ -1,93 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Prompt } from '.';
-
-/**
- * Prompt is a multi-line input with toolbar for AI and chat interfaces.
- * It is a compound component composed from Prompt.Textarea, Prompt.Toolbar,
- * Prompt.Actions, Prompt.Info, and Prompt.Submit.
- */
-const meta = {
-  title: 'Ai/Prompt',
-  component: Prompt,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Multi-line input with toolbar for AI and chat interfaces.',
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'fixed', 'sticky'],
-      description: 'Visual/positioning variant',
-    },
-    disabled: { control: 'boolean', description: 'Disable the entire prompt' },
-    loading: { control: 'boolean', description: 'Show loading state' },
-    submitOnEnter: {
-      control: 'boolean',
-      description: 'Submit on Enter (Shift+Enter for newline)',
-    },
-    autoResize: { control: 'boolean', description: 'Enable auto-resize based on content' },
-    placeholder: { control: 'text', description: 'Placeholder text for the textarea' },
-  },
-  args: {
-    placeholder: 'Ask, Search or Chat...',
-    variant: 'default',
-    children: (
-      <>
-        <Prompt.Textarea />
-        <Prompt.Toolbar>
-          <Prompt.Actions />
-          <Prompt.Info>
-            <Prompt.Submit />
-          </Prompt.Info>
-        </Prompt.Toolbar>
-      </>
-    ),
-  },
-  render: (args) => (
-    <Prompt {...args} onSubmit={(value) => console.log(value)}>
-      <Prompt.Textarea />
-      <Prompt.Toolbar>
-        <Prompt.Actions />
-        <Prompt.Info>
-          <Prompt.Submit />
-        </Prompt.Info>
-      </Prompt.Toolbar>
-    </Prompt>
-  ),
-} satisfies Meta<typeof Prompt>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {};
-
-export const WithActions: Story = {
-  render: (args) => (
-    <Prompt {...args} onSubmit={(value) => console.log(value)}>
-      <Prompt.Textarea />
-      <Prompt.Toolbar>
-        <Prompt.Actions>
-          <Prompt.ActionButton aria-label="Add attachment">+</Prompt.ActionButton>
-          <Prompt.ModeButton active>Auto</Prompt.ModeButton>
-        </Prompt.Actions>
-        <Prompt.Info>
-          <Prompt.Usage>52% used</Prompt.Usage>
-          <Prompt.Submit />
-        </Prompt.Info>
-      </Prompt.Toolbar>
-    </Prompt>
-  ),
-};
-
-export const Loading: Story = {
-  args: { loading: true, defaultValue: 'Tell me about the weather...' },
-};
-
-export const Disabled: Story = {
-  args: { disabled: true },
-};

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -1,107 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { RadioGroup } from '.';
-
-/**
- * RadioGroup lets users select one option from a set of mutually exclusive
- * choices. It is a compound component: each option is a RadioGroup.Item with
- * a value and label.
- */
-const meta = {
-  title: 'Forms/RadioGroup',
-  component: RadioGroup,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Single selection from a list of mutually exclusive options.',
-      },
-    },
-  },
-  argTypes: {
-    orientation: {
-      control: 'select',
-      options: ['horizontal', 'vertical'],
-      description: 'Layout orientation',
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Size variant',
-    },
-    variant: {
-      control: 'select',
-      options: ['default', 'card'],
-      description: 'Visual variant',
-    },
-    disabled: { control: 'boolean', description: 'Disable all options' },
-  },
-  args: {
-    label: 'Select an option',
-    defaultValue: 'option1',
-    size: 'md',
-    orientation: 'vertical',
-    children: (
-      <>
-        <RadioGroup.Item value="option1" label="Option 1" />
-        <RadioGroup.Item value="option2" label="Option 2" />
-        <RadioGroup.Item value="option3" label="Option 3" />
-      </>
-    ),
-  },
-  render: (args) => (
-    <RadioGroup {...args}>
-      <RadioGroup.Item value="option1" label="Option 1" />
-      <RadioGroup.Item value="option2" label="Option 2" />
-      <RadioGroup.Item value="option3" label="Option 3" />
-    </RadioGroup>
-  ),
-} satisfies Meta<typeof RadioGroup>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const WithHelperText: Story = {
-  args: { label: 'Shipping method', defaultValue: 'standard' },
-  render: (args) => (
-    <RadioGroup {...args}>
-      <RadioGroup.Item value="standard" label="Standard" helperText="5-7 business days" />
-      <RadioGroup.Item value="express" label="Express" helperText="2-3 business days" />
-      <RadioGroup.Item value="overnight" label="Overnight" helperText="Next business day" />
-    </RadioGroup>
-  ),
-};
-
-export const Horizontal: Story = {
-  args: { label: 'Size', defaultValue: 'medium', orientation: 'horizontal' },
-  render: (args) => (
-    <RadioGroup {...args}>
-      <RadioGroup.Item value="small" label="S" />
-      <RadioGroup.Item value="medium" label="M" />
-      <RadioGroup.Item value="large" label="L" />
-      <RadioGroup.Item value="xlarge" label="XL" />
-    </RadioGroup>
-  ),
-};
-
-export const WithError: Story = {
-  args: { label: 'Required selection', defaultValue: undefined, error: 'Please select an option' },
-  render: (args) => (
-    <RadioGroup {...args}>
-      <RadioGroup.Item value="a" label="Option A" />
-      <RadioGroup.Item value="b" label="Option B" />
-    </RadioGroup>
-  ),
-};
-
-export const Disabled: Story = {
-  args: { label: 'Locked selection', defaultValue: 'locked', disabled: true },
-  render: (args) => (
-    <RadioGroup {...args}>
-      <RadioGroup.Item value="locked" label="This is locked" />
-      <RadioGroup.Item value="other" label="Cannot select" />
-    </RadioGroup>
-  ),
-};

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -1,97 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ScrollArea } from '.';
-
-/**
- * ScrollArea is a styled scrollable container with thin scrollbars and
- * optional fade indicators. Use orientation to constrain scroll direction
- * and showFades to hint at content beyond the viewport.
- */
-const meta = {
-  title: 'Layout/ScrollArea',
-  component: ScrollArea,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Styled scrollable container with thin scrollbars and optional fade indicators.',
-      },
-    },
-  },
-  argTypes: {
-    orientation: {
-      control: 'select',
-      options: ['horizontal', 'vertical', 'both'],
-      description: 'Scroll direction',
-    },
-    scrollbarVisibility: {
-      control: 'select',
-      options: ['auto', 'always', 'hover'],
-      description: 'When to show the scrollbar',
-    },
-    showFades: {
-      control: 'boolean',
-      description: 'Show gradient fade indicators at scroll edges',
-    },
-  },
-  args: {
-    orientation: 'vertical',
-    scrollbarVisibility: 'auto',
-    showFades: false,
-    children: (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: 8 }}>
-        {Array.from({ length: 20 }, (_, i) => (
-          <div key={i}>Row {i + 1}</div>
-        ))}
-      </div>
-    ),
-  },
-  render: (args) => (
-    <ScrollArea {...args} style={{ height: 160, width: 280 }}>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: 8 }}>
-        {Array.from({ length: 20 }, (_, i) => (
-          <div key={i}>Row {i + 1}</div>
-        ))}
-      </div>
-    </ScrollArea>
-  ),
-} satisfies Meta<typeof ScrollArea>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Vertical: Story = {};
-
-export const Horizontal: Story = {
-  args: { orientation: 'horizontal' },
-  render: (args) => (
-    <ScrollArea {...args} style={{ width: 280 }}>
-      <div style={{ display: 'flex', gap: 8, padding: 8 }}>
-        {Array.from({ length: 20 }, (_, i) => (
-          <div key={i} style={{ flex: '0 0 auto' }}>
-            Chip {i + 1}
-          </div>
-        ))}
-      </div>
-    </ScrollArea>
-  ),
-};
-
-export const WithFades: Story = {
-  args: { orientation: 'horizontal', showFades: true },
-  render: (args) => (
-    <ScrollArea {...args} style={{ width: 280 }}>
-      <div style={{ display: 'flex', gap: 8, padding: 8 }}>
-        {Array.from({ length: 20 }, (_, i) => (
-          <div key={i} style={{ flex: '0 0 auto' }}>
-            Item {i + 1}
-          </div>
-        ))}
-      </div>
-    </ScrollArea>
-  ),
-};
-
-export const HoverScrollbar: Story = {
-  args: { scrollbarVisibility: 'hover' },
-};

package/src/components/Select/Select.stories.tsx

@@ -1,127 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Select } from ".";
-
-/**
- * Select is a dropdown for choosing from a list of options. It is a compound
- * component requiring Select.Trigger and Select.Content children, with
- * Select.Item entries (optionally organized via Select.Group).
- */
-const meta = {
-  title: "Forms/Select",
-  component: Select,
-  tags: ["autodocs", "canonical"],
-  parameters: {
-    docs: {
-      description: {
-        component: "Dropdown for choosing from a list of options.",
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: "select",
-      options: ["sm", "md", "lg"],
-      description: "Size variant",
-    },
-    disabled: { control: "boolean", description: "Disable the select" },
-    required: { control: "boolean", description: "Whether a selection is required" },
-    placeholder: { control: "text", description: "Placeholder text when no value selected" },
-  },
-  args: { placeholder: "Select a fruit", size: "md" },
-  render: (args) => (
-    <Select {...args}>
-      <Select.Trigger />
-      <Select.Content>
-        <Select.Item value="apple">Apple</Select.Item>
-        <Select.Item value="banana">Banana</Select.Item>
-        <Select.Item value="orange">Orange</Select.Item>
-        <Select.Item value="grape">Grape</Select.Item>
-      </Select.Content>
-    </Select>
-  ),
-} satisfies Meta<typeof Select>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const WithGroups: Story = {
-  args: { placeholder: "Select a country" },
-  render: (args) => (
-    <Select {...args}>
-      <Select.Trigger />
-      <Select.Content>
-        <Select.Group>
-          <Select.GroupLabel>North America</Select.GroupLabel>
-          <Select.Item value="us">United States</Select.Item>
-          <Select.Item value="ca">Canada</Select.Item>
-        </Select.Group>
-        <Select.Group>
-          <Select.GroupLabel>Europe</Select.GroupLabel>
-          <Select.Item value="uk">United Kingdom</Select.Item>
-          <Select.Item value="de">Germany</Select.Item>
-        </Select.Group>
-      </Select.Content>
-    </Select>
-  ),
-};
-
-export const WithLabelAndHelper: Story = {
-  args: {
-    label: "Timezone",
-    placeholder: "Select a timezone",
-    helperText: "Used for reminders and calendar notifications.",
-  },
-  render: (args) => (
-    <Select {...args}>
-      <Select.Trigger />
-      <Select.Content>
-        <Select.Item value="pt">Pacific Time</Select.Item>
-        <Select.Item value="mt">Mountain Time</Select.Item>
-        <Select.Item value="ct">Central Time</Select.Item>
-        <Select.Item value="et">Eastern Time</Select.Item>
-      </Select.Content>
-    </Select>
-  ),
-};
-
-export const OptionsProp: Story = {
-  args: { placeholder: "Select a team" },
-  render: (args) => (
-    <Select
-      {...args}
-      options={[
-        { value: "eng", label: "Engineering" },
-        { value: "design", label: "Design" },
-        { value: "pm", label: "Product" },
-      ]}
-    />
-  ),
-};
-
-export const ErrorState: Story = {
-  args: { label: "Country", placeholder: "Select a country", error: "Please select a country" },
-  render: (args) => (
-    <Select {...args}>
-      <Select.Trigger />
-      <Select.Content>
-        <Select.Item value="us">United States</Select.Item>
-        <Select.Item value="uk">United Kingdom</Select.Item>
-      </Select.Content>
-    </Select>
-  ),
-};
-
-export const Disabled: Story = {
-  args: { placeholder: "Select an option", disabled: true },
-  render: (args) => (
-    <Select {...args}>
-      <Select.Trigger />
-      <Select.Content>
-        <Select.Item value="1">Option 1</Select.Item>
-      </Select.Content>
-    </Select>
-  ),
-};

package/src/components/Separator/Separator.stories.tsx

@@ -1,84 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Separator } from '.';
-
-/**
- * Separator is a visual divider between content sections. It supports
- * horizontal and vertical orientations, spacing presets, a softer
- * appearance, and an optional centered label (horizontal only).
- */
-const meta = {
-  title: 'Layout/Separator',
-  component: Separator,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Visual divider between content sections.',
-      },
-    },
-  },
-  argTypes: {
-    orientation: {
-      control: 'select',
-      options: ['horizontal', 'vertical'],
-      description: 'Direction of the separator',
-    },
-    spacing: {
-      control: 'select',
-      options: ['none', 'sm', 'md', 'lg'],
-      description: 'Margin around the separator',
-    },
-    soft: { control: 'boolean', description: 'Softer, lighter appearance' },
-  },
-  args: { orientation: 'horizontal', spacing: 'md', soft: false },
-} satisfies Meta<typeof Separator>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { spacing: 'md' },
-  render: (args) => (
-    <div style={{ width: 300 }}>
-      <p>Content above</p>
-      <Separator {...args} />
-      <p>Content below</p>
-    </div>
-  ),
-};
-
-export const WithLabel: Story = {
-  args: { label: 'Or', spacing: 'md' },
-  render: (args) => (
-    <div style={{ width: 300 }}>
-      <p>First section</p>
-      <Separator {...args} />
-      <p>Second section</p>
-    </div>
-  ),
-};
-
-export const Soft: Story = {
-  args: { soft: true, spacing: 'md' },
-  render: (args) => (
-    <div style={{ width: 300 }}>
-      <p>Content above</p>
-      <Separator {...args} />
-      <p>Content below</p>
-    </div>
-  ),
-};
-
-export const Vertical: Story = {
-  args: { orientation: 'vertical', spacing: 'none' },
-  render: (args) => (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 16, height: 40 }}>
-      <span>Item 1</span>
-      <Separator {...args} />
-      <span>Item 2</span>
-      <Separator {...args} />
-      <span>Item 3</span>
-    </div>
-  ),
-};

package/src/components/Sidebar/Sidebar.stories.tsx

@@ -1,122 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Sidebar } from '.';
-
-/**
- * Sidebar is a responsive navigation sidebar with collapsible desktop mode
- * and mobile drawer behavior. It is a compound component composed from
- * Sidebar.Header, Sidebar.Nav, Sidebar.Section, Sidebar.Item, and more.
- */
-const meta = {
-  title: 'Navigation/Sidebar',
-  component: Sidebar,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Responsive navigation sidebar with collapsible desktop mode and mobile drawer behavior.',
-      },
-    },
-  },
-  argTypes: {
-    position: {
-      control: 'select',
-      options: ['left', 'right'],
-      description: 'Sidebar position',
-    },
-    collapsible: {
-      control: 'select',
-      options: ['icon', 'offcanvas', 'none'],
-      description: 'Collapse behavior mode',
-    },
-    defaultCollapsed: { control: 'boolean', description: 'Initial collapsed state' },
-  },
-  args: {
-    position: 'left',
-    collapsible: 'icon',
-    defaultCollapsed: false,
-    children: (
-      <>
-        <Sidebar.Header>
-          <span>Acme App</span>
-        </Sidebar.Header>
-        <Sidebar.Nav>
-          <Sidebar.Section>
-            <Sidebar.Item active>Dashboard</Sidebar.Item>
-            <Sidebar.Item>Analytics</Sidebar.Item>
-          </Sidebar.Section>
-        </Sidebar.Nav>
-        <Sidebar.Footer>
-          <Sidebar.CollapseToggle />
-        </Sidebar.Footer>
-      </>
-    ),
-  },
-  render: (args) => (
-    <Sidebar {...args}>
-      <Sidebar.Header>
-        <span>Acme App</span>
-      </Sidebar.Header>
-      <Sidebar.Nav>
-        <Sidebar.Section>
-          <Sidebar.Item active>Dashboard</Sidebar.Item>
-          <Sidebar.Item>Analytics</Sidebar.Item>
-          <Sidebar.Item>Team</Sidebar.Item>
-          <Sidebar.Item>Projects</Sidebar.Item>
-        </Sidebar.Section>
-        <Sidebar.Section label="Settings">
-          <Sidebar.Item>Preferences</Sidebar.Item>
-          <Sidebar.Item>Help</Sidebar.Item>
-        </Sidebar.Section>
-      </Sidebar.Nav>
-      <Sidebar.Footer>
-        <Sidebar.CollapseToggle />
-      </Sidebar.Footer>
-    </Sidebar>
-  ),
-} satisfies Meta<typeof Sidebar>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const WithBadges: Story = {
-  render: (args) => (
-    <Sidebar {...args}>
-      <Sidebar.Nav>
-        <Sidebar.Section>
-          <Sidebar.Item active>Dashboard</Sidebar.Item>
-          <Sidebar.Item badge="3">Analytics</Sidebar.Item>
-          <Sidebar.Item badge="12">Team</Sidebar.Item>
-          <Sidebar.Item>Projects</Sidebar.Item>
-        </Sidebar.Section>
-      </Sidebar.Nav>
-    </Sidebar>
-  ),
-};
-
-export const WithSubmenu: Story = {
-  render: (args) => (
-    <Sidebar {...args}>
-      <Sidebar.Nav>
-        <Sidebar.Section>
-          <Sidebar.Item>Dashboard</Sidebar.Item>
-          <Sidebar.Item hasSubmenu defaultExpanded>
-            Projects
-          </Sidebar.Item>
-          <Sidebar.Submenu>
-            <Sidebar.SubItem active>Website Redesign</Sidebar.SubItem>
-            <Sidebar.SubItem>Mobile App</Sidebar.SubItem>
-            <Sidebar.SubItem>API Integration</Sidebar.SubItem>
-          </Sidebar.Submenu>
-        </Sidebar.Section>
-      </Sidebar.Nav>
-    </Sidebar>
-  ),
-};
-
-export const Collapsed: Story = {
-  args: { defaultCollapsed: true },
-};