@bspk/ui 1.1.34 → 1.3.0

package/dist/components/Accordion/accordion.css.js

@@ -0,0 +1,82 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=accordion] {
+  width: 100%;
+  padding: var(--spacing-sizing-02);
+}
+[data-bspk=accordion] > section {
+  --border-bottom-color: var(--stroke-neutral-base);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: var(--foreground-neutral-on-surface);
+}
+[data-bspk=accordion] > section[data-disabled] {
+  --border-bottom-color: var(--stroke-neutral-disabled-light);
+  background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+  color: var(--foreground-neutral-disabled-on-surface);
+}
+[data-bspk=accordion] > section button[data-header] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0 var(--spacing-sizing-02);
+  gap: var(--spacing-sizing-02);
+  font: inherit;
+  cursor: pointer;
+  outline: none;
+  min-height: var(--spacing-sizing-12);
+}
+[data-bspk=accordion] > section button[data-header] [data-title-subtitle] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+}
+[data-bspk=accordion] > section button[data-header] [data-title-subtitle] [data-title] {
+  font: var(--labels-base);
+}
+[data-bspk=accordion] > section button[data-header] [data-title-subtitle] [data-subtitle] {
+  font: var(--body-x-small);
+  color: var(--foreground-neutral-on-surface-variant-01);
+}
+[data-bspk=accordion] > section button[data-header] [data-arrow] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--spacing-sizing-02);
+}
+[data-bspk=accordion] > section button[data-header]:not(:disabled):hover {
+  background-image: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+}
+[data-bspk=accordion] > section button[data-header]:not(:disabled):active {
+  background-image: linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+}
+[data-bspk=accordion] > section button[data-header]:disabled {
+  cursor: not-allowed;
+  color: var(--foreground-neutral-disabled-on-surface);
+  border-color: var(--stroke-neutral-disabled-light);
+}
+[data-bspk=accordion] > section:has(:focus-visible) {
+  outline: 2px solid var(--stroke-neutral-focus);
+  border-color: var(--stroke-neutral-focus);
+  margin-bottom: 1px;
+}
+[data-bspk=accordion] > section [data-content] {
+  padding: var(--spacing-sizing-01) var(--spacing-sizing-02) var(--spacing-sizing-04);
+}
+[data-bspk=accordion] [data-divider] {
+  display: block;
+  height: 1px;
+  width: calc(100% - var(--spacing-sizing-04));
+  margin: -1px var(--spacing-sizing-02) 0;
+  background-color: var(--border-bottom-color);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

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

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

package/dist/components/Accordion/index.js

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

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

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

package/dist/components/Avatar/Avatar.d.ts

@@ -1,7 +1,8 @@
-import { ColorVariant } from '../../utils/colorVariants';
 import './avatar.scss';
+import { CommonProps } from '-/types/common';
+import { ColorVariant } from '-/utils/colorVariants';
 export type SizeVariant = 'large' | 'medium' | 'small' | 'x-large' | 'x-small' | 'xx-large' | 'xxx-large' | 'xxxx-large' | 'xxxxx-large';
-export type AvatarProps = {
+export type AvatarProps = CommonProps<'disabled'> & {
     /**
      * The name of the person or entity represented by the avatar. This is used for accessibility purposes.
      *
@@ -24,16 +25,19 @@ export type AvatarProps = {
      */
     color?: Exclude<ColorVariant, 'white'>;
     /**
-     * The initials to display in the avatar limited to 2 characters.
+     * Customizable initials to display in the avatar limited to 2 characters.
      *
-     * If not provided, the first two letters of the name will be used as initials.
+     * By default, initials are the first letters of the first two words in the name. For a single-word name, only one
+     * initial is shown. Names with three or more words, only the first two initials are used.
      *
      * @example
      *     AG;
      */
     initials?: string;
     /**
-     * Whether to show the icon in the avatar.
+     * Whether to show the icon in the avatar instead of the initials.
+     *
+     * If an image is provided, the image will be shown instead of the icon.
      *
      * @default true
      */
@@ -41,16 +45,24 @@ export type AvatarProps = {
     /**
      * The url to the image to display in the avatar.
      *
+     * When provided the image will be displayed instead of the icon or initials.
+     *
      * @example
      *     /profile.jpg
      */
     image?: string;
     /**
-     * Whether to show the represeneetd user's name as a tooltip.
+     * Whether to hide the represented user's name as a tooltip.
      *
-     * @default true
+     * @default false
+     */
+    hideTooltip?: boolean;
+    /**
+     * The function to call when the avatar is clicked.
+     *
+     * @type () => void
      */
-    showTooltip?: boolean;
+    onClick?: () => void;
 };
 /**
  * An avatar is a visual representation of a user or entity. It can be used to display an initials, icon, or image.
@@ -67,7 +79,7 @@ export type AvatarProps = {
  *                 image="/profile.jpg"
  *                 initials="AR"
  *                 name="Andre Giant"
- *                 showTooltip={true}
+ *                 showTooltip
  *                 size="large"
  *             />
  *         );
@@ -76,11 +88,7 @@ export type AvatarProps = {
  * @exampleDescription The image if provided is displayed first, followed by the icon if provided, and finally the initials. If no initials are provided, the first two letters of the name will be used as initials.
  *
  * @name Avatar
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function Avatar({ initials: initialsProp, color, size, showIcon, image, name: ariaLabel, showTooltip, }: AvatarProps): import("react/jsx-runtime").JSX.Element | null;
-declare namespace Avatar {
-    var bspkName: string;
-}
-export { Avatar };
+export declare function Avatar({ initials: initialsProp, color, size, showIcon, image, name: ariaLabel, hideTooltip, onClick, disabled, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Avatar/Avatar.js

@@ -1,13 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import './avatar.css.js';
 import { SvgPerson } from '@bspk/icons/Person';
 import { useMemo } from 'react';
 import { Tooltip } from '../Tooltip';
-import './avatar.css.js';
-const DEFAULT = {
-    size: 'small',
-    color: 'grey',
-    showTooltip: true,
-};
 /**
  * An avatar is a visual representation of a user or entity. It can be used to display an initials, icon, or image.
  *
@@ -23,7 +18,7 @@ const DEFAULT = {
  *                 image="/profile.jpg"
  *                 initials="AR"
  *                 name="Andre Giant"
- *                 showTooltip={true}
+ *                 showTooltip
  *                 size="large"
  *             />
  *         );
@@ -32,14 +27,14 @@ const DEFAULT = {
  * @exampleDescription The image if provided is displayed first, followed by the icon if provided, and finally the initials. If no initials are provided, the first two letters of the name will be used as initials.
  *
  * @name Avatar
- * @phase DesignReview
+ * @phase UXReview
  */
-function Avatar({ initials: initialsProp, color = DEFAULT.color, size = DEFAULT.size, showIcon, image, name: ariaLabel, showTooltip = DEFAULT.showTooltip, }) {
+export function Avatar({ initials: initialsProp, color = 'grey', size = 'small', showIcon, image, name: ariaLabel, hideTooltip = false, onClick, disabled, ...props }) {
     const children = useMemo(() => {
         if (image)
-            return _jsx("img", { alt: ariaLabel, src: image });
+            return _jsx("img", { alt: ariaLabel, "aria-hidden": true, src: image });
         if (showIcon)
-            return (_jsx("span", { "data-icon": true, children: _jsx(SvgPerson, {}) }));
+            return (_jsx("span", { "aria-hidden": true, "data-icon": true, children: _jsx(SvgPerson, {}) }));
         let initials = initialsProp;
         if (ariaLabel && !initials)
             initials = ariaLabel
@@ -49,14 +44,12 @@ function Avatar({ initials: initialsProp, color = DEFAULT.color, size = DEFAULT.
                 .join('')
                 .toUpperCase();
         if (initials)
-            return _jsx("span", { "data-initials": true, children: initials.slice(0, 2) });
+            return (_jsx("span", { "aria-hidden": true, "data-initials": true, children: initials.slice(0, 2) }));
         return null;
     }, [ariaLabel, showIcon, image, initialsProp]);
     if (!children)
         return null;
-    const avatar = (_jsx("div", { "aria-label": ariaLabel, "data-bspk": "avatar", "data-color": color, "data-size": size, children: children }));
-    return showTooltip ? _jsx(Tooltip, { label: ariaLabel, children: avatar }) : avatar;
+    const avatar = (triggerProps) => (_jsx("div", { ...props, ...triggerProps, "aria-disabled": disabled || undefined, "aria-label": onClick ? ariaLabel : undefined, "aria-labelledby": onClick ? triggerProps['aria-labelledby'] : undefined, "aria-roledescription": "person", "data-bspk": "avatar", "data-color": color, "data-size": size, onClickCapture: disabled ? undefined : onClick, role: onClick ? 'button' : '', tabIndex: onClick && !disabled ? 0 : undefined, children: children }));
+    return !hideTooltip ? _jsx(Tooltip, { label: ariaLabel, children: avatar }) : avatar({});
 }
-Avatar.bspkName = 'Avatar';
-export { Avatar };
 //# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,eAAe,CAAC;AAEvB,MAAM,OAAO,GAAG;IACZ,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,MAAM;IACb,WAAW,EAAE,IAAI;CACX,CAAC;AAiEX;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,SAAS,MAAM,CAAC,EACZ,QAAQ,EAAE,YAAY,EACtB,KAAK,GAAG,OAAO,CAAC,KAAK,EACrB,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,QAAQ,EACR,KAAK,EACL,IAAI,EAAE,SAAS,EACf,WAAW,GAAG,OAAO,CAAC,WAAW,GACvB;IACV,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,KAAK;YAAE,OAAO,cAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,GAAI,CAAC;QAEtD,IAAI,QAAQ;YACR,OAAO,CACH,4CACI,KAAC,SAAS,KAAG,GACV,CACV,CAAC;QAEN,IAAI,QAAQ,GAAG,YAAY,CAAC;QAE5B,IAAI,SAAS,IAAI,CAAC,QAAQ;YACtB,QAAQ,GAAG,SAAS;iBACf,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;iBAC7B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;iBACX,IAAI,CAAC,EAAE,CAAC;iBACR,WAAW,EAAE,CAAC;QAEvB,IAAI,QAAQ;YAAE,OAAO,gDAAqB,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAQ,CAAC;QAEvE,OAAO,IAAI,CAAC;IAChB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAE/C,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3B,MAAM,MAAM,GAAG,CACX,4BAAiB,SAAS,eAAY,QAAQ,gBAAa,KAAK,eAAa,IAAI,YAC5E,QAAQ,GACP,CACT,CAAC;IAEF,OAAO,WAAW,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,SAAS,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAC;AAChF,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAuB,MAAM,sBAAsB,CAAC;AA8EpE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,QAAQ,EAAE,YAAY,EACtB,KAAK,GAAG,MAAM,EACd,IAAI,GAAG,OAAO,EACd,QAAQ,EACR,KAAK,EACL,IAAI,EAAE,SAAS,EACf,WAAW,GAAG,KAAK,EACnB,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACE;IACV,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,KAAK;YAAE,OAAO,cAAK,GAAG,EAAE,SAAS,iBAAe,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI,CAAC;QAEzE,IAAI,QAAQ;YACR,OAAO,CACH,8BAAmB,IAAI,+BACnB,KAAC,SAAS,KAAG,GACV,CACV,CAAC;QAEN,IAAI,QAAQ,GAAG,YAAY,CAAC;QAE5B,IAAI,SAAS,IAAI,CAAC,QAAQ;YACtB,QAAQ,GAAG,SAAS;iBACf,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;iBAC7B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;iBACX,IAAI,CAAC,EAAE,CAAC;iBACR,WAAW,EAAE,CAAC;QAEvB,IAAI,QAAQ;YACR,OAAO,CACH,8BAAmB,IAAI,mCAClB,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAClB,CACV,CAAC;QAEN,OAAO,IAAI,CAAC;IAChB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAE/C,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3B,MAAM,MAAM,GAAG,CAAC,YAAiC,EAAE,EAAE,CAAC,CAClD,iBACQ,KAAK,KACL,YAAY,mBACD,QAAQ,IAAI,SAAS,gBACxB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,qBAC1B,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,0BACjD,QAAQ,eACnB,QAAQ,gBACN,KAAK,eACN,IAAI,EACf,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EAC9C,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAC7B,QAAQ,EAAE,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,YAE7C,QAAQ,GACP,CACT,CAAC;IAEF,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,SAAS,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;AACrF,CAAC"}

package/dist/components/Avatar/AvatarExample.d.ts

@@ -1,3 +1,4 @@
-import { ComponentExample } from '../../utils/demo';
 import { AvatarProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<AvatarProps>[];
 export declare const AvatarExample: ComponentExample<AvatarProps>;

package/dist/components/Avatar/AvatarExample.js

@@ -1,39 +1,49 @@
-export const AvatarExample = {
-    presets: [
-        {
-            label: 'Name Only',
-            propState: {
-                name: 'Andre Giant',
-                image: undefined, // Ensure no image is set
-                initials: undefined, // Ensure no initials are set
-                showIcon: false,
-            },
+export const presets = [
+    {
+        label: 'Name Only',
+        propState: {
+            name: 'Andre Giant',
+            image: undefined, // Ensure no image is set
+            initials: undefined, // Ensure no initials are set
+            showIcon: false,
+        },
+    },
+    {
+        label: 'One Word Name',
+        propState: {
+            name: 'Andre',
+            image: undefined, // Ensure no image is set
+            initials: undefined, // Ensure no initials are set
+            showIcon: false,
         },
-        {
-            label: 'With Initials',
-            propState: {
-                name: 'Andre Giant',
-                initials: 'GA',
-                image: undefined, // Ensure no image is set
-                showIcon: false,
-            },
+    },
+    {
+        label: 'With Initials',
+        propState: {
+            name: 'Andre The Giant',
+            initials: 'AG',
+            image: undefined, // Ensure no image is set
+            showIcon: false,
         },
-        {
-            label: 'With Icon',
-            propState: {
-                name: 'Andre Giant',
-                showIcon: true,
-                image: undefined, // Ensure no image is set
-            },
+    },
+    {
+        label: 'With Icon',
+        propState: {
+            name: 'Andre Giant',
+            showIcon: true,
+            image: undefined, // Ensure no image is set
         },
-        {
-            label: 'With Image',
-            propState: {
-                name: 'Andre Giant',
-                image: '/profile.jpg',
-                showIcon: false,
-            },
+    },
+    {
+        label: 'With Image',
+        propState: {
+            name: 'Andre Giant',
+            image: '/profile.jpg',
+            showIcon: false,
         },
-    ],
+    },
+];
+export const AvatarExample = {
+    presets,
 };
 //# sourceMappingURL=AvatarExample.js.map

package/dist/components/Avatar/AvatarExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarExample.js","sourceRoot":"","sources":["../../../src/components/Avatar/AvatarExample.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,IAAI,EAAE,aAAa;gBACnB,KAAK,EAAE,SAAS,EAAE,yBAAyB;gBAC3C,QAAQ,EAAE,SAAS,EAAE,6BAA6B;gBAClD,QAAQ,EAAE,KAAK;aAClB;SACJ;QACD;YACI,KAAK,EAAE,eAAe;YACtB,SAAS,EAAE;gBACP,IAAI,EAAE,aAAa;gBACnB,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,SAAS,EAAE,yBAAyB;gBAC3C,QAAQ,EAAE,KAAK;aAClB;SACJ;QACD;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,IAAI,EAAE,aAAa;gBACnB,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,SAAS,EAAE,yBAAyB;aAC9C;SACJ;QACD;YACI,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,IAAI,EAAE,aAAa;gBACnB,KAAK,EAAE,cAAc;gBACrB,QAAQ,EAAE,KAAK;aAClB;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"AvatarExample.js","sourceRoot":"","sources":["../../../src/components/Avatar/AvatarExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,OAAO,GAA0B;IAC1C;QACI,KAAK,EAAE,WAAW;QAClB,SAAS,EAAE;YACP,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE,SAAS,EAAE,yBAAyB;YAC3C,QAAQ,EAAE,SAAS,EAAE,6BAA6B;YAClD,QAAQ,EAAE,KAAK;SAClB;KACJ;IACD;QACI,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE;YACP,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,SAAS,EAAE,yBAAyB;YAC3C,QAAQ,EAAE,SAAS,EAAE,6BAA6B;YAClD,QAAQ,EAAE,KAAK;SAClB;KACJ;IACD;QACI,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE;YACP,IAAI,EAAE,iBAAiB;YACvB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,SAAS,EAAE,yBAAyB;YAC3C,QAAQ,EAAE,KAAK;SAClB;KACJ;IACD;QACI,KAAK,EAAE,WAAW;QAClB,SAAS,EAAE;YACP,IAAI,EAAE,aAAa;YACnB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,SAAS,EAAE,yBAAyB;SAC9C;KACJ;IACD;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE,cAAc;YACrB,QAAQ,EAAE,KAAK;SAClB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,OAAO;CACV,CAAC"}

package/dist/components/Avatar/avatar.css

@@ -2,6 +2,7 @@
   --height: var(--spacing-sizing-10);
   --font: var(--labels-base);
   --svg-size: var(--spacing-sizing-10);
+  border: unset;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -10,10 +11,14 @@
   height: var(--height);
   width: var(--height);
   aspect-ratio: 1/1;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background-color: var(--background);
   color: var(--foreground);
   font: var(--font);
+  flex-shrink: 0;
+  flex-grow: 0;
+  position: relative;
+  --state-background: transparent;
 }
 [data-bspk=avatar]:not([data-color]) {
   --foreground: var(--foreground-neutral-on-surface);
@@ -27,6 +32,7 @@
 [data-bspk=avatar] img {
   vertical-align: top;
   max-width: 100%;
+  height: auto;
 }
 [data-bspk=avatar] svg {
   width: var(--svg-size);
@@ -82,5 +88,25 @@
   --font: var(--display-regular-large);
   --svg-size: var(--spacing-sizing-18);
 }
+[data-bspk=avatar]::after {
+  content: "";
+  position: absolute;
+  display: block;
+  inset: 0;
+  border-radius: var(--radius-full);
+  background: var(--state-background);
+}
+[data-bspk=avatar]:hover {
+  --state-background: var(--interactions-neutral-hover-opacity);
+}
+[data-bspk=avatar]:active {
+  --state-background: var(--interactions-neutral-press-opacity);
+}
+[data-bspk=avatar][disabled] {
+  opacity: 0.5;
+}
+[data-bspk=avatar]:focus:not(:active) {
+  outline: 2px solid var(--stroke-neutral-focus);
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Avatar/avatar.css.js

@@ -5,6 +5,7 @@ style.appendChild(document.createTextNode(`[data-bspk=avatar] {
   --height: var(--spacing-sizing-10);
   --font: var(--labels-base);
   --svg-size: var(--spacing-sizing-10);
+  border: unset;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -13,10 +14,14 @@ style.appendChild(document.createTextNode(`[data-bspk=avatar] {
   height: var(--height);
   width: var(--height);
   aspect-ratio: 1/1;
-  border-radius: 999px;
+  border-radius: var(--radius-full);
   background-color: var(--background);
   color: var(--foreground);
   font: var(--font);
+  flex-shrink: 0;
+  flex-grow: 0;
+  position: relative;
+  --state-background: transparent;
 }
 [data-bspk=avatar]:not([data-color]) {
   --foreground: var(--foreground-neutral-on-surface);
@@ -30,6 +35,7 @@ style.appendChild(document.createTextNode(`[data-bspk=avatar] {
 [data-bspk=avatar] img {
   vertical-align: top;
   max-width: 100%;
+  height: auto;
 }
 [data-bspk=avatar] svg {
   width: var(--svg-size);
@@ -85,8 +91,27 @@ style.appendChild(document.createTextNode(`[data-bspk=avatar] {
   --font: var(--display-regular-large);
   --svg-size: var(--spacing-sizing-18);
 }
+[data-bspk=avatar]::after {
+  content: "";
+  position: absolute;
+  display: block;
+  inset: 0;
+  border-radius: var(--radius-full);
+  background: var(--state-background);
+}
+[data-bspk=avatar]:hover {
+  --state-background: var(--interactions-neutral-hover-opacity);
+}
+[data-bspk=avatar]:active {
+  --state-background: var(--interactions-neutral-press-opacity);
+}
+[data-bspk=avatar][disabled] {
+  opacity: 0.5;
+}
+[data-bspk=avatar]:focus:not(:active) {
+  outline: 2px solid var(--stroke-neutral-focus);
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/AvatarGroup/AvatarGroup.d.ts

@@ -1,5 +1,5 @@
-import { AvatarProps, SizeVariant } from '../Avatar';
 import './avatar-group.scss';
+import { AvatarProps, SizeVariant } from '-/components/Avatar';
 export type AvatarItem = Pick<AvatarProps, 'color' | 'image' | 'initials' | 'name' | 'showIcon'>;
 export type AvatarGroupProps = {
     /**
@@ -7,8 +7,10 @@ export type AvatarGroupProps = {
      *
      * @example
      *     [
-     *         { name: 'Jane Doe', image: '/profile.jpg' },
-     *         { name: 'John Smith', initials: 'JS' },
+     *         { name: 'Fezzik', image: '/profile.jpg' },
+     *         { name: 'Inigo Montoya', initials: 'IM', color: 'blue' },
+     *         { name: 'Miracle Max', initials: 'MM', color: 'green' },
+     *         { name: 'Princess Buttercup', showIcon: true },
      *     ];
      *
      * @type Array<AvatarItem>
@@ -26,8 +28,7 @@ export type AvatarGroupProps = {
      *
      * This is used to limit the number of avatars displayed in the group.
      *
-     * @minimum 3
-     * @maximum 5
+     * Recommended to set this to a value between 3 and 5 for optimal display.
      */
     max?: number;
     /**
@@ -47,18 +48,15 @@ export type AvatarGroupProps = {
  *         return (
  *             <AvatarGroup
  *                 items={[
- *                     { name: 'Jane Doe', image: '/path/to/image.jpg' },
+ *                     { name: 'Andre Giant', image: '/path/to/image.jpg' },
  *                     { name: 'John Smith', initials: 'JS' },
+ *                     { name: 'Princess Buttercup' },
  *                 ]}
  *             />
  *         );
  *     }
  *
  * @name AvatarGroup
- * @phase Backlog
+ * @phase UXReview
  */
-declare function AvatarGroup({ items, size, max, variant }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element | null;
-declare namespace AvatarGroup {
-    var bspkName: string;
-}
-export { AvatarGroup };
+export declare function AvatarGroup({ items, size, max, variant }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/AvatarGroup/AvatarGroup.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar } from '../Avatar';
 import './avatar-group.css.js';
+import { Avatar } from '../Avatar';
 /**
  * AvatarGroup component displays a group of avatars.
  *
@@ -11,22 +11,22 @@ import './avatar-group.css.js';
  *         return (
  *             <AvatarGroup
  *                 items={[
- *                     { name: 'Jane Doe', image: '/path/to/image.jpg' },
+ *                     { name: 'Andre Giant', image: '/path/to/image.jpg' },
  *                     { name: 'John Smith', initials: 'JS' },
+ *                     { name: 'Princess Buttercup' },
  *                 ]}
  *             />
  *         );
  *     }
  *
  * @name AvatarGroup
- * @phase Backlog
+ * @phase UXReview
  */
-function AvatarGroup({ items, size = 'small', max = 5, variant }) {
+export function AvatarGroup({ items, size = 'small', max = 5, variant }) {
     if (!Array.isArray(items) || !items?.length)
         return null;
     const overFlowCount = items.length - max;
-    return (_jsx("div", { "data-bspk": "avatar-group", "data-max": max, "data-size": size, "data-variant": variant, children: _jsxs("div", { "data-wrap": true, children: [items.map((item, index) => (_jsx(Avatar, { ...item, size: size }, index))), overFlowCount > 0 && (_jsx("div", { "aria-hidden": true, "data-bspk": "avatar", "data-color": "white", "data-size": size, children: _jsxs("span", { "data-overflow-count": true, children: ["+", overFlowCount] }) }))] }) }));
+    const small = size === 'x-small' || size === 'small';
+    return (_jsx("div", { "data-bspk": "avatar-group", "data-max": max, "data-size": size, "data-variant": variant, children: _jsxs("div", { "data-gap": variant === 'spread' ? (small ? '01' : '02') : undefined, "data-wrap": true, children: [items.slice(0, max).map((item, index) => (_jsx(Avatar, { "data-stacked": variant === 'stacked' ? (small ? '01' : '02') : undefined, ...item, size: size }, index))), overFlowCount > 0 && (_jsx("div", { "aria-hidden": true, "data-bspk": "avatar", "data-color": "white", "data-size": size, children: _jsxs("span", { "data-overflow-count": true, children: ["+", overFlowCount] }) }))] }) }));
 }
-AvatarGroup.bspkName = 'AvatarGroup';
-export { AvatarGroup };
 //# sourceMappingURL=AvatarGroup.js.map

package/dist/components/AvatarGroup/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAA4B,MAAM,qBAAqB,CAAC;AACvE,OAAO,qBAAqB,CAAC;AAyC7B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,OAAO,EAAE,GAAG,GAAG,CAAC,EAAE,OAAO,EAAoB;IAC9E,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzD,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;IAEzC,OAAO,CACH,2BAAe,cAAc,cAAW,GAAG,eAAa,IAAI,kBAAgB,OAAO,YAC/E,6CACK,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACxB,KAAC,MAAM,OAAiB,IAAI,EAAE,IAAI,EAAE,IAAI,IAA3B,KAAK,CAA0B,CAC/C,CAAC,EACD,aAAa,GAAG,CAAC,IAAI,CAClB,gDAA2B,QAAQ,gBAAY,OAAO,eAAY,IAAI,YAClE,6DAA4B,aAAa,IAAQ,GAC/C,CACT,IACC,GACJ,CACT,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAA4B,MAAM,qBAAqB,CAAC;AA0CvE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,OAAO,EAAE,GAAG,GAAG,CAAC,EAAE,OAAO,EAAoB;IACrF,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzD,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;IACzC,MAAM,KAAK,GAAG,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,OAAO,CAAC;IAErD,OAAO,CACH,2BAAe,cAAc,cAAW,GAAG,eAAa,IAAI,kBAAgB,OAAO,YAC/E,2BAAe,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,gCAClE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,KAAC,MAAM,oBACW,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,KAEnE,IAAI,EACR,IAAI,EAAE,IAAI,IAFL,KAAK,CAGZ,CACL,CAAC,EAED,aAAa,GAAG,CAAC,IAAI,CAClB,gDAA2B,QAAQ,gBAAY,OAAO,eAAY,IAAI,YAClE,6DAA4B,aAAa,IAAQ,GAC/C,CACT,IACC,GACJ,CACT,CAAC;AACN,CAAC"}

package/dist/components/AvatarGroup/AvatarGroupExample.d.ts

@@ -0,0 +1,4 @@
+import { AvatarGroupProps } from '.';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<AvatarGroupProps>[];
+export declare const AvatarGroupExample: ComponentExample<AvatarGroupProps>;

package/dist/components/AvatarGroup/AvatarGroupExample.js

@@ -0,0 +1,37 @@
+import { COLOR_VARIANTS } from '../../utils/colorVariants';
+const BLUE = COLOR_VARIANTS[4];
+const GREEN = COLOR_VARIANTS[5];
+const GREY = COLOR_VARIANTS[0];
+const PURPLE = COLOR_VARIANTS[10];
+export const presets = [
+    {
+        label: 'Stacked',
+        propState: {
+            items: [
+                { name: 'Fezzik', image: '/profile.jpg' },
+                { 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',
+        },
+    },
+    {
+        label: 'Stacked + 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 },
+            ],
+            max: 3,
+            variant: 'stacked',
+        },
+    },
+];
+export const AvatarGroupExample = {
+    presets,
+};
+//# sourceMappingURL=AvatarGroupExample.js.map

package/dist/components/AvatarGroup/AvatarGroupExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroupExample.js","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroupExample.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,MAAM,IAAI,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;AAC/B,MAAM,KAAK,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;AAChC,MAAM,IAAI,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;AAC/B,MAAM,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC,CAAC;AAElC,MAAM,CAAC,MAAM,OAAO,GAA+B;IAC/C;QACI,KAAK,EAAE,SAAS;QAChB,SAAS,EAAE;YACP,KAAK,EAAE;gBACH,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE;gBACzC,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;gBACtD,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;gBACtE,EAAE,IAAI,EAAE,oBAAoB,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;aAChE;YACD,OAAO,EAAE,SAAwC;SACpD;KACJ;IACD;QACI,KAAK,EAAE,oBAAoB;QAC3B,SAAS,EAAE;YACP,KAAK,EAAE;gBACH,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE;gBACzC,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;gBACtD,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;gBACtE,EAAE,IAAI,EAAE,sBAAsB,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;gBAC7D,EAAE,IAAI,EAAE,oBAAoB,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;aAChE;YACD,GAAG,EAAE,CAAC;YACN,OAAO,EAAE,SAAwC;SACpD;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAuC;IAClE,OAAO;CACV,CAAC"}

package/dist/components/AvatarGroup/avatar-group.css

@@ -7,6 +7,17 @@
   flex-direction: row;
   align-items: end;
   justify-content: end;
-  gap: var(--spacing-sizing-02);
   overflow: hidden;
 }
+[data-bspk=avatar-group] [data-gap="01"] {
+  gap: var(--spacing-sizing-01);
+}
+[data-bspk=avatar-group] [data-gap="02"] {
+  gap: var(--spacing-sizing-02);
+}
+[data-bspk=avatar-group] [data-stacked="02"]:not(:last-child) {
+  margin-right: -8px;
+}
+[data-bspk=avatar-group] [data-stacked="01"]:not(:last-child) {
+  margin-right: -4px;
+}