@bspk/ui 1.3.2 → 1.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.3.2",
+    "version": "1.3.4",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [
@@ -59,8 +59,8 @@
         "./Button/*": "./dist/components/Button/*.js",
         "./ButtonDock": "./dist/components/ButtonDock/index.js",
         "./ButtonDock/*": "./dist/components/ButtonDock/*.js",
-        "./CalendarPicker": "./dist/components/CalendarPicker/index.js",
-        "./CalendarPicker/*": "./dist/components/CalendarPicker/*.js",
+        "./Calendar": "./dist/components/Calendar/index.js",
+        "./Calendar/*": "./dist/components/Calendar/*.js",
         "./Card": "./dist/components/Card/index.js",
         "./Card/*": "./dist/components/Card/*.js",
         "./Carousel": "./dist/components/Carousel/index.js",
@@ -69,24 +69,18 @@
         "./Checkbox/*": "./dist/components/Checkbox/*.js",
         "./CheckboxGroup": "./dist/components/CheckboxGroup/index.js",
         "./CheckboxGroup/*": "./dist/components/CheckboxGroup/*.js",
+        "./CheckboxGroupField": "./dist/components/CheckboxGroupField/index.js",
+        "./CheckboxGroupField/*": "./dist/components/CheckboxGroupField/*.js",
         "./CheckboxOption": "./dist/components/CheckboxOption/index.js",
         "./CheckboxOption/*": "./dist/components/CheckboxOption/*.js",
-        "./ChipAssist": "./dist/components/ChipAssist/index.js",
-        "./ChipAssist/*": "./dist/components/ChipAssist/*.js",
-        "./ChipFilter": "./dist/components/ChipFilter/index.js",
-        "./ChipFilter/*": "./dist/components/ChipFilter/*.js",
+        "./Chip": "./dist/components/Chip/index.js",
+        "./Chip/*": "./dist/components/Chip/*.js",
         "./ChipGroup": "./dist/components/ChipGroup/index.js",
         "./ChipGroup/*": "./dist/components/ChipGroup/*.js",
-        "./ChipInput": "./dist/components/ChipInput/index.js",
-        "./ChipInput/*": "./dist/components/ChipInput/*.js",
-        "./ChipSuggestion": "./dist/components/ChipSuggestion/index.js",
-        "./ChipSuggestion/*": "./dist/components/ChipSuggestion/*.js",
-        "./ChipUtility": "./dist/components/ChipUtility/index.js",
-        "./ChipUtility/*": "./dist/components/ChipUtility/*.js",
-        "./DateField": "./dist/components/DateField/index.js",
-        "./DateField/*": "./dist/components/DateField/*.js",
-        "./DateInput": "./dist/components/DateInput/index.js",
-        "./DateInput/*": "./dist/components/DateInput/*.js",
+        "./DatePicker": "./dist/components/DatePicker/index.js",
+        "./DatePicker/*": "./dist/components/DatePicker/*.js",
+        "./DatePickerField": "./dist/components/DatePickerField/index.js",
+        "./DatePickerField/*": "./dist/components/DatePickerField/*.js",
         "./Dialog": "./dist/components/Dialog/index.js",
         "./Dialog/*": "./dist/components/Dialog/*.js",
         "./Divider": "./dist/components/Divider/index.js",
@@ -99,6 +93,8 @@
         "./ExamplePlaceholder/*": "./dist/components/ExamplePlaceholder/*.js",
         "./Fab": "./dist/components/Fab/index.js",
         "./Fab/*": "./dist/components/Fab/*.js",
+        "./Field": "./dist/components/Field/index.js",
+        "./Field/*": "./dist/components/Field/*.js",
         "./FileUpload": "./dist/components/FileUpload/index.js",
         "./FileUpload/*": "./dist/components/FileUpload/*.js",
         "./FileUploadItem": "./dist/components/FileUploadItem/index.js",
@@ -109,38 +105,40 @@
         "./Img/*": "./dist/components/Img/*.js",
         "./InlineAlert": "./dist/components/InlineAlert/index.js",
         "./InlineAlert/*": "./dist/components/InlineAlert/*.js",
+        "./Input": "./dist/components/Input/index.js",
+        "./Input/*": "./dist/components/Input/*.js",
+        "./InputField": "./dist/components/InputField/index.js",
+        "./InputField/*": "./dist/components/InputField/*.js",
+        "./InputNumber": "./dist/components/InputNumber/index.js",
+        "./InputNumber/*": "./dist/components/InputNumber/*.js",
+        "./InputNumberField": "./dist/components/InputNumberField/index.js",
+        "./InputNumberField/*": "./dist/components/InputNumberField/*.js",
+        "./InputPhone": "./dist/components/InputPhone/index.js",
+        "./InputPhone/*": "./dist/components/InputPhone/*.js",
+        "./InputPhoneField": "./dist/components/InputPhoneField/index.js",
+        "./InputPhoneField/*": "./dist/components/InputPhoneField/*.js",
         "./Layout": "./dist/components/Layout/index.js",
         "./Layout/*": "./dist/components/Layout/*.js",
         "./Link": "./dist/components/Link/index.js",
         "./Link/*": "./dist/components/Link/*.js",
         "./ListItem": "./dist/components/ListItem/index.js",
         "./ListItem/*": "./dist/components/ListItem/*.js",
-        "./ListItemMenu": "./dist/components/ListItemMenu/index.js",
-        "./ListItemMenu/*": "./dist/components/ListItemMenu/*.js",
         "./Menu": "./dist/components/Menu/index.js",
         "./Menu/*": "./dist/components/Menu/*.js",
         "./MenuButton": "./dist/components/MenuButton/index.js",
         "./MenuButton/*": "./dist/components/MenuButton/*.js",
         "./Modal": "./dist/components/Modal/index.js",
         "./Modal/*": "./dist/components/Modal/*.js",
-        "./NumberField": "./dist/components/NumberField/index.js",
-        "./NumberField/*": "./dist/components/NumberField/*.js",
-        "./NumberInput": "./dist/components/NumberInput/index.js",
-        "./NumberInput/*": "./dist/components/NumberInput/*.js",
         "./OTPInput": "./dist/components/OTPInput/index.js",
         "./OTPInput/*": "./dist/components/OTPInput/*.js",
         "./PageControl": "./dist/components/PageControl/index.js",
         "./PageControl/*": "./dist/components/PageControl/*.js",
         "./Pagination": "./dist/components/Pagination/index.js",
         "./Pagination/*": "./dist/components/Pagination/*.js",
+        "./Password": "./dist/components/Password/index.js",
+        "./Password/*": "./dist/components/Password/*.js",
         "./PasswordField": "./dist/components/PasswordField/index.js",
         "./PasswordField/*": "./dist/components/PasswordField/*.js",
-        "./PasswordInput": "./dist/components/PasswordInput/index.js",
-        "./PasswordInput/*": "./dist/components/PasswordInput/*.js",
-        "./PhoneNumberField": "./dist/components/PhoneNumberField/index.js",
-        "./PhoneNumberField/*": "./dist/components/PhoneNumberField/*.js",
-        "./PhoneNumberInput": "./dist/components/PhoneNumberInput/index.js",
-        "./PhoneNumberInput/*": "./dist/components/PhoneNumberInput/*.js",
         "./Popover": "./dist/components/Popover/index.js",
         "./Popover/*": "./dist/components/Popover/*.js",
         "./Portal": "./dist/components/Portal/index.js",
@@ -157,6 +155,8 @@
         "./Radio/*": "./dist/components/Radio/*.js",
         "./RadioGroup": "./dist/components/RadioGroup/index.js",
         "./RadioGroup/*": "./dist/components/RadioGroup/*.js",
+        "./RadioGroupField": "./dist/components/RadioGroupField/index.js",
+        "./RadioGroupField/*": "./dist/components/RadioGroupField/*.js",
         "./RadioOption": "./dist/components/RadioOption/index.js",
         "./RadioOption/*": "./dist/components/RadioOption/*.js",
         "./Rating": "./dist/components/Rating/index.js",
@@ -179,8 +179,6 @@
         "./Slider/*": "./dist/components/Slider/*.js",
         "./Snackbar": "./dist/components/Snackbar/index.js",
         "./Snackbar/*": "./dist/components/Snackbar/*.js",
-        "./SnackbarProvider": "./dist/components/SnackbarProvider/index.js",
-        "./SnackbarProvider/*": "./dist/components/SnackbarProvider/*.js",
         "./StylesProviderAnywhere": "./dist/components/StylesProviderAnywhere/index.js",
         "./StylesProviderAnywhere/*": "./dist/components/StylesProviderAnywhere/*.js",
         "./StylesProviderBetterHomesGardens": "./dist/components/StylesProviderBetterHomesGardens/index.js",
@@ -217,12 +215,10 @@
         "./Textarea/*": "./dist/components/Textarea/*.js",
         "./TextareaField": "./dist/components/TextareaField/index.js",
         "./TextareaField/*": "./dist/components/TextareaField/*.js",
-        "./TextField": "./dist/components/TextField/index.js",
-        "./TextField/*": "./dist/components/TextField/*.js",
-        "./TextInput": "./dist/components/TextInput/index.js",
-        "./TextInput/*": "./dist/components/TextInput/*.js",
-        "./TimeInput": "./dist/components/TimeInput/index.js",
-        "./TimeInput/*": "./dist/components/TimeInput/*.js",
+        "./TimePicker": "./dist/components/TimePicker/index.js",
+        "./TimePicker/*": "./dist/components/TimePicker/*.js",
+        "./TimePickerField": "./dist/components/TimePickerField/index.js",
+        "./TimePickerField/*": "./dist/components/TimePickerField/*.js",
         "./ToggleOption": "./dist/components/ToggleOption/index.js",
         "./ToggleOption/*": "./dist/components/ToggleOption/*.js",
         "./Tooltip": "./dist/components/Tooltip/index.js",
@@ -336,6 +332,10 @@
         {
             "title": "Sotheby's",
             "slug": "sothebys"
+        },
+        {
+            "title": "Example",
+            "slug": "example"
         }
     ]
 }

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -47,7 +47,7 @@ export type AvatarGroupProps = {
  * @example
  *     import { AvatarGroup } from '@bspk/ui/AvatarGroup';
  *
- *     export function Example() {
+ *     function Example() {
  *         return (
  *             <AvatarGroup
  *                 items={[

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,37 +1,14 @@
 import './breadcrumb.scss';
 import { SvgChevronRight } from '@bspk/icons/ChevronRight';
-import { SvgMoreHoriz } from '@bspk/icons/MoreHoriz';
-import { Button } from '-/components/Button';
+import { BreadcrumbDropdown, BreadcrumbItem } from './BreadcumbDropdown';
 import { Link } from '-/components/Link';
-import { ListItemMenu, ListItemMenuProps } from '-/components/ListItemMenu';
 import { Txt } from '-/components/Txt';
 import { useId } from '-/hooks/useId';
 import { CommonProps } from '-/types/common';
-import { useIds } from '-/utils/useIds';
-
-export type BreadcrumbItem = {
-    /**
-     * The label of the breadcrumb item.
-     *
-     * @example
-     *     Page 1
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * The href of the breadcrumb item.
-     *
-     * @example
-     *     https://bspk.anywhere.re
-     *
-     * @required
-     */
-    href: string;
-};
+import { ScrollListItemsStyleProps } from '-/utils/scrollListItemsStyle';
 
 export type BreadcrumbProps = CommonProps<'id'> &
-    Pick<ListItemMenuProps, 'scrollLimit'> & {
+    ScrollListItemsStyleProps & {
         /**
          * The array of breadcrumb items.
          *
@@ -86,11 +63,9 @@ export type BreadcrumbProps = CommonProps<'id'> &
  * @name Breadcrumb
  * @phase UXReview
  */
-export function Breadcrumb({ id: propId, items: itemsProp = [], scrollLimit }: BreadcrumbProps) {
+export function Breadcrumb({ id: propId, items = [], scrollLimit }: BreadcrumbProps) {
     const id = useId(propId);
 
-    const items = useIds(`breadcrumb-${id}`, itemsProp);
-
     if (items.length < 2) return null;
 
     return (
@@ -101,33 +76,7 @@ export function Breadcrumb({ id: propId, items: itemsProp = [], scrollLimit }: B
                     <SvgChevronRight aria-hidden />
                 </li>
                 {items.length > 5 ? (
-                    <li>
-                        <ListItemMenu
-                            hideWhenClosed
-                            itemOnClick={({ setShow }) => setShow(false)}
-                            items={items.slice(1, items.length - 1)}
-                            label="Expanded breadcrumb"
-                            owner="Breadcrumb"
-                            placement="bottom"
-                            role="menu"
-                            scrollLimit={scrollLimit}
-                            width="200px"
-                        >
-                            {(triggerProps, { setRef, itemCount }) => (
-                                <Button
-                                    {...triggerProps}
-                                    icon={<SvgMoreHoriz />}
-                                    iconOnly
-                                    innerRef={setRef}
-                                    label={`Access to ${itemCount} pages`}
-                                    onClick={triggerProps.onClick}
-                                    size="small"
-                                    variant="tertiary"
-                                />
-                            )}
-                        </ListItemMenu>
-                        <SvgChevronRight aria-hidden />
-                    </li>
+                    <BreadcrumbDropdown id={id} items={items.slice(1, items.length - 1)} scrollLimit={scrollLimit} />
                 ) : (
                     items.slice(1, items.length - 1).map((item, idx) => (
                         <li key={`Breadcrumb-${idx}`}>

package/src/components/Breadcrumb/BreadcumbDropdown.tsx

@@ -0,0 +1,135 @@
+import { SvgChevronRight } from '@bspk/icons/ChevronRight';
+import { SvgMoreHoriz } from '@bspk/icons/MoreHoriz';
+import { Button } from '-/components/Button';
+import { ListItem } from '-/components/ListItem';
+import { Menu } from '-/components/Menu';
+import { useArrowNavigation } from '-/hooks/useArrowNavigation';
+import { useFloating } from '-/hooks/useFloating';
+import { useOutsideClick } from '-/hooks/useOutsideClick';
+import { getElementById } from '-/utils/dom';
+import { handleKeyDown } from '-/utils/handleKeyDown';
+import { scrollListItemsStyle, ScrollListItemsStyleProps } from '-/utils/scrollListItemsStyle';
+import { useIds } from '-/utils/useIds';
+
+export type BreadcrumbItem = {
+    /**
+     * The label of the breadcrumb item.
+     *
+     * @example
+     *     Page 1
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * The href of the breadcrumb item.
+     *
+     * @example
+     *     https://bspk.anywhere.re
+     *
+     * @required
+     */
+    href: string;
+};
+
+type BreadcrumbDropdownProps = ScrollListItemsStyleProps & {
+    items: BreadcrumbItem[];
+    id: string;
+};
+
+export function BreadcrumbDropdown({ items: itemsProp, id, scrollLimit }: BreadcrumbDropdownProps) {
+    const menuId = `${id}-menu`;
+
+    const items = useIds(`breadcrumb-${id}`, itemsProp);
+
+    const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation({
+        ids: items.map((i) => i.id),
+    });
+
+    const closeMenu = () => setActiveElementId(null);
+    const open = Boolean(activeElementId);
+
+    const { elements, floatingStyles } = useFloating({
+        hide: !open,
+        offsetOptions: 4,
+        refWidth: false,
+    });
+
+    useOutsideClick({
+        elements: [elements.floating, elements.reference],
+        callback: () => closeMenu(),
+        disabled: !open,
+    });
+
+    const spaceEnter = () => {
+        if (!open) {
+            elements.reference?.click();
+            return;
+        }
+        if (activeElementId) getElementById(activeElementId)?.click();
+    };
+
+    return (
+        <li>
+            <Button
+                aria-activedescendant={open ? activeElementId || undefined : undefined}
+                aria-controls={open ? menuId : undefined}
+                aria-expanded={open}
+                aria-haspopup="listbox"
+                aria-owns={menuId}
+                icon={<SvgMoreHoriz />}
+                iconOnly
+                innerRef={elements.setReference}
+                label={`Access to ${items.length} pages`}
+                name={`${name}-country-code`}
+                onClick={(event) => {
+                    const nextOpen = !open;
+                    if (nextOpen) {
+                        setActiveElementId(items[0]?.id || null);
+                    } else {
+                        setActiveElementId(null);
+                    }
+                    event.preventDefault();
+                }}
+                onKeyDown={handleKeyDown(
+                    {
+                        ...arrowKeyCallbacks,
+                        ArrowDown: (event) => {
+                            if (!open) spaceEnter();
+                            arrowKeyCallbacks.ArrowDown?.(event);
+                        },
+                        Space: spaceEnter,
+                        Enter: spaceEnter,
+                        Escape: closeMenu,
+                        'Ctrl+Option+Space': spaceEnter,
+                    },
+                    { preventDefault: true, stopPropagation: true },
+                )}
+                role="combobox"
+                size="small"
+                variant="tertiary"
+            />
+            {open && (
+                <Menu
+                    id={menuId}
+                    innerRef={elements.setFloating}
+                    label="Expanded breadcrumb"
+                    owner="Breadcrumb"
+                    role="menu"
+                    style={{
+                        ...scrollListItemsStyle(scrollLimit, items.length),
+                        ...floatingStyles,
+                        width: 'fit-content',
+                        maxWidth: '300px',
+                        minWidth: '150px',
+                    }}
+                >
+                    {items.map((item) => (
+                        <ListItem key={item.id} {...item} active={activeElementId === item.id} tabIndex={-1} />
+                    ))}
+                </Menu>
+            )}
+            <SvgChevronRight aria-hidden />
+        </li>
+    );
+}

package/src/components/Button/Button.tsx

@@ -53,7 +53,11 @@ export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabl
      */
     variant?: ButtonVariant;
     /**
-     * The width of the button.
+     * Determines how the button uses horizontal space.
+     *
+     * If set to 'fill', options expand to fill the container's width.
+     *
+     * If set to 'hug', options only take up as much space as the content requires.
      *
      * @default hug
      */
@@ -111,6 +115,7 @@ export function Button<As extends ElementType = 'button'>(
         children,
         innerRef,
         owner,
+        role,
         ...containerProps
     } = props;
     const label = typeof children === 'string' ? children : labelProp || '';
@@ -152,6 +157,7 @@ export function Button<As extends ElementType = 'button'>(
                 containerProps.onMouseOver?.(e);
             }}
             ref={innerRef}
+            role={role || (As !== 'button' ? 'button' : undefined)}
         >
             {children && typeof children !== 'string' ? (
                 children

package/src/components/Button/button.scss

@@ -111,7 +111,7 @@
 
         background-color: var(--primary-background);
         color: var(--foreground-brand-on-primary);
-        border-radius: var(--radius-sm);
+        border-radius: var(--button-border-radius);
 
         &[disabled] {
             color: var(--foreground-neutral-disabled-on-surface);
@@ -147,13 +147,13 @@
     }
 
     &[data-variant='secondary'] {
-        border: solid 1px var(--stroke-neutral-base);
-        border-radius: var(--radius-sm);
+        border: solid var(--button-border-width) var(--stroke-neutral-base);
+        border-radius: var(--button-border-radius);
         color: var(--foreground-neutral-on-surface-variant-01);
 
         &[disabled] {
             color: var(--foreground-neutral-disabled-on-surface);
-            border: solid 1px var(--stroke-neutral-disabled-light);
+            border: solid var(--button-border-width) var(--stroke-neutral-disabled-light);
         }
 
         &:not([disabled]) {
@@ -176,7 +176,7 @@
         &[data-destructive] {
             background: transparent;
             color: var(--status-error);
-            border: solid 1px var(--status-error);
+            border: solid var(--button-border-width) var(--status-error);
         }
     }
 

package/src/components/Calendar/Calendar.rtl.test.tsx

@@ -0,0 +1,22 @@
+import { format } from 'date-fns';
+import { Calendar } from './Calendar';
+import { presets } from './CalendarExample';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+describe('Calendar (RTL)', () => {
+    presets.forEach((preset) => {
+        it(
+            `has no basic a11y issues - ${preset.label}`,
+            hasNoBasicA11yIssues(<Calendar {...preset.propState} onChange={() => {}} />),
+        );
+    });
+
+    it('renders', () => {
+        const { getByText } = render(<Calendar {...presets[0].propState} onChange={() => {}} />);
+
+        expect(getByText(format(presets[0].propState.value!, 'MMMM'))).toBeInTheDocument();
+    });
+});
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */