@bspk/ui 1.1.33 → 1.2.0

package/dist/components/Modal/Modal.js

@@ -69,9 +69,9 @@ function useDialogHeight() {
  * @ignoreRefs ButtonProps
  *
  * @name Modal
- * @phase WorkInProgress
+ * @phase UXReview
  */
-function Modal({ header, description, children, callToAction, cancelButton, buttonFormat = 'horizontal', innerRef, ...dialogProps }) {
+export function Modal({ header, description, children, callToAction, cancelButton, buttonFormat = 'horizontal', innerRef, ...dialogProps }) {
     const { isMobile } = useUIContext();
     const buttons = useMemo(() => {
         const nextButtons = [];
@@ -93,8 +93,6 @@ function Modal({ header, description, children, callToAction, cancelButton, butt
         return nextButtons;
     }, [callToAction, cancelButton, dialogProps.onClose, isMobile]);
     const { setModalRefs } = useDialogHeight();
-    return (_jsx(Dialog, { ...dialogProps, "aria-description": description, "aria-label": header, innerRef: setModalRefs, placement: "center", showScrim: true, children: _jsxs("div", { "data-bspk": "modal", ref: (node) => innerRef?.(node), style: { visibility: 'hidden' }, children: [_jsxs("header", { children: [_jsx(Txt, { as: "div", "data-dialog-title": true, variant: "heading-h4", children: header }), _jsx(Button, { icon: _jsx(SvgClose, {}), label: "close", onClick: dialogProps.onClose, showLabel: false, variant: "tertiary" })] }), _jsx("main", { children: children }), Array.isArray(buttons) && buttons.length > 0 && (_jsx("footer", { "data-button-format": buttonFormat, children: buttons.map((buttonProps, idx) => (_jsx(Button, { ...buttonProps, size: isMobile ? 'medium' : 'small' }, idx))) }))] }) }));
+    return (_jsx(Dialog, { ...dialogProps, "aria-description": description, "aria-label": header, innerRef: setModalRefs, placement: "center", showScrim: true, children: _jsxs("div", { "data-bspk": "modal", ref: (node) => innerRef?.(node), style: { visibility: 'hidden' }, children: [_jsxs("div", { "data-modal-header": true, children: [_jsx(Txt, { as: "div", "data-dialog-title": true, variant: "heading-h4", children: header }), _jsx(Button, { icon: _jsx(SvgClose, {}), iconOnly: true, label: "close", onClick: dialogProps.onClose, variant: "tertiary" })] }), _jsx("div", { "data-modal-main": true, children: children }), Array.isArray(buttons) && buttons.length > 0 && (_jsx("div", { "data-button-format": buttonFormat, "data-modal-footer": true, children: buttons.map((buttonProps, idx) => (_jsx(Button, { ...buttonProps, size: isMobile ? 'medium' : 'small' }, idx))) }))] }) }));
 }
-Modal.bspkName = 'Modal';
-export { Modal };
 //# sourceMappingURL=Modal.js.map

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/Modal/ModalExample.d.ts

@@ -1,3 +1,3 @@
-import { ComponentExampleFn } from '../../utils/demo';
 import { ModalProps } from '.';
+import { ComponentExampleFn } from '-/utils/demo';
 export declare const ModalExample: ComponentExampleFn<ModalProps>;

package/dist/components/Modal/ModalExample.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal } from '.';
 import { Button } from '../Button';
 import { Checkbox } from '../Checkbox';
 import { ListItem } from '../ListItem';
-import { Modal } from '.';
 export const ModalExample = ({ action }) => ({
-    hideVariants: true,
+    variants: false,
     render: ({ props, setState }) => {
         const label = 'Open Modal';
         const { children, ...modalProps } = props;
@@ -34,7 +34,7 @@ export const ModalExample = ({ action }) => ({
                 description: 'This modal has no buttons.',
                 children: (_jsxs(_Fragment, { children: [_jsx("p", { children: "This is a demo of a scrolling modal. Most modals won't scroll but mobile uses modals as dropdowns which may have more items than can fit in the screen." }), Array(30)
                             .fill('')
-                            .map((_, index) => (_jsx(ListItem, { label: `Option ${index + 1}`, onClick: () => action(`Option ${index + 1} clicked`), trailing: _jsx(Checkbox, { "aria-label": "", name: "", onChange: () => { }, value: "" }) }, `key${index}`)))] })),
+                            .map((_, index) => (_jsx(ListItem, { as: "label", label: `Option ${index + 1}`, onClick: () => action(`Option ${index + 1} clicked`), trailing: _jsx(Checkbox, { "aria-label": "", name: "", onChange: () => { }, value: "" }) }, `key${index}`)))] })),
             },
         },
     ],

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

@@ -1 +1 @@
-{"version":3,"file":"ModalExample.js","sourceRoot":"","sources":["../../../src/components/Modal/ModalExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAc,KAAK,EAAE,MAAM,GAAG,CAAC;AAEtC,MAAM,CAAC,MAAM,YAAY,GAAmC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACzE,YAAY,EAAE,IAAI;IAClB,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC5B,MAAM,KAAK,GAAG,YAAY,CAAC;QAE3B,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;QAE1C,OAAO,CACH,8BACI,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,EACjE,KAAC,KAAK,oCAAwB,EAAE,EAAC,WAAW,KAAK,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,YAChG,QAAQ,GACL,IACT,CACN,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL,qBAAqB;QACrB;YACI,KAAK,EAAE,cAAc;YACrB,KAAK,EAAE,sBAAsB;YAC7B,SAAS,EAAE;gBACP,MAAM,EAAE,oBAAoB;gBAC5B,WAAW,EAAE,sDAAsD;gBACnE,QAAQ,EAAE,CACN,4BACI,4LAGI,GACL,CACN;gBACD,YAAY,EAAE;oBACV,KAAK,EAAE,gBAAgB;oBACvB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,wBAAwB,CAAC;iBAClD;gBACD,YAAY,EAAE,QAAQ;aACzB;SACJ;QACD;YACI,KAAK,EAAE,oBAAoB;YAC3B,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,MAAM,EAAE,aAAa;gBACrB,WAAW,EAAE,4BAA4B;gBACzC,QAAQ,EAAE,CACN,8BACI,kLAGI,EACH,KAAK,CAAC,EAAE,CAAC;6BACL,IAAI,CAAC,EAAE,CAAC;6BACR,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACf,KAAC,QAAQ,IAEL,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC,EAAE,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,KAAK,GAAG,CAAC,UAAU,CAAC,EACpD,QAAQ,EAAE,KAAC,QAAQ,kBAAY,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,KAAK,EAAC,EAAE,GAAG,IAHpE,MAAM,KAAK,EAAE,CAIpB,CACL,CAAC,IACP,CACN;aACJ;SACJ;KACJ;CACJ,CAAC,CAAC"}
+{"version":3,"file":"ModalExample.js","sourceRoot":"","sources":["../../../src/components/Modal/ModalExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,KAAK,EAAE,MAAM,GAAG,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,MAAM,CAAC,MAAM,YAAY,GAAmC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACzE,QAAQ,EAAE,KAAK;IACf,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC5B,MAAM,KAAK,GAAG,YAAY,CAAC;QAC3B,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;QAE1C,OAAO,CACH,8BACI,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,EACjE,KAAC,KAAK,oCAAwB,EAAE,EAAC,WAAW,KAAK,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,YAChG,QAAQ,GACL,IACT,CACN,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL,qBAAqB;QACrB;YACI,KAAK,EAAE,cAAc;YACrB,KAAK,EAAE,sBAAsB;YAC7B,SAAS,EAAE;gBACP,MAAM,EAAE,oBAAoB;gBAC5B,WAAW,EAAE,sDAAsD;gBACnE,QAAQ,EAAE,CACN,4BACI,4LAGI,GACL,CACN;gBACD,YAAY,EAAE;oBACV,KAAK,EAAE,gBAAgB;oBACvB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,wBAAwB,CAAC;iBAClD;gBACD,YAAY,EAAE,QAAQ;aACzB;SACJ;QACD;YACI,KAAK,EAAE,oBAAoB;YAC3B,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,MAAM,EAAE,aAAa;gBACrB,WAAW,EAAE,4BAA4B;gBACzC,QAAQ,EAAE,CACN,8BACI,kLAGI,EACH,KAAK,CAAC,EAAE,CAAC;6BACL,IAAI,CAAC,EAAE,CAAC;6BACR,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACf,KAAC,QAAQ,IACL,EAAE,EAAC,OAAO,EAEV,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC,EAAE,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,KAAK,GAAG,CAAC,UAAU,CAAC,EACpD,QAAQ,EAAE,KAAC,QAAQ,kBAAY,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,KAAK,EAAC,EAAE,GAAG,IAHpE,MAAM,KAAK,EAAE,CAIpB,CACL,CAAC,IACP,CACN;aACJ;SACJ;KACJ;CACJ,CAAC,CAAC"}

package/dist/components/Modal/modal.css

@@ -3,36 +3,28 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sizing-02);
+  padding: var(--spacing-sizing-05);
+}
+[data-screen-size=small] [data-bspk=modal] {
   padding: var(--spacing-sizing-04);
 }
-[data-bspk=modal] > header {
+[data-bspk=modal] > [data-modal-header] {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   gap: var(--spacing-sizing-04);
 }
-[data-bspk=modal] main {
+[data-bspk=modal] [data-modal-main] {
   flex: 1;
   overflow-y: auto;
   max-height: fit-content;
 }
-[data-bspk=modal] > footer {
+[data-bspk=modal] > [data-modal-footer] {
   display: flex;
   flex-direction: row-reverse;
   justify-content: flex-start;
   gap: var(--spacing-sizing-04);
 }
-@media (width < 640px) {
-  [data-bspk=modal] > footer [data-bspk=button] {
-    width: 50%;
-  }
-  [data-bspk=modal] > footer[data-button-format=vertical] {
-    flex-direction: column-reverse;
-  }
-  [data-bspk=modal] > footer[data-button-format=vertical] [data-bspk=button] {
-    width: 100%;
-  }
-}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Modal/modal.css.js

@@ -6,39 +6,30 @@ style.appendChild(document.createTextNode(`[data-bspk=modal] {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sizing-02);
+  padding: var(--spacing-sizing-05);
+}
+[data-screen-size=small] [data-bspk=modal] {
   padding: var(--spacing-sizing-04);
 }
-[data-bspk=modal] > header {
+[data-bspk=modal] > [data-modal-header] {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   gap: var(--spacing-sizing-04);
 }
-[data-bspk=modal] main {
+[data-bspk=modal] [data-modal-main] {
   flex: 1;
   overflow-y: auto;
   max-height: fit-content;
 }
-[data-bspk=modal] > footer {
+[data-bspk=modal] > [data-modal-footer] {
   display: flex;
   flex-direction: row-reverse;
   justify-content: flex-start;
   gap: var(--spacing-sizing-04);
 }
-@media (width < 640px) {
-  [data-bspk=modal] > footer [data-bspk=button] {
-    width: 50%;
-  }
-  [data-bspk=modal] > footer[data-button-format=vertical] {
-    flex-direction: column-reverse;
-  }
-  [data-bspk=modal] > footer[data-button-format=vertical] [data-bspk=button] {
-    width: 100%;
-  }
-}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/NumberField/NumberField.d.ts

@@ -1,6 +1,6 @@
-import { FormFieldProps } from '../FormField';
-import { NumberInputProps } from '../NumberInput';
-export type NumberFieldProps = Pick<NumberInputProps, 'align' | 'disabled' | 'errorMessage' | 'id' | 'invalid' | 'max' | 'min' | 'name' | 'onChange' | 'readOnly' | 'size' | 'value'> & Pick<FormFieldProps, 'controlId' | 'helperText' | 'label' | 'labelTrailing' | 'required'>;
+import { FormFieldWrapProps } from '-/components/FormField';
+import { NumberInputProps } from '-/components/NumberInput';
+export type NumberFieldProps = FormFieldWrapProps<NumberInputProps>;
 /**
  * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
  * pressing the (+) or (-).
@@ -27,11 +27,7 @@ export type NumberFieldProps = Pick<NumberInputProps, 'align' | 'disabled' | 'er
  *     }
  *
  * @name NumberField
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function NumberField({ label, errorMessage: errorMessageProp, helperText, controlId, labelTrailing, required, ...inputProps }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
-declare namespace NumberField {
-    var bspkName: string;
-}
-export { NumberField };
+export declare function NumberField({ label, errorMessage, disabled, helperText, controlId, labelTrailing, required, invalid, ...inputProps }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/NumberField/NumberField.js

@@ -27,12 +27,9 @@ import { NumberInput } from '../NumberInput';
  *     }
  *
  * @name NumberField
- * @phase DesignReview
+ * @phase UXReview
  */
-function NumberField({ label, errorMessage: errorMessageProp, helperText, controlId, labelTrailing, required, ...inputProps }) {
-    const errorMessage = (!inputProps.readOnly && !inputProps.disabled && errorMessageProp) || undefined;
-    return (_jsx(FormField, { controlId: controlId, "data-bspk": "number-field", errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => _jsx(NumberInput, { ...inputProps, ...fieldProps, "aria-label": label, id: controlId }) }));
+export function NumberField({ label, errorMessage, disabled, helperText, controlId, labelTrailing, required, invalid, ...inputProps }) {
+    return (_jsx(FormField, { controlId: controlId, "data-bspk": "number-field", errorMessage: errorMessage, helperText: helperText, invalid: invalid, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => (_jsx(NumberInput, { ...inputProps, ...fieldProps, "aria-label": label, disabled: disabled, id: controlId, invalid: invalid })) }));
 }
-NumberField.bspkName = 'NumberField';
-export { NumberField };
 //# sourceMappingURL=NumberField.js.map

package/dist/components/NumberField/NumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../../src/components/NumberField/NumberField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAoB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAmBzE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,SAAS,WAAW,CAAC,EACjB,KAAK,EACL,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,GAAG,UAAU,EACE;IACf,MAAM,YAAY,GAAG,CAAC,CAAC,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,gBAAgB,CAAC,IAAI,SAAS,CAAC;IAErG,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,eACV,cAAc,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,KAAC,WAAW,OAAK,UAAU,KAAM,UAAU,gBAAc,KAAK,EAAE,EAAE,EAAE,SAAS,GAAI,GAC1F,CACf,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../../../src/components/NumberField/NumberField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAsB,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAoB,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAIzE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,WAAW,CAAC,EACxB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,OAAO,EACP,GAAG,UAAU,EACE;IACf,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,eACV,cAAc,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,WAAW,OACJ,UAAU,KACV,UAAU,gBACF,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,OAAO,GAClB,CACL,GACO,CACf,CAAC;AACN,CAAC"}

package/dist/components/NumberInput/IncrementButton.d.ts

@@ -0,0 +1,7 @@
+export type IncrementButtonProps = {
+    disabled: boolean;
+    increment: -1 | 1;
+    onIncrement: (increment: -1 | 1) => void;
+    inputId: string;
+};
+export declare function IncrementButton({ increment, disabled, onIncrement, inputId }: IncrementButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NumberInput/IncrementButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgAdd } from '@bspk/icons/Add';
+import { SvgRemove } from '@bspk/icons/Remove';
+import { useLongPress } from '../../hooks/useLongPress';
+export function IncrementButton({ increment, disabled, onIncrement, inputId }) {
+    const add = increment === 1;
+    const { setTriggerElement, ...handlers } = useLongPress(() => onIncrement(increment), disabled);
+    return (_jsx("button", { ...handlers, "aria-controls": inputId, "aria-hidden": "true", "data-increment": increment, disabled: disabled, ref: setTriggerElement, tabIndex: -1, type: "button", children: add ? _jsx(SvgAdd, {}) : _jsx(SvgRemove, {}) }));
+}
+//# sourceMappingURL=IncrementButton.js.map

package/dist/components/NumberInput/IncrementButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IncrementButton.js","sourceRoot":"","sources":["../../../src/components/NumberInput/IncrementButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AASpD,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAwB;IAC/F,MAAM,GAAG,GAAG,SAAS,KAAK,CAAC,CAAC;IAE5B,MAAM,EAAE,iBAAiB,EAAE,GAAG,QAAQ,EAAE,GAAG,YAAY,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;IAEhG,OAAO,CACH,oBACQ,QAAQ,mBACG,OAAO,iBACV,MAAM,oBACF,SAAS,EACzB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,iBAAiB,EACtB,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,YAEZ,GAAG,CAAC,CAAC,CAAC,KAAC,MAAM,KAAG,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,GAC5B,CACZ,CAAC;AACN,CAAC"}

package/dist/components/NumberInput/NumberInput.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, InvalidPropsLibrary } from '../../index.js';
+import { CommonProps, FormFieldControlProps } from '-/types/common';
 import './number-input.scss';
-export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'size'> & InvalidPropsLibrary & {
+export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'> & FormFieldControlProps & {
     /** The value of the control. */
     value?: number | string;
     /**
@@ -20,8 +20,6 @@ export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'n
      * accepted.
      *
      * @default 99
-     * @maximum 99
-     * @minimum 1
      */
     max?: number;
     /**
@@ -29,7 +27,6 @@ export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'n
      * accepted.
      *
      * @default 0
-     * @minimum 0
      */
     min?: number;
 };
@@ -56,11 +53,7 @@ export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'n
  *     }
  *
  * @name NumberInput
- * @phase DesignReview
+ * @phase Utility
  */
-declare function NumberInput({ value, onChange, align, size, disabled, readOnly, name, id: inputIdProp, invalid, 'aria-label': ariaLabel, max: maxProp, min: minProp, }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
-declare namespace NumberInput {
-    var bspkName: string;
-}
-export { NumberInput };
+export declare function NumberInput({ value, onChange, align, size, disabled, readOnly, name, id: inputIdProp, 'aria-label': ariaLabel, max: maxProp, min: minProp, invalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, ...inputElementProps }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/NumberInput/NumberInput.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { SvgAdd } from '@bspk/icons/Add';
-import { SvgRemove } from '@bspk/icons/Remove';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
+import { IncrementButton } from './IncrementButton';
 import { useId } from '../../hooks/useId';
-import { useLongPress } from '../../hooks/useLongPress';
 import './number-input.css.js';
-const MAX = 99;
+const MAX = 100;
 const MIN = 0;
 const DEFAULT = {
     align: 'center',
@@ -44,45 +42,32 @@ function isNumber(value, fallbackValue = undefined) {
  *     }
  *
  * @name NumberInput
- * @phase DesignReview
+ * @phase Utility
  */
-function NumberInput({ value, onChange, align = DEFAULT.align, size = DEFAULT.size, disabled = DEFAULT.disabled, readOnly = DEFAULT.readOnly, name, id: inputIdProp, invalid, 'aria-label': ariaLabel, max: maxProp, min: minProp, }) {
+export function NumberInput({ value, onChange, align = DEFAULT.align, size = DEFAULT.size, disabled = DEFAULT.disabled, readOnly = DEFAULT.readOnly, name, id: inputIdProp, 'aria-label': ariaLabel, max: maxProp, min: minProp, invalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, ...inputElementProps }) {
     const centered = align !== 'left';
     const inputId = useId(inputIdProp);
     const max = Math.min(MAX, isNumber(maxProp) || MAX);
     const min = Math.max(MIN, isNumber(minProp) || MIN);
     const valueNumber = isNumber(value) || 0;
     const [inputElement, setInputElement] = useState(null);
-    const onIncrement = (increment) => {
-        let nextValue = (isNumber(inputElement.value) || 0) + increment;
-        if (nextValue > max)
-            nextValue = max;
-        if (nextValue < min)
-            nextValue = min;
-        inputElement.value = String(nextValue);
-        onChange(nextValue);
+    const handleIncrement = (increment) => {
+        if (!inputElement)
+            return;
+        const nextValue = (isNumber(inputElement.value) || 0) + increment;
+        handleUpdate(nextValue);
     };
-    return (_jsxs("div", { "data-bspk": "number-input", "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: valueNumber + -1 < min, increment: -1, onIncrement: onIncrement })), _jsx("input", { "aria-label": ariaLabel, defaultValue: String(valueNumber), disabled: disabled, id: inputId, max: max, min: min, name: name, onBlur: () => {
-                    if (!inputElement)
-                        return;
-                    let nextValue = isNumber(inputElement.value);
-                    if (typeof nextValue === 'undefined') {
-                        onChange(undefined);
-                        inputElement.value = '';
-                        return;
-                    }
-                    nextValue = Math.max(min, nextValue);
-                    nextValue = Math.min(max || 99, nextValue);
-                    onChange(nextValue);
-                    inputElement.value = nextValue.toString();
-                }, readOnly: readOnly, ref: (node) => node && setInputElement(node), type: "number" }), !centered && (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": true, "data-divider": true }), _jsx(IncrementButton, { disabled: valueNumber + -1 < min, increment: -1, onIncrement: onIncrement })] })), _jsx(IncrementButton, { disabled: valueNumber + 1 > max, increment: 1, onIncrement: onIncrement })] }));
+    const handleUpdate = useCallback((nextValue) => {
+        if (!inputElement)
+            return;
+        let nextVal = isNumber(nextValue);
+        if (nextVal !== undefined)
+            nextVal = Math.min(Math.max(nextVal, min), max);
+        onChange(nextVal);
+        inputElement.value = nextVal?.toString() || '';
+    }, [inputElement, min, max, onChange]);
+    return (_jsxs("div", { "data-bspk": "number-input", "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 : valueNumber + -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", defaultValue: String(valueNumber), disabled: disabled, id: inputId, max: max, min: min, name: name, onBlur: () => {
+                    handleUpdate(isNumber(inputElement?.value));
+                }, readOnly: readOnly, ref: (node) => node && setInputElement(node), type: "number" }), !centered && (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": true, "data-divider": true }), _jsx(IncrementButton, { disabled: disabled ? true : valueNumber + -1 < min, increment: -1, inputId: inputId, onIncrement: handleIncrement })] })), _jsx(IncrementButton, { disabled: disabled ? true : valueNumber + 1 > max, increment: 1, inputId: inputId, onIncrement: handleIncrement })] }));
 }
-// eslint-disable-next-line react/no-multi-comp
-function IncrementButton({ increment, disabled, onIncrement }) {
-    const add = increment === 1;
-    const { setTriggerElement, ...handlers } = useLongPress(() => onIncrement(increment), disabled);
-    return (_jsx("button", { "aria-label": `${add ? 'Increase' : 'Decrease'} value`, "data-increment": increment, disabled: disabled, ref: setTriggerElement, type: "button", ...handlers, children: add ? _jsx(SvgAdd, {}) : _jsx(SvgRemove, {}) }));
-}
-NumberInput.bspkName = 'NumberInput';
-export { NumberInput };
 //# sourceMappingURL=NumberInput.js.map

package/dist/components/NumberInput/NumberInput.js.map

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

package/dist/components/NumberInput/NumberInputExample.d.ts

@@ -0,0 +1,3 @@
+import { NumberInputProps } from './NumberInput';
+import { ComponentExample } from '-/utils/demo';
+export declare const NumberInputExample: ComponentExample<NumberInputProps>;

package/dist/components/NumberInput/NumberInputExample.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const NumberInputExample = {
+    render: ({ props, Component }) => _jsx(Component, { ...props }),
+};
+//# sourceMappingURL=NumberInputExample.js.map

package/dist/components/NumberInput/NumberInputExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInputExample.js","sourceRoot":"","sources":["../../../src/components/NumberInput/NumberInputExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,kBAAkB,GAAuC;IAClE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;CAC7D,CAAC"}

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

@@ -9,22 +9,22 @@
   font: var(--font);
   height: var(--height);
   border: 1px solid var(--stroke-neutral-base);
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-sm);
   background: var(--surface-neutral-t1-base);
   max-width: 280px;
 }
 [data-bspk=number-input]:focus-within {
-  border-color: var(--stroke-brand-primary);
+  outline: solid 2px var(--stroke-neutral-focus);
 }
 [data-bspk=number-input] [data-divider] {
-  width: 4px;
-  border-right: 1px solid var(--stroke-neutral-base);
-  height: calc(var(--height) - 8px);
+  width: 1px;
+  background: var(--stroke-neutral-base);
   margin: 3px 0;
+  height: calc(var(--height) - 8px);
 }
 [data-bspk=number-input] button {
   width: var(--height);
-  height: var(--height);
+  height: calc(var(--height) - 2px);
   background: none;
   border: none;
   cursor: pointer;
@@ -38,6 +38,9 @@
 [data-bspk=number-input] button svg {
   width: var(--svg-width);
 }
+[data-bspk=number-input] button:focus {
+  outline: none;
+}
 [data-bspk=number-input] button:disabled {
   cursor: not-allowed;
   color: var(--foreground-neutral-disabled-on-surface);

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

@@ -12,22 +12,22 @@ style.appendChild(document.createTextNode(`[data-bspk=number-input] {
   font: var(--font);
   height: var(--height);
   border: 1px solid var(--stroke-neutral-base);
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-sm);
   background: var(--surface-neutral-t1-base);
   max-width: 280px;
 }
 [data-bspk=number-input]:focus-within {
-  border-color: var(--stroke-brand-primary);
+  outline: solid 2px var(--stroke-neutral-focus);
 }
 [data-bspk=number-input] [data-divider] {
-  width: 4px;
-  border-right: 1px solid var(--stroke-neutral-base);
-  height: calc(var(--height) - 8px);
+  width: 1px;
+  background: var(--stroke-neutral-base);
   margin: 3px 0;
+  height: calc(var(--height) - 8px);
 }
 [data-bspk=number-input] button {
   width: var(--height);
-  height: var(--height);
+  height: calc(var(--height) - 2px);
   background: none;
   border: none;
   cursor: pointer;
@@ -41,6 +41,9 @@ style.appendChild(document.createTextNode(`[data-bspk=number-input] {
 [data-bspk=number-input] button svg {
   width: var(--svg-width);
 }
+[data-bspk=number-input] button:focus {
+  outline: none;
+}
 [data-bspk=number-input] button:disabled {
   cursor: not-allowed;
   color: var(--foreground-neutral-disabled-on-surface);
@@ -102,4 +105,3 @@ style.appendChild(document.createTextNode(`[data-bspk=number-input] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

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

@@ -0,0 +1,41 @@
+import { CommonProps } from '-/types/common';
+import './otp-input.scss';
+export type OTPInputProps = CommonProps<'id' | 'invalid' | 'name' | 'size'> & {
+    /**
+     * The value of the otp-input.
+     *
+     * @example
+     *     867530;
+     *
+     * @required
+     */
+    value: string;
+    /**
+     * Callback when the value changes.
+     *
+     * @required
+     */
+    onChange: (value: string) => void;
+    /**
+     * The length of the otp-input.
+     *
+     * @default 6
+     * @maximum 10
+     */
+    length?: number;
+};
+/**
+ * A row of numerical input fields that are used to input a temporary secure pin code sent to the customer.
+ *
+ * @example
+ *     import { OTPInput } from '@bspk/ui/OTPInput';
+ *
+ *     function Example() {
+ *         return <OTPInput name="2-auth-otp" length={4} value={otpValue} onChange={setOtpValue} />;
+ *     }
+ *
+ * @name OTPInput
+ * @phase QA
+ */
+export declare function OTPInput({ value: valueProp, onChange, name, id: idProp, length, size, invalid, }: OTPInputProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/OTPInput/OTPInput.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useId } from '../../hooks/useId';
+import './otp-input.css.js';
+/**
+ * A row of numerical input fields that are used to input a temporary secure pin code sent to the customer.
+ *
+ * @example
+ *     import { OTPInput } from '@bspk/ui/OTPInput';
+ *
+ *     function Example() {
+ *         return <OTPInput name="2-auth-otp" length={4} value={otpValue} onChange={setOtpValue} />;
+ *     }
+ *
+ * @name OTPInput
+ * @phase QA
+ */
+export function OTPInput({ value: valueProp, onChange, name, id: idProp, length = 6, size = 'medium', invalid = false, }) {
+    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)))] }));
+}
+//# sourceMappingURL=OTPInput.js.map

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

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

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

@@ -0,0 +1,3 @@
+import { OTPInputProps } from '.';
+import { ComponentExample } from '-/utils/demo';
+export declare const OTPInputExample: ComponentExample<OTPInputProps>;