@bspk/ui 1.1.31 → 1.1.33

package/dist/RadioGroup.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=radio-group]{display:flex;flex-direction:column;gap:var(--spacing-sizing-01)}`);;
-import { useId } from 'react';
-import { Radio } from './Radio';
-import { ToggleOption } from './ToggleOption';
-/**
- * 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 }) {
-    const id = `radio-group-${useId()}`;
-    return (_jsxs("div", { ...props, "aria-label": !showLabel ? groupLabel : undefined, "aria-labelledby": showLabel ? `${id}-label` : undefined, "data-bspk": "radio-group", id: id, role: "group", children: [showLabel && _jsx("label", { id: `${id}-label`, children: groupLabel }), _jsx("div", { role: "radiogroup", children: options.map(({ label, description, value }, index) => {
-                    return (_jsx(ToggleOption, { description: description, label: label, children: _jsx(Radio, { "aria-label": label, checked: groupValue === value, name: name, onChange: (checked) => checked && onChange(value), value: value }) }, `toggle-option-${value || index}`));
-                }) })] }));
-}
-RadioGroup.bspkName = 'RadioGroup';
-export { RadioGroup };
-//# sourceMappingURL=RadioGroup.js.map

package/dist/RadioGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../src/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA4DjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,SAAS,UAAU,CAAC,EAChB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,UAAU,EACjB,SAAS,GAAG,IAAI,EAChB,GAAG,KAAK,EAC2B;IACnC,MAAM,EAAE,GAAG,eAAe,KAAK,EAAE,EAAE,CAAC;IAEpC,OAAO,CACH,kBACQ,KAAK,gBACG,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,qBAC9B,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,eAC5C,aAAa,EACvB,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,aAEX,SAAS,IAAI,gBAAO,EAAE,EAAE,GAAG,EAAE,QAAQ,YAAG,UAAU,GAAS,EAC5D,cAAK,IAAI,EAAC,YAAY,YACjB,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;oBAClD,OAAO,CACH,KAAC,YAAY,IAAC,WAAW,EAAE,WAAW,EAA0C,KAAK,EAAE,KAAK,YACxF,KAAC,KAAK,kBACU,KAAK,EACjB,OAAO,EAAE,UAAU,KAAK,KAAK,EAC7B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,EACjD,KAAK,EAAE,KAAK,GACd,IAPuC,iBAAiB,KAAK,IAAI,KAAK,EAAE,CAQ/D,CAClB,CAAC;gBACN,CAAC,CAAC,GACA,IACJ,CACT,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/RadioOption.d.ts

@@ -1,25 +0,0 @@
-import { ChangeEvent } from 'react';
-import { RadioProps } from './Radio';
-import { ToggleOptionProps } 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
- */
-declare function RadioOption({ label: labelProp, description, ...checkboxProps }: RadioOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
-declare namespace RadioOption {
-    var bspkName: string;
-}
-export { RadioOption };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/RadioOption.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Radio } from './Radio';
-import { ToggleOption } from './ToggleOption';
-/**
- * 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 }) {
-    const label = labelProp || description;
-    return (label && (_jsx(ToggleOption, { "data-bspk": "radio-option", description: description, label: label, children: _jsx(Radio, { ...checkboxProps, "aria-label": label }) })));
-}
-RadioOption.bspkName = 'RadioOption';
-export { RadioOption };
-//# sourceMappingURL=RadioOption.js.map

package/dist/RadioOption.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RadioOption.js","sourceRoot":"","sources":["../src/RadioOption.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAc,KAAK,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAejE;;;;;;GAMG;AACH,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,aAAa,EAAoB;IACtF,MAAM,KAAK,GAAG,SAAS,IAAI,WAAW,CAAC;IACvC,OAAO,CACH,KAAK,IAAI,CACL,KAAC,YAAY,iBAAW,cAAc,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,YACzE,KAAC,KAAK,OAAK,aAAa,gBAAc,KAAK,GAAI,GACpC,CAClB,CACJ,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/SearchBar.d.ts

@@ -1,99 +0,0 @@
-import './search-bar.scss';
-import { MenuItem, MenuProps } from './Menu';
-import { TextInputProps } from './TextInput';
-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;
-    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
- */
-declare function SearchBar({ itemCount, items, noResultsMessage, placeholder, 'aria-label': ariaLabel, id: idProp, inputRef, name, size, onSelect, value, onChange, showMenu, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
-declare namespace SearchBar {
-    var bspkName: string;
-}
-export { SearchBar };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/SearchBar.js

@@ -1,78 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=search-bar]{display:flex;width:100%;min-width:300px}`);;
-import { SvgSearch } from '@bspk/icons/Search';
-import { useRef } from 'react';
-import { Menu } from './Menu';
-import { Portal } from './Portal';
-import { TextInput } from './TextInput';
-import { Txt } from './Txt';
-import { useCombobox } from './hooks/useCombobox';
-import { useId } from './hooks/useId';
-/**
- * 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, }) {
-    const id = useId(idProp);
-    const { toggleProps: { ref: triggerRef, onClick, onKeyDownCapture, ...triggerProps }, menuProps, closeMenu, } = useCombobox({
-        placement: 'bottom-start',
-    });
-    const inputRefLocal = useRef(null);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { "data-bspk": "search-bar", children: _jsx(TextInput, { "aria-label": ariaLabel, autoComplete: "off", containerRef: triggerRef, id: id, inputRef: (node) => {
-                        inputRef?.(node || null);
-                        inputRefLocal.current = node;
-                    }, leading: _jsx(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();
-                    } }) }), showMenu && (_jsx(Portal, { children: _jsx(Menu, { itemCount: itemCount, items: items, noResultsMessage: !!value?.length &&
-                        !items?.length && (_jsxs(_Fragment, { children: [_jsx(Txt, { as: "div", variant: "heading-h5", children: "No results found" }), noResultsMessage && (_jsx(Txt, { as: "div", variant: "body-base", children: noResultsMessage }))] })), onChange: (selectedValues, event) => {
-                        event?.preventDefault();
-                        const item = items?.find((i) => i.value === selectedValues[0]);
-                        onSelect?.(item);
-                        onChange(item?.label || '');
-                        closeMenu();
-                    }, ...menuProps }) }))] }));
-}
-SearchBar.bspkName = 'SearchBar';
-export { SearchBar };
-//# sourceMappingURL=SearchBar.js.map

package/dist/SearchBar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../src/SearchBar.tsx"],"names":[],"mappings":"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"}

package/dist/SegmentedControl.d.ts

@@ -1,112 +0,0 @@
-import './segmented-control.scss';
-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
- */
-declare function SegmentedControl({ onChange, value, size, options: optionsProp, width, showLabels: showLabelsProp, ...containerProps }: ElementProps<SegmentedControlProps, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace SegmentedControl {
-    var bspkName: string;
-}
-export { SegmentedControl };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/SegmentedControl.js

@@ -1,43 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=segmented-control]{display:flex;flex-direction:row;max-width:100%;--outer-height: var(--spacing-sizing-10);--inner-height: var(--spacing-sizing-08);--svg-width: 20px}[data-bspk=segmented-control][data-width=fill]{align-items:stretch;width:100%;--btn-flex-grow: 1;margin:0 var(--spacing-sizing-04)}[data-bspk=segmented-control][data-width=hug]{width:fit-content;--btn-flex-grow: 0}[data-bspk=segmented-control][data-size=small]{--outer-height: var(--spacing-sizing-08);--inner-height: var(--spacing-sizing-06);--svg-width: 16px}[data-bspk=segmented-control] svg{width:var(--svg-width) !important}[data-bspk=segmented-control] 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:rgba(0,0,0,0);position:relative;white-space:nowrap}[data-bspk=segmented-control] button [data-focus-ring]{display:none}[data-bspk=segmented-control] button [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-bspk=segmented-control] button [data-inner]{display:flex;flex-direction:row;align-items:center;height:var(--inner-height);border-bottom:1px solid rgba(0,0,0,0);justify-content:center;gap:var(--spacing-sizing-01);border-radius:var(--radius-small);padding:var(--spacing-sizing-02) var(--spacing-sizing-03)}[data-bspk=segmented-control] button: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)}[data-bspk=segmented-control] button: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)}[data-bspk=segmented-control] button:not(:disabled):hover [data-inner]{background:var(--interactions-neutral-hover-opacity)}[data-bspk=segmented-control] button:not(:disabled):active [data-inner]{background:var(--interactions-neutral-press-opacity)}[data-bspk=segmented-control] button:not(:disabled)[data-selected] [data-inner]{background:var(--surface-neutral-t1-base)}[data-bspk=segmented-control] button:not(:disabled):focus-visible{z-index:2;outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=segmented-control] button:disabled{pointer-events:none;color:var(--foreground-neutral-disabled-on-surface);cursor:not-allowed}`);;
-import { Fragment } from 'react';
-import { Tooltip } from './Tooltip';
-import { useOptionIconsInvalid } from './hooks/useOptionIconsInvalid';
-/**
- * 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 }) {
-    const options = Array.isArray(optionsProp) ? optionsProp : [];
-    useOptionIconsInvalid(options);
-    const hideLabels = showLabelsProp === false && options.every((item) => item.icon && item.label);
-    return (_jsx("div", { ...containerProps, "data-bspk": "segmented-control", "data-size": size, "data-width": width, children: options.map((item, index) => {
-            const isActive = item.value === value;
-            return (_jsx(Fragment, { children: _jsx(Tooltip, { disabled: !hideLabels, label: item.label, placement: "top", children: _jsx("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), children: _jsx("span", { "data-outer": true, children: _jsxs("span", { "data-inner": true, children: [(isActive && item.iconActive) || item.icon, !hideLabels && item.label] }) }) }) }) }, item.value));
-        }) }));
-}
-SegmentedControl.bspkName = 'SegmentedControl';
-export { SegmentedControl };
-//# sourceMappingURL=SegmentedControl.js.map

package/dist/SegmentedControl.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../src/SegmentedControl.tsx"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAqFtE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,SAAS,gBAAgB,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EAAE,WAAW,EACpB,KAAK,GAAG,KAAK,EACb,UAAU,EAAE,cAAc,GAAG,IAAI,EACjC,GAAG,cAAc,EACwB;IACzC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9D,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAE/B,MAAM,UAAU,GAAG,cAAc,KAAK,KAAK,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAEhG,OAAO,CACH,iBAAS,cAAc,eAAY,mBAAmB,eAAY,IAAI,gBAAc,KAAK,YACpF,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;YACtC,OAAO,CACH,KAAC,QAAQ,cACL,KAAC,OAAO,IAAC,QAAQ,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAC,KAAK,YAC9D,+BACgB,IAAI,CAAC,KAAK,gBACV,KAAK,KAAK,CAAC,IAAI,SAAS,eACzB,KAAK,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,mBACrC,QAAQ,IAAI,SAAS,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,YAEjD,6CACI,+CACK,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,IAAI,EAC1C,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,IACvB,GACJ,GACF,GACH,IAjBC,IAAI,CAAC,KAAK,CAkBd,CACd,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,gBAAgB,CAAC,QAAQ,GAAG,kBAAkB,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/Select.d.ts

@@ -1,100 +0,0 @@
-import './select.scss';
-import { MenuProps } from './Menu';
-import { Placement } from './hooks/useFloating';
-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
- */
-declare function Select({ options, value: selected, onChange, 'aria-label': ariaLabel, placeholder, size, itemCount, disabled, id: propId, invalid, errorMessage, readOnly, name, isMulti, renderListItem, style: styleProp, selectAll, }: SelectProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Select {
-    var bspkName: string;
-}
-export { Select };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Select.js

@@ -1,67 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=select]{--select-background: var(--surface-neutral-t1-base);--select-border-color: var(--stroke-neutral-base);--select-text-color: var(--foreground-neutral-on-surface);--select-height: var(--spacing-sizing-10);--select-font: var(--body-base);--select-clear-height: var(--spacing-sizing-05);--select-padding: var(--spacing-sizing-03);--select-icon-width: var(--spacing-sizing-05);position:relative;width:100%;max-width:280px;outline:unset;min-height:var(--select-height);max-height:var(--select-height);display:flex;flex-direction:row;gap:var(--spacing-sizing-02);flex-grow:0;flex-shrink:0;text-align:left;font:var(--select-font);border:1px solid var(--select-border-color);border-radius:var(--radius-small);background:var(--select-background);padding:0 var(--select-padding)}[data-bspk=select] [data-placeholder]{display:block;max-width:100%;text-overflow:ellipsis;overflow:hidden;padding:0}[data-bspk=select] [data-placeholder] [data-inner]{min-height:auto;padding:0}[data-bspk=select] [data-placeholder] [data-item-label] [data-text]{color:var(--select-text-color)}[data-bspk=select] [data-icon]{display:flex;flex-direction:column;justify-content:center}[data-bspk=select] [data-icon] svg{transform:rotate(90deg);width:var(--select-icon-width)}[data-bspk=select] [data-bspk=list-item][data-selected]{background:var(--surface-brand-primary-highlight)}[data-bspk=select][data-size=small]{--select-height: var(--spacing-sizing-08);--select-font: var(--body-small);--select-clear-height: var(--spacing-sizing-05);--select-padding: var(--spacing-sizing-02);--select-icon-width: var(--spacing-sizing-05)}[data-bspk=select][data-size=large]{--select-height: var(--spacing-sizing-12);--select-font: var(--body-large);--select-clear-height: var(--spacing-sizing-06);--select-icon-width: var(--spacing-sizing-06)}[data-bspk=select]:disabled{--select-text-color: var(--foreground-neutral-disabled-on-surface);--select-border-color: var(--stroke-neutral-disabled-light);--select-background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=select]:disabled[aria-readonly]:not([data-empty]){--select-text-color: var(--foreground-neutral-on-surface)}[data-bspk=select]:not(:disabled):focus{--select-border-color: var(--stroke-brand-primary)}[data-bspk=select]:not(:disabled):hover{--select-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))}[data-bspk=select]:not(:disabled):active{--select-background: linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=select][data-invalid]{--select-border-color: var(--status-error)}[data-bspk=select][data-empty]{--select-text-color: var(--foreground-neutral-on-surface-variant-03)}`);;
-import { SvgChevronRight } from '@bspk/icons/ChevronRight';
-import { ListItem } from './ListItem';
-import { Menu } from './Menu';
-import { Portal } from './Portal';
-import { useCombobox } from './hooks/useCombobox';
-import { useId } from './hooks/useId';
-/**
- * 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, }) {
-    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 (_jsxs(_Fragment, { children: [_jsx("input", { defaultValue: selected, name: name, type: "hidden" }), _jsxs("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, children: [_jsx(ListItem, { "data-placeholder": "", label: selectLabel || placeholder, readOnly: true }), _jsx("span", { "data-icon": true, children: _jsx(SvgChevronRight, {}) })] }), _jsx(Portal, { children: _jsx(Menu, { "data-floating": true, isMulti: isMulti, itemCount: itemCount, items: options, onChange: (next, event) => {
-                        event?.preventDefault();
-                        if (!isMulti)
-                            closeMenu();
-                        onChange?.(next);
-                    }, renderListItem: renderListItem, selectAll: selectAll, selectedValues: selected, ...menuProps }) })] }));
-}
-Select.bspkName = 'Select';
-export { Select };
-//# sourceMappingURL=Select.js.map

package/dist/Select.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../src/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAiEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,SAAS,MAAM,CAAC,EACZ,OAAO,GAAG,EAAE,EACZ,KAAK,EAAE,QAAQ,EACf,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,WAAW,GAAG,WAAW,EACzB,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,CAAC,EACb,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,cAAc,EACd,KAAK,EAAE,SAAS,EAChB,SAAS,GACC;IACV,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,WAAW,CAAC;QACtD,SAAS,EAAE,QAAQ;QACnB,QAAQ;QACR,OAAO;QACP,QAAQ;QACR,YAAY;QACZ,aAAa,EAAE,CAAC;KACnB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,OAAO;QACvB,CAAC,CAAC,GAAG,QAAQ,EAAE,MAAM,IAAI,CAAC,UAAU,QAAQ,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,WAAW;QAChF,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC;IAE5D,OAAO,CACH,8BACI,gBAAO,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,QAAQ,GAAG,EAC3D,gCACgB,SAAS,eACX,QAAQ,gBACN,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,kBAC1B,OAAO,IAAI,SAAS,eACvB,IAAI,EACf,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,SAAS,KACZ,WAAW,aAEf,KAAC,QAAQ,wBAAkB,EAAE,EAAC,KAAK,EAAE,WAAW,IAAI,WAAW,EAAE,QAAQ,SAAG,EAC5E,4CACI,KAAC,eAAe,KAAG,GAChB,IACF,EACT,KAAC,MAAM,cACH,KAAC,IAAI,2BAED,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;wBACtB,KAAK,EAAE,cAAc,EAAE,CAAC;wBACxB,IAAI,CAAC,OAAO;4BAAE,SAAS,EAAE,CAAC;wBAC1B,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;oBACrB,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,QAAQ,KACpB,SAAS,GACf,GACG,IACV,CACN,CAAC;AACN,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}