@bspk/ui 1.1.34 → 1.2.0

package/src/components/Rating/Rating.tsx

@@ -0,0 +1,100 @@
+import { SvgStarFill } from '@bspk/icons/StarFill';
+import { ElementType } from 'react';
+
+import './rating.scss';
+
+const MAX_STARS = 5;
+
+export type RatingSize = 'large' | 'medium' | 'small';
+
+const iconWidths: Record<RatingSize, number> = {
+    large: 32,
+    medium: 24,
+    small: 16,
+};
+
+export type RatingProps = {
+    /**
+     * The value of the rating between 0 and 5.
+     *
+     * @minimum 0
+     * @maximum 5
+     */
+    value?: number;
+    /**
+     * If included the component is in interactive mode and this callback is fired when a star is selected.
+     *
+     * @param value - The new value of the rating.
+     */
+    onChange?: (value: number) => void;
+    /**
+     * The size of the rating.
+     *
+     * @default medium
+     */
+    size?: RatingSize;
+};
+
+/**
+ * Descriptive and interactive controls that allow customers to indicate their feelings about an experience or product
+ * on a scale of 1 to 5. Half sizes are displayed when interactive is false.
+ *
+ * @example
+ *     import { Rating } from '@bspk/ui/Rating';
+ *
+ *     function Example() {
+ *         return <Rating value={4.5} />;
+ *     }
+ *
+ * @name Rating
+ * @phase UXReview
+ */
+export function Rating({ size = 'medium', value, onChange }: RatingProps) {
+    const As: ElementType = onChange ? 'button' : 'div';
+
+    return (
+        <div
+            aria-label={onChange ? 'Select a star rating' : `${value} out of ${MAX_STARS} stars`}
+            data-bspk="rating"
+            data-size={size}
+            role={onChange ? 'radiogroup' : 'img'}
+        >
+            {Array.from({ length: MAX_STARS }, (_, index) => {
+                const fill = getFill(index + 1, value);
+                const selected = value !== undefined && Math.floor(value) === index;
+                return (
+                    <As
+                        aria-checked={selected}
+                        aria-hidden={!onChange}
+                        aria-label={onChange ? `Rate ${index + 1}` : undefined}
+                        data-fill={fill}
+                        data-star
+                        key={index}
+                        onClick={() => onChange?.(index + 1)}
+                        role={onChange ? 'radio' : 'presentation'}
+                        tabIndex={onChange ? (selected ? 0 : -1) : -1}
+                        type="button"
+                    >
+                        <SvgStarFill width={iconWidths[size]} />
+                        {fill === 'half' && (
+                            <div data-fill-half>
+                                <div data-star>
+                                    <SvgStarFill width={iconWidths[size]} />
+                                </div>
+                            </div>
+                        )}
+                    </As>
+                );
+            })}
+        </div>
+    );
+}
+
+function getFill(num: number, value?: number): 'full' | 'half' | undefined {
+    if (value === undefined) return undefined;
+    if (value >= num) return 'full';
+    if (value == num - 0.5) return 'half';
+    return undefined;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Rating/RatingExample.tsx

@@ -0,0 +1,18 @@
+import { RatingProps } from './Rating';
+import { ComponentExampleFn } from '-/utils/demo';
+
+export const RatingExample: ComponentExampleFn<RatingProps> = () => {
+    return {
+        render: ({ props, Component }) => {
+            return <Component {...props} />;
+        },
+        presets: [
+            {
+                label: 'Non interactive',
+                propState: {
+                    onChange: undefined,
+                },
+            },
+        ],
+    };
+};

package/src/components/Rating/index.tsx

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

package/src/components/Rating/rating.scss

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