@weave-design-system/react 0.1.0

package/src/layout/command-palette/CommandPalette.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { CommandPalette } from './CommandPalette';
+
+const items = [
+  { id: '1', label: 'Dashboard', section: 'Nav', onSelect: vi.fn() },
+  { id: '2', label: 'Settings', section: 'Nav', onSelect: vi.fn() },
+  { id: '3', label: 'Create task', section: 'Actions', onSelect: vi.fn() },
+];
+
+describe('CommandPalette', () => {
+  it('renders when open', () => {
+    render(<CommandPalette open items={items} onOpenChange={() => {}} />);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText('Dashboard')).toBeInTheDocument();
+  });
+
+  it('does not render when closed', () => {
+    render(<CommandPalette open={false} items={items} onOpenChange={() => {}} />);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('filters items by query', async () => {
+    render(<CommandPalette open items={items} onOpenChange={() => {}} />);
+    await userEvent.type(screen.getByPlaceholderText('Type a command or search...'), 'dash');
+    expect(screen.getByText('Dashboard')).toBeInTheDocument();
+    expect(screen.queryByText('Settings')).not.toBeInTheDocument();
+  });
+
+  it('selects item on click', async () => {
+    render(<CommandPalette open items={items} onOpenChange={() => {}} />);
+    await userEvent.click(screen.getByText('Create task'));
+    expect(items[2].onSelect).toHaveBeenCalled();
+  });
+
+  it('closes on Escape', async () => {
+    const onOpenChange = vi.fn();
+    render(<CommandPalette open items={items} onOpenChange={onOpenChange} />);
+    await userEvent.keyboard('{Escape}');
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});

package/src/layout/command-palette/CommandPalette.tsx

@@ -0,0 +1,188 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Search } from 'lucide-react';
+import { cn } from '../../utils/cn';
+import { useFocusTrap } from '../../hooks/use-focus-trap';
+import type { CommandPaletteProps, CommandItem } from './CommandPalette.types';
+
+export function CommandPalette({
+  open,
+  onOpenChange,
+  items,
+  placeholder = 'Type a command or search...',
+}: CommandPaletteProps) {
+  const [query, setQuery] = useState('');
+  const [activeIndex, setActiveIndex] = useState(0);
+  const containerRef = useFocusTrap<HTMLDivElement>(open);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const filtered = query
+    ? items.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()))
+    : items;
+
+  // Group by section
+  const sections = filtered.reduce<Record<string, CommandItem[]>>((acc, item) => {
+    const section = item.section ?? 'Commands';
+    if (!acc[section]) acc[section] = [];
+    acc[section].push(item);
+    return acc;
+  }, {});
+
+  const flatItems = filtered;
+
+  const handleSelect = useCallback(
+    (item: CommandItem) => {
+      item.onSelect();
+      onOpenChange(false);
+      setQuery('');
+    },
+    [onOpenChange],
+  );
+
+  // Keyboard handling
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onOpenChange(false);
+        setQuery('');
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(i + 1, flatItems.length - 1));
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === 'Enter' && flatItems[activeIndex]) {
+        handleSelect(flatItems[activeIndex]);
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [open, activeIndex, flatItems, handleSelect, onOpenChange]);
+
+  // Reset on open
+  useEffect(() => {
+    if (open) {
+      setQuery('');
+      setActiveIndex(0);
+    }
+  }, [open]);
+
+  // Scroll active item into view
+  useEffect(() => {
+    const el = listRef.current?.querySelector('[data-active="true"]');
+    if (el && typeof el.scrollIntoView === 'function') {
+      el.scrollIntoView({ block: 'nearest' });
+    }
+  }, [activeIndex]);
+
+  // Global Cmd+K listener
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        onOpenChange(!open);
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [open, onOpenChange]);
+
+  if (!open) return null;
+
+  let itemIndex = 0;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center pt-[20vh]">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-text-primary/30 animate-fade-in"
+        onClick={() => onOpenChange(false)}
+      />
+      {/* Palette */}
+      <div
+        ref={containerRef}
+        className="relative w-full max-w-lg bg-white rounded-xl shadow-3 border border-border overflow-hidden animate-scale-in"
+        role="dialog"
+        aria-label="Command palette"
+      >
+        {/* Search */}
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-border">
+          <Search size={18} className="text-text-secondary shrink-0" />
+          <input
+            type="text"
+            value={query}
+            onChange={(e) => {
+              setQuery(e.target.value);
+              setActiveIndex(0);
+            }}
+            placeholder={placeholder}
+            className="flex-1 bg-transparent outline-none text-text-primary placeholder:text-text-secondary"
+            style={{ fontSize: 'var(--text-body)' }}
+            autoFocus
+          />
+        </div>
+
+        {/* Results */}
+        <div ref={listRef} className="max-h-72 overflow-y-auto py-2" role="listbox">
+          {Object.entries(sections).map(([section, sectionItems]) => (
+            <div key={section}>
+              <div
+                className="px-4 py-1.5 text-text-secondary font-medium uppercase tracking-wider"
+                style={{ fontSize: 'var(--text-caption)' }}
+              >
+                {section}
+              </div>
+              {sectionItems.map((item) => {
+                const idx = itemIndex++;
+                return (
+                  <div
+                    key={item.id}
+                    role="option"
+                    aria-selected={idx === activeIndex}
+                    data-active={idx === activeIndex}
+                    className={cn(
+                      'flex items-center gap-3 px-4 py-2 cursor-pointer transition-colors',
+                      idx === activeIndex ? 'bg-surface' : 'hover:bg-surface/50',
+                    )}
+                    style={{ transitionDuration: 'var(--duration-micro)' }}
+                    onClick={() => handleSelect(item)}
+                    onMouseEnter={() => setActiveIndex(idx)}
+                  >
+                    {item.icon && <span className="text-text-secondary shrink-0">{item.icon}</span>}
+                    <span
+                      className="text-text-primary"
+                      style={{ fontSize: 'var(--text-body-sm)' }}
+                    >
+                      {item.label}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          ))}
+          {flatItems.length === 0 && (
+            <div
+              className="px-4 py-6 text-center text-text-secondary"
+              style={{ fontSize: 'var(--text-body-sm)' }}
+            >
+              No results found
+            </div>
+          )}
+        </div>
+
+        {/* Footer hints */}
+        <div className="flex items-center gap-4 px-4 py-2 border-t border-border">
+          <span className="text-text-secondary flex items-center gap-1" style={{ fontSize: 'var(--text-caption)' }}>
+            <kbd className="px-1 py-0.5 bg-surface rounded" style={{ fontSize: 'var(--text-caption)' }}>↑↓</kbd> Navigate
+          </span>
+          <span className="text-text-secondary flex items-center gap-1" style={{ fontSize: 'var(--text-caption)' }}>
+            <kbd className="px-1 py-0.5 bg-surface rounded" style={{ fontSize: 'var(--text-caption)' }}>↵</kbd> Select
+          </span>
+          <span className="text-text-secondary flex items-center gap-1" style={{ fontSize: 'var(--text-caption)' }}>
+            <kbd className="px-1 py-0.5 bg-surface rounded" style={{ fontSize: 'var(--text-caption)' }}>Esc</kbd> Close
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/layout/command-palette/CommandPalette.types.ts

@@ -0,0 +1,18 @@
+export interface CommandItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  section?: string;
+  onSelect: () => void;
+}
+
+export interface CommandPaletteProps {
+  /** Whether the palette is open */
+  open: boolean;
+  /** Called when open state changes */
+  onOpenChange: (open: boolean) => void;
+  /** Available command items */
+  items: CommandItem[];
+  /** Placeholder text for the search input */
+  placeholder?: string;
+}

package/src/layout/command-palette/index.ts

@@ -0,0 +1,2 @@
+export { CommandPalette } from './CommandPalette';
+export type { CommandPaletteProps, CommandItem } from './CommandPalette.types';

package/src/layout/sidebar/Sidebar.stories.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Home, Settings, Users, Mail, Calendar } from 'lucide-react';
+import { Sidebar } from './Sidebar';
+
+const meta: Meta<typeof Sidebar> = {
+  title: 'Layout/Sidebar',
+  component: Sidebar,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="h-[500px] flex">
+        <Story />
+        <div className="flex-1 p-6 bg-bg">
+          <p className="text-text-secondary" style={{ fontSize: 'var(--text-body)' }}>
+            Main content area
+          </p>
+        </div>
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Sidebar>;
+
+function NavItem({ icon: Icon, label, active }: { icon: React.ElementType; label: string; active?: boolean }) {
+  return (
+    <button
+      className={`flex items-center gap-3 w-full px-4 py-2 text-left transition-colors rounded-md mx-auto ${
+        active ? 'bg-rust-light text-rust-dark font-medium' : 'text-text-secondary hover:bg-border/30'
+      }`}
+      style={{ fontSize: 'var(--text-body-sm)', transitionDuration: 'var(--duration-micro)' }}
+    >
+      <Icon size={20} className="shrink-0" />
+      <span>{label}</span>
+    </button>
+  );
+}
+
+export const Default: Story = {
+  render: () => {
+    const [collapsed, setCollapsed] = useState(false);
+    return (
+      <Sidebar
+        collapsed={collapsed}
+        onCollapsedChange={setCollapsed}
+        header={<span className="font-bold text-text-primary" style={{ fontSize: 'var(--text-body-lg)' }}>Weave</span>}
+      >
+        <div className="flex flex-col gap-0.5 px-2">
+          <NavItem icon={Home} label="Dashboard" active />
+          <NavItem icon={Mail} label="Messages" />
+          <NavItem icon={Users} label="Team" />
+          <NavItem icon={Calendar} label="Calendar" />
+          <NavItem icon={Settings} label="Settings" />
+        </div>
+      </Sidebar>
+    );
+  },
+};

package/src/layout/sidebar/Sidebar.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Sidebar } from './Sidebar';
+
+describe('Sidebar', () => {
+  it('renders children', () => {
+    render(<Sidebar>Nav items</Sidebar>);
+    expect(screen.getByText('Nav items')).toBeInTheDocument();
+  });
+
+  it('renders header', () => {
+    render(<Sidebar header={<span>Logo</span>}>Nav</Sidebar>);
+    expect(screen.getByText('Logo')).toBeInTheDocument();
+  });
+
+  it('toggles collapse on button click', async () => {
+    const onCollapsedChange = vi.fn();
+    render(
+      <Sidebar collapsed={false} onCollapsedChange={onCollapsedChange}>
+        Nav
+      </Sidebar>,
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Collapse sidebar' }));
+    expect(onCollapsedChange).toHaveBeenCalledWith(true);
+  });
+});

package/src/layout/sidebar/Sidebar.tsx

@@ -0,0 +1,57 @@
+import { createContext, useContext } from 'react';
+import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { cn } from '../../utils/cn';
+import type { SidebarProps } from './Sidebar.types';
+
+export const SidebarContext = createContext<{ collapsed: boolean }>({ collapsed: false });
+export const useSidebar = () => useContext(SidebarContext);
+
+export function Sidebar({
+  collapsed = false,
+  onCollapsedChange,
+  header,
+  children,
+  footer,
+  className,
+}: SidebarProps) {
+  return (
+    <SidebarContext.Provider value={{ collapsed }}>
+      <aside
+        className={cn(
+          'flex flex-col h-full bg-surface border-r border-border transition-all overflow-hidden',
+          collapsed ? 'w-14' : 'w-60',
+          className,
+        )}
+        style={{ transitionDuration: 'var(--duration-normal)' }}
+      >
+        {/* Header */}
+        <div className={cn('flex items-center border-b border-border', collapsed ? 'px-2 py-3 justify-center' : 'px-4 py-3')}>
+          {header && (
+            <div className={cn('flex-1 overflow-hidden', collapsed && 'sr-only')}>{header}</div>
+          )}
+          <button
+            type="button"
+            onClick={() => onCollapsedChange?.(!collapsed)}
+            aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+            className="p-1.5 rounded-md text-text-secondary hover:bg-border/50 transition-colors shrink-0"
+            style={{ transitionDuration: 'var(--duration-micro)' }}
+          >
+            {collapsed ? <PanelLeftOpen size={18} /> : <PanelLeftClose size={18} />}
+          </button>
+        </div>
+
+        {/* Navigation */}
+        <nav className="flex-1 overflow-y-auto py-2">
+          {children}
+        </nav>
+
+        {/* Footer */}
+        {footer && (
+          <div className={cn('border-t border-border', collapsed ? 'px-2 py-3' : 'px-4 py-3')}>
+            {footer}
+          </div>
+        )}
+      </aside>
+    </SidebarContext.Provider>
+  );
+}

package/src/layout/sidebar/Sidebar.types.ts

@@ -0,0 +1,14 @@
+export interface SidebarProps {
+  /** Whether the sidebar is collapsed to rail mode (56px) */
+  collapsed?: boolean;
+  /** Called when collapse state changes */
+  onCollapsedChange?: (collapsed: boolean) => void;
+  /** Header slot (logo area) */
+  header?: React.ReactNode;
+  /** Navigation slot */
+  children: React.ReactNode;
+  /** Footer slot */
+  footer?: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+}

package/src/layout/sidebar/index.ts

@@ -0,0 +1,2 @@
+export { Sidebar, SidebarContext, useSidebar } from './Sidebar';
+export type { SidebarProps } from './Sidebar.types';

package/src/layout/top-bar/TopBar.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Bell, Search } from 'lucide-react';
+import { TopBar } from './TopBar';
+import { Avatar } from '../../primitives/avatar';
+
+const meta: Meta<typeof TopBar> = {
+  title: 'Layout/TopBar',
+  component: TopBar,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof TopBar>;
+
+export const Default: Story = {
+  render: () => (
+    <TopBar
+      logo={
+        <span className="font-bold text-text-primary" style={{ fontSize: 'var(--text-body-lg)' }}>
+          Weave
+        </span>
+      }
+      navigation={
+        <>
+          <button className="px-3 py-1.5 rounded-full bg-rust-light text-rust-dark font-medium" style={{ fontSize: 'var(--text-body-sm)' }}>
+            Dashboard
+          </button>
+          <button className="px-3 py-1.5 rounded-full text-text-secondary hover:bg-border/30 transition-colors" style={{ fontSize: 'var(--text-body-sm)' }}>
+            Projects
+          </button>
+          <button className="px-3 py-1.5 rounded-full text-text-secondary hover:bg-border/30 transition-colors" style={{ fontSize: 'var(--text-body-sm)' }}>
+            Team
+          </button>
+        </>
+      }
+      actions={
+        <>
+          <button className="flex items-center gap-2 px-3 py-1.5 bg-white rounded-md border border-border text-text-secondary" style={{ fontSize: 'var(--text-body-sm)' }}>
+            <Search size={14} />
+            Search...
+            <kbd className="ml-4 px-1.5 py-0.5 bg-surface rounded text-text-secondary" style={{ fontSize: 'var(--text-caption)' }}>⌘K</kbd>
+          </button>
+          <button className="relative p-2 rounded-md text-text-secondary hover:bg-border/30 transition-colors">
+            <Bell size={18} />
+          </button>
+          <Avatar name="Hank Morrison" size="sm" />
+        </>
+      }
+    />
+  ),
+};

package/src/layout/top-bar/TopBar.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { TopBar } from './TopBar';
+
+describe('TopBar', () => {
+  it('renders logo, navigation, and actions', () => {
+    render(
+      <TopBar
+        logo={<span>Logo</span>}
+        navigation={<button>Dashboard</button>}
+        actions={<button>Search</button>}
+      />,
+    );
+    expect(screen.getByText('Logo')).toBeInTheDocument();
+    expect(screen.getByText('Dashboard')).toBeInTheDocument();
+    expect(screen.getByText('Search')).toBeInTheDocument();
+  });
+});

package/src/layout/top-bar/TopBar.tsx

@@ -0,0 +1,19 @@
+import { cn } from '../../utils/cn';
+import type { TopBarProps } from './TopBar.types';
+
+export function TopBar({ logo, navigation, actions, className }: TopBarProps) {
+  return (
+    <header
+      className={cn(
+        'flex items-center justify-between h-14 px-4 bg-surface border-b border-border',
+        className,
+      )}
+    >
+      <div className="flex items-center gap-6">
+        {logo && <div className="shrink-0">{logo}</div>}
+        {navigation && <nav className="flex items-center gap-1">{navigation}</nav>}
+      </div>
+      {actions && <div className="flex items-center gap-3">{actions}</div>}
+    </header>
+  );
+}

package/src/layout/top-bar/TopBar.types.ts

@@ -0,0 +1,10 @@
+export interface TopBarProps {
+  /** Logo or brand element */
+  logo?: React.ReactNode;
+  /** Navigation tabs or links */
+  navigation?: React.ReactNode;
+  /** Right-side actions (search, notifications, avatar) */
+  actions?: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+}

package/src/layout/top-bar/index.ts

@@ -0,0 +1,2 @@
+export { TopBar } from './TopBar';
+export type { TopBarProps } from './TopBar.types';

package/src/navigation/breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Breadcrumbs } from './Breadcrumbs';
+
+const meta: Meta<typeof Breadcrumbs> = {
+  title: 'Navigation/Breadcrumbs',
+  component: Breadcrumbs,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Breadcrumbs>;
+
+export const Default: Story = {
+  args: {
+    items: [
+      { label: 'Home', href: '#' },
+      { label: 'Projects', href: '#' },
+      { label: 'Weave Design System' },
+    ],
+  },
+};
+
+export const TwoLevels: Story = {
+  args: {
+    items: [
+      { label: 'Dashboard', href: '#' },
+      { label: 'Settings' },
+    ],
+  },
+};

package/src/navigation/breadcrumbs/Breadcrumbs.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Breadcrumbs } from './Breadcrumbs';
+
+describe('Breadcrumbs', () => {
+  it('renders all items', () => {
+    render(
+      <Breadcrumbs items={[
+        { label: 'Home', href: '#' },
+        { label: 'Projects', href: '#' },
+        { label: 'Current' },
+      ]} />,
+    );
+    expect(screen.getByText('Home')).toBeInTheDocument();
+    expect(screen.getByText('Projects')).toBeInTheDocument();
+    expect(screen.getByText('Current')).toBeInTheDocument();
+  });
+
+  it('marks last item as current page', () => {
+    render(
+      <Breadcrumbs items={[
+        { label: 'Home', href: '#' },
+        { label: 'Current' },
+      ]} />,
+    );
+    expect(screen.getByText('Current')).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('renders links for non-last items', () => {
+    render(
+      <Breadcrumbs items={[
+        { label: 'Home', href: '/home' },
+        { label: 'Current' },
+      ]} />,
+    );
+    expect(screen.getByRole('link', { name: 'Home' })).toHaveAttribute('href', '/home');
+  });
+
+  it('has breadcrumb navigation landmark', () => {
+    render(<Breadcrumbs items={[{ label: 'Home' }]} />);
+    expect(screen.getByRole('navigation', { name: 'Breadcrumb' })).toBeInTheDocument();
+  });
+});

package/src/navigation/breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,45 @@
+import { ChevronRight } from 'lucide-react';
+import { cn } from '../../utils/cn';
+import type { BreadcrumbsProps } from './Breadcrumbs.types';
+
+export function Breadcrumbs({ items, className }: BreadcrumbsProps) {
+  return (
+    <nav aria-label="Breadcrumb" className={className}>
+      <ol className="flex items-center gap-1.5">
+        {items.map((item, i) => {
+          const isLast = i === items.length - 1;
+          return (
+            <li key={i} className="flex items-center gap-1.5">
+              {i > 0 && <ChevronRight size={14} className="text-text-secondary" />}
+              {isLast ? (
+                <span
+                  className="text-text-primary font-medium"
+                  style={{ fontSize: 'var(--text-body-sm)', lineHeight: 'var(--leading-body-sm)' }}
+                  aria-current="page"
+                >
+                  {item.label}
+                </span>
+              ) : (
+                <a
+                  href={item.href}
+                  onClick={item.onClick}
+                  className={cn(
+                    'text-text-secondary hover:text-text-primary transition-colors',
+                    'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rust rounded-sm',
+                  )}
+                  style={{
+                    fontSize: 'var(--text-body-sm)',
+                    lineHeight: 'var(--leading-body-sm)',
+                    transitionDuration: 'var(--duration-micro)',
+                  }}
+                >
+                  {item.label}
+                </a>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/src/navigation/breadcrumbs/Breadcrumbs.types.ts

@@ -0,0 +1,12 @@
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+export interface BreadcrumbsProps {
+  /** Breadcrumb items — last item is treated as active/current */
+  items: BreadcrumbItem[];
+  /** Additional CSS classes */
+  className?: string;
+}

package/src/navigation/breadcrumbs/index.ts

@@ -0,0 +1,2 @@
+export { Breadcrumbs } from './Breadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbItem } from './Breadcrumbs.types';