@bspk/ui 1.1.31 → 1.1.33

package/src/ProgressionStepper.tsx

@@ -1,135 +0,0 @@
-import './progression-stepper.scss';
-import { SvgCheck } from '@bspk/icons/Check';
-
-import { ElementProps } from '.';
-
-/** A progress stepper item is a single step in the progress bar. */
-export type ProgressionStepperItem = {
-    /**
-     * The name of the step.
-     *
-     * @type string
-     * @required
-     */
-    name: string;
-    /**
-     * The subtext of the step.
-     *
-     * @type multiline
-     */
-    subtext?: string;
-    /**
-     * The link to navigate to when the step is clicked.
-     *
-     * @type {label: string; onClick: () => void}
-     */
-    touchLink?: { label: string; onClick: () => void };
-};
-
-export type ProgressionStepperProps = {
-    /**
-     * The steps to display in the progress bar.
-     *
-     * @example
-     *     [
-     *         { name: '[Name of step to proceed forward 1]' },
-     *         { name: '[Name of step to proceed forward 2]' },
-     *         { name: '[Name of step to proceed forward 3]' },
-     *     ];
-     *
-     * @type Array<ProgressionStepperItem>
-     * @required
-     */
-    steps: ProgressionStepperItem[];
-    /**
-     * The current step in the progress bar.
-     *
-     * If the current step is greater than the number of steps, all steps with be completed.
-     *
-     * If the current step is less than 1, all steps will be incomplete.
-     *
-     * @default 0
-     * @minimum 0
-     */
-    currentStep?: number;
-    /**
-     * The variant of the progress bar. Can be either horizontal, vertical, or widget.
-     *
-     * When on small width screens, the default will automatically switch to widget.
-     *
-     * @default horizontal
-     */
-    variant?: 'horizontal' | 'vertical' | 'widget';
-};
-
-/**
- * A progress stepper is a horizontal visual indicator that let’s the user know the progression of the current process.
- *
- * @example
- *     import { ProgressionStepper } from '@bspk/ui/ProgressionStepper';
- *
- *     export function Example() {
- *         return <ProgressionStepper steps={[{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }]} />;
- *     }
- *
- * @name ProgressionStepper
- */
-function ProgressionStepper({
-    steps = [],
-    currentStep: currentStepProp = 0,
-    variant = 'horizontal',
-    ...containerProps
-}: ElementProps<ProgressionStepperProps, 'div'>) {
-    const currentStep = Math.max(0, Math.min(currentStepProp, steps.length + 1));
-    return !steps?.length ? null : (
-        <div {...containerProps} data-bspk="progression-stepper" data-variant={variant}>
-            {variant === 'widget' && (
-                <label>
-                    <span data-title>{steps[Math.max(0, Math.min(currentStep - 1, steps.length - 1))].name}</span>
-                    <span data-subtitle>
-                        {currentStep >= steps.length ? (
-                            'Completed'
-                        ) : (
-                            <>
-                                Step {currentStep} of {steps.length}
-                            </>
-                        )}
-                    </span>
-                </label>
-            )}
-            <ol>
-                {steps.flatMap(({ name, subtext }, index) => {
-                    const stepNum = index + 1;
-                    let status: 'complete' | 'current' | 'incomplete' = 'incomplete';
-                    if (stepNum < currentStep) status = 'complete';
-                    else if (stepNum === currentStep) status = 'current';
-
-                    return (
-                        <li data-status={status} data-step={stepNum} key={`step-${index}`}>
-                            <span aria-hidden data-line-circle>
-                                <span data-line="before" />
-                                <span data-circle>
-                                    <span>{stepNum}</span>
-                                    {status === 'complete' && <SvgCheck />}
-                                </span>
-                                <span data-line="after" />
-                            </span>
-                            {variant !== 'widget' && (
-                                <span data-content>
-                                    <span data-name>{name}</span>
-                                    {subtext && <span data-subtext>{subtext}</span>}
-                                </span>
-                            )}
-                        </li>
-                    );
-                })}
-            </ol>
-        </div>
-    );
-}
-
-ProgressionStepper.bspkName = 'ProgressionStepper';
-
-export { ProgressionStepper };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/ProgressionStepperBar.tsx

@@ -1,64 +0,0 @@
-import './progression-stepper-bar.scss';
-import { CSSProperties } from 'react';
-
-export type ProgressionStepperBarProps = {
-    /**
-     * The number of steps in the progress bar.
-     *
-     * @example
-     *     5;
-     *
-     * @minimum 2
-     * @maximum 10
-     * @required
-     */
-    stepCount: number;
-    /**
-     * The last step completed.
-     *
-     * @example
-     *     2;
-     *
-     * @default 0
-     * @minimum 0
-     */
-    stepCompleted?: number;
-    /**
-     * The size of the progress bar.
-     *
-     * @default large
-     */
-    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 data-bspk="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 };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Radio.tsx

@@ -1,54 +0,0 @@
-import './radio.scss';
-import { ChangeEvent } from 'react';
-
-import { ElementProps, InvalidPropsLibrary, CommonProps } from './';
-
-export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'name'> &
-    InvalidPropsLibrary &
-    Required<CommonProps<'value'>> & {
-        /**
-         * Marks the radio as checked.
-         *
-         * @default false
-         */
-        checked?: boolean;
-        /**
-         * The function to call when the radio is checked.
-         *
-         * @required
-         */
-        onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
-    };
-
-/**
- * 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, errorMessage, ...otherProps } = props;
-
-    return (
-        <span data-bspk="radio">
-            <input
-                {...otherProps}
-                checked={!!checked}
-                data-errormessage={errorMessage || undefined}
-                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 };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/RadioGroup.tsx

@@ -1,139 +0,0 @@
-import './radio-group.scss';
-import { useId } from 'react';
-
-import { Radio } from './Radio';
-import { ToggleOptionProps, ToggleOption } from './ToggleOption';
-
-import { ElementProps, CommonProps } from './';
-
-export type RadioGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
-
-export type RadioGroupProps = CommonProps<'name'> & {
-    /**
-     * The value of the control.
-     *
-     * @example
-     *     1;
-     *
-     * @required
-     */
-    value: string;
-    /**
-     * The function to call when the radios are changed.
-     *
-     * @example
-     *     (value) => setState({ value }),
-     *
-     * @required
-     */
-    onChange: (value: string) => void;
-    /**
-     * The options for the radios.
-     *
-     * @example
-     *     [
-     *         {
-     *             value: '1',
-     *             label: 'Option 1',
-     *         },
-     *         {
-     *             value: '2',
-     *             label: 'Option 2',
-     *             description: 'Description here',
-     *         },
-     *         { value: '3', label: 'Option 3' },
-     *     ];
-     *
-     * @type Array<RadioGroupOption>
-     * @required
-     */
-    options: RadioGroupOption[];
-    /**
-     * The label of the radio group.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * Shows the RadioGroup label. When label isn't showing it is used as the aria-label prop.
-     *
-     * @default true
-     */
-    showLabel?: boolean;
-};
-
-/**
- * A group of radios that allows users to choose one or more items from a list or turn an feature on or off.
- *
- * @example
- *     import { useState } from 'react';
- *     import { RadioGroup } from '@bspk/ui/RadioGroup';
- *
- *     export function Example() {
- *         const [selectedOption, setSelectedOption] = useState<string>('1');
- *
- *         return (
- *             <RadioGroup
- *                 name="Example name"
- *                 onChange={(nextValue) => setSelectedOption(nextValue)}
- *                 options={[
- *                     {
- *                         value: '1',
- *                         label: 'Option 1',
- *                         description: 'Description here',
- *                     },
- *                     { value: '2', label: 'Option 2' },
- *                     { value: '3', label: 'Option 3' },
- *                 ]}
- *                 value={selectedOption}
- *             />
- *         );
- *     }
- *
- * @name RadioGroup
- */
-function RadioGroup({
-    onChange,
-    options = [],
-    name,
-    value: groupValue,
-    label: groupLabel,
-    showLabel = true,
-    ...props
-}: ElementProps<RadioGroupProps, 'div'>) {
-    const id = `radio-group-${useId()}`;
-
-    return (
-        <div
-            {...props}
-            aria-label={!showLabel ? groupLabel : undefined}
-            aria-labelledby={showLabel ? `${id}-label` : undefined}
-            data-bspk="radio-group"
-            id={id}
-            role="group"
-        >
-            {showLabel && <label id={`${id}-label`}>{groupLabel}</label>}
-            <div role="radiogroup">
-                {options.map(({ label, description, value }, index) => {
-                    return (
-                        <ToggleOption description={description} key={`toggle-option-${value || index}`} label={label}>
-                            <Radio
-                                aria-label={label}
-                                checked={groupValue === value}
-                                name={name}
-                                onChange={(checked) => checked && onChange(value)}
-                                value={value}
-                            />
-                        </ToggleOption>
-                    );
-                })}
-            </div>
-        </div>
-    );
-}
-
-RadioGroup.bspkName = 'RadioGroup';
-
-export { RadioGroup };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/RadioOption.tsx

@@ -1,41 +0,0 @@
-import { ChangeEvent } from 'react';
-
-import { RadioProps, Radio } from './Radio';
-import { ToggleOptionProps, ToggleOption } from './ToggleOption';
-
-import { InvalidPropsLibrary } from '.';
-
-export type RadioOptionProps = InvalidPropsLibrary &
-    Pick<RadioProps, 'checked' | 'disabled' | 'name' | 'value'> &
-    Pick<ToggleOptionProps, 'description' | 'label'> & {
-        /**
-         * The function to call when the radio is checked.
-         *
-         * @required
-         */
-        onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
-    };
-
-/**
- * A control that allows users to choose one or more items from a list or turn an feature on or off.
- *
- * If only a radio button is needed, consider using the `Radio` component directly.
- *
- * @name RadioOption
- */
-function RadioOption({ label: labelProp, description, ...checkboxProps }: RadioOptionProps) {
-    const label = labelProp || description;
-    return (
-        label && (
-            <ToggleOption data-bspk="radio-option" 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/SearchBar.tsx

@@ -1,206 +0,0 @@
-import './search-bar.scss';
-import { SvgSearch } from '@bspk/icons/Search';
-import { useRef } from 'react';
-
-import { MenuItem, MenuProps, Menu } from './Menu';
-import { Portal } from './Portal';
-import { TextInputProps, TextInput } from './TextInput';
-import { Txt } from './Txt';
-import { useCombobox } from './hooks/useCombobox';
-import { useId } from './hooks/useId';
-
-export type SearchBarProps<T extends MenuItem = MenuItem> = Pick<MenuProps<T>, 'itemCount' | 'noResultsMessage'> &
-    Pick<TextInputProps, 'aria-label' | '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;
-        /*
-         * Handler for item selection.
-         *
-         * @type (item: MenuItem) => void
-         * @required
-         */
-        onSelect: (item?: MenuItem) => 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;
-        /**
-         * Whether to show or hide menu.
-         *
-         * @default true
-         */
-        showMenu?: boolean;
-    };
-
-/**
- * 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
- */
-function SearchBar({
-    itemCount,
-    items,
-    noResultsMessage,
-    placeholder = 'Search',
-    'aria-label': ariaLabel,
-    id: idProp,
-    inputRef,
-    name,
-    size = 'medium',
-    onSelect,
-    value,
-    onChange,
-    showMenu = true,
-}: SearchBarProps) {
-    const id = useId(idProp);
-    const {
-        toggleProps: { ref: triggerRef, onClick, onKeyDownCapture, ...triggerProps },
-        menuProps,
-        closeMenu,
-    } = useCombobox({
-        placement: 'bottom-start',
-    });
-
-    const inputRefLocal = useRef<HTMLElement | null>(null);
-
-    return (
-        <>
-            <div data-bspk="search-bar">
-                <TextInput
-                    aria-label={ariaLabel}
-                    autoComplete="off"
-                    containerRef={triggerRef}
-                    id={id}
-                    inputRef={(node) => {
-                        inputRef?.(node || null);
-                        inputRefLocal.current = node;
-                    }}
-                    leading={<SvgSearch />}
-                    name={name}
-                    onChange={(str) => onChange(str)}
-                    placeholder={placeholder}
-                    size={size}
-                    value={value}
-                    {...triggerProps}
-                    onClick={() => {
-                        if (items?.length) onClick();
-                    }}
-                    onKeyDownCapture={(event) => {
-                        const handled = onKeyDownCapture(event);
-
-                        if (handled) return;
-
-                        inputRefLocal.current?.focus();
-                    }}
-                />
-            </div>
-            {showMenu && (
-                <Portal>
-                    <Menu
-                        itemCount={itemCount}
-                        items={items}
-                        noResultsMessage={
-                            !!value?.length &&
-                            !items?.length && (
-                                <>
-                                    <Txt as="div" variant="heading-h5">
-                                        No results found
-                                    </Txt>
-                                    {noResultsMessage && (
-                                        <Txt as="div" variant="body-base">
-                                            {noResultsMessage}
-                                        </Txt>
-                                    )}
-                                </>
-                            )
-                        }
-                        onChange={(selectedValues, event) => {
-                            event?.preventDefault();
-                            const item = items?.find((i) => i.value === selectedValues[0]);
-                            onSelect?.(item);
-                            onChange(item?.label || '');
-                            closeMenu();
-                        }}
-                        {...menuProps}
-                    />
-                </Portal>
-            )}
-        </>
-    );
-}
-
-SearchBar.bspkName = 'SearchBar';
-
-export { SearchBar };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */