@bspk/ui 1.3.9 → 1.3.11

package/dist/components/InputNumber/InputNumber.js

@@ -1,15 +1,15 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './input-number.css.js';
-import { useMemo } from 'react';
+import { useEffect, useRef } from 'react';
 import { IncrementButton } from './IncrementButton';
 import { useFieldInit } from '../Field';
 import { useId } from '../../hooks/useId';
-function isNumber(value, fallbackValue = undefined) {
+function isNumber(value, fallbackValue) {
     if (typeof value === 'number')
         return value;
     if (typeof value !== 'string')
         return fallbackValue;
-    const num = Number(value);
+    const num = parseFloat(value);
     return isNaN(num) ? fallbackValue : num;
 }
 /**
@@ -67,12 +67,28 @@ export function InputNumber({ value: valueProp, onChange, align = 'center', size
     const max = typeof maxProp === 'number' && maxProp >= min ? maxProp : Number.MAX_SAFE_INTEGER;
     const centered = align !== 'left';
     const inputId = useId(id);
-    const value = useMemo(() => isNumber(valueProp) || 0, [valueProp]);
-    const handleIncrement = (increment) => {
-        onChange(value + increment * step);
+    const value = isNumber(valueProp, min);
+    const removeDisabled = disabled || value + step * -1 < min;
+    const addDisabled = disabled || value + step > max;
+    const valueRef = useRef(value);
+    useEffect(() => {
+        valueRef.current = value;
+    }, [value]);
+    const incrementHandler = (kind) => {
+        const increment = kind === 'add' ? step : step * -1;
+        const next = valueRef.current + increment;
+        if (next < min || next > max)
+            return false;
+        onChange(next);
+        return true;
     };
-    return (_jsxs("div", { "data-bspk": "input-number", "data-centered": centered || undefined, "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "data-size": size, "data-stepper-input": true, children: [!!centered && (_jsx(IncrementButton, { disabled: disabled ? true : value + -1 < min, increment: -1, inputId: inputId, onIncrement: handleIncrement })), _jsx("input", { ...inputElementProps, "aria-describedby": ariaDescribedBy || undefined, "aria-errormessage": ariaErrorMessage || undefined, "aria-invalid": invalid, "aria-label": ariaLabel, autoComplete: "off", "data-input": true, "data-stepper-input-element": true, disabled: disabled, id: inputId, inputMode: "numeric", max: max, min: min, name: name, onChange: (e) => {
-                    onChange(isNumber(e.target.value));
-                }, readOnly: readOnly, required: required, step: step, type: "number", value: value }), !centered && (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": true, "data-divider": true }), _jsx(IncrementButton, { disabled: !!disabled || value + -1 < min, increment: -1, inputId: inputId, onIncrement: handleIncrement })] })), _jsx(IncrementButton, { disabled: !!disabled || value + 1 > max, increment: 1, inputId: inputId, onIncrement: handleIncrement })] }));
+    return (_jsxs("div", { "data-bspk": "input-number", "data-centered": centered || undefined, "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "data-size": size, "data-stepper-input": true, children: [_jsx("input", { ...inputElementProps, "aria-describedby": ariaDescribedBy || undefined, "aria-errormessage": ariaErrorMessage || undefined, "aria-invalid": invalid, "aria-label": ariaLabel, autoComplete: "off", "data-input": true, "data-stepper-input-element": true, disabled: disabled, id: inputId, inputMode: "numeric", max: max, min: min, name: name, onBlur: (e) => {
+                    const next = isNumber(e.target.value, min);
+                    e.target.value = next?.toString() || '';
+                    onChange(next);
+                }, onChange: (e) => {
+                    const next = isNumber(e.target.value, min);
+                    onChange(next);
+                }, readOnly: readOnly, required: required, step: step, type: "number", value: value !== undefined ? value : '' }), _jsx("div", { "aria-hidden": true, "data-divider": true }), _jsx(IncrementButton, { disabled: removeDisabled, inputId: inputId, kind: "remove", triggerIncrement: incrementHandler }), _jsx(IncrementButton, { disabled: addDisabled, inputId: inputId, kind: "add", triggerIncrement: incrementHandler })] }));
 }
 //# sourceMappingURL=InputNumber.js.map

package/dist/components/InputNumber/InputNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumber.js","sourceRoot":"","sources":["../../../src/components/InputNumber/InputNumber.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"InputNumber.js","sourceRoot":"","sources":["../../../src/components/InputNumber/InputNumber.tsx"],"names":[],"mappings":"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"}

package/dist/components/InputNumber/InputNumberExample.js

@@ -4,5 +4,6 @@ export const InputNumberExample = {
         'aria-label': 'input number aria-label',
     },
     render: ({ props, Component }) => _jsx(Component, { ...props }),
+    variants: false,
 };
 //# sourceMappingURL=InputNumberExample.js.map

package/dist/components/InputNumber/InputNumberExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputNumberExample.js","sourceRoot":"","sources":["../../../src/components/InputNumber/InputNumberExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,kBAAkB,GAAuC;IAClE,YAAY,EAAE;QACV,YAAY,EAAE,yBAAyB;KAC1C;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;CAC7D,CAAC"}
+{"version":3,"file":"InputNumberExample.js","sourceRoot":"","sources":["../../../src/components/InputNumber/InputNumberExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,kBAAkB,GAAuC;IAClE,YAAY,EAAE;QACV,YAAY,EAAE,yBAAyB;KAC1C;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,QAAQ,EAAE,KAAK;CAClB,CAAC"}

package/dist/components/InputNumber/input-number.css

@@ -97,5 +97,11 @@
   --height: var(--spacing-sizing-12);
   --svg-width: var(--spacing-sizing-06);
 }
+[data-bspk=input-number][data-centered] button:first-of-type {
+  order: -1;
+}
+[data-bspk=input-number][data-centered] [data-divider] {
+  display: none;
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/InputNumber/input-number.css.js

@@ -100,6 +100,12 @@ style.appendChild(document.createTextNode(`[data-bspk=input-number] {
   --height: var(--spacing-sizing-12);
   --svg-width: var(--spacing-sizing-06);
 }
+[data-bspk=input-number][data-centered] button:first-of-type {
+  order: -1;
+}
+[data-bspk=input-number][data-centered] [data-divider] {
+  display: none;
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));

package/dist/components/Link/Link.d.ts

@@ -44,7 +44,7 @@ export type LinkProps = Pick<CommonPropsLibrary, 'disabled'> & {
  * @example
  *     import { Link } from '@bspk/ui/Link';
  *
- *     <Link href="https://bspk.dev" label="Example label" trailingIcon="external" />;
+ *     <Link href="https://anywhere.re" label="Example label" trailingIcon="external" />;
  *
  * @name Link
  * @phase UXReview

package/dist/components/Link/Link.js

@@ -7,7 +7,7 @@ import { lazy, Suspense } from 'react';
  * @example
  *     import { Link } from '@bspk/ui/Link';
  *
- *     <Link href="https://bspk.dev" label="Example label" trailingIcon="external" />;
+ *     <Link href="https://anywhere.re" label="Example label" trailingIcon="external" />;
  *
  * @name Link
  * @phase UXReview

package/dist/components/OTPInput/OTPInput.d.ts

@@ -1,6 +1,6 @@
 import './otp-input.scss';
 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.
      *
@@ -23,6 +23,12 @@ export type OTPInputProps = CommonProps<'id' | 'invalid' | 'name' | 'size'> & {
      * @maximum 10
      */
     length?: number;
+    /**
+     * The mode of the otp-input.
+     *
+     * @default false
+     */
+    alphanumeric?: boolean;
 };
 /**
  * A row of input fields that are used to input a temporary secure pin code sent to the customer.
@@ -30,10 +36,14 @@ 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
  */
-export declare function OTPInput({ value: valueProp, onChange, name, id: idProp, length, size, invalid, }: OTPInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function OTPInput({ value: valueProp, onChange, name, id: idProp, length, size, invalid, alphanumeric, 'aria-label': ariaLabel, }: OTPInputProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/OTPInput/OTPInput.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './otp-input.css.js';
-import { useRef } from 'react';
 import { useId } from '../../hooks/useId';
 /**
  * A row of input fields that are used to input a temporary secure pin code sent to the customer.
@@ -8,48 +7,21 @@ import { useId } from '../../hooks/useId';
  * @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
  */
-export function OTPInput({ value: valueProp, onChange, name, id: idProp, length = 6, size = 'medium', invalid = false, }) {
+export function OTPInput({ value: valueProp, onChange, name, id: idProp, length = 6, size = 'medium', invalid = false, alphanumeric = false, 'aria-label': ariaLabel = 'OTP input', }) {
     const id = useId(idProp);
-    const value = valueProp?.slice(0, length) || '';
-    const parentRef = useRef(null);
-    const element = (index) => parentRef.current?.children[index + 1];
-    const setIndex = (index, character) => {
-        const charArray = value.split('');
-        charArray[index] = character;
-        return charArray.join('');
-    };
-    const updateValue = (next) => onChange(next.slice(0, length).toUpperCase());
-    return (_jsxs("div", { "data-bspk": "otp-input", "data-invalid": invalid || undefined, "data-size": size || 'medium', id: id, ref: parentRef, children: [_jsx("input", { name: name, type: "hidden", value: value }), Array.from({ length }, (_, index) => (_jsx("span", { "aria-label": `OTP digit ${index + 1}`, "data-digit": index + 1, 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, children: value?.[index] || '' }, index)))] }));
+    const value = valueProp || '';
+    const activeIndex = Math.min(value.length, length - 1);
+    return (_jsxs("div", { "data-bspk": "otp-input", "data-invalid": invalid || undefined, "data-size": size || 'medium', id: id, children: [_jsx("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 }), _jsx("span", { "data-digits": true, children: Array.from({ length }, (_, index) => (_jsx("span", { "data-active": index === activeIndex || undefined, "data-digit": true, children: value[index] }, index))) })] }));
 }
 //# sourceMappingURL=OTPInput.js.map

package/dist/components/OTPInput/OTPInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"OTPInput.js","sourceRoot":"","sources":["../../../src/components/OTPInput/OTPInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"OTPInput.js","sourceRoot":"","sources":["../../../src/components/OTPInput/OTPInput.tsx"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAkCtC;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,KAAK,EAAE,SAAS,EAChB,QAAQ,EACR,IAAI,EACJ,EAAE,EAAE,MAAM,EACV,MAAM,GAAG,CAAC,EACV,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,KAAK,EACf,YAAY,GAAG,KAAK,EACpB,YAAY,EAAE,SAAS,GAAG,WAAW,GACzB;IACZ,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,KAAK,GAAG,SAAS,IAAI,EAAE,CAAC;IAC9B,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC;IAEvD,OAAO,CACH,4BAAe,WAAW,kBAAe,OAAO,IAAI,SAAS,eAAa,IAAI,IAAI,QAAQ,EAAE,EAAE,EAAE,EAAE,aAC9F,8BACgB,SAAS,EACrB,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC5C,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAChB,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;gBACvE,CAAC,EACD,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EACtC,KAAK,EAAE,KAAK,GACd,EACF,8CACK,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAClC,8BAAmB,KAAK,KAAK,WAAW,IAAI,SAAS,gCAChD,KAAK,CAAC,KAAK,CAAC,IADsD,KAAK,CAErE,CACV,CAAC,GACC,IACL,CACT,CAAC;AACN,CAAC"}

package/dist/components/OTPInput/OTPInputExample.js

@@ -19,7 +19,12 @@ export const presets = [
 ];
 export const OTPInputExample = {
     containerStyle: { width: '100%' },
-    defaultState: {},
+    defaultState: {
+        value: '',
+        length: 6,
+        name: 'OTP Input',
+        alphanumeric: false,
+    },
     disableProps: [],
     presets,
     render: ({ props, Component }) => _jsx(Component, { ...props }),

package/dist/components/OTPInput/OTPInputExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"OTPInputExample.js","sourceRoot":"","sources":["../../../src/components/OTPInput/OTPInputExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,OAAO,GAA4B;IAC5C;QACI,KAAK,EAAE,cAAc;QACrB,SAAS,EAAE;YACP,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,WAAW;SACpB;KACJ;IACD;QACI,KAAK,EAAE,cAAc;QACrB,SAAS,EAAE;YACP,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,WAAW;SACpB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,OAAO;IACP,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,QAAQ,EAAE,EAAE;CACf,CAAC"}
+{"version":3,"file":"OTPInputExample.js","sourceRoot":"","sources":["../../../src/components/OTPInput/OTPInputExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,OAAO,GAA4B;IAC5C;QACI,KAAK,EAAE,cAAc;QACrB,SAAS,EAAE;YACP,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,WAAW;SACpB;KACJ;IACD;QACI,KAAK,EAAE,cAAc;QACrB,SAAS,EAAE;YACP,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,WAAW;SACpB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE;QACV,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,WAAW;QACjB,YAAY,EAAE,KAAK;KACtB;IACD,YAAY,EAAE,EAAE;IAChB,OAAO;IACP,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,QAAQ,EAAE,EAAE;CACf,CAAC"}

package/dist/components/OTPInput/otp-input.css

@@ -1,13 +1,27 @@
 [data-bspk=otp-input] {
+  width: fit-content;
+  position: relative;
+}
+[data-bspk=otp-input] input[inputMode] {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  border: none;
+  caret-color: transparent;
+}
+[data-bspk=otp-input] [data-digits] {
   display: flex;
   flex-direction: row;
   justify-content: center;
   gap: var(--spacing-sizing-02);
   font: var(--font);
   width: fit-content;
+  position: relative;
+  pointer-events: none;
 }
-[data-bspk=otp-input] [data-digit] {
+[data-bspk=otp-input] [data-digits] [data-digit] {
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
   border-radius: var(--radius-sm);
@@ -17,25 +31,12 @@
   width: var(--width);
   position: relative;
   outline: none;
+  text-align: center;
 }
-[data-bspk=otp-input] [data-digit]:hover:not(:focus)::after {
-  background: var(--interaction-hover-opacity);
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: var(--radius-sm);
-}
-[data-bspk=otp-input] [data-digit]:active::after {
-  background: var(--interaction-press-opacity);
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: var(--radius-sm);
-}
-[data-bspk=otp-input] [data-digit]:focus:not(:active) {
+[data-bspk=otp-input] input[inputMode]:focus + [data-digits] [data-digit][data-active] {
   outline: solid 2px var(--stroke-neutral-focus);
 }
-[data-bspk=otp-input] [data-digit]:focus:not(:active):empty::before {
+[data-bspk=otp-input] input[inputMode]:focus + [data-digits] [data-digit][data-active]:empty::before {
   content: "";
   width: 2px;
   height: calc(var(--caret-height) - 8px);

package/dist/components/OTPInput/otp-input.css.js

@@ -2,15 +2,29 @@
 * Do not edit this file directly. */
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(`[data-bspk=otp-input] {
+  width: fit-content;
+  position: relative;
+}
+[data-bspk=otp-input] input[inputMode] {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  border: none;
+  caret-color: transparent;
+}
+[data-bspk=otp-input] [data-digits] {
   display: flex;
   flex-direction: row;
   justify-content: center;
   gap: var(--spacing-sizing-02);
   font: var(--font);
   width: fit-content;
+  position: relative;
+  pointer-events: none;
 }
-[data-bspk=otp-input] [data-digit] {
+[data-bspk=otp-input] [data-digits] [data-digit] {
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
   border-radius: var(--radius-sm);
@@ -20,25 +34,12 @@ style.appendChild(document.createTextNode(`[data-bspk=otp-input] {
   width: var(--width);
   position: relative;
   outline: none;
+  text-align: center;
 }
-[data-bspk=otp-input] [data-digit]:hover:not(:focus)::after {
-  background: var(--interaction-hover-opacity);
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: var(--radius-sm);
-}
-[data-bspk=otp-input] [data-digit]:active::after {
-  background: var(--interaction-press-opacity);
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: var(--radius-sm);
-}
-[data-bspk=otp-input] [data-digit]:focus:not(:active) {
+[data-bspk=otp-input] input[inputMode]:focus + [data-digits] [data-digit][data-active] {
   outline: solid 2px var(--stroke-neutral-focus);
 }
-[data-bspk=otp-input] [data-digit]:focus:not(:active):empty::before {
+[data-bspk=otp-input] input[inputMode]:focus + [data-digits] [data-digit][data-active]:empty::before {
   content: "";
   width: 2px;
   height: calc(var(--caret-height) - 8px);

package/dist/components/Pagination/PageList.d.ts

@@ -1,3 +1,9 @@
 import { PaginationProps } from './Pagination';
 export type PageListProps = Pick<PaginationProps, 'numPages' | 'onChange' | 'value'>;
+/**
+ * PageList component displays a list of page buttons for pagination.
+ *
+ * @name PageList
+ * @parent Pagination
+ */
 export declare function PageList({ numPages, onChange, value }: PageListProps): import("react/jsx-runtime").JSX.Element[];

package/dist/components/Pagination/PageList.js

@@ -1,5 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '../Button';
+/**
+ * PageList component displays a list of page buttons for pagination.
+ *
+ * @name PageList
+ * @parent Pagination
+ */
 export function PageList({ numPages, onChange, value }) {
     return Array.from({ length: numPages }, (_, index) => {
         const page = index + 1;

package/dist/components/Pagination/PageList.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageList.js","sourceRoot":"","sources":["../../../src/components/Pagination/PageList.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAI7C,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAiB;IACjE,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;QACjD,MAAM,IAAI,GAAG,KAAK,GAAG,CAAC,CAAC;QACvB,OAAO,CACH,KAAC,MAAM,kBACS,QAAQ,IAAI,EAAE,EAE1B,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC7B,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,IAL3C,IAAI,CAMX,CACL,CAAC;IACN,CAAC,CAAC,CAAC;AACP,CAAC"}
+{"version":3,"file":"PageList.js","sourceRoot":"","sources":["../../../src/components/Pagination/PageList.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAI7C;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAiB;IACjE,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;QACjD,MAAM,IAAI,GAAG,KAAK,GAAG,CAAC,CAAC;QACvB,OAAO,CACH,KAAC,MAAM,kBACS,QAAQ,IAAI,EAAE,EAE1B,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC7B,KAAK,EAAC,YAAY,EAClB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,IAL3C,IAAI,CAMX,CACL,CAAC;IACN,CAAC,CAAC,CAAC;AACP,CAAC"}

package/dist/components/Scrim/Scrim.d.ts

@@ -21,7 +21,6 @@ export type ScrimProps = CommonProps<'owner'> & {
  * attention to a modal or sheet.
  *
  * @name Scrim
- *
  * @phase Utility
  */
 export declare function Scrim({ visible, owner, ...props }: ScrimProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Scrim/Scrim.js

@@ -5,7 +5,6 @@ import './scrim.css.js';
  * attention to a modal or sheet.
  *
  * @name Scrim
- *
  * @phase Utility
  */
 export function Scrim({ visible = true, owner, ...props }) {

package/dist/components/Scrim/Scrim.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scrim.js","sourceRoot":"","sources":["../../../src/components/Scrim/Scrim.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AAoBtB;;;;;;;GAOG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAc;IACjE,OAAO,CACH,iBACQ,KAAK,iBACG,MAAM,eACR,OAAO,qBACA,KAAK,IAAI,SAAS,iBACtB,CAAC,OAAO,IAAI,SAAS,GACpC,CACL,CAAC;AACN,CAAC"}
+{"version":3,"file":"Scrim.js","sourceRoot":"","sources":["../../../src/components/Scrim/Scrim.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AAoBtB;;;;;;GAMG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAc;IACjE,OAAO,CACH,iBACQ,KAAK,iBACG,MAAM,eACR,OAAO,qBACA,KAAK,IAAI,SAAS,iBACtB,CAAC,OAAO,IAAI,SAAS,GACpC,CACL,CAAC;AACN,CAAC"}

package/dist/components/Select/Select.d.ts

@@ -58,16 +58,16 @@ export type SelectProps = CommonProps<'size'> & FieldControlProps<string, Keyboa
  * @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 (
@@ -75,7 +75,7 @@ export type SelectProps = CommonProps<'size'> & FieldControlProps<string, Keyboa
  *                 // standalone select example
  *                 <Select
  *                     aria-label="Select an option"
- *                     itemCount={5}
+ *                     scrollLimit={5}
  *                     name="example-select"
  *                     onChange={setSelected}
  *                     options={OPTIONS}
@@ -88,7 +88,7 @@ export type SelectProps = CommonProps<'size'> & FieldControlProps<string, Keyboa
  *                 <Field>
  *                     <FieldLabel>Select an option</FieldLabel>
  *                     <Select
- *                         itemCount={5}
+ *                         scrollLimit={5}
  *                         name="example-select"
  *                         onChange={setSelected}
  *                         options={OPTIONS}

package/dist/components/Select/Select.js

@@ -19,16 +19,16 @@ import { scrollListItemsStyle } from '../../utils/scrollListItemsStyle';
  * @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 (
@@ -36,7 +36,7 @@ import { scrollListItemsStyle } from '../../utils/scrollListItemsStyle';
  *                 // standalone select example
  *                 <Select
  *                     aria-label="Select an option"
- *                     itemCount={5}
+ *                     scrollLimit={5}
  *                     name="example-select"
  *                     onChange={setSelected}
  *                     options={OPTIONS}
@@ -49,7 +49,7 @@ import { scrollListItemsStyle } from '../../utils/scrollListItemsStyle';
  *                 <Field>
  *                     <FieldLabel>Select an option</FieldLabel>
  *                     <Select
- *                         itemCount={5}
+ *                         scrollLimit={5}
  *                         name="example-select"
  *                         onChange={setSelected}
  *                         options={OPTIONS}

package/dist/components/Skeleton/Circular.d.ts

@@ -1,2 +1,8 @@
 import { SkeletonProps } from './Skeleton';
+/**
+ * SkeletonCircular component displays a circular skeleton loader.
+ *
+ * @name SkeletonCircular
+ * @parent Skeleton
+ */
 export declare function SkeletonCircular(props: Pick<SkeletonProps, 'height' | 'width'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Circular.js

@@ -1,5 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Skeleton } from './Skeleton';
+/**
+ * SkeletonCircular component displays a circular skeleton loader.
+ *
+ * @name SkeletonCircular
+ * @parent Skeleton
+ */
 export function SkeletonCircular(props) {
     return _jsx(Skeleton, { ...props, variant: "circular" });
 }

package/dist/components/Skeleton/Circular.js.map

@@ -1 +1 @@
-{"version":3,"file":"Circular.js","sourceRoot":"","sources":["../../../src/components/Skeleton/Circular.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAErD,MAAM,UAAU,gBAAgB,CAAC,KAA8C;IAC3E,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAC,UAAU,GAAG,CAAC;AACtD,CAAC"}
+{"version":3,"file":"Circular.js","sourceRoot":"","sources":["../../../src/components/Skeleton/Circular.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAErD;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA8C;IAC3E,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAC,UAAU,GAAG,CAAC;AACtD,CAAC"}

package/dist/components/Skeleton/Photo.d.ts

@@ -1,2 +1,8 @@
 import { SkeletonProps } from './Skeleton';
+/**
+ * SkeletonPhoto component displays a photo skeleton loader.
+ *
+ * @name SkeletonPhoto
+ * @parent Skeleton
+ */
 export declare function SkeletonPhoto(props: Pick<SkeletonProps, 'height' | 'width'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Photo.js

@@ -1,5 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Skeleton } from './Skeleton';
+/**
+ * SkeletonPhoto component displays a photo skeleton loader.
+ *
+ * @name SkeletonPhoto
+ * @parent Skeleton
+ */
 export function SkeletonPhoto(props) {
     return _jsx(Skeleton, { ...props, variant: "photo" });
 }

package/dist/components/Skeleton/Photo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Photo.js","sourceRoot":"","sources":["../../../src/components/Skeleton/Photo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAErD,MAAM,UAAU,aAAa,CAAC,KAA8C;IACxE,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAC,OAAO,GAAG,CAAC;AACnD,CAAC"}
+{"version":3,"file":"Photo.js","sourceRoot":"","sources":["../../../src/components/Skeleton/Photo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAErD;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAAC,KAA8C;IACxE,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAC,OAAO,GAAG,CAAC;AACnD,CAAC"}

package/dist/components/Skeleton/Profile.d.ts

@@ -1,2 +1,8 @@
 import { SkeletonProps } from './Skeleton';
+/**
+ * SkeletonProfile component displays a profile skeleton loader.
+ *
+ * @name SkeletonProfile
+ * @parent Skeleton
+ */
 export declare function SkeletonProfile(props: Pick<SkeletonProps, 'height' | 'width'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Profile.js

@@ -1,5 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Skeleton } from './Skeleton';
+/**
+ * SkeletonProfile component displays a profile skeleton loader.
+ *
+ * @name SkeletonProfile
+ * @parent Skeleton
+ */
 export function SkeletonProfile(props) {
     return _jsx(Skeleton, { ...props, variant: "profile" });
 }

package/dist/components/Skeleton/Profile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Profile.js","sourceRoot":"","sources":["../../../src/components/Skeleton/Profile.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAErD,MAAM,UAAU,eAAe,CAAC,KAA8C;IAC1E,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAC,SAAS,GAAG,CAAC;AACrD,CAAC"}
+{"version":3,"file":"Profile.js","sourceRoot":"","sources":["../../../src/components/Skeleton/Profile.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AAErD;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAAC,KAA8C;IAC1E,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAC,SAAS,GAAG,CAAC;AACrD,CAAC"}