@bspk/ui 1.3.4 → 1.3.5

package/dist/hooks/useFloating.js.map

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

package/dist/styles/base.css

@@ -93,6 +93,10 @@
   padding: 0;
 }
 
+ol {
+  list-style-position: inside;
+}
+
 :root {
   --z-index-snackbar: 1200;
   --z-index-focus: 9999;

package/dist/styles/base.css.js

@@ -96,6 +96,10 @@ style.appendChild(document.createTextNode(`/**
   padding: 0;
 }
 
+ol {
+  list-style-position: inside;
+}
+
 :root {
   --z-index-snackbar: 1200;
   --z-index-focus: 9999;

package/dist/types/common.d.ts

@@ -5,12 +5,16 @@
  *
  * @bspk/ui/Txt".
  */
-import { JSXElementConstructor, ReactNode, ComponentPropsWithoutRef, AriaRole, ChangeEvent, KeyboardEvent } from 'react';
+import { JSXElementConstructor, ReactNode, ComponentPropsWithoutRef, AriaRole, ChangeEvent, KeyboardEvent, CSSProperties } from 'react';
 export type AlertVariant = 'error' | 'informational' | 'success' | 'warning';
 /** Sets a ref to the given element. */
 export type SetRef<T> = (instance: T | null) => void;
 export type ElementProps<P extends Record<string, unknown>, E extends JSXElementConstructor<unknown> | keyof JSX.IntrinsicElements, O extends string = ''> = Omit<ComponentPropsWithoutRef<E>, O | keyof P> & P;
 export type ElementConstructorProps<E extends JSXElementConstructor<unknown> | keyof JSX.IntrinsicElements, O extends string = ''> = Omit<ComponentPropsWithoutRef<E>, O>;
+type CSSVariables = `--${string}`;
+export type CSSWithVariables = CSSProperties | (CSSProperties & {
+    [key in CSSVariables]: unknown;
+});
 export type DataProps = Record<`data-${string}`, string>;
 export type ButtonSize = 'large' | 'medium' | 'small' | 'x-small';
 export type CallToActionButton = {
@@ -106,6 +110,12 @@ export type CommonPropsLibrary = {
      * @type string
      */
     role?: AriaRole;
+    /**
+     * Inline styles to apply to the element.
+     *
+     * Allows for CSS variables to be passed in as well.
+     */
+    style?: CSSWithVariables;
 };
 export type CommonProps<K extends keyof CommonPropsLibrary> = Pick<CommonPropsLibrary, K>;
 export type RequiredCommonProps<K extends keyof CommonPropsLibrary> = Required<Pick<CommonPropsLibrary, K>>;
@@ -124,4 +134,5 @@ export type FieldControlProps<ValueType = string, ChangeContext = ChangeEvent<HT
     onChange: (next: ValueType | undefined, event?: ChangeContext) => void;
 };
 export type Brand = 'anywhere' | 'better-homes-gardens' | 'cartus' | 'century-21' | 'coldwell-banker' | 'corcoran' | 'denali-boss' | 'era' | 'sothebys';
+export {};
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/types/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;;AAgKH,sDAAsD"}
+{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;;AA2KH,sDAAsD"}

package/meta.ts

@@ -223,17 +223,17 @@ async function generateUtilityMeta(utilityFile: string): Promise<UtilityMeta | n
 
     const utility = fileName;
 
-    const comment = content.match(/\/\*\*[\s\S]+?\*\//);
+    const comment = content.match(/\/\*\*\s*\n([^*]|(\*(?!\/)))*\*\//g)?.map(jsDocParse);
 
     if (!comment?.[0]) {
         // console.info(`No JSDoc found for hook ${utility} for ${hooksDir}/${utility}.tsx`);
         return null;
     }
 
-    const utilityDoc = jsDocParse(comment[0]);
+    const utilityDoc = comment.find((doc) => doc.example);
 
-    if (!utilityDoc.example) {
-        // console.info(`No example found for hook ${utility} for ${hooksDir}/${utility}.tsx`);
+    if (!utilityDoc?.example) {
+        // console.info(`No example found for hook ${utility} for ${hooksDir}/${utility}.tsx`, comment[0]);
         return null;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.3.4",
+    "version": "1.3.5",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [
@@ -125,8 +125,6 @@
         "./ListItem/*": "./dist/components/ListItem/*.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",
         "./OTPInput": "./dist/components/OTPInput/index.js",

package/src/components/Avatar/Avatar.tsx

@@ -63,7 +63,7 @@ export type AvatarProps = CommonProps<'disabled'> & {
      * When provided the image will be displayed instead of the icon or initials.
      *
      * @example
-     *     /profile.jpg
+     *     /avatar-01.png
      */
     image?: string;
     /**
@@ -92,7 +92,7 @@ export type AvatarProps = CommonProps<'disabled'> & {
  *             <Avatar
  *                 color="blue"
  *                 icon={<SvgPerson />}
- *                 image="/profile.jpg"
+ *                 image="/avatar-01.png"
  *                 initials="AR"
  *                 name="Andre Giant"
  *                 showTooltip
@@ -112,14 +112,14 @@ export function Avatar({
     size = 'small',
     showIcon,
     image,
-    name: ariaLabel,
+    name,
     hideTooltip = false,
     onClick,
     disabled,
     ...props
 }: AvatarProps) {
     const children = useMemo(() => {
-        if (image) return <img alt={ariaLabel} aria-hidden={true} src={image} />;
+        if (image) return <img alt={name} aria-hidden={true} src={image} />;
 
         if (showIcon)
             return (
@@ -130,8 +130,8 @@ export function Avatar({
 
         let initials = initialsProp;
 
-        if (ariaLabel && !initials)
-            initials = ariaLabel
+        if (name && !initials)
+            initials = name
                 .split(' ')
                 .map((word) => word.charAt(0))
                 .slice(0, 2)
@@ -146,7 +146,7 @@ export function Avatar({
             );
 
         return null;
-    }, [ariaLabel, showIcon, image, initialsProp]);
+    }, [name, showIcon, image, initialsProp]);
 
     if (!children) return null;
 
@@ -155,21 +155,20 @@ export function Avatar({
             {...props}
             {...triggerProps}
             aria-disabled={disabled || undefined}
-            aria-label={onClick ? ariaLabel : undefined}
-            aria-labelledby={onClick ? triggerProps['aria-labelledby'] : undefined}
+            aria-label={name}
             aria-roledescription="person"
             data-bspk="avatar"
             data-color={color}
             data-size={size}
             onClickCapture={disabled ? undefined : onClick}
-            role={onClick ? 'button' : ''}
+            role={onClick ? 'button' : 'img'}
             tabIndex={onClick && !disabled ? 0 : undefined}
         >
             {children}
         </div>
     );
 
-    return !hideTooltip ? <Tooltip label={ariaLabel}>{avatar}</Tooltip> : avatar({});
+    return !hideTooltip ? <Tooltip label={name}>{avatar}</Tooltip> : avatar({});
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Avatar/AvatarExample.tsx

@@ -41,7 +41,7 @@ export const presets: Preset<AvatarProps>[] = [
         label: 'With Image',
         propState: {
             name: 'Andre Giant',
-            image: '/profile.jpg',
+            image: '/avatar-01.png',
             showIcon: false,
         },
     },

package/src/components/Avatar/avatar.scss

@@ -1,9 +1,13 @@
 [data-bspk='avatar'] {
+    /*! 
+    --avatar-border: is set via inline style 
+    */
+
     --height: var(--spacing-sizing-10);
     --font: var(--labels-base);
     --svg-size: var(--spacing-sizing-10);
 
-    border: unset;
+    border: var(--avatar-border);
 
     &:not([data-color]) {
         --foreground: var(--foreground-neutral-on-surface);
@@ -128,6 +132,7 @@
 
     &:focus:not(:active) {
         outline: 2px solid var(--stroke-neutral-focus);
+        outline-offset: -2px;
     }
 }
 

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -1,15 +1,17 @@
 import './avatar-group.scss';
+import { AvatarGroupOverflow } from './Overflow';
 import { Avatar, AvatarProps, SizeVariant } from '-/components/Avatar';
+import { CommonProps } from '-/types/common';
 
 export type AvatarItem = Pick<AvatarProps, 'color' | 'image' | 'initials' | 'name' | 'showIcon'>;
 
-export type AvatarGroupProps = {
+export type AvatarGroupProps = CommonProps<'style'> & {
     /**
      * The avatars to display in the group.
      *
      * @example
      *     [
-     *         { name: 'Fezzik', image: '/profile.jpg' },
+     *         { name: 'Fezzik', image: '/avatar-01.png' },
      *         { name: 'Inigo Montoya', initials: 'IM', color: 'blue' },
      *         { name: 'Miracle Max', initials: 'MM', color: 'green' },
      *         { name: 'Princess Buttercup', showIcon: true },
@@ -24,19 +26,23 @@ export type AvatarGroupProps = {
      *
      * @default small
      */
-    size?: Extract<SizeVariant, 'large' | 'medium' | 'small' | 'x-small'>;
+    size?: SizeVariant;
     /**
-     * The maximum number of avatars to display before showing the overflowCount.
+     * The maximum number of avatars to display before showing the overflow menu.
      *
      * This is used to limit the number of avatars displayed in the group.
      *
      * Recommended to set this to a value between 3 and 5 for optimal display.
+     *
+     * @default 5
+     * @min 1
+     * @max 5
      */
     max?: number;
     /**
      * The variant of the avatar group.
      *
-     * @default spread
+     * @default auto
      */
     variant?: 'spread' | 'stacked';
 };
@@ -62,28 +68,18 @@ export type AvatarGroupProps = {
  * @name AvatarGroup
  * @phase UXReview
  */
-export function AvatarGroup({ items, size = 'small', max = 5, variant }: AvatarGroupProps) {
-    if (!Array.isArray(items) || !items?.length) return null;
-
-    const overFlowCount = items.length - max;
-    const small = size === 'x-small' || size === 'small';
+export function AvatarGroup({ items, size = 'small', max: maxProp = 5, variant = 'spread', style }: AvatarGroupProps) {
+    const max = maxProp > items.length ? items.length : maxProp;
+    const overflowItems = items.slice(max);
 
-    return (
-        <div data-bspk="avatar-group" data-max={max} data-size={size} data-variant={variant}>
-            <div data-gap={variant === 'spread' ? (small ? '01' : '02') : undefined} data-wrap>
+    return !Array.isArray(items) || !items?.length ? null : (
+        <div data-bspk="avatar-group" data-max={max} data-size={size} data-variant={variant} style={style}>
+            <div data-wrap>
                 {items.slice(0, max).map((item, index) => (
-                    <Avatar
-                        data-stacked={variant === 'stacked' ? (small ? '01' : '02') : undefined}
-                        key={index}
-                        {...item}
-                        size={size}
-                    />
+                    <Avatar key={index} {...item} onClick={() => {}} size={size} />
                 ))}
-
-                {overFlowCount > 0 && (
-                    <div aria-hidden data-bspk="avatar" data-color="white" data-size={size}>
-                        <span data-overflow-count>+{overFlowCount}</span>
-                    </div>
+                {overflowItems.length > 0 && (
+                    <AvatarGroupOverflow items={overflowItems} overflow={overflowItems.length} size={size} />
                 )}
             </div>
         </div>

package/src/components/AvatarGroup/AvatarGroupExample.tsx

@@ -4,7 +4,6 @@ import { ComponentExample, Preset } from '-/utils/demo';
 
 const BLUE = COLOR_VARIANTS[4];
 const GREEN = COLOR_VARIANTS[5];
-const GREY = COLOR_VARIANTS[0];
 const PURPLE = COLOR_VARIANTS[10];
 
 export const presets: Preset<AvatarGroupProps>[] = [
@@ -12,30 +11,57 @@ export const presets: Preset<AvatarGroupProps>[] = [
         label: 'Stacked',
         propState: {
             items: [
-                { name: 'Fezzik', image: '/profile.jpg' },
+                { name: 'Fezzik', image: '/avatar-01.png' },
                 { name: 'Inigo Montoya', initials: 'IM', color: BLUE },
                 { name: 'Miracle Max', initials: 'MM', showIcon: false, color: GREEN },
                 { name: 'Princess Buttercup', showIcon: true, color: PURPLE },
             ],
             variant: 'stacked' as AvatarGroupProps['variant'],
+            max: 10,
         },
     },
     {
-        label: 'Stacked + Overflow',
+        label: 'Stacked With Overflow',
         propState: {
             items: [
-                { name: 'Fezzik', image: '/profile.jpg' },
-                { name: 'Inigo Montoya', initials: 'IM', color: BLUE },
-                { name: 'Miracle Max', initials: 'MM', showIcon: false, color: GREEN },
-                { name: 'Westley Man In Black', initials: 'WB', color: GREY },
-                { name: 'Princess Buttercup', showIcon: true, color: PURPLE },
+                {
+                    name: 'Alice Johnson',
+                    image: '/avatar-01.png',
+                },
+                {
+                    name: 'Bob Smith',
+                    image: '/avatar-02.png',
+                },
+                {
+                    name: 'Charlie Brown',
+                    image: '/avatar-03.png',
+                },
+                {
+                    name: 'David Wilson',
+                    image: '/avatar-04.png',
+                },
+                {
+                    name: 'Eva Green',
+                    image: '/avatar-05.png',
+                },
+                { name: 'Frank Miller', image: '/avatar-06.png' },
+                { name: 'Grace Lee', image: '/avatar-07.png' },
+                { name: 'Hannah Kim', image: '/avatar-08.png' },
+                { name: 'Ian Clark', image: '/avatar-09.png' },
+                { name: 'Julia Adams', image: '/avatar-10.png' },
+                { name: 'Katherine Johnson', image: '/avatar-11.png' },
             ],
-            max: 3,
             variant: 'stacked' as AvatarGroupProps['variant'],
+            max: 5,
         },
     },
 ];
 
 export const AvatarGroupExample: ComponentExample<AvatarGroupProps> = {
     presets,
+    defaultState: {
+        variant: 'spread',
+    },
+    render: ({ props, Component, preset }) => <Component key={preset?.label} {...props} />,
+    variants: false,
 };

package/src/components/AvatarGroup/Overflow.tsx

@@ -0,0 +1,91 @@
+import { Avatar, AvatarProps, SizeVariant } from '-/components/Avatar';
+import { ListItem } from '-/components/ListItem';
+import { Menu } from '-/components/Menu';
+import { Portal } from '-/components/Portal';
+import { useArrowNavigation } from '-/hooks/useArrowNavigation';
+import { useFloating } from '-/hooks/useFloating';
+import { useOutsideClick } from '-/hooks/useOutsideClick';
+import { handleKeyDown } from '-/utils/handleKeyDown';
+import { scrollListItemsStyle } from '-/utils/scrollListItemsStyle';
+import { useIds } from '-/utils/useIds';
+
+type AvatarGroupOverflowProps = {
+    /** The number of overflow avatars */
+    overflow: number;
+    /** The size of the avatar group */
+    size: SizeVariant;
+    /** The avatars in the overflow */
+    items: AvatarProps[];
+};
+
+export function AvatarGroupOverflow({ items: itemsProp, overflow, size }: AvatarGroupOverflowProps) {
+    const items = useIds(`avatar-overflow`, itemsProp);
+    const menuId = `avatar-overflow-menu-${items[0]?.id}`;
+
+    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,
+    });
+
+    return (
+        <>
+            <button
+                aria-activedescendant={activeElementId || undefined}
+                aria-controls={open ? menuId : undefined}
+                aria-expanded={open}
+                aria-haspopup="menu"
+                aria-hidden
+                aria-label={`Show ${overflow} more avatar${overflow > 1 ? 's' : ''}`}
+                data-bspk="avatar"
+                data-bspk-owner="avatar-overflow"
+                data-size={size}
+                onBlur={() => closeMenu()}
+                onClick={() => setActiveElementId(activeElementId === null ? items[0]?.id : null)}
+                onKeyDown={handleKeyDown(arrowKeyCallbacks)}
+                ref={elements.setReference}
+                role="combobox"
+            >
+                <span data-overflow-count>+{overflow}</span>
+            </button>
+            {open && (
+                <Portal>
+                    <Menu
+                        id={menuId}
+                        innerRef={elements.setFloating}
+                        role="menu"
+                        style={{
+                            ...floatingStyles,
+                            ...scrollListItemsStyle(5, items.length),
+                            '--list-item-height': `var(--spacing-sizing-12)`,
+                            paddingRight: 'var(--spacing-sizing-04)',
+                        }}
+                        width="fit-content"
+                    >
+                        {items.map((item, index) => (
+                            <ListItem
+                                active={activeElementId === item.id}
+                                key={index}
+                                label={item.name}
+                                leading={<Avatar {...item} hideTooltip size="small" />}
+                            />
+                        ))}
+                    </Menu>
+                </Portal>
+            )}
+        </>
+    );
+}

package/src/components/AvatarGroup/avatar-group.scss

@@ -1,28 +1,48 @@
 [data-bspk='avatar-group'] {
-    width: 100%;
+    width: fit-content;
+    max-width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
 
     [data-wrap] {
-        width: 100%;
+        min-width: fit-content;
         display: flex;
         flex-direction: row;
-        align-items: end;
-        justify-content: end;
-        overflow: hidden;
+        align-items: center;
+        justify-content: center;
     }
 
-    [data-gap='01'] {
-        gap: var(--spacing-sizing-01);
-    }
+    // data-gap={variant === 'spread' ? (small ? '01' : '02') : undefined}
+
+    [data-bspk='avatar'] {
+        z-index: 1;
+
+        &:hover {
+            z-index: 2;
+        }
 
-    [data-gap='02'] {
-        gap: var(--spacing-sizing-02);
+        &[data-bspk-owner='avatar-overflow'] {
+            --avatar-border: solid 1px var(--stroke-neutral-low);
+
+            background-color: var(--surface-neutral-t1-base);
+        }
     }
 
-    [data-stacked='02']:not(:last-child) {
-        margin-right: -8px;
+    &[data-variant='spread'] {
+        --avatar-border: none;
+
+        [data-bspk='avatar'] + [data-bspk='avatar'] {
+            margin-left: var(--spacing-sizing-02);
+        }
     }
 
-    [data-stacked='01']:not(:last-child) {
-        margin-right: -4px;
+    &[data-variant='stacked'] {
+        --avatar-border: solid 1px var(--stroke-neutral-low);
+
+        [data-bspk='avatar'] + [data-bspk='avatar'] {
+            margin-left: calc(var(--spacing-sizing-02) * -1);
+        }
     }
 }

package/src/components/Badge/BadgeExample.tsx

@@ -6,7 +6,7 @@ export const BadgeExample: ComponentExample<BadgeProps> = {
     render: ({ props, Component }) => {
         return (
             <Component {...props}>
-                <Avatar image="/profile.jpg" name="Andre Giant" />
+                <Avatar image="/avatar-01.png" name="Andre Giant" />
             </Component>
         );
     },

package/src/components/BadgeDot/BadgeDotExample.tsx

@@ -13,7 +13,7 @@ export const BadgeDotExample: ComponentExample<BadgeDotProps> = {
                 {props.outline === true ? (
                     <Button label="Button" size="large" />
                 ) : (
-                    <Avatar image="/profile.jpg" name="Andre Giant" />
+                    <Avatar image="/avatar-01.png" name="Andre Giant" />
                 )}
             </Component>
         );

package/src/components/Button/Button.tsx

@@ -5,7 +5,7 @@ import { ButtonSize, CommonProps, ElementProps, SetRef } from '-/types/common';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 
-export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled' | 'owner'> & {
+export type ButtonProps<As extends ElementType = ElementType> = CommonProps<'disabled' | 'owner'> & {
     /**
      * The label of the button.
      *
@@ -98,7 +98,7 @@ export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabl
  * @name Button
  * @phase UXReview
  */
-export function Button<As extends ElementType = 'button'>(
+export function Button<As extends ElementType = ElementType>(
     props: AriaAttributes & ElementProps<ButtonProps<As>, As>,
 ): JSX.Element {
     const {

package/src/components/Card/Card.tsx

@@ -1,5 +1,6 @@
 import './card.scss';
 import { ReactNode } from 'react';
+import { ElementProps } from '-/types/common';
 
 export type CardProps = {
     /**
@@ -38,9 +39,9 @@ export type CardProps = {
  * @name Card
  * @phase UXReview
  */
-export function Card({ children, variant = 'elevated' }: CardProps) {
+export function Card({ children, variant = 'elevated', ...props }: ElementProps<CardProps, 'div'>) {
     return (
-        <div data-bspk="card" data-variant={variant}>
+        <div {...props} data-bspk="card" data-variant={variant}>
             {children}
         </div>
     );

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -41,7 +41,7 @@ export type CheckboxGroupProps = FieldControlProps<string[]> & {
  *     import { CheckboxGroup } from '@bspk/ui/CheckboxGroup';
  *
  *     function Example() {
- *         const [values, setValues] = React.useState<string[]>([]);
+ *         const [value, setValue] = React.useState<string[]>([]);
  *
  *         return (
  *             <CheckboxGroup
@@ -52,9 +52,9 @@ export type CheckboxGroupProps = FieldControlProps<string[]> & {
  *                     { label: 'Option 2', value: 'option2' },
  *                     { label: 'Option 3', value: 'option3' },
  *                 ]}
- *                 values={values}
- *                 onChange={(nextValues: string[]) => {
- *                     setValues(nextValues);
+ *                 value={value}
+ *                 onChange={(nextValue: string[]) => {
+ *                     setValue(nextValue);
  *                 }}
  *             />
  *         );

package/src/components/CheckboxGroupField/CheckboxGroupField.tsx

@@ -19,11 +19,12 @@ export function CheckboxGroupField({
     helperText,
     labelTrailing,
     errorMessage,
+    style,
     ...controlProps
 }: CheckboxGroupFieldProps) {
     return (
-        <Field as="fieldset">
-            <FieldLabel as="legend" labelTrailing={labelTrailing}>
+        <Field as="fieldset" style={style}>
+            <FieldLabel as="legend" labelTrailing={labelTrailing} style={style}>
                 {label}
             </FieldLabel>
             <CheckboxGroup {...controlProps} />