@bspk/ui 1.3.9 → 1.3.11

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;
 };
 
 /**
@@ -34,7 +39,11 @@ export type OTPInputProps = CommonProps<'id' | 'invalid' | 'name' | 'size'> & {
  * @example
  *     import { OTPInput } from '@bspk/ui/OTPInput';
  *
- *     <OTPInput name="2-auth-otp" length={4} value={otpValue} onChange={setOtpValue} />;
+ *     () => {
+ *         const [otpValue, setOtpValue] = useState('');
+ *
+ *         return <OTPInput name="2-auth" length={6} value={otpValue} onChange={setOtpValue} alphanumeric={false} />;
+ *     };
  *
  * @name OTPInput
  * @phase UXReview
@@ -47,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

@@ -22,7 +22,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/Pagination/PageList.tsx

@@ -3,6 +3,12 @@ import { Button } from '-/components/Button';
 
 export type PageListProps = Pick<PaginationProps, 'numPages' | 'onChange' | 'value'>;
 
+/**
+ * PageList component displays a list of page buttons for pagination.
+ *
+ * @name PageList
+ * @parent Pagination
+ */
 export function PageList({ numPages, onChange, value }: PageListProps) {
     return Array.from({ length: numPages }, (_, index) => {
         const page = index + 1;

package/src/components/Scrim/Scrim.tsx

@@ -23,7 +23,6 @@ export type ScrimProps = CommonProps<'owner'> & {
  * attention to a modal or sheet.
  *
  * @name Scrim
- *
  * @phase Utility
  */
 export function Scrim({ visible = true, owner, ...props }: ScrimProps) {

package/src/components/Select/Select.tsx

@@ -68,16 +68,16 @@ export type SelectProps = CommonProps<'size'> &
  * @example
  *     import { Select } from '@bspk/ui/Select';
  *
- *     const OPTIONS = [
- *         { id: '1', label: 'Option 1' },
- *         { id: '2', label: 'Option 2' },
- *         { id: '3', label: 'Option 3' },
- *         { id: '4', label: 'Option 4' },
- *         { id: '5', label: 'Option 5' },
- *         { id: '6', label: 'Option 6' },
- *     ];
- *
  *     () => {
+ *         const OPTIONS = [
+ *             { id: '1', label: 'Option 1' },
+ *             { id: '2', label: 'Option 2' },
+ *             { id: '3', label: 'Option 3' },
+ *             { id: '4', label: 'Option 4' },
+ *             { id: '5', label: 'Option 5' },
+ *             { id: '6', label: 'Option 6' },
+ *         ];
+ *
  *         const [selected, setSelected] = useState<string[]>([]);
  *
  *         return (
@@ -85,7 +85,7 @@ export type SelectProps = CommonProps<'size'> &
  *                 // standalone select example
  *                 <Select
  *                     aria-label="Select an option"
- *                     itemCount={5}
+ *                     scrollLimit={5}
  *                     name="example-select"
  *                     onChange={setSelected}
  *                     options={OPTIONS}
@@ -98,7 +98,7 @@ export type SelectProps = CommonProps<'size'> &
  *                 <Field>
  *                     <FieldLabel>Select an option</FieldLabel>
  *                     <Select
- *                         itemCount={5}
+ *                         scrollLimit={5}
  *                         name="example-select"
  *                         onChange={setSelected}
  *                         options={OPTIONS}

package/src/components/Skeleton/Circular.tsx

@@ -1,5 +1,11 @@
 import { Skeleton, SkeletonProps } from './Skeleton';
 
+/**
+ * SkeletonCircular component displays a circular skeleton loader.
+ *
+ * @name SkeletonCircular
+ * @parent Skeleton
+ */
 export function SkeletonCircular(props: Pick<SkeletonProps, 'height' | 'width'>) {
     return <Skeleton {...props} variant="circular" />;
 }

package/src/components/Skeleton/Photo.tsx

@@ -1,5 +1,11 @@
 import { Skeleton, SkeletonProps } from './Skeleton';
 
+/**
+ * SkeletonPhoto component displays a photo skeleton loader.
+ *
+ * @name SkeletonPhoto
+ * @parent Skeleton
+ */
 export function SkeletonPhoto(props: Pick<SkeletonProps, 'height' | 'width'>) {
     return <Skeleton {...props} variant="photo" />;
 }

package/src/components/Skeleton/Profile.tsx

@@ -1,5 +1,11 @@
 import { Skeleton, SkeletonProps } from './Skeleton';
 
+/**
+ * SkeletonProfile component displays a profile skeleton loader.
+ *
+ * @name SkeletonProfile
+ * @parent Skeleton
+ */
 export function SkeletonProfile(props: Pick<SkeletonProps, 'height' | 'width'>) {
     return <Skeleton {...props} variant="profile" />;
 }

package/src/components/Skeleton/Rectangular.tsx

@@ -1,5 +1,11 @@
 import { Skeleton, SkeletonProps } from './Skeleton';
 
+/**
+ * SkeletonRectangular component displays a rectangular skeleton loader.
+ *
+ * @name SkeletonRectangular
+ * @parent Skeleton
+ */
 export function SkeletonRectangular(props: Pick<SkeletonProps, 'height' | 'width'>) {
     return <Skeleton {...props} variant="rectangular" />;
 }

package/src/components/Skeleton/Thumbnail.tsx

@@ -1,5 +1,11 @@
 import { Skeleton, SkeletonProps } from './Skeleton';
 
+/**
+ * SkeletonThumbnail component displays a thumbnail skeleton loader.
+ *
+ * @name SkeletonThumbnail
+ * @parent Skeleton
+ */
 export function SkeletonThumbnail(props: Pick<SkeletonProps, 'height' | 'width'>) {
     return <Skeleton {...props} variant="thumbnail" />;
 }

package/src/components/Slider/SliderIntervalDots.tsx

@@ -4,6 +4,12 @@ export type IntervalDotProps = Pick<SliderProps<SliderValue>, 'max' | 'min' | 'v
     step: number;
 };
 
+/**
+ * SliderIntervalDots component displays interval dots along a slider track.
+ *
+ * @name SliderIntervalDots
+ * @parent Slider
+ */
 export function SliderIntervalDots({ step, max, min, value }: IntervalDotProps) {
     if (step <= 0) return null;
 

package/src/components/Snackbar/Manager.tsx

@@ -33,7 +33,6 @@ const SnackbarEvent = createCustomEvent<SendSnackbarProps | string | typeof CLEA
  * context. :)
  *
  * @name SnackbarManager
- *
  * @phase UXReview
  */
 export function SnackbarManager({ defaultTimeout = 5000 }: SnackbarManagerProps) {

package/src/components/Snackbar/Snackbar.tsx

@@ -104,7 +104,6 @@ export type SnackbarProps = CommonProps<'id'> & {
  *     };
  *
  * @name Snackbar
- *
  * @phase UXReview
  */
 export function Snackbar({

package/src/components/TabList/TabList.tsx

@@ -2,7 +2,6 @@ import './tab-list.scss';
 import { Fragment, ReactNode, useMemo } from 'react';
 import { Badge, BadgeProps } from '-/components/Badge';
 import { Tooltip } from '-/components/Tooltip';
-import { Truncated } from '-/components/Truncated';
 import { useArrowNavigation } from '-/hooks/useArrowNavigation';
 import { useId } from '-/hooks/useId';
 import { ElementProps } from '-/types/common';
@@ -238,7 +237,7 @@ export function TabList({
                                     tabIndex={focusableOption.id === item.id ? 0 : -1}
                                 >
                                     {icon && <span aria-hidden="true">{icon}</span>}
-                                    {!iconsOnly && <Truncated data-label>{item.label}</Truncated>}
+                                    {!iconsOnly && <span data-label>{item.label}</span>}
                                     {item.badge && !item.disabled && (
                                         <Badge count={item.badge} size={TAB_BADGE_SIZES[size]} />
                                     )}

package/src/components/Table/Footer.tsx

@@ -1,5 +1,11 @@
 import { Pagination } from '-/components/Pagination';
 
+/**
+ * TableFooter component displays pagination controls and information for a table.
+ *
+ * @name TableFooter
+ * @parent Table
+ */
 export function TableFooter({
     pageIndex,
     pageSize,

package/src/components/TimePicker/Listbox.tsx

@@ -17,6 +17,12 @@ export type TimePickerListboxProps = {
     onTab?: (e: React.KeyboardEvent) => void;
 };
 
+/**
+ * TimePickerListbox component displays a listbox for selecting time values.
+ *
+ * @name TimePickerListbox
+ * @parent TimePicker
+ */
 export function TimePickerListbox({ options, selectedValue, type: kind, onSelect, onTab }: TimePickerListboxProps) {
     const { activeElementId, arrowKeyCallbacks } = useArrowNavigation({
         ids: options.map((option) => option.id),

package/src/components/TimePicker/Segment.tsx

@@ -19,6 +19,12 @@ export type TimePickerSegmentProps<T extends string> = {
     setRef?: (element: HTMLElement | null) => void;
 };
 
+/**
+ * TimePickerSegment component displays an individual segment of a time picker (hours, minutes, or meridiem).
+ *
+ * @name TimePickerSegment
+ * @parent TimePicker
+ */
 export function TimePickerSegment<T extends string>({
     disabled,
     name,

package/src/components/Truncated/Truncated.tsx

@@ -1,4 +1,3 @@
-import './truncated.scss';
 import { ElementType } from 'react';
 import { Tooltip, TooltipTriggerProps } from '-/components/Tooltip';
 import { useTruncatedText } from '-/hooks/useTruncatedText';
@@ -45,7 +44,7 @@ export function Truncated<As extends ElementType = ElementType>({
     const span = (triggerProps: TooltipTriggerProps) => (
         <span
             {...props}
-            data-bspk-utility="truncated"
+            data-truncated
             ref={(node) => setElement(node)}
             {...triggerProps}
             role={isTruncated ? 'note' : props.role}

package/src/components/UIProvider/UIProvider.tsx

@@ -22,7 +22,6 @@ export type UIProviderProps = {
  * This provider should wrap the root of your application to ensure that all components have access to the UI context.
  *
  * @name UIProvider
- *
  * @phase Utility
  */
 export function UIProvider({ children }: UIProviderProps) {

package/src/hooks/useLongPress.ts

@@ -1,57 +1,67 @@
-import { useRef, useState, MouseEvent } from 'react';
-
+import { useRef } from 'react';
 import { useTimeout } from './useTimeout';
 
-export const MIN_INTERVAL = 250; // Minimum interval in milliseconds
-export const INTERVAL_DECREASE_FACTOR = 0.75; // Percent by which the interval decreases each time
-export const INITIAL_INTERVAL = 1000; // Initial interval in milliseconds
-
-const isTriggerElementDisabled = (element: HTMLElement | null) =>
-    !element ||
-    (element as HTMLButtonElement).disabled ||
-    element.getAttribute('disabled') === 'true' ||
-    element.getAttribute('aria-disabled') === 'true' ||
-    element.getAttribute('data-disabled') === 'true' ||
-    !element.isConnected ||
-    !element.offsetParent;
+export type LongPressProps = {
+    /** The callback to be invoked on long press. If false is returned, the repeating will stop. */
+    callback: () => boolean;
+    /**
+     * The initial delay (in ms) before repeating starts. Default is 750ms.
+     *
+     * @default 750
+     */
+    delay?: number;
+    /**
+     * The amount (in percent) to decrement the delay after each repeat. Default is 15%.
+     *
+     * @default 15
+     */
+    delayDecrement?: number;
+    /**
+     * The minimum delay (in ms) between repeats. Default is 100ms.
+     *
+     * @default 100
+     */
+    delayMin?: number;
+};
 
-export function useLongPress(callback: () => void, disabled: boolean) {
+/**
+ * A hook that provides long press functionality. The provided callback will be invoked once immediately on press, and
+ * then repeatedly after a delay, with the delay decreasing by a specified amount after each repeat.
+ */
+export function useLongPress({
+    callback,
+    delay: initialDelay = 750,
+    delayDecrement = 15,
+    delayMin = 100,
+}: LongPressProps) {
     const timeout = useTimeout();
-    const intervalRef = useRef(INITIAL_INTERVAL);
-
-    const [triggerElement, setTriggerElement] = useState<HTMLButtonElement | null>(null);
-
-    if (disabled)
-        return {
-            onMouseDown: () => {},
-            onMouseUp: () => {},
-            setTriggerElement: () => {},
-        };
-
-    const run = () => {
-        // If the element is not connected or disabled, clear the timeout, and prevent the callback
-        if (isTriggerElementDisabled(triggerElement)) return;
-        callback();
-        // Decrease the interval for the next call, but not below MIN_INTERVAL
-        if (intervalRef.current > MIN_INTERVAL) intervalRef.current = intervalRef.current * INTERVAL_DECREASE_FACTOR;
-        timeout.set(run, intervalRef.current);
+    const isPressing = useRef(false);
+    const delay = useRef(initialDelay);
+
+    const setPressing = (pressing: boolean) => {
+        isPressing.current = pressing;
+
+        if (pressing) {
+            if (!callback()) return setPressing(false);
+
+            timeout.set(() => {
+                if (!isPressing.current) return setPressing(false);
+
+                const decrementMs = (delay.current * delayDecrement) / 100;
+                delay.current = delay.current <= delayMin ? delayMin : delay.current - decrementMs;
+
+                setPressing(true);
+            }, delay.current);
+            return;
+        }
+
+        delay.current = initialDelay;
+        timeout.clear();
     };
 
     return {
-        onMouseDown: (event: MouseEvent) => {
-            event.preventDefault();
-            intervalRef.current = INITIAL_INTERVAL;
-            callback();
-            timeout.set(run, intervalRef.current);
-        },
-        onMouseUp: () => {
-            timeout.clear();
-        },
-        onMouseLeave: () => {
-            timeout.clear();
-        },
-        setTriggerElement,
+        onPointerDown: () => setPressing(true),
+        onPointerLeave: () => setPressing(false),
+        onPointerUp: () => setPressing(false),
     };
 }
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/styles/base.scss

@@ -179,6 +179,15 @@ body[data-bspk] {
     left: auto;
 }
 
+[data-truncated] {
+    max-width: 100%;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background-color: transparent;
+}
+
 [data-sr-only] {
     height: 1px;
     overflow: hidden;

package/dist/components/Truncated/truncated.css

@@ -1,8 +0,0 @@
-[data-bspk-utility=truncated] {
-  max-width: 100%;
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background-color: transparent;
-}

package/dist/components/Truncated/truncated.css.js

@@ -1,13 +0,0 @@
-/** * This file is generated by the build script.
-* Do not edit this file directly. */
-const style = document.createElement('style');
-style.appendChild(document.createTextNode(`[data-bspk-utility=truncated] {
-  max-width: 100%;
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background-color: transparent;
-}
-`));
-document.head.appendChild(style);