@boostdev/design-system-components 0.1.1

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

@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/react';
+import { Slider } from './Slider';
+
+describe('Slider', () => {
+  it('renders with a label', () => {
+    render(<Slider label="Volume" name="volume" />);
+    expect(screen.getByLabelText('Volume')).toBeInTheDocument();
+  });
+
+  it('renders a range input', () => {
+    render(<Slider label="Volume" name="volume" />);
+    expect(screen.getByRole('slider')).toBeInTheDocument();
+  });
+
+  it('sets default min and max', () => {
+    render(<Slider label="Volume" name="volume" />);
+    const slider = screen.getByRole('slider');
+    expect(slider).toHaveAttribute('min', '0');
+    expect(slider).toHaveAttribute('max', '100');
+  });
+
+  it('forwards custom min and max', () => {
+    render(<Slider label="Rating" name="rating" min={1} max={10} />);
+    const slider = screen.getByRole('slider');
+    expect(slider).toHaveAttribute('min', '1');
+    expect(slider).toHaveAttribute('max', '10');
+  });
+
+  it('shows the current value when showValue is true', () => {
+    render(<Slider label="Volume" name="volume" defaultValue={42} showValue />);
+    expect(screen.getByText('42')).toBeInTheDocument();
+  });
+
+  it('does not show value text when showValue is false', () => {
+    render(<Slider label="Volume" name="volume" defaultValue={42} />);
+    expect(screen.queryByText('42')).not.toBeInTheDocument();
+  });
+
+  it('shows an error message', () => {
+    render(<Slider label="Volume" name="volume" error="Required" />);
+    expect(screen.getByText('Required')).toBeInTheDocument();
+  });
+
+  it('shows a hint message', () => {
+    render(<Slider label="Volume" name="volume" hint="Drag to adjust" />);
+    expect(screen.getByText('Drag to adjust')).toBeInTheDocument();
+  });
+
+  it('is disabled when disabled prop is set', () => {
+    render(<Slider label="Volume" name="volume" disabled />);
+    expect(screen.getByRole('slider')).toBeDisabled();
+  });
+});

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Slider } from './Slider';
+
+const meta = {
+  title: 'Form/Slider',
+  component: Slider,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { label: 'Volume', name: 'volume', defaultValue: 50 } };
+export const WithValue: Story = { args: { label: 'Brightness', name: 'brightness', defaultValue: 70, showValue: true } };
+export const CustomRange: Story = { args: { label: 'Price', name: 'price', min: 0, max: 500, defaultValue: 150, showValue: true } };
+export const WithHint: Story = { args: { label: 'Volume', name: 'volume', defaultValue: 50, hint: 'Adjust the playback volume' } };
+export const WithError: Story = { args: { label: 'Rating', name: 'rating', min: 1, max: 10, defaultValue: 1, error: 'Rating must be at least 5' } };
+export const Disabled: Story = { args: { label: 'Locked', name: 'locked', defaultValue: 60, disabled: true, showValue: true } };

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

@@ -0,0 +1,71 @@
+import { CSSProperties, ChangeEvent, InputHTMLAttributes, useId, useState } from 'react';
+import css from './Slider.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 SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label: string;
+  name: string;
+  min?: number;
+  max?: number;
+  showValue?: boolean;
+  error?: string;
+  hint?: string;
+  className?: string;
+}
+
+export function Slider({
+  label,
+  name,
+  min = 0,
+  max = 100,
+  showValue = false,
+  error,
+  hint,
+  className,
+  onChange,
+  ...props
+}: Readonly<SliderProps>) {
+  const id = name + useId();
+  const hintId = id + 'hint';
+  const errorId = id + 'error';
+  const describedBy = error ? errorId : hintId;
+
+  const initialValue = Number(props.value ?? props.defaultValue ?? min);
+  const [currentValue, setCurrentValue] = useState(initialValue);
+
+  const fillPct = ((currentValue - min) / (max - min)) * 100;
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setCurrentValue(Number(e.target.value));
+    onChange?.(e);
+  };
+
+  return (
+    <InputContainer className={cn(css.formGroup, className)}>
+      <div className={css.labelRow}>
+        <Label id={id} label={label} />
+        {showValue && <span className={css.value}>{currentValue}</span>}
+      </div>
+      <input
+        type="range"
+        id={id}
+        name={name}
+        min={min}
+        max={max}
+        aria-describedby={describedBy}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={currentValue}
+        className={cn(css.slider, error ? css.sliderError : undefined)}
+        style={{ '--slider_fill': `${fillPct}%` } as CSSProperties}
+        onChange={handleChange}
+        {...props}
+      />
+      <Message inputId={id} type="error" message={error} />
+      <Message inputId={id} type="hint" message={hint} />
+    </InputContainer>
+  );
+}

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

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

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

@@ -0,0 +1,114 @@
+@layer component {
+  .switchGroup {
+    --switch_thumb-size:   1.25em;
+    --switch_track-pad:    var(--space_xxxs);
+    --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
+    --switch_track-width:  calc(var(--switch_thumb-size) * 2 + var(--switch_track-pad) * 2);
+    --track_bg:            var(--color_grey--subtle);
+    --track_active:        var(--color_green--subtle);
+    --thumb_bg:            var(--color_grey);
+    --thumb_bg--active:            var(--color_green--strong);
+
+    display: flex;
+    flex-direction: column;
+    margin-block-end: var(--space_m);
+  }
+
+  .switchGroup.--size_small  { --switch_thumb-size: 1em; }
+  .switchGroup.--size_medium { --switch_thumb-size: 1.25em; }
+  .switchGroup.--size_large  { --switch_thumb-size: 1.5em; }
+
+  .inputWrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--space_xs);
+  }
+
+  .trackWrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    width: var(--switch_track-width);
+    height: var(--switch_track-height);
+  }
+
+  /* Real input — invisible overlay to capture pointer/keyboard events */
+  .switch {
+    position: absolute;
+    inset: 0;
+    appearance: none;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    cursor: pointer;
+    z-index: 1;
+  }
+
+  .switch:disabled {
+    cursor: not-allowed;
+  }
+
+  /* Visual track */
+  .track {
+    display: inline-flex;
+    align-items: center;
+    width: var(--switch_track-width);
+    height: var(--switch_track-height);
+    border-radius: 999px;
+    background-color: var(--track_bg);
+    padding-inline: var(--switch_track-pad);
+    pointer-events: none;
+    transition: var(--animation_transition);
+    outline: 1px solid var(--thumb_bg);
+    outline-offset: var(--outline_offset);
+  }
+
+  /* Thumb */
+  .thumb {
+    display: block;
+    width: var(--switch_thumb-size);
+    height: var(--switch_thumb-size);
+    border-radius: 50%;
+    background-color: var(--thumb_bg);
+    box-shadow: var(--shadow_s);
+    transition: var(--animation_transition);
+    transform: translateX(0);
+  }
+
+  /* Error state — declared before checked/focus so higher-specificity states can override */
+  .switch.switchError + .track {
+    outline: 1px solid var(--color_error);
+  }
+
+  /* Checked state via CSS sibling combinator */
+  .switch:checked + .track {
+    background-color: var(--track_active);
+    outline-color: var(--thumb_bg--active);
+  }
+
+  .switch:checked + .track .thumb {
+    background-color: var(--thumb_bg--active);
+    transform: translateX(var(--switch_thumb-size));
+  }
+
+  /* Focus visible on the visual track */
+  .switch:focus-visible + .track {
+    outline: var(--outline_default);
+    outline-offset: var(--outline_offset);
+    border-radius: 999px;
+  }
+
+  /* Disabled state */
+  .switch:disabled + .track {
+    opacity: 0.4;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .track,
+    .thumb {
+      transition: none;
+    }
+  }
+}

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

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Switch } from './Switch';
+
+describe('Switch', () => {
+  it('renders with a label', () => {
+    render(<Switch label="Enable notifications" name="notifications" />);
+    expect(screen.getByLabelText('Enable notifications')).toBeInTheDocument();
+  });
+
+  it('renders with role="switch"', () => {
+    render(<Switch label="Dark mode" name="dark-mode" />);
+    expect(screen.getByRole('switch')).toBeInTheDocument();
+  });
+
+  it('is unchecked by default', () => {
+    render(<Switch label="Toggle" name="toggle" />);
+    expect(screen.getByRole('switch')).not.toBeChecked();
+  });
+
+  it('can be toggled on', async () => {
+    const user = userEvent.setup();
+    render(<Switch label="Toggle" name="toggle" />);
+    const toggle = screen.getByRole('switch');
+    await user.click(toggle);
+    expect(toggle).toBeChecked();
+  });
+
+  it('renders as checked when defaultChecked is set', () => {
+    render(<Switch label="Toggle" name="toggle" defaultChecked />);
+    expect(screen.getByRole('switch')).toBeChecked();
+  });
+
+  it('shows an error message', () => {
+    render(<Switch label="Accept" name="accept" error="This field is required" />);
+    expect(screen.getByText('This field is required')).toBeInTheDocument();
+  });
+
+  it('shows a hint message', () => {
+    render(<Switch label="Subscribe" name="subscribe" hint="You can unsubscribe at any time" />);
+    expect(screen.getByText('You can unsubscribe at any time')).toBeInTheDocument();
+  });
+
+  it('is disabled when the disabled prop is set', () => {
+    render(<Switch label="Disabled" name="disabled" disabled />);
+    expect(screen.getByRole('switch')).toBeDisabled();
+  });
+});

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

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Switch } from './Switch';
+
+const meta = {
+  title: 'Form/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'radio', options: ['small', 'medium', 'large'] },
+  },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { label: 'Enable notifications', name: 'notifications' } };
+export const Checked: Story = { args: { label: 'Dark mode', name: 'dark-mode', defaultChecked: true } };
+export const WithHint: Story = { args: { label: 'Marketing emails', name: 'marketing', hint: 'Receive occasional product updates' } };
+export const WithError: Story = { args: { label: 'Required toggle', name: 'required', error: 'You must enable this to continue' } };
+export const Disabled: Story = { args: { label: 'Unavailable', name: 'unavailable', disabled: true } };
+export const DisabledChecked: Story = { args: { label: 'Always on', name: 'always-on', defaultChecked: true, disabled: true } };
+
+export const AllSizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <Switch label="Small" name="small" size="small" />
+      <Switch label="Medium" name="medium" size="medium" />
+      <Switch label="Large" name="large" size="large" />
+    </div>
+  ),
+};

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

@@ -0,0 +1,54 @@
+import { InputHTMLAttributes, useId } from 'react';
+import css from './Switch.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 SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+  label: string;
+  name: string;
+  size?: 'small' | 'medium' | 'large';
+  error?: string;
+  hint?: string;
+  className?: string;
+}
+
+export function Switch({
+  label,
+  name,
+  size = 'medium',
+  error,
+  hint,
+  className,
+  ...props
+}: Readonly<SwitchProps>) {
+  const id = name + useId();
+  const hintId = id + 'hint';
+  const errorId = id + 'error';
+  const describedBy = error ? errorId : hintId;
+
+  return (
+    <InputContainer className={cn(css.switchGroup, css[`--size_${size}`], className)}>
+      <div className={css.inputWrapper}>
+        <div className={css.trackWrapper}>
+          <input
+            type="checkbox"
+            role="switch"
+            id={id}
+            name={name}
+            aria-describedby={describedBy}
+            className={cn(css.switch, error ? css.switchError : undefined)}
+            {...props}
+          />
+          <span className={css.track} aria-hidden="true">
+            <span className={css.thumb} />
+          </span>
+        </div>
+        <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/Switch/index.ts

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

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

@@ -0,0 +1,44 @@
+@layer component {
+  .formGroup {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .textarea {
+    --textarea_border-color: var(--color_on-bg);
+    --textarea_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);
+    line-height: var(--font_line-height--body);
+    padding: var(--space_s);
+    border: 1px solid var(--textarea_border-color);
+    border-radius: var(--border_radius--xs);
+    background-color: var(--color_bg);
+    color: var(--color_on-bg);
+    resize: vertical;
+    min-height: calc(var(--space_m) * 5);
+    transition: var(--animation_transition);
+  }
+
+  .textarea:focus {
+    --textarea_border-color: var(--color_interactive);
+
+    outline: none;
+    box-shadow: var(--textarea_focus-ring);
+  }
+
+  .textarea:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    resize: none;
+  }
+
+  .textareaError {
+    --textarea_border-color: var(--color_error);
+  }
+
+  .textareaError:focus {
+    --textarea_focus-ring: 0 0 0 2px rgb(from var(--color_error) r g b / 20%);
+  }
+}

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

@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Textarea } from './Textarea';
+
+describe('Textarea', () => {
+  it('renders with a label', () => {
+    render(<Textarea label="Message" name="message" />);
+    expect(screen.getByLabelText('Message')).toBeInTheDocument();
+  });
+
+  it('renders a textarea element', () => {
+    render(<Textarea label="Message" name="message" />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('accepts typed input', async () => {
+    const user = userEvent.setup();
+    render(<Textarea label="Message" name="message" />);
+    const textarea = screen.getByRole('textbox');
+    await user.type(textarea, 'Hello world');
+    expect(textarea).toHaveValue('Hello world');
+  });
+
+  it('renders with a default value', () => {
+    render(<Textarea label="Message" name="message" defaultValue="Pre-filled text" />);
+    expect(screen.getByRole('textbox')).toHaveValue('Pre-filled text');
+  });
+
+  it('shows an error message', () => {
+    render(<Textarea label="Message" name="message" error="Required" />);
+    expect(screen.getByText('Required')).toBeInTheDocument();
+  });
+
+  it('sets aria-invalid when there is an error', () => {
+    render(<Textarea label="Message" name="message" error="Required" />);
+    expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('shows a hint message', () => {
+    render(<Textarea label="Message" name="message" hint="Max 500 characters" />);
+    expect(screen.getByText('Max 500 characters')).toBeInTheDocument();
+  });
+
+  it('is disabled when the disabled prop is set', () => {
+    render(<Textarea label="Message" name="message" disabled />);
+    expect(screen.getByRole('textbox')).toBeDisabled();
+  });
+
+  it('forwards rows prop', () => {
+    render(<Textarea label="Message" name="message" rows={6} />);
+    expect(screen.getByRole('textbox')).toHaveAttribute('rows', '6');
+  });
+});

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Textarea } from './Textarea';
+
+const meta = {
+  title: 'Form/Textarea',
+  component: Textarea,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { label: 'Message', name: 'message', placeholder: 'Type your message…' } };
+export const WithValue: Story = { args: { label: 'Message', name: 'message', defaultValue: 'Pre-filled content here.' } };
+export const WithError: Story = { args: { label: 'Message', name: 'message', error: 'Message is required' } };
+export const WithHint: Story = { args: { label: 'Message', name: 'message', hint: 'Maximum 500 characters' } };
+export const Disabled: Story = { args: { label: 'Message', name: 'message', disabled: true, defaultValue: 'Cannot edit this.' } };
+export const Tall: Story = { args: { label: 'Notes', name: 'notes', rows: 8, placeholder: 'Add detailed notes…' } };

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

@@ -0,0 +1,44 @@
+import { TextareaHTMLAttributes, useId, ReactNode } from 'react';
+import css from './Textarea.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 TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label: ReactNode;
+  name: string;
+  error?: string;
+  hint?: string;
+  className?: string;
+}
+
+export function Textarea({
+  label,
+  name,
+  error,
+  hint,
+  className,
+  ...props
+}: Readonly<TextareaProps>) {
+  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} />
+      <textarea
+        id={id}
+        name={name}
+        aria-invalid={!!error}
+        aria-describedby={describedBy}
+        className={cn(css.textarea, error ? css.textareaError : undefined)}
+        {...props}
+      />
+      <Message inputId={id} type="error" message={error} />
+      <Message inputId={id} type="hint" message={hint} />
+    </InputContainer>
+  );
+}

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

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

package/src/components/interaction/form/atoms/InputContainer.module.css

@@ -0,0 +1,9 @@
+@layer component {
+  .container {
+    --labelPosition: calc(var(--inputSize) + var(--space_m));
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--space_xxxs);
+  }
+}

package/src/components/interaction/form/atoms/InputContainer.tsx

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+import css from './InputContainer.module.css';
+import { cn } from '@boostdev/design-system-foundation';
+
+type ContainerProps = HTMLAttributes<HTMLDivElement>;
+
+export const InputContainer = ({ children, className }: ContainerProps) => {
+  return <div className={cn(css.container, className)}>{children}</div>;
+};

package/src/components/interaction/form/atoms/Label.module.css

@@ -0,0 +1,10 @@
+@layer component {
+  .label {
+    display: flex;
+    align-items: center;
+    font-family: var(--font_family--body);
+    font-weight: var(--font_weight--semibold);
+    color: var(--color_on-bg);
+    cursor: pointer;
+  }
+}

package/src/components/interaction/form/atoms/Label.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import css from './Label.module.css';
+
+interface LabelProps {
+  id: string;
+  label: ReactNode;
+}
+
+export const Label = ({ label, id }: LabelProps) => {
+  return (
+    <label htmlFor={id} className={css.label}>
+      {label}
+    </label>
+  );
+};

package/src/components/interaction/form/atoms/Message.module.css

@@ -0,0 +1,11 @@
+@layer component {
+  .error,
+  .hint {
+    font-size: var(--font_size--body--s);
+    margin-inline-start: var(--labelPosition);
+  }
+
+  .error {
+    color: var(--color_error);
+  }
+}

package/src/components/interaction/form/atoms/Message.tsx

@@ -0,0 +1,17 @@
+import css from './Message.module.css';
+
+interface MessageProps {
+  inputId: string;
+  type: 'hint' | 'error';
+  message: string | undefined;
+}
+
+export const Message = ({ message, type, inputId }: MessageProps) => {
+  if (!message) return null;
+
+  return (
+    <label id={inputId + type} htmlFor={inputId} className={css[type]}>
+      {message}
+    </label>
+  );
+};