@bspk/ui 1.0.0

package/ProgressionStepperBar.d.ts

@@ -0,0 +1,31 @@
+export type ProgressionStepperBarProps = {
+    /**
+     * The number of steps in the progress bar.
+     *
+     * @minimum 2
+     * @maximum 10
+     * @required
+     */
+    stepCount: number;
+    /**
+     * The last step completed.
+     *
+     * @default 0
+     * @minimum 0
+     */
+    stepCompleted?: number;
+    /** The size of the progress bar. */
+    size?: 'large' | 'small';
+};
+/**
+ * Component description coming soon.
+ *
+ * @name ProgressionStepperBar
+ */
+declare function ProgressionStepperBar({ stepCount, stepCompleted: stepCompletedProp, size, }: ProgressionStepperBarProps): import("@emotion/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 */

package/ProgressionStepperBar.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+
+/**
+ * Component description coming soon.
+ *
+ * @name ProgressionStepperBar
+ */
+function ProgressionStepperBar({ stepCount, stepCompleted: stepCompletedProp = 0, size = 'large', }) {
+    const stepCompleted = Math.min(stepCompletedProp, stepCount);
+    return (jsxs("div", { css: style, "data-progression-stepper-bar": "", "data-size": size, style: { '--steps': stepCount }, children: [jsx("div", { "data-steps": true, children: Array.from({ length: stepCount }, (_, i) => (jsx("div", { "data-complete": i < stepCompleted || undefined, "data-step": i }, i))) }), jsxs("label", { children: [stepCompleted, " of ", stepCount, " steps completed."] })] }));
+}
+ProgressionStepperBar.bspkName = 'ProgressionStepperBar';
+const style = css `
+    &[data-size='large'] {
+        --height: var(--spacing-sizing-02);
+    }
+
+    &[data-size='small'] {
+        --height: var(--spacing-sizing-01);
+    }
+
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: var(--spacing-sizing-01);
+
+    [data-steps] {
+        display: flex;
+        flex-direction: row;
+        gap: var(--spacing-sizing-01);
+        height: var(--height);
+        [data-step] {
+            width: 100%;
+            height: var(--height);
+            min-width: var(--spacing-sizing-02);
+            border-radius: var(--radius-small);
+            background: var(--surface-neutral-t3-low);
+            &[data-complete] {
+                background: var(--surface-brand-primary);
+            }
+        }
+    }
+
+    label {
+        font: var(--labels-small);
+    }
+`;
+
+export { ProgressionStepperBar, style };
+//# sourceMappingURL=ProgressionStepperBar.js.map

package/ProgressionStepperBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressionStepperBar.js","sources":["src/ProgressionStepperBar.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;AAuBA;;;;AAIG;AACH,SAAS,qBAAqB,CAAC,EAC3B,SAAS,EACT,aAAa,EAAE,iBAAiB,GAAG,CAAC,EACpC,IAAI,GAAG,OAAO,GACW,EAAA;IACzB,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;IAE7D,QACIA,IACI,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,KAAK,EACmB,8BAAA,EAAA,EAAE,EACpB,WAAA,EAAA,IAAI,EACf,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAmB,EAEhD,QAAA,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EACK,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,MACpCA,GAAoB,CAAA,KAAA,EAAA,EAAA,eAAA,EAAA,CAAC,GAAG,aAAa,IAAI,SAAS,EAAa,WAAA,EAAA,CAAC,EAAO,EAAA,CAAC,CAAI,CAC/E,CAAC,EAAA,CACA,EACND,IAAA,CAAA,OAAA,EAAA,EAAA,QAAA,EAAA,CACK,aAAa,EAAA,MAAA,EAAM,SAAS,EAAA,mBAAA,CAAA,EAAA,CACzB,CACN,EAAA,CAAA,EACR;AACN,CAAC;AAED,qBAAqB,CAAC,QAAQ,GAAG,uBAAuB,CAAC;AAIlD,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/README.md

@@ -0,0 +1,13 @@
+# Bespoke UI
+
+Bespoke UI package contains all the components that are available for Anywhere Real Estate development teams.
+
+https://bspk.anywhere.re
+
+## Installation
+
+```bash
+npm install @bspk/ui
+```
+
+<!--- Copyright 2025 Anywhere Real Estate - CC BY 4.0 -->

package/Radio.d.ts

@@ -0,0 +1,17 @@
+import { ToggleControlProps, ElementProps } from './';
+export type RadioProps = Pick<ToggleControlProps<HTMLInputElement>, 'aria-label' | 'checked' | 'disabled' | 'invalid' | 'name' | 'onChange' | 'value'>;
+/**
+ * A round control that allows user to choose one option from a set. This is the base element and if used directly you
+ * must wrap it with a label. This will more often be used in the RadioOption or RadioGroup component.
+ *
+ * @element
+ *
+ * @name Radio
+ */
+declare function Radio(props: ElementProps<RadioProps, 'input'>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace Radio {
+    var bspkName: string;
+}
+export { Radio };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/Radio.js

@@ -0,0 +1,97 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+
+/**
+ * A round control that allows user to choose one option from a set. This is the base element and if used directly you
+ * must wrap it with a label. This will more often be used in the RadioOption or RadioGroup component.
+ *
+ * @element
+ *
+ * @name Radio
+ */
+function Radio(props) {
+    const { checked = false, invalid, disabled, onChange, ...otherProps } = props;
+    return (jsxs("span", { css: style, "data-radio": true, children: [jsx("input", { ...otherProps, checked: !!checked, "data-invalid": invalid || undefined, disabled: disabled || undefined, onChange: (event) => onChange(!!event.target.checked, event), type: "radio" }), jsx("span", { "aria-hidden": true })] }));
+}
+Radio.bspkName = 'Radio';
+const style = css `
+    display: block;
+    position: relative;
+    width: var(--spacing-sizing-06);
+    aspect-ratio: 1/1;
+    padding: 2px;
+
+    input[type='radio'] {
+        position: absolute;
+        opacity: 0;
+        z-index: 2;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        cursor: pointer;
+    }
+
+    span {
+        --stroke: var(--stroke-neutral-base);
+        --inner: var(--foreground-brand-primary);
+        --background: none;
+        position: relative;
+        z-index: 1;
+        box-sizing: border-box;
+        display: flex;
+        width: var(--spacing-sizing-05);
+        aspect-ratio: 1/1;
+        border-radius: 50%;
+        border: 2px solid var(--stroke);
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        background: var(--background);
+
+        &:before {
+            content: '';
+            display: block;
+            width: var(--spacing-sizing-03);
+            aspect-ratio: 1/1;
+            background: var(--inner);
+            border-radius: var(--radius-circular);
+            opacity: 0;
+        }
+    }
+
+    input[type='radio']:not(:disabled) {
+        &:hover + span {
+            --background: var(--interactions-neutral-hover-opacity);
+        }
+
+        &:active + span {
+            --background: var(--interactions-neutral-press-opacity);
+        }
+
+        &[data-invalid] + span {
+            --stroke: var(--status-error);
+            --inner: var(--status-error);
+        }
+    }
+
+    input[type='radio']:checked + span {
+        --stroke: var(--stroke-brand-primary);
+
+        &:before {
+            opacity: 1;
+        }
+    }
+
+    input[type='radio']:disabled {
+        pointer-events: none;
+
+        & + span {
+            --stroke: var(--stroke-neutral-interactions-disabled-light);
+            --inner: var(--foreground-neutral-disabled-on-surface);
+        }
+    }
+`;
+
+export { Radio, style };
+//# sourceMappingURL=Radio.js.map

package/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["src/Radio.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;AASA;;;;;;;AAOG;AACH,SAAS,KAAK,CAAC,KAAwC,EAAA;AACnD,IAAA,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAE9E,QACIA,IAAM,CAAA,MAAA,EAAA,EAAA,GAAG,EAAE,KAAK,iCACZC,GACQ,CAAA,OAAA,EAAA,EAAA,GAAA,UAAU,EACd,OAAO,EAAE,CAAC,CAAC,OAAO,EAAA,cAAA,EACJ,OAAO,IAAI,SAAS,EAClC,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAC5D,IAAI,EAAC,OAAO,EAAA,CACd,EACFA,GAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,CAAoB,CACjB,EAAA,CAAA,EACT;AACN,CAAC;AAED,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;AAIlB,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/RadioGroup.d.ts

@@ -0,0 +1,31 @@
+import { ToggleOptionProps } from './ToggleOption';
+import { ElementProps, CommonProps } from './';
+export type RadioGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
+export type RadioGroupProps = CommonProps<'name' | 'value'> & {
+    /**
+     * The function to call when the radios are changed.
+     *
+     * @required
+     */
+    onChange: (value: string) => void;
+    /**
+     * The options for the radios.
+     *
+     * @type RadioGroupOption[]
+     * @required
+     */
+    options: RadioGroupOption[];
+    /** The size of the radio group labels. */
+    size?: 'base' | 'large' | 'small';
+};
+/**
+ * A group of radios that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @name RadioGroup
+ */
+declare function RadioGroup({ onChange, options, name, value: groupValue, size, ...props }: ElementProps<RadioGroupProps, 'div'>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace RadioGroup {
+    var bspkName: string;
+}
+export { RadioGroup };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/RadioGroup.js

@@ -0,0 +1,18 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Radio } from './Radio.js';
+import { ToggleOption } from './ToggleOption.js';
+
+/**
+ * A group of radios that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @name RadioGroup
+ */
+function RadioGroup({ onChange, options = [], name, value: groupValue, size, ...props }) {
+    return (jsx("div", { ...props, "data-control-group": true, "data-radio-group": true, role: "radiogroup", style: { display: 'contents' }, children: options.map(({ label, description, value }) => {
+            return (jsx(ToggleOption, { description: description, label: label, size: size, children: jsx(Radio, { "aria-label": label, checked: groupValue === value, name: name, onChange: (checked) => checked && onChange(value), value: value }) }, value));
+        }) }));
+}
+RadioGroup.bspkName = 'RadioGroup';
+
+export { RadioGroup };
+//# sourceMappingURL=RadioGroup.js.map

package/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["src/RadioGroup.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAyBA;;;;AAIG;AACH,SAAS,UAAU,CAAC,EAChB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,EAAE,UAAU,EACjB,IAAI,EACJ,GAAG,KAAK,EAC2B,EAAA;AACnC,IAAA,QACIA,GAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,EAAA,oBAAA,EAAA,IAAA,EAAA,kBAAA,EAAA,IAAA,EAAsC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAAA,QAAA,EAC/F,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,KAAI;YAC3C,QACIA,GAAC,CAAA,YAAY,EAAC,EAAA,WAAW,EAAE,WAAW,EAAc,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EACxE,QAAA,EAAAA,GAAA,CAAC,KAAK,EAAA,EAAA,YAAA,EACU,KAAK,EACjB,OAAO,EAAE,UAAU,KAAK,KAAK,EAC7B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,KAAK,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,EACjD,KAAK,EAAE,KAAK,EAAA,CACd,EAPuC,EAAA,KAAK,CAQnC,EACjB;SACL,CAAC,EACA,CAAA,EACR;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY;;;;"}

package/RadioOption.d.ts

@@ -0,0 +1,14 @@
+import { RadioProps } from './Radio';
+import { ToggleOptionProps } from './ToggleOption';
+export type RadioOptionProps = Pick<RadioProps, 'checked' | 'disabled' | 'invalid' | 'name' | 'onChange' | 'value'> & Pick<ToggleOptionProps, 'description' | 'label'>;
+/**
+ * A control that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @name RadioOption
+ */
+declare function RadioOption({ label, description, ...checkboxProps }: RadioOptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace RadioOption {
+    var bspkName: string;
+}
+export { RadioOption };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/RadioOption.js

@@ -0,0 +1,16 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Radio } from './Radio.js';
+import { ToggleOption } from './ToggleOption.js';
+
+/**
+ * A control that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @name RadioOption
+ */
+function RadioOption({ label, description, ...checkboxProps }) {
+    return (jsx(ToggleOption, { "data-checkbox-field": true, description: description, label: label, children: jsx(Radio, { ...checkboxProps, "aria-label": label }) }));
+}
+RadioOption.bspkName = 'RadioOption';
+
+export { RadioOption };
+//# sourceMappingURL=RadioOption.js.map

package/RadioOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioOption.js","sources":["src/RadioOption.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAMA;;;;AAIG;AACH,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,aAAa,EAAoB,EAAA;IAC3E,QACIA,IAAC,YAAY,EAAA,EAAA,qBAAA,EAAA,IAAA,EAAqB,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EACpE,QAAA,EAAAA,GAAA,CAAC,KAAK,EAAK,EAAA,GAAA,aAAa,gBAAc,KAAK,EAAA,CAAI,EACpC,CAAA,EACjB;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa;;;;"}

package/Rating.d.ts

@@ -0,0 +1,16 @@
+export type RatingProps = {
+    /** The content of the rating. */
+    children: string;
+};
+/**
+ * Component description coming soon.
+ *
+ * @name Rating
+ */
+declare function Rating({ children }: RatingProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace Rating {
+    var bspkName: string;
+}
+export { Rating };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/Rating.js

@@ -0,0 +1,18 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+
+/**
+ * Component description coming soon.
+ *
+ * @name Rating
+ */
+function Rating({ children }) {
+    return (jsx("div", { css: style, "data-rating": true, children: children }));
+}
+Rating.bspkName = 'Rating';
+const style = css `
+    display: flex;
+`;
+
+export { Rating, style };
+//# sourceMappingURL=Rating.js.map

package/Rating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.js","sources":["src/Rating.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAOA;;;;AAIG;AACH,SAAS,MAAM,CAAC,EAAE,QAAQ,EAAe,EAAA;IACrC,QACIA,aAAK,GAAG,EAAE,KAAK,EACV,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAIpB,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/SearchBar.d.ts

@@ -0,0 +1,26 @@
+import { MenuItem, MenuProps } from './Menu';
+import { TextInputProps } from './TextInput';
+export type SearchBarProps = Pick<MenuProps, 'itemCount' | 'items' | 'noResultsMessage'> & Pick<TextInputProps, 'aria-label' | 'id' | 'inputRef' | 'name' | 'placeholder' | 'size'> & {
+    /** The current value of the search bar. */
+    searchValue?: string;
+    /**
+     * Handler for state updates.
+     *
+     * @type (value: String) => void
+     * @required
+     */
+    setSearchValue: (value: string) => void;
+    onSelect: (item?: MenuItem) => void;
+};
+/**
+ * Component description coming soon.
+ *
+ * @name SearchBar
+ */
+declare function SearchBar({ itemCount, items, noResultsMessage, placeholder, 'aria-label': ariaLabel, id: idProp, inputRef, name, size, onSelect, searchValue, setSearchValue, }: SearchBarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace SearchBar {
+    var bspkName: string;
+}
+export { SearchBar };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/SearchBar.js

@@ -0,0 +1,49 @@
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { SvgSearch } from '@bspk/icons/Search';
+import { css } from '@emotion/react';
+import { useRef } from 'react';
+import { Menu } from './Menu.js';
+import { Portal } from './Portal.js';
+import { TextInput } from './TextInput.js';
+import { useFloatingMenu } from './hooks/useFloatingMenu.js';
+import { useId } from './hooks/useId.js';
+
+/**
+ * Component description coming soon.
+ *
+ * @name SearchBar
+ */
+function SearchBar({ itemCount, items, noResultsMessage, placeholder = 'Search', 'aria-label': ariaLabel, id: idProp, inputRef, name, size = 'medium', onSelect, searchValue, setSearchValue, }) {
+    const id = useId(idProp);
+    const { triggerProps: { ref: triggerRef, onClick, onKeyDownCapture, ...triggerProps }, menuProps, closeMenu, } = useFloatingMenu({
+        placement: 'bottom-start',
+    });
+    const inputRefLocal = useRef(null);
+    return (jsxs(Fragment, { children: [jsx(TextInput, { "aria-label": ariaLabel, autoComplete: "off", containerRef: triggerRef, css: style, id: id, inputRef: (node) => {
+                    inputRef?.(node || null);
+                    inputRefLocal.current = node;
+                }, leading: jsx(SvgSearch, {}), name: name, onChange: (str) => setSearchValue(str), placeholder: placeholder, size: size, value: searchValue, ...triggerProps, onClick: (event) => {
+                    if (items?.length)
+                        onClick(event);
+                }, onKeyDownCapture: (event) => {
+                    const handled = onKeyDownCapture(event);
+                    if (handled)
+                        return;
+                    inputRefLocal.current?.focus();
+                } }), jsx(Portal, { children: jsx(Menu, { itemCount: itemCount, items: items, noResultsMessage: noResultsMessage, onChange: (selectedValues, event) => {
+                        event?.preventDefault();
+                        const item = items?.find((i) => i.value === selectedValues[0]);
+                        onSelect?.(item);
+                        setSearchValue(item?.label || '');
+                        closeMenu();
+                    }, ...menuProps }) })] }));
+}
+SearchBar.bspkName = 'SearchBar';
+const style = css `
+    display: flex;
+    width: 100%;
+    min-width: 300px;
+`;
+
+export { SearchBar, style };
+//# sourceMappingURL=SearchBar.js.map

package/SearchBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.js","sources":["src/SearchBar.tsx"],"sourcesContent":[null],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;AA+BA;;;;AAIG;AACH,SAAS,SAAS,CAAC,EACf,SAAS,EACT,KAAK,EACL,gBAAgB,EAChB,WAAW,GAAG,QAAQ,EACtB,YAAY,EAAE,SAAS,EACvB,EAAE,EAAE,MAAM,EACV,QAAQ,EACR,IAAI,EACJ,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,WAAW,EACX,cAAc,GACD,EAAA;AACb,IAAA,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,EACF,YAAY,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,gBAAgB,EAAE,GAAG,YAAY,EAAE,EAC7E,SAAS,EACT,SAAS,GACZ,GAAG,eAAe,CAAC;AAChB,QAAA,SAAS,EAAE,cAAc;AAC5B,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,aAAa,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;AAEvD,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACIC,GAAC,CAAA,SAAS,EACM,EAAA,YAAA,EAAA,SAAS,EACrB,YAAY,EAAC,KAAK,EAClB,YAAY,EAAE,UAAU,EACxB,GAAG,EAAE,KAAK,EACV,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,CAAC,IAAI,KAAI;AACf,oBAAA,QAAQ,GAAG,IAAI,IAAI,IAAI,CAAC,CAAC;AACzB,oBAAA,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;AACjC,iBAAC,EACD,OAAO,EAAEA,IAAC,SAAS,EAAA,EAAA,CAAG,EACtB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,GAAG,KAAK,cAAc,CAAC,GAAG,CAAC,EACtC,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,WAAW,EAAA,GACd,YAAY,EAChB,OAAO,EAAE,CAAC,KAAK,KAAI;oBACf,IAAI,KAAK,EAAE,MAAM;wBAAE,OAAO,CAAC,KAAK,CAAC,CAAC;AACtC,iBAAC,EACD,gBAAgB,EAAE,CAAC,KAAK,KAAI;AACxB,oBAAA,MAAM,OAAO,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAExC,oBAAA,IAAI,OAAO;wBAAE,OAAO;AAEpB,oBAAA,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;iBAClC,EAAA,CACH,EACFA,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EACHA,GAAC,CAAA,IAAI,EACD,EAAA,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,CAAC,cAAc,EAAE,KAAK,KAAI;wBAChC,KAAK,EAAE,cAAc,EAAE,CAAC;wBACxB,MAAM,IAAI,GAAG,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/D,wBAAA,QAAQ,GAAG,IAAI,CAAC,CAAC;AACjB,wBAAA,cAAc,CAAC,IAAI,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;AAClC,wBAAA,SAAS,EAAE,CAAC;AAChB,qBAAC,KACG,SAAS,EAAA,CACf,EACG,CAAA,CAAA,EAAA,CACV,EACL;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAI1B,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;"}

package/SegmentedControl.d.ts

@@ -0,0 +1,69 @@
+import { ElementProps } from './';
+export type SegmentedToggleOption = {
+    /**
+     * The label of the option. This is the text that will be displayed on the option.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /** The value of the option. If not provided, the label will be used as the value. */
+    value?: string;
+    /** The the icon to display before the label. */
+    icon?: React.ReactNode;
+    iconActive?: React.ReactNode;
+};
+export type SegmentedControlProps = {
+    /**
+     * The options to display. Each option has a label and an optional leading icon.
+     *
+     * @type SegmentedToggleOption[]
+     * @required
+     */
+    options: SegmentedToggleOption[];
+    /** The id of the selected option. */
+    value?: SegmentedToggleOption['value'];
+    /**
+     * The function to call when the option is clicked.
+     *
+     * @required
+     */
+    onChange: (value: SegmentedToggleOption['value']) => void;
+    /**
+     * The size of the options.
+     *
+     * @default medium
+     */
+    size?: 'medium' | 'small';
+    /**
+     * The width of the options. If set to 'fill', the options will fill the width of the container. If set to 'hug',
+     * the options will be as wide as their content.
+     *
+     * @default hug
+     */
+    width?: 'fill' | 'hug';
+    /**
+     * Determines if the labels of the options should be displayed. If icons are not provided for every option this is
+     * ignored and labels are shown.
+     *
+     * @default true
+     */
+    showLabels?: boolean;
+};
+/**
+ * Navigation tool that organizes content across different screens and views.
+ *
+ * @name SegmentedControl
+ */
+declare function SegmentedControl({ onChange, value, size, options, width, showLabels: showLabelsProp, ...containerProps }: ElementProps<SegmentedControlProps, 'div'>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace SegmentedControl {
+    var bspkName: string;
+}
+export { SegmentedControl };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/SegmentedControl.js

@@ -0,0 +1,136 @@
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { Fragment } from 'react';
+import { Tooltip } from './Tooltip.js';
+import { useNavOptions } from './hooks/useNavOptions.js';
+
+/**
+ * Navigation tool that organizes content across different screens and views.
+ *
+ * @name SegmentedControl
+ */
+function SegmentedControl({ onChange, value, size = 'medium', options, width = 'hug', showLabels: showLabelsProp = true, ...containerProps }) {
+    const items = useNavOptions(options);
+    const hideLabels = showLabelsProp === false && items.every((item) => item.icon && item.label);
+    return (jsx("div", { ...containerProps, css: style, "data-option-group": true, "data-size": size, "data-width": width, children: items.map((item, index) => {
+            const isActive = item.value === value;
+            return (jsx(Fragment, { children: jsx(Tooltip, { disabled: !hideLabels, label: item.label, placement: "top", children: jsx("button", { "aria-label": item.label, "data-first": index === 0 || undefined, "data-last": index === items.length - 1 || undefined, "data-selected": isActive || undefined, disabled: item.disabled || undefined, onClick: () => onChange(item.value), children: jsx("span", { "data-outer": true, children: jsxs("span", { "data-inner": true, children: [(isActive && item.iconActive) || item.icon, !hideLabels && item.label] }) }) }) }) }, item.value));
+        }) }));
+}
+SegmentedControl.bspkName = 'SegmentedControl';
+const style = css `
+    display: flex;
+    flex-direction: row;
+    max-width: 100%;
+    --outer-height: var(--spacing-sizing-10);
+    --inner-height: var(--spacing-sizing-08);
+    --svg-width: 20px;
+
+    &[data-width='fill'] {
+        align-items: stretch;
+        width: 100%;
+        --btn-flex-grow: 1;
+        margin: 0 var(--spacing-sizing-04);
+    }
+
+    &[data-width='hug'] {
+        width: fit-content;
+        --btn-flex-grow: 0;
+    }
+
+    &[data-size='small'] {
+        --outer-height: var(--spacing-sizing-08);
+        --inner-height: var(--spacing-sizing-06);
+        --svg-width: 16px;
+    }
+
+    svg {
+        width: var(--svg-width) !important;
+    }
+
+    button {
+        border: 0;
+        cursor: pointer;
+        color: var(--foreground-neutral-on-surface);
+        flex-grow: var(--btn-flex-grow);
+        font: var(--labels-small);
+        margin: 0;
+        height: var(--spacing-sizing-12);
+        background: transparent;
+        position: relative;
+
+        [data-focus-ring] {
+            display: none;
+        }
+
+        [data-outer] {
+            height: var(--outer-height);
+            background: var(--surface-neutral-t3-low);
+            margin: var(--spacing-sizing-01) 0;
+            padding: var(--spacing-sizing-01) 0;
+            display: block;
+        }
+
+        [data-inner] {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            height: var(--inner-height);
+            border-bottom: 1px solid transparent;
+            justify-content: center;
+            gap: var(--spacing-sizing-01);
+            border-radius: var(--radius-small);
+            padding: var(--spacing-sizing-02) var(--spacing-sizing-03);
+        }
+
+        &:first-of-type {
+            [data-outer] {
+                border-top-left-radius: var(--radius-medium);
+                border-bottom-left-radius: var(--radius-medium);
+                padding-left: var(--spacing-sizing-01);
+            }
+        }
+
+        &:last-of-type {
+            [data-outer] {
+                border-top-right-radius: var(--radius-medium);
+                border-bottom-right-radius: var(--radius-medium);
+                padding-right: var(--spacing-sizing-01);
+            }
+        }
+
+        &:not(:disabled) {
+            &:hover {
+                [data-inner] {
+                    background: var(--interactions-neutral-hover-opacity);
+                }
+            }
+
+            &:active {
+                [data-inner] {
+                    background: var(--interactions-neutral-press-opacity);
+                }
+            }
+
+            &[data-selected] {
+                [data-inner] {
+                    background: var(--surface-neutral-t1-base);
+                }
+            }
+
+            &:focus-visible {
+                z-index: 2;
+                outline: solid 2px var(--stroke-neutral-focus);
+            }
+        }
+
+        &:disabled {
+            pointer-events: none;
+            color: var(--foreground-neutral-disabled-on-surface);
+            cursor: not-allowed;
+        }
+    }
+`;
+
+export { SegmentedControl, style };
+//# sourceMappingURL=SegmentedControl.js.map

package/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sources":["src/SegmentedControl.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAkEA;;;;AAIG;AACH,SAAS,gBAAgB,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,KAAK,GAAG,KAAK,EACb,UAAU,EAAE,cAAc,GAAG,IAAI,EACjC,GAAG,cAAc,EACwB,EAAA;AACzC,IAAA,MAAM,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAErC,MAAM,UAAU,GAAG,cAAc,KAAK,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAE9F,QACIA,gBAAS,cAAc,EAAE,GAAG,EAAE,KAAK,0CAA+B,IAAI,EAAA,YAAA,EAAc,KAAK,EACpF,QAAA,EAAA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AACvB,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;YACtC,QACIA,IAAC,QAAQ,EAAA,EAAA,QAAA,EACLA,IAAC,OAAO,EAAA,EAAC,QAAQ,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAC,KAAK,EAC9D,QAAA,EAAAA,GAAA,CAAA,QAAA,EAAA,EAAA,YAAA,EACgB,IAAI,CAAC,KAAK,gBACV,KAAK,KAAK,CAAC,IAAI,SAAS,eACzB,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,EACnC,eAAA,EAAA,QAAQ,IAAI,SAAS,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,MAAM,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAEnCA,GACI,CAAA,MAAA,EAAA,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAAC,IAAA,CAAA,MAAA,EAAA,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,CACK,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,IAAI,EAC1C,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CACvB,EAAA,CAAA,EAAA,CACJ,GACF,EACH,CAAA,EAAA,EAjBC,IAAI,CAAC,KAAK,CAkBd,EACb;SACL,CAAC,EACA,CAAA,EACR;AACN,CAAC;AAED,gBAAgB,CAAC,QAAQ,GAAG,kBAAkB,CAAC;AAIxC,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}