@bspk/ui 1.1.32 → 1.1.34

package/src/SegmentedControl.tsx

@@ -1,163 +0,0 @@
-import './segmented-control.scss';
-import { Fragment } from 'react';
-
-import { Tooltip } from './Tooltip';
-import { useOptionIconsInvalid } from './hooks/useOptionIconsInvalid';
-
-import { ElementProps } from './';
-
-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;
-};
-
-/**
- * Navigation tool that organizes content across different screens and views.
- *
- * @example
- *     import { useState } from 'react';
- *     import { SegmentedControl } from '@bspk/ui/SegmentedControl';
- *
- *     export function Example() {
- *         const [selectedOption, setSelectedOption] = useState<string>();
- *
- *         return (
- *             <SegmentedControl
- *                 onChange={setSelectedOption}
- *                 options={[
- *                     { value: '1', label: 'Option 1' },
- *                     { value: '2', label: 'Option 2' },
- *                     { value: '3', label: 'Option 3' },
- *                 ]}
- *                 value={selectedOption}
- *             />
- *         );
- *     }
- *
- * @name SegmentedControl
- */
-function SegmentedControl({
-    onChange,
-    value,
-    size = 'medium',
-    options: optionsProp,
-    width = 'hug',
-    showLabels: showLabelsProp = true,
-    ...containerProps
-}: ElementProps<SegmentedControlProps, 'div'>) {
-    const options = Array.isArray(optionsProp) ? optionsProp : [];
-    useOptionIconsInvalid(options);
-
-    const hideLabels = showLabelsProp === false && options.every((item) => item.icon && item.label);
-
-    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>
-    );
-}
-
-SegmentedControl.bspkName = 'SegmentedControl';
-
-export { SegmentedControl };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Select.tsx

@@ -1,187 +0,0 @@
-import './select.scss';
-import { SvgChevronRight } from '@bspk/icons/ChevronRight';
-
-import { ListItem } from './ListItem';
-import { Menu, MenuProps } from './Menu';
-import { Portal } from './Portal';
-import { useCombobox } from './hooks/useCombobox';
-import { Placement } from './hooks/useFloating';
-import { useId } from './hooks/useId';
-
-import { CommonProps, InvalidPropsLibrary } from './';
-
-export type SelectOption = Record<string, unknown> & {
-    /** The value of the option. */
-    value: string;
-    /** The label of the option. This is the text that will be displayed on the option. */
-    label: string;
-};
-
-export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<
-    'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'size'
-> &
-    InvalidPropsLibrary &
-    Pick<MenuProps<T>, 'isMulti' | 'itemCount' | 'renderListItem' | 'selectAll'> & {
-        /**
-         * Array of options to display in the select
-         *
-         * @example
-         *     [
-         *         { value: '1', label: 'Option 1' },
-         *         { value: '2', label: 'Option 2' },
-         *         { value: '3', label: 'Option 3' },
-         *         { value: '4', label: 'Option 4' },
-         *         { value: '5', label: 'Option 5' },
-         *         { value: '6', label: 'Option 6' },
-         *         { value: '7', label: 'Option 7' },
-         *         { value: '8', label: 'Option 8' },
-         *         { value: '9', label: 'Option 9' },
-         *         { value: '10', label: 'Option 10' },
-         *     ];
-         *
-         * @type Array<SelectOption>
-         * @required
-         */
-        options: T[];
-        /**
-         * Array of selected values
-         *
-         * @type Array<string>
-         */
-        value?: Array<string>;
-        /**
-         * Placeholder for the select
-         *
-         * @default Select one...
-         */
-        placeholder?: string;
-        /**
-         * The placement of the select menu. Will be ignored if the menu is too close to the edge of the screen.
-         *
-         * @default bottom
-         */
-        placement?: Extract<Placement, 'bottom' | 'top'>;
-        /** The style of the select. */
-        style?: React.CSSProperties;
-        /**
-         * The function to call when the selected values change.
-         *
-         * @required
-         */
-        onChange?: (value: string[], event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    };
-
-/**
- * A field element that allows users to select one option from a list of available choices. *
- *
- * @example
- *     import { Select } from '@bspk/ui/Select';
- *
- *     export function Example() {
- *         const [selected, setSelected] = React.useState<string[]>([]);
- *         return (
- *             <Select
- *                 aria-label="Select an option"
- *                 itemCount={5}
- *                 name="example-select"
- *                 onChange={setSelected}
- *                 options={[
- *                     { value: '1', label: 'Option 1' },
- *                     { value: '2', label: 'Option 2' },
- *                     { value: '3', label: 'Option 3' },
- *                     { value: '4', label: 'Option 4' },
- *                     { value: '5', label: 'Option 5' },
- *                     { value: '6', label: 'Option 6' },
- *                     { value: '7', label: 'Option 7' },
- *                     { value: '8', label: 'Option 8' },
- *                     { value: '9', label: 'Option 9' },
- *                     { value: '10', label: 'Option 10' },
- *                 ]}
- *                 placeholder="Select an option"
- *                 size="medium"
- *                 value={selected}
- *             />
- *         );
- *     }
- *
- * @name Select
- */
-function Select({
-    options = [],
-    value: selected,
-    onChange,
-    'aria-label': ariaLabel,
-    placeholder = 'Select...',
-    size = 'medium',
-    itemCount = 5,
-    disabled,
-    id: propId,
-    invalid,
-    errorMessage,
-    readOnly,
-    name,
-    isMulti,
-    renderListItem,
-    style: styleProp,
-    selectAll,
-}: SelectProps) {
-    const id = useId(propId);
-
-    const { toggleProps, menuProps, closeMenu } = useCombobox({
-        placement: 'bottom',
-        disabled,
-        invalid,
-        readOnly,
-        errorMessage,
-        offsetOptions: 4,
-    });
-
-    const selectLabel = isMulti
-        ? `${selected?.length || 0} option${selected?.length !== 1 ? 's' : ''} selected`
-        : options.find((o) => o.value === selected?.[0])?.label;
-
-    return (
-        <>
-            <input defaultValue={selected} name={name} type="hidden" />
-            <button
-                aria-label={ariaLabel}
-                data-bspk="select"
-                data-empty={selectLabel ? undefined : ''}
-                data-invalid={invalid || undefined}
-                data-size={size}
-                disabled={disabled || readOnly}
-                id={id}
-                style={styleProp}
-                {...toggleProps}
-            >
-                <ListItem data-placeholder="" label={selectLabel || placeholder} readOnly />
-                <span data-icon>
-                    <SvgChevronRight />
-                </span>
-            </button>
-            <Portal>
-                <Menu
-                    data-floating
-                    isMulti={isMulti}
-                    itemCount={itemCount}
-                    items={options}
-                    onChange={(next, event) => {
-                        event?.preventDefault();
-                        if (!isMulti) closeMenu();
-                        onChange?.(next);
-                    }}
-                    renderListItem={renderListItem}
-                    selectAll={selectAll}
-                    selectedValues={selected}
-                    {...menuProps}
-                />
-            </Portal>
-        </>
-    );
-}
-
-Select.bspkName = 'Select';
-
-export { Select };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/SelectField.tsx

@@ -1,80 +0,0 @@
-import { FormFieldProps, FormField } from './FormField';
-import { SelectProps, Select } from './Select';
-
-export type SelectFieldProps = Pick<
-    SelectProps,
-    | 'disabled'
-    | 'itemCount'
-    | 'name'
-    | 'onChange'
-    | 'options'
-    | 'placeholder'
-    | 'placement'
-    | 'readOnly'
-    | 'size'
-    | 'value'
-> &
-    Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing' | 'required'>;
-
-/**
- * A component that allows users to input large amounts of text that could span multiple lines.
- *
- * This component takes properties from the FormField and Select components.
- *
- * @example
- *     import { SelectField } from '@bspk/ui/SelectField';
- *
- *     export function Example() {
- *         const [state, setState] = React.useState(['option1']);
- *         return (
- *             <SelectField
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={(nextValue) => setState(nextValue)}
- *                 options={[
- *                     { label: 'Option 1', value: 'option1' },
- *                     { label: 'Option 2', value: 'option2' },
- *                     { label: 'Option 3', value: 'option3' },
- *                 ]}
- *                 placeholder="Select one..."
- *                 value={state}
- *             />
- *         );
- *     }
- *
- * @name SelectField
- */
-function SelectField({
-    label,
-    errorMessage: errorMessageProp,
-    helperText,
-    controlId: id,
-    labelTrailing,
-    required,
-    ...selectProps
-}: SelectFieldProps) {
-    const errorMessage = (!selectProps.readOnly && !selectProps.disabled && errorMessageProp) || undefined;
-
-    return (
-        <FormField
-            controlId={id}
-            data-bspk="select-field"
-            errorMessage={errorMessage}
-            helperText={helperText}
-            label={label}
-            labelTrailing={labelTrailing}
-            required={required}
-        >
-            {(fieldProps) => (
-                <Select {...selectProps} {...fieldProps} aria-label={label} id={id} invalid={!!errorMessage} />
-            )}
-        </FormField>
-    );
-}
-
-SelectField.bspkName = 'SelectField';
-
-export { SelectField };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Skeleton.tsx

@@ -1,98 +0,0 @@
-import './skeleton.scss';
-import { CSSProperties } from 'react';
-
-import { TxtVariant } from './utils/txtVariants';
-
-export type SkeletonProps = {
-    /**
-     * The variant of the skeleton that best hints the content being loaded.
-     *
-     * @default text
-     */
-    variant?: 'circular' | 'photo' | 'profile' | 'rectangular' | 'text' | 'thumbnail';
-    /**
-     * The variant of the text being loaded. This is only used when variant is 'text'.
-     *
-     * @default body-base
-     */
-    textVariant?: TxtVariant;
-    /**
-     * The number of lines showing. This is only used when variant is 'text'.
-     *
-     * @default 3
-     */
-    textLines?: number;
-    /**
-     * The width of the skeleton. This is ignored when variant is 'text', 'profile', or 'thumbnail'.
-     *
-     * @default 200
-     */
-    width?: number | string;
-    /**
-     * The height of the skeleton. This is ignored when variant is 'text', 'profile', or 'thumbnail'.
-     *
-     * @default 100
-     */
-    height?: number | string;
-};
-
-/**
- * A visual placeholder for an element while it is in a loading state.
- *
- * The data for your components might not be immediately available. You can improve the perceived responsiveness of the
- * page by using skeletons. It feels like things are happening immediately, then the information is incrementally
- * displayed on the screen.
- *
- * @example
- *     import { Skeleton } from '@bspk/ui/skeleton';
- *
- *     function Example(item: { title: string; src: string } | null) {
- *         return item ? (
- *             <img
- *                 style={{
- *                     width: 210,
- *                     height: 118,
- *                 }}
- *                 alt={item.title}
- *                 src={item.src}
- *             />
- *         ) : (
- *             <Skeleton variant="photo" width={210} height={118} />
- *         );
- *     }
- *
- * @exampleDescription This example shows a skeleton loading state for an image but can be used for any element.
- *
- * @name Skeleton
- */
-function Skeleton({
-    width = 100,
-    height = 100,
-    textLines,
-    textVariant: textSize,
-    variant = 'rectangular',
-}: SkeletonProps) {
-    return (
-        <div
-            data-bspk="skeleton"
-            data-variant={variant}
-            style={
-                {
-                    '--height': typeof height === 'number' ? `${height}px` : height,
-                    '--text-height': `var(--${textSize}-size)`,
-                    '--text-margin': `calc(var(--${textSize}-line-height) - var(--${textSize}-size))`,
-                    '--width': typeof width === 'number' ? `${width}px` : width,
-                } as CSSProperties
-            }
-        >
-            {variant === 'text' &&
-                [...Array(Math.max(1, textLines || 0))].map((_, index) => <div data-line key={index} />)}
-        </div>
-    );
-}
-
-Skeleton.bspkName = 'Skeleton';
-
-export { Skeleton };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/StylesProviderAnywhere.tsx

@@ -1,16 +0,0 @@
-import './base.scss';
-import '@bspk/styles/anywhere.css';
-/**
- * Utility to provide the Anywhere styles to the application.
- *
- * @name StylesProviderAnywhere
- */
-function StylesProviderAnywhere() {
-    return <></>;
-}
-
-StylesProviderAnywhere.bspkName = 'StylesProviderAnywhere';
-
-export { StylesProviderAnywhere };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/StylesProviderBetterHomesGardens.tsx

@@ -1,16 +0,0 @@
-import './base.scss';
-import '@bspk/styles/better-homes-gardens.css';
-/**
- * Utility to provide the Better Homes & Gardens styles to the application.
- *
- * @name StylesProviderBetterHomesGardens
- */
-function StylesProviderBetterHomesGardens() {
-    return <></>;
-}
-
-StylesProviderBetterHomesGardens.bspkName = 'StylesProviderBetterHomesGardens';
-
-export { StylesProviderBetterHomesGardens };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/StylesProviderCartus.tsx

@@ -1,16 +0,0 @@
-import './base.scss';
-import '@bspk/styles/cartus.css';
-/**
- * Utility to provide the Cartus styles to the application.
- *
- * @name StylesProviderCartus
- */
-function StylesProviderCartus() {
-    return <></>;
-}
-
-StylesProviderCartus.bspkName = 'StylesProviderCartus';
-
-export { StylesProviderCartus };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/StylesProviderCentury21.tsx

@@ -1,16 +0,0 @@
-import './base.scss';
-import '@bspk/styles/century-21.css';
-/**
- * Utility to provide the Century 21 styles to the application.
- *
- * @name StylesProviderCentury21
- */
-function StylesProviderCentury21() {
-    return <></>;
-}
-
-StylesProviderCentury21.bspkName = 'StylesProviderCentury21';
-
-export { StylesProviderCentury21 };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/StylesProviderColdwellBanker.tsx

@@ -1,16 +0,0 @@
-import './base.scss';
-import '@bspk/styles/coldwell-banker.css';
-/**
- * Utility to provide the Coldwell Banker styles to the application.
- *
- * @name StylesProviderColdwellBanker
- */
-function StylesProviderColdwellBanker() {
-    return <></>;
-}
-
-StylesProviderColdwellBanker.bspkName = 'StylesProviderColdwellBanker';
-
-export { StylesProviderColdwellBanker };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/StylesProviderCorcoran.tsx

@@ -1,16 +0,0 @@
-import './base.scss';
-import '@bspk/styles/corcoran.css';
-/**
- * Utility to provide the Corcoran styles to the application.
- *
- * @name StylesProviderCorcoran
- */
-function StylesProviderCorcoran() {
-    return <></>;
-}
-
-StylesProviderCorcoran.bspkName = 'StylesProviderCorcoran';
-
-export { StylesProviderCorcoran };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/StylesProviderDenaliBoss.tsx

@@ -1,16 +0,0 @@
-import './base.scss';
-import '@bspk/styles/denali-boss.css';
-/**
- * Utility to provide the Denali Boss styles to the application.
- *
- * @name StylesProviderDenaliBoss
- */
-function StylesProviderDenaliBoss() {
-    return <></>;
-}
-
-StylesProviderDenaliBoss.bspkName = 'StylesProviderDenaliBoss';
-
-export { StylesProviderDenaliBoss };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/StylesProviderEra.tsx

@@ -1,16 +0,0 @@
-import './base.scss';
-import '@bspk/styles/era.css';
-/**
- * Utility to provide the ERA styles to the application.
- *
- * @name StylesProviderEra
- */
-function StylesProviderEra() {
-    return <></>;
-}
-
-StylesProviderEra.bspkName = 'StylesProviderEra';
-
-export { StylesProviderEra };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/StylesProviderSothebys.tsx

@@ -1,16 +0,0 @@
-import './base.scss';
-import '@bspk/styles/sothebys.css';
-/**
- * Utility to provide the Sotheby's styles to the application.
- *
- * @name StylesProviderSothebys
- */
-function StylesProviderSothebys() {
-    return <></>;
-}
-
-StylesProviderSothebys.bspkName = 'StylesProviderSothebys';
-
-export { StylesProviderSothebys };
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */