@usefragments/ui 1.1.1 → 1.2.0

package/src/components/ToggleGroup/ToggleGroup.stories.tsx

@@ -1,114 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ToggleGroup } from '.';
-
-/**
- * ToggleGroup is the canonical segmented single-select control. Use it to switch
- * between mutually exclusive views or modes (grid/list, day/week/month) with a
- * small set of options — agents should compose `ToggleGroup.Item` children
- * rather than building a custom segmented control.
- */
-const meta = {
-  title: 'Forms/ToggleGroup',
-  component: ToggleGroup,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'A group of toggle buttons where only one can be selected at a time. Prefer this over a hand-rolled segmented control for switching views or modes.',
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'pills', 'outline', 'outlined'],
-      description: 'Visual style',
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Size variant',
-    },
-    gap: {
-      control: 'select',
-      options: ['sm', 'none', 'xs'],
-      description: 'Gap between items (pills/outline variants)',
-    },
-    selectionMode: {
-      control: 'select',
-      options: ['single'],
-      description: 'Selection behavior',
-    },
-  },
-  args: {
-    variant: 'default',
-    size: 'md',
-    defaultValue: 'center',
-    children: (
-      <>
-        <ToggleGroup.Item value="left">Left</ToggleGroup.Item>
-        <ToggleGroup.Item value="center">Center</ToggleGroup.Item>
-        <ToggleGroup.Item value="right">Right</ToggleGroup.Item>
-      </>
-    ),
-  },
-} satisfies Meta<typeof ToggleGroup>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <ToggleGroup {...args} defaultValue="center">
-      <ToggleGroup.Item value="left">Left</ToggleGroup.Item>
-      <ToggleGroup.Item value="center">Center</ToggleGroup.Item>
-      <ToggleGroup.Item value="right">Right</ToggleGroup.Item>
-    </ToggleGroup>
-  ),
-};
-
-export const PillsVariant: Story = {
-  args: { variant: 'pills' },
-  render: (args) => (
-    <ToggleGroup {...args} defaultValue="all">
-      <ToggleGroup.Item value="all">All</ToggleGroup.Item>
-      <ToggleGroup.Item value="active">Active</ToggleGroup.Item>
-      <ToggleGroup.Item value="completed">Completed</ToggleGroup.Item>
-    </ToggleGroup>
-  ),
-};
-
-export const OutlineVariant: Story = {
-  args: { variant: 'outlined' },
-  render: (args) => (
-    <ToggleGroup {...args} defaultValue="week">
-      <ToggleGroup.Item value="day">Day</ToggleGroup.Item>
-      <ToggleGroup.Item value="week">Week</ToggleGroup.Item>
-      <ToggleGroup.Item value="month">Month</ToggleGroup.Item>
-    </ToggleGroup>
-  ),
-};
-
-export const Small: Story = {
-  args: { size: 'sm' },
-  render: (args) => (
-    <ToggleGroup {...args} defaultValue="grid">
-      <ToggleGroup.Item value="grid">Grid</ToggleGroup.Item>
-      <ToggleGroup.Item value="list">List</ToggleGroup.Item>
-    </ToggleGroup>
-  ),
-};
-
-export const WithDisabledItem: Story = {
-  render: (args) => (
-    <ToggleGroup {...args} defaultValue="basic">
-      <ToggleGroup.Item value="basic">Basic</ToggleGroup.Item>
-      <ToggleGroup.Item value="pro">Pro</ToggleGroup.Item>
-      <ToggleGroup.Item value="enterprise" disabled>
-        Enterprise
-      </ToggleGroup.Item>
-    </ToggleGroup>
-  ),
-};

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,95 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Tooltip } from '.';
-import { Button } from '../Button';
-
-/**
- * Tooltip is the canonical contextual-hint primitive. Wrap a focusable trigger
- * to surface brief help on hover or focus — explaining icon-only buttons,
- * truncated text, or shortcuts. Agents should reuse it rather than building a
- * positioned hover popup; use Popover for interactive or longer content.
- */
-const meta = {
-  title: 'Feedback/Tooltip',
-  component: Tooltip,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Contextual help text that appears on hover or focus. Prefer this over a hand-rolled hover popup; use Popover for interactive content.',
-      },
-    },
-  },
-  argTypes: {
-    side: {
-      control: 'select',
-      options: ['top', 'bottom', 'left', 'right'],
-      description: 'Which side to show the tooltip',
-    },
-    align: {
-      control: 'select',
-      options: ['start', 'center', 'end'],
-      description: 'Alignment along the side',
-    },
-    sideOffset: { control: 'number', description: 'Distance from trigger in pixels' },
-    arrow: { control: 'boolean', description: 'Show arrow pointing to trigger' },
-    disabled: { control: 'boolean', description: 'Disable the tooltip' },
-  },
-  args: {
-    content: 'Save your changes',
-    side: 'top',
-    align: 'center',
-    arrow: true,
-    children: <Button>Save</Button>,
-  },
-} satisfies Meta<typeof Tooltip>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { content: 'Save your changes' },
-  render: (args) => (
-    <Tooltip {...args}>
-      <Button>Save</Button>
-    </Tooltip>
-  ),
-};
-
-export const Positions: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: '16px', padding: '40px' }}>
-      <Tooltip content="Top tooltip" side="top">
-        <Button variant="secondary">Top</Button>
-      </Tooltip>
-      <Tooltip content="Bottom tooltip" side="bottom">
-        <Button variant="secondary">Bottom</Button>
-      </Tooltip>
-      <Tooltip content="Left tooltip" side="left">
-        <Button variant="secondary">Left</Button>
-      </Tooltip>
-      <Tooltip content="Right tooltip" side="right">
-        <Button variant="secondary">Right</Button>
-      </Tooltip>
-    </div>
-  ),
-};
-
-export const WithShortcut: Story = {
-  args: { content: 'Undo (Ctrl+Z)' },
-  render: (args) => (
-    <Tooltip {...args}>
-      <Button variant="ghost">Undo</Button>
-    </Tooltip>
-  ),
-};
-
-export const NoArrow: Story = {
-  args: { content: 'Clean tooltip', arrow: false },
-  render: (args) => (
-    <Tooltip {...args}>
-      <Button variant="secondary">Hover me</Button>
-    </Tooltip>
-  ),
-};

package/src/components/VisuallyHidden/VisuallyHidden.stories.tsx

@@ -1,78 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { VisuallyHidden } from '.';
-
-/**
- * VisuallyHidden is the canonical screen-reader-only primitive. It hides content
- * visually while keeping it in the accessibility tree — essential for labeling
- * icon-only buttons and adding supplementary context. Agents should reuse it
- * rather than hand-rolling `sr-only` CSS.
- */
-const meta = {
-  title: 'Navigation/VisuallyHidden',
-  component: VisuallyHidden,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Hides content visually while keeping it accessible to screen readers. Prefer this over hand-rolled sr-only CSS for icon labels and supplementary text.',
-      },
-    },
-  },
-  argTypes: {
-    as: {
-      control: 'select',
-      options: ['span', 'div'],
-      description: 'HTML element to render',
-    },
-  },
-  args: {
-    children: 'Search',
-    as: 'span',
-  },
-} satisfies Meta<typeof VisuallyHidden>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { children: 'Search' },
-};
-
-export const IconButtonLabel: Story = {
-  render: () => (
-    <button
-      type="button"
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: '40px',
-        height: '40px',
-        border: '1px solid var(--fui-border-default)',
-        borderRadius: '8px',
-        background: 'var(--fui-color-surface-primary)',
-        cursor: 'pointer',
-      }}
-    >
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-      </svg>
-      <VisuallyHidden>Search</VisuallyHidden>
-    </button>
-  ),
-};
-
-export const SupplementaryText: Story = {
-  render: () => (
-    <a href="#" style={{ color: 'var(--fui-color-accent)' }}>
-      Read more
-      <VisuallyHidden> about our accessibility features</VisuallyHidden>
-    </a>
-  ),
-};
-
-export const AsDiv: Story = {
-  args: { as: 'div', children: 'Skip to main content' },
-};