@weave-design-system/react 0.1.0

package/src/primitives/textarea/TextareaGroup.tsx

@@ -0,0 +1,59 @@
+import { forwardRef, useId } from 'react';
+import { AlertCircle } from 'lucide-react';
+import { cn } from '../../utils/cn';
+import type { TextareaGroupProps } from './TextareaGroup.types';
+
+export const TextareaGroup = forwardRef<HTMLTextAreaElement, TextareaGroupProps>(
+  ({ label, helperText, error, className, disabled, id: idProp, ...props }, ref) => {
+    const autoId = useId();
+    const id = idProp ?? autoId;
+    const messageId = `${id}-message`;
+
+    return (
+      <div className={cn('flex flex-col gap-1.5', className)}>
+        <label
+          htmlFor={id}
+          className="text-text-primary font-medium"
+          style={{ fontSize: 'var(--text-body-sm)', lineHeight: 'var(--leading-body-sm)' }}
+        >
+          {label}
+        </label>
+        <textarea
+          ref={ref}
+          id={id}
+          disabled={disabled}
+          aria-invalid={!!error}
+          aria-describedby={error || helperText ? messageId : undefined}
+          className={cn(
+            'w-full rounded-md bg-white px-3 py-2 text-text-primary placeholder:text-text-secondary',
+            'border outline-none transition-all min-h-[80px] resize-y',
+            'focus:border-rust focus:ring-2 focus:ring-rust-light',
+            error ? 'border-error' : 'border-border',
+            disabled && 'bg-surface opacity-50 cursor-not-allowed',
+          )}
+          style={{
+            fontSize: 'var(--text-body)',
+            lineHeight: 'var(--leading-body)',
+            transitionDuration: 'var(--duration-fast)',
+          }}
+          {...props}
+        />
+        {(error || helperText) && (
+          <p
+            id={messageId}
+            className={cn(
+              'flex items-center gap-1',
+              error ? 'text-error' : 'text-text-secondary',
+            )}
+            style={{ fontSize: 'var(--text-body-sm)', lineHeight: 'var(--leading-body-sm)' }}
+          >
+            {error && <AlertCircle size={14} />}
+            {error || helperText}
+          </p>
+        )}
+      </div>
+    );
+  },
+);
+
+TextareaGroup.displayName = 'TextareaGroup';

package/src/primitives/textarea/TextareaGroup.types.ts

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
+export interface TextareaGroupProps extends ComponentPropsWithoutRef<'textarea'> {
+  /** Label text displayed above the textarea */
+  label: string;
+  /** Helper text displayed below the textarea */
+  helperText?: string;
+  /** Error message — sets the textarea to error state */
+  error?: string;
+}

package/src/primitives/textarea/index.ts

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

package/src/primitives/toggle/Toggle.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Toggle } from './Toggle';
+
+const meta: Meta<typeof Toggle> = {
+  title: 'Primitives/Toggle',
+  component: Toggle,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Toggle>;
+
+export const Off: Story = {
+  args: { label: 'Enable notifications' },
+};
+
+export const On: Story = {
+  args: { label: 'Enable notifications', defaultChecked: true },
+};
+
+export const Disabled: Story = {
+  args: { label: 'Locked setting', disabled: true },
+};
+
+export const DisabledOn: Story = {
+  args: { label: 'Locked setting', disabled: true, checked: true },
+};

package/src/primitives/toggle/Toggle.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Toggle } from './Toggle';
+
+describe('Toggle', () => {
+  it('renders with label', () => {
+    render(<Toggle label="Notifications" />);
+    expect(screen.getByRole('switch')).toBeInTheDocument();
+    expect(screen.getByText('Notifications')).toBeInTheDocument();
+  });
+
+  it('toggles on click', async () => {
+    const onChange = vi.fn();
+    render(<Toggle label="Notifications" onCheckedChange={onChange} />);
+    await userEvent.click(screen.getByRole('switch'));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it('does not toggle when disabled', async () => {
+    const onChange = vi.fn();
+    render(<Toggle label="Notifications" disabled onCheckedChange={onChange} />);
+    await userEvent.click(screen.getByRole('switch'));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('reflects controlled state', () => {
+    render(<Toggle label="Notifications" checked={true} />);
+    expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'true');
+  });
+});

package/src/primitives/toggle/Toggle.tsx

@@ -0,0 +1,65 @@
+import { useId } from 'react';
+import { cn } from '../../utils/cn';
+import { useControllableState } from '../../hooks/use-controllable-state';
+import type { ToggleProps } from './Toggle.types';
+
+export function Toggle({
+  label,
+  checked: controlledChecked,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled = false,
+  className,
+  'aria-label': ariaLabel,
+}: ToggleProps) {
+  const id = useId();
+  const [checked, setChecked] = useControllableState({
+    value: controlledChecked,
+    defaultValue: defaultChecked,
+    onChange: onCheckedChange,
+  });
+
+  return (
+    <label
+      htmlFor={id}
+      className={cn(
+        'inline-flex items-center gap-2.5 cursor-pointer select-none',
+        disabled && 'opacity-40 cursor-not-allowed',
+        className,
+      )}
+    >
+      <button
+        id={id}
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        aria-label={ariaLabel ?? label}
+        disabled={disabled}
+        onClick={() => setChecked(!checked)}
+        className={cn(
+          'relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors',
+          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rust',
+          checked ? 'bg-rust' : 'bg-border',
+        )}
+        style={{ transitionDuration: 'var(--duration-fast)' }}
+      >
+        <span
+          className={cn(
+            'inline-block h-5 w-5 rounded-full bg-white shadow-1 transition-transform',
+            checked ? 'translate-x-[22px]' : 'translate-x-[2px]',
+          )}
+          style={{
+            transitionDuration: 'var(--duration-fast)',
+            transitionTimingFunction: 'var(--ease-spring)',
+          }}
+        />
+      </button>
+      <span
+        className="text-text-primary"
+        style={{ fontSize: 'var(--text-body)', lineHeight: 'var(--leading-body)' }}
+      >
+        {label}
+      </span>
+    </label>
+  );
+}

package/src/primitives/toggle/Toggle.types.ts

@@ -0,0 +1,16 @@
+export interface ToggleProps {
+  /** Label text displayed next to the toggle */
+  label: string;
+  /** Controlled on/off state */
+  checked?: boolean;
+  /** Default state for uncontrolled usage */
+  defaultChecked?: boolean;
+  /** Change handler */
+  onCheckedChange?: (checked: boolean) => void;
+  /** Whether the toggle is disabled */
+  disabled?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Accessible name override */
+  'aria-label'?: string;
+}

package/src/primitives/toggle/index.ts

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

package/src/primitives/tooltip/Tooltip.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tooltip } from './Tooltip';
+import { Button } from '../button';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Primitives/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="flex items-center justify-center p-20">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Dark: Story = {
+  args: {
+    content: 'Create a new task',
+    children: <Button>Hover me</Button>,
+  },
+};
+
+export const Light: Story = {
+  args: {
+    content: 'Create a new task',
+    variant: 'light',
+    children: <Button variant="outline">Hover me</Button>,
+  },
+};
+
+export const Placements: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Tooltip content="Top" placement="top"><Button variant="outline">Top</Button></Tooltip>
+      <Tooltip content="Bottom" placement="bottom"><Button variant="outline">Bottom</Button></Tooltip>
+      <Tooltip content="Left" placement="left"><Button variant="outline">Left</Button></Tooltip>
+      <Tooltip content="Right" placement="right"><Button variant="outline">Right</Button></Tooltip>
+    </div>
+  ),
+};

package/src/primitives/tooltip/Tooltip.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect } from 'vitest';
+import { Tooltip } from './Tooltip';
+
+describe('Tooltip', () => {
+  it('shows tooltip on hover', async () => {
+    render(
+      <Tooltip content="Help text" delayMs={0}>
+        <button>Hover me</button>
+      </Tooltip>,
+    );
+    await userEvent.hover(screen.getByRole('button', { name: 'Hover me' }));
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('Help text');
+  });
+
+  it('hides tooltip on unhover', async () => {
+    render(
+      <Tooltip content="Help text" delayMs={0}>
+        <button>Hover me</button>
+      </Tooltip>,
+    );
+    await userEvent.hover(screen.getByRole('button'));
+    expect(await screen.findByRole('tooltip')).toBeInTheDocument();
+    await userEvent.unhover(screen.getByRole('button'));
+    // Tooltip should eventually be removed
+  });
+});

package/src/primitives/tooltip/Tooltip.tsx

@@ -0,0 +1,94 @@
+import { useState, cloneElement } from 'react';
+import {
+  useFloating,
+  useHover,
+  useFocus,
+  useDismiss,
+  useRole,
+  useInteractions,
+  offset,
+  flip,
+  shift,
+  arrow,
+  FloatingArrow,
+  FloatingPortal,
+  useTransitionStyles,
+} from '@floating-ui/react';
+import { useRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { TooltipProps } from './Tooltip.types';
+
+export function Tooltip({
+  content,
+  children,
+  variant = 'dark',
+  placement = 'top',
+  delayMs = 200,
+}: TooltipProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const arrowRef = useRef(null);
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement,
+    middleware: [
+      offset(8),
+      flip(),
+      shift({ padding: 8 }),
+      arrow({ element: arrowRef }),
+    ],
+  });
+
+  const hover = useHover(context, { delay: { open: delayMs, close: 0 } });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: 'tooltip' });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    hover,
+    focus,
+    dismiss,
+    role,
+  ]);
+
+  const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
+    duration: 150,
+  });
+
+  return (
+    <>
+      {cloneElement(children, {
+        ref: refs.setReference,
+        ...getReferenceProps(),
+      })}
+      {isMounted && (
+        <FloatingPortal>
+          <div
+            ref={refs.setFloating}
+            style={{ ...floatingStyles, ...transitionStyles }}
+            className={cn(
+              'z-50 rounded-md px-3 py-1.5 max-w-xs',
+              variant === 'dark' && 'bg-text-primary text-white',
+              variant === 'light' && 'bg-white text-text-primary shadow-2 border border-border',
+            )}
+            {...getFloatingProps()}
+          >
+            <span style={{ fontSize: 'var(--text-body-sm)', lineHeight: 'var(--leading-body-sm)' }}>
+              {content}
+            </span>
+            <FloatingArrow
+              ref={arrowRef}
+              context={context}
+              fill={variant === 'dark' ? 'var(--color-text-primary)' : '#fff'}
+              strokeWidth={variant === 'light' ? 1 : 0}
+              stroke={variant === 'light' ? 'var(--color-border)' : undefined}
+              width={12}
+              height={6}
+            />
+          </div>
+        </FloatingPortal>
+      )}
+    </>
+  );
+}

package/src/primitives/tooltip/Tooltip.types.ts

@@ -0,0 +1,16 @@
+import type { Placement } from '@floating-ui/react';
+
+export type TooltipVariant = 'dark' | 'light';
+
+export interface TooltipProps {
+  /** Tooltip content */
+  content: React.ReactNode;
+  /** The trigger element */
+  children: React.ReactElement;
+  /** Visual variant */
+  variant?: TooltipVariant;
+  /** Placement relative to trigger */
+  placement?: Placement;
+  /** Delay before showing (ms) */
+  delayMs?: number;
+}

package/src/primitives/tooltip/index.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip';
+export type { TooltipProps, TooltipVariant } from './Tooltip.types';

package/src/productivity/comment-thread/CommentThread.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CommentThread } from './CommentThread';
+
+const meta: Meta<typeof CommentThread> = { title: 'Productivity/CommentThread', component: CommentThread, tags: ['autodocs'] };
+export default meta;
+type Story = StoryObj<typeof CommentThread>;
+
+export const Default: Story = {
+  args: {
+    comments: [
+      {
+        id: '1', author: { name: 'Alice' }, content: 'The landing page design looks great! Just a few tweaks needed on the CTA.', timestamp: '2 hours ago',
+        replies: [
+          { id: '2', author: { name: 'Bob' }, content: "Thanks! I'll update the CTA button color.", timestamp: '1 hour ago' },
+        ],
+      },
+      { id: '3', author: { name: 'Charlie' }, content: 'Should we also update the mobile layout?', timestamp: '30 min ago' },
+    ],
+  },
+};

package/src/productivity/comment-thread/CommentThread.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { CommentThread } from './CommentThread';
+
+describe('CommentThread', () => {
+  it('renders comments', () => {
+    render(<CommentThread comments={[{ id: '1', author: { name: 'Alice' }, content: 'Hello', timestamp: '1h ago' }]} />);
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+  });
+  it('renders replies', () => {
+    render(
+      <CommentThread comments={[{
+        id: '1', author: { name: 'Alice' }, content: 'Hello', timestamp: '1h ago',
+        replies: [{ id: '2', author: { name: 'Bob' }, content: 'Hi!', timestamp: '30m ago' }],
+      }]} />,
+    );
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+    expect(screen.getByText('Hi!')).toBeInTheDocument();
+  });
+});

package/src/productivity/comment-thread/CommentThread.tsx

@@ -0,0 +1,47 @@
+import { cn } from '../../utils/cn';
+import { Avatar } from '../../primitives/avatar';
+
+export interface Comment {
+  id: string;
+  author: { name: string; avatarSrc?: string };
+  content: string;
+  timestamp: string;
+  replies?: Comment[];
+}
+
+export interface CommentThreadProps {
+  comments: Comment[];
+  className?: string;
+}
+
+function CommentItem({ comment, depth = 0 }: { comment: Comment; depth?: number }) {
+  return (
+    <div className={cn('flex gap-3', depth > 0 && 'ml-10')}>
+      <Avatar name={comment.author.name} src={comment.author.avatarSrc} size="sm" />
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="text-text-primary font-medium" style={{ fontSize: 'var(--text-body-sm)' }}>{comment.author.name}</span>
+          <span className="text-text-secondary" style={{ fontSize: 'var(--text-caption)' }}>{comment.timestamp}</span>
+        </div>
+        <p className="text-text-primary mt-1" style={{ fontSize: 'var(--text-body-sm)', lineHeight: 'var(--leading-body-sm)' }}>
+          {comment.content}
+        </p>
+        {comment.replies?.map((reply) => (
+          <div key={reply.id} className="mt-3">
+            <CommentItem comment={reply} depth={depth + 1} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function CommentThread({ comments, className }: CommentThreadProps) {
+  return (
+    <div className={cn('flex flex-col gap-4', className)}>
+      {comments.map((comment) => (
+        <CommentItem key={comment.id} comment={comment} />
+      ))}
+    </div>
+  );
+}

package/src/productivity/comment-thread/index.ts

@@ -0,0 +1,2 @@
+export { CommentThread } from './CommentThread';
+export type { CommentThreadProps, Comment } from './CommentThread';

package/src/productivity/kanban-board/KanbanBoard.tsx

@@ -0,0 +1,41 @@
+import {
+  DndContext,
+  closestCorners,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragOverEvent,
+} from '@dnd-kit/core';
+import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { cn } from '../../utils/cn';
+
+export interface KanbanBoardProps {
+  /** Called when an item is dropped */
+  onDragEnd?: (event: DragEndEvent) => void;
+  /** Called when dragging over a new container */
+  onDragOver?: (event: DragOverEvent) => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function KanbanBoard({ onDragEnd, onDragOver, children, className }: KanbanBoardProps) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCorners}
+      onDragEnd={onDragEnd}
+      onDragOver={onDragOver}
+    >
+      <div className={cn('flex gap-4 overflow-x-auto p-4', className)}>
+        {children}
+      </div>
+    </DndContext>
+  );
+}

package/src/productivity/kanban-board/index.ts

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