@bspk/ui 1.3.11 → 1.3.16

package/dist/components/InputPhone/InputPhone.js

@@ -12,12 +12,12 @@ import { Menu } from '../Menu';
 import { useArrowNavigation } from '../../hooks/useArrowNavigation';
 import { useFloating } from '../../hooks/useFloating';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
-import { useUIContext } from '../../hooks/useUIContext';
 import { countryCodeData, countryCodes } from '../../utils/countryCodes';
 import { getElementById } from '../../utils/dom';
 import { guessUserCountryCode } from '../../utils/guessUserCountryCode';
 import { handleKeyDown } from '../../utils/handleKeyDown';
 import { scrollListItemsStyle } from '../../utils/scrollListItemsStyle';
+import { sendAriaLiveMessage } from '../../utils/sendAriaLiveMessage';
 import { useIds } from '../../utils/useIds';
 const SELECT_OPTIONS = countryCodes.map((code) => {
     const countryCodeDetails = countryCodeData[code];
@@ -37,34 +37,32 @@ const SELECT_OPTIONS = countryCodes.map((code) => {
  *
  * @example
  *     import { InputPhone } from '@bspk/ui/InputPhone';
+ *     import { Field, FieldDescription, FieldLabel } from '@bspk/ui/Field';
  *
  *     () => {
- *         const [value, onChange] = useState<number | undefined>();
+ *         const [value, onChange] = useState<string | undefined>();
  *
  *         return (
- *             <>
- *                 // standalone input phone example
- *                 <InputPhone aria-label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />;
- *                 <br />
- *                 // input phone used within a field
+ *             <div style={{ width: 320 }}>
  *                 <Field>
  *                     <FieldLabel>Example Input Phone</FieldLabel>
  *                     <InputPhone
  *                         aria-label="Phone Number"
  *                         initialCountryCode="US"
- *                         value={value}
+ *                         name="example-name"
  *                         onChange={onChange}
+ *                         value={value}
  *                     />
  *                     <FieldDescription>
  *                         The phone input allows you to enter a phone number with country code.
  *                     </FieldDescription>
  *                 </Field>
- *             </>
+ *             </div>
  *         );
  *     };
  *
  * @name InputPhone
- * @phase UXReview
+ * @phase Stable
  */
 export function InputPhone({ value, onChange, disableFormatting, initialCountryCode, disabled, readOnly, name, id: idProp, invalid: invalidProp, required = false, size = 'medium', inputRef, scrollLimit = 5, 'aria-label': ariaLabel = 'Phone number input', }) {
     const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
@@ -110,21 +108,19 @@ export function InputPhone({ value, onChange, disableFormatting, initialCountryC
         };
     }, [countryCode]);
     const handleChange = (newValue) => {
-        let rawNumber = newValue.replace(/\D/g, '');
-        if (rawNumber === value)
-            return;
-        if (!disableFormatting) {
+        const numericChange = value?.replace(/\D/g, '') !== newValue?.replace(/\D/g, '');
+        // only format if the numeric value has changed
+        if (!disableFormatting && numericChange) {
             const formatter = new AsYouType(countryCode);
-            rawNumber = formatter.input(`${rawNumber}`);
+            newValue = formatter.input(`${newValue}`);
         }
-        onChange(rawNumber, countryCode);
+        onChange(newValue, countryCode);
     };
-    const { sendAriaLiveMessage } = useUIContext();
     return (_jsxs(_Fragment, { children: [_jsx("div", { "data-bspk": "input-phone", onKeyDownCapture: handleKeyDown({
                     Tab: () => {
                         //  if (open) closeMenu();
                     },
-                }), children: _jsx(InputElement, { "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-label": ariaLabel || undefined, autoComplete: "off", containerRef: elements.setReference, disabled: disabled, id: id, inputRef: (node) => {
+                }), children: _jsx(InputElement, { "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-label": ariaLabel || undefined, autoComplete: "off", containerRef: elements.setReference, disabled: disabled, id: id, inputMode: "tel", inputRef: (node) => {
                         inputRef?.(node);
                         inputInternalRef.current = node;
                     }, invalid: invalid, leading: _jsxs(_Fragment, { children: [_jsxs(Button, { "aria-activedescendant": open ? activeElementId || undefined : undefined, "aria-controls": open ? menuId : undefined, "aria-disabled": disabled || undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-label": "select country code", "aria-owns": menuId, "aria-readonly": readOnly || undefined, disabled: disabled || readOnly, label: "Open country code menu", name: `${name}-country-code`, onClick: (event) => {
@@ -147,7 +143,11 @@ export function InputPhone({ value, onChange, disableFormatting, initialCountryC
                                     Enter: spaceEnter,
                                     Escape: closeMenu,
                                     'Ctrl+Option+Space': spaceEnter,
-                                }, { preventDefault: true, stopPropagation: true }), role: "combobox", variant: "tertiary", children: [_jsx(SvgIcon, { name: selectedCodeData.flagIconName }), _jsx(SvgIcon, { name: "KeyboardArrowDown" })] }), _jsx("span", { "aria-hidden": "true", style: { cursor: 'default' }, children: `+${callingCode}` })] }), name: name, onChange: handleChange, owner: "input-phone", readOnly: readOnly, required: required, size: size, value: value }) }), open && (_jsx(Menu, { "aria-autocomplete": undefined, "aria-label": "Select country code", as: "div", id: menuId, innerRef: elements.setFloating, onClickCapture: () => {
+                                }, { preventDefault: true, stopPropagation: true }), role: "combobox", variant: "tertiary", children: [_jsx(SvgIcon, { name: selectedCodeData.flagIconName }), _jsx(SvgIcon, { name: "KeyboardArrowDown" })] }), _jsx("span", { "aria-hidden": "true", style: { cursor: 'default' }, children: `+${callingCode}` })] }), name: name, onChange: handleChange, onKeyDown: (event) => {
+                        // ignore non numeric keys
+                        if (event.key.length === 1 && !/[0-9]/.test(event.key))
+                            event.preventDefault();
+                    }, owner: "input-phone", readOnly: readOnly, required: required, size: size, value: value }) }), open && (_jsx(Menu, { "aria-autocomplete": undefined, "aria-label": "Select country code", as: "div", id: menuId, innerRef: elements.setFloating, onClickCapture: () => {
                     // Prevent the menu from closing when clicking inside it
                     // maintain focus on the select control
                     inputInternalRef.current?.focus();

package/dist/components/InputPhone/InputPhone.js.map

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

package/dist/components/InputPhone/InputPhoneExample.d.ts

@@ -1,4 +1,5 @@
 import { InputPhoneProps } from '.';
-import { ComponentExample, Preset } from '-/utils/demo';
+import { Preset, ComponentExample } from '-/utils/demo';
 export declare const presets: Preset<InputPhoneProps>[];
 export declare const InputPhoneExample: ComponentExample<InputPhoneProps>;
+export declare const Usage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/InputPhone/InputPhoneExample.js

@@ -1,10 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { InputPhone } from '.';
+import { Field, FieldDescription, FieldLabel } from '../Field';
 export const presets = [];
 export const InputPhoneExample = {
+    containerStyle: { width: 320, padding: 0 },
     defaultState: {
         'aria-label': 'input phone aria-label',
     },
     render: ({ props, Component }) => _jsx(Component, { ...props }),
     variants: true,
 };
+export const Usage = () => {
+    const [value, onChange] = useState();
+    return (_jsx("div", { style: { width: 320 }, children: _jsxs(Field, { children: [_jsx(FieldLabel, { children: "Example Input Phone" }), _jsx(InputPhone, { "aria-label": "Phone Number", initialCountryCode: "US", name: "example-name", onChange: onChange, value: value }), _jsx(FieldDescription, { children: "The phone input allows you to enter a phone number with country code." })] }) }));
+};
 //# sourceMappingURL=InputPhoneExample.js.map

package/dist/components/InputPhone/InputPhoneExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputPhoneExample.js","sourceRoot":"","sources":["../../../src/components/InputPhone/InputPhoneExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,OAAO,GAA8B,EAAE,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,YAAY,EAAE;QACV,YAAY,EAAE,wBAAwB;KACzC;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,QAAQ,EAAE,IAAI;CACjB,CAAC"}
+{"version":3,"file":"InputPhoneExample.js","sourceRoot":"","sources":["../../../src/components/InputPhone/InputPhoneExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,UAAU,EAAmB,MAAM,GAAG,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGzE,MAAM,CAAC,MAAM,OAAO,GAA8B,EAAE,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,cAAc,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE;IAC1C,YAAY,EAAE;QACV,YAAY,EAAE,wBAAwB;KACzC;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,QAAQ,EAAE,IAAI;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACtB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAEzD,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YACtB,MAAC,KAAK,eACF,KAAC,UAAU,sCAAiC,EAC5C,KAAC,UAAU,kBACI,cAAc,EACzB,kBAAkB,EAAC,IAAI,EACvB,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACd,EACF,KAAC,gBAAgB,wFAEE,IACf,GACN,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/InputPhoneField/InputPhoneField.d.ts

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

package/dist/components/InputPhoneField/InputPhoneField.js

@@ -7,7 +7,7 @@ import { InputPhone } from '../InputPhone';
  * This component takes properties from the FormField and InputPhone components.
  *
  * @name InputPhoneField
- * @phase UXReview
+ * @phase Stable
  *
  * @generated
  */

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

@@ -47,7 +47,7 @@ export type LinkProps = Pick<CommonPropsLibrary, 'disabled'> & {
  *     <Link href="https://anywhere.re" label="Example label" trailingIcon="external" />;
  *
  * @name Link
- * @phase UXReview
+ * @phase Stable
  */
 export declare function Link({ label, trailingIcon, size, variant, target, ...props }: ElementProps<LinkProps, 'a'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Link/Link.js

@@ -10,7 +10,7 @@ import { lazy, Suspense } from 'react';
  *     <Link href="https://anywhere.re" label="Example label" trailingIcon="external" />;
  *
  * @name Link
- * @phase UXReview
+ * @phase Stable
  */
 export function Link({ label, trailingIcon, size, variant, target = '_self', ...props }) {
     let LazyIcon = undefined;

package/dist/components/ListItem/ListItem.d.ts

@@ -119,7 +119,7 @@ export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'a
  *     </div>;
  *
  * @name ListItem
- * @phase UXReview
+ * @phase Stable
  */
 declare function ListItem<As extends ElementType = ElementType>({ active, as, innerRef, label, labelProps, leading, leadingProps, owner, role: roleProp, subText, trailing, trailingProps, id: idProp, 'aria-label': ariaLabel, 'aria-selected': ariaSelected, 'aria-disabled': ariaDisabled, 'aria-readonly': ariaReadonly, width, ...props }: ElementProps<ListItemProps<As>, As>): import("react/jsx-runtime").JSX.Element | null;
 export { ListItem };

package/dist/components/ListItem/ListItem.js

@@ -37,7 +37,7 @@ import { useId } from '../../hooks/useId';
  *     </div>;
  *
  * @name ListItem
- * @phase UXReview
+ * @phase Stable
  */
 function ListItem({ active, as, innerRef, label, labelProps, leading, leadingProps, owner, role: roleProp, subText, trailing, trailingProps, id: idProp, 'aria-label': ariaLabel, 'aria-selected': ariaSelected, 'aria-disabled': ariaDisabled, 'aria-readonly': ariaReadonly, width, ...props }) {
     const id = useId(idProp);

package/dist/components/Menu/Menu.d.ts

@@ -36,8 +36,6 @@ export type MenuProps<As extends ElementType = ElementType> = CommonProps<'id' |
  * A container housing a simple list of options presented to the customer to select one option at a time.
  *
  * @example
- *     import React from 'react';
- *
  *     import { Menu } from '@bspk/ui/Menu';
  *
  *     <Menu>
@@ -47,7 +45,7 @@ export type MenuProps<As extends ElementType = ElementType> = CommonProps<'id' |
  *     </Menu>;
  *
  * @name Menu
- * @phase UXReview
+ * @phase Stable
  */
 export declare function Menu({ as, innerRef, id: idProp, children, owner, label, ...props }: ElementProps<MenuProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Menu/Menu.js

@@ -8,8 +8,6 @@ export function menuItemId(menuId, index) {
  * A container housing a simple list of options presented to the customer to select one option at a time.
  *
  * @example
- *     import React from 'react';
- *
  *     import { Menu } from '@bspk/ui/Menu';
  *
  *     <Menu>
@@ -19,7 +17,7 @@ export function menuItemId(menuId, index) {
  *     </Menu>;
  *
  * @name Menu
- * @phase UXReview
+ * @phase Stable
  */
 export function Menu({ as, innerRef, id: idProp, children, owner, label, ...props }) {
     const menuId = useId(idProp);

package/dist/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGtC,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,KAAa;IACpD,OAAO,QAAQ,MAAM,SAAS,KAAK,EAAE,CAAC;AAC1C,CAAC;AAiCD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAkC;IAC/G,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAE7B,MAAM,EAAE,GAAG,EAAE,IAAI,KAAK,CAAC;IAEvB,OAAO,CACH,KAAC,EAAE,OACK,KAAK,gBACG,KAAK,IAAI,SAAS,qBACb,KAAK,IAAI,SAAS,uBACjB,MAAM,EACxB,EAAE,EAAE,MAAM,EACV,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,YAE5C,QAAQ,GACR,CACR,CAAC;AACN,CAAC"}
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGtC,MAAM,UAAU,UAAU,CAAC,MAAc,EAAE,KAAa;IACpD,OAAO,QAAQ,MAAM,SAAS,KAAK,EAAE,CAAC;AAC1C,CAAC;AAiCD;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAkC;IAC/G,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAE7B,MAAM,EAAE,GAAG,EAAE,IAAI,KAAK,CAAC;IAEvB,OAAO,CACH,KAAC,EAAE,OACK,KAAK,gBACG,KAAK,IAAI,SAAS,qBACb,KAAK,IAAI,SAAS,uBACjB,MAAM,EACxB,EAAE,EAAE,MAAM,EACV,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,YAE5C,QAAQ,GACR,CACR,CAAC;AACN,CAAC"}

package/dist/components/Modal/Modal.d.ts

@@ -65,8 +65,6 @@ export type ModalProps = Pick<DialogProps, 'container' | 'disableFocusTrap' | 'i
  * footer for the dialog.
  *
  * @example
- *     import React from 'react';
- *
  *     import { Button } from '@bspk/ui/Button';
  *     import { Modal } from '@bspk/ui/Modal';
  *
@@ -89,7 +87,7 @@ export type ModalProps = Pick<DialogProps, 'container' | 'disableFocusTrap' | 'i
  *     };
  *
  * @name Modal
- * @phase UXReview
+ * @phase Stable
  */
 export declare function Modal({ header, description, children, callToAction, cancelButton, buttonFormat, innerRef, disableFocusTrap, ...dialogProps }: ModalProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Modal/Modal.js

@@ -5,8 +5,8 @@ import { useMemo, useRef } from 'react';
 import { Button } from '../Button';
 import { Dialog } from '../Dialog';
 import { Txt } from '../Txt';
-import { useEventListener } from '../../hooks/useAddEventListener';
 import { useDebounceCallback } from '../../hooks/useDebounceCallback';
+import { useEventListener } from '../../hooks/useEventListener';
 import { useUIContext } from '../../hooks/useUIContext';
 // This hook is used to set the height of the modal based on the dialog box height.
 // It listens to the resize event and updates the modal height accordingly.
@@ -43,8 +43,6 @@ function useDialogHeight() {
  * footer for the dialog.
  *
  * @example
- *     import React from 'react';
- *
  *     import { Button } from '@bspk/ui/Button';
  *     import { Modal } from '@bspk/ui/Modal';
  *
@@ -67,7 +65,7 @@ function useDialogHeight() {
  *     };
  *
  * @name Modal
- * @phase UXReview
+ * @phase Stable
  */
 export function Modal({ header, description, children, callToAction, cancelButton, buttonFormat = 'horizontal', innerRef, disableFocusTrap, ...dialogProps }) {
     const { isMobile } = useUIContext();

package/dist/components/Modal/Modal.js.map

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

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

@@ -43,7 +43,7 @@ export type OTPInputProps = CommonProps<'aria-label' | 'id' | 'invalid' | 'name'
  *     };
  *
  * @name OTPInput
- * @phase UXReview
+ * @phase Stable
  */
 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

@@ -14,7 +14,7 @@ import { useId } from '../../hooks/useId';
  *     };
  *
  * @name OTPInput
- * @phase UXReview
+ * @phase Stable
  */
 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);

package/dist/components/OTPInput/OTPInputExample.js

@@ -18,7 +18,6 @@ export const presets = [
     },
 ];
 export const OTPInputExample = {
-    containerStyle: { width: '100%' },
     defaultState: {
         value: '',
         length: 6,

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;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"}
+{"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/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 */