@boostdev/design-system-components 0.1.4 → 0.1.6

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

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

@@ -1,6 +1,7 @@
 @layer component {
   .card {
-    background-color: var(--color_bg);
+    background-color: var(--card_color, var(--color_bg));
+    color: var(--card_on-color, var(--color_on-bg));
     border-radius: var(--border_radius--m);
     transition: all 0.3s ease;
     position: relative;
@@ -15,7 +16,7 @@
   }
 
   .card.--outlined {
-    border: 1px solid var(--color_on-bg);
+    border: 1px solid currentcolor;
     box-shadow: var(--shadow_s);
   }
 

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;

package/src/components/ui/Accordion/index.ts

@@ -1 +1,2 @@
 export { Accordion } from './Accordion';
+export type { AccordionItem } from './Accordion';

package/src/components/ui/Breadcrumb/Breadcrumb.tsx

@@ -1,7 +1,7 @@
 import css from './Breadcrumb.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 
-interface BreadcrumbItem {
+export interface BreadcrumbItem {
   label: string;
   href?: string;
 }
@@ -19,7 +19,7 @@ export function Breadcrumb({ items, className }: Readonly<BreadcrumbProps>) {
           const isLast = index === items.length - 1;
 
           return (
-            <li key={item.label} className={css.item}>
+            <li key={index} className={css.item}>
               {isLast ? (
                 <span aria-current="page" className={css.current}>
                   {item.label}

package/src/components/ui/Breadcrumb/index.ts

@@ -1 +1,2 @@
 export { Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbItem } from './Breadcrumb';

package/src/components/ui/Calendar/Calendar.tsx

@@ -23,10 +23,15 @@ function isSameDay(a: Date, b: Date): boolean {
     a.getDate() === b.getDate();
 }
 
+function toMidnight(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
 function isOutOfRange(date: Date, min?: Date, max?: Date): boolean {
-  if (min && date < min) return true;
-  if (max && date > max) return true;
-  return false;
+  const d = toMidnight(date);
+  if (min && d < toMidnight(min)) return true;
+  return !!(max && d > toMidnight(max));
+
 }
 
 function getDaysInMonth(year: number, month: number): number {

package/src/components/ui/DescriptionList/DescriptionList.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import css from './DescriptionList.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 
-interface DescriptionItem {
+export interface DescriptionItem {
   term: ReactNode;
   details: ReactNode | ReactNode[];
 }

package/src/components/ui/DescriptionList/index.ts

@@ -1 +1,2 @@
 export { DescriptionList } from './DescriptionList';
+export type { DescriptionItem } from './DescriptionList';

package/src/components/ui/Link/Link.tsx

@@ -7,6 +7,7 @@ type LinkOwnProps<T extends ElementType> = {
   children: ReactNode;
   variant?: 'default' | 'subtle' | 'standalone';
   external?: boolean;
+  externalLabel?: string;
   className?: string;
 };
 
@@ -18,6 +19,7 @@ export function Link<T extends ElementType = 'a'>({
   children,
   variant = 'default',
   external = false,
+  externalLabel = '(opens in new tab)',
   className,
   ...props
 }: LinkProps<T>) {
@@ -35,7 +37,7 @@ export function Link<T extends ElementType = 'a'>({
     >
       {children}
       {external && (
-        <span className={css.externalLabel}> (opens in new tab)</span>
+        <span className={css.externalLabel}>{externalLabel}</span>
       )}
     </Component>
   );

package/src/components/ui/Separator/Separator.module.css

@@ -1,7 +1,7 @@
 @layer component {
   .separator {
     border: none;
-    background-color: var(--separator_color, var(--color_border));
+    background-color: var(--separator_color, var(--color_on-bg));
   }
 
   .separator.--horizontal {

package/src/components/ui/Table/Table.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import css from './Table.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 
-interface TableColumn<Row> {
+export interface TableColumn<Row> {
   key: string;
   header: ReactNode;
   sortable?: boolean;

package/src/components/ui/Table/index.ts

@@ -1 +1,2 @@
 export { Table } from './Table';
+export type { TableColumn } from './Table';

package/src/components/ui/Tabs/Tabs.tsx

@@ -2,7 +2,7 @@ import { KeyboardEvent, ReactNode, useId, useRef, useState } from 'react';
 import css from './Tabs.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 
-interface TabItem {
+export interface TabItem {
   id: string;
   label: ReactNode;
   content: ReactNode;

package/src/components/ui/Tabs/index.ts

@@ -1 +1,2 @@
 export { Tabs } from './Tabs';
+export type { TabItem } from './Tabs';

package/src/index.ts

@@ -1,12 +1,15 @@
 // UI
 export { Accordion } from './components/ui/Accordion';
+export type { AccordionItem } from './components/ui/Accordion';
 export { Alert } from './components/ui/Alert';
 export { Avatar } from './components/ui/Avatar';
 export { Badge } from './components/ui/Badge';
 export { Breadcrumb } from './components/ui/Breadcrumb';
+export type { BreadcrumbItem } from './components/ui/Breadcrumb';
 export { Calendar } from './components/ui/Calendar';
 export { Carousel } from './components/ui/Carousel';
 export { DescriptionList } from './components/ui/DescriptionList';
+export type { DescriptionItem } from './components/ui/DescriptionList';
 export { Link } from './components/ui/Link';
 export { Loading } from './components/ui/Loading';
 export { NotificationBanner } from './components/ui/NotificationBanner';
@@ -17,7 +20,9 @@ export { Separator } from './components/ui/Separator';
 export { Skeleton } from './components/ui/Skeleton';
 export { SkipLink } from './components/ui/SkipLink';
 export { Table } from './components/ui/Table';
+export type { TableColumn } from './components/ui/Table';
 export { Tabs } from './components/ui/Tabs';
+export type { TabItem } from './components/ui/Tabs';
 export { Tooltip } from './components/ui/Tooltip';
 export { Typography } from './components/ui/Typography';
 
@@ -28,6 +33,7 @@ export type { CommandItem } from './components/interaction/Command';
 export { Dialog } from './components/interaction/Dialog';
 export { Drawer } from './components/interaction/Drawer';
 export { DropdownMenu } from './components/interaction/DropdownMenu';
+export type { DropdownMenuItem } from './components/interaction/DropdownMenu';
 export { Popover } from './components/interaction/Popover';
 export { Rating } from './components/interaction/Rating';
 export { ToastProvider, useToast } from './components/interaction/Toast';
@@ -35,11 +41,13 @@ export { ToastProvider, useToast } from './components/interaction/Toast';
 // Form
 export { Checkbox } from './components/interaction/form/Checkbox';
 export { Combobox } from './components/interaction/form/Combobox';
+export type { ComboboxOption } from './components/interaction/form/Combobox';
 export { FileInput } from './components/interaction/form/FileInput';
 export { FormInput } from './components/interaction/form/FormInput';
 export { NumberInput } from './components/interaction/form/NumberInput';
 export { Radio } from './components/interaction/form/Radio';
 export { Select } from './components/interaction/form/Select';
+export type { SelectOption } from './components/interaction/form/Select';
 export { Slider } from './components/interaction/form/Slider';
 export { Switch } from './components/interaction/form/Switch';
 export { Textarea } from './components/interaction/form/Textarea';