@bspk/ui 1.1.33 → 1.2.0

package/src/components/ChipFilter/ChipFilter.tsx

@@ -41,9 +41,16 @@ export type ChipFilterProps = Pick<ChipUtilityProps, 'disabled' | 'label' | 'lea
  *     }
  *
  * @name ChipFilter
- * @phase DesignReview
+ * @phase UXReview
  */
-function ChipFilter({ disabled, label, leadingIcon, onClick, trailingIcon, trailingBadgeCount }: ChipFilterProps) {
+export function ChipFilter({
+    disabled,
+    label,
+    leadingIcon,
+    onClick,
+    trailingIcon,
+    trailingBadgeCount,
+}: ChipFilterProps) {
     const trailingIconComponent =
         trailingIcon === 'SvgChevronRight' ? (
             <SvgChevronRight />
@@ -54,6 +61,7 @@ function ChipFilter({ disabled, label, leadingIcon, onClick, trailingIcon, trail
         ) : undefined;
     return (
         <ChipUtility
+            data-bspk="chip-filter"
             disabled={disabled}
             label={label}
             leadingIcon={leadingIcon}
@@ -64,8 +72,4 @@ function ChipFilter({ disabled, label, leadingIcon, onClick, trailingIcon, trail
     );
 }
 
-ChipFilter.bspkName = 'ChipFilter';
-
-export { ChipFilter };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipFilter/ChipFilterExample.tsx

@@ -1,7 +1,6 @@
+import { ChipFilterProps } from '.';
 import { ComponentExampleFn } from '-/utils/demo';
 
-import { ChipFilterProps } from './ChipFilter';
-
 export const ChipFilterExample: ComponentExampleFn<ChipFilterProps> = ({ action }) => ({
     containerStyle: { width: '100%' },
     render: ({ props, Component }) => {

package/src/components/ChipGroup/ChipGroup.tsx

@@ -2,7 +2,7 @@ import './chip-group.scss';
 
 import { ReactNode } from 'react';
 
-import { ChipUtilityProps } from '../ChipUtility';
+import { ChipUtilityProps } from '-/components/ChipUtility';
 
 export type ChipGroupItem = Pick<
     ChipUtilityProps,
@@ -20,7 +20,7 @@ export type ChipGroupProps = {
     children?: ReactNode;
 };
 /**
- * Component description.
+ * A group of chips that can be used to display a set of related items or actions.
  *
  * @example
  *     import { ChipGroup } from '@bspk/ui/ChipGroup';
@@ -36,9 +36,9 @@ export type ChipGroupProps = {
  *     }
  *
  * @name ChipGroup
- * @phase WorkInProgress
+ * @phase UXReview
  */
-function ChipGroup({ children, wrap = true }: ChipGroupProps) {
+export function ChipGroup({ children, wrap = true }: ChipGroupProps) {
     return (
         <div data-bspk="chip-group" data-wrap={wrap || undefined}>
             {children}
@@ -46,8 +46,4 @@ function ChipGroup({ children, wrap = true }: ChipGroupProps) {
     );
 }
 
-ChipGroup.bspkName = 'ChipGroup';
-
-export { ChipGroup };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipGroup/ChipGroupExample.tsx

@@ -7,15 +7,14 @@ import { SvgLightbulb } from '@bspk/icons/Lightbulb';
 import { SvgOpportunities } from '@bspk/icons/Opportunities';
 import { SvgSignLanguage } from '@bspk/icons/SignLanguage';
 
+import { ChipAssist } from '-/components/ChipAssist';
+import { ChipFilter } from '-/components/ChipFilter';
+import { ChipGroup, ChipGroupProps } from '-/components/ChipGroup';
+import { ChipInput } from '-/components/ChipInput';
+import { ChipSuggestion } from '-/components/ChipSuggestion';
+import { ChipUtility } from '-/components/ChipUtility';
 import { ComponentExampleFn } from '-/utils/demo';
 
-import { ChipAssist } from '../ChipAssist';
-import { ChipFilter } from '../ChipFilter';
-import { ChipGroup, ChipGroupProps } from '../ChipGroup';
-import { ChipInput } from '../ChipInput';
-import { ChipSuggestion } from '../ChipSuggestion';
-import { ChipUtility } from '../ChipUtility';
-
 export const ChipGroupExample: ComponentExampleFn<ChipGroupProps> = ({ action }) => ({
     presets: [
         { label: 'wrap', propState: { wrap: true } },

package/src/components/ChipInput/ChipInput.tsx

@@ -29,11 +29,12 @@ export type ChipInputProps = Pick<ChipUtilityProps, 'disabled' | 'label' | 'lead
  *     }
  *
  * @name ChipInput
- * @phase DesignReview
+ * @phase UXReview
  */
-function ChipInput({ disabled, label, leadingIcon, onClick, removable = true }: ChipInputProps) {
+export function ChipInput({ disabled, label, leadingIcon, onClick, removable = true }: ChipInputProps) {
     return (
         <ChipUtility
+            data-bspk="chip-input"
             disabled={disabled}
             label={label}
             leadingIcon={leadingIcon}
@@ -43,8 +44,4 @@ function ChipInput({ disabled, label, leadingIcon, onClick, removable = true }:
     );
 }
 
-ChipInput.bspkName = 'ChipInput';
-
-export { ChipInput };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipInput/ChipInputExample.tsx

@@ -1,6 +1,5 @@
-import { ComponentExampleFn } from '-/utils/demo';
-
 import { ChipInputProps } from '.';
+import { ComponentExampleFn } from '-/utils/demo';
 
 export const ChipInputExample: ComponentExampleFn<ChipInputProps> = ({ action }) => ({
     containerStyle: { width: '100%' },

package/src/components/ChipSuggestion/ChipSuggestion.tsx

@@ -13,14 +13,10 @@ export type ChipSuggestionProps = Pick<ChipUtilityProps, 'disabled' | 'label' |
  *     }
  *
  * @name ChipSuggestion
- * @phase DesignReview
+ * @phase UXReview
  */
-function ChipSuggestion({ disabled, label, onClick }: ChipSuggestionProps) {
-    return <ChipUtility disabled={disabled} label={label} onClick={onClick} />;
+export function ChipSuggestion({ disabled, label, onClick }: ChipSuggestionProps) {
+    return <ChipUtility data-bspk="chip-suggestion" disabled={disabled} label={label} onClick={onClick} />;
 }
 
-ChipSuggestion.bspkName = 'ChipSuggestion';
-
-export { ChipSuggestion };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipSuggestion/ChipSuggestionExample.tsx

@@ -1,6 +1,5 @@
-import { ComponentExampleFn } from '-/utils/demo';
-
 import { ChipSuggestionProps } from '.';
+import { ComponentExampleFn } from '-/utils/demo';
 
 export const ChipSuggestionExample: ComponentExampleFn<ChipSuggestionProps> = ({ action }) => ({
     containerStyle: { width: '100%' },

package/src/components/ChipUtility/ChipUtility.tsx

@@ -1,11 +1,10 @@
 import { ReactNode, isValidElement } from 'react';
 
 import { Badge, BadgeProps } from '-/components/Badge';
-import { isValidIcon } from '-/utils/children';
 
 import './chip-utility.scss';
 
-export type BadgeItem = Pick<BadgeProps, 'count' | 'size' | 'surfaceBorder' | 'variant'>;
+export type BadgeItem = Pick<BadgeProps, 'count' | 'size' | 'surfaceBorder'>;
 
 export type ChipUtilityProps = {
     /**
@@ -24,7 +23,7 @@ export type ChipUtilityProps = {
      * The label of the chip.
      *
      * @example
-     *     'Hello I am Chip';
+     *     Hello I am Chip
      *
      * @required
      */
@@ -77,7 +76,7 @@ export type ChipUtilityProps = {
  * @name ChipUtility
  * @phase Utility
  */
-function ChipUtility({
+export function ChipUtility({
     flat = false,
     disabled = false,
     label,
@@ -89,21 +88,22 @@ function ChipUtility({
 }: ChipUtilityProps) {
     return (
         <button
-            data-bspk="chip-utility"
+            data-bspk-utility="chip-utility"
             data-disabled={disabled || undefined}
             data-flat={flat || undefined}
             data-selected={selected || undefined}
             data-touch-target-parent
+            disabled={disabled}
             onClick={disabled ? undefined : onClick}
         >
             <>
-                {isValidIcon(leadingIcon) && isValidElement(leadingIcon) && (
+                {isValidElement(leadingIcon) && (
                     <span aria-hidden="true" data-chip-icon>
                         {leadingIcon}
                     </span>
                 )}
                 <span>{label}</span>
-                {isValidIcon(trailingIcon) && isValidElement(trailingIcon) && (
+                {isValidElement(trailingIcon) && (
                     <span aria-hidden="true" data-chip-icon>
                         {trailingIcon}
                     </span>
@@ -113,7 +113,6 @@ function ChipUtility({
                         count={trailingBadge.count}
                         size={trailingBadge.size}
                         surfaceBorder={trailingBadge.surfaceBorder}
-                        variant={trailingBadge.variant}
                     />
                 )}
             </>
@@ -122,8 +121,4 @@ function ChipUtility({
     );
 }
 
-ChipUtility.bspkName = 'ChipUtility';
-
-export { ChipUtility };
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/ChipUtility/ChipUtilityExample.tsx

@@ -1,8 +1,8 @@
-import { ComponentExample } from '-/utils/demo';
-
 import { ChipUtilityProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 
 export const ChipUtilityExample: ComponentExample<ChipUtilityProps> = {
+    render: ({ props, Component }) => <Component {...props} />,
     presets: [
         {
             label: 'Basic',

package/src/components/ChipUtility/chip-utility.scss

@@ -1,4 +1,4 @@
-[data-bspk='chip-utility'] {
+[data-bspk-utility='chip-utility'] {
     flex-direction: row;
     gap: var(--spacing-sizing-02);
     height: var(--spacing-sizing-08);
@@ -7,7 +7,7 @@
     color: var(--foreground-neutral-on-surface-variant-01);
     background-color: var(--surface-neutral-t1-base);
     border: 1px solid var(--stroke-neutral-low);
-    border-radius: var(--radius-small);
+    border-radius: var(--radius-sm);
     padding: 0 var(--spacing-sizing-03);
 
     [data-touch-target] {

package/src/components/Combobox/Combobox.tsx

@@ -1,13 +1,12 @@
-/* eslint-disable react/no-multi-comp */ import { ReactNode, useMemo } from 'react';
-
-import { CommonProps, ElementProps } from '-';
-import { Checkbox } from '-/components/Checkbox';
-import { ListItem, ListItemProps } from '-/components/ListItem';
+import { ReactNode, useMemo } from 'react';
+import { ListItems } from './ListItems';
+import { ListItemProps } from '-/components/ListItem';
 import { Menu, MenuProps } from '-/components/Menu';
 import { Modal, ModalProps } from '-/components/Modal';
 import { ToggleProps, useCombobox, UseComboboxProps } from '-/hooks/useCombobox';
 import { useId } from '-/hooks/useId';
 import { useUIContext } from '-/hooks/useUIContext';
+import { CommonProps, ElementProps } from '-/types/common';
 import { cssWithVars } from '-/utils/cwv';
 
 const DEFAULT = {
@@ -26,10 +25,10 @@ export type ComboboxItemProps = CommonProps<'disabled'> &
         value: string;
     };
 
-export type ComboboxProps<Item extends ComboboxItemProps = ComboboxItemProps> = CommonProps<'data-bspk-owner' | 'id'> &
+export type ComboboxProps<Item extends ComboboxItemProps = ComboboxItemProps> = CommonProps<'id' | 'owner'> &
     Pick<MenuProps, 'itemDisplayCount'> &
-    Pick<ModalProps, 'description' | 'header'> &
-    Pick<UseComboboxProps, 'disabled' | 'errorMessage' | 'invalid' | 'offsetOptions' | 'readOnly' | 'refWidth'> & {
+    Pick<ModalProps, 'description'> &
+    Pick<UseComboboxProps, 'disabled' | 'offsetOptions' | 'readOnly' | 'refWidth'> & {
         /**
          * Content to display in the listbox.
          *
@@ -102,7 +101,7 @@ export type ComboboxProps<Item extends ComboboxItemProps = ComboboxItemProps> =
  * @name Combobox
  * @phase Utility
  */
-function Combobox<Item extends ComboboxItemProps>({
+export function Combobox<Item extends ComboboxItemProps>({
     itemDisplayCount,
     items = [],
     onChange,
@@ -112,13 +111,12 @@ function Combobox<Item extends ComboboxItemProps>({
     isMulti,
     selectAll: selectAllProp,
     children,
-    invalid,
     readOnly,
-    errorMessage,
     refWidth,
     offsetOptions = 4,
-    header,
     description,
+    owner,
+    label,
     ...props
 }: ElementProps<ComboboxProps<Item>, 'div'>) {
     const menuId = useId(idProp);
@@ -129,9 +127,7 @@ function Combobox<Item extends ComboboxItemProps>({
         refWidth,
         placement: 'bottom-start',
         disabled,
-        invalid,
         readOnly,
-        errorMessage,
         offsetOptions,
     });
 
@@ -154,26 +150,33 @@ function Combobox<Item extends ComboboxItemProps>({
             {children({ toggleProps, setReference: elements.setReference })}
             {isMobile ? (
                 <Modal
-                    data-bspk-owner={props['data-bspk-owner'] || undefined}
                     description={description}
-                    header={header}
+                    header={label}
                     onClose={closeMenu}
                     open={isOpen}
+                    owner={owner || undefined}
                 >
-                    <ListItems
-                        activeIndex={activeIndex}
-                        allSelected={allSelected}
-                        data-testid="listbox-items"
-                        isMulti={isMulti}
-                        items={items}
-                        menuId={menuId}
-                        onChange={(next) => {
-                            onChange(next);
-                            if (!isMulti) closeMenu();
-                        }}
-                        selectAll={selectAll}
-                        selectedValues={selectedValues}
-                    />
+                    <div
+                        aria-multiselectable={isMulti || undefined}
+                        id={menuId}
+                        role="listbox"
+                        style={{ display: 'contents' }}
+                    >
+                        <ListItems
+                            activeIndex={activeIndex}
+                            allSelected={allSelected}
+                            data-testid="listbox-items"
+                            isMulti={isMulti}
+                            items={items}
+                            menuId={menuId}
+                            onChange={(next) => {
+                                onChange(next);
+                                if (!isMulti) closeMenu();
+                            }}
+                            selectAll={selectAll}
+                            selectedValues={selectedValues}
+                        />
+                    </div>
                 </Modal>
             ) : (
                 <Menu
@@ -215,100 +218,7 @@ function Combobox<Item extends ComboboxItemProps>({
     );
 }
 
-Combobox.bspkName = 'Combobox';
-
-export { Combobox };
-
 // ListItems component to render the items in the listbox or modal.
 // This is a separate component to keep the Combobox component clean and focused on its main functionality
-function ListItems({
-    isMulti = false,
-    items = [],
-    activeIndex,
-    selectedValues = [],
-    onChange,
-    selectAll = false,
-    menuId = '',
-    allSelected = false,
-}: {
-    isMulti?: boolean;
-    items?: ComboboxItemProps[];
-    activeIndex?: number;
-    selectedValues?: string[];
-    onChange?: (nextSelectedValues: string[], event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    selectAll?: string | false;
-    menuId?: string;
-    allSelected?: boolean;
-}) {
-    const multiSelectValue = (selected: boolean, itemValue: string) => {
-        return selected ? selectedValues.filter((value) => value !== itemValue) : [...selectedValues, itemValue];
-    };
-
-    return (
-        <>
-            {isMulti && selectAll && (
-                <ListItem
-                    data-selected={allSelected || undefined}
-                    key="select-all"
-                    label={selectAll}
-                    onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-                        onChange?.(allSelected ? [] : items.map((item) => item.value), event);
-                    }}
-                    role="option"
-                    tabIndex={-1}
-                    trailing={
-                        <Checkbox
-                            aria-label={selectAll}
-                            checked={!!allSelected}
-                            indeterminate={!allSelected && selectedValues.length > 0}
-                            name=""
-                            onChange={(checked) => {
-                                onChange?.(checked ? items.map((item) => item.value) : []);
-                            }}
-                            value=""
-                        />
-                    }
-                />
-            )}
-            {items.map((item, index) => {
-                const selected = Boolean(Array.isArray(selectedValues) && selectedValues.includes(item.value));
-                return (
-                    <ListItem
-                        {...item}
-                        active={activeIndex === index || undefined}
-                        aria-disabled={item.disabled || undefined}
-                        aria-posinset={index + 1}
-                        as="button"
-                        disabled={item.disabled || undefined}
-                        id={`${menuId}-item-${index}`}
-                        key={`${menuId}-item-${index}`}
-                        label={item.label}
-                        onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-                            onChange?.(isMulti ? multiSelectValue(selected, item.value) : [item.value], event);
-                        }}
-                        role="option"
-                        selected={selected || undefined}
-                        tabIndex={-1}
-                        trailing={
-                            isMulti ? (
-                                <Checkbox
-                                    aria-label={item.label}
-                                    checked={selected}
-                                    name={item.value}
-                                    onChange={(checked) => {
-                                        onChange?.(multiSelectValue(checked, item.value));
-                                    }}
-                                    value={item.value}
-                                />
-                            ) : (
-                                item.trailing || undefined
-                            )
-                        }
-                    />
-                );
-            })}
-        </>
-    );
-}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Combobox/ListItems.tsx

@@ -0,0 +1,107 @@
+import { Checkbox } from '-/components/Checkbox';
+import { ListItem } from '-/components/ListItem';
+
+type Item = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    trailing?: React.ReactNode;
+};
+
+export type ListItemsProps<I extends Item> = {
+    /** Whether the listbox allows multiple selections. */
+    isMulti?: boolean;
+    /** The items to display in the listbox. */
+    items?: I[];
+    /** The index of the currently active item. */
+    activeIndex?: number;
+    /** The values that are currently selected. */
+    selectedValues?: string[];
+    /** Callback function when the selected values change. */
+    onChange?: (nextSelectedValues: string[], event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** The label for the "Select All" option. */
+    selectAll?: string | false;
+    /** The ID of the menu for accessibility purposes. */
+    menuId?: string;
+    /** Whether all items are selected in a multi-select scenario. */
+    allSelected?: boolean;
+};
+
+export function ListItems<I extends Item>({
+    isMulti = false,
+    items = [],
+    activeIndex,
+    selectedValues = [],
+    onChange,
+    selectAll = false,
+    menuId = '',
+    allSelected = false,
+}: ListItemsProps<I>) {
+    const multiSelectValue = (selected: boolean, itemValue: string) => {
+        return selected ? selectedValues.filter((value) => value !== itemValue) : [...selectedValues, itemValue];
+    };
+
+    return (
+        <>
+            {isMulti && selectAll && (
+                <ListItem
+                    as="label"
+                    data-selected={allSelected || undefined}
+                    key="select-all"
+                    label={selectAll}
+                    onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+                        onChange?.(allSelected ? [] : items.map((item) => item.value), event);
+                    }}
+                    tabIndex={-1}
+                    trailing={
+                        <Checkbox
+                            aria-label={selectAll}
+                            checked={!!allSelected}
+                            indeterminate={!allSelected && selectedValues.length > 0}
+                            name=""
+                            onChange={(checked) => {
+                                onChange?.(checked ? items.map((item) => item.value) : []);
+                            }}
+                            value=""
+                        />
+                    }
+                />
+            )}
+            {items.map((item, index) => {
+                const selected = Boolean(Array.isArray(selectedValues) && selectedValues.includes(item.value));
+                return (
+                    <ListItem
+                        {...item}
+                        active={activeIndex === index || undefined}
+                        aria-disabled={item.disabled || undefined}
+                        aria-selected={selected || undefined}
+                        as={isMulti ? 'label' : 'button'}
+                        disabled={item.disabled || undefined}
+                        id={`${menuId}-item-${index}`}
+                        key={`${menuId}-item-${index}`}
+                        label={item.label}
+                        onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                            onChange?.(isMulti ? multiSelectValue(selected, item.value) : [item.value], event);
+                        }}
+                        tabIndex={-1}
+                        trailing={
+                            isMulti ? (
+                                <Checkbox
+                                    aria-label={item.label}
+                                    checked={selected}
+                                    name={item.value}
+                                    onChange={(checked) => {
+                                        onChange?.(multiSelectValue(checked, item.value));
+                                    }}
+                                    value={item.value}
+                                />
+                            ) : (
+                                item.trailing || undefined
+                            )
+                        }
+                    />
+                );
+            })}
+        </>
+    );
+}