@bspk/ui 1.1.16 → 1.1.17

package/dist/Avatar.d.ts

@@ -1,9 +1,17 @@
 import './avatar.scss';
 import { ReactNode } from 'react';
 import { ColorVariant } from './utils/colorVariants';
-import { CommonProps } from '.';
 export type SizeVariant = 'large' | 'medium' | 'small' | 'x-large' | 'x-small' | 'xx-large' | 'xxx-large' | 'xxxx-large' | 'xxxxx-large';
-export type AvatarProps = CommonProps<'aria-label'> & {
+export type AvatarProps = {
+    /**
+     * The name of the person or entity represented by the avatar. This is used for accessibility purposes.
+     *
+     * @example
+     *     Jane Doe
+     *
+     * @required
+     */
+    name: string;
     /**
      * The size of the avatar.
      *
@@ -16,14 +24,29 @@ export type AvatarProps = CommonProps<'aria-label'> & {
      * @default grey
      */
     color?: ColorVariant;
-    /** The initials to display in the avatar limited to 2 characters. */
+    /**
+     * The initials to display in the avatar limited to 2 characters.
+     *
+     * @example
+     *     JD;
+     */
     initials?: string;
-    /** The icon to display in the avatar. */
+    /**
+     * The icon to display in the avatar. This needs to be an icon from the @bspk/icons library.
+     *
+     *     import { SvgPerson } from '@bspk/icons/Person';
+     *
+     * @example
+     *     <SvgPerson />;
+     */
     icon?: ReactNode;
-    /** The url to the image to display in the avatar. */
+    /**
+     * The url to the image to display in the avatar.
+     *
+     * @example
+     *     '/user/e3232/avatar.jpg';
+     */
     image?: string;
-    /** The number of notifications not displayed in a list. */
-    overflowCount?: number;
 };
 /**
  * An avatar is a visual representation of a user or entity. It can be used to display an initials, icon, image, or an
@@ -31,7 +54,7 @@ export type AvatarProps = CommonProps<'aria-label'> & {
  *
  * @name Avatar
  */
-declare function Avatar({ initials, color, size, icon, image, 'aria-label': ariaLabel, overflowCount, }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+declare function Avatar({ initials: initialsProp, color, size, icon, image, name: ariaLabel }: AvatarProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace Avatar {
     var bspkName: string;
 }

package/dist/Avatar.js

@@ -1,26 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styleAdd } from './utils/styleAdd';
 styleAdd(`[data-bspk=avatar]{--height: var(--spacing-sizing-10);--font: var(--labels-base);--foreground: var(--foreground-neutral-on-surface);--background: var(--surface-neutral-t3-low);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0;height:var(--height);width:var(--height);aspect-ratio:1/1;border-radius:999px;background-color:var(--background);color:var(--foreground);font:var(--font)}[data-bspk=avatar]:has(img){overflow:hidden}[data-bspk=avatar] img{max-width:100%}[data-bspk=avatar][data-size=x-small]{--height: var(--spacing-sizing-06);--font: var(--labels-x-small)}[data-bspk=avatar][data-size=small]{--height: var(--spacing-sizing-08);--font: var(--labels-small)}[data-bspk=avatar][data-size=medium]{--height: var(--spacing-sizing-10);--font: var(--labels-base)}[data-bspk=avatar][data-size=large]{--height: var(--spacing-sizing-12);--font: var(--labels-large)}[data-bspk=avatar][data-size=x-large]{--height: var(--spacing-sizing-14);--font: var(--subheader-x-large)}[data-bspk=avatar][data-size=xx-large]{--height: var(--spacing-sizing-17);--font: var(--subheader-xx-large)}[data-bspk=avatar][data-size=xxx-large]{--height: var(--spacing-sizing-19);--font: var(--display-regular-small)}[data-bspk=avatar][data-size=xxxx-large]{--height: var(--spacing-sizing-21);--font: var(--display-regular-medium)}[data-bspk=avatar][data-size=xxxxx-large]{--height: var(--spacing-sizing-23);--font: var(--display-regular-large)}`);;
 import { useMemo } from 'react';
+import { Tooltip } from './Tooltip';
 /**
  * An avatar is a visual representation of a user or entity. It can be used to display an initials, icon, image, or an
  * overflowCount.
  *
  * @name Avatar
  */
-function Avatar({ initials, color = 'grey', size = 'small', icon, image, 'aria-label': ariaLabel, overflowCount, }) {
+function Avatar({ initials: initialsProp, color = 'grey', size = 'small', icon, image, name: ariaLabel }) {
     const children = useMemo(() => {
-        if (initials)
-            return _jsx("span", { "data-initials": true, children: initials });
-        if (icon)
-            return _jsx("span", { "data-icon": true, children: icon });
         if (image)
             return _jsx("img", { alt: ariaLabel, src: image });
-        if (overflowCount)
-            return _jsxs("span", { "data-overflow-count": true, children: ["+", overflowCount] });
+        if (icon)
+            return _jsx("span", { "data-icon": true, children: icon });
+        let initials = initialsProp;
+        if (ariaLabel && !initials)
+            initials = ariaLabel
+                .split(' ')
+                .map((word) => word.charAt(0))
+                .slice(0, 2)
+                .join('')
+                .toUpperCase();
+        if (initials)
+            return _jsx("span", { "data-initials": true, children: initials.slice(0, 2) });
+        return null;
+    }, [ariaLabel, icon, image, initialsProp]);
+    if (!children)
         return null;
-    }, [ariaLabel, icon, image, initials, overflowCount]);
-    return (_jsx(_Fragment, { children: children && (_jsx("div", { "aria-label": ariaLabel, "data-bspk": "avatar", "data-color": color, "data-size": size, children: children })) }));
+    const avatar = (_jsx("div", { "aria-label": ariaLabel, "data-bspk": "avatar", "data-color": color, "data-size": size, children: children }));
+    return _jsx(Tooltip, { label: ariaLabel, children: avatar });
 }
 Avatar.bspkName = 'Avatar';
 export { Avatar };

package/dist/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAa,OAAO,EAAE,MAAM,OAAO,CAAC;AAwC3C;;;;;GAKG;AACH,SAAS,MAAM,CAAC,EACZ,QAAQ,EACR,KAAK,GAAG,MAAM,EACd,IAAI,GAAG,OAAO,EACd,IAAI,EACJ,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,aAAa,GACH;IACV,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,QAAQ;YAAE,OAAO,gDAAqB,QAAQ,GAAQ,CAAC;QAC3D,IAAI,IAAI;YAAE,OAAO,4CAAiB,IAAI,GAAQ,CAAC;QAC/C,IAAI,KAAK;YAAE,OAAO,cAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,GAAI,CAAC;QACtD,IAAI,aAAa;YAAE,OAAO,6DAA4B,aAAa,IAAQ,CAAC;QAC5E,OAAO,IAAI,CAAC;IAChB,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAEtD,OAAO,CACH,4BACK,QAAQ,IAAI,CACT,4BAAiB,SAAS,eAAY,QAAQ,gBAAa,KAAK,eAAa,IAAI,YAC5E,QAAQ,GACP,CACT,GACF,CACN,CAAC;AACN,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAa,OAAO,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AA6DpC;;;;;GAKG;AACH,SAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,GAAG,MAAM,EAAE,IAAI,GAAG,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAe;IACjH,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,KAAK;YAAE,OAAO,cAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,GAAI,CAAC;QACtD,IAAI,IAAI;YAAE,OAAO,4CAAiB,IAAI,GAAQ,CAAC;QAE/C,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,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAE3C,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,KAAC,OAAO,IAAC,KAAK,EAAE,SAAS,YAAG,MAAM,GAAW,CAAC;AACzD,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.1.16",
+    "version": "1.1.17",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [

package/src/Avatar.tsx

@@ -1,10 +1,9 @@
 import './avatar.scss';
 import { ReactNode, useMemo } from 'react';
 
+import { Tooltip } from './Tooltip';
 import { ColorVariant } from './utils/colorVariants';
 
-import { CommonProps } from '.';
-
 export type SizeVariant =
     | 'large'
     | 'medium'
@@ -16,7 +15,16 @@ export type SizeVariant =
     | 'xxxx-large'
     | 'xxxxx-large';
 
-export type AvatarProps = CommonProps<'aria-label'> & {
+export type AvatarProps = {
+    /**
+     * The name of the person or entity represented by the avatar. This is used for accessibility purposes.
+     *
+     * @example
+     *     Jane Doe
+     *
+     * @required
+     */
+    name: string;
     /**
      * The size of the avatar.
      *
@@ -29,14 +37,29 @@ export type AvatarProps = CommonProps<'aria-label'> & {
      * @default grey
      */
     color?: ColorVariant;
-    /** The initials to display in the avatar limited to 2 characters. */
+    /**
+     * The initials to display in the avatar limited to 2 characters.
+     *
+     * @example
+     *     JD;
+     */
     initials?: string;
-    /** The icon to display in the avatar. */
+    /**
+     * The icon to display in the avatar. This needs to be an icon from the @bspk/icons library.
+     *
+     *     import { SvgPerson } from '@bspk/icons/Person';
+     *
+     * @example
+     *     <SvgPerson />;
+     */
     icon?: ReactNode;
-    /** The url to the image to display in the avatar. */
+    /**
+     * The url to the image to display in the avatar.
+     *
+     * @example
+     *     '/user/e3232/avatar.jpg';
+     */
     image?: string;
-    /** The number of notifications not displayed in a list. */
-    overflowCount?: number;
 };
 
 /**
@@ -45,32 +68,35 @@ export type AvatarProps = CommonProps<'aria-label'> & {
  *
  * @name Avatar
  */
-function Avatar({
-    initials,
-    color = 'grey',
-    size = 'small',
-    icon,
-    image,
-    'aria-label': ariaLabel,
-    overflowCount,
-}: AvatarProps) {
+function Avatar({ initials: initialsProp, color = 'grey', size = 'small', icon, image, name: ariaLabel }: AvatarProps) {
     const children = useMemo(() => {
-        if (initials) return <span data-initials>{initials}</span>;
-        if (icon) return <span data-icon>{icon}</span>;
         if (image) return <img alt={ariaLabel} src={image} />;
-        if (overflowCount) return <span data-overflow-count>+{overflowCount}</span>;
+        if (icon) return <span data-icon>{icon}</span>;
+
+        let initials = initialsProp;
+
+        if (ariaLabel && !initials)
+            initials = ariaLabel
+                .split(' ')
+                .map((word) => word.charAt(0))
+                .slice(0, 2)
+                .join('')
+                .toUpperCase();
+
+        if (initials) return <span data-initials>{initials.slice(0, 2)}</span>;
+
         return null;
-    }, [ariaLabel, icon, image, initials, overflowCount]);
+    }, [ariaLabel, icon, image, initialsProp]);
 
-    return (
-        <>
-            {children && (
-                <div aria-label={ariaLabel} data-bspk="avatar" data-color={color} data-size={size}>
-                    {children}
-                </div>
-            )}
-        </>
+    if (!children) return null;
+
+    const avatar = (
+        <div aria-label={ariaLabel} data-bspk="avatar" data-color={color} data-size={size}>
+            {children}
+        </div>
     );
+
+    return <Tooltip label={ariaLabel}>{avatar}</Tooltip>;
 }
 
 Avatar.bspkName = 'Avatar';