@bspk/ui 1.1.32 → 1.1.33

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

@@ -0,0 +1,99 @@
+[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);
+  max-width: 280px;
+}
+[data-bspk=number-input]:focus-within {
+  border-color: 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 {
+  width: var(--height);
+  height: var(--height);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font: var(--font);
+  flex-shrink: 0;
+  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: transparent;
+  border: none;
+  flex-grow: 1;
+}
+[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);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -0,0 +1,105 @@
+/** * 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=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);
+  max-width: 280px;
+}
+[data-bspk=number-input]:focus-within {
+  border-color: 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 {
+  width: var(--height);
+  height: var(--height);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font: var(--font);
+  flex-shrink: 0;
+  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: transparent;
+  border: none;
+  flex-grow: 1;
+}
+[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);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

package/dist/components/PhoneNumberField/PhoneNumberField.d.ts

@@ -0,0 +1,18 @@
+import { FormFieldProps } from '../FormField';
+import { PhoneNumberInputProps } from '../PhoneNumberInput';
+export type PhoneNumberFieldProps = Pick<PhoneNumberInputProps, 'autoComplete' | 'disabled' | 'disableFormatting' | 'errorMessage' | 'initialCountryCode' | 'inputRef' | 'invalid' | 'name' | 'onChange' | 'placeholder' | 'readOnly' | 'required' | 'size' | 'type' | 'value'> & Pick<FormFieldProps, 'controlId' | 'helperText' | 'label' | 'labelTrailing'>;
+/**
+ * A text input that allows users to enter text phone numbers with country codes.
+ *
+ * @example
+ *     <PhoneNumberField label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />;
+ *
+ * @name PhoneNumberField
+ * @phase WorkInProgress
+ */
+declare function PhoneNumberField({ label, errorMessage: errorMessageProp, helperText, controlId, labelTrailing, required, value, onChange, disableFormatting, initialCountryCode, invalid, ...inputProps }: PhoneNumberFieldProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PhoneNumberField {
+    var bspkName: string;
+}
+export { PhoneNumberField };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/PhoneNumberField/PhoneNumberField.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormField } from '../FormField';
+import { PhoneNumberInput } from '../PhoneNumberInput';
+/**
+ * A text input that allows users to enter text phone numbers with country codes.
+ *
+ * @example
+ *     <PhoneNumberField label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />;
+ *
+ * @name PhoneNumberField
+ * @phase WorkInProgress
+ */
+function PhoneNumberField({ label, errorMessage: errorMessageProp, helperText, controlId, labelTrailing, required, value, onChange, disableFormatting, initialCountryCode, invalid, ...inputProps }) {
+    const errorMessage = (!inputProps.readOnly && !inputProps.disabled && errorMessageProp) || undefined;
+    return (_jsx(FormField, { controlId: controlId, "data-bspk": "phone-number-field", errorMessage: errorMessage, helperText: helperText, invalid: !inputProps.readOnly && !inputProps.disabled && invalid, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => (_jsx(PhoneNumberInput, { "aria-label": label, disableFormatting: disableFormatting, errorMessage: errorMessage, initialCountryCode: initialCountryCode, onChange: onChange, value: value, ...fieldProps, ...inputProps })) }));
+}
+PhoneNumberField.bspkName = 'PhoneNumberField';
+export { PhoneNumberField };
+//# sourceMappingURL=PhoneNumberField.js.map

package/dist/components/PhoneNumberField/PhoneNumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneNumberField.js","sourceRoot":"","sources":["../../../src/components/PhoneNumberField/PhoneNumberField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAyB,MAAM,+BAA+B,CAAC;AAsBxF;;;;;;;;GAQG;AACH,SAAS,gBAAgB,CAAC,EACtB,KAAK,EACL,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAClB,OAAO,EACP,GAAG,UAAU,EACO;IACpB,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,oBAAoB,EAC9B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,CAAC,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,OAAO,EAChE,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,gBAAgB,kBACD,KAAK,EACjB,iBAAiB,EAAE,iBAAiB,EACpC,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,KACR,UAAU,KACV,UAAU,GAChB,CACL,GACO,CACf,CAAC;AACN,CAAC;AAED,gBAAgB,CAAC,QAAQ,GAAG,kBAAkB,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

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

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

package/dist/components/PhoneNumberField/index.js

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

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

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

package/dist/components/PhoneNumberInput/PhoneNumberInput.d.ts

@@ -0,0 +1,41 @@
+import { InvalidPropsLibrary } from '../../index.js';
+import { TextInputProps } from '../TextInput';
+import { SupportedCountryCode } from '../../utils/countryCodes';
+import './phone-number-input.scss';
+export type PhoneNumberInputProps = InvalidPropsLibrary & Pick<TextInputProps, 'aria-label' | 'autoComplete' | 'disabled' | 'inputRef' | 'name' | 'placeholder' | 'readOnly' | 'required' | 'size' | 'type' | 'value'> & {
+    /**
+     * The default country code to select when the component is rendered. If not provided, it will attempt to guess
+     * based on the user's locale. If the guessed country code is not supported, it will default to 'US'. Based on
+     * [ISO](https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes) 2-digit country codes.
+     *
+     * @type string
+     */
+    initialCountryCode?: SupportedCountryCode;
+    /**
+     * Disables formatting of the phone number input in the UI. values returned by `onChange` are always
+     * unformatted.
+     *
+     * @type boolean
+     */
+    disableFormatting?: boolean;
+    /** Handler for change events. Contains the raw phone number value and the selected country code. */
+    onChange: (value: string, countryCode: SupportedCountryCode) => void;
+};
+/**
+ * A text input that allows users to enter text phone numbers with country codes.
+ *
+ * This is the base element and if used must contain the field label contextually. This will more often be used in the
+ * PhoneNumberField component.
+ *
+ * @example
+ *     <PhoneNumberInput aria-label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />;
+ *
+ * @name PhoneNumberInput
+ * @phase WorkInProgress
+ */
+declare function PhoneNumberInput({ errorMessage, value, onChange, disableFormatting, initialCountryCode, disabled, invalid, readOnly, ...inputProps }: PhoneNumberInputProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PhoneNumberInput {
+    var bspkName: string;
+}
+export { PhoneNumberInput };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/PhoneNumberInput/PhoneNumberInput.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SvgIcon } from '@bspk/icons/SvgIcon';
+import { AsYouType, getCountryCallingCode } from 'libphonenumber-js';
+import { useMemo, useState } from 'react';
+import { Divider } from '../Divider';
+import { ListItem } from '../ListItem';
+import { Listbox } from '../Listbox';
+import { Modal } from '../Modal';
+import { TextInput } from '../TextInput';
+import { useCombobox } from '../../hooks/useCombobox';
+import { useUIContext } from '../../hooks/useUIContext';
+import { countryCodeData, countryCodes } from '../../utils/countryCodes';
+import { guessUserCountryCode } from '../../utils/guessUserCountryCode';
+import './phone-number-input.css.js';
+const useCountryCodeSelectOptions = (initialCountryCode) => {
+    return useMemo(() => {
+        const selectOptions = countryCodes.map((code) => {
+            const countryCodeDetails = countryCodeData[code];
+            const callingCodeString = `(+${getCountryCallingCode(code)})`;
+            return {
+                value: code,
+                label: `${countryCodeDetails?.name}`,
+                leading: countryCodeDetails?.flagIconName ? _jsx(SvgIcon, { name: countryCodeDetails?.flagIconName }) : null,
+                trailing: callingCodeString,
+            };
+        });
+        const defaultCode = initialCountryCode || guessUserCountryCode();
+        return { countryCodeSelectOptions: selectOptions, defaultCountryCode: defaultCode };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+};
+/**
+ * A text input that allows users to enter text phone numbers with country codes.
+ *
+ * This is the base element and if used must contain the field label contextually. This will more often be used in the
+ * PhoneNumberField component.
+ *
+ * @example
+ *     <PhoneNumberInput aria-label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />;
+ *
+ * @name PhoneNumberInput
+ * @phase WorkInProgress
+ */
+function PhoneNumberInput({ errorMessage, value, onChange, disableFormatting, initialCountryCode, disabled, invalid, readOnly, ...inputProps }) {
+    const { isMobile } = useUIContext();
+    const { toggleProps, menuProps, closeMenu, elements, isOpen: showCountryCodeSelectMenu, activeIndex, } = useCombobox({
+        placement: 'bottom',
+        disabled,
+        invalid,
+        readOnly,
+        errorMessage,
+    });
+    const { countryCodeSelectOptions, defaultCountryCode } = useCountryCodeSelectOptions(initialCountryCode);
+    const [countryCode, setCountryCode] = useState(defaultCountryCode);
+    const formattedValue = useMemo(() => {
+        if (disableFormatting) {
+            return value;
+        }
+        const formatter = new AsYouType(countryCode);
+        return formatter.input(value || '');
+    }, [value, countryCode, disableFormatting]);
+    const { callingCode, selectedCodeData } = useMemo(() => {
+        const selectedValue = (countryCode || 'US');
+        const data = countryCodeData[selectedValue] ?? countryCodeData.US;
+        return {
+            callingCode: getCountryCallingCode(countryCode),
+            selectedCodeData: data,
+        };
+    }, [countryCode]);
+    const handleChange = (newValue) => {
+        const rawNumber = newValue.replace(/\D/g, '');
+        if (rawNumber === value)
+            return;
+        onChange(rawNumber, countryCode);
+    };
+    const setRef = (el) => {
+        elements.setReference(el);
+    };
+    return (_jsxs("div", { "data-bspk": "phone-number-input", ref: setRef, children: [_jsx(TextInput, { onChange: handleChange, value: formattedValue, ...inputProps, disabled: disabled, errorMessage: errorMessage, invalid: invalid, leading: _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsxs("button", { ...(disabled ? {} : toggleProps), "aria-label": "Open country code menu", "data-bspk": "country-code-select", children: [_jsx(SvgIcon, { name: selectedCodeData.flagIconName }), _jsx(SvgIcon, { name: "KeyboardArrowDown" })] }), _jsx(Divider, { orientation: "vertical" }), _jsx("span", { "aria-label": "Country code", style: { cursor: 'default' }, children: `+${callingCode}` })] }), readOnly: readOnly }), showCountryCodeSelectMenu && (_jsx(_Fragment, { children: isMobile ? (_jsx(Modal, { "data-bspk-owner": "phone-number-input", description: "select a country code for your phone number", header: "Country Code", onClose: closeMenu, open: showCountryCodeSelectMenu, children: countryCodeSelectOptions.map((option, index) => (_jsx(ListItem, { active: activeIndex === index || undefined, "aria-selected": countryCode === option.value, "data-bspk": "country-code-select-option", id: `${option.value}-country-code-select-option`, label: option.label, leading: option.leading, onClick: () => {
+                            setCountryCode(option.value);
+                            closeMenu();
+                        }, trailing: option.trailing }, option.value))) })) : (_jsx(Listbox, { activeIndex: activeIndex, "data-bspk-owner": "phone-number-input", innerRef: elements.setFloating, itemDisplayCount: countryCodeSelectOptions.length, items: countryCodeSelectOptions, onChange: (next, event) => {
+                        event?.preventDefault();
+                        closeMenu();
+                        setCountryCode(next[0]);
+                    }, selectedValues: [countryCode], ...menuProps })) }))] }));
+}
+PhoneNumberInput.bspkName = 'PhoneNumberInput';
+export { PhoneNumberInput };
+//# sourceMappingURL=PhoneNumberInput.js.map

package/dist/components/PhoneNumberInput/PhoneNumberInput.js.map

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

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

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

package/dist/components/PhoneNumberInput/index.js

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

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

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

package/dist/components/PhoneNumberInput/phone-number-input.css

@@ -0,0 +1,36 @@
+[data-bspk=phone-number-input] {
+  width: 100%;
+}
+[data-bspk=phone-number-input] [data-bspk=text-input] {
+  padding-left: 0;
+}
+[data-bspk=phone-number-input] [data-bspk=divider] {
+  margin-left: 0;
+  margin-top: var(--spacing-sizing-01);
+  margin-bottom: var(--spacing-sizing-01);
+}
+[data-bspk=phone-number-input] [data-bspk=country-code-select] {
+  border: 0;
+  padding: var(--spacing-sizing-02);
+  background: none;
+  cursor: pointer;
+  outline: none;
+}
+[data-bspk=phone-number-input] [data-bspk=country-code-select] [data-bspk-name=KeyboardArrowDown] {
+  margin-left: var(--spacing-sizing-02);
+}
+[data-bspk=phone-number-input] [data-bspk=country-code] {
+  font: var(--body-base);
+  color: var(--foreground-neutral-on-surface);
+}
+[data-bspk=phone-number-input] [data-bspk=txt] {
+  cursor: default;
+}
+[data-bspk=phone-number-input] [data-disabled] [data-bspk=country-code-select] {
+  cursor: default;
+}
+
+[data-bspk-owner=phone-number-input] [data-bspk=list-item] [data-trailing] {
+  font: var(--body-base);
+  color: var(--foreground-neutral-on-surface);
+}

package/dist/components/PhoneNumberInput/phone-number-input.css.js

@@ -0,0 +1,42 @@
+/** * 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=phone-number-input] {
+  width: 100%;
+}
+[data-bspk=phone-number-input] [data-bspk=text-input] {
+  padding-left: 0;
+}
+[data-bspk=phone-number-input] [data-bspk=divider] {
+  margin-left: 0;
+  margin-top: var(--spacing-sizing-01);
+  margin-bottom: var(--spacing-sizing-01);
+}
+[data-bspk=phone-number-input] [data-bspk=country-code-select] {
+  border: 0;
+  padding: var(--spacing-sizing-02);
+  background: none;
+  cursor: pointer;
+  outline: none;
+}
+[data-bspk=phone-number-input] [data-bspk=country-code-select] [data-bspk-name=KeyboardArrowDown] {
+  margin-left: var(--spacing-sizing-02);
+}
+[data-bspk=phone-number-input] [data-bspk=country-code] {
+  font: var(--body-base);
+  color: var(--foreground-neutral-on-surface);
+}
+[data-bspk=phone-number-input] [data-bspk=txt] {
+  cursor: default;
+}
+[data-bspk=phone-number-input] [data-disabled] [data-bspk=country-code-select] {
+  cursor: default;
+}
+
+[data-bspk-owner=phone-number-input] [data-bspk=list-item] [data-trailing] {
+  font: var(--body-base);
+  color: var(--foreground-neutral-on-surface);
+}
+`));
+document.head.appendChild(style);
+

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,71 @@
+import { ReactElement } from 'react';
+import { CallToActionButton, CommonProps } from '../../index.js';
+import { Placement } from '../../hooks/useFloating';
+import './popover.scss';
+export type PopoverProps = CommonProps<'disabled'> & {
+    /**
+     * The placement of the popover.
+     *
+     * @default top
+     */
+    placement?: Placement;
+    /** The popover header. */
+    header: string;
+    /**
+     * The content of the popover.
+     *
+     * @type multiline
+     */
+    content: string;
+    /**
+     * The call to action button properties.
+     *
+     * @type CallToActionButton
+     */
+    callToAction?: CallToActionButton;
+    /**
+     * A single element that will trigger the popover when clicked.
+     *
+     * @type ReactElement
+     * @required
+     */
+    children: ReactElement;
+};
+/**
+ * Brief message that provide additional guidance and helps users perform an action if needed.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { Popover } from '@bspk/ui/Popover';
+ *     import { Button } from '@bspk/ui/Button';
+ *
+ *     export function Example() {
+ *         const [showPopover, setShowPopover] = useState<boolean>(false);
+ *
+ *         const togglePopover = () => setShowPopover(!showPopover);
+ *         const onPopoverCallToActionClick = () => alert('Action clicked');
+ *
+ *         return (
+ *             <Popover
+ *                 placement="bottom"
+ *                 content="This is a popover content"
+ *                 header="Popover Header"
+ *                 callToAction={{
+ *                     label: 'Action',
+ *                     onClick: onPopoverCallToActionClick,
+ *                 }}
+ *             >
+ *                 <Button label="Toggle popover" onClick={togglePopover} />
+ *             </Popover>
+ *         );
+ *     }
+ *
+ * @name Popover
+ * @phase DesignReview
+ */
+declare function Popover({ placement, header, content, callToAction, children, disabled }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Popover {
+    var bspkName: string;
+}
+export { Popover };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Popover/Popover.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SvgClose } from '@bspk/icons/Close';
+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';
+import './popover.css.js';
+/**
+ * Brief message that provide additional guidance and helps users perform an action if needed.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { Popover } from '@bspk/ui/Popover';
+ *     import { Button } from '@bspk/ui/Button';
+ *
+ *     export function Example() {
+ *         const [showPopover, setShowPopover] = useState<boolean>(false);
+ *
+ *         const togglePopover = () => setShowPopover(!showPopover);
+ *         const onPopoverCallToActionClick = () => alert('Action clicked');
+ *
+ *         return (
+ *             <Popover
+ *                 placement="bottom"
+ *                 content="This is a popover content"
+ *                 header="Popover Header"
+ *                 callToAction={{
+ *                     label: 'Action',
+ *                     onClick: onPopoverCallToActionClick,
+ *                 }}
+ *             >
+ *                 <Button label="Toggle popover" onClick={togglePopover} />
+ *             </Popover>
+ *         );
+ *     }
+ *
+ * @name Popover
+ * @phase DesignReview
+ */
+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.setReference(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/components/Popover/Popover.js.map

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

package/dist/components/Popover/PopoverExample.d.ts

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