@weave-design-system/react 0.1.0

package/src/primitives/combobox/Combobox.tsx

@@ -0,0 +1,201 @@
+import { useState, useId, useRef, useCallback } from 'react';
+import {
+  useFloating,
+  useClick,
+  useDismiss,
+  useRole,
+  useInteractions,
+  useListNavigation,
+  offset,
+  flip,
+  size as floatingSize,
+  FloatingPortal,
+  FloatingFocusManager,
+} from '@floating-ui/react';
+import { Check, ChevronDown, AlertCircle } from 'lucide-react';
+import { cn } from '../../utils/cn';
+import { useControllableState } from '../../hooks/use-controllable-state';
+import type { ComboboxProps } from './Combobox.types';
+
+export function Combobox({
+  label,
+  options,
+  value: controlledValue,
+  defaultValue = '',
+  onChange,
+  placeholder = 'Select...',
+  error,
+  disabled = false,
+  className,
+}: ComboboxProps) {
+  const id = useId();
+  const messageId = `${id}-message`;
+  const [value, setValue] = useControllableState({
+    value: controlledValue,
+    defaultValue,
+    onChange,
+  });
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const listRef = useRef<(HTMLElement | null)[]>([]);
+
+  const filtered = query
+    ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
+    : options;
+
+  const selectedLabel = options.find((o) => o.value === value)?.label ?? '';
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: 'bottom-start',
+    middleware: [
+      offset(4),
+      flip(),
+      floatingSize({
+        apply({ rects, elements }) {
+          Object.assign(elements.floating.style, { width: `${rects.reference.width}px` });
+        },
+      }),
+    ],
+  });
+
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: 'listbox' });
+  const listNav = useListNavigation(context, {
+    listRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+    virtual: true,
+    loop: true,
+  });
+
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+    click,
+    dismiss,
+    role,
+    listNav,
+  ]);
+
+  const handleSelect = useCallback(
+    (optionValue: string) => {
+      setValue(optionValue);
+      setIsOpen(false);
+      setQuery('');
+    },
+    [setValue],
+  );
+
+  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>
+      <div className="relative" ref={refs.setReference}>
+        <input
+          id={id}
+          type="text"
+          role="combobox"
+          aria-expanded={isOpen}
+          aria-autocomplete="list"
+          aria-invalid={!!error}
+          aria-describedby={error ? messageId : undefined}
+          disabled={disabled}
+          placeholder={isOpen ? 'Type to filter...' : (selectedLabel || placeholder)}
+          value={isOpen ? query : selectedLabel}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            if (!isOpen) setIsOpen(true);
+          }}
+          onFocus={() => {
+            if (!isOpen) setIsOpen(true);
+            setQuery('');
+          }}
+          className={cn(
+            'w-full rounded-md bg-white px-3 py-2 pr-10 text-text-primary placeholder:text-text-secondary',
+            'border outline-none transition-all',
+            '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)',
+          }}
+          {...getReferenceProps()}
+        />
+        <ChevronDown
+          size={16}
+          className={cn(
+            'pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-text-secondary transition-transform',
+            isOpen && 'rotate-180',
+          )}
+          style={{ transitionDuration: 'var(--duration-fast)' }}
+        />
+      </div>
+      {isOpen && (
+        <FloatingPortal>
+          <FloatingFocusManager context={context} initialFocus={-1} visuallyHiddenDismiss>
+            <div
+              ref={refs.setFloating}
+              style={floatingStyles}
+              className="z-50 rounded-md border border-border bg-white shadow-2 py-1 max-h-60 overflow-y-auto"
+              {...getFloatingProps()}
+            >
+              {filtered.length === 0 ? (
+                <div
+                  className="px-3 py-2 text-text-secondary"
+                  style={{ fontSize: 'var(--text-body-sm)' }}
+                >
+                  No results found
+                </div>
+              ) : (
+                filtered.map((option, i) => (
+                  <div
+                    key={option.value}
+                    ref={(node) => { listRef.current[i] = node; }}
+                    role="option"
+                    aria-selected={value === option.value}
+                    tabIndex={activeIndex === i ? 0 : -1}
+                    className={cn(
+                      'flex items-center justify-between px-3 py-2 cursor-pointer transition-colors',
+                      activeIndex === i && 'bg-surface',
+                      value === option.value && 'text-rust font-medium',
+                    )}
+                    style={{
+                      fontSize: 'var(--text-body)',
+                      transitionDuration: 'var(--duration-micro)',
+                    }}
+                    {...getItemProps({
+                      onClick: () => handleSelect(option.value),
+                    })}
+                  >
+                    {option.label}
+                    {value === option.value && <Check size={16} className="text-rust" />}
+                  </div>
+                ))
+              )}
+            </div>
+          </FloatingFocusManager>
+        </FloatingPortal>
+      )}
+      {error && (
+        <p
+          id={messageId}
+          className="flex items-center gap-1 text-error"
+          style={{ fontSize: 'var(--text-body-sm)', lineHeight: 'var(--leading-body-sm)' }}
+        >
+          <AlertCircle size={14} />
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/primitives/combobox/Combobox.types.ts

@@ -0,0 +1,25 @@
+export interface ComboboxOption {
+  value: string;
+  label: string;
+}
+
+export interface ComboboxProps {
+  /** Label text */
+  label: string;
+  /** Available options */
+  options: ComboboxOption[];
+  /** Controlled selected value */
+  value?: string;
+  /** Default selected value */
+  defaultValue?: string;
+  /** Change handler */
+  onChange?: (value: string) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Error message */
+  error?: string;
+  /** Whether the combobox is disabled */
+  disabled?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}

package/src/primitives/combobox/index.ts

@@ -0,0 +1,2 @@
+export { Combobox } from './Combobox';
+export type { ComboboxProps, ComboboxOption } from './Combobox.types';

package/src/primitives/date-input/DateInput.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DateInput } from './DateInput';
+
+const meta: Meta<typeof DateInput> = {
+  title: 'Primitives/DateInput',
+  component: DateInput,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof DateInput>;
+
+export const Default: Story = {
+  args: { label: 'Due Date' },
+};
+
+export const WithError: Story = {
+  args: { label: 'Start Date', error: 'Start date must be in the future' },
+};
+
+export const Disabled: Story = {
+  args: { label: 'Created', value: '2026-03-01', disabled: true },
+};

package/src/primitives/date-input/DateInput.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { DateInput } from './DateInput';
+
+describe('DateInput', () => {
+  it('renders label and date input', () => {
+    render(<DateInput label="Due Date" />);
+    expect(screen.getByLabelText('Due Date')).toHaveAttribute('type', 'date');
+  });
+
+  it('shows error state', () => {
+    render(<DateInput label="Due Date" error="Required" />);
+    expect(screen.getByText('Required')).toBeInTheDocument();
+    expect(screen.getByLabelText('Due Date')).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('forwards ref', () => {
+    const ref = vi.fn();
+    render(<DateInput label="Due Date" ref={ref} />);
+    expect(ref).toHaveBeenCalledWith(expect.any(HTMLInputElement));
+  });
+});

package/src/primitives/date-input/DateInput.tsx

@@ -0,0 +1,66 @@
+import { forwardRef, useId } from 'react';
+import { Calendar, AlertCircle } from 'lucide-react';
+import { cn } from '../../utils/cn';
+import type { DateInputProps } from './DateInput.types';
+
+export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
+  ({ 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>
+        <div className="relative">
+          <input
+            ref={ref}
+            id={id}
+            type="date"
+            disabled={disabled}
+            aria-invalid={!!error}
+            aria-describedby={error || helperText ? messageId : undefined}
+            className={cn(
+              'w-full rounded-md bg-white px-3 py-2 pr-10 text-text-primary',
+              'border outline-none transition-all',
+              '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}
+          />
+          <Calendar
+            size={16}
+            className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-text-secondary"
+          />
+        </div>
+        {(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>
+    );
+  },
+);
+
+DateInput.displayName = 'DateInput';

package/src/primitives/date-input/DateInput.types.ts

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
+export interface DateInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'size'> {
+  /** Label text displayed above the input */
+  label: string;
+  /** Helper text displayed below the input */
+  helperText?: string;
+  /** Error message */
+  error?: string;
+}

package/src/primitives/date-input/index.ts

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

package/src/primitives/file-upload/FileUploadDropzone.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FileUploadDropzone } from './FileUploadDropzone';
+
+const meta: Meta<typeof FileUploadDropzone> = {
+  title: 'Primitives/FileUploadDropzone',
+  component: FileUploadDropzone,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof FileUploadDropzone>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const ImagesOnly: Story = {
+  args: {
+    accept: 'image/*',
+    description: 'Drag & drop images here, or click to browse',
+    multiple: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};

package/src/primitives/file-upload/FileUploadDropzone.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { FileUploadDropzone } from './FileUploadDropzone';
+
+describe('FileUploadDropzone', () => {
+  it('renders upload area', () => {
+    render(<FileUploadDropzone />);
+    expect(screen.getByRole('button', { name: 'Upload files' })).toBeInTheDocument();
+    expect(screen.getByText('Browse files')).toBeInTheDocument();
+  });
+
+  it('renders custom description', () => {
+    render(<FileUploadDropzone description="Upload images" />);
+    expect(screen.getByText('Upload images')).toBeInTheDocument();
+  });
+
+  it('calls onFiles when files selected via input', async () => {
+    const onFiles = vi.fn();
+    render(<FileUploadDropzone onFiles={onFiles} />);
+    const file = new File(['hello'], 'test.txt', { type: 'text/plain' });
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+    await userEvent.upload(input, file);
+    expect(onFiles).toHaveBeenCalledWith([file]);
+  });
+});

package/src/primitives/file-upload/FileUploadDropzone.tsx

@@ -0,0 +1,99 @@
+import { useState, useRef, useCallback } from 'react';
+import { UploadCloud } from 'lucide-react';
+import { cn } from '../../utils/cn';
+import type { FileUploadDropzoneProps } from './FileUploadDropzone.types';
+
+export function FileUploadDropzone({
+  onFiles,
+  accept,
+  multiple = false,
+  disabled = false,
+  description = 'Drag & drop files here, or click to browse',
+  className,
+}: FileUploadDropzoneProps) {
+  const [isDragOver, setIsDragOver] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleFiles = useCallback(
+    (fileList: FileList | null) => {
+      if (!fileList || disabled) return;
+      onFiles?.(Array.from(fileList));
+    },
+    [onFiles, disabled],
+  );
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      handleFiles(e.dataTransfer.files);
+    },
+    [handleFiles],
+  );
+
+  return (
+    <div
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      aria-label="Upload files"
+      onClick={() => !disabled && inputRef.current?.click()}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          if (!disabled) inputRef.current?.click();
+        }
+      }}
+      onDragOver={(e) => {
+        e.preventDefault();
+        if (!disabled) setIsDragOver(true);
+      }}
+      onDragLeave={() => setIsDragOver(false)}
+      onDrop={handleDrop}
+      className={cn(
+        'flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed p-8 transition-colors cursor-pointer',
+        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rust',
+        isDragOver ? 'border-rust bg-rust-light/30' : 'border-border bg-surface/50',
+        disabled && 'opacity-50 cursor-not-allowed',
+        className,
+      )}
+      style={{ transitionDuration: 'var(--duration-fast)' }}
+    >
+      <UploadCloud size={32} className={cn('text-text-secondary', isDragOver && 'text-rust')} />
+      <p
+        className="text-text-secondary text-center"
+        style={{ fontSize: 'var(--text-body-sm)', lineHeight: 'var(--leading-body-sm)' }}
+      >
+        {description}
+      </p>
+      <button
+        type="button"
+        tabIndex={-1}
+        disabled={disabled}
+        className={cn(
+          'rounded-md bg-white border border-border px-3 py-1.5 text-text-primary font-medium transition-colors',
+          'hover:bg-surface',
+        )}
+        style={{
+          fontSize: 'var(--text-body-sm)',
+          transitionDuration: 'var(--duration-fast)',
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+          inputRef.current?.click();
+        }}
+      >
+        Browse files
+      </button>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        disabled={disabled}
+        className="sr-only"
+        onChange={(e) => handleFiles(e.target.files)}
+        tabIndex={-1}
+      />
+    </div>
+  );
+}

package/src/primitives/file-upload/FileUploadDropzone.types.ts

@@ -0,0 +1,14 @@
+export interface FileUploadDropzoneProps {
+  /** Called when files are dropped or selected */
+  onFiles?: (files: File[]) => void;
+  /** Accepted file types (e.g., "image/*,.pdf") */
+  accept?: string;
+  /** Allow multiple files */
+  multiple?: boolean;
+  /** Whether the dropzone is disabled */
+  disabled?: boolean;
+  /** Description text */
+  description?: string;
+  /** Additional CSS classes */
+  className?: string;
+}

package/src/primitives/file-upload/index.ts

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

package/src/primitives/input/InputGroup.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { InputGroup } from './InputGroup';
+
+const meta: Meta<typeof InputGroup> = {
+  title: 'Primitives/InputGroup',
+  component: InputGroup,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof InputGroup>;
+
+export const Default: Story = {
+  args: { label: 'Email', placeholder: 'you@example.com' },
+};
+
+export const WithHelperText: Story = {
+  args: { label: 'Password', type: 'password', helperText: 'Must be at least 8 characters' },
+};
+
+export const ErrorState: Story = {
+  args: { label: 'Email', value: 'invalid', error: 'Please enter a valid email address' },
+};
+
+export const SuccessState: Story = {
+  args: { label: 'Username', value: 'weaveuser', success: 'Username is available' },
+};
+
+export const Disabled: Story = {
+  args: { label: 'Email', value: 'locked@example.com', disabled: true },
+};

package/src/primitives/input/InputGroup.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { InputGroup } from './InputGroup';
+
+describe('InputGroup', () => {
+  it('renders label and input', () => {
+    render(<InputGroup label="Email" />);
+    expect(screen.getByLabelText('Email')).toBeInTheDocument();
+  });
+
+  it('shows helper text', () => {
+    render(<InputGroup label="Name" helperText="Enter your full name" />);
+    expect(screen.getByText('Enter your full name')).toBeInTheDocument();
+  });
+
+  it('shows error state', () => {
+    render(<InputGroup label="Email" error="Invalid email" />);
+    expect(screen.getByText('Invalid email')).toBeInTheDocument();
+    expect(screen.getByLabelText('Email')).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('shows success state', () => {
+    render(<InputGroup label="Username" success="Available" />);
+    expect(screen.getByText('Available')).toBeInTheDocument();
+  });
+
+  it('handles user input', async () => {
+    const onChange = vi.fn();
+    render(<InputGroup label="Email" onChange={onChange} />);
+    await userEvent.type(screen.getByLabelText('Email'), 'test');
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('forwards ref', () => {
+    const ref = vi.fn();
+    render(<InputGroup label="Email" ref={ref} />);
+    expect(ref).toHaveBeenCalledWith(expect.any(HTMLInputElement));
+  });
+});

package/src/primitives/input/InputGroup.tsx

@@ -0,0 +1,65 @@
+import { forwardRef, useId } from 'react';
+import { AlertCircle, CheckCircle2 } from 'lucide-react';
+import { cn } from '../../utils/cn';
+import type { InputGroupProps } from './InputGroup.types';
+
+export const InputGroup = forwardRef<HTMLInputElement, InputGroupProps>(
+  ({ label, helperText, error, success, className, disabled, id: idProp, ...props }, ref) => {
+    const autoId = useId();
+    const id = idProp ?? autoId;
+    const messageId = `${id}-message`;
+    const state = error ? 'error' : success ? 'success' : 'default';
+
+    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>
+        <input
+          ref={ref}
+          id={id}
+          disabled={disabled}
+          aria-invalid={state === 'error'}
+          aria-describedby={error || success || 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',
+            'focus:border-rust focus:ring-2 focus:ring-rust-light',
+            state === 'default' && 'border-border',
+            state === 'error' && 'border-error',
+            state === 'success' && 'border-success',
+            disabled && 'bg-surface opacity-50 cursor-not-allowed',
+          )}
+          style={{
+            fontSize: 'var(--text-body)',
+            lineHeight: 'var(--leading-body)',
+            transitionDuration: 'var(--duration-fast)',
+          }}
+          {...props}
+        />
+        {(error || success || helperText) && (
+          <p
+            id={messageId}
+            className={cn(
+              'flex items-center gap-1',
+              state === 'error' && 'text-error',
+              state === 'success' && 'text-success',
+              state === 'default' && 'text-text-secondary',
+            )}
+            style={{ fontSize: 'var(--text-body-sm)', lineHeight: 'var(--leading-body-sm)' }}
+          >
+            {state === 'error' && <AlertCircle size={14} />}
+            {state === 'success' && <CheckCircle2 size={14} />}
+            {error || success || helperText}
+          </p>
+        )}
+      </div>
+    );
+  },
+);
+
+InputGroup.displayName = 'InputGroup';