@bspk/ui 1.3.2 → 1.3.4

package/dist/components/RadioGroupField/RadioGroupField.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field, FieldDescription, FieldError, FieldLabel } from '../Field';
+import { RadioGroup } from '../RadioGroup';
+/**
+ * A field wrapper for the RadioGroup component.
+ *
+ * This component takes properties from the FormField and RadioGroup components.
+ *
+ * @name RadioGroupField
+ * @phase UXReview
+ *
+ * @generated
+ */
+export function RadioGroupField({ label, helperText, labelTrailing, errorMessage, ...controlProps }) {
+    return (_jsxs(Field, { as: "fieldset", children: [_jsx(FieldLabel, { as: "legend", labelTrailing: labelTrailing, children: label }), _jsx(RadioGroup, { ...controlProps }), !errorMessage && helperText && _jsx(FieldDescription, { children: helperText }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
+}
+//# sourceMappingURL=RadioGroupField.js.map

package/dist/components/RadioGroupField/RadioGroupField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupField.js","sourceRoot":"","sources":["../../../src/components/RadioGroupField/RadioGroupField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErF,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAItE;;;;;;;;;GASG;AACH,MAAM,UAAU,eAAe,CAAC,EAC5B,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,GAAG,YAAY,EACI;IACnB,OAAO,CACH,MAAC,KAAK,IAAC,EAAE,EAAC,UAAU,aAChB,KAAC,UAAU,IAAC,EAAE,EAAC,QAAQ,EAAC,aAAa,EAAE,aAAa,YAC/C,KAAK,GACG,EACb,KAAC,UAAU,OAAK,YAAY,GAAI,EAC/B,CAAC,YAAY,IAAI,UAAU,IAAI,KAAC,gBAAgB,cAAE,UAAU,GAAoB,EAChF,YAAY,IAAI,KAAC,UAAU,cAAE,YAAY,GAAc,IACpD,CACX,CAAC;AACN,CAAC"}

package/dist/components/RadioGroupField/index.d.ts

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

package/dist/components/RadioGroupField/index.js

@@ -0,0 +1,2 @@
+export * from './RadioGroupField';
+//# sourceMappingURL=index.js.map

package/dist/components/RadioGroupField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/RadioGroupField/index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/components/SearchBar/SearchBar.d.ts

@@ -1,12 +1,15 @@
 import './search-bar.scss';
-import { ListItemMenuProps, MenuListItem } from '-/components/ListItemMenu';
-import { TextInputProps } from '-/components/TextInput';
-export type SearchOption = MenuListItem & {
-    value: string;
-};
-export type SearchBarProps = Pick<ListItemMenuProps, 'scrollLimit'> & Pick<TextInputProps, 'aria-label' | 'disabled' | 'id' | 'inputRef' | 'name' | 'size'> & {
-    /** The current value of the search bar. */
-    value?: string;
+import { InputProps } from '-/components/Input';
+import { ListItemProps } from '-/components/ListItem';
+import { FieldControlProps } from '-/types/common';
+import { ScrollListItemsStyleProps } from '-/utils/scrollListItemsStyle';
+/**
+ * An option in a SearchBar component.
+ *
+ * Essentially the props for a ListItem.
+ */
+export type SearchBarOption = Pick<ListItemProps, 'label' | 'leading' | 'trailing'>;
+export type SearchBarProps<O extends SearchBarOption = SearchBarOption> = FieldControlProps<string, O> & Pick<InputProps, 'inputRef' | 'size'> & ScrollListItemsStyleProps & {
     /**
      * The placeholder of the field.
      *
@@ -15,34 +18,26 @@ export type SearchBarProps = Pick<ListItemMenuProps, 'scrollLimit'> & Pick<TextI
      * @required
      */
     placeholder: string;
-    /**
-     * Handler for state updates.
-     *
-     * @type (value: String) => void
-     * @required
-     */
-    onChange: (value: string) => void;
-    onSelect: (item?: MenuListItem) => 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' },
+     *         { label: 'Apple Pie' },
+     *         { label: 'Banana Split' },
+     *         { label: 'Cherry Tart' },
+     *         { label: 'Dragonfruit Sorbet' },
+     *         { label: 'Elderberry Jam' },
+     *         { label: 'Fig Newton' },
+     *         { label: 'Grape Soda' },
+     *         { label: 'Honeydew Smoothie' },
+     *         { label: 'Ice Cream Sandwich' },
+     *         { label: 'Jackfruit Pudding' },
      *     ];
      *
-     * @type Array<SearchOption>
+     * @type Array<SearchBarOption>
      */
-    items?: SearchOption[];
+    items?: O[];
     /**
      * Message to display when no results are found
      *
@@ -57,31 +52,28 @@ export type SearchBarProps = Pick<ListItemMenuProps, 'scrollLimit'> & Pick<TextI
  *     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);
+ *     function Example() {
+ *         const [searchText, setSearchText] = useState('');
  *
  *         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' },
+ *                     { label: 'Apple Pie' },
+ *                     { label: 'Banana Split' },
+ *                     { label: 'Cherry Tart' },
+ *                     { label: 'Dragonfruit Sorbet' },
+ *                     { label: 'Elderberry Jam' },
+ *                     { label: 'Fig Newton' },
+ *                     { label: 'Grape Soda' },
+ *                     { label: 'Honeydew Smoothie' },
+ *                     { label: 'Ice Cream Sandwich' },
+ *                     { label: 'Jackfruit Pudding' },
  *                 ]}
- *                 name="Example name"
+ *                 name="example-name"
  *                 placeholder="Search"
  *                 value={searchText}
  *                 onChange={setSearchText}
- *                 onSelect={handleItemSelect}
  *             />
  *         );
  *     }
@@ -89,5 +81,5 @@ export type SearchBarProps = Pick<ListItemMenuProps, 'scrollLimit'> & Pick<TextI
  * @name SearchBar
  * @phase UXReview
  */
-export declare function SearchBar({ items: itemsProp, noResultsMessage, placeholder, 'aria-label': ariaLabel, value: idProp, inputRef, name, size, onSelect, value, onChange, disabled, scrollLimit, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchBar<O extends SearchBarOption>({ items: itemsProp, noResultsMessage, placeholder, id: idProp, inputRef, name, size, value, onChange, disabled, scrollLimit, }: SearchBarProps<O>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/SearchBar/SearchBar.js

@@ -1,12 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import './search-bar.css.js';
 import { SvgSearch } from '@bspk/icons/Search';
-import { useEffect, useRef, useState } from 'react';
-import { ListItemMenu } from '../ListItemMenu';
-import { TextInput } from '../TextInput';
+import { useEffect, useMemo, useState } from 'react';
+import { Input } from '../Input';
+import { ListItem } from '../ListItem';
+import { Menu } from '../Menu';
 import { Txt } from '../Txt';
+import { useArrowNavigation } from '../../hooks/useArrowNavigation';
+import { useFloating } from '../../hooks/useFloating';
 import { useId } from '../../hooks/useId';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { useUIContext } from '../../hooks/useUIContext';
+import { getElementById } from '../../utils/dom';
+import { handleKeyDown } from '../../utils/handleKeyDown';
+import { scrollListItemsStyle } from '../../utils/scrollListItemsStyle';
 import { useIds } from '../../utils/useIds';
 /**
  * An input field that allows customers to input search queries and retrieve results.
@@ -15,31 +22,28 @@ import { useIds } from '../../utils/useIds';
  *     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);
+ *     function Example() {
+ *         const [searchText, setSearchText] = useState('');
  *
  *         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' },
+ *                     { label: 'Apple Pie' },
+ *                     { label: 'Banana Split' },
+ *                     { label: 'Cherry Tart' },
+ *                     { label: 'Dragonfruit Sorbet' },
+ *                     { label: 'Elderberry Jam' },
+ *                     { label: 'Fig Newton' },
+ *                     { label: 'Grape Soda' },
+ *                     { label: 'Honeydew Smoothie' },
+ *                     { label: 'Ice Cream Sandwich' },
+ *                     { label: 'Jackfruit Pudding' },
  *                 ]}
- *                 name="Example name"
+ *                 name="example-name"
  *                 placeholder="Search"
  *                 value={searchText}
  *                 onChange={setSearchText}
- *                 onSelect={handleItemSelect}
  *             />
  *         );
  *     }
@@ -47,50 +51,97 @@ import { useIds } from '../../utils/useIds';
  * @name SearchBar
  * @phase UXReview
  */
-export function SearchBar({ items: itemsProp, noResultsMessage, placeholder = 'Search', 'aria-label': ariaLabel, value: idProp, inputRef, name, size = 'medium', onSelect, value, onChange, disabled = false, scrollLimit, }) {
+export function SearchBar({ items: itemsProp, noResultsMessage, placeholder = 'Search', id: idProp, inputRef, name, size = 'medium', value, onChange, disabled = false, scrollLimit, }) {
     const id = useId(idProp);
+    const menuId = `${id}-menu`;
     const items = useIds(`search-bar-${id}`, itemsProp || []);
-    const inputElementRef = useRef(null);
+    const [hasFocus, setHasFocus] = useState(false);
+    const filteredItems = useMemo(() => {
+        const valueStr = value?.toString().trim().toLowerCase() || '';
+        return items.filter((item) => !valueStr || item.label.toLowerCase().includes(valueStr));
+    }, [items, value]);
     const { sendAriaLiveMessage } = useUIContext();
     useEffect(() => {
         if (!items.length)
             sendAriaLiveMessage('No results found', 'assertive');
     }, [items.length, sendAriaLiveMessage, value]);
-    const [textValue, setTextValue] = useState(value || '');
+    const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation({
+        ids: filteredItems.map((i) => i.id),
+    });
+    const closeMenu = () => setActiveElementId(null);
+    const open = Boolean(activeElementId);
+    const { elements, floatingStyles } = useFloating({
+        hide: !open,
+        offsetOptions: 4,
+        refWidth: true,
+    });
+    useOutsideClick({
+        elements: [elements.floating, elements.reference],
+        callback: () => {
+            setHasFocus(false);
+            closeMenu();
+        },
+        disabled: !open,
+        handleTabs: true,
+    });
+    const spaceEnter = () => {
+        if (!open) {
+            elements.reference?.click();
+            return;
+        }
+        if (activeElementId)
+            getElementById(activeElementId)?.click();
+    };
     useEffect(() => {
-        setTextValue(items.find((item) => item.value === value)?.label || '');
-    }, [items, value]);
-    return (_jsx(_Fragment, { children: _jsx("div", { "data-bspk": "search-bar", children: _jsx(ListItemMenu, { arrowKeyNavigationCallback: (params) => {
-                    // maintain default behavior for arrow keys left/right
-                    return params.key !== 'ArrowLeft' && params.key !== 'ArrowRight';
-                }, disabled: disabled, itemOnClick: ({ currentId, setShow }) => {
-                    const item = items.find((i) => i.id === currentId);
-                    onSelect(item);
-                    onChange(item.value);
-                    setTextValue(item.label);
-                    setShow(false);
-                }, items: items.map((item) => {
-                    return {
-                        ...item,
-                        'aria-selected': item.value === value,
-                    };
-                }), label: "Search bar", leading: !!value?.length &&
-                    !items?.length && (_jsxs("div", { "data-bspk": "no-items-found", children: [_jsx(Txt, { as: "div", variant: "heading-h5", children: "No results found" }), noResultsMessage && (_jsx(Txt, { as: "div", variant: "body-base", children: noResultsMessage }))] })), onClose: () => {
-                    setTimeout(() => {
-                        if (!inputElementRef.current)
-                            return;
-                        inputElementRef.current.focus();
-                        inputElementRef.current.setSelectionRange(0, inputElementRef.current.value.length);
-                    }, 100);
-                }, owner: "search-bar", role: "listbox", scrollLimit: scrollLimit, children: (toggleProps, { setRef, toggleMenu }) => (_jsx(TextInput, { "aria-label": (items.length === 0 ? 'No results found' : '') + ariaLabel, autoComplete: "off", containerRef: setRef, disabled: disabled, id: id, inputProps: { ...toggleProps }, inputRef: (node) => {
+        if (!hasFocus) {
+            setActiveElementId(null);
+            return;
+        }
+        if (activeElementId)
+            return;
+        // If we have focus but no active element, set the first item as active (if there is one)
+        if (filteredItems.length) {
+            setActiveElementId(value?.trim().length ? filteredItems[0].id : null);
+        }
+    }, [hasFocus, filteredItems, activeElementId, setActiveElementId, value]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { "data-bspk": "search-bar", children: _jsx(Input, { autoComplete: "off", containerRef: elements.setReference, disabled: disabled, id: id, inputProps: {
+                        'aria-controls': open ? menuId : undefined,
+                        'aria-expanded': open,
+                        'aria-haspopup': 'listbox',
+                        'aria-activedescendant': activeElementId || undefined,
+                        'aria-autocomplete': 'list',
+                        role: 'combobox',
+                        spellCheck: 'false',
+                    }, inputRef: (node) => {
                         if (!node)
                             return;
                         inputRef?.(node);
-                        inputElementRef.current = node;
-                    }, leading: _jsx(SvgSearch, {}), name: name, onChange: (str) => {
-                        setTextValue(str);
-                        if (str.length)
-                            toggleMenu(true);
-                    }, owner: "search-bar", placeholder: placeholder, size: size, value: textValue })) }) }) }));
+                    }, leading: _jsx(SvgSearch, {}), name: name, onChange: (str) => onChange(str), onFocus: () => setHasFocus(true), onKeyDown: handleKeyDown({
+                        ...arrowKeyCallbacks,
+                        ArrowDown: (event) => {
+                            if (!open)
+                                spaceEnter();
+                            arrowKeyCallbacks.ArrowDown?.(event);
+                        },
+                        Space: spaceEnter,
+                        Enter: spaceEnter,
+                        'Ctrl+Option+Space': spaceEnter,
+                    }, { preventDefault: true, stopPropagation: true }), owner: "search-bar", placeholder: placeholder, size: size, value: value }) }), _jsxs(Menu, { "aria-autocomplete": undefined, as: "div", id: menuId, innerRef: elements.setFloating, label: "Search results", onClickCapture: () => {
+                    // Prevent the menu from closing when clicking inside it
+                    // maintain focus on the select control
+                    elements.reference?.focus();
+                }, onFocus: () => {
+                    elements.reference?.focus();
+                }, owner: "select", role: "listbox", style: {
+                    ...(open ? scrollListItemsStyle(scrollLimit, items.length) : {}),
+                    ...floatingStyles,
+                }, tabIndex: -1, children: [!!value?.length && !items?.length && (_jsxs("div", { "data-bspk": "no-items-found", children: [_jsx(Txt, { as: "div", variant: "heading-h5", children: "No results found" }), noResultsMessage && (_jsx(Txt, { as: "div", variant: "body-base", children: noResultsMessage }))] })), filteredItems.map((item) => {
+                        const isActive = activeElementId === item.id;
+                        const isSelected = value == item.label;
+                        return (_jsx(ListItem, { ...item, active: isActive || undefined, "aria-label": undefined, "aria-selected": isSelected, as: "li", onClick: () => {
+                                onChange(item.label, item);
+                                closeMenu();
+                            }, owner: "select", role: "option", tabIndex: -1, value: undefined }, item.id));
+                    })] })] }));
 }
 //# sourceMappingURL=SearchBar.js.map

package/dist/components/SearchBar/SearchBar.js.map

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

package/dist/components/SearchBar/SearchBarExample.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { randomString } from '../../utils/random';
 export const SearchBarExample = {
     render: ({ props, Component }) => {
-        return _jsx(Component, { ...props });
+        return _jsx(Component, { ...props, id: `search-bar-${randomString(8)}` });
     },
 };
 //# sourceMappingURL=SearchBarExample.js.map

package/dist/components/SearchBar/SearchBarExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBarExample.js","sourceRoot":"","sources":["../../../src/components/SearchBar/SearchBarExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,gBAAgB,GAAqC;IAC9D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC;IACpC,CAAC;CACJ,CAAC"}
+{"version":3,"file":"SearchBarExample.js","sourceRoot":"","sources":["../../../src/components/SearchBar/SearchBarExample.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,gBAAgB,GAAqC;IAC9D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,KAAC,SAAS,OAAK,KAAK,EAAE,EAAE,EAAE,cAAc,YAAY,CAAC,CAAC,CAAC,EAAE,GAAI,CAAC;IACzE,CAAC;CACJ,CAAC"}

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -10,7 +10,7 @@ export type SegmentedControlProps = TabListProps<SegmentedControlOption>;
  *     import { useState } from 'react';
  *     import { SegmentedControl } from '@bspk/ui/SegmentedControl';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [selectedOption, setSelectedOption] = useState<string>();
  *
  *         return (

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -8,7 +8,7 @@ import { TabList } from '../TabList';
  *     import { useState } from 'react';
  *     import { SegmentedControl } from '@bspk/ui/SegmentedControl';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [selectedOption, setSelectedOption] = useState<string>();
  *
  *         return (

package/dist/components/Select/Select.d.ts

@@ -1,20 +1,20 @@
 import './select.scss';
 import { KeyboardEvent, MouseEvent } from 'react';
 import { ListItemProps } from '-/components/ListItem';
-import { CommonProps, ElementProps, FormFieldControlProps } from '-/types/common';
+import { CommonProps, ElementProps, FieldControlProps } from '-/types/common';
 import { ScrollListItemsStyleProps } from '-/utils/scrollListItemsStyle';
 /**
  * An option in a Select component.
  *
- * Essentially the props of ListItemProps. Except for `value` which is required.
+ * Essentially the props of ListItemProps.
  */
-export type SelectOption = Omit<ListItemProps, 'id' | 'onClick' | 'subText' | 'value'> & {
+export type SelectOption = CommonProps<'disabled'> & Omit<ListItemProps, 'id' | 'onClick' | 'subText' | 'value'> & {
     value: string;
 };
 export type SelectItem = SelectOption & {
     id: string;
 };
-export type SelectProps = CommonProps<'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'> & FormFieldControlProps & ScrollListItemsStyleProps & {
+export type SelectProps = CommonProps<'size'> & FieldControlProps<string, KeyboardEvent | MouseEvent> & ScrollListItemsStyleProps & {
     /**
      * Array of options to display in the select
      *
@@ -36,23 +36,6 @@ export type SelectProps = CommonProps<'disabled' | 'id' | 'invalid' | 'name' | '
      * @required
      */
     options: SelectOption[];
-    /** Selected value */
-    value: string;
-    /**
-     * The function to call when the selected values change.
-     *
-     * @example
-     *     (value, event) => setState({ value });
-     *
-     * @required
-     */
-    onChange: (value: string, event?: KeyboardEvent | MouseEvent) => void;
-    /**
-     * The label for the select element, used for accessibility, and the dropdown modal header.
-     *
-     * @required
-     */
-    label: string;
     /**
      * Placeholder for the select
      *
@@ -63,29 +46,30 @@ export type SelectProps = CommonProps<'disabled' | 'id' | 'invalid' | 'name' | '
 /**
  * A field element that allows users to select one option from a list of available choices.
  *
+ * For a more complete example with field usage, see the SelectField component.
+ *
  * @example
  *     import { Select } from '@bspk/ui/Select';
  *
- *     export function Example() {
+ *     const OPTIONS = [
+ *         { id: '1', label: 'Option 1' },
+ *         { id: '2', label: 'Option 2' },
+ *         { id: '3', label: 'Option 3' },
+ *         { id: '4', label: 'Option 4' },
+ *         { id: '5', label: 'Option 5' },
+ *         { id: '6', label: 'Option 6' },
+ *     ];
+ *
+ *     function ExampleStandalone() {
  *         const [selected, setSelected] = React.useState<string[]>([]);
+ *
  *         return (
  *             <Select
- *                 label="Select an option"
+ *                 aria-label="Select an option"
  *                 itemCount={5}
  *                 name="example-select"
  *                 onChange={setSelected}
- *                 options={[
- *                     { id: '1', label: 'Option 1' },
- *                     { id: '2', label: 'Option 2' },
- *                     { id: '3', label: 'Option 3' },
- *                     { id: '4', label: 'Option 4' },
- *                     { id: '5', label: 'Option 5' },
- *                     { id: '6', label: 'Option 6' },
- *                     { id: '7', label: 'Option 7' },
- *                     { id: '8', label: 'Option 8' },
- *                     { id: '9', label: 'Option 9' },
- *                     { id: '10', label: 'Option 10' },
- *                 ]}
+ *                 options={OPTIONS}
  *                 placeholder="Select an option"
  *                 size="medium"
  *                 value={selected}
@@ -93,8 +77,29 @@ export type SelectProps = CommonProps<'disabled' | 'id' | 'invalid' | 'name' | '
  *         );
  *     }
  *
+ *     function ExampleWithField() {
+ *         const [selected, setSelected] = React.useState<string[]>([]);
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Select an option</FieldLabel>
+ *                 <Select
+ *                     itemCount={5}
+ *                     name="example-select"
+ *                     onChange={setSelected}
+ *                     options={OPTIONS}
+ *                     placeholder="Select an option"
+ *                     size="medium"
+ *                     value={selected}
+ *                 />
+ *                 <FieldDescription>
+ *                     The select allows you to choose one option from a list of options.
+ *                 </FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
  * @name Select
  * @phase UXReview
  */
-export declare function Select({ options: optionsProp, value, onChange, label, placeholder, size, disabled, id: idProp, invalid, readOnly, name, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-labelledby': ariaLabelledBy, scrollLimit, ...props }: ElementProps<SelectProps, 'button'>): import("react/jsx-runtime").JSX.Element;
+export declare function Select({ options: optionsProp, value, onChange, placeholder, size, disabled, id: idProp, invalid: invalidProp, readOnly, name, scrollLimit, required, 'aria-label': ariaLabel, ...elementProps }: ElementProps<SelectProps, 'button'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */