@usefragments/ui 1.1.1 → 1.2.0

package/src/components/Menu/Menu.stories.tsx

@@ -1,113 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Menu } from '.';
-
-/**
- * Dropdown menu for actions and commands. Compose with `Menu.Trigger`,
- * `Menu.Content`, `Menu.Item`, and friends. Supports submenus, check items,
- * radio groups, and keyboard shortcuts.
- */
-const meta = {
-  title: 'Feedback/Menu',
-  component: Menu,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Dropdown menu for actions and commands with keyboard navigation.',
-      },
-    },
-  },
-  argTypes: {
-    modal: { control: 'boolean' },
-    defaultOpen: { control: 'boolean' },
-  },
-  args: {
-    modal: true,
-    children: (
-      <>
-        <Menu.Trigger>Actions</Menu.Trigger>
-        <Menu.Content>
-          <Menu.Item onSelect={() => {}}>Edit</Menu.Item>
-          <Menu.Item onSelect={() => {}}>Duplicate</Menu.Item>
-        </Menu.Content>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Menu>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Menu {...args}>
-      <Menu.Trigger>Actions</Menu.Trigger>
-      <Menu.Content>
-        <Menu.Item onSelect={() => {}}>Edit</Menu.Item>
-        <Menu.Item onSelect={() => {}}>Duplicate</Menu.Item>
-        <Menu.Separator />
-        <Menu.Item danger onSelect={() => {}}>
-          Delete
-        </Menu.Item>
-      </Menu.Content>
-    </Menu>
-  ),
-};
-
-export const WithShortcuts: Story = {
-  render: (args) => (
-    <Menu {...args}>
-      <Menu.Trigger>Edit</Menu.Trigger>
-      <Menu.Content>
-        <Menu.Item shortcut="Ctrl+Z" onSelect={() => {}}>
-          Undo
-        </Menu.Item>
-        <Menu.Item shortcut="Ctrl+Y" onSelect={() => {}}>
-          Redo
-        </Menu.Item>
-        <Menu.Separator />
-        <Menu.Item shortcut="Ctrl+C" onSelect={() => {}}>
-          Copy
-        </Menu.Item>
-        <Menu.Item shortcut="Ctrl+V" onSelect={() => {}}>
-          Paste
-        </Menu.Item>
-      </Menu.Content>
-    </Menu>
-  ),
-};
-
-export const WithGroups: Story = {
-  render: (args) => (
-    <Menu {...args}>
-      <Menu.Trigger>Options</Menu.Trigger>
-      <Menu.Content>
-        <Menu.Group>
-          <Menu.GroupLabel>View</Menu.GroupLabel>
-          <Menu.Item onSelect={() => {}}>Zoom In</Menu.Item>
-          <Menu.Item onSelect={() => {}}>Zoom Out</Menu.Item>
-        </Menu.Group>
-        <Menu.Separator />
-        <Menu.Group>
-          <Menu.GroupLabel>Layout</Menu.GroupLabel>
-          <Menu.Item onSelect={() => {}}>Grid View</Menu.Item>
-          <Menu.Item onSelect={() => {}}>List View</Menu.Item>
-        </Menu.Group>
-      </Menu.Content>
-    </Menu>
-  ),
-};
-
-export const WithCheckboxes: Story = {
-  render: (args) => (
-    <Menu {...args}>
-      <Menu.Trigger>Display</Menu.Trigger>
-      <Menu.Content>
-        <Menu.CheckboxItem defaultChecked>Show Grid</Menu.CheckboxItem>
-        <Menu.CheckboxItem defaultChecked>Show Rulers</Menu.CheckboxItem>
-        <Menu.CheckboxItem>Show Guides</Menu.CheckboxItem>
-      </Menu.Content>
-    </Menu>
-  ),
-};

package/src/components/Message/Message.stories.tsx

@@ -1,85 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Message } from '.';
-
-/**
- * Individual chat message with role-based styling and alignment. Compose with
- * `Message.Content`, `Message.Timestamp`, `Message.Avatar`, and `Message.Actions`.
- */
-const meta = {
-  title: 'Ai/Message',
-  component: Message,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Chat message display with role-based styling for AI conversation UIs.',
-      },
-    },
-  },
-  argTypes: {
-    role: {
-      control: 'select',
-      options: ['user', 'assistant', 'system'],
-      description: 'Message role determines styling and alignment',
-    },
-    status: {
-      control: 'select',
-      options: ['sending', 'streaming', 'complete', 'error'],
-      description: 'Message state',
-    },
-  },
-  args: {
-    role: 'assistant',
-    status: 'complete',
-    children: <Message.Content>How can I help you today?</Message.Content>,
-  },
-} satisfies Meta<typeof Message>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const UserMessage: Story = {
-  args: {
-    role: 'user',
-    children: (
-      <Message.Content>Hello! Can you help me with a coding question?</Message.Content>
-    ),
-  },
-};
-
-export const AssistantMessage: Story = {
-  args: {
-    role: 'assistant',
-    children: (
-      <Message.Content>
-        Of course! I&apos;d be happy to help. What would you like to know?
-      </Message.Content>
-    ),
-  },
-};
-
-export const SystemMessage: Story = {
-  args: {
-    role: 'system',
-    children: <Message.Content>Conversation started.</Message.Content>,
-  },
-};
-
-export const Streaming: Story = {
-  args: {
-    role: 'assistant',
-    status: 'streaming',
-    children: (
-      <Message.Content>I&apos;m currently generating a response for you</Message.Content>
-    ),
-  },
-};
-
-export const ErrorState: Story = {
-  args: {
-    role: 'user',
-    status: 'error',
-    children: <Message.Content>This message failed to send.</Message.Content>,
-  },
-};

package/src/components/NavigationMenu/NavigationMenu.stories.tsx

@@ -1,161 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { NavigationMenu } from '.';
-
-/**
- * Rich header navigation menu with dropdown content panels, animated viewport
- * transitions, and an automatic mobile drawer. Compose with `NavigationMenu.List`,
- * `NavigationMenu.Item`, `NavigationMenu.Trigger`, `NavigationMenu.Content`,
- * `NavigationMenu.Link`, and `NavigationMenu.Viewport`.
- */
-const meta = {
-  title: 'Navigation/NavigationMenu',
-  component: NavigationMenu,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Header navigation menu with dropdown panels and responsive drawer.',
-      },
-    },
-  },
-  argTypes: {
-    orientation: {
-      control: 'select',
-      options: ['horizontal', 'vertical'],
-      description: 'Menu orientation',
-    },
-  },
-  args: {
-    orientation: 'horizontal',
-    children: (
-      <>
-        <NavigationMenu.List>
-          <NavigationMenu.Item>
-            <NavigationMenu.Link href="/pricing">Pricing</NavigationMenu.Link>
-          </NavigationMenu.Item>
-        </NavigationMenu.List>
-        <NavigationMenu.Viewport />
-      </>
-    ),
-  },
-} satisfies Meta<typeof NavigationMenu>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <NavigationMenu {...args}>
-      <NavigationMenu.List>
-        <NavigationMenu.Item value="products">
-          <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
-          <NavigationMenu.Content>
-            <NavigationMenu.Link
-              href="/analytics"
-              title="Analytics"
-              description="Track your metrics and KPIs."
-            />
-            <NavigationMenu.Link
-              href="/automation"
-              title="Automation"
-              description="Automate your workflows."
-            />
-          </NavigationMenu.Content>
-        </NavigationMenu.Item>
-        <NavigationMenu.Item value="resources">
-          <NavigationMenu.Trigger>Resources</NavigationMenu.Trigger>
-          <NavigationMenu.Content>
-            <NavigationMenu.Link
-              href="/docs"
-              title="Documentation"
-              description="Comprehensive API reference."
-            />
-            <NavigationMenu.Link
-              href="/blog"
-              title="Blog"
-              description="Latest news and updates."
-            />
-          </NavigationMenu.Content>
-        </NavigationMenu.Item>
-        <NavigationMenu.Item>
-          <NavigationMenu.Link href="/pricing">Pricing</NavigationMenu.Link>
-        </NavigationMenu.Item>
-      </NavigationMenu.List>
-      <NavigationMenu.Viewport />
-    </NavigationMenu>
-  ),
-};
-
-export const WithSimpleLinks: Story = {
-  render: (args) => (
-    <NavigationMenu {...args}>
-      <NavigationMenu.List>
-        <NavigationMenu.Item value="company">
-          <NavigationMenu.Trigger>Company</NavigationMenu.Trigger>
-          <NavigationMenu.Content>
-            <div
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                padding: '4px',
-                minWidth: '160px',
-              }}
-            >
-              <NavigationMenu.Link href="/about">About</NavigationMenu.Link>
-              <NavigationMenu.Link href="/careers">Careers</NavigationMenu.Link>
-              <NavigationMenu.Link href="/contact">Contact</NavigationMenu.Link>
-            </div>
-          </NavigationMenu.Content>
-        </NavigationMenu.Item>
-        <NavigationMenu.Item>
-          <NavigationMenu.Link href="/blog">Blog</NavigationMenu.Link>
-        </NavigationMenu.Item>
-        <NavigationMenu.Item>
-          <NavigationMenu.Link href="/docs">Docs</NavigationMenu.Link>
-        </NavigationMenu.Item>
-      </NavigationMenu.List>
-      <NavigationMenu.Viewport />
-    </NavigationMenu>
-  ),
-};
-
-export const Vertical: Story = {
-  args: { orientation: 'vertical' },
-  render: (args) => (
-    <NavigationMenu {...args}>
-      <NavigationMenu.List>
-        <NavigationMenu.Item value="overview">
-          <NavigationMenu.Trigger>Overview</NavigationMenu.Trigger>
-          <NavigationMenu.Content>
-            <div style={{ padding: '8px', minWidth: '200px' }}>
-              <NavigationMenu.Link
-                href="/intro"
-                title="Introduction"
-                description="Learn the basics."
-              />
-            </div>
-          </NavigationMenu.Content>
-        </NavigationMenu.Item>
-        <NavigationMenu.Item value="guides">
-          <NavigationMenu.Trigger>Guides</NavigationMenu.Trigger>
-          <NavigationMenu.Content>
-            <div style={{ padding: '8px', minWidth: '200px' }}>
-              <NavigationMenu.Link
-                href="/install"
-                title="Installation"
-                description="Get started quickly."
-              />
-              <NavigationMenu.Link
-                href="/config"
-                title="Configuration"
-                description="Customize your setup."
-              />
-            </div>
-          </NavigationMenu.Content>
-        </NavigationMenu.Item>
-      </NavigationMenu.List>
-      <NavigationMenu.Viewport />
-    </NavigationMenu>
-  ),
-};

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,81 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Pagination } from '.';
-
-/**
- * Page navigation for paginated data. Compose with `Pagination.Previous`,
- * `Pagination.Items`, and `Pagination.Next`. Supports controlled/uncontrolled
- * state plus edge and sibling count customization.
- */
-const meta = {
-  title: 'Navigation/Pagination',
-  component: Pagination,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Page navigation controls for paginated data sets.',
-      },
-    },
-  },
-  args: {
-    totalPages: 10,
-    defaultPage: 1,
-    edgeCount: 1,
-    siblingCount: 1,
-    children: (
-      <>
-        <Pagination.Previous />
-        <Pagination.Items />
-        <Pagination.Next />
-      </>
-    ),
-  },
-} satisfies Meta<typeof Pagination>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { totalPages: 10, defaultPage: 1 },
-  render: (args) => (
-    <Pagination {...args}>
-      <Pagination.Previous />
-      <Pagination.Items />
-      <Pagination.Next />
-    </Pagination>
-  ),
-};
-
-export const WithEdgePages: Story = {
-  args: { totalPages: 20, defaultPage: 10, edgeCount: 2, siblingCount: 1 },
-  render: (args) => (
-    <Pagination {...args}>
-      <Pagination.Previous />
-      <Pagination.Items />
-      <Pagination.Next />
-    </Pagination>
-  ),
-};
-
-export const Compact: Story = {
-  args: { totalPages: 20, defaultPage: 10, siblingCount: 0 },
-  render: (args) => (
-    <Pagination {...args}>
-      <Pagination.Previous />
-      <Pagination.Items />
-      <Pagination.Next />
-    </Pagination>
-  ),
-};
-
-export const Controlled: Story = {
-  args: { totalPages: 5, page: 3 },
-  render: (args) => (
-    <Pagination {...args}>
-      <Pagination.Previous />
-      <Pagination.Items />
-      <Pagination.Next />
-    </Pagination>
-  ),
-};

package/src/components/Popover/Popover.stories.tsx

@@ -1,152 +0,0 @@
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Popover } from '.';
-
-/**
- * Rich content overlay anchored to a trigger element. Compose with
- * `Popover.Trigger`, `Popover.Content`, `Popover.Title`, `Popover.Description`,
- * `Popover.Body`, `Popover.Footer`, and `Popover.Close`.
- */
-const meta = {
-  title: 'Feedback/Popover',
-  component: Popover,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Floating content overlay anchored to a trigger element.',
-      },
-    },
-  },
-  argTypes: {
-    modal: { control: 'boolean' },
-    defaultOpen: { control: 'boolean' },
-  },
-  args: {
-    modal: false,
-    children: (
-      <>
-        <Popover.Trigger>Open Popover</Popover.Trigger>
-        <Popover.Content>
-          <Popover.Close />
-          <Popover.Title>Popover Title</Popover.Title>
-          <Popover.Description>
-            This is a popover with some content.
-          </Popover.Description>
-        </Popover.Content>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Popover>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Popover {...args}>
-      <Popover.Trigger>Open Popover</Popover.Trigger>
-      <Popover.Content>
-        <Popover.Close />
-        <Popover.Title>Popover Title</Popover.Title>
-        <Popover.Description>
-          This is a popover with some content. It can contain text, forms, or
-          other elements.
-        </Popover.Description>
-      </Popover.Content>
-    </Popover>
-  ),
-};
-
-export const WithArrow: Story = {
-  render: (args) => (
-    <Popover {...args}>
-      <Popover.Trigger>Info</Popover.Trigger>
-      <Popover.Content arrow>
-        <Popover.Title>Quick Tip</Popover.Title>
-        <Popover.Description>
-          This popover has an arrow pointing to its trigger element.
-        </Popover.Description>
-      </Popover.Content>
-    </Popover>
-  ),
-};
-
-export const TopSide: Story = {
-  render: (args) => (
-    <Popover {...args}>
-      <Popover.Trigger>Top</Popover.Trigger>
-      <Popover.Content side="top" size="sm">
-        <Popover.Description>Popover on top</Popover.Description>
-      </Popover.Content>
-    </Popover>
-  ),
-};
-
-export const SmallSize: Story = {
-  render: (args) => (
-    <Popover {...args}>
-      <Popover.Trigger>Compact</Popover.Trigger>
-      <Popover.Content size="sm">
-        <Popover.Description>A small, focused popover.</Popover.Description>
-      </Popover.Content>
-    </Popover>
-  ),
-};
-
-function VirtualAnchorDemo(args: React.ComponentProps<typeof Popover>) {
-  const [anchor, setAnchor] = React.useState<HTMLDivElement | null>(null);
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <div style={{ paddingTop: 80 }}>
-      <div
-        ref={setAnchor}
-        style={{
-          width: 160,
-          height: 40,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          border: '1px dashed currentColor',
-          borderRadius: 8,
-        }}
-      >
-        Anchor element
-      </div>
-      <Popover {...args} open={open} onOpenChange={setOpen}>
-        <Popover.Trigger
-          style={{
-            position: 'absolute',
-            width: 1,
-            height: 1,
-            overflow: 'hidden',
-            clip: 'rect(0 0 0 0)',
-          }}
-          onClick={() => setOpen(true)}
-        >
-          Open (off-screen trigger)
-        </Popover.Trigger>
-        <Popover.Content anchor={anchor} positionMethod="fixed">
-          <Popover.Close />
-          <Popover.Title>Anchored elsewhere</Popover.Title>
-          <Popover.Description>
-            This content is positioned against the dashed box above, not the
-            (visually hidden) trigger button.
-          </Popover.Description>
-        </Popover.Content>
-      </Popover>
-    </div>
-  );
-}
-
-/**
- * Positions content against an arbitrary DOM element instead of the
- * trigger, via `anchor` + `positionMethod="fixed"`. Used by Fragments
- * Inspect's element-anchored detail view, where the "anchor" is a node in
- * the host page rather than something rendered by this popover's own tree.
- */
-export const VirtualAnchor: Story = {
-  render: (args) => <VirtualAnchorDemo {...args} />,
-};

package/src/components/Progress/Progress.stories.tsx

@@ -1,64 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Progress } from '.';
-
-/**
- * Progress is a visual indicator of task completion or loading state.
- * Determinate values render a filled bar; a null value renders an
- * indeterminate animation. Includes a Circular subcomponent.
- */
-const meta = {
-  title: 'Feedback/Progress',
-  component: Progress,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Visual indicator of task completion or loading state in linear and circular variants.',
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Size of the progress bar',
-    },
-    variant: {
-      control: 'select',
-      options: ['default', 'success', 'warning', 'danger'],
-      description: 'Color variant',
-    },
-    showValue: { control: 'boolean', description: 'Show percentage value' },
-  },
-  args: { value: 60, size: 'md', variant: 'default', label: 'Uploading', showValue: true },
-} satisfies Meta<typeof Progress>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { value: 60, label: 'Uploading', showValue: true },
-};
-
-export const Success: Story = {
-  args: { value: 100, variant: 'success', label: 'Complete', showValue: true },
-};
-
-export const Danger: Story = {
-  args: { value: 95, variant: 'danger', label: 'Storage critical', showValue: true },
-};
-
-export const Large: Story = {
-  args: { value: 40, size: 'lg', label: 'Processing', showValue: true },
-};
-
-export const Indeterminate: Story = {
-  args: { value: null, label: 'Loading', showValue: false },
-};
-
-export const Circular: Story = {
-  args: { value: 75, showValue: true },
-  render: (args) => <Progress.Circular {...args} variant="success" />,
-};