@bspk/ui 1.1.31 → 1.1.33

package/dist/components/SearchBar/SearchBar.d.ts

@@ -0,0 +1,94 @@
+import { ListboxProps, ListboxItemProps } from '../Listbox';
+import { TextInputProps } from '../TextInput';
+import './search-bar.scss';
+export type SearchBarProps<T extends ListboxItemProps = ListboxItemProps> = Pick<ListboxProps<T>, 'itemDisplayCount'> & Pick<TextInputProps, 'aria-label' | 'disabled' | 'id' | 'inputRef' | 'name' | 'size'> & {
+    /** The current value of the search bar. */
+    value?: string;
+    /**
+     * The placeholder of the field.
+     *
+     * @default Search
+     *
+     * @required
+     */
+    placeholder: string;
+    /**
+     * Handler for state updates.
+     *
+     * @type (value: String) => void
+     * @required
+     */
+    onChange: (value: string) => void;
+    onSelect: (item?: ListboxItemProps) => void;
+    /**
+     * Content to display in the menu.
+     *
+     * @example
+     *     [
+     *         { value: '1', label: 'Apple Pie' },
+     *         { value: '2', label: 'Banana Split' },
+     *         { value: '3', label: 'Cherry Tart' },
+     *         { value: '4', label: 'Dragonfruit Sorbet' },
+     *         { value: '5', label: 'Elderberry Jam' },
+     *         { value: '6', label: 'Fig Newton' },
+     *         { value: '7', label: 'Grape Soda' },
+     *         { value: '8', label: 'Honeydew Smoothie' },
+     *         { value: '9', label: 'Ice Cream Sandwich' },
+     *         { value: '10', label: 'Jackfruit Pudding' },
+     *     ];
+     *
+     * @type Array<MenuItem>
+     */
+    items?: T[];
+    /**
+     * Message to display when no results are found
+     *
+     * @type multiline
+     */
+    noResultsMessage?: string;
+};
+/**
+ * Component description coming soon.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { SearchBar } from '@bspk/ui/SearchBar';
+ *
+ *     export function Example() {
+ *         const [searchText, setSearchText] = useState<string>('');
+ *
+ *         const handleItemSelect = (item) => console.log('Selected item:', item);
+ *
+ *         return (
+ *             <SearchBar
+ *                 aria-label="Example aria-label"
+ *                 items={[
+ *                     { value: '1', label: 'Apple Pie' },
+ *                     { value: '2', label: 'Banana Split' },
+ *                     { value: '3', label: 'Cherry Tart' },
+ *                     { value: '4', label: 'Dragonfruit Sorbet' },
+ *                     { value: '5', label: 'Elderberry Jam' },
+ *                     { value: '6', label: 'Fig Newton' },
+ *                     { value: '7', label: 'Grape Soda' },
+ *                     { value: '8', label: 'Honeydew Smoothie' },
+ *                     { value: '9', label: 'Ice Cream Sandwich' },
+ *                     { value: '10', label: 'Jackfruit Pudding' },
+ *                 ]}
+ *                 name="Example name"
+ *                 placeholder="Search"
+ *                 value={searchText}
+ *                 onChange={setSearchText}
+ *                 onSelect={handleItemSelect}
+ *             />
+ *         );
+ *     }
+ *
+ * @name SearchBar
+ * @phase DesignReview
+ */
+declare function SearchBar({ itemDisplayCount: itemCount, items, noResultsMessage, placeholder, 'aria-label': ariaLabel, id: idProp, inputRef, name, size, onSelect, value, onChange, disabled, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SearchBar {
+    var bspkName: string;
+}
+export { SearchBar };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/SearchBar/SearchBar.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SvgSearch } from '@bspk/icons/Search';
+import { useRef } from 'react';
+import { Listbox } from '../Listbox';
+import { TextInput } from '../TextInput';
+import { Txt } from '../Txt';
+import { useCombobox } from '../../hooks/useCombobox';
+import { useId } from '../../hooks/useId';
+import './search-bar.css.js';
+/**
+ * Component description coming soon.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { SearchBar } from '@bspk/ui/SearchBar';
+ *
+ *     export function Example() {
+ *         const [searchText, setSearchText] = useState<string>('');
+ *
+ *         const handleItemSelect = (item) => console.log('Selected item:', item);
+ *
+ *         return (
+ *             <SearchBar
+ *                 aria-label="Example aria-label"
+ *                 items={[
+ *                     { value: '1', label: 'Apple Pie' },
+ *                     { value: '2', label: 'Banana Split' },
+ *                     { value: '3', label: 'Cherry Tart' },
+ *                     { value: '4', label: 'Dragonfruit Sorbet' },
+ *                     { value: '5', label: 'Elderberry Jam' },
+ *                     { value: '6', label: 'Fig Newton' },
+ *                     { value: '7', label: 'Grape Soda' },
+ *                     { value: '8', label: 'Honeydew Smoothie' },
+ *                     { value: '9', label: 'Ice Cream Sandwich' },
+ *                     { value: '10', label: 'Jackfruit Pudding' },
+ *                 ]}
+ *                 name="Example name"
+ *                 placeholder="Search"
+ *                 value={searchText}
+ *                 onChange={setSearchText}
+ *                 onSelect={handleItemSelect}
+ *             />
+ *         );
+ *     }
+ *
+ * @name SearchBar
+ * @phase DesignReview
+ */
+function SearchBar({ itemDisplayCount: itemCount, items, noResultsMessage, placeholder = 'Search', 'aria-label': ariaLabel, id: idProp, inputRef, name, size = 'medium', onSelect, value, onChange, disabled = false, }) {
+    const id = useId(idProp);
+    const { isOpen, toggleProps: { onClick, onKeyDownCapture, ...triggerProps }, menuProps, closeMenu, elements, } = useCombobox({
+        placement: 'bottom-start',
+    });
+    const inputRefLocal = useRef(null);
+    const containerRefLocal = useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { "data-bspk": "search-bar", children: _jsx(TextInput, { "aria-label": ariaLabel, autoComplete: "off", containerRef: (node) => {
+                        if (!node)
+                            return;
+                        containerRefLocal.current = node;
+                        elements.setReference(node);
+                    }, disabled: disabled, id: id, inputRef: (node) => {
+                        inputRef?.(node || null);
+                        inputRefLocal.current = node;
+                    }, leading: _jsx(SvgSearch, {}), name: name, onChange: (str) => onChange(str), onClick: () => {
+                        if (items?.length)
+                            onClick();
+                    }, ...triggerProps, onKeyDownCapture: (event) => {
+                        const handled = onKeyDownCapture(event);
+                        if (handled) {
+                            inputRefLocal.current?.blur();
+                            containerRefLocal.current?.focus();
+                            return;
+                        }
+                        // inputRefLocal.current?.focus();
+                    }, placeholder: placeholder, size: size, value: value }) }), isOpen && (_jsx(Listbox, { innerRef: elements.setFloating, itemDisplayCount: itemCount, items: items, onChange: (selectedValues, event) => {
+                    event?.preventDefault();
+                    const item = items?.find((i) => i.value === selectedValues[0]);
+                    onSelect?.(item);
+                    onChange(item?.label || '');
+                    closeMenu();
+                }, ...menuProps, children: !!value?.length && !items?.length && (_jsxs("div", { "data-bspk": "no-items-found", children: [_jsx(Txt, { as: "div", variant: "heading-h5", children: "No results found" }), noResultsMessage && (_jsx(Txt, { as: "div", variant: "body-base", children: noResultsMessage }))] })) }))] }));
+}
+SearchBar.bspkName = 'SearchBar';
+export { SearchBar };
+//# sourceMappingURL=SearchBar.js.map

package/dist/components/SearchBar/SearchBar.js.map

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

package/dist/components/SearchBar/SearchBarExample.d.ts

@@ -0,0 +1,2 @@
+import { ComponentExample } from '../../utils/demo';
+export declare const SearchBarExample: ComponentExample;

package/dist/components/SearchBar/SearchBarExample.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SearchBarExample = {
+    render: ({ props: state, Component }) => {
+        const props = { ...state };
+        const searchValue = props.value?.trim()?.toLowerCase() || '';
+        if (Array.isArray(props.items) && searchValue.length)
+            props.items = props.items?.filter((item) => item.label.toLowerCase().includes(searchValue));
+        return _jsx(Component, { ...props, items: props.items || [] });
+    },
+};
+//# sourceMappingURL=SearchBarExample.js.map

package/dist/components/SearchBar/SearchBarExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBarExample.js","sourceRoot":"","sources":["../../../src/components/SearchBar/SearchBarExample.tsx"],"names":[],"mappings":";AAKA,MAAM,CAAC,MAAM,gBAAgB,GAAqB;IAC9C,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QACpC,MAAM,KAAK,GAAG,EAAE,GAAG,KAAK,EAAoB,CAAC;QAE7C,MAAM,WAAW,GAAI,KAAK,CAAC,KAA4B,EAAE,IAAI,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QAErF,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,WAAW,CAAC,MAAM;YAChD,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,IAAuB,EAAE,EAAE,CAC1D,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CACjD,CAAC;QAEN,OAAO,KAAC,SAAS,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,GAAI,CAAC;IAC9D,CAAC;CACJ,CAAC"}

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

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

package/dist/components/SearchBar/index.js

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

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

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

package/dist/components/SearchBar/search-bar.css

@@ -0,0 +1,16 @@
+[data-bspk=search-bar] {
+  display: flex;
+  width: 100%;
+  min-width: 300px;
+}
+
+[data-bspk=no-items-found] {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-sizing-08) var(--spacing-sizing-04);
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sizing-03);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/SearchBar/search-bar.css.js

@@ -0,0 +1,22 @@
+/** * 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=search-bar] {
+  display: flex;
+  width: 100%;
+  min-width: 300px;
+}
+
+[data-bspk=no-items-found] {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-sizing-08) var(--spacing-sizing-04);
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sizing-03);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,113 @@
+import { ElementProps } from '../../index.js';
+import './segmented-control.scss';
+export type SegmentedControlOption = {
+    /**
+     * 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.
+     *
+     * @type BspkIcon
+     */
+    icon?: React.ReactNode;
+    /**
+     * The icon to display before the label when the option is active.
+     *
+     * @type BspkIcon
+     */
+    iconActive?: React.ReactNode;
+};
+export type SegmentedControlProps = {
+    /**
+     * The options to display. Each option has a label and an optional leading icon.
+     *
+     * @example
+     *     [
+     *         { value: '1', label: 'Option 1' },
+     *         { value: '2', label: 'Option 2' },
+     *         { value: '3', label: 'Option 3' },
+     *     ];
+     *
+     * @type Array<SegmentedControlOption>
+     * @required
+     */
+    options: SegmentedControlOption[];
+    /**
+     * The id of the selected option.
+     *
+     * @example
+     *     1;
+     *
+     * @required
+     */
+    value: SegmentedControlOption['value'];
+    /**
+     * The function to call when the option is clicked.
+     *
+     * @required
+     */
+    onChange: (value: SegmentedControlOption['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.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { SegmentedControl } from '@bspk/ui/SegmentedControl';
+ *
+ *     export function Example() {
+ *         const [selectedOption, setSelectedOption] = useState<string>();
+ *
+ *         return (
+ *             <SegmentedControl
+ *                 onChange={setSelectedOption}
+ *                 options={[
+ *                     { value: '1', label: 'Option 1' },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                 ]}
+ *                 value={selectedOption}
+ *             />
+ *         );
+ *     }
+ *
+ * @name SegmentedControl
+ * @phase DesignReview
+ */
+declare function SegmentedControl({ onChange, value, size, options: optionsProp, width, showLabels: showLabelsProp, ...containerProps }: ElementProps<SegmentedControlProps, 'div'>): import("react/jsx-runtime").JSX.Element;
+declare namespace SegmentedControl {
+    var bspkName: string;
+}
+export { SegmentedControl };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,43 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { Tooltip } from '../Tooltip';
+import { useOptionIconsInvalid } from '../../hooks/useOptionIconsInvalid';
+import './segmented-control.css.js';
+/**
+ * Navigation tool that organizes content across different screens and views.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { SegmentedControl } from '@bspk/ui/SegmentedControl';
+ *
+ *     export function Example() {
+ *         const [selectedOption, setSelectedOption] = useState<string>();
+ *
+ *         return (
+ *             <SegmentedControl
+ *                 onChange={setSelectedOption}
+ *                 options={[
+ *                     { value: '1', label: 'Option 1' },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                 ]}
+ *                 value={selectedOption}
+ *             />
+ *         );
+ *     }
+ *
+ * @name SegmentedControl
+ * @phase DesignReview
+ */
+function SegmentedControl({ onChange, value, size = 'medium', options: optionsProp, width = 'hug', showLabels: showLabelsProp = true, ...containerProps }) {
+    const options = Array.isArray(optionsProp) ? optionsProp : [];
+    useOptionIconsInvalid(options);
+    const hideLabels = showLabelsProp === false && options.every((item) => item.icon && item.label);
+    return (_jsx("div", { ...containerProps, "data-bspk": "segmented-control", "data-size": size, "data-width": width, children: options.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 === options.length - 1 || undefined, "data-selected": isActive || undefined, disabled: item.disabled || undefined, onClick: () => onChange(item.value || item.label), 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';
+export { SegmentedControl };
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/components/SegmentedControl/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,0BAA0B,CAAC;AAmFlC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,SAAS,gBAAgB,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EAAE,WAAW,EACpB,KAAK,GAAG,KAAK,EACb,UAAU,EAAE,cAAc,GAAG,IAAI,EACjC,GAAG,cAAc,EACwB;IACzC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9D,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAE/B,MAAM,UAAU,GAAG,cAAc,KAAK,KAAK,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAEhG,OAAO,CACH,iBAAS,cAAc,eAAY,mBAAmB,eAAY,IAAI,gBAAc,KAAK,YACpF,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;YACtC,OAAO,CACH,KAAC,QAAQ,cACL,KAAC,OAAO,IAAC,QAAQ,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAC,KAAK,YAC9D,+BACgB,IAAI,CAAC,KAAK,gBACV,KAAK,KAAK,CAAC,IAAI,SAAS,eACzB,KAAK,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,mBACrC,QAAQ,IAAI,SAAS,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,YAEjD,6CACI,+CACK,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,IAAI,EAC1C,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,IACvB,GACJ,GACF,GACH,IAjBC,IAAI,CAAC,KAAK,CAkBd,CACd,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,gBAAgB,CAAC,QAAQ,GAAG,kBAAkB,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/SegmentedControl/SegmentedControlExample.d.ts

@@ -0,0 +1,3 @@
+import { ComponentExample } from '../../utils/demo';
+import { SegmentedControlProps } from '.';
+export declare const SegmentedControlExample: ComponentExample<SegmentedControlProps>;

package/dist/components/SegmentedControl/SegmentedControlExample.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgCircle } from '@bspk/icons/Circle';
+import { SvgDiamond } from '@bspk/icons/Diamond';
+import { SvgDiamondFill } from '@bspk/icons/DiamondFill';
+import { SvgSquare } from '@bspk/icons/Square';
+import { SvgSquareFill } from '@bspk/icons/SquareFill';
+export const SegmentedControlExample = {
+    containerStyle: { width: '100%' },
+    presets: [
+        {
+            label: 'With icons',
+            propState: {
+                options: [
+                    {
+                        value: '1',
+                        label: 'Option 1',
+                        icon: _jsx(SvgDiamond, {}),
+                        iconActive: _jsx(SvgDiamondFill, {}),
+                    },
+                    {
+                        value: '2',
+                        label: 'Disabled 2',
+                        disabled: true,
+                        icon: _jsx(SvgCircle, {}),
+                    },
+                    {
+                        value: '3',
+                        label: 'Option 3',
+                        icon: _jsx(SvgSquare, {}),
+                        iconActive: _jsx(SvgSquareFill, {}),
+                    },
+                ],
+            },
+        },
+    ],
+};
+//# sourceMappingURL=SegmentedControlExample.js.map

package/dist/components/SegmentedControl/SegmentedControlExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlExample.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControlExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAMvD,MAAM,CAAC,MAAM,uBAAuB,GAA4C;IAC5E,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,OAAO,EAAE;QACL;YACI,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,OAAO,EAAE;oBACL;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,KAAC,UAAU,KAAG;wBACpB,UAAU,EAAE,KAAC,cAAc,KAAG;qBACjC;oBACD;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,YAAY;wBACnB,QAAQ,EAAE,IAAI;wBACd,IAAI,EAAE,KAAC,SAAS,KAAG;qBACtB;oBACD;wBACI,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,UAAU;wBACjB,IAAI,EAAE,KAAC,SAAS,KAAG;wBACnB,UAAU,EAAE,KAAC,aAAa,KAAG;qBAChC;iBACJ;aACJ;SACJ;KACJ;CACJ,CAAC"}

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

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

package/dist/components/SegmentedControl/index.js

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

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

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

package/dist/components/SegmentedControl/segmented-control.css

@@ -0,0 +1,90 @@
+[data-bspk=segmented-control] {
+  display: flex;
+  flex-direction: row;
+  max-width: 100%;
+  overflow: scroll;
+  --outer-height: var(--spacing-sizing-10);
+  --inner-height: var(--spacing-sizing-08);
+  --svg-width: 20px;
+}
+[data-bspk=segmented-control][data-width=fill] {
+  align-items: stretch;
+  width: 100%;
+  --btn-flex-grow: 1;
+  margin: 0 var(--spacing-sizing-04);
+}
+[data-bspk=segmented-control][data-width=hug] {
+  width: fit-content;
+  --btn-flex-grow: 0;
+}
+[data-bspk=segmented-control][data-size=small] {
+  --outer-height: var(--spacing-sizing-08);
+  --inner-height: var(--spacing-sizing-06);
+  --svg-width: 16px;
+}
+[data-bspk=segmented-control] svg {
+  width: var(--svg-width) !important;
+}
+[data-bspk=segmented-control] 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;
+  white-space: nowrap;
+}
+[data-bspk=segmented-control] button [data-focus-ring] {
+  display: none;
+}
+[data-bspk=segmented-control] button [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-bspk=segmented-control] button [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);
+}
+[data-bspk=segmented-control] button: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);
+}
+[data-bspk=segmented-control] button: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);
+}
+[data-bspk=segmented-control] button:not(:disabled):hover [data-inner] {
+  background: var(--interactions-neutral-hover-opacity);
+}
+[data-bspk=segmented-control] button:not(:disabled):active [data-inner] {
+  background: var(--interactions-neutral-press-opacity);
+}
+[data-bspk=segmented-control] button:not(:disabled)[data-selected] [data-inner] {
+  background: var(--surface-neutral-t1-base);
+}
+[data-bspk=segmented-control] button:not(:disabled):focus-visible {
+  z-index: 2;
+  outline: solid 2px var(--stroke-neutral-focus);
+}
+[data-bspk=segmented-control] button:disabled {
+  pointer-events: none;
+  color: var(--foreground-neutral-disabled-on-surface);
+  cursor: not-allowed;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/SegmentedControl/segmented-control.css.js

@@ -0,0 +1,96 @@
+/** * 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=segmented-control] {
+  display: flex;
+  flex-direction: row;
+  max-width: 100%;
+  overflow: scroll;
+  --outer-height: var(--spacing-sizing-10);
+  --inner-height: var(--spacing-sizing-08);
+  --svg-width: 20px;
+}
+[data-bspk=segmented-control][data-width=fill] {
+  align-items: stretch;
+  width: 100%;
+  --btn-flex-grow: 1;
+  margin: 0 var(--spacing-sizing-04);
+}
+[data-bspk=segmented-control][data-width=hug] {
+  width: fit-content;
+  --btn-flex-grow: 0;
+}
+[data-bspk=segmented-control][data-size=small] {
+  --outer-height: var(--spacing-sizing-08);
+  --inner-height: var(--spacing-sizing-06);
+  --svg-width: 16px;
+}
+[data-bspk=segmented-control] svg {
+  width: var(--svg-width) !important;
+}
+[data-bspk=segmented-control] 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;
+  white-space: nowrap;
+}
+[data-bspk=segmented-control] button [data-focus-ring] {
+  display: none;
+}
+[data-bspk=segmented-control] button [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-bspk=segmented-control] button [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);
+}
+[data-bspk=segmented-control] button: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);
+}
+[data-bspk=segmented-control] button: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);
+}
+[data-bspk=segmented-control] button:not(:disabled):hover [data-inner] {
+  background: var(--interactions-neutral-hover-opacity);
+}
+[data-bspk=segmented-control] button:not(:disabled):active [data-inner] {
+  background: var(--interactions-neutral-press-opacity);
+}
+[data-bspk=segmented-control] button:not(:disabled)[data-selected] [data-inner] {
+  background: var(--surface-neutral-t1-base);
+}
+[data-bspk=segmented-control] button:not(:disabled):focus-visible {
+  z-index: 2;
+  outline: solid 2px var(--stroke-neutral-focus);
+}
+[data-bspk=segmented-control] button:disabled {
+  pointer-events: none;
+  color: var(--foreground-neutral-disabled-on-surface);
+  cursor: not-allowed;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+