@bspk/ui 1.1.33 → 1.2.0

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

@@ -11,26 +11,26 @@
     font: var(--font);
     height: var(--height);
     border: 1px solid var(--stroke-neutral-base);
-    border-radius: var(--radius-small);
+    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 +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';

package/src/components/OTPInput/otp-input.scss

@@ -0,0 +1,87 @@
+[data-bspk='otp-input'] {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: var(--spacing-sizing-02);
+    font: var(--font);
+    width: fit-content;
+
+    [data-digit] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--radius-sm);
+        border: 1px solid var(--stroke-neutral-base);
+        flex-grow: 1;
+        aspect-ratio: 1;
+        width: var(--width);
+        position: relative;
+        outline: none;
+
+        &:hover:not(:focus)::after {
+            background: var(--interaction-hover-opacity);
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: var(--radius-sm);
+        }
+
+        &:active::after {
+            background: var(--interaction-press-opacity);
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: var(--radius-sm);
+        }
+
+        &:focus:not(:active) {
+            outline: solid 2px var(--stroke-neutral-focus);
+
+            &:empty::before {
+                // caret
+                content: '';
+                width: 2px;
+                height: calc(var(--caret-height) - 8px);
+                background: var(--stroke-neutral-high);
+                animation: blink-caret 1s step-end infinite;
+
+                @keyframes blink-caret {
+                    0%,
+                    100% {
+                        opacity: 0;
+                    }
+
+                    50% {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+    }
+
+    &[data-size='small'] {
+        --width: var(--spacing-sizing-08);
+        --font: var(--subheader-medium);
+        --caret-height: var(--subheader-medium-line-height);
+    }
+
+    &[data-size='medium'] {
+        --width: var(--spacing-sizing-10);
+        --font: var(--subheader-large);
+        --caret-height: var(--subheader-large-line-height);
+    }
+
+    &[data-size='large'] {
+        --width: var(--spacing-sizing-12);
+        --font: var(--subheader-x-large);
+        --caret-height: var(--subheader-x-large-line-height);
+    }
+
+    &[data-invalid] {
+        [data-digit] {
+            border-color: var(--status-error);
+        }
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/PageControl/PageControl.tsx

@@ -0,0 +1,98 @@
+import './page-control.scss';
+
+const MAX_DOT_COUNT = 5 as const;
+
+export type PageControlProps = {
+    /**
+     * The current page number.
+     *
+     * @example
+     *     1;
+     *
+     * @required
+     */
+    value: number;
+
+    /**
+     * The total number of pages.
+     *
+     * @example
+     *     5;
+     *
+     * @required
+     */
+    numPages: number;
+    /**
+     * The variant of the page-control.
+     *
+     * @default flat
+     */
+    variant?: 'flat' | 'floating';
+};
+
+type DotSize = 'medium' | 'small' | 'x-small';
+
+/**
+ * A visual indicator that displays a series of dots representing the number of pages or elements within a moving
+ * carousel or flow. The active page is often differentiated with a usage of a high contrasting color.
+ *
+ * @example
+ *     import { PageControl } from '@bspk/ui/PageControl';
+ *
+ *     function Example() {
+ *         return <PageControl value={1} numPages={3} />;
+ *     }
+ *
+ * @name PageControl
+ * @phase UXReview
+ */
+export function PageControl({ value, numPages, variant = 'flat' }: PageControlProps) {
+    if (numPages < 2) return null;
+
+    return (
+        <span
+            aria-label={`Page ${value} of ${numPages}`}
+            data-bspk="page-control"
+            data-variant={variant || undefined}
+            role="img"
+        >
+            {getDots(value, numPages).map(({ page, size }, index) => (
+                <span
+                    aria-hidden="true"
+                    data-active={page === Number(value) || undefined}
+                    data-dot={page}
+                    data-size={size}
+                    key={index + 1}
+                    role="presentation"
+                />
+            ))}
+        </span>
+    );
+}
+
+function getDots(currentPage: number, totalPages: number) {
+    if (totalPages <= MAX_DOT_COUNT) {
+        return Array.from({ length: totalPages }, (_, i) => ({
+            size: 'medium' as DotSize,
+            page: i + 1,
+        }));
+    }
+
+    const start = Math.max(1, Math.min(currentPage - 2, totalPages - 4));
+
+    const dots = Array.from({ length: MAX_DOT_COUNT }, (_, i) => {
+        const page = start + i;
+        let size: DotSize = 'medium';
+
+        if (i === 0 && page > 1) size = page > 1 ? 'x-small' : 'small';
+        if (i === 1 && page > 2) size = 'small';
+        if (i === 3 && page < totalPages - 1) size = 'small';
+        if (i === 4 && page < totalPages) size = page < totalPages ? 'x-small' : 'small';
+
+        return { page, size };
+    });
+
+    return dots;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/PageControl/index.tsx

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

package/src/components/PageControl/page-control.scss

@@ -0,0 +1,38 @@
+[data-bspk='page-control'] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-radius: var(--radius-full);
+    border: 1px solid var(--stroke-neutral-low);
+    padding: var(--spacing-sizing-02);
+    gap: var(--spacing-sizing-02);
+    width: fit-content;
+    background-color: var(--surface-neutral-t1-base);
+
+    [data-dot] {
+        background-color: var(--surface-neutral-t3-low);
+        border-radius: var(--radius-full);
+        width: var(--spacing-sizing-02);
+        height: var(--spacing-sizing-02);
+
+        &[data-active] {
+            background-color: var(--foreground-brand-primary);
+        }
+
+        &[data-size='x-small'] {
+            width: var(--spacing-sizing-01);
+            height: var(--spacing-sizing-01);
+        }
+
+        &[data-size='small'] {
+            width: 6px;
+            height: 6px;
+        }
+    }
+
+    &[data-variant='floating'] {
+        box-shadow: var(--drop-shadow-float);
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Pagination/PageInput.tsx

@@ -0,0 +1,65 @@
+import { FC, useEffect, useState } from 'react';
+
+import { PaginationProps } from './Pagination';
+import { TextInput } from '-/components/TextInput';
+import { Txt } from '-/components/Txt';
+
+type PageInputProps = Pick<PaginationProps, 'numPages' | 'onChange' | 'value'>;
+
+export const PageInput: FC<PageInputProps> = ({ numPages, onChange, value }) => {
+    const [page, setPage] = useState<string>(String(value));
+
+    useEffect(() => {
+        const stringValue = String(value);
+
+        if (stringValue !== page) {
+            setPage(stringValue);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+
+    const handleChange = (val: string) => {
+        const pageNumber = parseInt(val, 10);
+        const isValidPageNumber = !isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= numPages;
+
+        if (isValidPageNumber || val === '') {
+            setPage(val);
+        }
+    };
+
+    const handleSubmit = () => {
+        const pageNumber = parseInt(page, 10);
+
+        if (!isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= numPages) {
+            onChange(pageNumber);
+        } else {
+            setPage(String(value));
+        }
+    };
+
+    const pageCountMessage = `of ${numPages}`;
+
+    return (
+        <form
+            onSubmit={(e) => {
+                e.preventDefault();
+                handleSubmit();
+            }}
+            style={{ display: 'contents' }}
+        >
+            <div data-bspk="page-input">
+                <TextInput
+                    aria-label="Page input"
+                    name="page-input"
+                    onBlur={handleSubmit}
+                    onChange={handleChange}
+                    showClearButton={false}
+                    size="small"
+                    value={page}
+                />
+
+                <Txt variant="body-small">{pageCountMessage}</Txt>
+            </div>
+        </form>
+    );
+};