@boostdev/design-system-components 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",
@@ -115,6 +115,7 @@
     "@types/react-dom": "^18",
     "@vitejs/plugin-react": "^5.1.4",
     "eslint": "^9",
+    "git-cliff": "^2.12.0",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "^28.1.0",
     "storybook": "^8.6.18",

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/Command/Command.module.css

@@ -17,12 +17,13 @@
   .palette {
     display: flex;
     flex-direction: column;
-    background-color: var(--color_bg);
+    background-color: var(--command_color, var(--color_bg));
+    color: var(--command_on-color, var(--color_on-bg));
     border-radius: var(--border_radius--m);
     box-shadow: var(--shadow_xl);
     overflow: hidden;
     max-height: 70vh;
-    border: 1px solid var(--color_bg--subtle);
+    border: 1px solid currentcolor;
   }
 
   .searchRow {
@@ -30,7 +31,7 @@
     align-items: center;
     gap: var(--space_xs);
     padding: var(--space_s) var(--space_m);
-    border-block-end: 1px solid var(--color_bg--subtle);
+    border-block-end: 1px solid currentcolor;
     flex-shrink: 0;
   }
 
@@ -59,7 +60,7 @@
   .escHint {
     font-size: var(--font_size--body--s);
     color: var(--color_on-bg--muted);
-    border: 1px solid var(--color_on-bg--muted);
+    border: 1px solid currentcolor;
     border-radius: var(--border_radius--xs);
     padding: 0.1em 0.4em;
     flex-shrink: 0;
@@ -114,7 +115,7 @@
   .shortcut {
     font-size: var(--font_size--body--s);
     color: var(--color_on-bg--muted);
-    border: 1px solid var(--color_on-bg--muted);
+    border: 1px solid currentcolor;
     border-radius: var(--border_radius--xs);
     padding: 0.1em 0.4em;
   }

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

@@ -1,17 +1,20 @@
 @layer component {
   .dialog {
-    display: grid;
-    gap: var(--grid_gap);
     font-size: var(--font_size--body--s);
     border: 2px solid currentcolor;
-    background-color: var(--color_grey--subtle);
-    color: var(--color_on-grey--subtle);
+    background-color: var(--dialog_color ,var(--color_grey--subtle));
+    color: var(--dialog_on-color, var(--color_on-grey--subtle));
     border-radius: var(--border_radius--m);
     padding: var(--space_l);
     overflow: visible;
     max-width: 90svw;
   }
 
+  .dialogContent {
+    display: grid;
+    gap: var(--grid_gap);
+  }
+
   .closeForm {
     position: absolute;
     inset-block-start: -1em;
@@ -27,7 +30,7 @@
     justify-content: center;
     border-radius: 50%;
     background-color: var(--color_bg);
-    color: var(--color_on-bg);
+    color: currentcolor;
     border: 2px solid currentcolor;
     cursor: pointer;
   }

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.stories.tsx

@@ -14,7 +14,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    isVisible: true,
+    isOpen: true,
     children: <p>This is dialog content.</p>,
   },
 };
@@ -25,7 +25,7 @@ export const Interactive: Story = {
     return (
       <>
         <Button onClick={() => setOpen(true)}>Open Dialog</Button>
-        <Dialog isVisible={open} handleClose={() => setOpen(false)}>
+        <Dialog isOpen={open} onClose={() => setOpen(false)}>
           <h2>Dialog Title</h2>
           <p>This is the dialog body content.</p>
           <Button onClick={() => setOpen(false)}>Close</Button>

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">
@@ -36,7 +50,9 @@ export function Dialog({ children, isVisible = false, className, handleClose }:
           </svg>
         </button>
       </form>
-      {children}
+      <div className={css.dialogContent}>
+        {children}
+      </div>
     </dialog>
   );
 }

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

@@ -24,8 +24,8 @@
     flex-direction: column;
     width: min(28rem, 90vw);
     height: 100%;
-    background-color: var(--color_bg);
-    color: var(--color_on-bg);
+    background-color: var(--drawer_color, var(--color_bg));
+    color: var(--drawer_on-color, var(--color_on-bg));
     box-shadow: var(--shadow_xl);
     overflow: hidden;
     transition: transform var(--animation_transition-duration) var(--animation_easing);
@@ -44,7 +44,7 @@
     align-items: center;
     justify-content: space-between;
     padding: var(--space_m) var(--space_l);
-    border-block-end: 1px solid var(--color_bg--subtle);
+    border-block-end: 1px solid currentcolor;
     flex-shrink: 0;
   }
 
@@ -64,7 +64,6 @@
     height: 2rem;
     border-radius: 50%;
     cursor: pointer;
-    color: var(--color_on-bg);
     transition: var(--animation_transition);
   }
 

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

@@ -11,8 +11,9 @@
     min-width: 10rem;
     padding: var(--space_xxs) 0;
     border-radius: var(--border_radius--s);
-    border: 1px solid var(--color_bg--subtle);
-    background-color: var(--color_bg);
+    border: 1px solid currentcolor;
+    background-color: var(--dropdown_color, var(--color_bg));
+    color: var(--dropdown_on-color, var(--color_on-bg));
     box-shadow: var(--shadow_m);
     list-style: none;
     margin: 0;
@@ -23,8 +24,9 @@
 
   .separator {
     border: none;
-    border-top: 1px solid var(--color_bg--subtle);
+    border-top: 1px solid currentcolor;
     margin: var(--space_xxs) 0;
+    opacity: 0.15;
   }
 
   .item {
@@ -36,7 +38,7 @@
     padding: var(--space_xs) var(--space_m);
     font-family: var(--font_family--body);
     font-size: var(--font_size--body);
-    color: var(--color_on-bg);
+    color: currentcolor;
     cursor: pointer;
     box-sizing: border-box;
     transition: var(--animation_transition);

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/Popover/Popover.module.css

@@ -10,10 +10,10 @@
     min-width: 12rem;
     padding: var(--space_m);
     border-radius: var(--border_radius--s);
-    border: 1px solid var(--color_bg--subtle);
-    background-color: var(--color_bg);
+    border: 1px solid currentcolor;
+    background-color: var(--popover_color, var(--color_bg));
     box-shadow: var(--shadow_m);
-    color: var(--color_on-bg);
+    color: var(--popover_on-color, var(--color_on-bg));
     font-size: var(--font_size--body);
   }
 

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

@@ -11,8 +11,9 @@
 
   .toast {
     padding: var(--space_m) var(--space_l);
-    background-color: var(--color_bg);
-    color: var(--color_on-bg);
+    background-color: var(--toast_color, var(--color_bg));
+    color: var(--toast_on-color, var(--color_on-bg));
+    border: 1px solid currentcolor;
     border-radius: var(--border_radius--s);
     box-shadow: var(--shadow_s);
     display: flex;
@@ -22,16 +23,32 @@
     animation: slideIn var(--animation_duration--fast) var(--animation_easing);
   }
 
-  .--variant_success {
-    border-left: 4px solid var(--color_success);
+  .message {
+    flex: 1;
   }
 
-  .--variant_error {
-    border-left: 4px solid var(--color_error);
+  .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;
   }
 
-  .--variant_info {
-    border-left: 4px solid var(--color_interactive);
+  .closeButton svg {
+    width: 1rem;
+    height: 1rem;
   }
 }
 

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,17 +17,18 @@ 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}
-          className={`${css.checkbox} ${error ? css.checkboxError : ''}`}
+          className={cn(css.checkbox, error && css.checkboxError)}
           {...props}
         />
         <Label id={id} label={label} />

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

@@ -73,8 +73,9 @@
     margin: 0;
     padding: var(--space_xxs) 0;
     border-radius: var(--border_radius--xs);
-    border: 1px solid var(--color_bg--subtle);
-    background-color: var(--color_bg);
+    border: 1px solid currentcolor;
+    background-color: var(--combobox_color, var(--color_bg));
+    color: var(--combobox_on-color, var(--color_on-bg));
     box-shadow: var(--shadow_m);
   }
 

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)}>
@@ -37,7 +38,7 @@ export function FormInput({
         aria-label={ariaLabel}
         id={id}
         name={name}
-        className={`${css.input} ${error ? css.inputError : ''}`}
+        className={cn(css.input, error && css.inputError)}
         {...props}
       />
       <Message inputId={id} type="error" message={error} />