@bspk/ui 1.0.0

package/src/ProgressionStepperBar.tsx

@@ -0,0 +1,95 @@
+import { css } from '@emotion/react';
+import { CSSProperties } from 'react';
+
+export type ProgressionStepperBarProps = {
+    /**
+     * The number of steps in the progress bar.
+     *
+     * @minimum 2
+     * @maximum 10
+     * @required
+     */
+    stepCount: number;
+    /**
+     * The last step completed.
+     *
+     * @default 0
+     * @minimum 0
+     */
+    stepCompleted?: number;
+    /** The size of the progress bar. */
+    size?: 'large' | 'small';
+};
+
+/**
+ * Component description coming soon.
+ *
+ * @name ProgressionStepperBar
+ */
+function ProgressionStepperBar({
+    stepCount,
+    stepCompleted: stepCompletedProp = 0,
+    size = 'large',
+}: ProgressionStepperBarProps) {
+    const stepCompleted = Math.min(stepCompletedProp, stepCount);
+
+    return (
+        <div
+            css={style}
+            data-progression-stepper-bar=""
+            data-size={size}
+            style={{ '--steps': stepCount } as CSSProperties}
+        >
+            <div data-steps>
+                {Array.from({ length: stepCount }, (_, i) => (
+                    <div data-complete={i < stepCompleted || undefined} data-step={i} key={i} />
+                ))}
+            </div>
+            <label>
+                {stepCompleted} of {stepCount} steps completed.
+            </label>
+        </div>
+    );
+}
+
+ProgressionStepperBar.bspkName = 'ProgressionStepperBar';
+
+export { ProgressionStepperBar };
+
+export const style = css`
+    &[data-size='large'] {
+        --height: var(--spacing-sizing-02);
+    }
+
+    &[data-size='small'] {
+        --height: var(--spacing-sizing-01);
+    }
+
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: var(--spacing-sizing-01);
+
+    [data-steps] {
+        display: flex;
+        flex-direction: row;
+        gap: var(--spacing-sizing-01);
+        height: var(--height);
+        [data-step] {
+            width: 100%;
+            height: var(--height);
+            min-width: var(--spacing-sizing-02);
+            border-radius: var(--radius-small);
+            background: var(--surface-neutral-t3-low);
+            &[data-complete] {
+                background: var(--surface-brand-primary);
+            }
+        }
+    }
+
+    label {
+        font: var(--labels-small);
+    }
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Radio.tsx

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

package/src/RadioGroup.tsx

@@ -0,0 +1,62 @@
+import { Radio } from './Radio';
+import { ToggleOption, ToggleOptionProps } from './ToggleOption';
+
+import { ElementProps, CommonProps } from './';
+
+export type RadioGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
+
+export type RadioGroupProps = CommonProps<'name' | 'value'> & {
+    /**
+     * The function to call when the radios are changed.
+     *
+     * @required
+     */
+    onChange: (value: string) => void;
+    /**
+     * The options for the radios.
+     *
+     * @type RadioGroupOption[]
+     * @required
+     */
+    options: RadioGroupOption[];
+    /** The size of the radio group labels. */
+    size?: 'base' | 'large' | 'small';
+};
+
+/**
+ * A group of radios that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @name RadioGroup
+ */
+function RadioGroup({
+    onChange,
+    options = [],
+    name,
+    value: groupValue,
+    size,
+    ...props
+}: ElementProps<RadioGroupProps, 'div'>) {
+    return (
+        <div {...props} data-control-group data-radio-group role="radiogroup" style={{ display: 'contents' }}>
+            {options.map(({ label, description, value }) => {
+                return (
+                    <ToggleOption description={description} key={value} label={label} size={size}>
+                        <Radio
+                            aria-label={label}
+                            checked={groupValue === value}
+                            name={name}
+                            onChange={(checked) => checked && onChange(value)}
+                            value={value}
+                        />
+                    </ToggleOption>
+                );
+            })}
+        </div>
+    );
+}
+
+RadioGroup.bspkName = 'RadioGroup';
+
+export { RadioGroup };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/RadioOption.tsx

@@ -0,0 +1,24 @@
+import { Radio, RadioProps } from './Radio';
+import { ToggleOption, ToggleOptionProps } from './ToggleOption';
+
+export type RadioOptionProps = Pick<RadioProps, 'checked' | 'disabled' | 'invalid' | 'name' | 'onChange' | 'value'> &
+    Pick<ToggleOptionProps, 'description' | 'label'>;
+
+/**
+ * A control that allows users to choose one or more items from a list or turn an feature on or off.
+ *
+ * @name RadioOption
+ */
+function RadioOption({ label, description, ...checkboxProps }: RadioOptionProps) {
+    return (
+        <ToggleOption data-checkbox-field description={description} label={label}>
+            <Radio {...checkboxProps} aria-label={label} />
+        </ToggleOption>
+    );
+}
+
+RadioOption.bspkName = 'RadioOption';
+
+export { RadioOption };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Rating.tsx

@@ -0,0 +1,29 @@
+import { css } from '@emotion/react';
+
+export type RatingProps = {
+    /** The content of the rating. */
+    children: string;
+};
+
+/**
+ * Component description coming soon.
+ *
+ * @name Rating
+ */
+function Rating({ children }: RatingProps) {
+    return (
+        <div css={style} data-rating>
+            {children}
+        </div>
+    );
+}
+
+Rating.bspkName = 'Rating';
+
+export { Rating };
+
+export const style = css`
+    display: flex;
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/SearchBar.tsx

@@ -0,0 +1,121 @@
+import { SvgSearch } from '@bspk/icons/Search';
+import { css } from '@emotion/react';
+import { useRef } from 'react';
+
+import { Menu, MenuItem, MenuProps } from './Menu';
+import { Portal } from './Portal';
+import { TextInput, TextInputProps } from './TextInput';
+import { useFloatingMenu } from './hooks/useFloatingMenu';
+import { useId } from './hooks/useId';
+//import { useFloatingMenu } from './hooks/useFloatingMenu';
+
+export type SearchBarProps = Pick<MenuProps, 'itemCount' | 'items' | 'noResultsMessage'> &
+    Pick<TextInputProps, 'aria-label' | 'id' | 'inputRef' | 'name' | 'placeholder' | 'size'> & {
+        /** The current value of the search bar. */
+        searchValue?: string;
+        /**
+         * Handler for state updates.
+         *
+         * @type (value: String) => void
+         * @required
+         */
+        setSearchValue: (value: string) => void;
+        /*
+         * Handler for item selection.
+         *
+         * @type (item: MenuItem) => void
+         * @required
+         */
+        onSelect: (item?: MenuItem) => void;
+    };
+
+/**
+ * Component description coming soon.
+ *
+ * @name SearchBar
+ */
+function SearchBar({
+    itemCount,
+    items,
+    noResultsMessage,
+    placeholder = 'Search',
+    'aria-label': ariaLabel,
+    id: idProp,
+    inputRef,
+    name,
+    size = 'medium',
+    onSelect,
+    searchValue,
+    setSearchValue,
+}: SearchBarProps) {
+    const id = useId(idProp);
+    const {
+        triggerProps: { ref: triggerRef, onClick, onKeyDownCapture, ...triggerProps },
+        menuProps,
+        closeMenu,
+    } = useFloatingMenu({
+        placement: 'bottom-start',
+    });
+
+    const inputRefLocal = useRef<HTMLElement | null>(null);
+
+    return (
+        <>
+            <TextInput
+                aria-label={ariaLabel}
+                autoComplete="off"
+                containerRef={triggerRef}
+                css={style}
+                id={id}
+                inputRef={(node) => {
+                    inputRef?.(node || null);
+                    inputRefLocal.current = node;
+                }}
+                leading={<SvgSearch />}
+                name={name}
+                onChange={(str) => setSearchValue(str)}
+                placeholder={placeholder}
+                size={size}
+                value={searchValue}
+                {...triggerProps}
+                onClick={(event) => {
+                    if (items?.length) onClick(event);
+                }}
+                onKeyDownCapture={(event) => {
+                    const handled = onKeyDownCapture(event);
+
+                    if (handled) return;
+
+                    inputRefLocal.current?.focus();
+                }}
+            />
+            <Portal>
+                <Menu
+                    itemCount={itemCount}
+                    items={items}
+                    noResultsMessage={noResultsMessage}
+                    onChange={(selectedValues, event) => {
+                        event?.preventDefault();
+                        const item = items?.find((i) => i.value === selectedValues[0]);
+                        onSelect?.(item);
+                        setSearchValue(item?.label || '');
+                        closeMenu();
+                    }}
+                    {...menuProps}
+                />
+            </Portal>
+        </>
+    );
+}
+
+SearchBar.bspkName = 'SearchBar';
+
+export { SearchBar };
+
+export const style = css`
+    display: flex;
+    width: 100%;
+    min-width: 300px;
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/SegmentedControl.tsx

@@ -0,0 +1,233 @@
+import { css } from '@emotion/react';
+import { Fragment } from 'react';
+
+import { Tooltip } from './Tooltip';
+import { useNavOptions } from './hooks/useNavOptions';
+
+import { ElementProps } from './';
+
+export type SegmentedToggleOption = {
+    /**
+     * The label of the option. This is the text that will be displayed on the option.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /** The value of the option. If not provided, the label will be used as the value. */
+    value?: string;
+    /** The the icon to display before the label. */
+    icon?: React.ReactNode;
+    iconActive?: React.ReactNode;
+};
+
+export type SegmentedControlProps = {
+    /**
+     * The options to display. Each option has a label and an optional leading icon.
+     *
+     * @type SegmentedToggleOption[]
+     * @required
+     */
+    options: SegmentedToggleOption[];
+    /** The id of the selected option. */
+    value?: SegmentedToggleOption['value'];
+    /**
+     * The function to call when the option is clicked.
+     *
+     * @required
+     */
+    onChange: (value: SegmentedToggleOption['value']) => void;
+    /**
+     * The size of the options.
+     *
+     * @default medium
+     */
+    size?: 'medium' | 'small';
+    /**
+     * The width of the options. If set to 'fill', the options will fill the width of the container. If set to 'hug',
+     * the options will be as wide as their content.
+     *
+     * @default hug
+     */
+    width?: 'fill' | 'hug';
+    /**
+     * Determines if the labels of the options should be displayed. If icons are not provided for every option this is
+     * ignored and labels are shown.
+     *
+     * @default true
+     */
+    showLabels?: boolean;
+};
+
+/**
+ * Navigation tool that organizes content across different screens and views.
+ *
+ * @name SegmentedControl
+ */
+function SegmentedControl({
+    onChange,
+    value,
+    size = 'medium',
+    options,
+    width = 'hug',
+    showLabels: showLabelsProp = true,
+    ...containerProps
+}: ElementProps<SegmentedControlProps, 'div'>) {
+    const items = useNavOptions(options);
+
+    const hideLabels = showLabelsProp === false && items.every((item) => item.icon && item.label);
+
+    return (
+        <div {...containerProps} css={style} data-option-group data-size={size} data-width={width}>
+            {items.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 === items.length - 1 || undefined}
+                                data-selected={isActive || undefined}
+                                disabled={item.disabled || undefined}
+                                onClick={() => onChange(item.value)}
+                            >
+                                <span data-outer>
+                                    <span data-inner>
+                                        {(isActive && item.iconActive) || item.icon}
+                                        {!hideLabels && item.label}
+                                    </span>
+                                </span>
+                            </button>
+                        </Tooltip>
+                    </Fragment>
+                );
+            })}
+        </div>
+    );
+}
+
+SegmentedControl.bspkName = 'SegmentedControl';
+
+export { SegmentedControl };
+
+export const style = css`
+    display: flex;
+    flex-direction: row;
+    max-width: 100%;
+    --outer-height: var(--spacing-sizing-10);
+    --inner-height: var(--spacing-sizing-08);
+    --svg-width: 20px;
+
+    &[data-width='fill'] {
+        align-items: stretch;
+        width: 100%;
+        --btn-flex-grow: 1;
+        margin: 0 var(--spacing-sizing-04);
+    }
+
+    &[data-width='hug'] {
+        width: fit-content;
+        --btn-flex-grow: 0;
+    }
+
+    &[data-size='small'] {
+        --outer-height: var(--spacing-sizing-08);
+        --inner-height: var(--spacing-sizing-06);
+        --svg-width: 16px;
+    }
+
+    svg {
+        width: var(--svg-width) !important;
+    }
+
+    button {
+        border: 0;
+        cursor: pointer;
+        color: var(--foreground-neutral-on-surface);
+        flex-grow: var(--btn-flex-grow);
+        font: var(--labels-small);
+        margin: 0;
+        height: var(--spacing-sizing-12);
+        background: transparent;
+        position: relative;
+
+        [data-focus-ring] {
+            display: none;
+        }
+
+        [data-outer] {
+            height: var(--outer-height);
+            background: var(--surface-neutral-t3-low);
+            margin: var(--spacing-sizing-01) 0;
+            padding: var(--spacing-sizing-01) 0;
+            display: block;
+        }
+
+        [data-inner] {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            height: var(--inner-height);
+            border-bottom: 1px solid transparent;
+            justify-content: center;
+            gap: var(--spacing-sizing-01);
+            border-radius: var(--radius-small);
+            padding: var(--spacing-sizing-02) var(--spacing-sizing-03);
+        }
+
+        &:first-of-type {
+            [data-outer] {
+                border-top-left-radius: var(--radius-medium);
+                border-bottom-left-radius: var(--radius-medium);
+                padding-left: var(--spacing-sizing-01);
+            }
+        }
+
+        &:last-of-type {
+            [data-outer] {
+                border-top-right-radius: var(--radius-medium);
+                border-bottom-right-radius: var(--radius-medium);
+                padding-right: var(--spacing-sizing-01);
+            }
+        }
+
+        &:not(:disabled) {
+            &:hover {
+                [data-inner] {
+                    background: var(--interactions-neutral-hover-opacity);
+                }
+            }
+
+            &:active {
+                [data-inner] {
+                    background: var(--interactions-neutral-press-opacity);
+                }
+            }
+
+            &[data-selected] {
+                [data-inner] {
+                    background: var(--surface-neutral-t1-base);
+                }
+            }
+
+            &:focus-visible {
+                z-index: 2;
+                outline: solid 2px var(--stroke-neutral-focus);
+            }
+        }
+
+        &:disabled {
+            pointer-events: none;
+            color: var(--foreground-neutral-disabled-on-surface);
+            cursor: not-allowed;
+        }
+    }
+`;
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */