@bspk/ui 1.1.33 → 1.2.0

package/src/components/Scrim/Scrim.tsx

@@ -1,21 +1,14 @@
-import { CommonProps } from '-';
+import { CommonProps } from '-/types/common';
+
 import './scrim.scss';
 
-export type ScrimProps = CommonProps<'data-bspk-owner'> & {
+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.
      *
@@ -34,20 +27,8 @@ export type ScrimProps = CommonProps<'data-bspk-owner'> & {
  *
  * @phase Utility
  */
-function Scrim({ visible = true, variant, ...props }: ScrimProps) {
-    return (
-        <div
-            {...props}
-            aria-hidden="true"
-            data-bspk="scrim"
-            data-hidden={!visible || undefined}
-            data-variant={variant}
-        />
-    );
+export function Scrim({ visible = true, ...props }: ScrimProps) {
+    return <div {...props} aria-hidden="true" data-bspk="scrim" data-hidden={!visible || undefined} />;
 }
 
-Scrim.bspkName = 'Scrim';
-
-export { Scrim };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Scrim/scrim.scss

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

package/src/components/SearchBar/SearchBar.tsx

@@ -6,9 +6,13 @@ import { TextInputProps, TextInput } from '-/components/TextInput';
 import { Txt } from '-/components/Txt';
 import { useCombobox } from '-/hooks/useCombobox';
 import { useId } from '-/hooks/useId';
+
 import './search-bar.scss';
 
-export type SearchBarProps<T extends ListboxItemProps = ListboxItemProps> = Pick<ListboxProps<T>, 'itemDisplayCount'> &
+export type SearchBarProps<T extends ListboxItemProps = ListboxItemProps> = Pick<
+    ListboxProps<T>,
+    'itemCount' | 'itemDisplayCount'
+> &
     Pick<TextInputProps, 'aria-label' | 'disabled' | 'id' | 'inputRef' | 'name' | 'size'> & {
         /** The current value of the search bar. */
         value?: string;
@@ -99,16 +103,17 @@ export type SearchBarProps<T extends ListboxItemProps = ListboxItemProps> = Pick
  *     }
  *
  * @name SearchBar
- * @phase DesignReview
+ * @phase UXReview
  */
-function SearchBar({
-    itemDisplayCount: itemCount,
+export function SearchBar({
     items,
     noResultsMessage,
     placeholder = 'Search',
     'aria-label': ariaLabel,
     id: idProp,
     inputRef,
+    itemCount,
+    itemDisplayCount,
     name,
     size = 'medium',
     onSelect,
@@ -123,6 +128,7 @@ function SearchBar({
         toggleProps: { onClick, onKeyDownCapture, ...triggerProps },
         menuProps,
         closeMenu,
+        openMenu,
         elements,
     } = useCombobox({
         placement: 'bottom-start',
@@ -150,10 +156,12 @@ function SearchBar({
                     }}
                     leading={<SvgSearch />}
                     name={name}
-                    onChange={(str) => onChange(str)}
-                    onClick={() => {
-                        if (items?.length) onClick();
+                    onChange={(str) => {
+                        onChange(str);
+                        if (str.length) openMenu();
                     }}
+                    onClick={onClick}
+                    owner="search-bar"
                     {...triggerProps}
                     onKeyDownCapture={(event) => {
                         const handled = onKeyDownCapture(event);
@@ -171,8 +179,10 @@ function SearchBar({
             </div>
             {isOpen && (
                 <Listbox
+                    {...menuProps}
                     innerRef={elements.setFloating}
-                    itemDisplayCount={itemCount}
+                    itemCount={itemCount}
+                    itemDisplayCount={itemDisplayCount}
                     items={items}
                     onChange={(selectedValues, event) => {
                         event?.preventDefault();
@@ -181,7 +191,6 @@ function SearchBar({
                         onChange(item?.label || '');
                         closeMenu();
                     }}
-                    {...menuProps}
                 >
                     {!!value?.length && !items?.length && (
                         <div data-bspk="no-items-found">
@@ -201,8 +210,4 @@ function SearchBar({
     );
 }
 
-SearchBar.bspkName = 'SearchBar';
-
-export { SearchBar };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/SearchBar/SearchBarExample.tsx

@@ -1,8 +1,7 @@
+import { SearchBarProps } from '.';
 import { ComboboxItemProps } from '-/components/Combobox';
 import { ComponentExample } from '-/utils/demo';
 
-import { SearchBarProps } from '.';
-
 export const SearchBarExample: ComponentExample = {
     render: ({ props: state, Component }) => {
         const props = { ...state } as SearchBarProps;
@@ -14,6 +13,13 @@ export const SearchBarExample: ComponentExample = {
                 item.label.toLowerCase().includes(searchValue),
             );
 
-        return <Component {...props} items={props.items || []} />;
+        return (
+            <Component
+                {...props}
+                itemCount={props.items?.length || undefined}
+                itemDisplayCount={props.items && props.items.length <= 7 ? props.items.length : 7}
+                items={props.items || []}
+            />
+        );
     },
 };

package/src/components/SearchBar/search-bar.scss

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

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -1,90 +1,11 @@
-import { Fragment } from 'react';
+import { TabOption, TabList, TabListProps } from '-/components/TabList';
+import { ElementProps } from '-/types/common';
 
-import { ElementProps } from '-';
-import { Tooltip } from '-/components/Tooltip';
-import { useOptionIconsInvalid } from '-/hooks/useOptionIconsInvalid';
 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 SegmentedControlOption = Pick<TabOption, 'disabled' | 'icon' | 'iconSelected' | 'label' | 'value'>;
 
-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;
-};
+export type SegmentedControlProps = TabListProps<SegmentedControlOption>;
 
 /**
  * Navigation tool that organizes content across different screens and views.
@@ -110,54 +31,29 @@ export type SegmentedControlProps = {
  *     }
  *
  * @name SegmentedControl
- * @phase DesignReview
+ * @phase UXReview
  */
-function SegmentedControl({
+export function SegmentedControl({
     onChange,
     value,
     size = 'medium',
-    options: optionsProp,
+    options,
     width = 'hug',
-    showLabels: showLabelsProp = true,
+    iconsOnly,
     ...containerProps
-}: ElementProps<SegmentedControlProps, 'div'>) {
-    const options = Array.isArray(optionsProp) ? optionsProp : [];
-    useOptionIconsInvalid(options);
-
-    const hideLabels = showLabelsProp === false && options.every((item) => item.icon && item.label);
-
+}: ElementProps<SegmentedControlProps, 'ul'>) {
     return (
-        <div {...containerProps} data-bspk="segmented-control" data-size={size} data-width={width}>
-            {options.map((item, index) => {
-                const isActive = item.value === value;
-                return (
-                    <Fragment key={item.value}>
-                        <Tooltip disabled={!hideLabels} label={item.label} placement="top">
-                            <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)}
-                            >
-                                <span data-outer>
-                                    <span data-inner>
-                                        {(isActive && item.iconActive) || item.icon}
-                                        {!hideLabels && item.label}
-                                    </span>
-                                </span>
-                            </button>
-                        </Tooltip>
-                    </Fragment>
-                );
-            })}
-        </div>
+        <TabList
+            {...containerProps}
+            data-bspk="segmented-control"
+            iconsOnly={iconsOnly}
+            onChange={onChange}
+            options={options}
+            size={size}
+            value={value}
+            width={width}
+        />
     );
 }
 
-SegmentedControl.bspkName = 'SegmentedControl';
-
-export { SegmentedControl };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/SegmentedControl/SegmentedControlExample.tsx

@@ -4,37 +4,58 @@ import { SvgDiamondFill } from '@bspk/icons/DiamondFill';
 import { SvgSquare } from '@bspk/icons/Square';
 import { SvgSquareFill } from '@bspk/icons/SquareFill';
 
+import { SegmentedControlOption, SegmentedControlProps } from '.';
 import { ComponentExample } from '-/utils/demo';
 
-import { SegmentedControlProps } from '.';
+const PRESET_OPTIONS: SegmentedControlOption[] = [
+    {
+        value: '1',
+        label: 'Option 1',
+        icon: <SvgDiamond />,
+        iconSelected: <SvgDiamondFill />,
+    },
+    {
+        value: '2',
+        label: 'Disabled 2',
+        disabled: true,
+        icon: <SvgCircle />,
+    },
+    {
+        value: '3',
+        label: 'Option 3',
+        icon: <SvgSquare />,
+        iconSelected: <SvgSquareFill />,
+    },
+];
 
 export const SegmentedControlExample: ComponentExample<SegmentedControlProps> = {
     containerStyle: { width: '100%' },
+    defaultState: {
+        options: PRESET_OPTIONS,
+    },
     presets: [
         {
             label: 'With icons',
             propState: {
-                options: [
-                    {
-                        value: '1',
-                        label: 'Option 1',
-                        icon: <SvgDiamond />,
-                        iconActive: <SvgDiamondFill />,
-                    },
-                    {
-                        value: '2',
-                        label: 'Disabled 2',
-                        disabled: true,
-                        icon: <SvgCircle />,
-                    },
-                    {
-                        value: '3',
-                        label: 'Option 3',
-                        icon: <SvgSquare />,
-                        iconActive: <SvgSquareFill />,
-                    },
-                ],
+                iconsOnly: undefined,
+            },
+        },
+        {
+            label: 'Icons only',
+            propState: {
+                iconsOnly: true,
+            },
+        },
+        {
+            label: 'Long label text',
+            propState: {
+                iconsOnly: undefined,
+                options: PRESET_OPTIONS.map((option) => ({
+                    ...option,
+                    label: `${option.label} with a very long label text that should be truncated if it exceeds the width of the control`,
+                })),
             },
         },
     ],
+    variants: false,
 };

package/src/components/SegmentedControl/segmented-control.scss

@@ -1,121 +1,69 @@
-[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;
+ul[data-bspk='segmented-control'] {
+    background: var(--surface-neutral-t3-low);
+    border-radius: var(--radius-sm);
+    padding: var(--spacing-sizing-01);
 
     &[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;
-    }
+    --padding: var(--spacing-sizing-04);
 
     &[data-size='small'] {
-        --outer-height: var(--spacing-sizing-08);
-        --inner-height: var(--spacing-sizing-06);
-        --svg-width: 16px;
+        --padding: var(--spacing-sizing-03);
     }
 
-    svg {
-        width: var(--svg-width) !important;
+    &[data-size='large'] {
+        --padding: var(--spacing-sizing-05);
     }
 
-    button {
-        border: 0;
-        cursor: pointer;
+    li {
         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;
+        padding: 0 var(--padding);
+        border-radius: var(--radius-sm);
 
-        [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;
-        }
+        &:has([data-icon]) {
+            // smaller padding for icon-only items
+            padding: 0 calc(var(--padding) - var(--spacing-sizing-01));
 
-        [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);
+            &:has([data-label]) {
+                padding-right: var(--padding);
             }
         }
 
-        &: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([aria-disabled]) {
+            &[aria-selected] {
+                background: var(--surface-neutral-t1-base);
+                box-shadow:
+                    0 0 1px 0 var(--shadow-variant-03),
+                    0 1px 1px 0 var(--shadow-variant-05);
             }
-        }
 
-        &:not(:disabled) {
-            &:hover {
-                [data-inner] {
-                    background: var(--interactions-neutral-hover-opacity);
+            &[data-active],
+            // only show hover effect if no sibling is active
+            &:hover:not(:has(~ [data-active])) {
+                background: var(--interactions-neutral-hover-opacity);
+
+                &[aria-selected] {
+                    background:
+                        linear-gradient(
+                            var(--interactions-neutral-hover-opacity),
+                            var(--interactions-neutral-hover-opacity)
+                        ),
+                        linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
                 }
             }
 
             &: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);
+                background: var(--interactions-neutral-press-opacity);
             }
         }
 
-        &:disabled {
-            pointer-events: none;
+        &[aria-disabled] {
             color: var(--foreground-neutral-disabled-on-surface);
             cursor: not-allowed;
         }
     }
 }
 
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+// /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */