@bspk/ui 1.3.10 → 1.3.16

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.
@@ -33,11 +39,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 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.
@@ -11,49 +10,18 @@ import { useId } from '../../hooks/useId';
  *     () => {
  *         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, 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":";AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AA4BtC;;;;;;;;;;;;;;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,GACH;IACZ,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,KAAK,GAAG,SAAS,EAAE,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC;IAChD,MAAM,SAAS,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEtD,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAgB,CAAC;IAEzF,MAAM,QAAQ,GAAG,CAAC,KAAa,EAAE,SAAiB,EAAE,EAAE;QAClD,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAClC,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;QAC7B,OAAO,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;IAEpF,OAAO,CACH,4BACc,WAAW,kBACP,OAAO,IAAI,SAAS,eACvB,IAAI,IAAI,QAAQ,EAC3B,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,SAAS,aAEd,gBAAO,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,KAAK,GAAI,EAChD,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAClC,6BACgB,aAAa,KAAK,GAAG,CAAC,EAAE,gBACxB,KAAK,GAAG,CAAC,EAErB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACX,IAAI,KAAK,CAAC,KAAK,CAAC;wBAAE,OAAO;oBACzB,iFAAiF;oBACjF,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC;wBACpB,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;oBACnC,CAAC;gBACL,CAAC,EACD,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;oBACjB,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;wBAC5B,IAAI,KAAK,EAAE,CAAC;4BACR,wEAAwE;4BACxE,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;4BAChC,WAAW,CAAC,IAAI,CAAC,CAAC;4BAClB,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;wBAClC,CAAC;oBACL,CAAC;oBAED,wFAAwF;oBACxF,IAAI,KAAK,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;wBACzB,WAAW,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;wBACxC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;oBAChC,CAAC;gBACL,CAAC,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;oBACf,MAAM,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC;oBAC9D,WAAW,CAAC,UAAU,CAAC,CAAC;oBACxB,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;gBACjC,CAAC,EACD,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,CAAC,YAEV,KAAK,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,IAjChB,KAAK,CAkCP,CACV,CAAC,IACA,CACT,CAAC;AACN,CAAC"}
+{"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

@@ -18,8 +18,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,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/PageControl/PageControl.d.ts

@@ -38,7 +38,7 @@ export type DotSize = 'medium' | 'small' | 'x-small';
  *     <PageControl value={1} numPages={3} />;
  *
  * @name PageControl
- * @phase UXReview
+ * @phase Stable
  */
 export declare function PageControl({ currentPage: currentProp, numPages: numPagesProp, variant }: PageControlProps): import("react/jsx-runtime").JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/PageControl/PageControl.js

@@ -11,7 +11,7 @@ const MAX_DOT_COUNT = 5;
  *     <PageControl value={1} numPages={3} />;
  *
  * @name PageControl
- * @phase UXReview
+ * @phase Stable
  */
 export function PageControl({ currentPage: currentProp, numPages: numPagesProp, variant = 'flat' }) {
     const numPages = Number(numPagesProp);

package/dist/components/PageControl/PageControlExample.js

@@ -23,7 +23,6 @@ export const presets = [
     },
 ];
 export const PageControlExample = {
-    containerStyle: { width: '100%' },
     defaultState: {},
     disableProps: [],
     presets,

package/dist/components/PageControl/PageControlExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageControlExample.js","sourceRoot":"","sources":["../../../src/components/PageControl/PageControlExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,OAAO,GAA+B;IAC/C;QACI,KAAK,EAAE,oBAAoB;QAC3B,SAAS,EAAE;YACP,QAAQ,EAAE,CAAC;YACX,WAAW,EAAE,CAAC;SACjB;KACJ;IACD;QACI,KAAK,EAAE,oBAAoB;QAC3B,SAAS,EAAE;YACP,QAAQ,EAAE,CAAC;YACX,WAAW,EAAE,CAAC;SACjB;KACJ;IACD;QACI,KAAK,EAAE,sBAAsB;QAC7B,SAAS,EAAE;YACP,QAAQ,EAAE,EAAE;YACZ,WAAW,EAAE,EAAE;SAClB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAuC;IAClE,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;IACZ,QAAQ,EAAE,EAAE;CACf,CAAC"}
+{"version":3,"file":"PageControlExample.js","sourceRoot":"","sources":["../../../src/components/PageControl/PageControlExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,OAAO,GAA+B;IAC/C;QACI,KAAK,EAAE,oBAAoB;QAC3B,SAAS,EAAE;YACP,QAAQ,EAAE,CAAC;YACX,WAAW,EAAE,CAAC;SACjB;KACJ;IACD;QACI,KAAK,EAAE,oBAAoB;QAC3B,SAAS,EAAE;YACP,QAAQ,EAAE,CAAC;YACX,WAAW,EAAE,CAAC;SACjB;KACJ;IACD;QACI,KAAK,EAAE,sBAAsB;QAC7B,SAAS,EAAE;YACP,QAAQ,EAAE,EAAE;YACZ,WAAW,EAAE,EAAE;SAClB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAuC;IAClE,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;IACZ,QAAQ,EAAE,EAAE;CACf,CAAC"}

package/dist/components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,57 @@
+import { AvatarProps } from '-/components/Avatar';
+import { BreadcrumbProps } from '-/components/Breadcrumb';
+import './page-header.scss';
+export type PageHeaderProps = {
+    /**
+     * The actions slot content.
+     *
+     * Appears in the top right of the header next to the title.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Breadcrumb properties.
+     *
+     * If provided, a breadcrumb will be rendered above the title.
+     */
+    breadcrumb?: BreadcrumbProps;
+    /**
+     * The avatar slot content.
+     *
+     * Appears to the left of the title.
+     */
+    avatar?: AvatarProps;
+    /**
+     * The subheader slot content.
+     *
+     * Appears below the header.
+     */
+    subHeader?: React.ReactNode;
+    /**
+     * The page title content.
+     *
+     * Appears as the main title of the page.
+     */
+    title: string;
+};
+/**
+ * A standard page header component.
+ *
+ * @example
+ *     import { PageHeader } from '@bspk/ui/PageHeader';
+ *
+ *     <PageHeader
+ *         actions={<Slot height={32} label="Page actions slot" width={372} />}
+ *         subHeader={
+ *             <>
+ *                 <Slot height="var(--spacing-sizing-06)" label="Slot component" width={200} />
+ *                 <Slot height="var(--spacing-sizing-06)" label="Slot component 2" width={200} />
+ *             </>
+ *         }
+ *         title="Page Title"
+ *     />;
+ *
+ * @name PageHeader
+ * @phase Dev
+ */
+export declare function PageHeader({ actions, breadcrumb, avatar, subHeader, title }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/PageHeader/PageHeader.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar } from '../Avatar';
+import { Breadcrumb } from '../Breadcrumb';
+import './page-header.css.js';
+/**
+ * A standard page header component.
+ *
+ * @example
+ *     import { PageHeader } from '@bspk/ui/PageHeader';
+ *
+ *     <PageHeader
+ *         actions={<Slot height={32} label="Page actions slot" width={372} />}
+ *         subHeader={
+ *             <>
+ *                 <Slot height="var(--spacing-sizing-06)" label="Slot component" width={200} />
+ *                 <Slot height="var(--spacing-sizing-06)" label="Slot component 2" width={200} />
+ *             </>
+ *         }
+ *         title="Page Title"
+ *     />;
+ *
+ * @name PageHeader
+ * @phase Dev
+ */
+export function PageHeader({ actions, breadcrumb, avatar, subHeader, title }) {
+    return (_jsxs("span", { "data-bspk": "page-header", children: [breadcrumb && (_jsx("div", { "data-breadcrumb": true, children: _jsx(Breadcrumb, { ...breadcrumb }) })), _jsxs("div", { "data-has-avatar": !!avatar, "data-header": true, children: [_jsxs("div", { "data-title": true, children: [avatar && _jsx(Avatar, { ...avatar, size: "xx-large" }), _jsx("h1", { children: title })] }), actions && _jsx("div", { "data-page-actions": true, children: actions })] }), subHeader && _jsx("div", { "data-subheader": true, children: subHeader })] }));
+}
+//# sourceMappingURL=PageHeader.js.map

package/dist/components/PageHeader/PageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../../src/components/PageHeader/PageHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AACtE,OAAO,oBAAoB,CAAC;AAmC5B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAmB;IACzF,OAAO,CACH,6BAAgB,aAAa,aACxB,UAAU,IAAI,CACX,iDACI,KAAC,UAAU,OAAK,UAAU,GAAI,GAC5B,CACT,EACD,kCAAsB,CAAC,CAAC,MAAM,kCAC1B,8CACK,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,EAAE,IAAI,EAAC,UAAU,GAAG,EACjD,uBAAK,KAAK,GAAM,IACd,EACL,OAAO,IAAI,mDAAwB,OAAO,GAAO,IAChD,EACL,SAAS,IAAI,gDAAqB,SAAS,GAAO,IAChD,CACV,CAAC;AACN,CAAC"}

package/dist/components/PageHeader/PageHeaderExample.d.ts

@@ -0,0 +1,4 @@
+import { PageHeaderProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<PageHeaderProps>[];
+export declare const PageHeaderExample: ComponentExample<PageHeaderProps>;

package/dist/components/PageHeader/PageHeaderExample.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ExamplePlaceholder } from '../ExamplePlaceholder';
+export const presets = [
+    {
+        label: 'Title Only',
+        propState: {
+            title: 'Page Title',
+        },
+        designPattern: true,
+    },
+    {
+        label: 'With Actions',
+        propState: {
+            title: 'Page Title',
+            actions: _jsx(ExamplePlaceholder, { height: 32, label: "Page actions slot", width: 372 }),
+        },
+        designPattern: true,
+    },
+    {
+        label: 'With Breadcrumb',
+        propState: {
+            title: 'Page Title',
+            breadcrumb: {
+                items: [
+                    { label: 'Home', href: '#/home' },
+                    { label: 'Section', href: '#/section' },
+                    { label: 'Page Title', href: '#/page' },
+                ],
+            },
+            actions: _jsx(ExamplePlaceholder, { height: 32, label: "Page actions slot", width: 372 }),
+        },
+        designPattern: true,
+    },
+    {
+        label: 'Profile',
+        propState: {
+            title: 'Charlie Brown',
+            avatar: { image: '/avatar-01.png', name: 'CB' },
+            actions: _jsx(ExamplePlaceholder, { height: 32, label: "Page actions slot", width: 372 }),
+        },
+        designPattern: true,
+    },
+];
+export const PageHeaderExample = {
+    defaultState: {
+        title: 'Page Title',
+        actions: _jsx(ExamplePlaceholder, { height: 32, label: "Page actions slot", width: 372 }),
+    },
+    disableProps: [],
+    presets,
+    render: ({ props, Component }) => _jsx(Component, { ...props }),
+    variants: false,
+    fullPage: true,
+    hideDemo: true,
+};
+//# sourceMappingURL=PageHeaderExample.js.map

package/dist/components/PageHeader/PageHeaderExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeaderExample.js","sourceRoot":"","sources":["../../../src/components/PageHeader/PageHeaderExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,CAAC,MAAM,OAAO,GAA8B;IAC9C;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,KAAK,EAAE,YAAY;SACtB;QACD,aAAa,EAAE,IAAI;KACtB;IACD;QACI,KAAK,EAAE,cAAc;QACrB,SAAS,EAAE;YACP,KAAK,EAAE,YAAY;YACnB,OAAO,EAAE,KAAC,kBAAkB,IAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,GAAG,GAAI;SACpF;QACD,aAAa,EAAE,IAAI;KACtB;IACD;QACI,KAAK,EAAE,iBAAiB;QACxB,SAAS,EAAE;YACP,KAAK,EAAE,YAAY;YACnB,UAAU,EAAE;gBACR,KAAK,EAAE;oBACH,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE;oBACjC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAE;oBACvC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE;iBAC1C;aACJ;YACD,OAAO,EAAE,KAAC,kBAAkB,IAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,GAAG,GAAI;SACpF;QACD,aAAa,EAAE,IAAI;KACtB;IACD;QACI,KAAK,EAAE,SAAS;QAChB,SAAS,EAAE;YACP,KAAK,EAAE,eAAe;YACtB,MAAM,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE;YAC/C,OAAO,EAAE,KAAC,kBAAkB,IAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,GAAG,GAAI;SACpF;QACD,aAAa,EAAE,IAAI;KACtB;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,YAAY,EAAE;QACV,KAAK,EAAE,YAAY;QACnB,OAAO,EAAE,KAAC,kBAAkB,IAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,GAAG,GAAI;KACpF;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,KAAK;IACf,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,IAAI;CACjB,CAAC"}

package/dist/components/PageHeader/index.d.ts

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

package/dist/components/PageHeader/index.js

@@ -0,0 +1,2 @@
+export * from './PageHeader';
+//# sourceMappingURL=index.js.map

package/dist/components/PageHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PageHeader/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/PageHeader/page-header.css

@@ -0,0 +1,35 @@
+[data-bspk=page-header] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: var(--background-base);
+}
+[data-bspk=page-header] [data-breadcrumb] {
+  padding: var(--spacing-sizing-05) var(--spacing-sizing-05) 0;
+}
+[data-bspk=page-header] [data-header] {
+  padding: var(--spacing-sizing-05);
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+}
+[data-bspk=page-header] [data-header] [data-title] {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sizing-03);
+}
+[data-bspk=page-header] [data-header] [data-title] h1 {
+  margin: 0;
+  font: var(--heading-h3);
+}
+[data-bspk=page-header] [data-header][data-has-avatar] {
+  align-items: center;
+}
+[data-bspk=page-header] [data-subheader] {
+  padding: 0 var(--spacing-sizing-05);
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/PageHeader/page-header.css.js

@@ -0,0 +1,40 @@
+/** * 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=page-header] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: var(--background-base);
+}
+[data-bspk=page-header] [data-breadcrumb] {
+  padding: var(--spacing-sizing-05) var(--spacing-sizing-05) 0;
+}
+[data-bspk=page-header] [data-header] {
+  padding: var(--spacing-sizing-05);
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+}
+[data-bspk=page-header] [data-header] [data-title] {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sizing-03);
+}
+[data-bspk=page-header] [data-header] [data-title] h1 {
+  margin: 0;
+  font: var(--heading-h3);
+}
+[data-bspk=page-header] [data-header][data-has-avatar] {
+  align-items: center;
+}
+[data-bspk=page-header] [data-subheader] {
+  padding: 0 var(--spacing-sizing-05);
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

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

@@ -32,7 +32,7 @@ export type PaginationProps = {
  *     }
  *
  * @name Pagination
- * @phase UXReview
+ * @phase Stable
  */
-export declare function Pagination({ numPages, value, onChange, ...ariaProps }: AriaAttributes & PaginationProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Pagination({ numPages, value, onChange: onChangeProp, ...ariaProps }: AriaAttributes & PaginationProps): import("react/jsx-runtime").JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Pagination/Pagination.js

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { PageList } from './PageList';
 import { Button } from '../Button';
 import { InputElement } from '../Input';
+import { sendAriaLiveMessage } from '../../utils/sendAriaLiveMessage';
 // After this point the manual input renders. With equal or fewer pages the individual page buttons render instead.
 const INPUT_TYPE_THRESHOLD = 7;
 /**
@@ -21,9 +22,13 @@ const INPUT_TYPE_THRESHOLD = 7;
  *     }
  *
  * @name Pagination
- * @phase UXReview
+ * @phase Stable
  */
-export function Pagination({ numPages, value, onChange, ...ariaProps }) {
+export function Pagination({ numPages, value, onChange: onChangeProp, ...ariaProps }) {
+    const onChange = (newPage) => {
+        onChangeProp(newPage);
+        sendAriaLiveMessage(`Page ${newPage} of ${numPages}`);
+    };
     const nextPage = () => {
         if (value < numPages)
             onChange(value + 1);
@@ -53,6 +58,6 @@ export function Pagination({ numPages, value, onChange, ...ariaProps }) {
     return (_jsxs("span", { "data-bspk": "pagination", role: "group", ...ariaProps, children: [_jsx(Button, { disabled: !inBounds(value - 1), icon: _jsx(SvgIcon, { name: "ChevronLeft" }), iconOnly: true, label: value === 1 ? 'First page' : `Previous page (${value - 1})`, onClick: previousPage, owner: "pagination", size: "small", variant: "tertiary" }), numPages > INPUT_TYPE_THRESHOLD ? (_jsxs("form", { "data-input-form": true, onSubmit: (e) => {
                     e.preventDefault();
                     submitInputChange();
-                }, children: [_jsx(InputElement, { name: "page-number", onBlur: () => submitInputChange(), onChange: setInputValue, owner: "pagination", showClearButton: false, type: "number", value: inputValue }), "of ", numPages] })) : (_jsx(PageList, { numPages: numPages, onChange: onChange, value: value })), _jsx(Button, { disabled: !inBounds(value + 1), icon: _jsx(SvgIcon, { name: "ChevronRight" }), iconOnly: true, label: value === numPages ? 'Last page' : `Next page (${value + 1})`, onClick: nextPage, owner: "pagination", size: "small", variant: "tertiary" })] }));
+                }, children: [_jsx(InputElement, { name: "page-number", onBlur: () => submitInputChange(), onChange: setInputValue, owner: "pagination", showClearButton: false, type: "number", value: inputValue }), _jsxs("span", { children: ["of ", numPages] })] })) : (_jsx(PageList, { numPages: numPages, onChange: onChange, value: value })), _jsx(Button, { disabled: !inBounds(value + 1), icon: _jsx(SvgIcon, { name: "ChevronRight" }), iconOnly: true, label: value === numPages ? 'Last page' : `Next page (${value + 1})`, onClick: nextPage, owner: "pagination", size: "small", variant: "tertiary" })] }));
 }
 //# sourceMappingURL=Pagination.js.map

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

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

package/dist/components/Pagination/pagination.css

@@ -9,12 +9,18 @@
 [data-bspk=pagination] [data-input-form] {
   display: contents;
 }
-[data-bspk=pagination] [data-bspk=input] {
+[data-bspk=pagination] [data-input-form] [data-bspk=input] {
   max-width: var(--spacing-sizing-12);
+  margin-right: var(--spacing-sizing-01);
 }
-[data-bspk=pagination] [data-bspk=input] input {
+[data-bspk=pagination] [data-input-form] [data-bspk=input] input {
   text-align: center;
 }
+[data-bspk=pagination] [data-input-form] span {
+  display: block;
+  white-space: nowrap;
+  font: var(--body-small);
+}
 [data-bspk=pagination] button[data-bspk-owner=pagination][data-bspk=button][data-size=small] {
   padding: 6px 0;
 }

package/dist/components/Pagination/pagination.css.js

@@ -12,12 +12,18 @@ style.appendChild(document.createTextNode(`[data-bspk=pagination] {
 [data-bspk=pagination] [data-input-form] {
   display: contents;
 }
-[data-bspk=pagination] [data-bspk=input] {
+[data-bspk=pagination] [data-input-form] [data-bspk=input] {
   max-width: var(--spacing-sizing-12);
+  margin-right: var(--spacing-sizing-01);
 }
-[data-bspk=pagination] [data-bspk=input] input {
+[data-bspk=pagination] [data-input-form] [data-bspk=input] input {
   text-align: center;
 }
+[data-bspk=pagination] [data-input-form] span {
+  display: block;
+  white-space: nowrap;
+  font: var(--body-small);
+}
 [data-bspk=pagination] button[data-bspk-owner=pagination][data-bspk=button][data-size=small] {
   padding: 6px 0;
 }