@bspk/ui 1.0.1 → 1.1.12

package/dist/Menu.js

@@ -0,0 +1,62 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { styleAdd } from './utils/styleAdd';
+styleAdd(`[data-bspk=menu]{/*! --item-count: is set via inline style */width:332px;border:1px solid var(--stroke-neutral-low);background-color:var(--surface-neutral-t1-base);box-shadow:var(--drop-shadow-float);border-radius:var(--radius-large);display:flex;flex-direction:column;--item-size: var(--spacing-sizing-12)}[data-bspk=menu][data-floating]{z-index:var(--z-index-dropdown)}[data-bspk=menu][data-item-count]{height:calc(var(--item-count)*var(--item-size));overflow-y:scroll}[data-bspk=menu][data-no-items]{padding:var(--spacing-sizing-08) var(--spacing-sizing-04);align-items:center;justify-content:center;gap:var(--spacing-sizing-03)}[data-bspk=menu] [data-list-item]{min-height:var(--item-size);height:var(--item-size)}`);;
+import { useMemo } from 'react';
+import { Checkbox } from './Checkbox';
+import { ListItem } from './ListItem';
+import { Txt } from './Txt';
+import { useId } from './hooks/useId';
+export const MIN_ITEM_COUNT = 3;
+export const MAX_ITEM_COUNT = 10;
+export function menuItemId(menuId, index) {
+    return `menu-${menuId}-item-${index}`;
+}
+/**
+ * A container housing a simple list of options presented to the user to select one option at a time.
+ *
+ * @name Menu
+ */
+function Menu({ itemCount: itemCountProp = 5, items: itemsProp = [], noResultsMessage, innerRef, onChange, activeIndex, selectedValues = [], disabled, id: idProp, renderListItem, isMulti, ...props }) {
+    const menuId = useId(idProp);
+    const items = Array.isArray(itemsProp) ? itemsProp : [];
+    const itemCount = useMemo(() => 
+    // Ensure itemCount is within the range of items.length
+    Math.min(items.length, 
+    // pin itemCountProp to a range of 3 to 10
+    Math.max(MIN_ITEM_COUNT, Math.min(itemCountProp, MAX_ITEM_COUNT))), [itemCountProp, items.length]);
+    return (_jsx("div", { ...props, "data-bspk": "menu", "data-disabled": disabled || undefined, "data-item-count": itemCount || undefined, "data-no-items": !items.length || undefined, id: menuId, ref: innerRef, role: "listbox", style: { ...props.style, '--item-count': itemCount }, children: items.length ? (items.map((item, index) => {
+            const itemId = item.id || menuItemId(menuId, index);
+            const selected = Array.isArray(selectedValues) && selectedValues.includes(item.value);
+            const renderProps = renderListItem?.({
+                activeIndex,
+                index,
+                item,
+                selectedValues,
+                isMulti,
+                menuId: menuId || '',
+                selected,
+                itemId,
+            });
+            return (_createElement(ListItem, { ...renderProps, active: activeIndex === index || undefined, "aria-disabled": item.disabled || undefined, "aria-posinset": index + 1, "aria-selected": selected || undefined, as: "button", "data-menu-item": true, "data-selected": selected || undefined, disabled: item.disabled || undefined, id: itemId, key: itemId, label: renderProps?.label?.toString() || item.label?.toString(), onClick: (event) => {
+                    if (renderProps)
+                        renderProps?.onClick?.(event);
+                    if (onChange) {
+                        if (!isMulti) {
+                            onChange?.([item.value], event);
+                            return;
+                        }
+                        onChange(selected
+                            ? selectedValues.filter((value) => value !== item.value)
+                            : [...selectedValues, item.value], event);
+                    }
+                }, role: "option", tabIndex: -1, trailing: isMulti ? (_jsx(Checkbox, { "aria-label": item.label, checked: selected, name: item.value, onChange: (checked) => {
+                        onChange?.(checked
+                            ? selectedValues.filter((value) => value !== item.value)
+                            : [...selectedValues, item.value]);
+                    }, value: item.value })) : (renderProps?.trailing) }));
+        })) : (_jsxs(_Fragment, { children: [_jsx(Txt, { as: "div", variant: "heading-h5", children: "No results found" }), _jsx(Txt, { as: "div", variant: "body-base", children: noResultsMessage })] })) }));
+}
+Menu.bspkName = 'Menu';
+export { Menu };
+//# sourceMappingURL=Menu.js.map

package/dist/Menu.js.map

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

package/{MenuButton.d.ts → dist/MenuButton.d.ts}

@@ -1,3 +1,4 @@
+import './menu-button.scss';
 import { ButtonProps } from './Button';
 import { ElementProps } from '.';
 export type MenuButtonProps = Pick<ButtonProps, 'as' | 'onClick'>;
@@ -6,10 +7,9 @@ export type MenuButtonProps = Pick<ButtonProps, 'as' | 'onClick'>;
  *
  * @name MenuButton
  */
-declare function MenuButton(props: ElementProps<MenuButtonProps, 'button'>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function MenuButton(props: ElementProps<MenuButtonProps, 'button'>): import("react/jsx-runtime").JSX.Element;
 declare namespace MenuButton {
     var bspkName: string;
 }
 export { MenuButton };
-export declare const style: import("@emotion/react").SerializedStyles;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/MenuButton.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgMenu } from '@bspk/icons/Menu';
+import { styleAdd } from './utils/styleAdd';
+styleAdd(`[data-bspk=menu-button]{background:none;border:none;cursor:pointer;padding:0;height:48px;width:auto;display:flex;flex-direction:row;align-items:center;justify-content:center;padding-top:var(--spacing-sizing-01);color:var(--foreground-neutral-on-surface-variant-01)}`);;
+/**
+ * Utility component used within top navigation.
+ *
+ * @name MenuButton
+ */
+function MenuButton(props) {
+    return (_jsx("button", { "data-bspk": "menu-button", ...props, children: _jsx(SvgMenu, {}) }));
+}
+MenuButton.bspkName = 'MenuButton';
+export { MenuButton };
+//# sourceMappingURL=MenuButton.js.map

package/dist/MenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../src/MenuButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,oBAAoB,CAAC;AAO5B;;;;GAIG;AACH,SAAS,UAAU,CAAC,KAA8C;IAC9D,OAAO,CACH,8BAAkB,aAAa,KAAK,KAAK,YACrC,KAAC,OAAO,KAAG,GACN,CACZ,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/{Modal.d.ts → dist/Modal.d.ts}

@@ -1,3 +1,4 @@
+import './modal.scss';
 import { DialogProps } from './Dialog';
 export type ModalProps = DialogProps & {
     /**
@@ -22,10 +23,9 @@ export type ModalProps = DialogProps & {
  *
  * @name Modal
  */
-declare function Modal({ header, description, children, id: idProp, ...dialogProps }: ModalProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Modal({ header, description, children, id: idProp, ...dialogProps }: ModalProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Modal {
     var bspkName: string;
 }
 export { Modal };
-export declare const style: import("@emotion/react").SerializedStyles;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Modal.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgClose } from '@bspk/icons/Close';
+import { styleAdd } from './utils/styleAdd';
+styleAdd(`[data-bspk=modal]{display:flex;flex-direction:column;overflow:hidden;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{overflow:auto;flex:1}`);;
+import { useMemo } from 'react';
+import { Button } from './Button';
+import { Dialog } from './Dialog';
+import { Txt } from './Txt';
+import { useId } from './hooks/useId';
+import { srOnly } from './utils/srOnly';
+/**
+ * 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.
+ *
+ * TODO: Add support for custom header and footer
+ *
+ * @name Modal
+ */
+function Modal({ 
+//
+header, description, children, id: idProp, ...dialogProps }) {
+    const id = useId(idProp);
+    const ids = useMemo(() => ({
+        description: `dialog-dialog-${id}-description`,
+        title: `dialog-dialog-${id}-title`,
+    }), [id]);
+    return (_jsx(Dialog, { ...dialogProps, "aria-describedby": ids.description, "aria-labelledby": ids.title, children: _jsxs("div", { "data-bspk": "modal", children: [_jsxs("header", { children: [_jsx(Txt, { as: "div", "data-dialog-title": true, id: ids.title, variant: "heading-h4", children: header }), _jsx(Button, { icon: _jsx(SvgClose, {}), label: "close", onClick: dialogProps.onClose, showLabel: false, variant: "tertiary" })] }), _jsxs("main", { children: [_jsx("p", { ...srOnly(children), "data-dialog-description": true, id: ids.description, children: description }), children] })] }) }));
+}
+Modal.bspkName = 'Modal';
+export { Modal };
+//# sourceMappingURL=Modal.js.map

package/dist/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../src/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAe,MAAM,EAAE,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAiBxC;;;;;;;;GAQG;AACH,SAAS,KAAK,CAAC;AACX,EAAE;AACF,MAAM,EACN,WAAW,EACX,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,GAAG,WAAW,EACL;IACT,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,GAAG,GAAG,OAAO,CACf,GAAG,EAAE,CAAC,CAAC;QACH,WAAW,EAAE,iBAAiB,EAAE,cAAc;QAC9C,KAAK,EAAE,iBAAiB,EAAE,QAAQ;KACrC,CAAC,EACF,CAAC,EAAE,CAAC,CACP,CAAC;IAEF,OAAO,CACH,KAAC,MAAM,OAAK,WAAW,sBAAoB,GAAG,CAAC,WAAW,qBAAmB,GAAG,CAAC,KAAK,YAClF,4BAAe,OAAO,aAClB,6BACI,KAAC,GAAG,IAAC,EAAE,EAAC,KAAK,6BAAmB,EAAE,EAAE,GAAG,CAAC,KAAK,EAAE,OAAO,EAAC,YAAY,YAC9D,MAAM,GACL,EACN,KAAC,MAAM,IACH,IAAI,EAAE,KAAC,QAAQ,KAAG,EAClB,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,WAAW,CAAC,OAAO,EAC5B,SAAS,EAAE,KAAK,EAChB,OAAO,EAAC,UAAU,GACpB,IACG,EACT,2BACI,eAAO,MAAM,CAAC,QAAQ,CAAC,mCAA0B,EAAE,EAAE,GAAG,CAAC,WAAW,YAC/D,WAAW,GACZ,EACH,QAAQ,IACN,IACL,GACD,CACZ,CAAC;AACN,CAAC;AAED,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;AAEzB,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/{NumberField.d.ts → dist/NumberField.d.ts}

@@ -9,7 +9,7 @@ export type NumberFieldProps = Pick<NumberInputProps, 'centered' | 'disabled' |
  *
  * @name NumberField
  */
-declare function NumberField({ label, errorMessage: errorMessageProp, helperText, controlId, labelTrailing, required, ...inputProps }: NumberFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function NumberField({ label, errorMessage: errorMessageProp, helperText, controlId, labelTrailing, required, ...inputProps }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
 declare namespace NumberField {
     var bspkName: string;
 }

package/{NumberField.js → dist/NumberField.js}

@@ -1,7 +1,6 @@
-import { jsx } from '@emotion/react/jsx-runtime';
-import { FormField } from './FormField.js';
-import { NumberInput } from './NumberInput.js';
-
+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 (-).
@@ -12,9 +11,8 @@ import { NumberInput } from './NumberInput.js';
  */
 function NumberField({ label, errorMessage: errorMessageProp, helperText, controlId, labelTrailing, required, ...inputProps }) {
     const errorMessage = (!inputProps.readOnly && !inputProps.disabled && errorMessageProp) || undefined;
-    return (jsx(FormField, { controlId: controlId, errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => jsx(NumberInput, { ...inputProps, ...fieldProps, "aria-label": label, id: controlId }) }));
+    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
+//# sourceMappingURL=NumberField.js.map

package/dist/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","sourceRoot":"","sources":["../src/NumberField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,SAAS,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAoB,WAAW,EAAE,MAAM,eAAe,CAAC;AAQ9D;;;;;;;GAOG;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/{NumberInput.d.ts → dist/NumberInput.d.ts}

@@ -1,3 +1,4 @@
+import './number-input.scss';
 import { CommonProps } from '.';
 export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'> & {
     /**
@@ -25,10 +26,9 @@ export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'i
  *
  * @name NumberInput
  */
-declare function NumberInput({ value, onChange, centered, size, disabled, readOnly, name, id: inputIdProp, invalid, 'aria-label': ariaLabel, max: maxProp, min: minProp, }: NumberInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function NumberInput({ value, onChange, centered, 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 const style: import("@emotion/react").SerializedStyles;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/NumberInput.js

@@ -0,0 +1,64 @@
+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 { styleAdd } from './utils/styleAdd';
+styleAdd(`[data-bspk=number-input]{--font: var(--body-base);--height: var(--spacing-sizing-10);--svg-width: var(--spacing-sizing-05);--color: var(--foreground-neutral-on-surface);width:100%;display:flex;flex-flow:row nowrap;font:var(--font);height:var(--height);border:1px solid var(--stroke-neutral-base);border-radius:var(--radius-small);background:var(--surface-neutral-t1-base)}[data-bspk=number-input]:focus-within{border-color:var(--stroke-brand-primary);outline:1px solid var(--stroke-brand-primary)}[data-bspk=number-input] [data-divider]{width:4px;border-right:1px solid var(--stroke-neutral-base);height:calc(var(--height) - 8px);margin:3px 0}[data-bspk=number-input] button{min-width:var(--height);background:none;border:none;cursor:pointer;font:var(--font);display:flex;justify-content:center;align-items:center;color:var(--color)}[data-bspk=number-input] button svg{width:var(--svg-width)}[data-bspk=number-input] button:disabled{cursor:not-allowed;color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=number-input] input{color:var(--color);min-width:0;display:block;font:var(--font);text-align:center;padding:0 var(--spacing-sizing-03);background:rgba(0,0,0,0);border:none}[data-bspk=number-input] input:focus{outline:none}[data-bspk=number-input] input::-webkit-outer-spin-button,[data-bspk=number-input] input::-webkit-inner-spin-button{appearance:none;margin:0}[data-bspk=number-input] input[type=number]{appearance:textfield}[data-bspk=number-input]:not([data-disabled],[data-readonly]) input:hover,[data-bspk=number-input]:not([data-disabled],[data-readonly]) button:not(:disabled):hover{background-color:var(--interactions-hover-opacity)}[data-bspk=number-input]:not([data-disabled],[data-readonly]) input:active,[data-bspk=number-input]:not([data-disabled],[data-readonly]) button:not(:disabled):active{background-color:var(--interactions-press-opacity)}[data-bspk=number-input]:not([data-disabled],[data-readonly])[data-invalid]{border-color:var(--status-error);outline-color:var(--status-error)}[data-bspk=number-input][data-disabled],[data-bspk=number-input][data-readonly]{--color: var(--foreground-neutral-disabled-on-surface);border-color:var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=number-input][data-disabled] [data-divider],[data-bspk=number-input][data-readonly] [data-divider]{border-color:var(--stroke-neutral-disabled-light)}[data-bspk=number-input][data-readonly] input{color:var(--foreground-neutral-on-surface) !important}[data-bspk=number-input][data-size=small]{--font: var(--body-small);--height: var(--spacing-sizing-08)}[data-bspk=number-input][data-size=large]{--font: var(--body-large);--height: var(--spacing-sizing-12);--svg-width: var(--spacing-sizing-06)}`);;
+import { useId } from './hooks/useId';
+import { useLongPress } from './hooks/useLongPress';
+function isNumber(value) {
+    if (typeof value === 'number')
+        return value;
+    if (typeof value !== 'string')
+        return undefined;
+    const num = Number(value);
+    return isNaN(num) ? undefined : num;
+}
+/**
+ * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
+ * pressing the (+) or (-).
+ *
+ * @name NumberInput
+ */
+function NumberInput({ 
+//
+value = 1, onChange, centered = false, size = 'medium', disabled = false, readOnly = false, name, id: inputIdProp, invalid, 'aria-label': ariaLabel, max: maxProp, min: minProp, }) {
+    const inputId = useId(inputIdProp);
+    const max = isNumber(maxProp);
+    const min = isNumber(minProp);
+    const fix = (next = value) => {
+        let fixValue = next;
+        if (typeof min !== 'undefined' && next < min)
+            fixValue = min;
+        if (typeof max !== 'undefined' && next > max)
+            fixValue = max;
+        if (fixValue !== value)
+            onChange(fixValue);
+    };
+    const buttonProps = {
+        min,
+        max,
+        disabled,
+        readOnly,
+        onChange: fix,
+        value,
+    };
+    return (_jsxs("div", { "aria-valuemax": max || undefined, "aria-valuemin": min || undefined, "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, { ...buttonProps, increment: -1 }), _jsx("input", { "aria-label": ariaLabel, disabled: disabled, id: inputId, name: name, onBlur: () => {
+                    fix();
+                }, onChange: (event) => {
+                    onChange(event.target.value);
+                }, readOnly: readOnly, type: "number", value: value }), !centered && (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": true, "data-divider": true }), _jsx(IncrementButton, { ...buttonProps, increment: -1 })] })), _jsx(IncrementButton, { ...buttonProps, increment: 1 })] }));
+}
+// eslint-disable-next-line react/no-multi-comp
+function IncrementButton({ increment, min, max, readOnly, disabled, onChange, value, }) {
+    const add = increment === 1;
+    const prevValue = isNumber(value) || 0;
+    const isDisabled = readOnly ||
+        disabled ||
+        (typeof min !== 'undefined' && prevValue + increment < min) ||
+        (typeof max !== 'undefined' && prevValue + increment > max);
+    const longPress = useLongPress((pressCounter) => onChange(prevValue + increment * pressCounter), 2000, isDisabled);
+    return (_jsx("button", { "aria-label": `${add ? 'Increase' : 'Decrease'} value`, "data-increment": increment, disabled: isDisabled, type: "button", ...longPress.buttonProps, children: add ? _jsx(SvgAdd, {}) : _jsx(SvgRemove, {}) }));
+}
+NumberInput.bspkName = 'NumberInput';
+export { NumberInput };
+//# sourceMappingURL=NumberInput.js.map

package/dist/NumberInput.js.map

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

package/{Popover.d.ts → dist/Popover.d.ts}

@@ -1,3 +1,4 @@
+import './popover.scss';
 import { ReactElement } from 'react';
 import { Placement } from './hooks/useFloating';
 import { CallToActionButton, CommonProps } from './';
@@ -35,10 +36,9 @@ export type PopoverProps = CommonProps<'disabled'> & {
  *
  * @name Popover
  */
-declare function Popover({ placement, header, content, callToAction, children, disabled }: PopoverProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Popover({ placement, header, content, callToAction, children, disabled }: PopoverProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Popover {
     var bspkName: string;
 }
 export { Popover };
-export declare const style: import("@emotion/react").SerializedStyles;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Popover.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SvgClose } from '@bspk/icons/Close';
+import { styleAdd } from './utils/styleAdd';
+styleAdd(`[data-bspk=popover]{position:absolute;z-index:var(--z-index-tooltip-popover);background:var(--surface-neutral-t1-base);box-shadow:var(--drop-shadow-float);padding:var(--spacing-sizing-04);width:300px;border-radius:var(--radius-large);display:flex;flex-direction:column;--arrow-size: var(--spacing-sizing-02);--arrow-offset: calc(var(--arrow-size) * -2);--arrow-background-color: var(--surface-neutral-t1-base)}[data-bspk=popover] header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sizing-02);gap:var(--spacing-sizing-04)}[data-bspk=popover] header button{background:none;border:none;cursor:pointer;padding:0;margin:0 0 0 auto;color:var(--foreground-neutral-on-surface-variant-01);height:var(--spacing-sizing-06);width:var(--spacing-sizing-06)}[data-bspk=popover] header button svg{width:var(--spacing-sizing-06);height:var(--spacing-sizing-06)}[data-bspk=popover] [data-arrow]{z-index:1;position:absolute;width:0;height:0;border-style:solid;border-width:var(--arrow-size) var(--arrow-size) var(--arrow-size) var(--arrow-size);border-color:rgba(0,0,0,0)}[data-bspk=popover][data-placement^=top] [data-arrow]{bottom:var(--arrow-offset);border-top-color:var(--arrow-background-color);filter:drop-shadow(0 2px 1px var(--shadow-10))}[data-bspk=popover][data-placement^=right] [data-arrow]{margin-left:calc(var(--arrow-offset)*2);border-right-color:var(--arrow-background-color);filter:drop-shadow(-2px 0 1px var(--shadow-10))}[data-bspk=popover][data-placement^=bottom] [data-arrow]{top:var(--arrow-offset);border-bottom-color:var(--arrow-background-color);filter:drop-shadow(0 -2px 1px var(--shadow-10))}[data-bspk=popover][data-placement=bottom-start] [data-arrow]{margin-left:var(--arrow-offset)}[data-bspk=popover][data-placement=bottom-end] [data-arrow]{margin-left:calc(var(--arrow-offset)*-1)}[data-bspk=popover][data-placement^=left] [data-arrow]{right:var(--arrow-offset);border-left-color:var(--arrow-background-color);filter:drop-shadow(2px 0 1px var(--shadow-10))}[data-bspk=popover] [data-content]{gap:var(--spacing-sizing-04);display:flex;flex-direction:column}[data-bspk=popover] [data-call-to-action]{margin:0 0 0 auto}`);;
+import { cloneElement, useId, useMemo, useRef, useState } from 'react';
+import { Button } from './Button';
+import { Portal } from './Portal';
+import { Txt } from './Txt';
+import { useFloating } from './hooks/useFloating';
+import { useOutsideClick } from './hooks/useOutsideClick';
+/**
+ * Brief message that provide additional guidance and helps users perform an action if needed.
+ *
+ * @name Popover
+ */
+function Popover({ placement = 'top', header, content, callToAction, children, disabled = false }) {
+    const id = useId();
+    const [show, setShow] = useState(false);
+    const arrowRef = useRef(null);
+    const { elements, floatingStyles, middlewareData } = useFloating({
+        placement: placement,
+        strategy: 'absolute',
+        offsetOptions: 22,
+        arrowRef,
+        hide: !show,
+    });
+    useOutsideClick([elements.floating], () => setShow(false));
+    const child = useMemo(() => !disabled &&
+        children &&
+        cloneElement(children, {
+            onClick: () => setShow((prev) => !prev),
+            'aria-describedby': id,
+        }), [children, disabled, id]);
+    return disabled ? (children) : (_jsxs(_Fragment, { children: [child, _jsx(Portal, { children: _jsxs("div", { "data-bspk": "popover", "data-placement": middlewareData?.offset?.placement, id: id, ref: (node) => {
+                        elements.setFloating(node);
+                        elements.setTrigger(document.querySelector(`[aria-describedby="${id}"]`));
+                    }, style: floatingStyles, children: [_jsxs("header", { children: [_jsx(Txt, { variant: "heading-h6", children: header }), _jsx("button", { "aria-label": "Close", onClick: () => setShow(false), children: _jsx(SvgClose, {}) })] }), _jsxs("div", { "data-content": true, children: [_jsx(Txt, { as: "div", variant: "body-small", children: content }), callToAction?.label && callToAction?.onClick && (_jsx(Button, { "data-call-to-action": true, label: callToAction.label, onClick: callToAction.onClick, size: "small", variant: "secondary" }))] }), _jsx("div", { "data-arrow": true, ref: (node) => {
+                                arrowRef.current = node;
+                            }, style: {
+                                left: `${middlewareData?.arrow?.x}px`,
+                                top: `${middlewareData?.arrow?.y}px`,
+                            } })] }) })] }));
+}
+Popover.bspkName = 'Popover';
+export { Popover };
+//# sourceMappingURL=Popover.js.map

package/dist/Popover.js.map

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

package/{Portal.js → dist/Portal.js}

@@ -1,6 +1,5 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
-
 /**
  * Utility component to render children in the portals container provided by the BaseProvider.
  *
@@ -14,10 +13,10 @@ function Portal({ children, container }) {
         if (!portalContainer && typeof window !== 'undefined')
             setPortalContainer(document.body);
     }, [portalContainer]);
+    // data-bspk="portal" can't be used here
     return portalContainer && createPortal(children, portalContainer);
 }
 Portal.bspkName = 'Portal';
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
-
 export { Portal };
-//# sourceMappingURL=Portal.js.map
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+//# sourceMappingURL=Portal.js.map

package/dist/Portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.js","sourceRoot":"","sources":["../src/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAazC;;;;;;GAMG;AACH,SAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAe;IAChD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,SAAS,IAAI,IAAI,CAAC,CAAC;IAE9F,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,eAAe,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,kBAAkB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7F,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,wCAAwC;IACxC,OAAO,eAAe,IAAI,YAAY,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;AACtE,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC;AAElB,sDAAsD"}

package/{ProgressBar.d.ts → dist/ProgressBar.d.ts}

@@ -1,3 +1,4 @@
+import './progress-bar.scss';
 export type ProgressBarProps = {
     /**
      * The size of the progressbar.
@@ -29,10 +30,9 @@ export type ProgressBarProps = {
  *
  * @name ProgressBar
  */
-declare function ProgressBar({ size, completion, align, label }: ProgressBarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ProgressBar({ size, completion, align, label }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ProgressBar {
     var bspkName: string;
 }
 export { ProgressBar };
-export declare const style: import("@emotion/react").SerializedStyles;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/ProgressBar.js

@@ -0,0 +1,17 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { styleAdd } from './utils/styleAdd';
+styleAdd(`[data-bspk=progress-bar]{/*! --width: is set via inline style */display:flex;flex-direction:column;width:100%;gap:var(--spacing-sizing-01)}[data-bspk=progress-bar] progress{opacity:0;position:absolute}[data-bspk=progress-bar] [data-bar]{width:100%;height:var(--spacing-sizing-02);background-color:var(--surface-neutral-t3-low);border-radius:var(--radius-small)}[data-bspk=progress-bar] [data-bar]::after{content:"";display:block;height:100%;background-color:var(--foreground-brand-primary);border-radius:var(--radius-small);width:var(--width);transition:width .3s}[data-bspk=progress-bar][data-size=small]{max-width:248px}[data-bspk=progress-bar][data-size=small] [data-bar]{height:var(--spacing-sizing-01)}[data-bspk=progress-bar] label{font-size:var(--labels-small);width:100%;text-align:center}[data-bspk=progress-bar][data-align=left] label{text-align:left}`);;
+import { useId } from 'react';
+/**
+ * A progress bar is a horizontal visual indicator that let’s the user know the progression of a task or operation
+ * occurring in the background.
+ *
+ * @name ProgressBar
+ */
+function ProgressBar({ size = 'large', completion = 0, align = 'center', label }) {
+    const id = useId();
+    return (_jsxs("div", { "data-align": align, "data-bspk": "progress-bar", "data-size": size, children: [_jsxs("progress", { "aria-busy": completion < 100, "aria-label": "A bounded progress bar from 0 to 100", "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": completion, id: id, max: "100", value: completion, children: [completion, "%"] }), _jsx("div", { "aria-hidden": true, "data-bar": true, style: { '--width': `${completion}%` } }), _jsx("label", { htmlFor: id, children: label })] }));
+}
+ProgressBar.bspkName = 'ProgressBar';
+export { ProgressBar };
+//# sourceMappingURL=ProgressBar.js.map

package/dist/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../src/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAiB,KAAK,EAAE,MAAM,OAAO,CAAC;AA4B7C;;;;;GAKG;AACH,SAAS,WAAW,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,UAAU,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,EAAE,KAAK,EAAoB;IAC9F,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,OAAO,CACH,6BAAiB,KAAK,eAAY,cAAc,eAAY,IAAI,aAC5D,iCACe,UAAU,GAAG,GAAG,gBAChB,sCAAsC,mBAClC,GAAG,mBACH,CAAC,mBACD,UAAU,EACzB,EAAE,EAAE,EAAE,EACN,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,UAAU,aAEhB,UAAU,SACJ,EACX,qDAA0B,KAAK,EAAE,EAAE,SAAS,EAAE,GAAG,UAAU,GAAG,EAAmB,GAAI,EACrF,gBAAO,OAAO,EAAE,EAAE,YAAG,KAAK,GAAS,IACjC,CACT,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/{ProgressCircle.d.ts → dist/ProgressCircle.d.ts}

@@ -1,3 +1,4 @@
+import './progress-circle.scss';
 export type ProgressCircleProps = {
     /** The label of the progress circle. */
     label: string;
@@ -19,13 +20,12 @@ export type ProgressCircleProps = {
  *
  * @name ProgressCircle
  */
-declare function ProgressCircle({ label, labelPosition, size }: ProgressCircleProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ProgressCircle({ label, labelPosition, size }: ProgressCircleProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ProgressCircle {
     var bspkName: string;
     var SVG: (props: {
         strokeWidth?: number;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
 }
 export { ProgressCircle };
-export declare const style: import("@emotion/react").SerializedStyles;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/ProgressCircle.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/no-multi-comp */
+import { styleAdd } from './utils/styleAdd';
+styleAdd(`[data-bspk=progress-circle]{--animation-speed: 1.5s;display:flex;flex-direction:column;gap:var(--spacing-sizing-02);align-items:center;justify-content:center}[data-bspk=progress-circle][data-label-position=top]{flex-direction:column-reverse}[data-bspk=progress-circle][data-label-position=left]{flex-direction:row-reverse}[data-bspk=progress-circle][data-label-position=right]{flex-direction:row}[data-bspk=progress-circle] svg{color:var(--foreground-brand-secondary);animation:spin var(--animation-speed) linear infinite}@keyframes spin{100%{transform:rotate(360deg)}0%{transform:rotate(0deg)}}[data-bspk=progress-circle][data-size=small] svg{width:32px}[data-bspk=progress-circle][data-size=medium] svg{width:40px}[data-bspk=progress-circle][data-size=large] svg{width:48px}`);;
+import { useId } from 'react';
+import { Txt } from './Txt';
+/**
+ * Rotating circle or pill that indicates the status or state of completion for a process that’s part of a user flow.
+ *
+ * @name ProgressCircle
+ */
+function ProgressCircle({ label, labelPosition, size = 'medium' }) {
+    let variant = 'labels-base';
+    if (size === 'small')
+        variant = 'labels-small';
+    else if (size === 'large')
+        variant = 'labels-large';
+    const labelId = useId();
+    return (_jsxs("div", { "aria-labelledby": labelId, "data-bspk": "progress-circle", "data-label-position": labelPosition, "data-size": size, role: "progressbar", children: [_jsx(ProgressCircle.SVG, {}), _jsx(Txt, { id: labelId, variant: variant, children: label || 'Loading ...' })] }));
+}
+ProgressCircle.bspkName = 'ProgressCircle';
+export { ProgressCircle };
+const ProgressCircleSVG = (props) => {
+    const strokeWidth = props.strokeWidth || 10;
+    const width = 100;
+    const id = useId();
+    return (_jsxs("svg", { ...props, "data-animated": true, fill: "none", viewBox: `0 0 ${width * 2} ${width * 2}`, children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: `${id}spinner-secondHalf`, children: [_jsx("stop", { offset: "50%", stopColor: "currentColor", stopOpacity: 0 }), _jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.375" })] }), _jsxs("linearGradient", { id: `${id}spinner-firstHalf`, children: [_jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: 1 }), _jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.375" })] })] }), _jsxs("g", { strokeWidth: strokeWidth * 2, children: [_jsx("path", { d: `M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${width + (width - strokeWidth)} ${width}`, stroke: `url(#${id}spinner-secondHalf)` }), _jsx("path", { d: `M ${width + (width - strokeWidth)} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width}`, stroke: `url(#${id}spinner-firstHalf)` }), _jsx("path", { d: `M ${strokeWidth} ${width} A ${width - strokeWidth} ${width - strokeWidth} 0 0 1 ${strokeWidth} ${width - 2}`, stroke: "currentColor", strokeLinecap: "round" })] })] }));
+};
+ProgressCircle.SVG = ProgressCircleSVG;
+//# sourceMappingURL=ProgressCircle.js.map

package/dist/ProgressCircle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCircle.js","sourceRoot":"","sources":["../src/ProgressCircle.tsx"],"names":[],"mappings":";AAAA,wCAAwC;AAExC,OAAO,wBAAwB,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAoB5B;;;;GAIG;AACH,SAAS,cAAc,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,GAAG,QAAQ,EAAuB;IAClF,IAAI,OAAO,GAAe,aAAa,CAAC;IAExC,IAAI,IAAI,KAAK,OAAO;QAAE,OAAO,GAAG,cAAc,CAAC;SAC1C,IAAI,IAAI,KAAK,OAAO;QAAE,OAAO,GAAG,cAAc,CAAC;IAEpD,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,OAAO,CACH,kCACqB,OAAO,eACd,iBAAiB,yBACN,aAAa,eACvB,IAAI,EACf,IAAI,EAAC,aAAa,aAElB,KAAC,cAAc,CAAC,GAAG,KAAG,EACtB,KAAC,GAAG,IAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,YAC7B,KAAK,IAAI,aAAa,GACrB,IACJ,CACT,CAAC;AACN,CAAC;AAED,cAAc,CAAC,QAAQ,GAAG,gBAAgB,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,MAAM,iBAAiB,GAAG,CAAC,KAA+B,EAAE,EAAE;IAC1D,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,EAAE,CAAC;IAC5C,MAAM,KAAK,GAAG,GAAG,CAAC;IAClB,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,OAAO,CACH,kBAAS,KAAK,yBAAgB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE,aAC9E,2BACI,0BAAgB,EAAE,EAAE,GAAG,EAAE,oBAAoB,aACzC,eAAM,MAAM,EAAC,KAAK,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAE,CAAC,GAAI,EAC9D,eAAM,MAAM,EAAC,MAAM,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAC,OAAO,GAAG,IACtD,EACjB,0BAAgB,EAAE,EAAE,GAAG,EAAE,mBAAmB,aACxC,eAAM,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAE,CAAC,GAAI,EAC7D,eAAM,MAAM,EAAC,MAAM,EAAC,SAAS,EAAC,cAAc,EAAC,WAAW,EAAC,OAAO,GAAG,IACtD,IACd,EACP,aAAG,WAAW,EAAE,WAAW,GAAG,CAAC,aAC3B,eACI,CAAC,EAAE,KAAK,WAAW,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,KAAK,GAAG,CAAC,KAAK,GAAG,WAAW,CAAC,IAAI,KAAK,EAAE,EAC9H,MAAM,EAAE,QAAQ,EAAE,qBAAqB,GACzC,EACF,eACI,CAAC,EAAE,KAAK,KAAK,GAAG,CAAC,KAAK,GAAG,WAAW,CAAC,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,WAAW,IAAI,KAAK,EAAE,EAC9H,MAAM,EAAE,QAAQ,EAAE,oBAAoB,GACxC,EAEF,eACI,CAAC,EAAE,KAAK,WAAW,IAAI,KAAK,MAAM,KAAK,GAAG,WAAW,IAAI,KAAK,GAAG,WAAW,UAAU,WAAW,IAAI,KAAK,GAAG,CAAC,EAAE,EAChH,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,GACvB,IACF,IACF,CACT,CAAC;AACN,CAAC,CAAC;AAEF,cAAc,CAAC,GAAG,GAAG,iBAAiB,CAAC"}

package/{ProgressionStepper.d.ts → dist/ProgressionStepper.d.ts}

@@ -1,3 +1,4 @@
+import './progression-stepper.scss';
 import { ElementProps } from '.';
 /** A progress stepper item is a single step in the progress bar. */
 export type ProgressionStepperItem = {
@@ -57,10 +58,9 @@ export type ProgressionStepperProps = {
  *
  * @name ProgressionStepper
  */
-declare function ProgressionStepper({ steps, currentStep: currentStepProp, variant, ...containerProps }: ElementProps<ProgressionStepperProps, 'div'>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ProgressionStepper({ steps, currentStep: currentStepProp, variant, ...containerProps }: ElementProps<ProgressionStepperProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 declare namespace ProgressionStepper {
     var bspkName: string;
 }
 export { ProgressionStepper };
-export declare const style: import("@emotion/react").SerializedStyles;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/ProgressionStepper.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { SvgCheck } from '@bspk/icons/Check';
+import { styleAdd } from './utils/styleAdd';
+styleAdd(`[data-bspk=progression-stepper]{width:100%;--circle-width: var(--spacing-sizing-09);--active-background-color: var(--surface-brand-primary);--active-foreground-color: var(--foreground-brand-on-primary);--inactive-background-color: var(--surface-neutral-t3-low);--inactive-foreground-color: var(--foreground-neutral-on-surface)}[data-bspk=progression-stepper] ol{display:flex;width:100%;margin:0;padding:0}[data-bspk=progression-stepper] ol li{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;gap:var(--spacing-sizing-02)}[data-bspk=progression-stepper] ol li [data-line-circle]{display:flex;justify-content:center;align-items:center;flex-direction:row}[data-bspk=progression-stepper] ol li [data-line-circle] [data-line]{background-color:var(--inactive-background-color);height:2px;flex-grow:1}[data-bspk=progression-stepper] ol li [data-line-circle] [data-circle]{display:flex;justify-content:center;align-items:center;width:var(--circle-width);height:var(--circle-width);border-radius:50%;background-color:none;border:2px solid var(--inactive-background-color);font:var(--labels-large)}[data-bspk=progression-stepper] ol li [data-line-circle] [data-circle] svg{display:none;width:var(--spacing-sizing-06);height:var(--spacing-sizing-06)}[data-bspk=progression-stepper] ol li [data-content]{display:flex;padding:0 var(--spacing-sizing-10);font:var(--body-small)}[data-bspk=progression-stepper] ol li:first-of-type [data-line=before]{visibility:hidden}[data-bspk=progression-stepper] ol li:last-of-type [data-line=after]{visibility:hidden}[data-bspk=progression-stepper] ol li[data-status=complete] [data-line]{background-color:var(--active-background-color)}[data-bspk=progression-stepper] ol li[data-status=complete] [data-circle]{background-color:var(--active-background-color);border:1px solid var(--active-background-color);color:var(--active-foreground-color)}[data-bspk=progression-stepper] ol li[data-status=complete] [data-circle] span{display:none}[data-bspk=progression-stepper] ol li[data-status=complete] [data-circle] svg{display:block}[data-bspk=progression-stepper] ol li[data-status=current] [data-line=before]{background-color:var(--active-background-color)}[data-bspk=progression-stepper] ol li[data-status=current] [data-circle]{border-color:var(--active-background-color)}[data-bspk=progression-stepper][data-variant=vertical] ol{flex-direction:column}[data-bspk=progression-stepper][data-variant=vertical] li{flex-direction:row}[data-bspk=progression-stepper][data-variant=vertical] li [data-line-circle]{flex-direction:column;width:var(--circle-width)}[data-bspk=progression-stepper][data-variant=vertical] li [data-line-circle] [data-line]{width:2px;height:auto}[data-bspk=progression-stepper][data-variant=vertical] li [data-content]{flex-direction:column;padding:var(--spacing-sizing-10) 0}[data-bspk=progression-stepper][data-variant=widget]{--circle-width: var(--spacing-sizing-05)}[data-bspk=progression-stepper][data-variant=widget] label{display:flex;flex-direction:column;gap:var(--spacing-sizing-02);margin-bottom:var(--spacing-sizing-03);font:var(--body-small)}[data-bspk=progression-stepper][data-variant=widget] label [data-title]{font:var(--labels-base);color:var(--foreground-neutral-on-surface)}[data-bspk=progression-stepper][data-variant=widget] label [data-subtitle]{font:var(--body-x-small);color:var(--foreground-neutral-on-surface-variant-02)}[data-bspk=progression-stepper][data-variant=widget] ol{align-items:center;min-height:var(--spacing-sizing-09)}[data-bspk=progression-stepper][data-variant=widget] ol li [data-line-circle] [data-line]{width:10px}[data-bspk=progression-stepper][data-variant=widget] ol li[data-status=current]{--circle-width: var(--spacing-sizing-09)}[data-bspk=progression-stepper][data-variant=widget] ol li[data-status=incomplete] [data-circle] span{display:none}`);;
+/**
+ * A progress stepper is a horizontal visual indicator that let’s the user know the progression of the current process.
+ *
+ * @name ProgressionStepper
+ */
+function ProgressionStepper({ steps = [], currentStep: currentStepProp = 0, variant = 'horizontal', ...containerProps }) {
+    const currentStep = Math.max(0, Math.min(currentStepProp, steps.length + 1));
+    return (_jsxs("div", { ...containerProps, "data-bspk": "progression-stepper", "data-variant": variant, children: [variant === 'widget' && (_jsxs("label", { children: [_jsx("span", { "data-title": true, children: steps[Math.max(0, Math.min(currentStep - 1, steps.length - 1))].name }), _jsx("span", { "data-subtitle": true, children: currentStep >= steps.length ? ('Completed') : (_jsxs(_Fragment, { children: ["Step ", currentStep, " of ", steps.length] })) })] })), _jsx("ol", { children: steps.flatMap(({ name, subtext }, index) => {
+                    const stepNum = index + 1;
+                    let status = 'incomplete';
+                    if (stepNum < currentStep)
+                        status = 'complete';
+                    else if (stepNum === currentStep)
+                        status = 'current';
+                    return (_jsxs("li", { "data-status": status, "data-step": stepNum, children: [_jsxs("span", { "aria-hidden": true, "data-line-circle": true, children: [_jsx("span", { "data-line": "before" }), _jsxs("span", { "data-circle": true, children: [_jsx("span", { children: stepNum }), status === 'complete' && _jsx(SvgCheck, {})] }), _jsx("span", { "data-line": "after" })] }), variant !== 'widget' && (_jsxs("span", { "data-content": true, children: [_jsx("span", { "data-name": true, children: name }), subtext && _jsx("span", { "data-subtext": true, children: subtext })] }))] }, `step-${index}`));
+                }) })] }));
+}
+ProgressionStepper.bspkName = 'ProgressionStepper';
+export { ProgressionStepper };
+//# sourceMappingURL=ProgressionStepper.js.map

package/dist/ProgressionStepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressionStepper.js","sourceRoot":"","sources":["../src/ProgressionStepper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,4BAA4B,CAAC;AAuDpC;;;;GAIG;AACH,SAAS,kBAAkB,CAAC,EACxB,KAAK,GAAG,EAAE,EACV,WAAW,EAAE,eAAe,GAAG,CAAC,EAChC,OAAO,GAAG,YAAY,EACtB,GAAG,cAAc,EAC0B;IAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;IAC7E,OAAO,CACH,kBAAS,cAAc,eAAY,qBAAqB,kBAAe,OAAO,aACzE,OAAO,KAAK,QAAQ,IAAI,CACrB,4BACI,6CAAkB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAQ,EAC9F,gDACK,WAAW,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAC3B,WAAW,CACd,CAAC,CAAC,CAAC,CACA,uCACU,WAAW,UAAM,KAAK,CAAC,MAAM,IACpC,CACN,GACE,IACH,CACX,EACD,uBACK,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE;oBACxC,MAAM,OAAO,GAAG,KAAK,GAAG,CAAC,CAAC;oBAC1B,IAAI,MAAM,GAA0C,YAAY,CAAC;oBACjE,IAAI,OAAO,GAAG,WAAW;wBAAE,MAAM,GAAG,UAAU,CAAC;yBAC1C,IAAI,OAAO,KAAK,WAAW;wBAAE,MAAM,GAAG,SAAS,CAAC;oBAErD,OAAO,CACH,6BAAiB,MAAM,eAAa,OAAO,aACvC,0EACI,4BAAgB,QAAQ,GAAG,EAC3B,gDACI,yBAAO,OAAO,GAAQ,EACrB,MAAM,KAAK,UAAU,IAAI,KAAC,QAAQ,KAAG,IACnC,EACP,4BAAgB,OAAO,GAAG,IACvB,EACN,OAAO,KAAK,QAAQ,IAAI,CACrB,iDACI,4CAAiB,IAAI,GAAQ,EAC5B,OAAO,IAAI,+CAAoB,OAAO,GAAQ,IAC5C,CACV,KAd6C,QAAQ,KAAK,EAAE,CAe5D,CACR,CAAC;gBACN,CAAC,CAAC,GACD,IACH,CACT,CAAC;AACN,CAAC;AAED,kBAAkB,CAAC,QAAQ,GAAG,oBAAoB,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/{ProgressionStepperBar.d.ts → dist/ProgressionStepperBar.d.ts}

@@ -1,3 +1,4 @@
+import './progression-stepper-bar.scss';
 export type ProgressionStepperBarProps = {
     /**
      * The number of steps in the progress bar.
@@ -14,7 +15,11 @@ export type ProgressionStepperBarProps = {
      * @minimum 0
      */
     stepCompleted?: number;
-    /** The size of the progress bar. */
+    /**
+     * The size of the progress bar.
+     *
+     * @default large
+     */
     size?: 'large' | 'small';
 };
 /**
@@ -22,10 +27,9 @@ export type ProgressionStepperBarProps = {
  *
  * @name ProgressionStepperBar
  */
-declare function ProgressionStepperBar({ stepCount, stepCompleted: stepCompletedProp, size, }: ProgressionStepperBarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ProgressionStepperBar({ stepCount, stepCompleted: stepCompletedProp, size, }: ProgressionStepperBarProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ProgressionStepperBar {
     var bspkName: string;
 }
 export { ProgressionStepperBar };
-export declare const style: import("@emotion/react").SerializedStyles;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */