@bspk/ui 1.3.3 → 1.3.5

package/dist/components/{NumberInput/number-input.css.js → InputNumber/input-number.css.js}

@@ -1,7 +1,7 @@
 /** * 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] {
+style.appendChild(document.createTextNode(`[data-bspk=input-number] {
   --font: var(--body-base);
   --height: var(--spacing-sizing-10);
   --svg-width: var(--spacing-sizing-05);
@@ -15,16 +15,16 @@ style.appendChild(document.createTextNode(`[data-bspk=number-input] {
   border-radius: var(--radius-sm);
   background: var(--surface-neutral-t1-base);
 }
-[data-bspk=number-input]:focus-within {
+[data-bspk=input-number]:focus-within {
   outline: solid 2px var(--stroke-neutral-focus);
 }
-[data-bspk=number-input] [data-divider] {
+[data-bspk=input-number] [data-divider] {
   width: 1px;
   background: var(--stroke-neutral-base);
   margin: 3px 0;
   height: calc(var(--height) - 8px);
 }
-[data-bspk=number-input] button {
+[data-bspk=input-number] button {
   width: var(--height);
   height: calc(var(--height) - 2px);
   background: none;
@@ -37,17 +37,17 @@ style.appendChild(document.createTextNode(`[data-bspk=number-input] {
   align-items: center;
   color: var(--color);
 }
-[data-bspk=number-input] button svg {
+[data-bspk=input-number] button svg {
   width: var(--svg-width);
 }
-[data-bspk=number-input] button:focus {
+[data-bspk=input-number] button:focus {
   outline: none;
 }
-[data-bspk=number-input] button:disabled {
+[data-bspk=input-number] button:disabled {
   cursor: not-allowed;
   color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=number-input] input {
+[data-bspk=input-number] input {
   color: var(--color);
   min-width: 0;
   display: block;
@@ -58,44 +58,44 @@ style.appendChild(document.createTextNode(`[data-bspk=number-input] {
   border: none;
   flex-grow: 1;
 }
-[data-bspk=number-input] input:focus {
+[data-bspk=input-number] input:focus {
   outline: none;
 }
-[data-bspk=number-input] input::-webkit-outer-spin-button, [data-bspk=number-input] input::-webkit-inner-spin-button {
+[data-bspk=input-number] input::-webkit-outer-spin-button, [data-bspk=input-number] input::-webkit-inner-spin-button {
   appearance: none;
   margin: 0;
 }
-[data-bspk=number-input] input[type=number] {
+[data-bspk=input-number] 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 {
+[data-bspk=input-number]:not([data-disabled], [data-readonly]) input:hover,
+[data-bspk=input-number]: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 {
+[data-bspk=input-number]:not([data-disabled], [data-readonly]) input:active,
+[data-bspk=input-number]: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] {
+[data-bspk=input-number]: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] {
+[data-bspk=input-number][data-disabled], [data-bspk=input-number][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] {
+[data-bspk=input-number][data-disabled] [data-divider], [data-bspk=input-number][data-readonly] [data-divider] {
   border-color: var(--stroke-neutral-disabled-light);
 }
-[data-bspk=number-input][data-readonly] input {
+[data-bspk=input-number][data-readonly] input {
   color: var(--foreground-neutral-on-surface) !important;
 }
-[data-bspk=number-input][data-size=small] {
+[data-bspk=input-number][data-size=small] {
   --font: var(--body-small);
   --height: var(--spacing-sizing-08);
 }
-[data-bspk=number-input][data-size=large] {
+[data-bspk=input-number][data-size=large] {
   --font: var(--body-large);
   --height: var(--spacing-sizing-12);
   --svg-width: var(--spacing-sizing-06);

package/dist/components/InputNumberField/InputNumberField.d.ts

@@ -0,0 +1,15 @@
+import { FormFieldControlProps } from '-/components/FormField';
+import { InputNumberProps } from '-/components/InputNumber';
+export type InputNumberFieldProps = FormFieldControlProps<InputNumberProps>;
+/**
+ * A field wrapper for the InputNumber component.
+ *
+ * This component takes properties from the FormField and InputNumber components.
+ *
+ * @name InputNumberField
+ * @phase UXReview
+ *
+ * @generated
+ */
+export declare function InputNumberField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }: InputNumberFieldProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/InputNumberField/InputNumberField.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormField } from '../FormField';
+import { InputNumber } from '../InputNumber';
+/**
+ * A field wrapper for the InputNumber component.
+ *
+ * This component takes properties from the FormField and InputNumber components.
+ *
+ * @name InputNumberField
+ * @phase UXReview
+ *
+ * @generated
+ */
+export function InputNumberField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }) {
+    return (_jsx(FormField, { errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, style: style, children: _jsx(InputNumber, { ...controlProps }) }));
+}
+//# sourceMappingURL=InputNumberField.js.map

package/dist/components/InputNumberField/InputNumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputNumberField.js","sourceRoot":"","sources":["../../../src/components/InputNumberField/InputNumberField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAyB,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAoB,MAAM,0BAA0B,CAAC;AAIzE;;;;;;;;;GASG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC7B,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,KAAK,EACL,GAAG,YAAY,EACK;IACpB,OAAO,CACH,KAAC,SAAS,IACN,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,YAEZ,KAAC,WAAW,OAAK,YAAY,GAAI,GACzB,CACf,CAAC;AACN,CAAC"}

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

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

package/dist/components/InputNumberField/index.js

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

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

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

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

@@ -0,0 +1,57 @@
+import './input-phone.scss';
+import { InputProps } from '-/components/Input';
+import { FieldControlProps } from '-/types/common';
+import { SupportedCountryCode } from '-/utils/countryCodes';
+import { ScrollListItemsStyleProps } from '-/utils/scrollListItemsStyle';
+export type InputPhoneProps = FieldControlProps<string, SupportedCountryCode> & Pick<InputProps, 'inputRef' | 'size'> & ScrollListItemsStyleProps & {
+    /**
+     * 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;
+};
+/**
+ * An input that allows users to enter text phone numbers and select country codes for the phone number.
+ *
+ * This is the base element and if used must contain the field label contextually.
+ *
+ * For a more complete example with field usage, see the InputPhoneField component.
+ *
+ * @example
+ *     import { InputPhone } from '@bspk/ui/InputPhone';
+ *
+ *     function ExampleStandalone() {
+ *         const [value, onChange] = React.useState<number | undefined>();
+ *
+ *         return <InputPhone aria-label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />;
+ *     }
+ *
+ *     function ExampleWithField() {
+ *         const [value, onChange] = React.useState<number | undefined>();
+ *
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Example Input Phone</FieldLabel>
+ *                 <InputPhone aria-label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />
+ *                 <FieldDescription>
+ *                     The phone input allows you to enter a phone number with country code.
+ *                 </FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
+ * @name InputPhone
+ * @phase UXReview
+ */
+export declare function InputPhone({ value, onChange, disableFormatting, initialCountryCode, disabled, readOnly, name, id: idProp, invalid: invalidProp, required, size, inputRef, scrollLimit, 'aria-label': ariaLabel, }: InputPhoneProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/InputPhone/InputPhone.js

@@ -0,0 +1,161 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './input-phone.css.js';
+import { SvgIcon } from '@bspk/icons/SvgIcon';
+import { AsYouType, getCountryCallingCode } from 'libphonenumber-js';
+import { useMemo, useRef, useState } from 'react';
+import { Button } from '../Button';
+import { useFieldInit } from '../Field';
+import { InputElement } from '../Input';
+import { ListItem } from '../ListItem';
+import { Menu } from '../Menu';
+import { useArrowNavigation } from '../../hooks/useArrowNavigation';
+import { useFloating } from '../../hooks/useFloating';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
+import { useUIContext } from '../../hooks/useUIContext';
+import { countryCodeData, countryCodes } from '../../utils/countryCodes';
+import { getElementById } from '../../utils/dom';
+import { guessUserCountryCode } from '../../utils/guessUserCountryCode';
+import { handleKeyDown } from '../../utils/handleKeyDown';
+import { scrollListItemsStyle } from '../../utils/scrollListItemsStyle';
+import { useIds } from '../../utils/useIds';
+const SELECT_OPTIONS = countryCodes.map((code) => {
+    const countryCodeDetails = countryCodeData[code];
+    return {
+        value: code,
+        label: `${countryCodeDetails?.name}`,
+        countryCallingCode: getCountryCallingCode(code),
+        flagIconName: countryCodeDetails?.flagIconName,
+    };
+});
+/**
+ * An input that allows users to enter text phone numbers and select country codes for the phone number.
+ *
+ * This is the base element and if used must contain the field label contextually.
+ *
+ * For a more complete example with field usage, see the InputPhoneField component.
+ *
+ * @example
+ *     import { InputPhone } from '@bspk/ui/InputPhone';
+ *
+ *     function ExampleStandalone() {
+ *         const [value, onChange] = React.useState<number | undefined>();
+ *
+ *         return <InputPhone aria-label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />;
+ *     }
+ *
+ *     function ExampleWithField() {
+ *         const [value, onChange] = React.useState<number | undefined>();
+ *
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Example Input Phone</FieldLabel>
+ *                 <InputPhone aria-label="Phone Number" initialCountryCode="US" value={value} onChange={onChange} />
+ *                 <FieldDescription>
+ *                     The phone input allows you to enter a phone number with country code.
+ *                 </FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
+ * @name InputPhone
+ * @phase UXReview
+ */
+export function InputPhone({ value, onChange, disableFormatting, initialCountryCode, disabled, readOnly, name, id: idProp, invalid: invalidProp, required = false, size = 'medium', inputRef, scrollLimit = 5, 'aria-label': ariaLabel = 'Phone number input', }) {
+    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
+        idProp,
+        required,
+        disabled,
+        readOnly,
+        invalidProp,
+    });
+    const menuId = useMemo(() => `${id}-menu`, [id]);
+    const items = useIds(`input-phone-${id}`, SELECT_OPTIONS);
+    const [countryCode, setCountryCode] = useState(initialCountryCode || guessUserCountryCode());
+    const inputInternalRef = useRef(null);
+    const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation({
+        ids: items.map((i) => i.id),
+    });
+    const closeMenu = () => setActiveElementId(null);
+    const open = Boolean(activeElementId);
+    const { elements, floatingStyles } = useFloating({
+        hide: !open,
+        offsetOptions: 4,
+        refWidth: true,
+    });
+    useOutsideClick({
+        elements: [elements.floating, elements.reference],
+        callback: () => closeMenu(),
+        disabled: !open,
+    });
+    const spaceEnter = () => {
+        if (!open) {
+            elements.reference?.click();
+            return;
+        }
+        if (activeElementId)
+            getElementById(activeElementId)?.click();
+    };
+    const { callingCode, selectedCodeData } = useMemo(() => {
+        const selectedValue = (countryCode || 'US');
+        const data = countryCodeData[selectedValue] ?? countryCodeData.US;
+        return {
+            callingCode: getCountryCallingCode(countryCode),
+            selectedCodeData: data,
+        };
+    }, [countryCode]);
+    const handleChange = (newValue) => {
+        let rawNumber = newValue.replace(/\D/g, '');
+        if (rawNumber === value)
+            return;
+        if (!disableFormatting) {
+            const formatter = new AsYouType(countryCode);
+            rawNumber = formatter.input(`${rawNumber}`);
+        }
+        onChange(rawNumber, countryCode);
+    };
+    const { sendAriaLiveMessage } = useUIContext();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { "data-bspk": "input-phone", onKeyDownCapture: handleKeyDown({
+                    Tab: () => {
+                        //  if (open) closeMenu();
+                    },
+                }), children: _jsx(InputElement, { "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, "aria-label": ariaLabel || undefined, autoComplete: "off", containerRef: elements.setReference, disabled: disabled, id: id, inputRef: (node) => {
+                        inputRef?.(node);
+                        inputInternalRef.current = node;
+                    }, invalid: invalid, leading: _jsxs(_Fragment, { children: [_jsxs(Button, { "aria-activedescendant": open ? activeElementId || undefined : undefined, "aria-controls": open ? menuId : undefined, "aria-disabled": disabled || undefined, "aria-expanded": open, "aria-haspopup": "listbox", "aria-label": "select country code", "aria-owns": menuId, "aria-readonly": readOnly || undefined, disabled: disabled || readOnly, label: "Open country code menu", name: `${name}-country-code`, onClick: (event) => {
+                                    const nextOpen = !open;
+                                    if (nextOpen) {
+                                        setActiveElementId(items[0]?.id || null);
+                                    }
+                                    else {
+                                        setActiveElementId(null);
+                                    }
+                                    event.preventDefault();
+                                }, onKeyDown: handleKeyDown({
+                                    ...arrowKeyCallbacks,
+                                    ArrowDown: (event) => {
+                                        if (!open)
+                                            spaceEnter();
+                                        arrowKeyCallbacks.ArrowDown?.(event);
+                                    },
+                                    Space: spaceEnter,
+                                    Enter: spaceEnter,
+                                    Escape: closeMenu,
+                                    'Ctrl+Option+Space': spaceEnter,
+                                }, { preventDefault: true, stopPropagation: true }), role: "combobox", variant: "tertiary", children: [_jsx(SvgIcon, { name: selectedCodeData.flagIconName }), _jsx(SvgIcon, { name: "KeyboardArrowDown" })] }), _jsx("span", { "aria-hidden": "true", style: { cursor: 'default' }, children: `+${callingCode}` })] }), name: name, onChange: handleChange, owner: "input-phone", readOnly: readOnly, required: required, size: size, value: value }) }), open && (_jsx(Menu, { "aria-autocomplete": undefined, "aria-label": "Select country code", as: "div", id: menuId, innerRef: elements.setFloating, onClickCapture: () => {
+                    // Prevent the menu from closing when clicking inside it
+                    // maintain focus on the select control
+                    inputInternalRef.current?.focus();
+                }, onFocus: () => {
+                    inputInternalRef.current?.focus();
+                }, owner: "input-phone", role: "listbox", style: {
+                    ...(open ? scrollListItemsStyle(scrollLimit, items.length) : {}),
+                    ...floatingStyles,
+                }, tabIndex: -1, children: items.map(({ countryCallingCode, flagIconName, ...item }) => (_createElement(ListItem, { ...item, active: item.id === activeElementId, "aria-selected": item.value === countryCode, key: item.id, leading: flagIconName ? _jsx(SvgIcon, { "aria-hidden": true, name: flagIconName }) : null, onClick: () => {
+                        setCountryCode(item.value);
+                        sendAriaLiveMessage(`Selected country code ${item.label}`);
+                        closeMenu();
+                        inputInternalRef.current?.focus();
+                    }, role: "option", trailing: `(+${countryCallingCode})` }))) }))] }));
+}
+//# sourceMappingURL=InputPhone.js.map

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

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

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

@@ -0,0 +1,4 @@
+import { InputPhoneProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<InputPhoneProps>[];
+export declare const InputPhoneExample: ComponentExample<InputPhoneProps>;

package/dist/components/InputPhone/InputPhoneExample.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const presets = [];
+export const InputPhoneExample = {
+    render: ({ props, Component }) => _jsx(Component, { ...props }),
+    variants: true,
+};
+//# sourceMappingURL=InputPhoneExample.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputPhoneExample.js","sourceRoot":"","sources":["../../../src/components/InputPhone/InputPhoneExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,OAAO,GAA8B,EAAE,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,QAAQ,EAAE,IAAI;CACjB,CAAC"}

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

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

package/dist/components/InputPhone/index.js

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

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

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

package/dist/components/InputPhone/input-phone.css

@@ -0,0 +1,42 @@
+[data-bspk=input-phone] {
+  position: relative;
+  width: 100%;
+}
+
+[data-bspk-owner=input-phone][data-bspk=input] {
+  padding-left: 0;
+}
+[data-bspk-owner=input-phone][data-bspk=input]:focus-within {
+  outline: none;
+}
+[data-bspk-owner=input-phone][data-bspk=input] input:focus-visible {
+  outline: solid 2px var(--stroke-neutral-focus);
+  border-radius: var(--radius-sm);
+}
+[data-bspk-owner=input-phone][data-bspk=input] [data-bspk=divider] {
+  margin: 0 var(--spacing-sizing-02) 0 0;
+}
+[data-bspk-owner=input-phone][data-bspk=input] [data-leading] {
+  position: relative;
+}
+[data-bspk-owner=input-phone][data-bspk=input] [data-leading] [data-bspk=button] {
+  gap: var(--spacing-sizing-02);
+  padding: 0 var(--spacing-sizing-03);
+  min-height: 100%;
+  margin-right: var(--spacing-sizing-02);
+  position: relative;
+  z-index: 2;
+}
+[data-bspk-owner=input-phone][data-bspk=input] [data-leading] [data-bspk=button]::after {
+  content: "";
+  position: absolute;
+  top: var(--spacing-sizing-01);
+  bottom: var(--spacing-sizing-01);
+  right: 0;
+  width: 1px;
+  background-color: var(--stroke-neutral-base);
+  pointer-events: none;
+}
+[data-bspk-owner=input-phone][data-bspk=input][data-size=small] [data-leading] [data-bspk=button] {
+  padding-left: var(--spacing-sizing-02);
+}

package/dist/components/InputPhone/input-phone.css.js

@@ -0,0 +1,47 @@
+/** * 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=input-phone] {
+  position: relative;
+  width: 100%;
+}
+
+[data-bspk-owner=input-phone][data-bspk=input] {
+  padding-left: 0;
+}
+[data-bspk-owner=input-phone][data-bspk=input]:focus-within {
+  outline: none;
+}
+[data-bspk-owner=input-phone][data-bspk=input] input:focus-visible {
+  outline: solid 2px var(--stroke-neutral-focus);
+  border-radius: var(--radius-sm);
+}
+[data-bspk-owner=input-phone][data-bspk=input] [data-bspk=divider] {
+  margin: 0 var(--spacing-sizing-02) 0 0;
+}
+[data-bspk-owner=input-phone][data-bspk=input] [data-leading] {
+  position: relative;
+}
+[data-bspk-owner=input-phone][data-bspk=input] [data-leading] [data-bspk=button] {
+  gap: var(--spacing-sizing-02);
+  padding: 0 var(--spacing-sizing-03);
+  min-height: 100%;
+  margin-right: var(--spacing-sizing-02);
+  position: relative;
+  z-index: 2;
+}
+[data-bspk-owner=input-phone][data-bspk=input] [data-leading] [data-bspk=button]::after {
+  content: "";
+  position: absolute;
+  top: var(--spacing-sizing-01);
+  bottom: var(--spacing-sizing-01);
+  right: 0;
+  width: 1px;
+  background-color: var(--stroke-neutral-base);
+  pointer-events: none;
+}
+[data-bspk-owner=input-phone][data-bspk=input][data-size=small] [data-leading] [data-bspk=button] {
+  padding-left: var(--spacing-sizing-02);
+}
+`));
+document.head.appendChild(style);

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

@@ -0,0 +1,15 @@
+import { FormFieldControlProps } from '-/components/FormField';
+import { InputPhoneProps } from '-/components/InputPhone';
+export type InputPhoneFieldProps = FormFieldControlProps<InputPhoneProps>;
+/**
+ * A field wrapper for the InputPhone component.
+ *
+ * This component takes properties from the FormField and InputPhone components.
+ *
+ * @name InputPhoneField
+ * @phase UXReview
+ *
+ * @generated
+ */
+export declare function InputPhoneField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }: InputPhoneFieldProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/InputPhoneField/InputPhoneField.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormField } from '../FormField';
+import { InputPhone } from '../InputPhone';
+/**
+ * A field wrapper for the InputPhone component.
+ *
+ * This component takes properties from the FormField and InputPhone components.
+ *
+ * @name InputPhoneField
+ * @phase UXReview
+ *
+ * @generated
+ */
+export function InputPhoneField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }) {
+    return (_jsx(FormField, { errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, style: style, children: _jsx(InputPhone, { ...controlProps }) }));
+}
+//# sourceMappingURL=InputPhoneField.js.map

package/dist/components/InputPhoneField/InputPhoneField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputPhoneField.js","sourceRoot":"","sources":["../../../src/components/InputPhoneField/InputPhoneField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAyB,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAItE;;;;;;;;;GASG;AACH,MAAM,UAAU,eAAe,CAAC,EAC5B,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,KAAK,EACL,GAAG,YAAY,EACI;IACnB,OAAO,CACH,KAAC,SAAS,IACN,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,YAEZ,KAAC,UAAU,OAAK,YAAY,GAAI,GACxB,CACf,CAAC;AACN,CAAC"}

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

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

package/dist/components/InputPhoneField/index.js

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

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

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

package/dist/components/Layout/Layout.d.ts

@@ -1,6 +1,6 @@
 import { ElementType, ReactNode } from 'react';
 import { ElementProps } from '-/types/common';
-export type LayoutProps<As extends ElementType = 'div'> = {
+export type LayoutProps<As extends ElementType = ElementType> = {
     /**
      * The content of the Layout.
      *
@@ -41,12 +41,12 @@ export type LayoutProps<As extends ElementType = 'div'> = {
  * @example
  *     import { Layout } from '@bspk/ui/Layout';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <Layout>Low effort example</Layout>;
  *     }
  *
  * @name Layout
  * @phase Utility
  */
-export declare function Layout<As extends ElementType = 'div'>({ children, column, gap, style, as, align, justify, ...props }: ElementProps<LayoutProps<As>, As>): import("react/jsx-runtime").JSX.Element;
+export declare function Layout<As extends ElementType = ElementType>({ children, column, gap, style, as, align, justify, ...props }: ElementProps<LayoutProps<As>, As>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Layout/Layout.js

@@ -5,7 +5,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @example
  *     import { Layout } from '@bspk/ui/Layout';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <Layout>Low effort example</Layout>;
  *     }
  *

package/dist/components/Layout/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../src/components/Layout/Layout.tsx"],"names":[],"mappings":";AAwCA;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,MAAM,CAAiC,EACnD,QAAQ,EACR,MAAM,EACN,GAAG,GAAG,IAAI,EACV,KAAK,EACL,EAAE,EACF,KAAK,GAAG,YAAY,EACpB,OAAO,GAAG,YAAY,EACtB,GAAG,KAAK,EACwB;IAChC,MAAM,EAAE,GAAgB,EAAE,IAAI,KAAK,CAAC;IAEpC,MAAM,UAAU,GAAG,KAAK,IAAI,YAAY,CAAC;IACzC,MAAM,cAAc,GAAG,OAAO,IAAI,YAAY,CAAC;IAE/C,OAAO,CACH,KAAC,EAAE,OACK,KAAK;QACT,6EAA6E;QAC7E,KAAK,EAAE;YACH,GAAG,KAAK;YACR,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;YACxC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI;YAC5B,UAAU;YACV,cAAc;SACjB,YAEA,QAAQ,GACR,CACR,CAAC;AACN,CAAC"}
+{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../src/components/Layout/Layout.tsx"],"names":[],"mappings":";AAwCA;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,MAAM,CAAuC,EACzD,QAAQ,EACR,MAAM,EACN,GAAG,GAAG,IAAI,EACV,KAAK,EACL,EAAE,EACF,KAAK,GAAG,YAAY,EACpB,OAAO,GAAG,YAAY,EACtB,GAAG,KAAK,EACwB;IAChC,MAAM,EAAE,GAAgB,EAAE,IAAI,KAAK,CAAC;IAEpC,MAAM,UAAU,GAAG,KAAK,IAAI,YAAY,CAAC;IACzC,MAAM,cAAc,GAAG,OAAO,IAAI,YAAY,CAAC;IAE/C,OAAO,CACH,KAAC,EAAE,OACK,KAAK;QACT,6EAA6E;QAC7E,KAAK,EAAE;YACH,GAAG,KAAK;YACR,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;YACxC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI;YAC5B,UAAU;YACV,cAAc;SACjB,YAEA,QAAQ,GACR,CACR,CAAC;AACN,CAAC"}

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

@@ -44,7 +44,7 @@ export type LinkProps = Pick<CommonPropsLibrary, 'disabled'> & {
  * @example
  *     import { Link } from '@bspk/ui/Link';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <Link href="https://bspk.dev" label="Example label" trailingIcon="external" />;
  *     }
  *

package/dist/components/Link/Link.js

@@ -7,7 +7,7 @@ import { lazy, Suspense } from 'react';
  * @example
  *     import { Link } from '@bspk/ui/Link';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <Link href="https://bspk.dev" label="Example label" trailingIcon="external" />;
  *     }
  *