@weave-design-system/react 0.1.0

package/src/feedback/skeleton-loader/SkeletonLoader.tsx

@@ -0,0 +1,61 @@
+import { cn } from '../../utils/cn';
+
+export type SkeletonShape = 'text' | 'avatar' | 'image' | 'custom';
+
+export interface SkeletonLoaderProps {
+  shape?: SkeletonShape;
+  width?: string | number;
+  height?: string | number;
+  lines?: number;
+  className?: string;
+}
+
+export function SkeletonLoader({ shape = 'text', width, height, lines = 3, className }: SkeletonLoaderProps) {
+  const baseClass = 'bg-surface animate-skeleton-pulse rounded';
+
+  if (shape === 'avatar') {
+    return (
+      <div
+        className={cn(baseClass, 'rounded-full', className)}
+        style={{ width: width ?? 40, height: height ?? 40 }}
+        aria-hidden
+      />
+    );
+  }
+
+  if (shape === 'image') {
+    return (
+      <div
+        className={cn(baseClass, 'rounded-lg', className)}
+        style={{ width: width ?? '100%', height: height ?? 200 }}
+        aria-hidden
+      />
+    );
+  }
+
+  if (shape === 'custom') {
+    return (
+      <div
+        className={cn(baseClass, className)}
+        style={{ width, height }}
+        aria-hidden
+      />
+    );
+  }
+
+  // Text lines
+  return (
+    <div className={cn('flex flex-col gap-2', className)} aria-hidden>
+      {Array.from({ length: lines }).map((_, i) => (
+        <div
+          key={i}
+          className={baseClass}
+          style={{
+            height: height ?? 16,
+            width: i === lines - 1 ? '60%' : (width ?? '100%'),
+          }}
+        />
+      ))}
+    </div>
+  );
+}

package/src/feedback/skeleton-loader/index.ts

@@ -0,0 +1,2 @@
+export { SkeletonLoader } from './SkeletonLoader';
+export type { SkeletonLoaderProps, SkeletonShape } from './SkeletonLoader';

package/src/feedback/toast/Toast.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToastProvider, useToast } from './Toast';
+import { Button } from '../../primitives/button';
+
+const meta: Meta = { title: 'Feedback/Toast', tags: ['autodocs'] };
+export default meta;
+type Story = StoryObj;
+
+function ToastDemo() {
+  const { toast } = useToast();
+  return (
+    <div className="flex flex-wrap gap-3">
+      <Button variant="secondary" onClick={() => toast({ title: 'Task saved', message: 'Your changes have been saved.', variant: 'success' })}>Success</Button>
+      <Button variant="destructive" onClick={() => toast({ title: 'Error', message: 'Something went wrong.', variant: 'error' })}>Error</Button>
+      <Button variant="outline" onClick={() => toast({ title: 'Warning', message: 'Check your input.', variant: 'warning' })}>Warning</Button>
+      <Button variant="ghost" onClick={() => toast({ title: 'Info', message: 'New update available.', variant: 'info' })}>Info</Button>
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: () => (
+    <ToastProvider>
+      <ToastDemo />
+    </ToastProvider>
+  ),
+};

package/src/feedback/toast/Toast.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect } from 'vitest';
+import { ToastProvider, useToast } from './Toast';
+
+function ToastTrigger() {
+  const { toast } = useToast();
+  return <button onClick={() => toast({ title: 'Saved', variant: 'success' })}>Show</button>;
+}
+
+describe('Toast', () => {
+  it('shows toast on trigger', async () => {
+    render(
+      <ToastProvider>
+        <ToastTrigger />
+      </ToastProvider>,
+    );
+    await userEvent.click(screen.getByText('Show'));
+    expect(screen.getByRole('alert')).toHaveTextContent('Saved');
+  });
+
+  it('dismisses on close click', async () => {
+    render(
+      <ToastProvider>
+        <ToastTrigger />
+      </ToastProvider>,
+    );
+    await userEvent.click(screen.getByText('Show'));
+    await userEvent.click(screen.getByRole('button', { name: 'Dismiss' }));
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
+});

package/src/feedback/toast/Toast.tsx

@@ -0,0 +1,106 @@
+import { createContext, useContext, useState, useCallback, useRef, useEffect } from 'react';
+import { CheckCircle2, AlertCircle, AlertTriangle, Info, X } from 'lucide-react';
+import { cn } from '../../utils/cn';
+
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+
+export interface ToastData {
+  id: string;
+  title: string;
+  message?: string;
+  variant: ToastVariant;
+  duration?: number;
+}
+
+interface ToastContextValue {
+  toast: (data: Omit<ToastData, 'id'>) => void;
+}
+
+const ToastContext = createContext<ToastContextValue>({ toast: () => {} });
+export const useToast = () => useContext(ToastContext);
+
+const icons: Record<ToastVariant, React.ReactNode> = {
+  success: <CheckCircle2 size={18} />,
+  error: <AlertCircle size={18} />,
+  warning: <AlertTriangle size={18} />,
+  info: <Info size={18} />,
+};
+
+const variantStyles: Record<ToastVariant, string> = {
+  success: 'border-success text-success',
+  error: 'border-error text-error',
+  warning: 'border-warning text-warning',
+  info: 'border-info text-info',
+};
+
+let toastId = 0;
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<ToastData[]>([]);
+  const timers = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+    const timer = timers.current.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      timers.current.delete(id);
+    }
+  }, []);
+
+  const toast = useCallback(
+    (data: Omit<ToastData, 'id'>) => {
+      const id = `toast-${++toastId}`;
+      setToasts((prev) => [...prev, { ...data, id }]);
+      const duration = data.duration ?? 5000;
+      if (duration > 0) {
+        const timer = setTimeout(() => removeToast(id), duration);
+        timers.current.set(id, timer);
+      }
+    },
+    [removeToast],
+  );
+
+  // Cleanup timers on unmount
+  useEffect(() => {
+    return () => {
+      timers.current.forEach((timer) => clearTimeout(timer));
+    };
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ toast }}>
+      {children}
+      <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm" aria-live="polite">
+        {toasts.map((t) => (
+          <div
+            key={t.id}
+            className={cn(
+              'flex items-start gap-3 rounded-lg bg-white border-l-4 p-4 shadow-2',
+              'animate-slide-in-right',
+              variantStyles[t.variant],
+            )}
+            role="alert"
+          >
+            <span className="shrink-0 mt-0.5">{icons[t.variant]}</span>
+            <div className="flex-1 min-w-0">
+              <p className="text-text-primary font-medium" style={{ fontSize: 'var(--text-body-sm)' }}>{t.title}</p>
+              {t.message && (
+                <p className="text-text-secondary mt-0.5" style={{ fontSize: 'var(--text-body-sm)' }}>{t.message}</p>
+              )}
+            </div>
+            <button
+              type="button"
+              onClick={() => removeToast(t.id)}
+              className="shrink-0 p-1 rounded text-text-secondary hover:bg-surface transition-colors"
+              aria-label="Dismiss"
+              style={{ transitionDuration: 'var(--duration-micro)' }}
+            >
+              <X size={14} />
+            </button>
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}

package/src/feedback/toast/index.ts

@@ -0,0 +1,2 @@
+export { ToastProvider, useToast } from './Toast';
+export type { ToastData, ToastVariant } from './Toast';

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useReducedMotion } from './use-reduced-motion';
+export { useControllableState } from './use-controllable-state';
+export { useFocusTrap } from './use-focus-trap';

package/src/hooks/use-controllable-state.ts

@@ -0,0 +1,34 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+interface UseControllableStateParams<T> {
+  value?: T;
+  defaultValue: T;
+  onChange?: (value: T) => void;
+}
+
+export function useControllableState<T>({
+  value: controlledValue,
+  defaultValue,
+  onChange,
+}: UseControllableStateParams<T>): [T, (value: T) => void] {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+
+  const onChangeRef = useRef(onChange);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
+  const setValue = useCallback(
+    (next: T) => {
+      if (!isControlled) {
+        setInternalValue(next);
+      }
+      onChangeRef.current?.(next);
+    },
+    [isControlled],
+  );
+
+  return [value, setValue];
+}

package/src/hooks/use-focus-trap.ts

@@ -0,0 +1,56 @@
+import { useEffect, useRef } from 'react';
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(', ');
+
+export function useFocusTrap<T extends HTMLElement>(active: boolean = true) {
+  const containerRef = useRef<T>(null);
+
+  useEffect(() => {
+    if (!active) return;
+    const container = containerRef.current;
+    if (!container) return;
+
+    const focusableElements = () =>
+      Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Tab') return;
+
+      const elements = focusableElements();
+      if (elements.length === 0) return;
+
+      const first = elements[0];
+      const last = elements[elements.length - 1];
+
+      if (event.shiftKey) {
+        if (document.activeElement === first) {
+          event.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          event.preventDefault();
+          first.focus();
+        }
+      }
+    };
+
+    // Focus the first focusable element on mount
+    const elements = focusableElements();
+    if (elements.length > 0) {
+      elements[0].focus();
+    }
+
+    container.addEventListener('keydown', handleKeyDown);
+    return () => container.removeEventListener('keydown', handleKeyDown);
+  }, [active]);
+
+  return containerRef;
+}

package/src/hooks/use-reduced-motion.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+export function useReducedMotion(): boolean {
+  const [reducedMotion, setReducedMotion] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  });
+
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const handler = (event: MediaQueryListEvent) => setReducedMotion(event.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
+
+  return reducedMotion;
+}

package/src/index.ts

@@ -0,0 +1,148 @@
+// Primitives
+export { Button } from './primitives/button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './primitives/button';
+
+export { InputGroup } from './primitives/input';
+export type { InputGroupProps } from './primitives/input';
+
+export { TextareaGroup } from './primitives/textarea';
+export type { TextareaGroupProps } from './primitives/textarea';
+
+export { SelectGroup } from './primitives/select';
+export type { SelectGroupProps } from './primitives/select';
+
+export { Checkbox } from './primitives/checkbox';
+export type { CheckboxProps } from './primitives/checkbox';
+
+export { Radio } from './primitives/radio';
+export type { RadioProps } from './primitives/radio';
+
+export { Toggle } from './primitives/toggle';
+export type { ToggleProps } from './primitives/toggle';
+
+export { Badge } from './primitives/badge';
+export type { BadgeProps, BadgeVariant } from './primitives/badge';
+
+export { Avatar, AvatarGroup } from './primitives/avatar';
+export type { AvatarProps, AvatarGroupProps, AvatarSize } from './primitives/avatar';
+
+export { Link } from './primitives/link';
+export type { LinkProps, LinkVariant } from './primitives/link';
+
+export { Tooltip } from './primitives/tooltip';
+export type { TooltipProps, TooltipVariant } from './primitives/tooltip';
+
+export { Slider } from './primitives/slider';
+export type { SliderProps } from './primitives/slider';
+
+export { DateInput } from './primitives/date-input';
+export type { DateInputProps } from './primitives/date-input';
+
+export { Combobox } from './primitives/combobox';
+export type { ComboboxProps, ComboboxOption } from './primitives/combobox';
+
+export { FileUploadDropzone } from './primitives/file-upload';
+export type { FileUploadDropzoneProps } from './primitives/file-upload';
+
+// Layout
+export { Card } from './layout/card';
+export type { CardProps, CardHeaderProps, CardContentProps, CardActionsProps } from './layout/card';
+
+export { Sidebar, SidebarContext, useSidebar } from './layout/sidebar';
+export type { SidebarProps } from './layout/sidebar';
+
+export { TopBar } from './layout/top-bar';
+export type { TopBarProps } from './layout/top-bar';
+
+export { CommandPalette } from './layout/command-palette';
+export type { CommandPaletteProps, CommandItem } from './layout/command-palette';
+
+// Navigation
+export { SidebarNavItem } from './navigation/sidebar-nav-item';
+export type { SidebarNavItemProps } from './navigation/sidebar-nav-item';
+
+export { Tabs } from './navigation/tabs';
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsPanelProps, TabsVariant } from './navigation/tabs';
+
+export { Breadcrumbs } from './navigation/breadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbItem } from './navigation/breadcrumbs';
+
+// Data Display
+export { StatCard } from './data-display/stat-card';
+export type { StatCardProps } from './data-display/stat-card';
+
+export { ProgressBar } from './data-display/progress-bar';
+export type { ProgressBarProps } from './data-display/progress-bar';
+
+export { CircularProgress } from './data-display/circular-progress';
+export type { CircularProgressProps } from './data-display/circular-progress';
+
+export { Table } from './data-display/table';
+
+export { Timeline } from './data-display/timeline';
+export type { TimelineProps, TimelineItem, TimelineColor } from './data-display/timeline';
+
+export { ActivityFeed } from './data-display/activity-feed';
+export type { ActivityFeedProps, ActivityItem } from './data-display/activity-feed';
+
+export { EmptyState } from './data-display/empty-state';
+export type { EmptyStateProps } from './data-display/empty-state';
+
+// Feedback
+export { ToastProvider, useToast } from './feedback/toast';
+export type { ToastData, ToastVariant } from './feedback/toast';
+
+export { Modal } from './feedback/modal';
+export type { ModalProps } from './feedback/modal';
+
+export { AlertBanner } from './feedback/alert-banner';
+export type { AlertBannerProps, AlertBannerVariant } from './feedback/alert-banner';
+
+export { SkeletonLoader } from './feedback/skeleton-loader';
+export type { SkeletonLoaderProps, SkeletonShape } from './feedback/skeleton-loader';
+
+// Patterns
+export { Accordion } from './patterns/accordion';
+export type { AccordionProps, AccordionItemProps, AccordionTriggerProps, AccordionContentProps } from './patterns/accordion';
+
+export { ActionMenu } from './patterns/action-menu';
+export type { ActionMenuProps, ActionMenuItem } from './patterns/action-menu';
+
+export { Pagination } from './patterns/pagination';
+export type { PaginationProps } from './patterns/pagination';
+
+export { NotificationDot } from './patterns/notification-dot';
+export type { NotificationDotProps } from './patterns/notification-dot';
+
+export { Carousel } from './patterns/carousel';
+export type { CarouselProps } from './patterns/carousel';
+
+export { ImagePlaceholder } from './patterns/image-placeholder';
+export type { ImagePlaceholderProps } from './patterns/image-placeholder';
+
+// Productivity
+export { TaskCard } from './productivity/task-card';
+export type { TaskCardProps } from './productivity/task-card';
+
+export { KanbanColumn, SortableTaskCard } from './productivity/kanban-column';
+export type { KanbanColumnProps, SortableTaskCardProps } from './productivity/kanban-column';
+
+export { KanbanBoard } from './productivity/kanban-board';
+export type { KanbanBoardProps } from './productivity/kanban-board';
+
+export { PrioritySelector } from './productivity/priority-selector';
+export type { PrioritySelectorProps, Priority } from './productivity/priority-selector';
+
+export { CommentThread } from './productivity/comment-thread';
+export type { CommentThreadProps, Comment } from './productivity/comment-thread';
+
+export { RichTextToolbar } from './productivity/rich-text-toolbar';
+export type { RichTextToolbarProps } from './productivity/rich-text-toolbar';
+
+// Hooks
+export { useReducedMotion } from './hooks/use-reduced-motion';
+export { useControllableState } from './hooks/use-controllable-state';
+export { useFocusTrap } from './hooks/use-focus-trap';
+
+// Utils
+export { cn } from './utils/cn';

package/src/layout/card/Card.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card } from './Card';
+import { Button } from '../../primitives/button';
+
+const meta: Meta<typeof Card> = {
+  title: 'Layout/Card',
+  component: Card,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  render: () => (
+    <Card className="max-w-md">
+      <Card.Header>
+        <h3 className="text-text-primary font-semibold" style={{ fontSize: 'var(--text-h3)' }}>
+          Project Settings
+        </h3>
+      </Card.Header>
+      <Card.Content>
+        <p className="text-text-secondary" style={{ fontSize: 'var(--text-body)' }}>
+          Configure your project settings and preferences. Changes will be saved automatically.
+        </p>
+      </Card.Content>
+      <Card.Actions>
+        <Button variant="ghost">Cancel</Button>
+        <Button>Save Changes</Button>
+      </Card.Actions>
+    </Card>
+  ),
+};
+
+export const Simple: Story = {
+  render: () => (
+    <Card className="max-w-sm">
+      <Card.Content>
+        <p className="text-text-primary" style={{ fontSize: 'var(--text-body)' }}>
+          A simple card with just content — no header or footer.
+        </p>
+      </Card.Content>
+    </Card>
+  ),
+};

package/src/layout/card/Card.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Card } from './Card';
+
+describe('Card', () => {
+  it('renders compound structure', () => {
+    render(
+      <Card>
+        <Card.Header>Header</Card.Header>
+        <Card.Content>Content</Card.Content>
+        <Card.Actions>Actions</Card.Actions>
+      </Card>,
+    );
+    expect(screen.getByText('Header')).toBeInTheDocument();
+    expect(screen.getByText('Content')).toBeInTheDocument();
+    expect(screen.getByText('Actions')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Card className="max-w-md">Content</Card>);
+    expect(container.firstChild).toHaveClass('max-w-md');
+  });
+});

package/src/layout/card/Card.tsx

@@ -0,0 +1,42 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { CardProps, CardHeaderProps, CardContentProps, CardActionsProps } from './Card.types';
+
+const CardRoot = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-lg bg-surface shadow-1 overflow-hidden',
+      'transition-all hover:shadow-2 hover:-translate-y-0.5',
+      className,
+    )}
+    style={{ transitionDuration: 'var(--duration-fast)', transitionTimingFunction: 'var(--ease-out)' }}
+    {...props}
+  />
+));
+CardRoot.displayName = 'Card';
+
+const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('px-6 py-4 border-b border-border', className)} {...props} />
+));
+CardHeader.displayName = 'Card.Header';
+
+const CardContent = forwardRef<HTMLDivElement, CardContentProps>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('px-6 py-4', className)} {...props} />
+));
+CardContent.displayName = 'Card.Content';
+
+const CardActions = forwardRef<HTMLDivElement, CardActionsProps>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('px-6 py-4 border-t border-border flex justify-end gap-3', className)}
+    {...props}
+  />
+));
+CardActions.displayName = 'Card.Actions';
+
+export const Card = Object.assign(CardRoot, {
+  Header: CardHeader,
+  Content: CardContent,
+  Actions: CardActions,
+});

package/src/layout/card/Card.types.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
+export interface CardProps extends ComponentPropsWithoutRef<'div'> {}
+export interface CardHeaderProps extends ComponentPropsWithoutRef<'div'> {}
+export interface CardContentProps extends ComponentPropsWithoutRef<'div'> {}
+export interface CardActionsProps extends ComponentPropsWithoutRef<'div'> {}

package/src/layout/card/index.ts

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardProps, CardHeaderProps, CardContentProps, CardActionsProps } from './Card.types';

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

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Home, Settings, Users, FileText, Plus } from 'lucide-react';
+import { CommandPalette } from './CommandPalette';
+import { Button } from '../../primitives/button';
+
+const meta: Meta<typeof CommandPalette> = {
+  title: 'Layout/CommandPalette',
+  component: CommandPalette,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof CommandPalette>;
+
+const items = [
+  { id: '1', label: 'Go to Dashboard', icon: <Home size={16} />, section: 'Navigation', onSelect: () => {} },
+  { id: '2', label: 'Go to Settings', icon: <Settings size={16} />, section: 'Navigation', onSelect: () => {} },
+  { id: '3', label: 'Go to Team', icon: <Users size={16} />, section: 'Navigation', onSelect: () => {} },
+  { id: '4', label: 'Create new task', icon: <Plus size={16} />, section: 'Actions', onSelect: () => {} },
+  { id: '5', label: 'Create new document', icon: <FileText size={16} />, section: 'Actions', onSelect: () => {} },
+];
+
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Command Palette (⌘K)</Button>
+        <CommandPalette open={open} onOpenChange={setOpen} items={items} />
+      </>
+    );
+  },
+};