@bspk/ui 1.3.10 → 1.3.16

package/src/components/InputNumber/InputNumber.tsx

@@ -54,37 +54,28 @@ export type InputNumberProps = CommonProps<'size'> &
  *     import { InputNumber } from '@bspk/ui/InputNumber';
  *
  *     () => {
- *         const [state, setState] = useState<number | undefined>();
+ *         const [value, setValue] = useState<number | undefined>();
  *
  *         return (
- *             <>
- *                 // standalone input number example
- *                 <InputNumber
- *                     aria-label="Example aria-label"
- *                     name="example-name"
- *                     onChange={(nextValue) => setState(nextValue)}
- *                     value={state}
- *                 />
- *                 <br />
- *                 // input number used within a field
+ *             <div style={{ width: 320 }}>
  *                 <Field>
  *                     <FieldLabel>Example Input Number</FieldLabel>
  *                     <InputNumber
  *                         aria-label="Example aria-label"
  *                         name="example-name"
- *                         onChange={(nextValue) => setState(nextValue)}
- *                         value={state}
+ *                         onChange={(nextValue) => setValue(nextValue)}
+ *                         value={value}
  *                     />
  *                     <FieldDescription>
  *                         The input number allows you to increment or decrement a value.
  *                     </FieldDescription>
  *                 </Field>
- *             </>
+ *             </div>
  *         );
  *     };
  *
  * @name InputNumber
- * @phase UXReview
+ * @phase Stable
  */
 export function InputNumber({
     value: valueProp,

package/src/components/InputNumber/InputNumberExample.tsx

@@ -1,4 +1,6 @@
-import { InputNumberProps } from './InputNumber';
+import { useState } from 'react';
+import { InputNumber, InputNumberProps } from './InputNumber';
+import { Field, FieldLabel, FieldDescription } from '-/components/Field';
 import { ComponentExample } from '-/utils/demo';
 
 export const InputNumberExample: ComponentExample<InputNumberProps> = {
@@ -7,4 +9,25 @@ export const InputNumberExample: ComponentExample<InputNumberProps> = {
     },
     render: ({ props, Component }) => <Component {...props} />,
     variants: false,
+    sections: [],
+    containerStyle: { width: 320, padding: 0 },
+};
+
+export const Usage = () => {
+    const [value, setValue] = useState<number | undefined>();
+
+    return (
+        <div style={{ width: 320 }}>
+            <Field>
+                <FieldLabel>Example Input Number</FieldLabel>
+                <InputNumber
+                    aria-label="Example aria-label"
+                    name="example-name"
+                    onChange={(nextValue) => setValue(nextValue)}
+                    value={value}
+                />
+                <FieldDescription>The input number allows you to increment or decrement a value.</FieldDescription>
+            </Field>
+        </div>
+    );
 };

package/src/components/InputNumberField/InputNumberField.tsx

@@ -9,7 +9,7 @@ export type InputNumberFieldProps = FormFieldControlProps<InputNumberProps>;
  * This component takes properties from the FormField and InputNumber components.
  *
  * @name InputNumberField
- * @phase UXReview
+ * @phase Stable
  *
  * @generated
  */

package/src/components/InputPhone/InputPhone.tsx

@@ -10,13 +10,13 @@ import { Menu } from '-/components/Menu';
 import { useArrowNavigation } from '-/hooks/useArrowNavigation';
 import { useFloating } from '-/hooks/useFloating';
 import { useOutsideClick } from '-/hooks/useOutsideClick';
-import { useUIContext } from '-/hooks/useUIContext';
 import { FieldControlProps } from '-/types/common';
 import { countryCodeData, countryCodes, SupportedCountryCode } from '-/utils/countryCodes';
 import { getElementById } from '-/utils/dom';
 import { guessUserCountryCode } from '-/utils/guessUserCountryCode';
 import { handleKeyDown } from '-/utils/handleKeyDown';
 import { scrollListItemsStyle, ScrollListItemsStyleProps } from '-/utils/scrollListItemsStyle';
+import { sendAriaLiveMessage } from '-/utils/sendAriaLiveMessage';
 import { useIds } from '-/utils/useIds';
 
 const SELECT_OPTIONS = countryCodes.map((code) => {
@@ -58,34 +58,32 @@ export type InputPhoneProps = FieldControlProps<string, SupportedCountryCode> &
  *
  * @example
  *     import { InputPhone } from '@bspk/ui/InputPhone';
+ *     import { Field, FieldDescription, FieldLabel } from '@bspk/ui/Field';
  *
  *     () => {
- *         const [value, onChange] = useState<number | undefined>();
+ *         const [value, onChange] = useState<string | undefined>();
  *
  *         return (
- *             <>
- *                 // standalone input phone example
- *                 <InputPhone aria-label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />;
- *                 <br />
- *                 // input phone used within a field
+ *             <div style={{ width: 320 }}>
  *                 <Field>
  *                     <FieldLabel>Example Input Phone</FieldLabel>
  *                     <InputPhone
  *                         aria-label="Phone Number"
  *                         initialCountryCode="US"
- *                         value={value}
+ *                         name="example-name"
  *                         onChange={onChange}
+ *                         value={value}
  *                     />
  *                     <FieldDescription>
  *                         The phone input allows you to enter a phone number with country code.
  *                     </FieldDescription>
  *                 </Field>
- *             </>
+ *             </div>
  *         );
  *     };
  *
  * @name InputPhone
- * @phase UXReview
+ * @phase Stable
  */
 export function InputPhone({
     value,
@@ -155,19 +153,17 @@ export function InputPhone({
     }, [countryCode]);
 
     const handleChange = (newValue: string) => {
-        let rawNumber = newValue.replace(/\D/g, '');
-        if (rawNumber === value) return;
+        const numericChange = value?.replace(/\D/g, '') !== newValue?.replace(/\D/g, '');
 
-        if (!disableFormatting) {
+        // only format if the numeric value has changed
+        if (!disableFormatting && numericChange) {
             const formatter = new AsYouType(countryCode);
-            rawNumber = formatter.input(`${rawNumber}`);
+            newValue = formatter.input(`${newValue}`);
         }
 
-        onChange(rawNumber, countryCode);
+        onChange(newValue, countryCode);
     };
 
-    const { sendAriaLiveMessage } = useUIContext();
-
     return (
         <>
             <div
@@ -186,6 +182,7 @@ export function InputPhone({
                     containerRef={elements.setReference}
                     disabled={disabled}
                     id={id}
+                    inputMode="tel"
                     inputRef={(node) => {
                         inputRef?.(node);
                         inputInternalRef.current = node;
@@ -239,6 +236,10 @@ export function InputPhone({
                     }
                     name={name}
                     onChange={handleChange}
+                    onKeyDown={(event) => {
+                        // ignore non numeric keys
+                        if (event.key.length === 1 && !/[0-9]/.test(event.key)) event.preventDefault();
+                    }}
                     owner="input-phone"
                     readOnly={readOnly}
                     required={required}

package/src/components/InputPhone/InputPhoneExample.tsx

@@ -1,12 +1,37 @@
-import { InputPhoneProps } from '.';
-import { ComponentExample, Preset } from '-/utils/demo';
+import { useState } from 'react';
+import { InputPhone, InputPhoneProps } from '.';
+import { Field, FieldDescription, FieldLabel } from '-/components/Field';
+import { Preset, ComponentExample } from '-/utils/demo';
 
 export const presets: Preset<InputPhoneProps>[] = [];
 
 export const InputPhoneExample: ComponentExample<InputPhoneProps> = {
+    containerStyle: { width: 320, padding: 0 },
     defaultState: {
         'aria-label': 'input phone aria-label',
     },
     render: ({ props, Component }) => <Component {...props} />,
     variants: true,
 };
+
+export const Usage = () => {
+    const [value, onChange] = useState<string | undefined>();
+
+    return (
+        <div style={{ width: 320 }}>
+            <Field>
+                <FieldLabel>Example Input Phone</FieldLabel>
+                <InputPhone
+                    aria-label="Phone Number"
+                    initialCountryCode="US"
+                    name="example-name"
+                    onChange={onChange}
+                    value={value}
+                />
+                <FieldDescription>
+                    The phone input allows you to enter a phone number with country code.
+                </FieldDescription>
+            </Field>
+        </div>
+    );
+};

package/src/components/InputPhoneField/InputPhoneField.tsx

@@ -9,7 +9,7 @@ export type InputPhoneFieldProps = FormFieldControlProps<InputPhoneProps>;
  * This component takes properties from the FormField and InputPhone components.
  *
  * @name InputPhoneField
- * @phase UXReview
+ * @phase Stable
  *
  * @generated
  */

package/src/components/Link/Link.tsx

@@ -49,7 +49,7 @@ export type LinkProps = Pick<CommonPropsLibrary, 'disabled'> & {
  *     <Link href="https://anywhere.re" label="Example label" trailingIcon="external" />;
  *
  * @name Link
- * @phase UXReview
+ * @phase Stable
  */
 export function Link({ label, trailingIcon, size, variant, target = '_self', ...props }: ElementProps<LinkProps, 'a'>) {
     let LazyIcon: LazyExoticComponent<ComponentType<unknown>> | undefined = undefined;

package/src/components/ListItem/ListItem.tsx

@@ -133,7 +133,7 @@ export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'a
  *     </div>;
  *
  * @name ListItem
- * @phase UXReview
+ * @phase Stable
  */
 function ListItem<As extends ElementType = ElementType>({
     active,

package/src/components/Menu/Menu.tsx

@@ -42,8 +42,6 @@ export type MenuProps<As extends ElementType = ElementType> = CommonProps<'id' |
  * A container housing a simple list of options presented to the customer to select one option at a time.
  *
  * @example
- *     import React from 'react';
- *
  *     import { Menu } from '@bspk/ui/Menu';
  *
  *     <Menu>
@@ -53,7 +51,7 @@ export type MenuProps<As extends ElementType = ElementType> = CommonProps<'id' |
  *     </Menu>;
  *
  * @name Menu
- * @phase UXReview
+ * @phase Stable
  */
 export function Menu({ as, innerRef, id: idProp, children, owner, label, ...props }: ElementProps<MenuProps, 'div'>) {
     const menuId = useId(idProp);

package/src/components/Modal/Modal.tsx

@@ -4,8 +4,8 @@ import { ReactNode, useMemo, useRef } from 'react';
 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 { useEventListener } from '-/hooks/useEventListener';
 import { useUIContext } from '-/hooks/useUIContext';
 import { CallToActionButton } from '-/types/common';
 
@@ -109,8 +109,6 @@ export type ModalProps = Pick<
  * footer for the dialog.
  *
  * @example
- *     import React from 'react';
- *
  *     import { Button } from '@bspk/ui/Button';
  *     import { Modal } from '@bspk/ui/Modal';
  *
@@ -133,7 +131,7 @@ export type ModalProps = Pick<
  *     };
  *
  * @name Modal
- * @phase UXReview
+ * @phase Stable
  */
 export function Modal({
     header,

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

@@ -12,8 +12,10 @@ describe('OTPInput (RTL)', () => {
     });
 
     it('renders', () => {
-        const { getByLabelText } = render(<OTPInput onChange={() => {}} {...presets[0].propState} />);
+        const { getByLabelText } = render(
+            <OTPInput aria-label="OTP input" onChange={() => {}} {...presets[0].propState} />,
+        );
 
-        expect(getByLabelText('OTP digit 1')).toBeInTheDocument();
+        expect(getByLabelText('OTP input')).toBeInTheDocument();
     });
 });

package/src/components/OTPInput/OTPInput.tsx

@@ -1,9 +1,8 @@
 import './otp-input.scss';
-import { useRef } from 'react';
 import { useId } from '-/hooks/useId';
 import { CommonProps } from '-/types/common';
 
-export type OTPInputProps = CommonProps<'id' | 'invalid' | 'name' | 'size'> & {
+export type OTPInputProps = CommonProps<'aria-label' | 'id' | 'invalid' | 'name' | 'size'> & {
     /**
      * The value of the otp-input.
      *
@@ -26,6 +25,12 @@ export type OTPInputProps = CommonProps<'id' | 'invalid' | 'name' | 'size'> & {
      * @maximum 10
      */
     length?: number;
+    /**
+     * The mode of the otp-input.
+     *
+     * @default false
+     */
+    alphanumeric?: boolean;
 };
 
 /**
@@ -37,11 +42,11 @@ export type OTPInputProps = CommonProps<'id' | 'invalid' | 'name' | 'size'> & {
  *     () => {
  *         const [otpValue, setOtpValue] = useState('');
  *
- *         <OTPInput name="2-auth" length={4} value={otpValue} onChange={setOtpValue} />;
+ *         return <OTPInput name="2-auth" length={6} value={otpValue} onChange={setOtpValue} alphanumeric={false} />;
  *     };
  *
  * @name OTPInput
- * @phase UXReview
+ * @phase Stable
  */
 export function OTPInput({
     value: valueProp,
@@ -51,70 +56,32 @@ export function OTPInput({
     length = 6,
     size = 'medium',
     invalid = false,
+    alphanumeric = false,
+    'aria-label': ariaLabel = 'OTP input',
 }: 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());
+    const value = valueProp || '';
+    const activeIndex = Math.min(value.length, length - 1);
 
     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 data-bspk="otp-input" data-invalid={invalid || undefined} data-size={size || 'medium'} id={id}>
+            <input
+                aria-label={ariaLabel}
+                inputMode={alphanumeric ? 'text' : 'numeric'}
+                name={name}
+                onChange={(event) => {
+                    onChange(event.target.value.trim().toUpperCase().slice(0, length));
+                }}
+                type={alphanumeric ? 'text' : 'number'}
+                value={value}
+            />
+            <span data-digits>
+                {Array.from({ length }, (_, index) => (
+                    <span data-active={index === activeIndex || undefined} data-digit key={index}>
+                        {value[index]}
+                    </span>
+                ))}
+            </span>
         </div>
     );
 }

package/src/components/OTPInput/OTPInputExample.tsx

@@ -21,8 +21,12 @@ export const presets: Preset<OTPInputProps>[] = [
 ];
 
 export const OTPInputExample: ComponentExample<OTPInputProps> = {
-    containerStyle: { width: '100%' },
-    defaultState: {},
+    defaultState: {
+        value: '',
+        length: 6,
+        name: 'OTP Input',
+        alphanumeric: false,
+    },
     disableProps: [],
     presets,
     render: ({ props, Component }) => <Component {...props} />,

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

@@ -1,64 +1,69 @@
 [data-bspk='otp-input'] {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    gap: var(--spacing-sizing-02);
-    font: var(--font);
     width: fit-content;
+    position: relative;
 
-    [data-digit] {
+    input[inputMode] {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        border: none;
+        caret-color: transparent;
+    }
+
+    [data-digits] {
         display: flex;
-        align-items: center;
+        flex-direction: row;
         justify-content: center;
-        border-radius: var(--radius-sm);
-        border: 1px solid var(--stroke-neutral-base);
-        flex-grow: 1;
-        aspect-ratio: 1;
-        width: var(--width);
+        gap: var(--spacing-sizing-02);
+        font: var(--font);
+        width: fit-content;
         position: relative;
-        outline: none;
-
-        &:hover:not(:focus)::after {
-            background: var(--interaction-hover-opacity);
-            content: '';
-            position: absolute;
-            inset: 0;
-            border-radius: var(--radius-sm);
-        }
+        pointer-events: none;
 
-        &:active::after {
-            background: var(--interaction-press-opacity);
-            content: '';
-            position: absolute;
-            inset: 0;
+        [data-digit] {
+            display: flex;
+            flex-direction: row;
+            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;
+            text-align: center;
         }
+    }
 
-        &: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;
-                    }
+    input[inputMode]:focus + [data-digits] {
+        [data-digit] {
+            &[data-active] {
+                outline: solid 2px var(--stroke-neutral-focus);
 
-                    50% {
-                        opacity: 1;
-                    }
+                &: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);

package/src/components/PageControl/PageControl.tsx

@@ -43,7 +43,7 @@ export type DotSize = 'medium' | 'small' | 'x-small';
  *     <PageControl value={1} numPages={3} />;
  *
  * @name PageControl
- * @phase UXReview
+ * @phase Stable
  */
 export function PageControl({ currentPage: currentProp, numPages: numPagesProp, variant = 'flat' }: PageControlProps) {
     const numPages = Number(numPagesProp);

package/src/components/PageControl/PageControlExample.tsx

@@ -26,7 +26,6 @@ export const presets: Preset<PageControlProps>[] = [
 ];
 
 export const PageControlExample: ComponentExample<PageControlProps> = {
-    containerStyle: { width: '100%' },
     defaultState: {},
     disableProps: [],
     presets,

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

@@ -0,0 +1,18 @@
+import { PageHeader } from './PageHeader';
+import { presets } from './PageHeaderExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+describe('PageHeader (RTL)', () => {
+    presets.forEach((preset) => {
+        it(`has no basic a11y issues - ${preset.label}`, hasNoBasicA11yIssues(<PageHeader {...preset.propState} />));
+    });
+
+    it('renders', () => {
+        const { getByText } = render(<PageHeader {...presets[0].propState} />);
+
+        expect(getByText('Page Title')).toBeInTheDocument();
+    });
+});
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */