@boostdev/design-system-components 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",

package/src/components/interaction/Button/Button.tsx

@@ -22,7 +22,7 @@ interface ButtonProps {
 
 export function Button({
   children,
-  className = '',
+  className,
   variant = 'primary',
   type = 'button',
   iconStart,
@@ -44,25 +44,52 @@ export function Button({
     className,
   );
 
-  const allChildren = (
+  const handleAnchorClick: MouseEventHandler<HTMLAnchorElement> = (e) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    onClick?.(e);
+  };
+
+  const handleButtonClick: MouseEventHandler<HTMLButtonElement> = (e) => {
+    onClick?.(e);
+  };
+
+  const content = (
     <>
-      {!!iconStart && <span className={css.prefix}>{iconStart}</span>}
+      {Boolean(iconStart) && <span className={css.prefix}>{iconStart}</span>}
       {children}
-      {!!iconEnd && <span className={css.suffix}>{iconEnd}</span>}
+      {Boolean(iconEnd) && <span className={css.suffix}>{iconEnd}</span>}
     </>
   );
 
   if (href) {
     return (
-      <a className={classNames} href={href} target={target} rel={rel} onClick={onClick as MouseEventHandler<HTMLAnchorElement>} {...rest}>
-        {allChildren}
+      <a
+        className={classNames}
+        href={disabled ? undefined : href}
+        target={target}
+        rel={rel}
+        aria-disabled={disabled}
+        tabIndex={disabled ? -1 : undefined}
+        onClick={handleAnchorClick}
+        {...rest}
+      >
+        {content}
       </a>
     );
   }
 
   return (
-    <button type={type} className={classNames} disabled={disabled} onClick={onClick as MouseEventHandler<HTMLButtonElement>} {...rest}>
-      {allChildren}
+    <button
+      type={type}
+      className={classNames}
+      disabled={disabled}
+      onClick={handleButtonClick}
+      {...rest}
+    >
+      {content}
     </button>
   );
 }

package/src/components/interaction/Dialog/Dialog.spec.tsx

@@ -14,30 +14,30 @@ beforeEach(() => {
 
 describe('Dialog', () => {
   it('renders children', () => {
-    render(<Dialog isVisible><p>Dialog content</p></Dialog>);
+    render(<Dialog isOpen><p>Dialog content</p></Dialog>);
     expect(screen.getByText('Dialog content')).toBeInTheDocument();
   });
 
-  it('calls showModal when isVisible becomes true', () => {
-    render(<Dialog isVisible><span>Content</span></Dialog>);
+  it('calls showModal when isOpen becomes true', () => {
+    render(<Dialog isOpen><span>Content</span></Dialog>);
     expect(HTMLDialogElement.prototype.showModal).toHaveBeenCalled();
   });
 
   it('renders a close button with aria-label', () => {
-    render(<Dialog isVisible><span>Content</span></Dialog>);
+    render(<Dialog isOpen><span>Content</span></Dialog>);
     expect(screen.getByRole('button', { name: /close dialog/i })).toBeInTheDocument();
   });
 
-  it('calls handleClose when close button is clicked', async () => {
+  it('calls onClose when close button is clicked', async () => {
     const user = userEvent.setup();
-    const handleClose = vi.fn();
-    render(<Dialog isVisible handleClose={handleClose}><span>Content</span></Dialog>);
+    const onClose = vi.fn();
+    render(<Dialog isOpen onClose={onClose}><span>Content</span></Dialog>);
     await user.click(screen.getByRole('button', { name: /close dialog/i }));
-    expect(handleClose).toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalled();
   });
 
-  it('does not call showModal when isVisible is false', () => {
-    render(<Dialog isVisible={false}><span>Content</span></Dialog>);
+  it('does not call showModal when isOpen is false', () => {
+    render(<Dialog isOpen={false}><span>Content</span></Dialog>);
     expect(HTMLDialogElement.prototype.showModal).not.toHaveBeenCalled();
   });
 });

package/src/components/interaction/Dialog/Dialog.tsx

@@ -5,30 +5,44 @@ import { cn } from '@boostdev/design-system-foundation';
 interface DialogProps {
   children: ReactNode;
   className?: string;
-  isVisible?: boolean;
-  handleClose?: () => void;
+  isOpen?: boolean;
+  onClose?: () => void;
 }
 
-export function Dialog({ children, isVisible = false, className, handleClose }: DialogProps) {
+export function Dialog({ children, isOpen = false, className, onClose }: DialogProps) {
   const dialogRef = useRef<HTMLDialogElement | null>(null);
 
   useEffect(() => {
     const dialog = dialogRef.current;
     if (!dialog) return;
-    if (isVisible) {
+    if (isOpen) {
       dialog.showModal();
     } else if (dialog.open) {
       dialog.close();
     }
-  }, [isVisible]);
+  }, [isOpen]);
+
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
+    if (e.target === dialogRef.current) onClose?.();
+  };
+
+  const handleCancel = (e: React.SyntheticEvent) => {
+    e.preventDefault();
+    onClose?.();
+  };
 
   return (
-    <dialog ref={dialogRef} className={cn(className, css.dialog)}>
+    <dialog
+      ref={dialogRef}
+      className={cn(className, css.dialog)}
+      onClick={handleBackdropClick}
+      onCancel={handleCancel}
+    >
       <form method="dialog" className={css.closeForm}>
         <button
           type="submit"
           className={css.closeButton}
-          onClick={handleClose}
+          onClick={onClose}
           aria-label="Close dialog"
         >
           <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">

package/src/components/interaction/DropdownMenu/DropdownMenu.tsx

@@ -11,7 +11,7 @@ import {
 import css from './DropdownMenu.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 
-interface DropdownMenuItem {
+export interface DropdownMenuItem {
   id: string;
   label: string;
   onClick?: () => void;

package/src/components/interaction/DropdownMenu/index.ts

@@ -1 +1,2 @@
 export { DropdownMenu } from './DropdownMenu';
+export type { DropdownMenuItem } from './DropdownMenu';

package/src/components/interaction/Toast/Toast.module.css

@@ -33,6 +33,34 @@
   .--variant_info {
     border-left: 4px solid var(--color_interactive);
   }
+
+  .message {
+    flex: 1;
+  }
+
+  .closeButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.6;
+  }
+
+  .closeButton:hover {
+    opacity: 1;
+  }
+
+  .closeButton svg {
+    width: 1rem;
+    height: 1rem;
+  }
 }
 
 @keyframes slideIn {

package/src/components/interaction/Toast/Toast.tsx

@@ -52,7 +52,16 @@ function ToastItem({ toast, onRemove }: { toast: Toast; onRemove: () => void })
     return () => clearTimeout(timer);
   }, [onRemove]);
 
-  return <div className={cn(css.toast, css[`--variant_${toast.variant}`])}>{toast.message}</div>;
+  return (
+    <div className={cn(css.toast, css[`--variant_${toast.variant}`])} role="status">
+      <span className={css.message}>{toast.message}</span>
+      <button type="button" className={css.closeButton} onClick={onRemove} aria-label="Dismiss">
+        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M18 6L6 18M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+  );
 }
 
 export function useToast() {

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

@@ -17,7 +17,7 @@
     margin-block-start: 0.25em;
     width: var(--inputSize);
     height: var(--inputSize);
-    border: 1px solid var(--color_border);
+    border: 1px solid var(--color_on-bg);
     border-radius: var(--border_radius--xs);
     appearance: none;
     background-color: var(--color_bg);

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

@@ -17,13 +17,14 @@ export function Checkbox({ label, name, error, hint, className, ...props }: Chec
   const id = name + useId();
   const hintId = id + 'hint';
   const errorId = id + 'error';
-  const describedBy = !!error ? errorId : hintId;
+  const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined;
 
   return (
     <InputContainer className={cn(css.checkboxGroup, className)}>
       <div className={css.inputWrapper}>
         <input
           aria-describedby={describedBy}
+          aria-invalid={!!error}
           type="checkbox"
           id={id}
           name={name}

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

@@ -6,6 +6,7 @@ import {
   useId,
   useRef,
   useState,
+  useMemo,
 } from 'react';
 import css from './Combobox.module.css';
 import { cn } from '@boostdev/design-system-foundation';
@@ -13,7 +14,7 @@ import { InputContainer } from '../atoms/InputContainer';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
 
-interface ComboboxOption {
+export interface ComboboxOption {
   value: string;
   label: string;
   disabled?: boolean;
@@ -26,6 +27,7 @@ interface ComboboxProps {
   placeholder?: string;
   value?: string;
   onChange?: (value: string) => void;
+  disabled?: boolean;
   error?: string;
   hint?: string;
   className?: string;
@@ -38,6 +40,7 @@ export function Combobox({
   placeholder,
   value,
   onChange,
+  disabled = false,
   error,
   hint,
   className,
@@ -46,10 +49,14 @@ export function Combobox({
   const listboxId = id + 'listbox';
   const hintId = id + 'hint';
   const errorId = id + 'error';
-  const describedBy = error ? errorId : hintId;
+  const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined;
 
-  const selectedOption = options.find(o => o.value === value);
+  const selectedOption = useMemo(() => options.find(o => o.value === value), [options, value]);
   const [inputValue, setInputValue] = useState(selectedOption?.label ?? '');
+
+  useEffect(() => {
+    setInputValue(selectedOption?.label ?? '');
+  }, [selectedOption]);
   const [isOpen, setIsOpen] = useState(false);
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
 
@@ -134,6 +141,7 @@ export function Combobox({
           autoComplete="off"
           placeholder={placeholder}
           value={inputValue}
+          disabled={disabled}
           className={cn(css.input, error ? css.inputError : undefined)}
           onChange={handleInputChange}
           onKeyDown={handleKeyDown}

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

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

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

@@ -31,11 +31,21 @@ export function FileInput({
   const uid = name + useId();
   const hintId = uid + 'hint';
   const errorId = uid + 'error';
-  const describedBy = error ? errorId : hintId;
+  const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined;
   const inputRef = useRef<HTMLInputElement>(null);
   const [isDragging, setIsDragging] = useState(false);
   const [fileNames, setFileNames] = useState<string[]>([]);
 
+  const isFileAccepted = (file: File): boolean => {
+    if (!accept) return true;
+    return accept.split(',').some(token => {
+      const t = token.trim();
+      if (t.startsWith('.')) return file.name.toLowerCase().endsWith(t.toLowerCase());
+      if (t.endsWith('/*')) return file.type.startsWith(t.slice(0, -1));
+      return file.type === t;
+    });
+  };
+
   const handleFiles = (files: FileList | null) => {
     if (!files) return;
     setFileNames(Array.from(files).map(f => f.name));
@@ -48,7 +58,10 @@ export function FileInput({
     e.preventDefault();
     setIsDragging(false);
     if (disabled) return;
-    handleFiles(e.dataTransfer.files);
+    const dt = new DataTransfer();
+    Array.from(e.dataTransfer.files).filter(isFileAccepted).forEach(f => dt.items.add(f));
+    if (inputRef.current) inputRef.current.files = dt.files;
+    handleFiles(dt.files.length > 0 ? dt.files : null);
   };
 
   const handleDragOver = (e: DragEvent<HTMLLabelElement>) => {

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

@@ -1,13 +1,14 @@
-import { InputHTMLAttributes, useId, ReactNode } from 'react';
+import { InputHTMLAttributes, useId, ReactNode, HTMLInputTypeAttribute } 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> {
+interface FormInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
   label: ReactNode;
   name: string;
+  type?: Exclude<HTMLInputTypeAttribute, 'checkbox' | 'radio' | 'file'>;
   ariaLabel?: string;
   error?: string;
   hint?: string;
@@ -26,7 +27,7 @@ export function FormInput({
   const id = name + useId();
   const hintId = id + 'hint';
   const errorId = id + 'error';
-  const describedBy = !!error ? errorId : hintId;
+  const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined;
 
   return (
     <InputContainer className={cn(css.formGroup, className)}>

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

@@ -1,9 +1,9 @@
-import { useId, useRef } from 'react';
+import {useId, useRef, useState} 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';
+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;
@@ -37,20 +37,21 @@ export function NumberInput({
   const uid = name + useId();
   const hintId = uid + 'hint';
   const errorId = uid + 'error';
-  const describedBy = error ? errorId : hintId;
+  const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined;
   const inputRef = useRef<HTMLInputElement>(null);
 
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? 0);
+  const currentValue = isControlled ? value! : internalValue;
+
   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;
+    return max !== undefined ? Math.min(max, withMin) : withMin;
   };
 
   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);
+    const next = clamp(currentValue + delta);
+    if (!isControlled) setInternalValue(next);
     onChange?.(next);
   };
 
@@ -62,7 +63,7 @@ export function NumberInput({
           type="button"
           className={css.stepper}
           aria-label="Decrease"
-          disabled={disabled || (min !== undefined && (value ?? defaultValue ?? 0) <= min)}
+          disabled={disabled || (min !== undefined && currentValue <= min)}
           onClick={() => adjust(-step)}
           tabIndex={-1}
         >
@@ -75,8 +76,7 @@ export function NumberInput({
           id={uid}
           type="number"
           name={name}
-          defaultValue={defaultValue}
-          value={value}
+          {...(isControlled ? { value } : { defaultValue })}
           min={min}
           max={max}
           step={step}
@@ -84,13 +84,17 @@ export function NumberInput({
           aria-invalid={!!error}
           aria-describedby={describedBy}
           className={cn(css.input, error ? css.inputError : undefined)}
-          onChange={e => onChange?.(parseFloat(e.target.value))}
+          onChange={e => {
+            const v = parseFloat(e.target.value);
+            if (!isControlled) setInternalValue(isNaN(v) ? 0 : v);
+            onChange?.(v);
+          }}
         />
         <button
           type="button"
           className={css.stepper}
           aria-label="Increase"
-          disabled={disabled || (max !== undefined && (value ?? defaultValue ?? 0) >= max)}
+          disabled={disabled || (max !== undefined && currentValue >= max)}
           onClick={() => adjust(step)}
           tabIndex={-1}
         >

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

@@ -18,7 +18,7 @@
     margin-block-start: 0.25em;
     width: var(--inputSize);
     height: var(--inputSize);
-    border: 1px solid var(--color_border);
+    border: 1px solid var(--color_on-bg);
     border-radius: 50%;
     appearance: none;
     background-color: var(--color_bg);

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

@@ -17,13 +17,14 @@ export function Radio({ label, name, error, hint, className, ...props }: RadioPr
   const id = name + useId();
   const hintId = id + 'hint';
   const errorId = id + 'error';
-  const describedBy = !!error ? errorId : hintId;
+  const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined;
 
   return (
     <InputContainer className={cn(css.radioGroup, className)}>
       <div className={css.inputWrapper}>
         <input
           aria-describedby={describedBy}
+          aria-invalid={!!error}
           type="radio"
           id={id}
           name={name}

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

@@ -28,7 +28,8 @@ describe('Select', () => {
 
   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();
+    // placeholder is hidden from the a11y tree (hidden attribute) but present in the DOM
+    expect(screen.getByText('Pick a country')).toBeInTheDocument();
   });
 
   it('marks a disabled option as disabled', () => {

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

@@ -5,7 +5,7 @@ import { InputContainer } from '../atoms/InputContainer';
 import { Label } from '../atoms/Label';
 import { Message } from '../atoms/Message';
 
-interface SelectOption {
+export interface SelectOption {
   value: string;
   label: string;
   disabled?: boolean;
@@ -34,7 +34,7 @@ export function Select({
   const id = name + useId();
   const hintId = id + 'hint';
   const errorId = id + 'error';
-  const describedBy = error ? errorId : hintId;
+  const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined;
 
   return (
     <InputContainer className={cn(css.formGroup, className)}>
@@ -49,7 +49,7 @@ export function Select({
           {...props}
         >
           {placeholder && (
-            <option value="" disabled>
+            <option value="" disabled hidden>
               {placeholder}
             </option>
           )}

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

@@ -1 +1,2 @@
 export { Select } from './Select';
+export type { SelectOption } from './Select';

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

@@ -31,15 +31,16 @@ export function Slider({
   const id = name + useId();
   const hintId = id + 'hint';
   const errorId = id + 'error';
-  const describedBy = error ? errorId : hintId;
+  const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined;
 
-  const initialValue = Number(props.value ?? props.defaultValue ?? min);
-  const [currentValue, setCurrentValue] = useState(initialValue);
+  const isControlled = props.value !== undefined;
+  const [internalValue, setInternalValue] = useState(Number(props.defaultValue ?? min));
+  const currentValue = isControlled ? Number(props.value) : internalValue;
 
   const fillPct = ((currentValue - min) / (max - min)) * 100;
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setCurrentValue(Number(e.target.value));
+    if (!isControlled) setInternalValue(Number(e.target.value));
     onChange?.(e);
   };
 

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

@@ -26,7 +26,7 @@ export function Switch({
   const id = name + useId();
   const hintId = id + 'hint';
   const errorId = id + 'error';
-  const describedBy = error ? errorId : hintId;
+  const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined;
 
   return (
     <InputContainer className={cn(css.switchGroup, css[`--size_${size}`], className)}>

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

@@ -24,7 +24,7 @@ export function Textarea({
   const id = name + useId();
   const hintId = id + 'hint';
   const errorId = id + 'error';
-  const describedBy = error ? errorId : hintId;
+  const describedBy = [error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined;
 
   return (
     <InputContainer className={cn(css.formGroup, className)}>

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

@@ -10,8 +10,8 @@ export const Message = ({ message, type, inputId }: MessageProps) => {
   if (!message) return null;
 
   return (
-    <label id={inputId + type} htmlFor={inputId} className={css[type]}>
+    <p id={inputId + type} className={css[type]}>
       {message}
-    </label>
+    </p>
   );
 };

package/src/components/layout/ButtonGroup/ButtonGroup.tsx

@@ -10,7 +10,7 @@ interface ButtonGroupProps {
 
 export function ButtonGroup({ children, className, variant }: ButtonGroupProps) {
   return (
-    <div className={cn(css.buttonGroup, className, variant && css[`--variant__${variant}`])}>
+    <div className={cn(css.buttonGroup, className, variant && css[`--variant_${variant}`])}>
       <div className={css.container}>{children}</div>
     </div>
   );

package/src/components/layout/Card/Card.tsx

@@ -10,6 +10,7 @@ interface CardProps {
   textAlign?: 'start' | 'center' | 'end';
   style?: CSSProperties;
   onClick?: () => void;
+  'aria-label'?: string;
 }
 
 export function Card({
@@ -20,6 +21,7 @@ export function Card({
   textAlign = 'start',
   style,
   onClick,
+  'aria-label': ariaLabel,
 }: CardProps) {
   const classNames = cn(
     css.card,
@@ -37,6 +39,7 @@ export function Card({
       className={classNames}
       onClick={onClick}
       style={style}
+      aria-label={ariaLabel}
       {...(onClick && { type: 'button' as const })}
     >
       {children}

package/src/components/layout/SectionHeader/SectionHeader.tsx

@@ -1,9 +1,8 @@
+import type { JSX } from 'react';
 import css from './SectionHeader.module.css';
 import { cn } from '@boostdev/design-system-foundation';
-import {JSX} from "react/jsx-runtime";
-type IntrinsicElements = JSX.IntrinsicElements;
 
-type IntrinsicElement = keyof IntrinsicElements
+type IntrinsicElement = keyof JSX.IntrinsicElements;
 
 type SectionHeaderProps = {
   title: string;

package/src/components/ui/Accordion/Accordion.tsx

@@ -2,7 +2,7 @@ import { ReactNode, useId, useState } from 'react';
 import css from './Accordion.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 
-interface AccordionItem {
+export interface AccordionItem {
   id: string;
   title: ReactNode;
   content: ReactNode;