@bspk/ui 1.1.34 → 1.2.0

package/src/components/Modal/Modal.tsx

@@ -1,13 +1,14 @@
 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 { CallToActionButton } from '-/types/common';
+
 import './modal.scss';
 
 // This hook is used to set the height of the modal based on the dialog box height.
@@ -45,7 +46,7 @@ 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' | 'id' | 'innerRef' | 'onClose' | 'open' | 'owner'> & {
     /**
      * Modal header.
      *
@@ -133,9 +134,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,
@@ -179,36 +180,32 @@ function Modal({
             aria-label={header}
             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.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.tsx

@@ -1,13 +1,11 @@
-import { SvgAdd } from '@bspk/icons/Add';
-import { SvgRemove } from '@bspk/icons/Remove';
-import { useState } from 'react';
-
-import { CommonProps, InvalidPropsLibrary } from '-';
+import { useCallback, useState } from 'react';
+import { IncrementButton } from './IncrementButton';
 import { useId } from '-/hooks/useId';
-import { useLongPress } from '-/hooks/useLongPress';
+import { CommonProps, FormFieldControlProps } from '-/types/common';
+
 import './number-input.scss';
 
-const MAX = 99;
+const MAX = 100;
 const MIN = 0;
 
 const DEFAULT = {
@@ -24,8 +22,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;
         /**
@@ -45,8 +45,6 @@ export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'n
          * accepted.
          *
          * @default 99
-         * @maximum 99
-         * @minimum 1
          */
         max?: number;
         /**
@@ -54,7 +52,6 @@ export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'n
          * accepted.
          *
          * @default 0
-         * @minimum 0
          */
         min?: number;
     };
@@ -82,9 +79,9 @@ 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,
@@ -93,10 +90,13 @@ function NumberInput({
     readOnly = DEFAULT.readOnly,
     name,
     id: inputIdProp,
-    invalid,
     'aria-label': ariaLabel,
     max: maxProp,
     min: minProp,
+    invalid,
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
+    ...inputElementProps
 }: NumberInputProps) {
     const centered = align !== 'left';
     const inputId = useId(inputIdProp);
@@ -106,14 +106,23 @@ function NumberInput({
 
     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;
+        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 +134,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,20 +155,7 @@ 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)}
@@ -158,42 +164,22 @@ function NumberInput({
             {!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

@@ -16,21 +16,21 @@
     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 +41,10 @@
             width: var(--svg-width);
         }
 
+        &:focus {
+            outline: none;
+        }
+
         display: flex;
         justify-content: center;
         align-items: center;

package/src/components/OTPInput/OTPInput.tsx

@@ -0,0 +1,121 @@
+import { useRef } from 'react';
+import { useId } from '-/hooks/useId';
+import { CommonProps } from '-/types/common';
+
+import './otp-input.scss';
+
+export type OTPInputProps = CommonProps<'id' | 'invalid' | 'name' | 'size'> & {
+    /**
+     * The value of the otp-input.
+     *
+     * @example
+     *     867530;
+     *
+     * @required
+     */
+    value: string;
+    /**
+     * Callback when the value changes.
+     *
+     * @required
+     */
+    onChange: (value: string) => void;
+    /**
+     * The length of the otp-input.
+     *
+     * @default 6
+     * @maximum 10
+     */
+    length?: number;
+};
+
+/**
+ * A row of numerical input fields that are used to input a temporary secure pin code sent to the customer.
+ *
+ * @example
+ *     import { OTPInput } from '@bspk/ui/OTPInput';
+ *
+ *     function Example() {
+ *         return <OTPInput name="2-auth-otp" length={4} value={otpValue} onChange={setOtpValue} />;
+ *     }
+ *
+ * @name OTPInput
+ * @phase QA
+ */
+export function OTPInput({
+    value: valueProp,
+    onChange,
+    name,
+    id: idProp,
+    length = 6,
+    size = 'medium',
+    invalid = false,
+}: OTPInputProps) {
+    const id = useId(idProp);
+    const value = valueProp?.slice(0, length) || '';
+    const parentRef = useRef<HTMLDivElement | null>(null);
+
+    const element = (index: number) => parentRef.current?.children[index + 1] as HTMLElement;
+
+    const setIndex = (index: number, character: string) => {
+        const charArray = value.split('');
+        charArray[index] = character;
+        return charArray.join('');
+    };
+
+    const updateValue = (next: string) => onChange(next.slice(0, length).toUpperCase());
+
+    return (
+        <div
+            data-bspk="otp-input"
+            data-invalid={invalid || undefined}
+            data-size={size || 'medium'}
+            id={id}
+            ref={parentRef}
+        >
+            <input name={name} type="hidden" value={value} />
+            {Array.from({ length }, (_, index) => (
+                <span
+                    aria-label={`OTP digit ${index + 1}`}
+                    data-digit={index + 1}
+                    key={index}
+                    onClick={(e) => {
+                        if (value[index]) return;
+                        // if a digit does not exist for the previous index then focus the previous input
+                        if (!value[index - 1]) {
+                            e.preventDefault();
+                            element(value.length)?.focus();
+                        }
+                    }}
+                    onKeyDown={(event) => {
+                        if (event.key === 'Backspace') {
+                            if (value) {
+                                // delete the last value if there is one and focus the first empty input
+                                const next = value.slice(0, -1);
+                                updateValue(next);
+                                element(next.length)?.focus();
+                            }
+                        }
+
+                        // if a single character key is pressed at at the current index and focus the next input
+                        if (event.key.length === 1) {
+                            updateValue(setIndex(index, event.key));
+                            element(index + 1)?.focus();
+                        }
+                    }}
+                    onPaste={(event) => {
+                        const pastedData = event.clipboardData.getData('text').trim();
+                        updateValue(pastedData);
+                        element(length - 1)?.focus();
+                    }}
+                    role="textbox"
+                    tabIndex={0}
+                >
+                    {value?.[index] || ''}
+                </span>
+            ))}
+        </div>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/OTPInput/OTPInputExample.tsx

@@ -0,0 +1,26 @@
+import { OTPInputProps } from '.';
+import { ComponentExample } from '-/utils/demo';
+
+export const OTPInputExample: ComponentExample<OTPInputProps> = {
+    containerStyle: { width: '100%' },
+    defaultState: {},
+    disableProps: [],
+    presets: [
+        {
+            label: '4 Characters',
+            propState: {
+                value: '',
+                length: 4,
+            },
+        },
+        {
+            label: '6 Characters',
+            propState: {
+                value: '',
+                length: 6,
+            },
+        },
+    ],
+    render: ({ props, Component }) => <Component {...props} />,
+    sections: [],
+};

package/src/components/OTPInput/index.tsx

@@ -0,0 +1 @@
+export * from './OTPInput';