@cerberus-design/react 0.8.1-next-9e4427f → 0.8.1-next-1c8242e

package/src/components/Avatar.tsx

@@ -4,7 +4,7 @@ import {
   avatar,
   type AvatarVariantProps,
 } from '@cerberus/styled-system/recipes'
-import { UserFilled } from '@cerberus/icons'
+import { $cerberusIcons } from '../config/defineIcons'
 import type { HtmlHTMLAttributes, ReactNode } from 'react'
 import { Show } from './Show'
 
@@ -13,19 +13,21 @@ import { Show } from './Show'
  * @module
  */
 
-export type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> & {
-  ariaLabel: string
-  as?: never
-  src: string
+export type SharedAvatarProps = {
+  icon?: ReactNode
   width?: number
   height?: number
 }
-export type AvatarAsProps = {
+export type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> &
+  SharedAvatarProps & {
+    ariaLabel: string
+    as?: never
+    src: string
+  }
+export type AvatarAsProps = SharedAvatarProps & {
   as: ReactNode
   ariaLabel?: never
   src?: never
-  width?: never
-  height?: never
 }
 
 export type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &
@@ -44,8 +46,18 @@ export type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &
  * ```
  */
 export function Avatar(props: AvatarProps) {
-  const { ariaLabel, as, gradient, size, src, width, height, ...nativeProps } =
-    props
+  const {
+    ariaLabel,
+    as,
+    gradient,
+    size,
+    src,
+    width,
+    height,
+    icon,
+    ...nativeProps
+  } = props
+  const { avatar: AvatarIcon } = $cerberusIcons
   const initials = (ariaLabel || '')
     .split(' ')
     .map((word) => word[0])
@@ -67,12 +79,19 @@ export function Avatar(props: AvatarProps) {
           <Show
             when={Boolean(initials)}
             fallback={
-              <UserFilled
-                size={iconSizeMap[size as keyof typeof iconSizeMap]}
-              />
+              <Show
+                when={Boolean(icon)}
+                fallback={
+                  <AvatarIcon
+                    size={iconSizeMap[size as keyof typeof iconSizeMap]}
+                  />
+                }
+              >
+                {icon}
+              </Show>
             }
           >
-            <>{initials}</>
+            {initials}
           </Show>
         }
       >

package/src/config/cerbIcons.ts

@@ -9,6 +9,7 @@ import {
   InformationFilled,
   Restart,
   TrashCan,
+  UserFilled,
   Warning,
   WarningFilled,
   type CarbonIconType,
@@ -19,6 +20,7 @@ import { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'
 export type IconType = CarbonIconType | ElementType
 
 export interface DefinedIcons {
+  avatar?: IconType
   checkbox?: IconType
   close?: IconType
   confirmModal?: IconType
@@ -38,6 +40,7 @@ export interface DefinedIcons {
 }
 
 export const defaultIcons: DefinedIcons = {
+  avatar: UserFilled,
   checkbox: CheckmarkIcon,
   close: CloseFilled,
   confirmModal: Information,

package/build/modern/chunk-GUECLKHY.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  CheckmarkFilled,\n  ChevronDown,\n  CloseFilled,\n  CloudUpload,\n  ErrorFilled,\n  Information,\n  InformationFilled,\n  Restart,\n  TrashCan,\n  Warning,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  checkbox?: IconType\n  close?: IconType\n  confirmModal?: IconType\n  delete?: IconType\n  promptModal?: IconType\n  fileUploader?: IconType\n  indeterminate?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  invalidAlt?: IconType\n  redo?: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  checkbox: CheckmarkIcon,\n  close: CloseFilled,\n  confirmModal: Information,\n  delete: TrashCan,\n  promptModal: Information,\n  fileUploader: CloudUpload,\n  indeterminate: IndeterminateIcon,\n  infoNotification: InformationFilled,\n  successNotification: CheckmarkFilled,\n  warningNotification: WarningFilled,\n  dangerNotification: ErrorFilled,\n  invalid: WarningFilled,\n  invalidAlt: Warning,\n  redo: Restart,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n"],"mappings":";;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAyBA,IAAM,eAA6B;AAAA,EACxC,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,aAAa;AAAA,EACb,eAAe;AACjB;","names":[]}

package/build/modern/chunk-ZYXEVTIX.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Avatar.tsx"],"sourcesContent":["import { css, cx } from '@cerberus/styled-system/css'\nimport { circle } from '@cerberus/styled-system/patterns'\nimport {\n  avatar,\n  type AvatarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { UserFilled } from '@cerberus/icons'\nimport type { HtmlHTMLAttributes, ReactNode } from 'react'\nimport { Show } from './Show'\n\n/**\n * This module contains the Avatar component.\n * @module\n */\n\nexport type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> & {\n  ariaLabel: string\n  as?: never\n  src: string\n  width?: number\n  height?: number\n}\nexport type AvatarAsProps = {\n  as: ReactNode\n  ariaLabel?: never\n  src?: never\n  width?: never\n  height?: never\n}\n\nexport type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &\n  AvatarVariantProps) &\n  (AvatarImageProps | AvatarAsProps)\n\n/**\n * The Avatar component is used to represent a user or entity. It will show an image if src provided, otherwise it will show the ariaLabel of the ariaLabel. If the ariaLabel is empty, it will show a `defineIcons().avatar` icon.\n * @definition [Avatar docs](https://cerberus.digitalu.design/react/avatar)\n * @example\n * ```tsx\n * <Avatar\n *   ariaLabel=\"Protector Cerberus\"\n *   src=\"https://cerberus.digitalu.design/logo.svg\"\n * />\n * ```\n */\nexport function Avatar(props: AvatarProps) {\n  const { ariaLabel, as, gradient, size, src, width, height, ...nativeProps } =\n    props\n  const initials = (ariaLabel || '')\n    .split(' ')\n    .map((word) => word[0])\n    .join('')\n    .slice(0, 2)\n\n  return (\n    <div\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        avatar({ gradient, size }),\n        circle(),\n      )}\n    >\n      <Show\n        when={Boolean(src) || Boolean(as)}\n        fallback={\n          <Show\n            when={Boolean(initials)}\n            fallback={\n              <UserFilled\n                size={iconSizeMap[size as keyof typeof iconSizeMap]}\n              />\n            }\n          >\n            <>{initials}</>\n          </Show>\n        }\n      >\n        <Show\n          when={Boolean(as)}\n          fallback={\n            <img\n              alt={props.ariaLabel}\n              className={css({\n                h: 'full',\n                objectFit: 'cover',\n                w: 'full',\n              })}\n              decoding=\"async\"\n              loading=\"lazy\"\n              src={src}\n              height={height}\n              width={width}\n            />\n          }\n        >\n          {as}\n        </Show>\n      </Show>\n    </div>\n  )\n}\n\nconst iconSizeMap = {\n  xs: 16,\n  sm: 16,\n  md: 20,\n  lg: 34,\n  xl: 32,\n  '2xl': 32,\n  '3xl': 32,\n  '4xl': 32,\n}\n"],"mappings":";;;;;AAAA,SAAS,KAAK,UAAU;AACxB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAEK;AACP,SAAS,kBAAkB;AA+Db,SAKF,UALE;AAxBP,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,WAAW,IAAI,UAAU,MAAM,KAAK,OAAO,QAAQ,GAAG,YAAY,IACxE;AACF,QAAM,YAAY,aAAa,IAC5B,MAAM,GAAG,EACT,IAAI,CAAC,SAAS,KAAK,CAAC,CAAC,EACrB,KAAK,EAAE,EACP,MAAM,GAAG,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO,EAAE,UAAU,KAAK,CAAC;AAAA,QACzB,OAAO;AAAA,MACT;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,QAAQ,GAAG,KAAK,QAAQ,EAAE;AAAA,UAChC,UACE;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,QAAQ,QAAQ;AAAA,cACtB,UACE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,YAAY,IAAgC;AAAA;AAAA,cACpD;AAAA,cAGF,0CAAG,oBAAS;AAAA;AAAA,UACd;AAAA,UAGF;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,QAAQ,EAAE;AAAA,cAChB,UACE;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK,MAAM;AAAA,kBACX,WAAW,IAAI;AAAA,oBACb,GAAG;AAAA,oBACH,WAAW;AAAA,oBACX,GAAG;AAAA,kBACL,CAAC;AAAA,kBACD,UAAS;AAAA,kBACT,SAAQ;AAAA,kBACR;AAAA,kBACA;AAAA,kBACA;AAAA;AAAA,cACF;AAAA,cAGD;AAAA;AAAA,UACH;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;","names":[]}