@weave-design-system/react 0.1.0

package/src/patterns/carousel/Carousel.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Carousel } from './Carousel';
+
+const meta: Meta<typeof Carousel> = { title: 'Patterns/Carousel', component: Carousel, tags: ['autodocs'] };
+export default meta;
+type Story = StoryObj<typeof Carousel>;
+
+export const Default: Story = {
+  render: () => (
+    <Carousel className="max-w-md">
+      <div className="h-48 bg-rust-light rounded-lg flex items-center justify-center text-rust-dark font-semibold" style={{ fontSize: 'var(--text-h2)' }}>Slide 1</div>
+      <div className="h-48 bg-forest-light rounded-lg flex items-center justify-center text-forest font-semibold" style={{ fontSize: 'var(--text-h2)' }}>Slide 2</div>
+      <div className="h-48 bg-saffron-light rounded-lg flex items-center justify-center text-saffron font-semibold" style={{ fontSize: 'var(--text-h2)' }}>Slide 3</div>
+    </Carousel>
+  ),
+};

package/src/patterns/carousel/Carousel.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect } from 'vitest';
+import { Carousel } from './Carousel';
+
+describe('Carousel', () => {
+  it('renders first slide', () => {
+    render(<Carousel><div>Slide 1</div><div>Slide 2</div></Carousel>);
+    expect(screen.getByText('Slide 1')).toBeInTheDocument();
+  });
+  it('navigates to next slide', async () => {
+    render(<Carousel><div>Slide 1</div><div>Slide 2</div></Carousel>);
+    await userEvent.click(screen.getByRole('button', { name: 'Next slide' }));
+    expect(screen.getByText('Slide 2')).toBeInTheDocument();
+  });
+});

package/src/patterns/carousel/Carousel.tsx

@@ -0,0 +1,69 @@
+import { useState, Children } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '../../utils/cn';
+
+export interface CarouselProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Carousel({ children, className }: CarouselProps) {
+  const slides = Children.toArray(children);
+  const [index, setIndex] = useState(0);
+
+  const prev = () => setIndex((i) => (i > 0 ? i - 1 : slides.length - 1));
+  const next = () => setIndex((i) => (i < slides.length - 1 ? i + 1 : 0));
+
+  return (
+    <div className={cn('relative overflow-hidden rounded-lg', className)}>
+      {/* Slide track — translateX to the active slide */}
+      <div
+        className="flex transition-transform"
+        style={{
+          transform: `translateX(-${index * 100}%)`,
+          transitionDuration: 'var(--duration-normal)',
+          transitionTimingFunction: 'var(--ease-out)',
+        }}
+      >
+        {slides.map((slide, i) => (
+          <div key={i} className="w-full shrink-0">
+            {slide}
+          </div>
+        ))}
+      </div>
+      <button
+        type="button"
+        onClick={prev}
+        className="absolute left-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-white/80 shadow-1 flex items-center justify-center text-text-primary hover:bg-white transition-colors"
+        aria-label="Previous slide"
+        style={{ transitionDuration: 'var(--duration-micro)' }}
+      >
+        <ChevronLeft size={16} />
+      </button>
+      <button
+        type="button"
+        onClick={next}
+        className="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-white/80 shadow-1 flex items-center justify-center text-text-primary hover:bg-white transition-colors"
+        aria-label="Next slide"
+        style={{ transitionDuration: 'var(--duration-micro)' }}
+      >
+        <ChevronRight size={16} />
+      </button>
+      <div className="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5">
+        {slides.map((_, i) => (
+          <button
+            key={i}
+            type="button"
+            onClick={() => setIndex(i)}
+            className={cn(
+              'rounded-full transition-all',
+              i === index ? 'bg-rust w-4 h-2' : 'bg-white/60 w-2 h-2',
+            )}
+            aria-label={`Go to slide ${i + 1}`}
+            style={{ transitionDuration: 'var(--duration-fast)' }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/patterns/carousel/index.ts

@@ -0,0 +1,2 @@
+export { Carousel } from './Carousel';
+export type { CarouselProps } from './Carousel';

package/src/patterns/image-placeholder/ImagePlaceholder.stories.tsx

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ImagePlaceholder } from './ImagePlaceholder';
+
+const meta: Meta<typeof ImagePlaceholder> = { title: 'Patterns/ImagePlaceholder', component: ImagePlaceholder, tags: ['autodocs'] };
+export default meta;
+type Story = StoryObj<typeof ImagePlaceholder>;
+
+export const Default: Story = { args: {} };
+export const Custom: Story = { args: { width: 300, height: 150, label: 'Upload an image' } };

package/src/patterns/image-placeholder/ImagePlaceholder.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { ImagePlaceholder } from './ImagePlaceholder';
+
+describe('ImagePlaceholder', () => {
+  it('renders label', () => {
+    render(<ImagePlaceholder />);
+    expect(screen.getByText('No image')).toBeInTheDocument();
+  });
+});

package/src/patterns/image-placeholder/ImagePlaceholder.tsx

@@ -0,0 +1,21 @@
+import { ImageIcon } from 'lucide-react';
+import { cn } from '../../utils/cn';
+
+export interface ImagePlaceholderProps {
+  width?: string | number;
+  height?: string | number;
+  label?: string;
+  className?: string;
+}
+
+export function ImagePlaceholder({ width = '100%', height = 200, label = 'No image', className }: ImagePlaceholderProps) {
+  return (
+    <div
+      className={cn('flex flex-col items-center justify-center gap-2 rounded-lg bg-surface text-text-secondary', className)}
+      style={{ width, height }}
+    >
+      <ImageIcon size={24} />
+      <span style={{ fontSize: 'var(--text-body-sm)' }}>{label}</span>
+    </div>
+  );
+}

package/src/patterns/image-placeholder/index.ts

@@ -0,0 +1,2 @@
+export { ImagePlaceholder } from './ImagePlaceholder';
+export type { ImagePlaceholderProps } from './ImagePlaceholder';

package/src/patterns/notification-dot/NotificationDot.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Bell } from 'lucide-react';
+import { NotificationDot } from './NotificationDot';
+
+const meta: Meta<typeof NotificationDot> = { title: 'Patterns/NotificationDot', component: NotificationDot, tags: ['autodocs'] };
+export default meta;
+type Story = StoryObj<typeof NotificationDot>;
+
+export const Default: Story = {
+  render: () => (
+    <NotificationDot>
+      <button className="p-2 rounded-md text-text-secondary hover:bg-surface">
+        <Bell size={20} />
+      </button>
+    </NotificationDot>
+  ),
+};

package/src/patterns/notification-dot/NotificationDot.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { NotificationDot } from './NotificationDot';
+
+describe('NotificationDot', () => {
+  it('renders dot when show is true', () => {
+    const { container } = render(<NotificationDot><span>Bell</span></NotificationDot>);
+    expect(container.querySelector('.bg-error')).toBeInTheDocument();
+  });
+  it('hides dot when show is false', () => {
+    const { container } = render(<NotificationDot show={false}><span>Bell</span></NotificationDot>);
+    expect(container.querySelector('.bg-error')).not.toBeInTheDocument();
+  });
+});

package/src/patterns/notification-dot/NotificationDot.tsx

@@ -0,0 +1,18 @@
+import { cn } from '../../utils/cn';
+
+export interface NotificationDotProps {
+  children: React.ReactNode;
+  show?: boolean;
+  className?: string;
+}
+
+export function NotificationDot({ children, show = true, className }: NotificationDotProps) {
+  return (
+    <div className={cn('relative inline-flex', className)}>
+      {children}
+      {show && (
+        <span className="absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full bg-error ring-2 ring-white" />
+      )}
+    </div>
+  );
+}

package/src/patterns/notification-dot/index.ts

@@ -0,0 +1,2 @@
+export { NotificationDot } from './NotificationDot';
+export type { NotificationDotProps } from './NotificationDot';

package/src/patterns/pagination/Pagination.stories.tsx

@@ -0,0 +1,14 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Pagination } from './Pagination';
+
+const meta: Meta<typeof Pagination> = { title: 'Patterns/Pagination', component: Pagination, tags: ['autodocs'] };
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+
+export const Default: Story = {
+  render: () => {
+    const [page, setPage] = useState(1);
+    return <Pagination currentPage={page} totalPages={10} onPageChange={setPage} />;
+  },
+};

package/src/patterns/pagination/Pagination.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Pagination } from './Pagination';
+
+describe('Pagination', () => {
+  it('renders page numbers', () => {
+    render(<Pagination currentPage={1} totalPages={5} onPageChange={() => {}} />);
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+  });
+  it('calls onPageChange', async () => {
+    const onChange = vi.fn();
+    render(<Pagination currentPage={1} totalPages={5} onPageChange={onChange} />);
+    await userEvent.click(screen.getByText('3'));
+    expect(onChange).toHaveBeenCalledWith(3);
+  });
+  it('marks current page', () => {
+    render(<Pagination currentPage={2} totalPages={5} onPageChange={() => {}} />);
+    expect(screen.getByText('2')).toHaveAttribute('aria-current', 'page');
+  });
+});

package/src/patterns/pagination/Pagination.tsx

@@ -0,0 +1,67 @@
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '../../utils/cn';
+
+export interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  className?: string;
+}
+
+function getPageNumbers(current: number, total: number): (number | '...')[] {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const pages: (number | '...')[] = [1];
+  if (current > 3) pages.push('...');
+  for (let i = Math.max(2, current - 1); i <= Math.min(total - 1, current + 1); i++) pages.push(i);
+  if (current < total - 2) pages.push('...');
+  pages.push(total);
+  return pages;
+}
+
+export function Pagination({ currentPage, totalPages, onPageChange, className }: PaginationProps) {
+  const pages = getPageNumbers(currentPage, totalPages);
+
+  return (
+    <nav aria-label="Pagination" className={cn('flex items-center gap-1', className)}>
+      <button
+        type="button"
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage <= 1}
+        className="p-2 rounded-md text-text-secondary hover:bg-surface disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+        aria-label="Previous page"
+        style={{ transitionDuration: 'var(--duration-micro)' }}
+      >
+        <ChevronLeft size={16} />
+      </button>
+      {pages.map((page, i) =>
+        page === '...' ? (
+          <span key={`ellipsis-${i}`} className="px-2 text-text-secondary" style={{ fontSize: 'var(--text-body-sm)' }}>...</span>
+        ) : (
+          <button
+            key={page}
+            type="button"
+            onClick={() => onPageChange(page)}
+            aria-current={page === currentPage ? 'page' : undefined}
+            className={cn(
+              'min-w-[36px] h-9 rounded-md font-medium transition-colors',
+              page === currentPage ? 'bg-rust text-white' : 'text-text-primary hover:bg-surface',
+            )}
+            style={{ fontSize: 'var(--text-body-sm)', transitionDuration: 'var(--duration-micro)' }}
+          >
+            {page}
+          </button>
+        ),
+      )}
+      <button
+        type="button"
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage >= totalPages}
+        className="p-2 rounded-md text-text-secondary hover:bg-surface disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+        aria-label="Next page"
+        style={{ transitionDuration: 'var(--duration-micro)' }}
+      >
+        <ChevronRight size={16} />
+      </button>
+    </nav>
+  );
+}

package/src/patterns/pagination/index.ts

@@ -0,0 +1,2 @@
+export { Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination';

package/src/primitives/avatar/Avatar.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from './Avatar';
+import { AvatarGroup } from './AvatarGroup';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Primitives/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Avatar name="Jane Doe" size="sm" />
+      <Avatar name="Jane Doe" size="md" />
+      <Avatar name="Jane Doe" size="lg" />
+      <Avatar name="Jane Doe" size="xl" />
+    </div>
+  ),
+};
+
+export const WithImage: Story = {
+  args: {
+    name: 'Jane Doe',
+    src: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop',
+  },
+};
+
+export const InitialsFallback: Story = {
+  args: { name: 'Hank Morrison' },
+};
+
+export const Group: Story = {
+  render: () => (
+    <AvatarGroup max={3}>
+      <Avatar name="Alice" />
+      <Avatar name="Bob" />
+      <Avatar name="Charlie" />
+      <Avatar name="Diana" />
+      <Avatar name="Eve" />
+    </AvatarGroup>
+  ),
+};

package/src/primitives/avatar/Avatar.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Avatar } from './Avatar';
+import { AvatarGroup } from './AvatarGroup';
+
+describe('Avatar', () => {
+  it('renders initials from name', () => {
+    render(<Avatar name="Jane Doe" />);
+    expect(screen.getByText('JD')).toBeInTheDocument();
+  });
+
+  it('has accessible label', () => {
+    render(<Avatar name="Jane Doe" />);
+    expect(screen.getByRole('img', { name: 'Jane Doe' })).toBeInTheDocument();
+  });
+
+  it('renders image when src provided', () => {
+    render(<Avatar name="Jane" src="https://example.com/avatar.jpg" />);
+    expect(screen.getByAltText('Jane')).toBeInTheDocument();
+  });
+});
+
+describe('AvatarGroup', () => {
+  it('shows overflow count', () => {
+    render(
+      <AvatarGroup max={2}>
+        <Avatar name="A" />
+        <Avatar name="B" />
+        <Avatar name="C" />
+        <Avatar name="D" />
+      </AvatarGroup>,
+    );
+    expect(screen.getByText('+2')).toBeInTheDocument();
+  });
+});

package/src/primitives/avatar/Avatar.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { cn } from '../../utils/cn';
+import type { AvatarProps } from './Avatar.types';
+
+const sizeMap: Record<string, { px: number; textStyle: React.CSSProperties }> = {
+  sm: { px: 28, textStyle: { fontSize: 'var(--text-caption)', lineHeight: 'var(--leading-caption)' } },
+  md: { px: 40, textStyle: { fontSize: 'var(--text-body-sm)', lineHeight: 'var(--leading-body-sm)' } },
+  lg: { px: 56, textStyle: { fontSize: 'var(--text-body-lg)', lineHeight: 'var(--leading-body-lg)' } },
+  xl: { px: 80, textStyle: { fontSize: 'var(--text-h2)', lineHeight: 'var(--leading-h2)' } },
+};
+
+function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .map((part) => part[0])
+    .filter(Boolean)
+    .slice(0, 2)
+    .join('')
+    .toUpperCase();
+}
+
+export function Avatar({ name, src, size = 'md', className }: AvatarProps) {
+  const [imgError, setImgError] = useState(false);
+  const { px, textStyle } = sizeMap[size];
+  const showImage = src && !imgError;
+
+  return (
+    <div
+      className={cn(
+        'relative inline-flex shrink-0 items-center justify-center rounded-full bg-rust-light text-rust-dark font-semibold overflow-hidden',
+        className,
+      )}
+      style={{ width: px, height: px }}
+      role="img"
+      aria-label={name}
+    >
+      {showImage ? (
+        <img
+          src={src}
+          alt={name}
+          className="h-full w-full object-cover"
+          onError={() => setImgError(true)}
+        />
+      ) : (
+        <span style={textStyle}>{getInitials(name)}</span>
+      )}
+    </div>
+  );
+}

package/src/primitives/avatar/Avatar.types.ts

@@ -0,0 +1,21 @@
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export interface AvatarProps {
+  /** Full name — used for initials fallback and alt text */
+  name: string;
+  /** Image URL */
+  src?: string;
+  /** Size variant */
+  size?: AvatarSize;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export interface AvatarGroupProps {
+  /** Avatar elements */
+  children: React.ReactNode;
+  /** Maximum number to display before +N overflow */
+  max?: number;
+  /** Additional CSS classes */
+  className?: string;
+}

package/src/primitives/avatar/AvatarGroup.tsx

@@ -0,0 +1,27 @@
+import { Children } from 'react';
+import { cn } from '../../utils/cn';
+import type { AvatarGroupProps } from './Avatar.types';
+
+export function AvatarGroup({ children, max, className }: AvatarGroupProps) {
+  const childArray = Children.toArray(children);
+  const visible = max ? childArray.slice(0, max) : childArray;
+  const overflow = max ? childArray.length - max : 0;
+
+  return (
+    <div className={cn('flex -space-x-2', className)}>
+      {visible.map((child, i) => (
+        <div key={i} className="relative ring-2 ring-bg rounded-full">
+          {child}
+        </div>
+      ))}
+      {overflow > 0 && (
+        <div
+          className="relative inline-flex shrink-0 items-center justify-center rounded-full bg-surface text-text-secondary font-semibold ring-2 ring-bg"
+          style={{ width: 40, height: 40, fontSize: 'var(--text-body-sm)' }}
+        >
+          +{overflow}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/primitives/avatar/index.ts

@@ -0,0 +1,3 @@
+export { Avatar } from './Avatar';
+export { AvatarGroup } from './AvatarGroup';
+export type { AvatarProps, AvatarGroupProps, AvatarSize } from './Avatar.types';

package/src/primitives/badge/Badge.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from './Badge';
+
+const meta: Meta<typeof Badge> = {
+  title: 'Primitives/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge variant="primary">Design</Badge>
+      <Badge variant="secondary">Engineering</Badge>
+      <Badge variant="success">Completed</Badge>
+      <Badge variant="warning">In Review</Badge>
+      <Badge variant="error">Urgent</Badge>
+      <Badge variant="info">Info</Badge>
+    </div>
+  ),
+};
+
+export const Removable: Story = {
+  args: { children: 'Removable Tag', removable: true, onRemove: () => {} },
+};

package/src/primitives/badge/Badge.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Badge } from './Badge';
+
+describe('Badge', () => {
+  it('renders children', () => {
+    render(<Badge>Design</Badge>);
+    expect(screen.getByText('Design')).toBeInTheDocument();
+  });
+
+  it('renders remove button when removable', () => {
+    render(<Badge removable>Tag</Badge>);
+    expect(screen.getByRole('button', { name: 'Remove' })).toBeInTheDocument();
+  });
+
+  it('calls onRemove', async () => {
+    const onRemove = vi.fn();
+    render(<Badge removable onRemove={onRemove}>Tag</Badge>);
+    await userEvent.click(screen.getByRole('button', { name: 'Remove' }));
+    expect(onRemove).toHaveBeenCalledOnce();
+  });
+});

package/src/primitives/badge/Badge.tsx

@@ -0,0 +1,44 @@
+import { X } from 'lucide-react';
+import { cn } from '../../utils/cn';
+import type { BadgeProps } from './Badge.types';
+
+const variantStyles: Record<string, string> = {
+  primary: 'bg-rust-light text-rust-dark',
+  secondary: 'bg-forest-light text-forest',
+  success: 'bg-success-light text-success',
+  warning: 'bg-warning-light text-warning',
+  error: 'bg-error-light text-error',
+  info: 'bg-info-light text-info',
+};
+
+export function Badge({
+  children,
+  variant = 'primary',
+  removable = false,
+  onRemove,
+  className,
+}: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-1 rounded-sm px-2 py-0.5 font-medium',
+        variantStyles[variant],
+        className,
+      )}
+      style={{ fontSize: 'var(--text-caption)', lineHeight: 'var(--leading-caption)' }}
+    >
+      {children}
+      {removable && (
+        <button
+          type="button"
+          onClick={onRemove}
+          aria-label="Remove"
+          className="ml-0.5 rounded-sm hover:bg-black/10 transition-colors p-0.5 -mr-0.5"
+          style={{ transitionDuration: 'var(--duration-micro)' }}
+        >
+          <X size={12} />
+        </button>
+      )}
+    </span>
+  );
+}

package/src/primitives/badge/Badge.types.ts

@@ -0,0 +1,14 @@
+export type BadgeVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+
+export interface BadgeProps {
+  /** Badge content */
+  children: React.ReactNode;
+  /** Visual variant */
+  variant?: BadgeVariant;
+  /** Show a remove button */
+  removable?: boolean;
+  /** Called when the remove button is clicked */
+  onRemove?: () => void;
+  /** Additional CSS classes */
+  className?: string;
+}

package/src/primitives/badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeVariant } from './Badge.types';