@bspk/ui 1.1.34 → 1.3.0

package/dist/components/Rating/rating.css

@@ -0,0 +1,65 @@
+[data-bspk=rating] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: fit-content;
+}
+[data-bspk=rating][data-size=small] [data-star] {
+  width: var(--spacing-sizing-06);
+  height: var(--spacing-sizing-06);
+}
+[data-bspk=rating][data-size=small] svg {
+  width: var(--spacing-sizing-04);
+  height: var(--spacing-sizing-04);
+}
+[data-bspk=rating][data-size=medium] [data-star] {
+  width: var(--spacing-sizing-08);
+  height: var(--spacing-sizing-08);
+}
+[data-bspk=rating][data-size=medium] svg {
+  width: var(--spacing-sizing-06);
+  height: var(--spacing-sizing-06);
+}
+[data-bspk=rating][data-size=large] [data-star] {
+  width: var(--spacing-sizing-10);
+  height: var(--spacing-sizing-10);
+}
+[data-bspk=rating][data-size=large] svg {
+  width: var(--spacing-sizing-08);
+  height: var(--spacing-sizing-08);
+}
+[data-bspk=rating] [data-star] {
+  outline: none;
+  cursor: default;
+  background: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  color: var(--surface-neutral-t3-low);
+}
+[data-bspk=rating] [data-star]:is(button) {
+  cursor: pointer;
+}
+[data-bspk=rating] [data-star]:is(button):hover {
+  transform: scale(1.2);
+}
+[data-bspk=rating] [data-star]:is(button):focus-visible {
+  outline: 1px solid var(--stroke-neutral-focus);
+  border-color: var(--stroke-neutral-focus);
+  margin-bottom: 1px;
+}
+[data-bspk=rating] [data-star][data-fill=full] {
+  color: var(--status-warning);
+}
+[data-bspk=rating] [data-star] [data-fill-half] {
+  position: absolute;
+  inset: 0 50% 0 0;
+  overflow: hidden;
+}
+[data-bspk=rating] [data-star] [data-fill-half] [data-star] {
+  color: var(--status-warning);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Rating/rating.css.js

@@ -0,0 +1,70 @@
+/** * 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=rating] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: fit-content;
+}
+[data-bspk=rating][data-size=small] [data-star] {
+  width: var(--spacing-sizing-06);
+  height: var(--spacing-sizing-06);
+}
+[data-bspk=rating][data-size=small] svg {
+  width: var(--spacing-sizing-04);
+  height: var(--spacing-sizing-04);
+}
+[data-bspk=rating][data-size=medium] [data-star] {
+  width: var(--spacing-sizing-08);
+  height: var(--spacing-sizing-08);
+}
+[data-bspk=rating][data-size=medium] svg {
+  width: var(--spacing-sizing-06);
+  height: var(--spacing-sizing-06);
+}
+[data-bspk=rating][data-size=large] [data-star] {
+  width: var(--spacing-sizing-10);
+  height: var(--spacing-sizing-10);
+}
+[data-bspk=rating][data-size=large] svg {
+  width: var(--spacing-sizing-08);
+  height: var(--spacing-sizing-08);
+}
+[data-bspk=rating] [data-star] {
+  outline: none;
+  cursor: default;
+  background: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  color: var(--surface-neutral-t3-low);
+}
+[data-bspk=rating] [data-star]:is(button) {
+  cursor: pointer;
+}
+[data-bspk=rating] [data-star]:is(button):hover {
+  transform: scale(1.2);
+}
+[data-bspk=rating] [data-star]:is(button):focus-visible {
+  outline: 1px solid var(--stroke-neutral-focus);
+  border-color: var(--stroke-neutral-focus);
+  margin-bottom: 1px;
+}
+[data-bspk=rating] [data-star][data-fill=full] {
+  color: var(--status-warning);
+}
+[data-bspk=rating] [data-star] [data-fill-half] {
+  position: absolute;
+  inset: 0 50% 0 0;
+  overflow: hidden;
+}
+[data-bspk=rating] [data-star] [data-fill-half] [data-star] {
+  color: var(--status-warning);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

package/dist/components/Scrim/Scrim.d.ts

@@ -1,20 +1,12 @@
-import { CommonProps } from '../../index.js';
 import './scrim.scss';
-export type ScrimProps = CommonProps<'data-bspk-owner'> & {
+import { CommonProps } from '-/types/common';
+export type ScrimProps = CommonProps<'owner'> & {
     /**
      * Whether the Scrim should be visible.
      *
      * @default true
      */
     visible?: boolean;
-    /**
-     * The variant of the Scrim.
-     *
-     * This determines how the Scrim is used in the application and effects its styling.
-     *
-     * @required
-     */
-    variant: 'dialog' | 'dropdown';
     /**
      * A function that is called when the Scrim is clicked.
      *
@@ -32,9 +24,5 @@ export type ScrimProps = CommonProps<'data-bspk-owner'> & {
  *
  * @phase Utility
  */
-declare function Scrim({ visible, variant, ...props }: ScrimProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Scrim {
-    var bspkName: string;
-}
-export { Scrim };
+export declare function Scrim({ visible, owner, ...props }: ScrimProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Scrim/Scrim.js

@@ -8,9 +8,7 @@ import './scrim.css.js';
  *
  * @phase Utility
  */
-function Scrim({ visible = true, variant, ...props }) {
-    return (_jsx("div", { ...props, "aria-hidden": "true", "data-bspk": "scrim", "data-hidden": !visible || undefined, "data-variant": variant }));
+export function Scrim({ visible = true, owner, ...props }) {
+    return (_jsx("div", { ...props, "aria-hidden": "true", "data-bspk": "scrim", "data-bspk-owner": owner || undefined, "data-hidden": !visible || undefined }));
 }
-Scrim.bspkName = 'Scrim';
-export { Scrim };
 //# sourceMappingURL=Scrim.js.map

package/dist/components/Scrim/Scrim.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scrim.js","sourceRoot":"","sources":["../../../src/components/Scrim/Scrim.tsx"],"names":[],"mappings":";AACA,OAAO,cAAc,CAAC;AA2BtB;;;;;;;GAOG;AACH,SAAS,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAc;IAC5D,OAAO,CACH,iBACQ,KAAK,iBACG,MAAM,eACR,OAAO,iBACJ,CAAC,OAAO,IAAI,SAAS,kBACpB,OAAO,GACvB,CACL,CAAC;AACN,CAAC;AAED,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;AAEzB,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Scrim.js","sourceRoot":"","sources":["../../../src/components/Scrim/Scrim.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AAoBtB;;;;;;;GAOG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,EAAc;IACjE,OAAO,CACH,iBACQ,KAAK,iBACG,MAAM,eACR,OAAO,qBACA,KAAK,IAAI,SAAS,iBACtB,CAAC,OAAO,IAAI,SAAS,GACpC,CACL,CAAC;AACN,CAAC"}

package/dist/components/Scrim/scrim.css

@@ -8,12 +8,19 @@
   display: flex;
   align-items: center;
   justify-content: center;
-}
-[data-bspk=scrim][data-variant=dialog] {
   background-color: var(--background-scrim);
+  animation-name: fade-in;
+  animation-duration: 1s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
 }
-[data-bspk=scrim][data-hidden] {
-  display: none;
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Scrim/scrim.css.js

@@ -11,15 +11,21 @@ style.appendChild(document.createTextNode(`[data-bspk=scrim] {
   display: flex;
   align-items: center;
   justify-content: center;
-}
-[data-bspk=scrim][data-variant=dialog] {
   background-color: var(--background-scrim);
+  animation-name: fade-in;
+  animation-duration: 1s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
 }
-[data-bspk=scrim][data-hidden] {
-  display: none;
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

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

@@ -1,7 +1,10 @@
-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'> & {
+import { ListItemMenuProps, MenuListItem } from '-/components/ListItemMenu';
+import { TextInputProps } from '-/components/TextInput';
+export type SearchOption = MenuListItem & {
+    value: string;
+};
+export type SearchBarProps = Pick<ListItemMenuProps, 'scrollLimit'> & Pick<TextInputProps, 'aria-label' | 'disabled' | 'id' | 'inputRef' | 'name' | 'size'> & {
     /** The current value of the search bar. */
     value?: string;
     /**
@@ -19,7 +22,7 @@ export type SearchBarProps<T extends ListboxItemProps = ListboxItemProps> = Pick
      * @required
      */
     onChange: (value: string) => void;
-    onSelect: (item?: ListboxItemProps) => void;
+    onSelect: (item?: MenuListItem) => void;
     /**
      * Content to display in the menu.
      *
@@ -37,9 +40,9 @@ export type SearchBarProps<T extends ListboxItemProps = ListboxItemProps> = Pick
      *         { value: '10', label: 'Jackfruit Pudding' },
      *     ];
      *
-     * @type Array<MenuItem>
+     * @type Array<SearchOption>
      */
-    items?: T[];
+    items?: SearchOption[];
     /**
      * Message to display when no results are found
      *
@@ -48,7 +51,7 @@ export type SearchBarProps<T extends ListboxItemProps = ListboxItemProps> = Pick
     noResultsMessage?: string;
 };
 /**
- * Component description coming soon.
+ * An input field that allows customers to input search queries and retrieve results.
  *
  * @example
  *     import { useState } from 'react';
@@ -84,11 +87,7 @@ export type SearchBarProps<T extends ListboxItemProps = ListboxItemProps> = Pick
  *     }
  *
  * @name SearchBar
- * @phase DesignReview
+ * @phase UXReview
  */
-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 };
+export declare function SearchBar({ items: itemsProp, noResultsMessage, placeholder, 'aria-label': ariaLabel, value: idProp, inputRef, name, size, onSelect, value, onChange, disabled, scrollLimit, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/SearchBar/SearchBar.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './search-bar.css.js';
 import { SvgSearch } from '@bspk/icons/Search';
-import { useRef } from 'react';
-import { Listbox } from '../Listbox';
+import { useEffect, useRef, useState } from 'react';
+import { ListItemMenu } from '../ListItemMenu';
 import { TextInput } from '../TextInput';
 import { Txt } from '../Txt';
-import { useCombobox } from '../../hooks/useCombobox';
 import { useId } from '../../hooks/useId';
-import './search-bar.css.js';
+import { useUIContext } from '../../hooks/useUIContext';
+import { useIds } from '../../utils/useIds';
 /**
- * Component description coming soon.
+ * An input field that allows customers to input search queries and retrieve results.
  *
  * @example
  *     import { useState } from 'react';
@@ -44,42 +45,52 @@ import './search-bar.css.js';
  *     }
  *
  * @name SearchBar
- * @phase DesignReview
+ * @phase UXReview
  */
-function SearchBar({ itemDisplayCount: itemCount, items, noResultsMessage, placeholder = 'Search', 'aria-label': ariaLabel, id: idProp, inputRef, name, size = 'medium', onSelect, value, onChange, disabled = false, }) {
+export function SearchBar({ items: itemsProp, noResultsMessage, placeholder = 'Search', 'aria-label': ariaLabel, value: idProp, inputRef, name, size = 'medium', onSelect, value, onChange, disabled = false, scrollLimit, }) {
     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)
+    const items = useIds(`search-bar-${id}`, itemsProp || []);
+    const inputElementRef = useRef(null);
+    const { sendAriaLiveMessage } = useUIContext();
+    useEffect(() => {
+        if (!items.length)
+            sendAriaLiveMessage('No results found', 'assertive');
+    }, [items.length, sendAriaLiveMessage, value]);
+    const [textValue, setTextValue] = useState(value || '');
+    useEffect(() => {
+        setTextValue(items.find((item) => item.value === value)?.label || '');
+    }, [items, value]);
+    return (_jsx(_Fragment, { children: _jsx("div", { "data-bspk": "search-bar", children: _jsx(ListItemMenu, { arrowKeyNavigationCallback: (params) => {
+                    // maintain default behavior for arrow keys left/right
+                    return params.key !== 'ArrowLeft' && params.key !== 'ArrowRight';
+                }, disabled: disabled, itemOnClick: ({ currentId, setShow }) => {
+                    const item = items.find((i) => i.id === currentId);
+                    onSelect(item);
+                    onChange(item.value);
+                    setTextValue(item.label);
+                    setShow(false);
+                }, items: items.map((item) => {
+                    return {
+                        ...item,
+                        'aria-selected': item.value === value,
+                    };
+                }), label: "Search bar", leading: !!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 }))] })), onClose: () => {
+                    setTimeout(() => {
+                        if (!inputElementRef.current)
                             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();
+                        inputElementRef.current.focus();
+                        inputElementRef.current.setSelectionRange(0, inputElementRef.current.value.length);
+                    }, 100);
+                }, owner: "search-bar", role: "listbox", scrollLimit: scrollLimit, children: (toggleProps, { setRef, toggleMenu }) => (_jsx(TextInput, { "aria-label": (items.length === 0 ? 'No results found' : '') + ariaLabel, autoComplete: "off", containerRef: setRef, disabled: disabled, id: id, inputProps: { ...toggleProps }, inputRef: (node) => {
+                        if (!node)
                             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 }))] })) }))] }));
+                        inputRef?.(node);
+                        inputElementRef.current = node;
+                    }, leading: _jsx(SvgSearch, {}), name: name, onChange: (str) => {
+                        setTextValue(str);
+                        if (str.length)
+                            toggleMenu(true);
+                    }, owner: "search-bar", placeholder: placeholder, size: size, value: textValue })) }) }) }));
 }
-SearchBar.bspkName = 'SearchBar';
-export { SearchBar };
 //# sourceMappingURL=SearchBar.js.map

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

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

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

package/dist/components/SearchBar/SearchBarExample.js

@@ -1,11 +1,7 @@
 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 || [] });
+    render: ({ props, Component }) => {
+        return _jsx(Component, { ...props });
     },
 };
 //# sourceMappingURL=SearchBarExample.js.map

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

@@ -1 +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"}
+{"version":3,"file":"SearchBarExample.js","sourceRoot":"","sources":["../../../src/components/SearchBar/SearchBarExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,gBAAgB,GAAqC;IAC9D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC;IACpC,CAAC;CACJ,CAAC"}

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

@@ -1,7 +1,7 @@
 [data-bspk=search-bar] {
   display: flex;
   width: 100%;
-  min-width: 300px;
+  min-width: 100px;
 }
 
 [data-bspk=no-items-found] {

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

@@ -4,7 +4,7 @@ const style = document.createElement('style');
 style.appendChild(document.createTextNode(`[data-bspk=search-bar] {
   display: flex;
   width: 100%;
-  min-width: 300px;
+  min-width: 100px;
 }
 
 [data-bspk=no-items-found] {
@@ -19,4 +19,3 @@ style.appendChild(document.createTextNode(`[data-bspk=search-bar] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

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

@@ -1,84 +1,8 @@
-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;
-};
+import { TabOption, TabListProps } from '-/components/TabList';
+import { ElementProps } from '-/types/common';
+export type SegmentedControlOption = Omit<TabOption, 'badge'>;
+export type SegmentedControlProps = TabListProps<SegmentedControlOption>;
 /**
  * Navigation tool that organizes content across different screens and views.
  *
@@ -103,11 +27,7 @@ export type SegmentedControlProps = {
  *     }
  *
  * @name SegmentedControl
- * @phase DesignReview
+ * @phase UXReview
  */
-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 };
+export declare function SegmentedControl({ onChange, value, size, options, width, iconsOnly, ...containerProps }: ElementProps<SegmentedControlProps, 'ul'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -1,8 +1,6 @@
-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 { jsx as _jsx } from "react/jsx-runtime";
 import './segmented-control.css.js';
+import { TabList } from '../TabList';
 /**
  * Navigation tool that organizes content across different screens and views.
  *
@@ -27,17 +25,9 @@ import './segmented-control.css.js';
  *     }
  *
  * @name SegmentedControl
- * @phase DesignReview
+ * @phase UXReview
  */
-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));
-        }) }));
+export function SegmentedControl({ onChange, value, size = 'medium', options, width = 'hug', iconsOnly, ...containerProps }) {
+    return (_jsx(TabList, { ...containerProps, "data-bspk": "segmented-control", iconsOnly: iconsOnly, onChange: onChange, options: options, size: size, value: value, width: width }));
 }
-SegmentedControl.bspkName = 'SegmentedControl';
-export { SegmentedControl };
 //# sourceMappingURL=SegmentedControl.js.map

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

@@ -1 +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"}
+{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAa,OAAO,EAAgB,MAAM,sBAAsB,CAAC;AAMxE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,KAAK,GAAG,KAAK,EACb,SAAS,EACT,GAAG,cAAc,EACuB;IACxC,OAAO,CACH,KAAC,OAAO,OACA,cAAc,eACR,mBAAmB,EAC7B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,GACd,CACL,CAAC;AACN,CAAC"}

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

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