@fragments-sdk/ui 0.13.0 → 0.15.1

package/src/components/ToggleGroup/ToggleGroup.fragment.tsx

@@ -1,277 +0,0 @@
-import React from "react";
-import { defineFragment } from "@fragments-sdk/cli/core";
-import { ToggleGroup } from ".";
-
-function DefaultExample() {
-  const [value, setValue] = React.useState("left");
-
-  return (
-    <ToggleGroup value={value} onChange={setValue}>
-      <ToggleGroup.Item value="left">Left</ToggleGroup.Item>
-      <ToggleGroup.Item value="center">Center</ToggleGroup.Item>
-      <ToggleGroup.Item value="right">Right</ToggleGroup.Item>
-    </ToggleGroup>
-  );
-}
-
-function PillsExample() {
-  const [value, setValue] = React.useState("all");
-
-  return (
-    <ToggleGroup value={value} onChange={setValue} variant="pills">
-      <ToggleGroup.Item value="all">All</ToggleGroup.Item>
-      <ToggleGroup.Item value="active">Active</ToggleGroup.Item>
-      <ToggleGroup.Item value="completed">Completed</ToggleGroup.Item>
-    </ToggleGroup>
-  );
-}
-
-function OutlineExample() {
-  const [value, setValue] = React.useState("day");
-
-  return (
-    <ToggleGroup value={value} onChange={setValue} variant="outline">
-      <ToggleGroup.Item value="day">Day</ToggleGroup.Item>
-      <ToggleGroup.Item value="week">Week</ToggleGroup.Item>
-      <ToggleGroup.Item value="month">Month</ToggleGroup.Item>
-    </ToggleGroup>
-  );
-}
-
-function SizesExample() {
-  const [value1, setValue1] = React.useState("a");
-  const [value2, setValue2] = React.useState("a");
-
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
-      <ToggleGroup value={value1} onChange={setValue1} size="sm">
-        <ToggleGroup.Item value="a">Small</ToggleGroup.Item>
-        <ToggleGroup.Item value="b">Size</ToggleGroup.Item>
-      </ToggleGroup>
-      <ToggleGroup value={value2} onChange={setValue2} size="md">
-        <ToggleGroup.Item value="a">Medium</ToggleGroup.Item>
-        <ToggleGroup.Item value="b">Size</ToggleGroup.Item>
-      </ToggleGroup>
-    </div>
-  );
-}
-
-function ViewSwitcherExample() {
-  const [view, setView] = React.useState("grid");
-
-  return (
-    <ToggleGroup value={view} onChange={setView} size="sm">
-      <ToggleGroup.Item value="grid">
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-        >
-          <rect x="3" y="3" width="7" height="7" />
-          <rect x="14" y="3" width="7" height="7" />
-          <rect x="3" y="14" width="7" height="7" />
-          <rect x="14" y="14" width="7" height="7" />
-        </svg>
-      </ToggleGroup.Item>
-      <ToggleGroup.Item value="list">
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-        >
-          <line x1="3" y1="6" x2="21" y2="6" />
-          <line x1="3" y1="12" x2="21" y2="12" />
-          <line x1="3" y1="18" x2="21" y2="18" />
-        </svg>
-      </ToggleGroup.Item>
-    </ToggleGroup>
-  );
-}
-
-function DisabledItemExample() {
-  const [value, setValue] = React.useState("basic");
-
-  return (
-    <ToggleGroup value={value} onChange={setValue}>
-      <ToggleGroup.Item value="basic">Basic</ToggleGroup.Item>
-      <ToggleGroup.Item value="pro">Pro</ToggleGroup.Item>
-      <ToggleGroup.Item value="enterprise" disabled>
-        Enterprise
-      </ToggleGroup.Item>
-    </ToggleGroup>
-  );
-}
-
-export default defineFragment({
-  component: ToggleGroup,
-
-  meta: {
-    name: "ToggleGroup",
-    description:
-      "A group of toggle buttons where only one can be selected at a time. Useful for switching between views, modes, or options.",
-    category: "forms",
-    status: "stable",
-    tags: ["toggle", "group", "fragmented", "control", "tabs", "switch"],
-    since: "0.2.0",
-  },
-
-  usage: {
-    when: [
-      "Switching between mutually exclusive views or modes",
-      "Selecting one option from a small set (2-5 options)",
-      "Fragmented controls like view switchers",
-      "Filter or sort options",
-    ],
-    whenNot: [
-      "Multiple selections allowed (use Checkbox group)",
-      "Many options (use Select or RadioGroup)",
-      "Navigation between pages (use Tabs)",
-      "On/off toggle (use Switch component)",
-    ],
-    guidelines: [
-      "Keep options to 2-5 items for clarity",
-      "Use clear, concise labels",
-      "Consider icons for common actions (grid/list view)",
-      "Ensure adequate touch targets on mobile",
-    ],
-    accessibility: [
-      'Uses role="group" for semantic grouping',
-      'Each item has role="radio" with aria-checked',
-      "Keyboard navigable with Tab and arrow keys",
-      "Focus visible on active item",
-    ],
-  },
-
-  props: {
-    value: {
-      type: "string",
-      description: "Currently selected value",
-      required: true,
-    },
-    onChange: {
-      type: "function",
-      description: "Called with new value when selection changes",
-    },
-    onValueChange: {
-      type: "function",
-      description: "Alias for onChange (Radix convention): (value: string) => void",
-    },
-    children: {
-      type: "node",
-      description: "ToggleGroup.Item components",
-      required: true,
-    },
-    variant: {
-      type: "enum",
-      description: "Visual style",
-      values: ["default", "pills", "outline"],
-      default: "default",
-    },
-    size: {
-      type: "enum",
-      description: "Size variant",
-      values: ["sm", "md"],
-      default: "md",
-    },
-    gap: {
-      type: "enum",
-      description: "Gap between items (pills/outline variants)",
-      values: ["none", "xs", "sm"],
-      default: "xs",
-    },
-  },
-
-  relations: [
-    {
-      component: "RadioGroup",
-      relationship: "alternative",
-      note: "RadioGroup for form-style single selection",
-    },
-    { component: "Tabs", relationship: "alternative", note: "Tabs for content panel switching" },
-    { component: "Switch", relationship: "sibling", note: "Switch for single on/off control" },
-  ],
-
-  contract: {
-    propsSummary: [
-      "value: string - selected value (required)",
-      "onChange: (value: string) => void - change handler (or onValueChange)",
-      "children: ToggleGroup.Item[] - toggle items",
-      "variant: default|pills|outline - visual style",
-      "size: sm|md - size variant",
-      "gap: none|xs|sm - spacing",
-    ],
-    scenarioTags: ["forms.selection", "input.toggle", "control.fragmented"],
-    a11yRules: ["A11Y_GROUP_ROLE", "A11Y_KEYBOARD_ACCESSIBLE"],
-  },
-
-  variants: [
-    {
-      name: "Default",
-      description: "Basic toggle group",
-      code: `<ToggleGroup value={value} onChange={setValue}>
-  <ToggleGroup.Item value="left">Left</ToggleGroup.Item>
-  <ToggleGroup.Item value="center">Center</ToggleGroup.Item>
-  <ToggleGroup.Item value="right">Right</ToggleGroup.Item>
-</ToggleGroup>`,
-      render: () => <DefaultExample />,
-    },
-    {
-      name: "Pills Variant",
-      description: "Pill-shaped toggle buttons",
-      code: `<ToggleGroup value={value} onChange={setValue} variant="pills">
-  <ToggleGroup.Item value="all">All</ToggleGroup.Item>
-  <ToggleGroup.Item value="active">Active</ToggleGroup.Item>
-  <ToggleGroup.Item value="completed">Completed</ToggleGroup.Item>
-</ToggleGroup>`,
-      render: () => <PillsExample />,
-    },
-    {
-      name: "Outline Variant",
-      description: "Outlined toggle buttons",
-      code: `<ToggleGroup value={value} onChange={setValue} variant="outline">
-  <ToggleGroup.Item value="day">Day</ToggleGroup.Item>
-  <ToggleGroup.Item value="week">Week</ToggleGroup.Item>
-  <ToggleGroup.Item value="month">Month</ToggleGroup.Item>
-</ToggleGroup>`,
-      render: () => <OutlineExample />,
-    },
-    {
-      name: "Sizes",
-      description: "Different size variants",
-      code: `<ToggleGroup value={value} onChange={setValue} size="sm">
-  <ToggleGroup.Item value="a">Small</ToggleGroup.Item>
-  <ToggleGroup.Item value="b">Size</ToggleGroup.Item>
-</ToggleGroup>
-<ToggleGroup value={value} onChange={setValue} size="md">
-  <ToggleGroup.Item value="a">Medium</ToggleGroup.Item>
-  <ToggleGroup.Item value="b">Size</ToggleGroup.Item>
-</ToggleGroup>`,
-      render: () => <SizesExample />,
-    },
-    {
-      name: "View Switcher",
-      description: "Common pattern for switching between views",
-      code: `<ToggleGroup value={view} onChange={setView} size="sm">
-  <ToggleGroup.Item value="grid"><GridIcon /></ToggleGroup.Item>
-  <ToggleGroup.Item value="list"><ListIcon /></ToggleGroup.Item>
-</ToggleGroup>`,
-      render: () => <ViewSwitcherExample />,
-    },
-    {
-      name: "With Disabled Item",
-      description: "Toggle group with a disabled option",
-      code: `<ToggleGroup value={value} onChange={setValue}>
-  <ToggleGroup.Item value="basic">Basic</ToggleGroup.Item>
-  <ToggleGroup.Item value="pro">Pro</ToggleGroup.Item>
-  <ToggleGroup.Item value="enterprise" disabled>Enterprise</ToggleGroup.Item>
-</ToggleGroup>`,
-      render: () => <DisabledItemExample />,
-    },
-  ],
-});

package/src/components/ToggleGroup/ToggleGroup.test.tsx

@@ -1,110 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
-import { ToggleGroup } from './index';
-
-function renderToggleGroup(
-  props: Partial<React.ComponentProps<typeof ToggleGroup>> = {}
-) {
-  const defaultProps = {
-    value: 'a',
-    onChange: vi.fn(),
-    ...props,
-  };
-
-  return {
-    onChange: defaultProps.onChange,
-    ...render(
-      <ToggleGroup {...defaultProps}>
-        <ToggleGroup.Item value="a">Option A</ToggleGroup.Item>
-        <ToggleGroup.Item value="b">Option B</ToggleGroup.Item>
-        <ToggleGroup.Item value="c" disabled>Option C</ToggleGroup.Item>
-      </ToggleGroup>
-    ),
-  };
-}
-
-describe('ToggleGroup', () => {
-  it('renders with radiogroup role', () => {
-    renderToggleGroup();
-    expect(screen.getByRole('radiogroup')).toBeInTheDocument();
-  });
-
-  it('renders items with radio role', () => {
-    renderToggleGroup();
-    expect(screen.getAllByRole('radio')).toHaveLength(3);
-  });
-
-  it('marks selected item with aria-checked', () => {
-    renderToggleGroup({ value: 'b' });
-    const optionB = screen.getByRole('radio', { name: /option b/i });
-    expect(optionB).toHaveAttribute('aria-checked', 'true');
-
-    const optionA = screen.getByRole('radio', { name: /option a/i });
-    expect(optionA).toHaveAttribute('aria-checked', 'false');
-  });
-
-  it('calls onChange when an item is clicked', async () => {
-    const user = userEvent.setup();
-    const { onChange } = renderToggleGroup();
-
-    await user.click(screen.getByRole('radio', { name: /option b/i }));
-    expect(onChange).toHaveBeenCalledWith('b');
-  });
-
-  it('does not call onChange for disabled items', async () => {
-    const user = userEvent.setup();
-    const { onChange } = renderToggleGroup();
-
-    const disabledItem = screen.getByRole('radio', { name: /option c/i });
-    expect(disabledItem).toBeDisabled();
-
-    await user.click(disabledItem);
-    expect(onChange).not.toHaveBeenCalled();
-  });
-
-  it('applies variant class', () => {
-    renderToggleGroup({ variant: 'pills' });
-    const group = screen.getByRole('radiogroup');
-    expect(group.className).toContain('pills');
-  });
-
-  it('applies size class', () => {
-    renderToggleGroup({ size: 'sm' });
-    const group = screen.getByRole('radiogroup');
-    expect(group.className).toContain('size-sm');
-  });
-
-  it('manages tabIndex correctly for selected item', () => {
-    renderToggleGroup({ value: 'a' });
-    const optionA = screen.getByRole('radio', { name: /option a/i });
-    const optionB = screen.getByRole('radio', { name: /option b/i });
-
-    expect(optionA).toHaveAttribute('tabindex', '0');
-    expect(optionB).toHaveAttribute('tabindex', '-1');
-  });
-
-  it('calls onValueChange alias when an item is clicked', async () => {
-    const user = userEvent.setup();
-    const onValueChange = vi.fn();
-    renderToggleGroup({ onChange: undefined, onValueChange });
-
-    await user.click(screen.getByRole('radio', { name: /option b/i }));
-    expect(onValueChange).toHaveBeenCalledWith('b');
-  });
-
-  it('prefers onChange over onValueChange when both provided', async () => {
-    const user = userEvent.setup();
-    const onChange = vi.fn();
-    const onValueChange = vi.fn();
-    renderToggleGroup({ onChange, onValueChange });
-
-    await user.click(screen.getByRole('radio', { name: /option b/i }));
-    expect(onChange).toHaveBeenCalledWith('b');
-    expect(onValueChange).not.toHaveBeenCalled();
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = renderToggleGroup();
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/Tooltip/Tooltip.fragment.tsx

@@ -1,176 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Tooltip } from '.';
-import { Button } from '../Button';
-
-export default defineFragment({
-  component: Tooltip,
-
-  meta: {
-    name: 'Tooltip',
-    description: 'Contextual help text that appears on hover or focus. Perfect for explaining icons, truncated text, or providing additional context.',
-    category: 'feedback',
-    status: 'stable',
-    tags: ['tooltip', 'hint', 'help', 'hover', 'contextual'],
-    since: '0.1.0',
-  },
-
-  usage: {
-    when: [
-      'Explaining icon-only buttons',
-      'Showing full text for truncated content',
-      'Providing keyboard shortcuts',
-      'Brief contextual help that fits in one line',
-    ],
-    whenNot: [
-      'Long-form help content (use Popover)',
-      'Critical information users must see (use Alert)',
-      'Interactive content (use Popover or Menu)',
-      'Mobile-primary interfaces (tooltips require hover)',
-    ],
-    guidelines: [
-      'Keep tooltip text concise (under 80 characters)',
-      'Use sentence case, no period for single sentences',
-      'Avoid duplicating visible label text',
-      'Consider mobile users who cannot hover',
-    ],
-    accessibility: [
-      'Accessible via focus as well as hover',
-      'Uses role="tooltip" with proper aria association',
-      'Delay prevents tooltips from appearing during navigation',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'element',
-      description: 'The element that triggers the tooltip',
-      required: true,
-    },
-    content: {
-      type: 'node',
-      description: 'Content to display in the tooltip',
-      required: true,
-    },
-    side: {
-      type: 'enum',
-      description: 'Which side to show the tooltip',
-      values: ['top', 'bottom', 'left', 'right'],
-      default: 'top',
-    },
-    align: {
-      type: 'enum',
-      description: 'Alignment along the side',
-      values: ['start', 'center', 'end'],
-      default: 'center',
-    },
-    sideOffset: {
-      type: 'number',
-      description: 'Distance from trigger in pixels',
-      default: '6',
-    },
-    delay: {
-      type: 'number',
-      description: 'Delay before showing (ms)',
-      default: '400',
-    },
-    closeDelay: {
-      type: 'number',
-      description: 'Delay before hiding (ms)',
-      default: '0',
-    },
-    arrow: {
-      type: 'boolean',
-      description: 'Show arrow pointing to trigger',
-      default: 'true',
-    },
-    disabled: {
-      type: 'boolean',
-      description: 'Disable the tooltip',
-      default: 'false',
-    },
-    open: {
-      type: 'boolean',
-      description: 'Controlled open state',
-    },
-    defaultOpen: {
-      type: 'boolean',
-      description: 'Default open state',
-      default: 'false',
-    },
-    onOpenChange: {
-      type: 'function',
-      description: 'Callback when open state changes',
-    },
-  },
-
-  relations: [
-    { component: 'Popover', relationship: 'alternative', note: 'Use Popover for interactive or longer content' },
-    { component: 'Alert', relationship: 'alternative', note: 'Use Alert for critical information that must be visible' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'content: ReactNode - tooltip content',
-      'side: top|bottom|left|right - position',
-      'delay: number - show delay in ms (default: 400)',
-      'arrow: boolean - show arrow (default: true)',
-    ],
-    scenarioTags: [
-      'help.tooltip',
-      'content.hint',
-      'action.explain',
-    ],
-    a11yRules: ['A11Y_TOOLTIP_FOCUS', 'A11Y_TOOLTIP_ROLE'],
-  },
-
-  variants: [
-    {
-      name: 'Default',
-      description: 'Basic tooltip on hover',
-      render: () => (
-        <Tooltip content="Save your changes">
-          <Button>Save</Button>
-        </Tooltip>
-      ),
-    },
-    {
-      name: 'Positions',
-      description: 'Tooltips on different sides',
-      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>
-      ),
-    },
-    {
-      name: 'With Shortcut',
-      description: 'Tooltip showing keyboard shortcut',
-      render: () => (
-        <Tooltip content="Undo (Ctrl+Z)">
-          <Button variant="ghost">Undo</Button>
-        </Tooltip>
-      ),
-    },
-    {
-      name: 'No Arrow',
-      description: 'Tooltip without arrow',
-      render: () => (
-        <Tooltip content="Clean tooltip" arrow={false}>
-          <Button variant="secondary">Hover me</Button>
-        </Tooltip>
-      ),
-    },
-  ],
-});

package/src/components/Tooltip/Tooltip.test.tsx

@@ -1,124 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, userEvent, waitFor, act, expectNoA11yViolations } from '../../test/utils';
-import { Tooltip } from './index';
-
-describe('Tooltip', () => {
-  beforeEach(() => {
-    vi.useFakeTimers({ shouldAdvanceTime: true });
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
-  it('shows tooltip content on hover', async () => {
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    render(
-      <Tooltip content="Tooltip text" delay={0}>
-        <button>Hover me</button>
-      </Tooltip>
-    );
-
-    await user.hover(screen.getByRole('button', { name: /hover me/i }));
-
-    await waitFor(() => {
-      expect(screen.getByText('Tooltip text')).toBeInTheDocument();
-    });
-  });
-
-  it('hides tooltip on unhover', async () => {
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    render(
-      <Tooltip content="Tooltip text" delay={0}>
-        <button>Hover me</button>
-      </Tooltip>
-    );
-
-    await user.hover(screen.getByRole('button', { name: /hover me/i }));
-    await waitFor(() => {
-      expect(screen.getByText('Tooltip text')).toBeInTheDocument();
-    });
-
-    await user.unhover(screen.getByRole('button', { name: /hover me/i }));
-    await waitFor(() => {
-      expect(screen.queryByText('Tooltip text')).not.toBeInTheDocument();
-    });
-  });
-
-  it('respects delay prop', async () => {
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    render(
-      <Tooltip content="Delayed tooltip" delay={500}>
-        <button>Hover me</button>
-      </Tooltip>
-    );
-
-    await user.hover(screen.getByRole('button', { name: /hover me/i }));
-
-    // Tooltip should not be visible immediately
-    expect(screen.queryByText('Delayed tooltip')).not.toBeInTheDocument();
-
-    // Advance timers past the delay
-    await act(async () => {
-      vi.advanceTimersByTime(600);
-    });
-
-    await waitFor(() => {
-      expect(screen.getByText('Delayed tooltip')).toBeInTheDocument();
-    });
-  });
-
-  it('does not render when disabled', () => {
-    render(
-      <Tooltip content="Hidden tooltip" disabled>
-        <button>No tooltip</button>
-      </Tooltip>
-    );
-
-    // The trigger should just render the child directly
-    expect(screen.getByRole('button', { name: /no tooltip/i })).toBeInTheDocument();
-  });
-
-  it('supports controlled open state', async () => {
-    render(
-      <Tooltip content="Controlled tooltip" open={true} delay={0}>
-        <button>Trigger</button>
-      </Tooltip>
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('Controlled tooltip')).toBeInTheDocument();
-    });
-  });
-
-  it('respects shared Tooltip.Provider delay settings', async () => {
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-    render(
-      <Tooltip.Provider delay={0}>
-        <Tooltip content="Provider tooltip">
-          <button>Provider Trigger</button>
-        </Tooltip>
-      </Tooltip.Provider>
-    );
-
-    await user.hover(screen.getByRole('button', { name: /provider trigger/i }));
-
-    await waitFor(() => {
-      expect(screen.getByText('Provider tooltip')).toBeInTheDocument();
-    });
-  });
-
-  it('has no accessibility violations when open', async () => {
-    const { container } = render(
-      <Tooltip content="Accessible tooltip" open={true} delay={0}>
-        <button>Trigger</button>
-      </Tooltip>
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('Accessible tooltip')).toBeInTheDocument();
-    });
-
-    await expectNoA11yViolations(container);
-  });
-});