@bspk/ui 1.1.34 → 1.2.0

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>
+    );
+};

package/src/components/Pagination/PageList.tsx

@@ -0,0 +1,21 @@
+import { PaginationProps } from './Pagination';
+import { Button } from '-/components/Button';
+
+export type PageListProps = Pick<PaginationProps, 'numPages' | 'onChange' | 'value'>;
+
+export function PageList({ numPages, onChange, value }: PageListProps) {
+    return Array.from({ length: numPages }, (_, index) => {
+        const page = index + 1;
+        return (
+            <Button
+                aria-label={`Page ${page}`}
+                key={page}
+                label={String(page)}
+                onClick={() => onChange(page)}
+                owner="pagination"
+                size="small"
+                variant={value === page ? 'primary' : 'tertiary'}
+            />
+        );
+    });
+}

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,104 @@
+import { SvgIcon } from '@bspk/icons/SvgIcon';
+
+import './pagination.scss';
+import { AriaAttributes } from 'react';
+import { PageInput } from './PageInput';
+import { PageList } from './PageList';
+import { Button } from '-/components/Button';
+
+// After this point the manual input renders. With equal or fewer pages the individual page buttons render instead.
+const INPUT_TYPE_THRESHOLD = 7;
+
+export type PaginationProps = {
+    /**
+     * The number of pages to display in the pagination component.
+     *
+     * @default 1
+     */
+    numPages: number;
+    /**
+     * The current page number.
+     *
+     * @default 1
+     */
+    value: number;
+
+    /** Called when the page changes. */
+    onChange: (newPageNumber: number) => void;
+};
+
+/**
+ * A navigation component that allows customers to move between a range of listed content within a page into smaller
+ * multiple micro pages.
+ *
+ * @example
+ *     import { Pagination } from '@bspk/ui/Pagination';
+ *     import { usePaginationState } from '@bspk/ui/hooks/usePaginationState';
+ *
+ *     function Example() {
+ *         const numPages = 10;
+ *
+ *         const { currentPage, setCurrentPage } = usePaginationState(numPages);
+ *
+ *         return (
+ *             <Pagination value={currentPage} onChange={setCurrentPage} numPages={numPages}>
+ *                 Example Pagination
+ *             </Pagination>
+ *         );
+ *     }
+ *
+ * @name Pagination
+ * @phase UXReview
+ */
+export function Pagination({ numPages, value, onChange, ...ariaProps }: AriaAttributes & PaginationProps) {
+    const nextPage = () => {
+        if (value < numPages) {
+            onChange(value + 1);
+        }
+    };
+
+    const previousPage = () => {
+        if (value > 1) {
+            onChange(value - 1);
+        }
+    };
+
+    const isFirstPage = value === 1;
+    const isLastPage = value === numPages;
+    const isOutOfBoundsValue = value < 1 || value > numPages;
+    const isOneOrFewerPages = numPages <= 1;
+
+    return (
+        <span data-bspk="pagination" role="group" {...ariaProps}>
+            <Button
+                disabled={isOutOfBoundsValue || isOneOrFewerPages || isFirstPage}
+                icon={<SvgIcon name="ChevronLeft" />}
+                iconOnly
+                label={isFirstPage ? 'First page' : `Previous page (${value - 1})`}
+                onClick={previousPage}
+                owner="pagination"
+                size="small"
+                variant="tertiary"
+            />
+
+            {numPages > INPUT_TYPE_THRESHOLD ? (
+                <PageInput numPages={numPages} onChange={onChange} value={value} />
+            ) : (
+                <PageList numPages={numPages} onChange={onChange} value={value} />
+            )}
+
+            <Button
+                disabled={isOutOfBoundsValue || isOneOrFewerPages || isLastPage}
+                icon={<SvgIcon name="ChevronRight" />}
+                iconOnly
+                label={isLastPage ? 'Last page' : `Next page (${value + 1})`}
+                onClick={nextPage}
+                owner="pagination"
+                size="small"
+                variant="tertiary"
+            />
+        </span>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Pagination/index.tsx

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

package/src/components/Pagination/pagination.scss

@@ -0,0 +1,36 @@
+[data-bspk='pagination'] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-sizing-01);
+    flex: 1;
+
+    [data-bspk='page-input'] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: var(--spacing-sizing-01);
+
+        [data-bspk='txt'] {
+            color: var(--foreground-neutral-on-surface-variant-02);
+            text-wrap: nowrap;
+        }
+
+        [data-bspk='text-input'] {
+            width: var(--spacing-sizing-12);
+
+            input {
+                text-align: center;
+                flex: 1;
+            }
+        }
+    }
+
+    button[data-bspk-owner='pagination'][data-bspk='button'][data-size='small'] {
+        padding: 6px 0;
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/PasswordField/PasswordField.tsx

@@ -0,0 +1,68 @@
+import { FormField, FormFieldWrapProps } from '-/components/FormField';
+import { PasswordInputProps, PasswordInput } from '-/components/PasswordInput';
+
+export type PasswordFieldProps = FormFieldWrapProps<PasswordInputProps>;
+
+/**
+ * A text input that allows users to enter text, numbers or symbols in a singular line.
+ *
+ * This component takes properties from the FormField and PasswordInput components.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { PasswordField } from '@bspk/ui/PasswordField';
+ *
+ *     export function Example() {
+ *         const [value, setValue] = useState<string>('');
+ *
+ *         return (
+ *             <PasswordField
+ *                 controlId="Example controlId"
+ *                 label="Example label"
+ *                 name="Example name"
+ *                 onChange={setValue}
+ *                 value={value}
+ *             />
+ *         );
+ *     }
+ *
+ * @name PasswordField
+ * @phase QA
+ */
+export function PasswordField({
+    controlId,
+    errorMessage,
+    helperText,
+    invalid,
+    label,
+    labelTrailing,
+    required,
+    ...inputProps
+}: PasswordFieldProps) {
+    return (
+        <FormField
+            controlId={controlId}
+            data-bspk="password-field"
+            errorMessage={errorMessage}
+            helperText={helperText}
+            invalid={invalid}
+            label={label}
+            labelTrailing={labelTrailing}
+            required={required}
+        >
+            {(fieldProps) => (
+                <PasswordInput
+                    {...inputProps}
+                    {...fieldProps}
+                    aria-label={label}
+                    id={controlId}
+                    invalid={invalid}
+                    required={required}
+                    value={inputProps.value ?? ''}
+                />
+            )}
+        </FormField>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/PasswordField/index.tsx

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

package/src/components/PasswordInput/PasswordInput.tsx

@@ -0,0 +1,115 @@
+import { useState } from 'react';
+import './password-input.scss';
+import { Button } from '-/components/Button';
+import { TextInput, TextInputProps } from '-/components/TextInput';
+
+export type PasswordInputProps = Pick<
+    TextInputProps,
+    | 'aria-describedby'
+    | 'aria-errormessage'
+    | 'aria-label'
+    | 'containerRef'
+    | 'disabled'
+    | 'id'
+    | 'inputProps'
+    | 'inputRef'
+    | 'invalid'
+    | 'name'
+    | 'onChange'
+    | 'readOnly'
+    | 'required'
+    | 'size'
+    | 'value'
+>;
+
+/**
+ * An input field that is specifically built with a show/hide toggle for entering security passwords.
+ *
+ * @example
+ *     import { PasswordInput } from '@bspk/ui/PasswordInput';
+ *     import { useState } from 'react';
+ *
+ *     function Example() {
+ *         const [value, setValue] = useState('');
+ *
+ *         return <PasswordInput value={value} onChange={setValue} aria-label="password" name="password" />;
+ *     }
+ *
+ * @name PasswordInput
+ * @phase QA
+ */
+export function PasswordInput({
+    disabled,
+    readOnly,
+    size = 'medium',
+    'aria-label': ariaLabel,
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
+    inputProps,
+    inputRef,
+    name,
+    onChange,
+    required,
+    value,
+    containerRef,
+    id,
+    invalid,
+    ...props
+}: PasswordInputProps) {
+    const [isShowingPassword, setIsShowingPassword] = useState(false);
+
+    const togglePasswordVisibility = () => {
+        if (disabled || readOnly) return;
+        setIsShowingPassword((prev) => !prev);
+    };
+
+    return (
+        <div {...props} data-bspk="password-input">
+            <TextInput
+                aria-describedby={ariaDescribedBy}
+                aria-errormessage={ariaErrorMessage}
+                aria-label={ariaLabel}
+                autoComplete="off"
+                containerRef={containerRef}
+                disabled={disabled}
+                id={id}
+                inputProps={inputProps}
+                inputRef={inputRef}
+                invalid={invalid}
+                leading={
+                    !isShowingPassword && (
+                        <>
+                            {Array.from({ length: value?.length || 0 }, (_, i) => (
+                                <span key={i} />
+                            ))}
+                        </>
+                    )
+                }
+                name={name}
+                onChange={onChange}
+                onClick={(e) => {
+                    (e.currentTarget as HTMLElement)?.querySelector('input')?.focus();
+                }}
+                owner="password-input"
+                readOnly={readOnly}
+                required={required}
+                showClearButton={false}
+                size={size}
+                trailing={
+                    !disabled &&
+                    !readOnly && (
+                        <Button
+                            label={isShowingPassword ? 'Hide' : 'Show'}
+                            onClick={togglePasswordVisibility}
+                            variant="tertiary"
+                        />
+                    )
+                }
+                type={isShowingPassword ? 'text' : 'password'}
+                value={value}
+            />
+        </div>
+    );
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/PasswordInput/index.tsx

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

package/src/components/PasswordInput/password-input.scss

@@ -0,0 +1,36 @@
+[data-bspk='password-input'] {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+
+    [data-bspk='text-input'] {
+        padding-right: 0;
+
+        [data-bspk='button'] {
+            font: var(--button-font);
+            height: 100%;
+        }
+    }
+
+    [data-disabled],
+    [data-readonly] {
+        [data-toggle-visibility-button] {
+            cursor: default;
+        }
+    }
+
+    &[data-size='small'] {
+        --button-font: var(--labels-small);
+    }
+
+    &[data-size='medium'] {
+        --button-font: var(--labels-base);
+    }
+
+    &[data-size='large'] {
+        --button-font: var(--labels-large);
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */