@weave-design-system/react 0.1.0

package/src/navigation/sidebar-nav-item/SidebarNavItem.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Home, Settings, Users, Mail } from 'lucide-react';
+import { SidebarNavItem } from './SidebarNavItem';
+import { SidebarContext } from '../../layout/sidebar/Sidebar';
+
+const meta: Meta<typeof SidebarNavItem> = {
+  title: 'Navigation/SidebarNavItem',
+  component: SidebarNavItem,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <SidebarContext.Provider value={{ collapsed: false }}>
+        <div className="w-60 bg-surface p-2">
+          <Story />
+        </div>
+      </SidebarContext.Provider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof SidebarNavItem>;
+
+export const Default: Story = {
+  args: { icon: <Home size={20} />, label: 'Dashboard' },
+};
+
+export const Active: Story = {
+  args: { icon: <Home size={20} />, label: 'Dashboard', active: true },
+};
+
+export const Group: Story = {
+  render: () => (
+    <div className="flex flex-col gap-0.5">
+      <SidebarNavItem icon={<Home size={20} />} label="Dashboard" active />
+      <SidebarNavItem icon={<Mail size={20} />} label="Messages" />
+      <SidebarNavItem icon={<Users size={20} />} label="Team" />
+      <SidebarNavItem icon={<Settings size={20} />} label="Settings" />
+    </div>
+  ),
+};

package/src/navigation/sidebar-nav-item/SidebarNavItem.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { SidebarNavItem } from './SidebarNavItem';
+import { SidebarContext } from '../../layout/sidebar/Sidebar';
+
+describe('SidebarNavItem', () => {
+  it('renders icon and label', () => {
+    render(
+      <SidebarContext.Provider value={{ collapsed: false }}>
+        <SidebarNavItem icon={<span>IC</span>} label="Dashboard" />
+      </SidebarContext.Provider>,
+    );
+    expect(screen.getByText('Dashboard')).toBeInTheDocument();
+    expect(screen.getByText('IC')).toBeInTheDocument();
+  });
+
+  it('marks active item with aria-current', () => {
+    render(
+      <SidebarContext.Provider value={{ collapsed: false }}>
+        <SidebarNavItem icon={<span>IC</span>} label="Dashboard" active />
+      </SidebarContext.Provider>,
+    );
+    expect(screen.getByRole('button')).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('calls onClick', async () => {
+    const onClick = vi.fn();
+    render(
+      <SidebarContext.Provider value={{ collapsed: false }}>
+        <SidebarNavItem icon={<span>IC</span>} label="Dashboard" onClick={onClick} />
+      </SidebarContext.Provider>,
+    );
+    await userEvent.click(screen.getByRole('button'));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it('hides label when collapsed', () => {
+    render(
+      <SidebarContext.Provider value={{ collapsed: true }}>
+        <SidebarNavItem icon={<span>IC</span>} label="Dashboard" />
+      </SidebarContext.Provider>,
+    );
+    expect(screen.queryByText('Dashboard')).not.toBeInTheDocument();
+  });
+});

package/src/navigation/sidebar-nav-item/SidebarNavItem.tsx

@@ -0,0 +1,38 @@
+import { cn } from '../../utils/cn';
+import { useSidebar } from '../../layout/sidebar/Sidebar';
+import type { SidebarNavItemProps } from './SidebarNavItem.types';
+
+export function SidebarNavItem({
+  icon,
+  label,
+  active = false,
+  onClick,
+  className,
+}: SidebarNavItemProps) {
+  const { collapsed } = useSidebar();
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-current={active ? 'page' : undefined}
+      title={collapsed ? label : undefined}
+      className={cn(
+        'flex items-center w-full rounded-md transition-colors',
+        collapsed ? 'justify-center px-2 py-2' : 'gap-3 px-3 py-2',
+        active
+          ? 'bg-rust-light text-rust-dark font-medium'
+          : 'text-text-secondary hover:bg-border/30',
+        className,
+      )}
+      style={{
+        fontSize: 'var(--text-body-sm)',
+        lineHeight: 'var(--leading-body-sm)',
+        transitionDuration: 'var(--duration-micro)',
+      }}
+    >
+      <span className="shrink-0">{icon}</span>
+      {!collapsed && <span>{label}</span>}
+    </button>
+  );
+}

package/src/navigation/sidebar-nav-item/SidebarNavItem.types.ts

@@ -0,0 +1,12 @@
+export interface SidebarNavItemProps {
+  /** Icon element */
+  icon: React.ReactNode;
+  /** Label text */
+  label: string;
+  /** Whether this item is currently active */
+  active?: boolean;
+  /** Click handler */
+  onClick?: () => void;
+  /** Additional CSS classes */
+  className?: string;
+}

package/src/navigation/sidebar-nav-item/index.ts

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

package/src/navigation/tabs/Tabs.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tabs } from './Tabs';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'Navigation/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+export const Underline: Story = {
+  render: () => (
+    <Tabs defaultValue="overview" variant="underline">
+      <Tabs.List>
+        <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
+        <Tabs.Trigger value="tasks">Tasks</Tabs.Trigger>
+        <Tabs.Trigger value="activity">Activity</Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Panel value="overview">
+        <p className="text-text-primary" style={{ fontSize: 'var(--text-body)' }}>Overview content goes here.</p>
+      </Tabs.Panel>
+      <Tabs.Panel value="tasks">
+        <p className="text-text-primary" style={{ fontSize: 'var(--text-body)' }}>Tasks content goes here.</p>
+      </Tabs.Panel>
+      <Tabs.Panel value="activity">
+        <p className="text-text-primary" style={{ fontSize: 'var(--text-body)' }}>Activity content goes here.</p>
+      </Tabs.Panel>
+    </Tabs>
+  ),
+};
+
+export const Pill: Story = {
+  render: () => (
+    <Tabs defaultValue="all" variant="pill">
+      <Tabs.List>
+        <Tabs.Trigger value="all">All</Tabs.Trigger>
+        <Tabs.Trigger value="active">Active</Tabs.Trigger>
+        <Tabs.Trigger value="completed">Completed</Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Panel value="all">All items</Tabs.Panel>
+      <Tabs.Panel value="active">Active items</Tabs.Panel>
+      <Tabs.Panel value="completed">Completed items</Tabs.Panel>
+    </Tabs>
+  ),
+};

package/src/navigation/tabs/Tabs.test.tsx

@@ -0,0 +1,67 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Tabs } from './Tabs';
+
+describe('Tabs', () => {
+  it('renders tabs and shows active panel', () => {
+    render(
+      <Tabs defaultValue="a">
+        <Tabs.List>
+          <Tabs.Trigger value="a">Tab A</Tabs.Trigger>
+          <Tabs.Trigger value="b">Tab B</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Panel value="a">Content A</Tabs.Panel>
+        <Tabs.Panel value="b">Content B</Tabs.Panel>
+      </Tabs>,
+    );
+    expect(screen.getByText('Content A')).toBeInTheDocument();
+    expect(screen.queryByText('Content B')).not.toBeInTheDocument();
+  });
+
+  it('switches panels on click', async () => {
+    render(
+      <Tabs defaultValue="a">
+        <Tabs.List>
+          <Tabs.Trigger value="a">Tab A</Tabs.Trigger>
+          <Tabs.Trigger value="b">Tab B</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Panel value="a">Content A</Tabs.Panel>
+        <Tabs.Panel value="b">Content B</Tabs.Panel>
+      </Tabs>,
+    );
+    await userEvent.click(screen.getByRole('tab', { name: 'Tab B' }));
+    expect(screen.getByText('Content B')).toBeInTheDocument();
+    expect(screen.queryByText('Content A')).not.toBeInTheDocument();
+  });
+
+  it('calls onValueChange', async () => {
+    const onChange = vi.fn();
+    render(
+      <Tabs defaultValue="a" onValueChange={onChange}>
+        <Tabs.List>
+          <Tabs.Trigger value="a">Tab A</Tabs.Trigger>
+          <Tabs.Trigger value="b">Tab B</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Panel value="a">A</Tabs.Panel>
+        <Tabs.Panel value="b">B</Tabs.Panel>
+      </Tabs>,
+    );
+    await userEvent.click(screen.getByRole('tab', { name: 'Tab B' }));
+    expect(onChange).toHaveBeenCalledWith('b');
+  });
+
+  it('sets aria-selected on active trigger', () => {
+    render(
+      <Tabs defaultValue="a">
+        <Tabs.List>
+          <Tabs.Trigger value="a">Tab A</Tabs.Trigger>
+          <Tabs.Trigger value="b">Tab B</Tabs.Trigger>
+        </Tabs.List>
+        <Tabs.Panel value="a">A</Tabs.Panel>
+      </Tabs>,
+    );
+    expect(screen.getByRole('tab', { name: 'Tab A' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tab', { name: 'Tab B' })).toHaveAttribute('aria-selected', 'false');
+  });
+});

package/src/navigation/tabs/Tabs.tsx

@@ -0,0 +1,111 @@
+import { createContext, useContext } from 'react';
+import { cn } from '../../utils/cn';
+import { useControllableState } from '../../hooks/use-controllable-state';
+import type { TabsProps, TabsListProps, TabsTriggerProps, TabsPanelProps, TabsVariant } from './Tabs.types';
+
+interface TabsContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+  variant: TabsVariant;
+}
+
+const TabsContext = createContext<TabsContextValue>({
+  value: '',
+  onValueChange: () => {},
+  variant: 'underline',
+});
+
+function TabsRoot({
+  value: controlledValue,
+  defaultValue = '',
+  onValueChange,
+  variant = 'underline',
+  children,
+  className,
+}: TabsProps) {
+  const [value, setValue] = useControllableState({
+    value: controlledValue,
+    defaultValue,
+    onChange: onValueChange,
+  });
+
+  return (
+    <TabsContext.Provider value={{ value, onValueChange: setValue, variant }}>
+      <div className={className}>{children}</div>
+    </TabsContext.Provider>
+  );
+}
+
+function TabsList({ children, className }: TabsListProps) {
+  const { variant } = useContext(TabsContext);
+  return (
+    <div
+      role="tablist"
+      className={cn(
+        'flex gap-1',
+        variant === 'underline' && 'border-b border-border',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+function TabsTrigger({ value, children, className, disabled }: TabsTriggerProps) {
+  const { value: activeValue, onValueChange, variant } = useContext(TabsContext);
+  const isActive = activeValue === value;
+
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={isActive}
+      aria-controls={`panel-${value}`}
+      disabled={disabled}
+      onClick={() => onValueChange(value)}
+      className={cn(
+        'transition-colors font-medium',
+        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rust',
+        variant === 'underline' && [
+          'px-3 py-2 -mb-px border-b-2',
+          isActive ? 'border-rust text-rust' : 'border-transparent text-text-secondary hover:text-text-primary',
+        ],
+        variant === 'pill' && [
+          'px-3 py-1.5 rounded-full',
+          isActive ? 'bg-rust-light text-rust-dark' : 'text-text-secondary hover:bg-border/30',
+        ],
+        disabled && 'opacity-50 cursor-not-allowed',
+        className,
+      )}
+      style={{
+        fontSize: 'var(--text-body-sm)',
+        lineHeight: 'var(--leading-body-sm)',
+        transitionDuration: 'var(--duration-micro)',
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+function TabsPanel({ value, children, className }: TabsPanelProps) {
+  const { value: activeValue } = useContext(TabsContext);
+  if (activeValue !== value) return null;
+
+  return (
+    <div
+      role="tabpanel"
+      id={`panel-${value}`}
+      className={cn('py-4', className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+export const Tabs = Object.assign(TabsRoot, {
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Panel: TabsPanel,
+});

package/src/navigation/tabs/Tabs.types.ts

@@ -0,0 +1,36 @@
+export type TabsVariant = 'underline' | 'pill';
+
+export interface TabsProps {
+  /** Controlled active tab value */
+  value?: string;
+  /** Default active tab value */
+  defaultValue?: string;
+  /** Called when active tab changes */
+  onValueChange?: (value: string) => void;
+  /** Visual variant */
+  variant?: TabsVariant;
+  /** Tab content */
+  children: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export interface TabsListProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export interface TabsTriggerProps {
+  /** Unique value identifying this tab */
+  value: string;
+  children: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+}
+
+export interface TabsPanelProps {
+  /** Value matching the corresponding trigger */
+  value: string;
+  children: React.ReactNode;
+  className?: string;
+}

package/src/navigation/tabs/index.ts

@@ -0,0 +1,2 @@
+export { Tabs } from './Tabs';
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsPanelProps, TabsVariant } from './Tabs.types';

package/src/patterns/accordion/Accordion.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Accordion } from './Accordion';
+
+const meta: Meta<typeof Accordion> = { title: 'Patterns/Accordion', component: Accordion, tags: ['autodocs'] };
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+export const Default: Story = {
+  render: () => (
+    <Accordion className="max-w-md">
+      <Accordion.Item value="1">
+        <Accordion.Trigger>What is Weave?</Accordion.Trigger>
+        <Accordion.Content>Weave is a human-centered design system for productivity software.</Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="2">
+        <Accordion.Trigger>How do I get started?</Accordion.Trigger>
+        <Accordion.Content>Install the package and import the components you need.</Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="3">
+        <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
+        <Accordion.Content>Yes, all components target WCAG 2.1 AA compliance.</Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+  ),
+};

package/src/patterns/accordion/Accordion.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect } from 'vitest';
+import { Accordion } from './Accordion';
+
+describe('Accordion', () => {
+  it('starts collapsed', () => {
+    render(
+      <Accordion>
+        <Accordion.Item value="1">
+          <Accordion.Trigger>Question</Accordion.Trigger>
+          <Accordion.Content>Answer</Accordion.Content>
+        </Accordion.Item>
+      </Accordion>,
+    );
+    expect(screen.getByText('Question')).toHaveAttribute('aria-expanded', 'false');
+  });
+  it('expands on click', async () => {
+    render(
+      <Accordion>
+        <Accordion.Item value="1">
+          <Accordion.Trigger>Question</Accordion.Trigger>
+          <Accordion.Content>Answer</Accordion.Content>
+        </Accordion.Item>
+      </Accordion>,
+    );
+    await userEvent.click(screen.getByText('Question'));
+    expect(screen.getByText('Question')).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText('Answer')).toBeInTheDocument();
+  });
+  it('collapses on second click', async () => {
+    render(
+      <Accordion>
+        <Accordion.Item value="1">
+          <Accordion.Trigger>Question</Accordion.Trigger>
+          <Accordion.Content>Answer</Accordion.Content>
+        </Accordion.Item>
+      </Accordion>,
+    );
+    await userEvent.click(screen.getByText('Question'));
+    await userEvent.click(screen.getByText('Question'));
+    expect(screen.getByText('Question')).toHaveAttribute('aria-expanded', 'false');
+  });
+});

package/src/patterns/accordion/Accordion.tsx

@@ -0,0 +1,92 @@
+import { createContext, useContext, useState, useRef, useEffect } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '../../utils/cn';
+
+export interface AccordionProps { children: React.ReactNode; className?: string; }
+export interface AccordionItemProps { value: string; children: React.ReactNode; className?: string; }
+export interface AccordionTriggerProps { children: React.ReactNode; className?: string; }
+export interface AccordionContentProps { children: React.ReactNode; className?: string; }
+
+const AccordionContext = createContext<{ openItems: Set<string>; toggle: (v: string) => void }>({ openItems: new Set(), toggle: () => {} });
+const ItemContext = createContext<{ value: string; isOpen: boolean }>({ value: '', isOpen: false });
+
+function AccordionRoot({ children, className }: AccordionProps) {
+  const [openItems, setOpenItems] = useState<Set<string>>(new Set());
+  const toggle = (value: string) => {
+    setOpenItems((prev) => {
+      const next = new Set(prev);
+      next.has(value) ? next.delete(value) : next.add(value);
+      return next;
+    });
+  };
+  return (
+    <AccordionContext.Provider value={{ openItems, toggle }}>
+      <div className={cn('divide-y divide-border', className)}>{children}</div>
+    </AccordionContext.Provider>
+  );
+}
+
+function AccordionItem({ value, children, className }: AccordionItemProps) {
+  const { openItems } = useContext(AccordionContext);
+  return (
+    <ItemContext.Provider value={{ value, isOpen: openItems.has(value) }}>
+      <div className={className}>{children}</div>
+    </ItemContext.Provider>
+  );
+}
+
+function AccordionTrigger({ children, className }: AccordionTriggerProps) {
+  const { toggle } = useContext(AccordionContext);
+  const { value, isOpen } = useContext(ItemContext);
+  return (
+    <button
+      type="button"
+      onClick={() => toggle(value)}
+      aria-expanded={isOpen}
+      className={cn('flex w-full items-center justify-between py-4 text-text-primary font-medium transition-colors hover:text-rust', className)}
+      style={{ fontSize: 'var(--text-body)', transitionDuration: 'var(--duration-micro)' }}
+    >
+      {children}
+      <ChevronDown
+        size={16}
+        className={cn('text-text-secondary transition-transform', isOpen && 'rotate-180')}
+        style={{ transitionDuration: 'var(--duration-fast)' }}
+      />
+    </button>
+  );
+}
+
+function AccordionContent({ children, className }: AccordionContentProps) {
+  const { isOpen } = useContext(ItemContext);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      setHeight(contentRef.current.scrollHeight);
+    }
+  }, [children, isOpen]);
+
+  return (
+    <div
+      className="overflow-hidden transition-all"
+      style={{
+        height: isOpen ? height : 0,
+        opacity: isOpen ? 1 : 0,
+        transitionDuration: 'var(--duration-normal)',
+        transitionTimingFunction: isOpen ? 'var(--ease-out)' : 'var(--ease-in)',
+      }}
+      aria-hidden={!isOpen}
+    >
+      <div ref={contentRef} className={cn('pb-4 text-text-secondary', className)} style={{ fontSize: 'var(--text-body)' }}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export const Accordion = Object.assign(AccordionRoot, {
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent,
+});

package/src/patterns/accordion/index.ts

@@ -0,0 +1,2 @@
+export { Accordion } from './Accordion';
+export type { AccordionProps, AccordionItemProps, AccordionTriggerProps, AccordionContentProps } from './Accordion';

package/src/patterns/action-menu/ActionMenu.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Edit, Copy, Trash2 } from 'lucide-react';
+import { ActionMenu } from './ActionMenu';
+
+const meta: Meta<typeof ActionMenu> = { title: 'Patterns/ActionMenu', component: ActionMenu, tags: ['autodocs'] };
+export default meta;
+type Story = StoryObj<typeof ActionMenu>;
+
+export const Default: Story = {
+  args: {
+    items: [
+      { label: 'Edit', icon: <Edit size={16} /> },
+      { label: 'Duplicate', icon: <Copy size={16} /> },
+      { divider: true, label: '' },
+      { label: 'Delete', icon: <Trash2 size={16} />, destructive: true },
+    ],
+  },
+};

package/src/patterns/action-menu/ActionMenu.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { ActionMenu } from './ActionMenu';
+
+describe('ActionMenu', () => {
+  it('renders items', () => {
+    render(<ActionMenu items={[{ label: 'Edit' }, { label: 'Delete', destructive: true }]} />);
+    expect(screen.getByText('Edit')).toBeInTheDocument();
+    expect(screen.getByText('Delete')).toBeInTheDocument();
+  });
+  it('calls onClick', async () => {
+    const onClick = vi.fn();
+    render(<ActionMenu items={[{ label: 'Edit', onClick }]} />);
+    await userEvent.click(screen.getByText('Edit'));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});

package/src/patterns/action-menu/ActionMenu.tsx

@@ -0,0 +1,41 @@
+import { cn } from '../../utils/cn';
+
+export interface ActionMenuItem {
+  label: string;
+  icon?: React.ReactNode;
+  onClick?: () => void;
+  destructive?: boolean;
+  divider?: boolean;
+}
+
+export interface ActionMenuProps {
+  items: ActionMenuItem[];
+  className?: string;
+}
+
+export function ActionMenu({ items, className }: ActionMenuProps) {
+  return (
+    <div className={cn('w-56 rounded-lg bg-white border border-border shadow-2 py-1 overflow-hidden', className)} role="menu">
+      {items.map((item, i) =>
+        item.divider ? (
+          <div key={i} className="h-px bg-border my-1" role="separator" />
+        ) : (
+          <button
+            key={i}
+            type="button"
+            role="menuitem"
+            onClick={item.onClick}
+            className={cn(
+              'flex items-center gap-3 w-full px-3 py-2 transition-colors text-left',
+              item.destructive ? 'text-error hover:bg-error-light' : 'text-text-primary hover:bg-surface',
+            )}
+            style={{ fontSize: 'var(--text-body-sm)', transitionDuration: 'var(--duration-micro)' }}
+          >
+            {item.icon && <span className="shrink-0">{item.icon}</span>}
+            {item.label}
+          </button>
+        ),
+      )}
+    </div>
+  );
+}

package/src/patterns/action-menu/index.ts

@@ -0,0 +1,2 @@
+export { ActionMenu } from './ActionMenu';
+export type { ActionMenuProps, ActionMenuItem } from './ActionMenu';