@bspk/ui 1.1.31 → 1.1.33

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

@@ -0,0 +1,101 @@
+import { ReactNode } from 'react';
+import { CallToActionButton } from '../../index.js';
+import { ButtonProps } from '../Button';
+import { DialogProps } from '../Dialog';
+import './modal.scss';
+export type ModalCallToAction = Pick<ButtonProps, 'destructive'> & Pick<CallToActionButton, 'label' | 'onClick'>;
+export type ModalProps = Pick<DialogProps, 'data-bspk-owner' | 'id' | 'innerRef' | 'onClose' | 'open'> & {
+    /**
+     * Modal header.
+     *
+     * @example
+     *     Change your email
+     *
+     * @required
+     */
+    header: string;
+    /**
+     * Modal description. Used for the
+     * [aria-description](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-description)
+     * attribute.
+     *
+     * @example
+     *     Email change confirmation.
+     *
+     * @required
+     */
+    description: string;
+    /**
+     * Whether to show the cancel button in the footer.
+     *
+     * Providing a string will set the label of the cancel button.
+     *
+     * @default false
+     */
+    cancelButton?: boolean | string;
+    /**
+     * The call to action button to display in the footer of the modal.
+     *
+     * @example
+     *     {
+     *     label: 'Confirm',
+     *     onClick: () => action('Confirm clicked'),
+     *     }
+     */
+    callToAction?: ModalCallToAction;
+    /**
+     * The format of the buttons in the footer. Ignored if not mobile.
+     *
+     * @default horizontal
+     */
+    buttonFormat?: 'horizontal' | 'vertical';
+    /**
+     * The content of the modal.
+     *
+     * @example
+     *     Are you sure you want to change your email address? A confirmation email will be sent to your new address to verify the change. Please check your inbox and follow the instructions to complete the process.
+     *
+     * @type multiline
+     */
+    children?: ReactNode;
+};
+/**
+ * Modals display important information that users need to acknowledge. They appear over the interface and block further
+ * interactions until an action is selected. Modal is a wrapper around the Dialog component that provides a header and
+ * footer for the dialog.
+ *
+ * @example
+ *     import React from 'react';
+ *
+ *     import { Button } from '@bspk/ui/Button';
+ *     import { Modal } from '@bspk/ui/Modal';
+ *
+ *     export function Example() {
+ *         const [open, setOpen] = React.useState(false);
+ *
+ *         return (
+ *             <>
+ *                 <Button label="Open Dialog" onClick={() => setOpen(true)} />
+ *                 <Modal
+ *                     description="Example description"
+ *                     header="Example header"
+ *                     onClose={() => setOpen(false)}
+ *                     open={open}
+ *                 >
+ *                     Example Modal
+ *                 </Modal>
+ *             </>
+ *         );
+ *     }
+ *
+ * @ignoreRefs ButtonProps
+ *
+ * @name Modal
+ * @phase WorkInProgress
+ */
+declare function Modal({ header, description, children, callToAction, cancelButton, buttonFormat, innerRef, ...dialogProps }: ModalProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Modal {
+    var bspkName: string;
+}
+export { Modal };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Modal/Modal.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgClose } from '@bspk/icons/Close';
+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 { useUIContext } from '../../hooks/useUIContext';
+import './modal.css.js';
+// 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.
+function useDialogHeight() {
+    const onResize = () => {
+        const { dialogBox, modal } = modalRefs.current || {};
+        if (!dialogBox || !modal)
+            return;
+        modal.style.height = `${dialogBox.offsetHeight}px`;
+        modal.style.visibility = '';
+    };
+    useEventListener('resize', useDebounceCallback(onResize, 100));
+    const modalRefs = useRef(null);
+    return {
+        setModalRefs: (node) => {
+            if (!node)
+                return;
+            const dialogBox = node.querySelector('[data-dialog-box]');
+            const modal = node.querySelector('[data-bspk="modal"]');
+            modalRefs.current = {
+                dialogBox,
+                modal,
+            };
+            if (!dialogBox || !modal)
+                return;
+            modal.style.height = `${dialogBox.offsetHeight}px`;
+            modal.style.visibility = '';
+        },
+    };
+}
+/**
+ * Modals display important information that users need to acknowledge. They appear over the interface and block further
+ * interactions until an action is selected. Modal is a wrapper around the Dialog component that provides a header and
+ * footer for the dialog.
+ *
+ * @example
+ *     import React from 'react';
+ *
+ *     import { Button } from '@bspk/ui/Button';
+ *     import { Modal } from '@bspk/ui/Modal';
+ *
+ *     export function Example() {
+ *         const [open, setOpen] = React.useState(false);
+ *
+ *         return (
+ *             <>
+ *                 <Button label="Open Dialog" onClick={() => setOpen(true)} />
+ *                 <Modal
+ *                     description="Example description"
+ *                     header="Example header"
+ *                     onClose={() => setOpen(false)}
+ *                     open={open}
+ *                 >
+ *                     Example Modal
+ *                 </Modal>
+ *             </>
+ *         );
+ *     }
+ *
+ * @ignoreRefs ButtonProps
+ *
+ * @name Modal
+ * @phase WorkInProgress
+ */
+function Modal({ header, description, children, callToAction, cancelButton, buttonFormat = 'horizontal', innerRef, ...dialogProps }) {
+    const { isMobile } = useUIContext();
+    const buttons = useMemo(() => {
+        const nextButtons = [];
+        if (callToAction) {
+            nextButtons.push({
+                ...callToAction,
+                variant: 'primary',
+                size: isMobile ? 'medium' : 'small',
+            });
+        }
+        if (callToAction && cancelButton) {
+            nextButtons.push({
+                label: typeof cancelButton === 'string' ? cancelButton : 'Cancel',
+                onClick: dialogProps.onClose,
+                variant: 'tertiary',
+                size: isMobile ? 'medium' : 'small',
+            });
+        }
+        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))) }))] }) }));
+}
+Modal.bspkName = 'Modal';
+export { Modal };
+//# sourceMappingURL=Modal.js.map

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

@@ -0,0 +1 @@
+{"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

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

package/dist/components/Modal/ModalExample.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../Button';
+import { Checkbox } from '../Checkbox';
+import { ListItem } from '../ListItem';
+import { Modal } from '.';
+export const ModalExample = ({ action }) => ({
+    hideVariants: true,
+    render: ({ props, setState }) => {
+        const label = 'Open Modal';
+        const { children, ...modalProps } = props;
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { label: label, onClick: () => setState({ open: true }) }), _jsx(Modal, { "data-example-component": true, id: "exampleId", ...modalProps, onClose: () => setState({ open: false }), children: children })] }));
+    },
+    presets: [
+        // confirmation modal
+        {
+            value: 'confirmation',
+            label: 'Modal (confirmation)',
+            propState: {
+                header: 'Confirmation Modal',
+                description: 'This modal has a call to action and a cancel button.',
+                children: (_jsx(_Fragment, { children: _jsx("p", { children: "This is a confirmation modal. It has a call to action and a cancel button. The call to action is the primary button and the cancel button is the tertiary button." }) })),
+                callToAction: {
+                    label: 'Call to Action',
+                    onClick: () => action('Call to Action clicked'),
+                },
+                cancelButton: 'Cancel',
+            },
+        },
+        {
+            value: 'super long content',
+            label: 'Modal (scrolling)',
+            propState: {
+                header: 'Header Only',
+                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}`)))] })),
+            },
+        },
+    ],
+});
+//# sourceMappingURL=ModalExample.js.map

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

@@ -0,0 +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"}

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

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

package/dist/components/Modal/index.js

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

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

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

package/dist/components/Modal/modal.css

@@ -0,0 +1,38 @@
+[data-bspk=modal] {
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sizing-02);
+  padding: var(--spacing-sizing-04);
+}
+[data-bspk=modal] > header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-sizing-04);
+}
+[data-bspk=modal] main {
+  flex: 1;
+  overflow-y: auto;
+  max-height: fit-content;
+}
+[data-bspk=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

@@ -0,0 +1,44 @@
+/** * 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=modal] {
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sizing-02);
+  padding: var(--spacing-sizing-04);
+}
+[data-bspk=modal] > header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-sizing-04);
+}
+[data-bspk=modal] main {
+  flex: 1;
+  overflow-y: auto;
+  max-height: fit-content;
+}
+[data-bspk=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

@@ -0,0 +1,37 @@
+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'>;
+/**
+ * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
+ * pressing the (+) or (-).
+ *
+ * This component takes properties from the FormField and NumberInput components.
+ *
+ * @example
+ *     import React from 'react';
+ *
+ *     import { NumberField } from '@bspk/ui/NumberField';
+ *
+ *     export function Example() {
+ *         const [state, setState] = React.useState<number>();
+ *
+ *         return (
+ *             <NumberField
+ *                 controlId="Example controlId"
+ *                 label="Example label"
+ *                 name="Example name"
+ *                 onChange={(nextValue) => setState(nextValue)}
+ *                 value={state}
+ *             />
+ *         );
+ *     }
+ *
+ * @name NumberField
+ * @phase DesignReview
+ */
+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 };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/NumberField/NumberField.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormField } from '../FormField';
+import { NumberInput } from '../NumberInput';
+/**
+ * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
+ * pressing the (+) or (-).
+ *
+ * This component takes properties from the FormField and NumberInput components.
+ *
+ * @example
+ *     import React from 'react';
+ *
+ *     import { NumberField } from '@bspk/ui/NumberField';
+ *
+ *     export function Example() {
+ *         const [state, setState] = React.useState<number>();
+ *
+ *         return (
+ *             <NumberField
+ *                 controlId="Example controlId"
+ *                 label="Example label"
+ *                 name="Example name"
+ *                 onChange={(nextValue) => setState(nextValue)}
+ *                 value={state}
+ *             />
+ *         );
+ *     }
+ *
+ * @name NumberField
+ * @phase DesignReview
+ */
+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 }) }));
+}
+NumberField.bspkName = 'NumberField';
+export { NumberField };
+//# sourceMappingURL=NumberField.js.map

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

@@ -0,0 +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"}

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

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

package/dist/components/NumberField/index.js

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

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

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

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

@@ -0,0 +1,66 @@
+import { CommonProps, InvalidPropsLibrary } from '../../index.js';
+import './number-input.scss';
+export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'size'> & InvalidPropsLibrary & {
+    /** The value of the control. */
+    value?: number | string;
+    /**
+     * Callback when the value changes.
+     *
+     * @required
+     */
+    onChange: (value: number | string | undefined) => void;
+    /**
+     * The alignment of the input box. Centered between the plus and minus buttons or to the left of the buttons.
+     *
+     * @default center
+     */
+    align?: 'center' | 'left';
+    /**
+     * Defines the [maximum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max) value that is
+     * accepted.
+     *
+     * @default 99
+     * @maximum 99
+     * @minimum 1
+     */
+    max?: number;
+    /**
+     * Defines the [minimum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min) value that is
+     * accepted.
+     *
+     * @default 0
+     * @minimum 0
+     */
+    min?: number;
+};
+/**
+ * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
+ * pressing the (+) or (-).
+ *
+ * The value of the input is a number. The value is clamped to the min and max values if they are provided.
+ *
+ * @example
+ *     import { NumberInput } from '@bspk/ui/NumberInput';
+ *
+ *     export function Example() {
+ *         const [state, setState] = React.useState<number>();
+ *
+ *         return (
+ *             <NumberInput
+ *                 aria-label="Example aria-label"
+ *                 name="Example name"
+ *                 onChange={(nextValue) => setState(nextValue)}
+ *                 value={state}
+ *             />
+ *         );
+ *     }
+ *
+ * @name NumberInput
+ * @phase DesignReview
+ */
+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 };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/NumberInput/NumberInput.js

@@ -0,0 +1,88 @@
+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 { useId } from '../../hooks/useId';
+import { useLongPress } from '../../hooks/useLongPress';
+import './number-input.css.js';
+const MAX = 99;
+const MIN = 0;
+const DEFAULT = {
+    align: 'center',
+    size: 'medium',
+    disabled: false,
+    readOnly: false,
+};
+function isNumber(value, fallbackValue = undefined) {
+    if (typeof value === 'number')
+        return value;
+    if (typeof value !== 'string')
+        return fallbackValue;
+    const num = Number(value);
+    return isNaN(num) ? fallbackValue : num;
+}
+/**
+ * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
+ * pressing the (+) or (-).
+ *
+ * The value of the input is a number. The value is clamped to the min and max values if they are provided.
+ *
+ * @example
+ *     import { NumberInput } from '@bspk/ui/NumberInput';
+ *
+ *     export function Example() {
+ *         const [state, setState] = React.useState<number>();
+ *
+ *         return (
+ *             <NumberInput
+ *                 aria-label="Example aria-label"
+ *                 name="Example name"
+ *                 onChange={(nextValue) => setState(nextValue)}
+ *                 value={state}
+ *             />
+ *         );
+ *     }
+ *
+ * @name NumberInput
+ * @phase DesignReview
+ */
+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, }) {
+    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);
+    };
+    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 })] }));
+}
+// 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

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

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

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

package/dist/components/NumberInput/index.js

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

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

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