@boostdev/design-system-components 0.1.1

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

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { NumberInput } from './NumberInput';
+
+describe('NumberInput', () => {
+  it('renders a number input with label', () => {
+    render(<NumberInput label="Quantity" name="qty" />);
+    expect(screen.getByRole('spinbutton', { name: 'Quantity' })).toBeInTheDocument();
+  });
+
+  it('renders with defaultValue', () => {
+    render(<NumberInput label="Quantity" name="qty" defaultValue={5} />);
+    expect(screen.getByRole('spinbutton')).toHaveValue(5);
+  });
+
+  it('renders increase and decrease buttons', () => {
+    render(<NumberInput label="Quantity" name="qty" />);
+    expect(screen.getByRole('button', { name: 'Increase' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Decrease' })).toBeInTheDocument();
+  });
+
+  it('shows error message', () => {
+    render(<NumberInput label="Qty" name="qty" error="Value required" />);
+    expect(screen.getByText('Value required')).toBeInTheDocument();
+  });
+
+  it('shows hint message', () => {
+    render(<NumberInput label="Qty" name="qty" hint="Enter a number" />);
+    expect(screen.getByText('Enter a number')).toBeInTheDocument();
+  });
+
+  it('marks input as invalid when error present', () => {
+    render(<NumberInput label="Qty" name="qty" error="Required" />);
+    expect(screen.getByRole('spinbutton')).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('calls onChange when value changes', async () => {
+    const onChange = vi.fn();
+    render(<NumberInput label="Qty" name="qty" defaultValue={0} onChange={onChange} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Increase' }));
+    expect(onChange).toHaveBeenCalledWith(1);
+  });
+
+  it('disables both buttons when disabled', () => {
+    render(<NumberInput label="Qty" name="qty" disabled />);
+    expect(screen.getByRole('button', { name: 'Increase' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Decrease' })).toBeDisabled();
+  });
+});

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { NumberInput } from './NumberInput';
+
+const meta = {
+  title: 'Form/NumberInput',
+  component: NumberInput,
+  tags: ['autodocs'],
+} satisfies Meta<typeof NumberInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { label: 'Quantity', name: 'qty', defaultValue: 1 } };
+export const WithRange: Story = { args: { label: 'Rating', name: 'rating', min: 1, max: 10, defaultValue: 5 } };
+export const WithStep: Story = { args: { label: 'Price', name: 'price', min: 0, max: 100, step: 5, defaultValue: 0, hint: 'Increments of 5' } };
+export const WithError: Story = { args: { label: 'Count', name: 'count', defaultValue: 0, error: 'Must be at least 1' } };
+export const Disabled: Story = { args: { label: 'Quantity', name: 'qty', defaultValue: 3, disabled: true } };

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

@@ -0,0 +1,106 @@
+import { useId, useRef } from 'react';
+import css from './NumberInput.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 NumberInputProps {
+  label: string;
+  name: string;
+  value?: number;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  error?: string;
+  hint?: string;
+  onChange?: (value: number) => void;
+  className?: string;
+}
+
+export function NumberInput({
+  label,
+  name,
+  value,
+  defaultValue,
+  min,
+  max,
+  step = 1,
+  disabled = false,
+  error,
+  hint,
+  onChange,
+  className,
+}: Readonly<NumberInputProps>) {
+  const uid = name + useId();
+  const hintId = uid + 'hint';
+  const errorId = uid + 'error';
+  const describedBy = error ? errorId : hintId;
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const clamp = (v: number): number => {
+    const withMin = min !== undefined ? Math.max(min, v) : v;
+    const withMax = max !== undefined ? Math.min(max, withMin) : withMin;
+    return withMax;
+  };
+
+  const adjust = (delta: number) => {
+    if (!inputRef.current) return;
+    const current = parseFloat(inputRef.current.value) || 0;
+    const next = clamp(current + delta);
+    inputRef.current.value = String(next);
+    onChange?.(next);
+  };
+
+  return (
+    <InputContainer className={cn(css.formGroup, className)}>
+      <Label id={uid} label={label} />
+      <div className={css.inputRow}>
+        <button
+          type="button"
+          className={css.stepper}
+          aria-label="Decrease"
+          disabled={disabled || (min !== undefined && (value ?? defaultValue ?? 0) <= min)}
+          onClick={() => adjust(-step)}
+          tabIndex={-1}
+        >
+          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M5 12h14" />
+          </svg>
+        </button>
+        <input
+          ref={inputRef}
+          id={uid}
+          type="number"
+          name={name}
+          defaultValue={defaultValue}
+          value={value}
+          min={min}
+          max={max}
+          step={step}
+          disabled={disabled}
+          aria-invalid={!!error}
+          aria-describedby={describedBy}
+          className={cn(css.input, error ? css.inputError : undefined)}
+          onChange={e => onChange?.(parseFloat(e.target.value))}
+        />
+        <button
+          type="button"
+          className={css.stepper}
+          aria-label="Increase"
+          disabled={disabled || (max !== undefined && (value ?? defaultValue ?? 0) >= max)}
+          onClick={() => adjust(step)}
+          tabIndex={-1}
+        >
+          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 5v14M5 12h14" />
+          </svg>
+        </button>
+      </div>
+      <Message inputId={uid} type="error" message={error} />
+      <Message inputId={uid} type="hint" message={hint} />
+    </InputContainer>
+  );
+}

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

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

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

@@ -0,0 +1,62 @@
+@layer component {
+  .radioGroup {
+    --inputSize:     calc(var(--space_s) * 2);
+    --labelPosition: calc(var(--inputSize) + var(--space_m));
+
+    display: flex;
+    flex-direction: column;
+  }
+
+  .inputWrapper {
+    display: flex;
+    align-items: stretch;
+    gap: var(--space_xs);
+  }
+
+  .radio {
+    flex-shrink: 0;
+    margin-block-start: 0.25em;
+    width: var(--inputSize);
+    height: var(--inputSize);
+    border: 1px solid var(--color_border);
+    border-radius: 50%;
+    appearance: none;
+    background-color: var(--color_bg);
+    cursor: pointer;
+    position: relative;
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+  }
+
+  .radio:checked {
+    background-color: var(--color_green);
+    border-color: var(--color_green);
+    box-shadow: 0 0 0 2px var(--color_green);
+  }
+
+  .radio:checked::after {
+    content: '';
+    position: absolute;
+    left: 0.6em;
+    top: 0.25em;
+    width: 0.5em;
+    height: 1em;
+    border: solid var(--color_on-green);
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+
+  .radio:focus {
+    outline: none;
+    border-color: var(--color_interactive);
+    box-shadow: 0 0 0 2px var(--color_green);
+  }
+
+  .radioError {
+    border-color: var(--color_error);
+  }
+
+  .radioError:focus {
+    border-color: var(--color_error);
+    box-shadow: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
+  }
+}

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

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Radio } from './Radio';
+
+describe('Radio', () => {
+  it('renders with a label', () => {
+    render(<Radio label="Option A" name="choice" value="a" />);
+    expect(screen.getByLabelText('Option A')).toBeInTheDocument();
+  });
+
+  it('renders a radio input', () => {
+    render(<Radio label="Option" name="opt" value="x" />);
+    expect(screen.getByRole('radio')).toBeInTheDocument();
+  });
+
+  it('can be selected', async () => {
+    const user = userEvent.setup();
+    render(<Radio label="Option" name="opt" value="x" />);
+    const radio = screen.getByRole('radio');
+    await user.click(radio);
+    expect(radio).toBeChecked();
+  });
+
+  it('shows an error message', () => {
+    render(<Radio label="Option" name="opt" value="x" error="Required" />);
+    expect(screen.getByText('Required')).toBeInTheDocument();
+  });
+
+  it('shows a hint message', () => {
+    render(<Radio label="Option" name="opt" value="x" hint="Choose carefully" />);
+    expect(screen.getByText('Choose carefully')).toBeInTheDocument();
+  });
+
+  it('is disabled when disabled prop is set', () => {
+    render(<Radio label="Disabled" name="disabled" value="x" disabled />);
+    expect(screen.getByRole('radio')).toBeDisabled();
+  });
+});

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

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Radio } from './Radio';
+
+const meta = {
+  title: 'Form/Radio',
+  component: Radio,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Radio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { label: 'Option A', name: 'choice', value: 'a' } };
+export const Selected: Story = { args: { label: 'Selected', name: 'choice2', value: 'b', defaultChecked: true } };
+export const WithError: Story = { args: { label: 'Required', name: 'choice3', value: 'c', error: 'Please select an option' } };
+export const WithHint: Story = { args: { label: 'Option', name: 'choice4', value: 'd', hint: 'Choose carefully' } };
+export const Group: Story = {
+  render: () => (
+    <fieldset>
+      <legend>Pick one</legend>
+      <Radio label="Option A" name="group" value="a" />
+      <Radio label="Option B" name="group" value="b" />
+      <Radio label="Option C" name="group" value="c" />
+    </fieldset>
+  ),
+};

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

@@ -0,0 +1,39 @@
+import { InputHTMLAttributes, useId } from 'react';
+import css from './Radio.module.css';
+import { Message } from '../atoms/Message';
+import { Label } from '../atoms/Label';
+import { InputContainer } from '../atoms/InputContainer';
+import { cn } from '@boostdev/design-system-foundation';
+
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label: string;
+  name: string;
+  error?: string;
+  hint?: string;
+  className?: string;
+}
+
+export function Radio({ label, name, error, hint, className, ...props }: RadioProps) {
+  const id = name + useId();
+  const hintId = id + 'hint';
+  const errorId = id + 'error';
+  const describedBy = !!error ? errorId : hintId;
+
+  return (
+    <InputContainer className={cn(css.radioGroup, className)}>
+      <div className={css.inputWrapper}>
+        <input
+          aria-describedby={describedBy}
+          type="radio"
+          id={id}
+          name={name}
+          className={`${css.radio} ${error ? css.radioError : ''}`}
+          {...props}
+        />
+        <Label id={id} label={label} />
+      </div>
+      <Message inputId={id} type="error" message={error} />
+      <Message inputId={id} type="hint" message={hint} />
+    </InputContainer>
+  );
+}

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

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

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

@@ -0,0 +1,64 @@
+@layer component {
+  .formGroup {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .selectWrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .select {
+    --select_border-color: var(--color_on-bg);
+    --select_focus-ring:   0 0 0 2px rgb(from var(--color_interactive) r g b / 20%);
+
+    appearance: none;
+    width: 100%;
+    font-family: var(--font_family--body);
+    font-size: var(--font_size--body);
+    padding: var(--space_s);
+    padding-inline-end: var(--space_xxl);
+    border: 1px solid var(--select_border-color);
+    border-radius: var(--border_radius--xs);
+    background-color: var(--color_bg);
+    color: var(--color_on-bg);
+    cursor: pointer;
+    transition: var(--animation_transition);
+  }
+
+  .select:focus {
+    --select_border-color: var(--color_interactive);
+
+    outline: none;
+    box-shadow: var(--select_focus-ring);
+  }
+
+  .select:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .selectError {
+    --select_border-color: var(--color_error);
+  }
+
+  .selectError:focus {
+    --select_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
+  }
+
+  .chevron {
+    position: absolute;
+    inset-inline-end: var(--space_s);
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+    color: var(--color_on-bg);
+  }
+
+  .chevron svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}

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

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Select } from './Select';
+
+const options = [
+  { value: 'nl', label: 'Netherlands' },
+  { value: 'be', label: 'Belgium' },
+  { value: 'de', label: 'Germany', disabled: true },
+];
+
+describe('Select', () => {
+  it('renders with a label', () => {
+    render(<Select label="Country" name="country" options={options} />);
+    expect(screen.getByLabelText('Country')).toBeInTheDocument();
+  });
+
+  it('renders a combobox', () => {
+    render(<Select label="Country" name="country" options={options} />);
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  it('renders all options', () => {
+    render(<Select label="Country" name="country" options={options} />);
+    expect(screen.getByRole('option', { name: 'Netherlands' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Belgium' })).toBeInTheDocument();
+    expect(screen.getByRole('option', { name: 'Germany' })).toBeInTheDocument();
+  });
+
+  it('renders a placeholder option', () => {
+    render(<Select label="Country" name="country" options={options} placeholder="Pick a country" />);
+    expect(screen.getByRole('option', { name: 'Pick a country' })).toBeInTheDocument();
+  });
+
+  it('marks a disabled option as disabled', () => {
+    render(<Select label="Country" name="country" options={options} />);
+    expect(screen.getByRole('option', { name: 'Germany' })).toBeDisabled();
+  });
+
+  it('shows an error message', () => {
+    render(<Select label="Country" name="country" options={options} error="Required" />);
+    expect(screen.getByText('Required')).toBeInTheDocument();
+  });
+
+  it('shows a hint message', () => {
+    render(<Select label="Country" name="country" options={options} hint="Select your country" />);
+    expect(screen.getByText('Select your country')).toBeInTheDocument();
+  });
+
+  it('is disabled when the disabled prop is set', () => {
+    render(<Select label="Country" name="country" options={options} disabled />);
+    expect(screen.getByRole('combobox')).toBeDisabled();
+  });
+
+  it('calls onChange when an option is selected', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Select label="Country" name="country" options={options} onChange={onChange} />);
+    await user.selectOptions(screen.getByRole('combobox'), 'nl');
+    expect(onChange).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Select } from './Select';
+
+const options = [
+  { value: 'nl', label: 'Netherlands' },
+  { value: 'be', label: 'Belgium' },
+  { value: 'de', label: 'Germany' },
+  { value: 'fr', label: 'France' },
+];
+
+const meta = {
+  title: 'Form/Select',
+  component: Select,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { label: 'Country', name: 'country', options } };
+export const WithPlaceholder: Story = { args: { label: 'Country', name: 'country', options, placeholder: 'Select a country…' } };
+export const WithError: Story = { args: { label: 'Country', name: 'country', options, error: 'Please select a country' } };
+export const WithHint: Story = { args: { label: 'Country', name: 'country', options, hint: 'We use this to calculate shipping costs' } };
+export const Disabled: Story = { args: { label: 'Country', name: 'country', options, disabled: true } };

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

@@ -0,0 +1,72 @@
+import { SelectHTMLAttributes, useId, ReactNode } from 'react';
+import css from './Select.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 SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
+  label: ReactNode;
+  name: string;
+  options: SelectOption[];
+  placeholder?: string;
+  error?: string;
+  hint?: string;
+  className?: string;
+}
+
+export function Select({
+  label,
+  name,
+  options,
+  placeholder,
+  error,
+  hint,
+  className,
+  ...props
+}: Readonly<SelectProps>) {
+  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} />
+      <div className={css.selectWrapper}>
+        <select
+          id={id}
+          name={name}
+          aria-invalid={!!error}
+          aria-describedby={describedBy}
+          className={cn(css.select, error ? css.selectError : undefined)}
+          {...props}
+        >
+          {placeholder && (
+            <option value="" disabled>
+              {placeholder}
+            </option>
+          )}
+          {options.map(({ value, label: optLabel, disabled }) => (
+            <option key={value} value={value} disabled={disabled}>
+              {optLabel}
+            </option>
+          ))}
+        </select>
+        <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>
+      </div>
+      <Message inputId={id} type="error" message={error} />
+      <Message inputId={id} type="hint" message={hint} />
+    </InputContainer>
+  );
+}

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

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

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

@@ -0,0 +1,99 @@
+@layer component {
+  .formGroup {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space_xxs);
+  }
+
+  .labelRow {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
+  .value {
+    font-size: var(--font_size--body--s);
+    font-variant-numeric: tabular-nums;
+    color: var(--color_on-bg--subtle);
+  }
+
+  .slider {
+    --slider_fill:         0%;
+    --slider_track-height: var(--space_xxs);
+    --slider_thumb-size:   calc(var(--space_s) * 2);
+
+    appearance: none;
+    width: 100%;
+    height: var(--slider_track-height);
+    border-radius: 999px;
+    background: linear-gradient(
+      to right,
+      var(--color_green) 0%,
+      var(--color_green) var(--slider_fill),
+      var(--color_bg--subtle) var(--slider_fill),
+      var(--color_bg--subtle) 100%
+    );
+    cursor: pointer;
+    transition: var(--animation_transition);
+  }
+
+  .slider:focus-visible {
+    outline: var(--outline_default);
+    outline-offset: var(--outline_offset);
+    border-radius: 999px;
+  }
+
+  .slider:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  /* Thumb — Webkit */
+  .slider::-webkit-slider-thumb {
+    appearance: none;
+    width: var(--slider_thumb-size);
+    height: var(--slider_thumb-size);
+    border-radius: 50%;
+    background-color: var(--color_green);
+    box-shadow: var(--shadow_s);
+    transition: var(--animation_transition);
+    cursor: pointer;
+  }
+
+  /* Thumb — Firefox */
+  .slider::-moz-range-thumb {
+    width: var(--slider_thumb-size);
+    height: var(--slider_thumb-size);
+    border: none;
+    border-radius: 50%;
+    background-color: var(--color_green);
+    box-shadow: var(--shadow_s);
+    cursor: pointer;
+  }
+
+  .sliderError {
+    background: linear-gradient(
+      to right,
+      var(--color_error) 0%,
+      var(--color_error) var(--slider_fill),
+      var(--color_bg--subtle) var(--slider_fill),
+      var(--color_bg--subtle) 100%
+    );
+  }
+
+  .sliderError::-webkit-slider-thumb {
+    background-color: var(--color_error);
+  }
+
+  .sliderError::-moz-range-thumb {
+    background-color: var(--color_error);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .slider,
+    .slider::-webkit-slider-thumb,
+    .slider::-moz-range-thumb {
+      transition: none;
+    }
+  }
+}