@boostdev/design-system-components 0.1.1

package/src/components/interaction/form/Combobox/Combobox.tsx

@@ -0,0 +1,182 @@
+import {
+  ChangeEvent,
+  KeyboardEvent,
+  ReactNode,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react';
+import css from './Combobox.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+import { InputContainer } from '../atoms/InputContainer';
+import { Label } from '../atoms/Label';
+import { Message } from '../atoms/Message';
+
+interface ComboboxOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface ComboboxProps {
+  label: ReactNode;
+  name: string;
+  options: ComboboxOption[];
+  placeholder?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  error?: string;
+  hint?: string;
+  className?: string;
+}
+
+export function Combobox({
+  label,
+  name,
+  options,
+  placeholder,
+  value,
+  onChange,
+  error,
+  hint,
+  className,
+}: Readonly<ComboboxProps>) {
+  const id = name + useId();
+  const listboxId = id + 'listbox';
+  const hintId = id + 'hint';
+  const errorId = id + 'error';
+  const describedBy = error ? errorId : hintId;
+
+  const selectedOption = options.find(o => o.value === value);
+  const [inputValue, setInputValue] = useState(selectedOption?.label ?? '');
+  const [isOpen, setIsOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const filtered = options.filter(o =>
+    o.label.toLowerCase().includes(inputValue.toLowerCase())
+  );
+
+  const getOptionId = (index: number) => `${id}-option-${index}`;
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handlePointerDown = (e: PointerEvent) => {
+      if (!containerRef.current?.contains(e.target as Node)) setIsOpen(false);
+    };
+    document.addEventListener('pointerdown', handlePointerDown);
+    return () => document.removeEventListener('pointerdown', handlePointerDown);
+  }, [isOpen]);
+
+  const selectOption = (option: ComboboxOption) => {
+    setInputValue(option.label);
+    setIsOpen(false);
+    setHighlightedIndex(-1);
+    onChange?.(option.value);
+  };
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+    setIsOpen(true);
+    setHighlightedIndex(-1);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    const enabledIndexes = filtered
+      .map((opt, i) => ({ opt, i }))
+      .filter(({ opt }) => !opt.disabled)
+      .map(({ i }) => i);
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (!isOpen) { setIsOpen(true); return; }
+      const pos = enabledIndexes.indexOf(highlightedIndex);
+      setHighlightedIndex(enabledIndexes[(pos + 1) % enabledIndexes.length] ?? 0);
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      const pos = enabledIndexes.indexOf(highlightedIndex);
+      setHighlightedIndex(
+        enabledIndexes[(pos - 1 + enabledIndexes.length) % enabledIndexes.length] ?? 0
+      );
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      if (highlightedIndex >= 0 && filtered[highlightedIndex]) {
+        selectOption(filtered[highlightedIndex]);
+      }
+    } else if (e.key === 'Escape') {
+      setIsOpen(false);
+      setHighlightedIndex(-1);
+    } else if (e.key === 'Tab') {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <InputContainer className={cn(css.formGroup, className)}>
+      <Label id={id} label={label} />
+      <div ref={containerRef} className={css.inputWrapper}>
+        <input
+          ref={inputRef}
+          id={id}
+          name={name}
+          type="text"
+          role="combobox"
+          aria-expanded={isOpen}
+          aria-haspopup="listbox"
+          aria-autocomplete="list"
+          aria-controls={listboxId}
+          aria-activedescendant={highlightedIndex >= 0 ? getOptionId(highlightedIndex) : undefined}
+          aria-invalid={!!error}
+          aria-describedby={describedBy}
+          autoComplete="off"
+          placeholder={placeholder}
+          value={inputValue}
+          className={cn(css.input, error ? css.inputError : undefined)}
+          onChange={handleInputChange}
+          onKeyDown={handleKeyDown}
+          onFocus={() => setIsOpen(true)}
+        />
+        <span className={css.chevron} aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6 9l6 6 6-6" />
+          </svg>
+        </span>
+        {isOpen && filtered.length > 0 && (
+          <ul
+            id={listboxId}
+            role="listbox"
+            aria-label={String(label)}
+            className={css.listbox}
+          >
+            {filtered.map((option, index) => (
+              <li
+                key={option.value}
+                id={getOptionId(index)}
+                role="option"
+                aria-selected={option.value === value}
+                aria-disabled={option.disabled}
+                className={cn(
+                  css.option,
+                  index === highlightedIndex ? css['--highlighted'] : undefined,
+                  option.value === value ? css['--selected'] : undefined,
+                  option.disabled ? css['--disabled'] : undefined,
+                )}
+                onPointerDown={e => {
+                  e.preventDefault();
+                  if (!option.disabled) selectOption(option);
+                }}
+              >
+                {option.label}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+      <Message inputId={id} type="error" message={error} />
+      <Message inputId={id} type="hint" message={hint} />
+    </InputContainer>
+  );
+}

package/src/components/interaction/form/Combobox/index.ts

@@ -0,0 +1 @@
+export { Combobox } from './Combobox';

package/src/components/interaction/form/FileInput/FileInput.module.css

@@ -0,0 +1,79 @@
+@layer component {
+  .formGroup {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .dropZone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space_xs);
+    padding: var(--space_l) var(--space_m);
+    border: 2px dashed var(--color_on-bg);
+    border-radius: var(--border_radius--s);
+    cursor: pointer;
+    text-align: center;
+    transition: var(--animation_transition);
+    color: var(--color_on-bg--muted);
+  }
+
+  .dropZone:focus-within {
+    outline: var(--outline_default);
+    outline-offset: var(--outline_offset);
+    border-color: var(--color_interactive);
+  }
+
+  .isDragging {
+    border-color: var(--color_interactive);
+    background-color: rgb(from var(--color_interactive) r g b / 8%);
+  }
+
+  .hasError {
+    border-color: var(--color_error);
+  }
+
+  .isDisabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .icon {
+    width: 2rem;
+    height: 2rem;
+    flex-shrink: 0;
+  }
+
+  .prompt {
+    font-size: var(--font_size--body);
+    color: var(--color_on-bg--muted);
+  }
+
+  .prompt strong {
+    color: var(--color_interactive);
+    font-weight: var(--font_weight--semibold);
+  }
+
+  .acceptHint {
+    font-size: var(--font_size--body--s);
+    color: var(--color_on-bg--muted);
+  }
+
+  .hiddenInput {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .dropZone:not(.isDisabled):hover {
+      border-color: var(--color_interactive);
+      background-color: rgb(from var(--color_interactive) r g b / 4%);
+    }
+  }
+}

package/src/components/interaction/form/FileInput/FileInput.spec.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { FileInput } from './FileInput';
+
+describe('FileInput', () => {
+  it('renders with label', () => {
+    render(<FileInput label="Upload file" name="file" />);
+    expect(screen.getByText('Upload file')).toBeInTheDocument();
+  });
+
+  it('renders upload prompt text', () => {
+    render(<FileInput label="Upload" name="file" />);
+    expect(screen.getByText('Click to upload')).toBeInTheDocument();
+  });
+
+  it('renders file input element', () => {
+    render(<FileInput label="Upload" name="file" />);
+    // The hidden input is there
+    const input = document.querySelector('input[type="file"]');
+    expect(input).toBeInTheDocument();
+  });
+
+  it('accepts multiple files when multiple is true', () => {
+    render(<FileInput label="Upload" name="file" multiple />);
+    const input = document.querySelector('input[type="file"]');
+    expect(input).toHaveAttribute('multiple');
+  });
+
+  it('shows error message', () => {
+    render(<FileInput label="Upload" name="file" error="File required" />);
+    expect(screen.getByText('File required')).toBeInTheDocument();
+  });
+
+  it('shows hint message', () => {
+    render(<FileInput label="Upload" name="file" hint="Max 5MB" />);
+    expect(screen.getByText('Max 5MB')).toBeInTheDocument();
+  });
+
+  it('marks input as invalid when error present', () => {
+    render(<FileInput label="Upload" name="file" error="Required" />);
+    const input = document.querySelector('input[type="file"]');
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('calls onChange when file is selected', async () => {
+    const onChange = vi.fn();
+    render(<FileInput label="Upload" name="file" onChange={onChange} />);
+    const file = new File(['hello'], 'hello.txt', { type: 'text/plain' });
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+    await userEvent.upload(input, file);
+    expect(onChange).toHaveBeenCalledOnce();
+  });
+});

package/src/components/interaction/form/FileInput/FileInput.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FileInput } from './FileInput';
+
+const meta = {
+  title: 'Form/FileInput',
+  component: FileInput,
+  tags: ['autodocs'],
+} satisfies Meta<typeof FileInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { label: 'Upload file', name: 'file' } };
+export const WithAccept: Story = { args: { label: 'Upload image', name: 'image', accept: 'image/png, image/jpeg', hint: 'PNG or JPG only' } };
+export const Multiple: Story = { args: { label: 'Upload documents', name: 'docs', multiple: true, hint: 'You can select multiple files' } };
+export const WithError: Story = { args: { label: 'Upload', name: 'file', error: 'Please upload a valid file' } };
+export const Disabled: Story = { args: { label: 'Upload', name: 'file', disabled: true } };

package/src/components/interaction/form/FileInput/FileInput.tsx

@@ -0,0 +1,99 @@
+import { useId, useRef, useState, DragEvent, ChangeEvent } from 'react';
+import css from './FileInput.module.css';
+import { Label } from '../atoms/Label';
+import { Message } from '../atoms/Message';
+import { InputContainer } from '../atoms/InputContainer';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface FileInputProps {
+  label: string;
+  name: string;
+  accept?: string;
+  multiple?: boolean;
+  disabled?: boolean;
+  error?: string;
+  hint?: string;
+  onChange?: (files: FileList | null) => void;
+  className?: string;
+}
+
+export function FileInput({
+  label,
+  name,
+  accept,
+  multiple = false,
+  disabled = false,
+  error,
+  hint,
+  onChange,
+  className,
+}: Readonly<FileInputProps>) {
+  const uid = name + useId();
+  const hintId = uid + 'hint';
+  const errorId = uid + 'error';
+  const describedBy = error ? errorId : hintId;
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [fileNames, setFileNames] = useState<string[]>([]);
+
+  const handleFiles = (files: FileList | null) => {
+    if (!files) return;
+    setFileNames(Array.from(files).map(f => f.name));
+    onChange?.(files);
+  };
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => handleFiles(e.target.files);
+
+  const handleDrop = (e: DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (disabled) return;
+    handleFiles(e.dataTransfer.files);
+  };
+
+  const handleDragOver = (e: DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+    if (!disabled) setIsDragging(true);
+  };
+
+  const handleDragLeave = () => setIsDragging(false);
+
+  return (
+    <InputContainer className={cn(css.formGroup, className)}>
+      <Label id={uid} label={label} />
+      <label
+        htmlFor={uid}
+        className={cn(css.dropZone, isDragging && css.isDragging, error && css.hasError, disabled && css.isDisabled)}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+      >
+        <svg aria-hidden="true" className={css.icon} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+        </svg>
+        <span className={css.prompt}>
+          {fileNames.length > 0
+            ? fileNames.join(', ')
+            : <><strong>Click to upload</strong> or drag and drop</>
+          }
+        </span>
+        {accept && <span className={css.acceptHint}>{accept}</span>}
+        <input
+          ref={inputRef}
+          id={uid}
+          type="file"
+          name={name}
+          accept={accept}
+          multiple={multiple}
+          disabled={disabled}
+          aria-invalid={!!error}
+          aria-describedby={describedBy}
+          className={css.hiddenInput}
+          onChange={handleChange}
+        />
+      </label>
+      <Message inputId={uid} type="error" message={error} />
+      <Message inputId={uid} type="hint" message={hint} />
+    </InputContainer>
+  );
+}

package/src/components/interaction/form/FileInput/index.ts

@@ -0,0 +1 @@
+export { FileInput } from './FileInput';

package/src/components/interaction/form/FormInput/FormInput.module.css

@@ -0,0 +1,37 @@
+@layer component {
+  .formGroup {
+    --labelPosition: 0; /* Used for positioning */
+
+    display: flex;
+    flex-direction: column;
+  }
+
+  .input {
+    /* Component tokens — override from a parent context or inline style */
+    --input_border-color: var(--color_on-bg);
+    --input_radius:       var(--border_radius--xs);
+    --input_focus-ring:   0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
+
+    font-family: var(--font_family--body);
+    font-size: var(--font_size--body);
+    padding: var(--space_s);
+    border: 1px solid var(--input_border-color);
+    border-radius: var(--input_radius);
+    transition: var(--animation_transition)
+  }
+
+  .input:focus {
+    --input_border-color: var(--color_interactive);
+
+    outline: none;
+    box-shadow: var(--input_focus-ring);
+  }
+
+  .inputError {
+    --input_border-color: var(--color_error);
+  }
+
+  .inputError:focus {
+    --input_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
+  }
+}

package/src/components/interaction/form/FormInput/FormInput.spec.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { FormInput } from './FormInput';
+
+describe('FormInput', () => {
+  it('renders the label', () => {
+    render(<FormInput label="Email" name="email" />);
+    expect(screen.getByLabelText('Email')).toBeInTheDocument();
+  });
+
+  it('renders the input', () => {
+    render(<FormInput label="Name" name="name" />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('shows an error message when error prop is set', () => {
+    render(<FormInput label="Email" name="email" error="Invalid email" />);
+    expect(screen.getByText('Invalid email')).toBeInTheDocument();
+  });
+
+  it('marks input as aria-invalid when error is set', () => {
+    render(<FormInput label="Email" name="email" error="Required" />);
+    expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('shows a hint message when hint prop is set', () => {
+    render(<FormInput label="Username" name="username" hint="Min 3 chars" />);
+    expect(screen.getByText('Min 3 chars')).toBeInTheDocument();
+  });
+
+  it('accepts typed input', async () => {
+    const user = userEvent.setup();
+    render(<FormInput label="Name" name="name" />);
+    const input = screen.getByRole('textbox');
+    await user.type(input, 'hello');
+    expect(input).toHaveValue('hello');
+  });
+
+  it('is disabled when disabled prop is set', () => {
+    render(<FormInput label="Name" name="name" disabled />);
+    expect(screen.getByRole('textbox')).toBeDisabled();
+  });
+});

package/src/components/interaction/form/FormInput/FormInput.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FormInput } from './FormInput';
+
+const meta = {
+  title: 'Form/FormInput',
+  component: FormInput,
+  tags: ['autodocs'],
+} satisfies Meta<typeof FormInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { label: 'Email', name: 'email', placeholder: 'you@example.com' } };
+export const WithError: Story = { args: { label: 'Email', name: 'email', error: 'Invalid email address', value: 'bad', onChange: () => {} } };
+export const WithHint: Story = { args: { label: 'Username', name: 'username', hint: 'At least 3 characters', placeholder: 'Enter username' } };
+export const Disabled: Story = { args: { label: 'Disabled', name: 'disabled', disabled: true, value: 'Read only value', onChange: () => {} } };
+export const Required: Story = { args: { label: 'Required Field', name: 'required', required: true, placeholder: 'Required' } };

package/src/components/interaction/form/FormInput/FormInput.tsx

@@ -0,0 +1,47 @@
+import { InputHTMLAttributes, useId, ReactNode } from 'react';
+import css from './FormInput.module.css';
+import { Label } from '../atoms/Label';
+import { Message } from '../atoms/Message';
+import { cn } from '@boostdev/design-system-foundation';
+import { InputContainer } from '../atoms/InputContainer';
+
+interface FormInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label: ReactNode;
+  name: string;
+  ariaLabel?: string;
+  error?: string;
+  hint?: string;
+  className?: string;
+}
+
+export function FormInput({
+  label,
+  name,
+  ariaLabel,
+  error,
+  hint,
+  className,
+  ...props
+}: FormInputProps) {
+  const id = name + useId();
+  const hintId = id + 'hint';
+  const errorId = id + 'error';
+  const describedBy = !!error ? errorId : hintId;
+
+  return (
+    <InputContainer className={cn(css.formGroup, className)}>
+      <Label id={id} label={label} />
+      <input
+        aria-invalid={!!error}
+        aria-describedby={describedBy}
+        aria-label={ariaLabel}
+        id={id}
+        name={name}
+        className={`${css.input} ${error ? css.inputError : ''}`}
+        {...props}
+      />
+      <Message inputId={id} type="error" message={error} />
+      <Message inputId={id} type="hint" message={hint} />
+    </InputContainer>
+  );
+}

package/src/components/interaction/form/FormInput/index.ts

@@ -0,0 +1 @@
+export { FormInput } from './FormInput';

package/src/components/interaction/form/NumberInput/NumberInput.module.css

@@ -0,0 +1,78 @@
+@layer component {
+  .formGroup {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .inputRow {
+    display: flex;
+    align-items: stretch;
+    border: 1px solid var(--color_on-bg);
+    border-radius: var(--border_radius--xs);
+    overflow: hidden;
+    transition: var(--animation_transition);
+  }
+
+  .inputRow:focus-within {
+    border-color: var(--color_interactive);
+    box-shadow: 0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
+  }
+
+  .input {
+    flex: 1;
+    border: none;
+    outline: none;
+    font-family: var(--font_family--body);
+    font-size: var(--font_size--body);
+    text-align: center;
+    padding: var(--space_s);
+    background: transparent;
+    color: var(--color_on-bg);
+    min-width: 0;
+    appearance: textfield;
+  }
+
+  .input::-webkit-inner-spin-button,
+  .input::-webkit-outer-spin-button {
+    appearance: none;
+  }
+
+  .inputError {
+    border-color: var(--color_error);
+  }
+
+  .inputError:focus-within {
+    border-color: var(--color_error);
+    box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
+  }
+
+  .stepper {
+    all: unset;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space_xs);
+    background-color: var(--color_bg--subtle);
+    color: var(--color_on-bg);
+    cursor: pointer;
+    transition: var(--animation_transition);
+    flex-shrink: 0;
+  }
+
+  .stepper svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .stepper:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .stepper:not(:disabled):hover {
+      background-color: var(--color_bg--subtle);
+      opacity: 0.7;
+    }
+  }
+}