@bspk/ui 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "main": "index.js",
     "license": "CC-BY-4.0",
     "scripts": {
@@ -27,7 +27,7 @@
         "node": ">=20"
     },
     "dependencies": {
-        "@bspk/icons": "^1.0.2",
+        "@bspk/icons": "^1.0.3",
         "@bspk/styles": "^1.0.0",
         "@floating-ui/dom": "^1.6.13",
         "focus-trap-react": "^11.0.1"
@@ -66,7 +66,7 @@
         "ts-jest": "^29.2.5",
         "ts-node": "^10.9.2",
         "tslib": "^2.8.1",
-        "typescript": "^5.6.3",
+        "typescript": "5.6.3",
         "typescript-eslint": "8.13.0",
         "typescript-json-schema": "^0.65.1"
     }

package/src/{Profile.tsx → Avatar.tsx}

@@ -21,45 +21,43 @@ const SIZE_VARIANTS: Record<SizeVariant, { height: string; font: string }> = {
     small: { font: '--labels-small', height: '--spacing-sizing-08' }, // 32,
     medium: { font: '--labels-base', height: '--spacing-sizing-10' }, // 40
     large: { font: '--labels-large', height: '--spacing-sizing-12' }, //48,
-    'x-large': { font: '--desktop-subheader-x-large', height: '--spacing-sizing-14' }, // 56,
-    'xx-large': { font: '--desktop-subheader-xx-large', height: '--spacing-sizing-17' }, // 72,
-    'xxx-large': { font: '--desktop-display-regular-small', height: '--spacing-sizing-19' }, //96,
-    'xxxx-large': { font: '--desktop-display-regular-medium', height: '--spacing-sizing-21' }, // 120,
-    'xxxxx-large': { font: '--desktop-display-regular-large', height: '--spacing-sizing-23' }, //144,
+    'x-large': { font: '--subheader-x-large', height: '--spacing-sizing-14' }, // 56,
+    'xx-large': { font: '--subheader-xx-large', height: '--spacing-sizing-17' }, // 72,
+    'xxx-large': { font: '--display-regular-small', height: '--spacing-sizing-19' }, //96,
+    'xxxx-large': { font: '--display-regular-medium', height: '--spacing-sizing-21' }, // 120,
+    'xxxxx-large': { font: '--display-regular-large', height: '--spacing-sizing-23' }, //144,
 };
 
-export type ProfileProps = CommonProps<'aria-label'> & {
+export type AvatarProps = CommonProps<'aria-label'> & {
     /**
-     * The size of the profile.
+     * The size of the avatar.
      *
      * @default small
      */
     size?: SizeVariant;
     /**
-     * The color of the profile.
+     * The color of the avatar.
      *
      * @default grey
      */
     color?: ColorVariant;
-    /** The initials to display in the profile limited to 2 characters. */
+    /** The initials to display in the avatar limited to 2 characters. */
     initials?: string;
-    /** The icon to display in the profile. */
+    /** The icon to display in the avatar. */
     icon?: ReactNode;
-    /** The url to the image to display in the profile. */
+    /** The url to the image to display in the avatar. */
     image?: string;
     /** The number of notifications not displayed in a list. */
     overflowCount?: number;
 };
 
 /**
- * A profile component.
- *
- * A profile is a visual representation of a user or entity. It can be used to display an initials, icon, image, or an
+ * 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 Profile
+ * @name Avatar
  */
-function Profile({
+function Avatar({
     initials,
     color = 'grey',
     size = 'small',
@@ -67,7 +65,7 @@ function Profile({
     image,
     'aria-label': ariaLabel,
     overflowCount,
-}: ProfileProps) {
+}: AvatarProps) {
     const children = useMemo(() => {
         if (initials) return <span data-initials>{initials}</span>;
         if (icon) return <span data-icon>{icon}</span>;
@@ -79,7 +77,7 @@ function Profile({
     return (
         <>
             {children && (
-                <div aria-label={ariaLabel} css={style} data-color={color} data-profile="" data-size={size}>
+                <div aria-label={ariaLabel} css={style} data-avatar="" data-color={color} data-size={size}>
                     {children}
                 </div>
             )}
@@ -87,9 +85,9 @@ function Profile({
     );
 }
 
-Profile.bspkName = 'Profile';
+Avatar.bspkName = 'Avatar';
 
-export { Profile };
+export { Avatar };
 
 export const style = css`
     --height: var(--spacing-sizing-10);

package/src/ListItem.tsx

@@ -7,7 +7,7 @@ import { useErrorLogger } from './utils/errors';
 
 import { CommonProps, ElementProps } from './';
 
-export const LEADING_COMPONENTS = Object.freeze(['Icon', 'Img', 'Profile']);
+export const LEADING_COMPONENTS = Object.freeze(['Icon', 'Img', 'Avatar']);
 
 export const TRAILING_COMPONENTS = Object.freeze([
     'ListItemButton',
@@ -31,7 +31,7 @@ export type ListItemProps<As extends ElementType = 'div'> = CommonProps<'active'
     /**
      * The leading element to display in the ListItem.
      *
-     * Leading elements may only be one of the following [Icon](/icons), Img, Profile.
+     * Leading elements may only be one of the following [Icon](/icons), Img, Avatar.
      */
     leading?: ReactNode;
     /**
@@ -61,7 +61,7 @@ export type ListItemProps<As extends ElementType = 'div'> = CommonProps<'active'
  *
  * The ListItem has three main elements: leading element, label, and trailing element.
  *
- * Leading elements may be one of the following [Icon](/icons), Img, Profile.
+ * Leading elements may be one of the following [Icon](/icons), Img, Avatar.
  *
  * Trailing elements may be one of the following [Icon](/icons), Checkbox, ListItemButton, Radio, Switch, Tag, Txt.
  *

package/src/MenuButton.tsx

@@ -1,21 +1,18 @@
 import { SvgMenu } from '@bspk/icons/Menu';
 import { css } from '@emotion/react';
-import { ElementType } from 'react';
 
 import { ButtonProps } from './Button';
 
 import { ElementProps } from '.';
 
-export type MenuButtonProps<As extends ElementType> = Pick<ButtonProps<As>, 'as' | 'onClick'>;
+export type MenuButtonProps = Pick<ButtonProps, 'as' | 'onClick'>;
 
 /**
  * Utility component used within top navigation.
  *
  * @name MenuButton
  */
-function MenuButton<As extends ElementType = 'button'>({ as, ...props }: ElementProps<MenuButtonProps<As>, As>) {
-    const As: ElementType = as || 'div';
-
+function MenuButton(props: ElementProps<MenuButtonProps, 'button'>) {
     return (
         <button {...props} css={style}>
             <SvgMenu />