@bspk/ui 1.1.34 → 1.3.0

package/src/components/Modal/Modal.rtl.test.tsx

@@ -0,0 +1,20 @@
+import { Modal } from './Modal';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <Modal description="Example description" disableFocusTrap header="Example header" onClose={() => {}} open>
+        Example Modal
+        <button type="button">Hello</button>
+    </Modal>
+);
+
+describe('Modal (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByText } = render(<TestBed />);
+
+        expect(getByText('Example Modal')).toBeInTheDocument();
+    });
+});

package/src/components/Modal/Modal.tsx

@@ -1,14 +1,13 @@
+import './modal.scss';
 import { SvgClose } from '@bspk/icons/Close';
 import { ReactNode, useMemo, useRef } from 'react';
-
-import { CallToActionButton } from '-';
 import { Button, ButtonProps } from '-/components/Button';
 import { DialogProps, Dialog } from '-/components/Dialog';
 import { Txt } from '-/components/Txt';
 import { useEventListener } from '-/hooks/useAddEventListener';
 import { useDebounceCallback } from '-/hooks/useDebounceCallback';
 import { useUIContext } from '-/hooks/useUIContext';
-import './modal.scss';
+import { CallToActionButton } from '-/types/common';
 
 // This hook is used to set the height of the modal based on the dialog box height.
 // It listens to the resize event and updates the modal height accordingly.
@@ -45,7 +44,10 @@ function useDialogHeight() {
 
 export type ModalCallToAction = Pick<ButtonProps, 'destructive'> & Pick<CallToActionButton, 'label' | 'onClick'>;
 
-export type ModalProps = Pick<DialogProps, 'data-bspk-owner' | 'id' | 'innerRef' | 'onClose' | 'open'> & {
+export type ModalProps = Pick<
+    DialogProps,
+    'container' | 'disableFocusTrap' | 'id' | 'innerRef' | 'onClose' | 'open' | 'owner'
+> & {
     /**
      * Modal header.
      *
@@ -117,7 +119,7 @@ export type ModalProps = Pick<DialogProps, 'data-bspk-owner' | 'id' | 'innerRef'
  *
  *         return (
  *             <>
- *                 <Button label="Open Dialog" onClick={() => setOpen(true)} />
+ *                 <Button label="Open Modal" onClick={() => setOpen(true)} />
  *                 <Modal
  *                     description="Example description"
  *                     header="Example header"
@@ -133,9 +135,9 @@ export type ModalProps = Pick<DialogProps, 'data-bspk-owner' | 'id' | 'innerRef'
  * @ignoreRefs ButtonProps
  *
  * @name Modal
- * @phase WorkInProgress
+ * @phase UXReview
  */
-function Modal({
+export function Modal({
     header,
     description,
     children,
@@ -143,6 +145,7 @@ function Modal({
     cancelButton,
     buttonFormat = 'horizontal',
     innerRef,
+    disableFocusTrap,
     ...dialogProps
 }: ModalProps) {
     const { isMobile } = useUIContext();
@@ -177,38 +180,35 @@ function Modal({
             {...dialogProps}
             aria-description={description}
             aria-label={header}
+            disableFocusTrap={disableFocusTrap}
             innerRef={setModalRefs}
             placement="center"
-            showScrim={true}
+            showScrim
         >
             <div data-bspk="modal" ref={(node) => innerRef?.(node)} style={{ visibility: 'hidden' }}>
-                <header>
+                <div data-modal-header>
                     <Txt as="div" data-dialog-title variant="heading-h4">
                         {header}
                     </Txt>
                     <Button
                         icon={<SvgClose />}
+                        iconOnly
                         label="close"
                         onClick={dialogProps.onClose}
-                        showLabel={false}
                         variant="tertiary"
                     />
-                </header>
-                <main>{children}</main>
+                </div>
+                <div data-modal-main>{children}</div>
                 {Array.isArray(buttons) && buttons.length > 0 && (
-                    <footer data-button-format={buttonFormat}>
+                    <div data-button-format={buttonFormat} data-modal-footer>
                         {buttons.map((buttonProps, idx) => (
                             <Button key={idx} {...buttonProps} size={isMobile ? 'medium' : 'small'} />
                         ))}
-                    </footer>
+                    </div>
                 )}
             </div>
         </Dialog>
     );
 }
 
-Modal.bspkName = 'Modal';
-
-export { Modal };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Modal/ModalExample.tsx

@@ -1,15 +1,13 @@
+import { ModalProps, Modal } from '.';
 import { Button } from '-/components/Button';
 import { Checkbox } from '-/components/Checkbox';
 import { ListItem } from '-/components/ListItem';
 import { ComponentExampleFn } from '-/utils/demo';
 
-import { ModalProps, Modal } from '.';
-
 export const ModalExample: ComponentExampleFn<ModalProps> = ({ action }) => ({
-    hideVariants: true,
+    variants: false,
     render: ({ props, setState }) => {
         const label = 'Open Modal';
-
         const { children, ...modalProps } = props;
 
         return (
@@ -60,6 +58,7 @@ export const ModalExample: ComponentExampleFn<ModalProps> = ({ action }) => ({
                             .fill('')
                             .map((_, index) => (
                                 <ListItem
+                                    as="label"
                                     key={`key${index}`}
                                     label={`Option ${index + 1}`}
                                     onClick={() => action(`Option ${index + 1} clicked`)}

package/src/components/Modal/modal.scss

@@ -3,9 +3,13 @@
     display: flex;
     flex-direction: column;
     gap: var(--spacing-sizing-02);
-    padding: var(--spacing-sizing-04);
+    padding: var(--spacing-sizing-05);
 
-    > header {
+    [data-screen-size='small'] & {
+        padding: var(--spacing-sizing-04);
+    }
+
+    > [data-modal-header] {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
@@ -13,35 +17,18 @@
         gap: var(--spacing-sizing-04);
     }
 
-    main {
+    [data-modal-main] {
         flex: 1;
         overflow-y: auto;
         max-height: fit-content;
     }
 
-    > footer {
+    > [data-modal-footer] {
         display: flex;
         flex-direction: row-reverse;
         justify-content: flex-start;
         gap: var(--spacing-sizing-04);
     }
-
-    // we make the width responsive to the viewport
-    @media (width < 640px) {
-        > footer {
-            [data-bspk='button'] {
-                width: 50%;
-            }
-
-            &[data-button-format='vertical'] {
-                flex-direction: column-reverse;
-
-                [data-bspk='button'] {
-                    width: 100%;
-                }
-            }
-        }
-    }
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/NumberField/NumberField.rtl.test.tsx

@@ -0,0 +1,24 @@
+import { NumberField } from './NumberField';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <NumberField
+        aria-label="Example label"
+        controlId="Example controlId"
+        label="Example label"
+        name="Example name"
+        onChange={() => {}}
+        value={24}
+    />
+);
+
+describe('NumberField (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Example label')).toBeInTheDocument();
+    });
+});

package/src/components/NumberField/NumberField.tsx

@@ -1,22 +1,7 @@
-import { FormFieldProps, FormField } from '-/components/FormField';
+import { FormField, FormFieldWrapProps } from '-/components/FormField';
 import { NumberInputProps, NumberInput } from '-/components/NumberInput';
 
-export type NumberFieldProps = Pick<
-    NumberInputProps,
-    | 'align'
-    | 'disabled'
-    | 'errorMessage'
-    | 'id'
-    | 'invalid'
-    | 'max'
-    | 'min'
-    | 'name'
-    | 'onChange'
-    | 'readOnly'
-    | 'size'
-    | 'value'
-> &
-    Pick<FormFieldProps, 'controlId' | 'helperText' | 'label' | 'labelTrailing' | 'required'>;
+export type NumberFieldProps = FormFieldWrapProps<NumberInputProps>;
 
 /**
  * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
@@ -44,36 +29,42 @@ export type NumberFieldProps = Pick<
  *     }
  *
  * @name NumberField
- * @phase DesignReview
+ * @phase UXReview
  */
-function NumberField({
+export function NumberField({
     label,
-    errorMessage: errorMessageProp,
+    errorMessage,
+    disabled,
     helperText,
     controlId,
     labelTrailing,
     required,
+    invalid,
     ...inputProps
 }: NumberFieldProps) {
-    const errorMessage = (!inputProps.readOnly && !inputProps.disabled && errorMessageProp) || undefined;
-
     return (
         <FormField
             controlId={controlId}
             data-bspk="number-field"
             errorMessage={errorMessage}
             helperText={helperText}
+            invalid={invalid}
             label={label}
             labelTrailing={labelTrailing}
             required={required}
         >
-            {(fieldProps) => <NumberInput {...inputProps} {...fieldProps} aria-label={label} id={controlId} />}
+            {(fieldProps) => (
+                <NumberInput
+                    {...inputProps}
+                    {...fieldProps}
+                    aria-label={label}
+                    disabled={disabled}
+                    id={controlId}
+                    invalid={invalid}
+                />
+            )}
         </FormField>
     );
 }
 
-NumberField.bspkName = 'NumberField';
-
-export { NumberField };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/NumberInput/IncrementButton.tsx

@@ -0,0 +1,31 @@
+import { SvgAdd } from '@bspk/icons/Add';
+import { SvgRemove } from '@bspk/icons/Remove';
+import { useLongPress } from '-/hooks/useLongPress';
+
+export type IncrementButtonProps = {
+    disabled: boolean;
+    increment: -1 | 1;
+    onIncrement: (increment: -1 | 1) => void;
+    inputId: string;
+};
+
+export function IncrementButton({ increment, disabled, onIncrement, inputId }: IncrementButtonProps) {
+    const add = increment === 1;
+
+    const { setTriggerElement, ...handlers } = useLongPress(() => onIncrement(increment), disabled);
+
+    return (
+        <button
+            {...handlers}
+            aria-controls={inputId}
+            aria-hidden="true"
+            data-increment={increment}
+            disabled={disabled}
+            ref={setTriggerElement}
+            tabIndex={-1}
+            type="button"
+        >
+            {add ? <SvgAdd /> : <SvgRemove />}
+        </button>
+    );
+}

package/src/components/NumberInput/NumberInput.rtl.test.tsx

@@ -0,0 +1,15 @@
+import { NumberInput } from './NumberInput';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => <NumberInput aria-label="Example label" name="Example name" onChange={() => {}} value={24} />;
+
+describe('NumberInput (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByLabelText } = render(<TestBed />);
+
+        expect(getByLabelText('Example label')).toBeInTheDocument();
+    });
+});

package/src/components/NumberInput/NumberInput.tsx

@@ -1,21 +1,8 @@
-import { SvgAdd } from '@bspk/icons/Add';
-import { SvgRemove } from '@bspk/icons/Remove';
-import { useState } from 'react';
-
-import { CommonProps, InvalidPropsLibrary } from '-';
-import { useId } from '-/hooks/useId';
-import { useLongPress } from '-/hooks/useLongPress';
 import './number-input.scss';
-
-const MAX = 99;
-const MIN = 0;
-
-const DEFAULT = {
-    align: 'center',
-    size: 'medium',
-    disabled: false,
-    readOnly: false,
-} as const;
+import { useCallback, useState } from 'react';
+import { IncrementButton } from './IncrementButton';
+import { useId } from '-/hooks/useId';
+import { CommonProps, FormFieldControlProps } from '-/types/common';
 
 function isNumber(value: unknown, fallbackValue: number | undefined = undefined): number | undefined {
     if (typeof value === 'number') return value;
@@ -24,8 +11,10 @@ function isNumber(value: unknown, fallbackValue: number | undefined = undefined)
     return isNaN(num) ? fallbackValue : num;
 }
 
-export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'size'> &
-    InvalidPropsLibrary & {
+export type NumberInputProps = CommonProps<
+    'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'
+> &
+    FormFieldControlProps & {
         /** The value of the control. */
         value?: number | string;
         /**
@@ -43,10 +32,6 @@ export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'n
         /**
          * Defines the [maximum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max) value that is
          * accepted.
-         *
-         * @default 99
-         * @maximum 99
-         * @minimum 1
          */
         max?: number;
         /**
@@ -54,9 +39,14 @@ export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'n
          * accepted.
          *
          * @default 0
-         * @minimum 0
          */
         min?: number;
+        /**
+         * The amount to increment or decrement the value by when the (+) or (-) buttons are pressed.
+         *
+         * @default 1
+         */
+        step?: number;
     };
 
 /**
@@ -82,38 +72,50 @@ export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'n
  *     }
  *
  * @name NumberInput
- * @phase DesignReview
+ * @phase Utility
  */
-function NumberInput({
+export function NumberInput({
     value,
     onChange,
-    align = DEFAULT.align,
-    size = DEFAULT.size,
-    disabled = DEFAULT.disabled,
-    readOnly = DEFAULT.readOnly,
+    align = 'center',
+    size = 'medium',
+    disabled = false,
+    readOnly = false,
     name,
     id: inputIdProp,
-    invalid,
     'aria-label': ariaLabel,
     max: maxProp,
-    min: minProp,
+    min = 0,
+    invalid,
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
+    step = 1,
+    ...inputElementProps
 }: NumberInputProps) {
+    const max = typeof maxProp === 'number' && maxProp >= min ? maxProp : Number.MAX_SAFE_INTEGER;
     const centered = align !== 'left';
     const inputId = useId(inputIdProp);
-    const max = Math.min(MAX, isNumber(maxProp) || MAX);
-    const min = Math.max(MIN, isNumber(minProp) || MIN);
     const valueNumber = isNumber(value) || 0;
 
     const [inputElement, setInputElement] = useState<HTMLInputElement | null>(null);
 
-    const onIncrement = (increment: -1 | 1) => {
-        let nextValue = (isNumber(inputElement!.value) || 0) + increment;
-        if (nextValue > max) nextValue = max;
-        if (nextValue < min) nextValue = min;
-        inputElement!.value = String(nextValue);
-        onChange(nextValue);
+    const handleIncrement = (increment: -1 | 1) => {
+        if (!inputElement) return;
+        const nextValue = (isNumber(inputElement.value) || 0) + increment * step;
+        handleUpdate(nextValue);
     };
 
+    const handleUpdate = useCallback(
+        (nextValue: number | undefined) => {
+            if (!inputElement) return;
+            let nextVal = isNumber(nextValue);
+            if (nextVal !== undefined) nextVal = Math.min(Math.max(nextVal, min), max);
+            onChange(nextVal);
+            inputElement.value = nextVal?.toString() || '';
+        },
+        [inputElement, min, max, onChange],
+    );
+
     return (
         <div
             data-bspk="number-input"
@@ -125,10 +127,20 @@ function NumberInput({
             data-stepper-input
         >
             {!!centered && (
-                <IncrementButton disabled={valueNumber + -1 < min} increment={-1} onIncrement={onIncrement} />
+                <IncrementButton
+                    disabled={disabled ? true : valueNumber + -1 < min}
+                    increment={-1}
+                    inputId={inputId}
+                    onIncrement={handleIncrement}
+                />
             )}
             <input
+                {...inputElementProps}
+                aria-describedby={ariaDescribedBy || undefined}
+                aria-errormessage={ariaErrorMessage || undefined}
+                aria-invalid={invalid}
                 aria-label={ariaLabel}
+                autoComplete="off"
                 defaultValue={String(valueNumber)}
                 disabled={disabled}
                 id={inputId}
@@ -136,64 +148,32 @@ function NumberInput({
                 min={min}
                 name={name}
                 onBlur={() => {
-                    if (!inputElement) return;
-
-                    let nextValue = isNumber(inputElement.value);
-
-                    if (typeof nextValue === 'undefined') {
-                        onChange(undefined);
-                        inputElement.value = '';
-                        return;
-                    }
-
-                    nextValue = Math.max(min, nextValue);
-                    nextValue = Math.min(max || 99, nextValue);
-                    onChange(nextValue);
-                    inputElement.value = nextValue.toString();
+                    handleUpdate(isNumber(inputElement?.value));
                 }}
                 readOnly={readOnly}
                 ref={(node) => node && setInputElement(node)}
+                step={step}
                 type="number"
             />
             {!centered && (
                 <>
                     <div aria-hidden data-divider />
-                    <IncrementButton disabled={valueNumber + -1 < min} increment={-1} onIncrement={onIncrement} />
+                    <IncrementButton
+                        disabled={disabled ? true : valueNumber + -1 < min}
+                        increment={-1}
+                        inputId={inputId}
+                        onIncrement={handleIncrement}
+                    />
                 </>
             )}
-            <IncrementButton disabled={valueNumber + 1 > max} increment={1} onIncrement={onIncrement} />
+            <IncrementButton
+                disabled={disabled ? true : valueNumber + 1 > max}
+                increment={1}
+                inputId={inputId}
+                onIncrement={handleIncrement}
+            />
         </div>
     );
 }
 
-type IncrementButtonProps = {
-    disabled: boolean;
-    increment: -1 | 1;
-    onIncrement: (increment: -1 | 1) => void;
-};
-
-// eslint-disable-next-line react/no-multi-comp
-function IncrementButton({ increment, disabled, onIncrement }: IncrementButtonProps) {
-    const add = increment === 1;
-
-    const { setTriggerElement, ...handlers } = useLongPress(() => onIncrement(increment), disabled);
-
-    return (
-        <button
-            aria-label={`${add ? 'Increase' : 'Decrease'} value`}
-            data-increment={increment}
-            disabled={disabled}
-            ref={setTriggerElement}
-            type="button"
-            {...handlers}
-        >
-            {add ? <SvgAdd /> : <SvgRemove />}
-        </button>
-    );
-}
-
-NumberInput.bspkName = 'NumberInput';
-
-export { NumberInput };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/NumberInput/NumberInputExample.tsx

@@ -0,0 +1,6 @@
+import { NumberInputProps } from './NumberInput';
+import { ComponentExample } from '-/utils/demo';
+
+export const NumberInputExample: ComponentExample<NumberInputProps> = {
+    render: ({ props, Component }) => <Component {...props} />,
+};

package/src/components/NumberInput/number-input.scss

@@ -13,24 +13,23 @@
     border: 1px solid var(--stroke-neutral-base);
     border-radius: var(--radius-sm);
     background: var(--surface-neutral-t1-base);
-    max-width: 280px;
 
     &:focus-within {
-        border-color: var(--stroke-brand-primary);
+        outline: solid 2px var(--stroke-neutral-focus);
     }
 
     [data-divider] {
-        width: 4px;
-        border-right: 1px solid var(--stroke-neutral-base);
+        width: 1px;
+        background: var(--stroke-neutral-base);
+        margin: 3px 0;
 
         // account for border - 3(margin)  * 2 + 2(border)
         height: calc(var(--height) - 8px);
-        margin: 3px 0;
     }
 
     button {
         width: var(--height);
-        height: var(--height);
+        height: calc(var(--height) - 2px);
         background: none;
         border: none;
         cursor: pointer;
@@ -41,6 +40,10 @@
             width: var(--svg-width);
         }
 
+        &:focus {
+            outline: none;
+        }
+
         display: flex;
         justify-content: center;
         align-items: center;

package/src/components/OTPInput/OTPInput.rtl.test.tsx

@@ -0,0 +1,19 @@
+import { OTPInput } from './OTPInput';
+import { presets } from './OTPInputExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+describe('OTPInput (RTL)', () => {
+    presets.forEach((preset) => {
+        it(
+            `has no basic a11y issues - ${preset.label}`,
+            hasNoBasicA11yIssues(<OTPInput onChange={() => {}} {...preset.propState} />),
+        );
+    });
+
+    it('renders', () => {
+        const { getByLabelText } = render(<OTPInput onChange={() => {}} {...presets[0].propState} />);
+
+        expect(getByLabelText('OTP digit 1')).toBeInTheDocument();
+    });
+});