@cerberus-design/react 0.8.1 → 0.9.0

package/build/modern/context/prompt-modal.js

@@ -2,21 +2,21 @@
 import {
   PromptModal,
   usePromptModal
-} from "../chunk-S6CMAXQF.js";
-import "../chunk-VCR5C6Q3.js";
+} from "../chunk-CZMC77YO.js";
 import "../chunk-4CAT3FHV.js";
-import "../chunk-53QBTZZF.js";
+import "../chunk-JB7IQ2BM.js";
+import "../chunk-VCR5C6Q3.js";
+import "../chunk-FMFKM2AB.js";
 import "../chunk-2FK7NR7Y.js";
 import "../chunk-2UFNQM55.js";
 import "../chunk-4M4LCQ43.js";
 import "../chunk-QU7UV5DB.js";
-import "../chunk-JB7IQ2BM.js";
 import "../chunk-6F34A7NZ.js";
 import "../chunk-4O4QFF4S.js";
 import "../chunk-ZAU4JVLL.js";
 import "../chunk-JIZQFTW6.js";
-import "../chunk-5WVXIAG2.js";
-import "../chunk-GUECLKHY.js";
+import "../chunk-NBG2OSYI.js";
+import "../chunk-BDCFYW34.js";
 import "../chunk-CP7OUC2Q.js";
 import "../chunk-C5HLLGME.js";
 export {

package/build/modern/index.js

@@ -1,11 +1,19 @@
+import {
+  ConfirmModal,
+  useConfirmModal
+} from "./chunk-GB3SECCO.js";
 import {
   NotificationCenter,
   useNotificationCenter
-} from "./chunk-VPWBSZAR.js";
+} from "./chunk-KKJKOKP7.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-S6CMAXQF.js";
+} from "./chunk-CZMC77YO.js";
+import {
+  Table,
+  Tr
+} from "./chunk-A5WYZVUR.js";
 import {
   Tag
 } from "./chunk-Z6IWNVPN.js";
@@ -26,18 +34,17 @@ import {
 } from "./chunk-N3FUF4TB.js";
 import {
   Toggle
-} from "./chunk-ID3XWGLY.js";
+} from "./chunk-4YJOK7JJ.js";
 import {
-  ConfirmModal,
-  useConfirmModal
-} from "./chunk-GZY6CH7D.js";
+  Portal
+} from "./chunk-4CAT3FHV.js";
 import {
   Radio
 } from "./chunk-PH64POOB.js";
 import {
   Option,
   Select
-} from "./chunk-RHG26FYL.js";
+} from "./chunk-VRPAW76S.js";
 import {
   Tab
 } from "./chunk-SONHHNYQ.js";
@@ -48,9 +55,8 @@ import {
   TabPanel
 } from "./chunk-U72VPIZA.js";
 import {
-  Table,
-  Tr
-} from "./chunk-A5WYZVUR.js";
+  ModalHeading
+} from "./chunk-JB7IQ2BM.js";
 import {
   ModalIcon
 } from "./chunk-VCR5C6Q3.js";
@@ -70,7 +76,7 @@ import {
 } from "./chunk-KJUCHZHV.js";
 import {
   Notification
-} from "./chunk-EJIMJWPB.js";
+} from "./chunk-QZ6NS6VN.js";
 import {
   NotificationDescription
 } from "./chunk-HW76XVA3.js";
@@ -78,14 +84,21 @@ import {
   NotificationHeading
 } from "./chunk-3C2DJSEE.js";
 import {
-  Portal
-} from "./chunk-4CAT3FHV.js";
+  FileStatus,
+  processStatus
+} from "./chunk-MLCVO7JP.js";
+import {
+  ProgressBar
+} from "./chunk-TYTEREKZ.js";
 import {
   FileUploader
-} from "./chunk-TF3HRELU.js";
+} from "./chunk-TUIVLIJI.js";
+import {
+  IconButton
+} from "./chunk-SLHX5K6I.js";
 import {
   Input
-} from "./chunk-53QBTZZF.js";
+} from "./chunk-FMFKM2AB.js";
 import {
   Label
 } from "./chunk-2FK7NR7Y.js";
@@ -98,9 +111,6 @@ import {
 import {
   ModalHeader
 } from "./chunk-QU7UV5DB.js";
-import {
-  ModalHeading
-} from "./chunk-JB7IQ2BM.js";
 import {
   MODE_KEY,
   THEME_KEY,
@@ -111,12 +121,15 @@ import {
 import {
   useToggle
 } from "./chunk-QEA6N6TN.js";
+import {
+  Avatar
+} from "./chunk-UN3OAW56.js";
 import {
   Button
 } from "./chunk-6F34A7NZ.js";
 import {
   Checkbox
-} from "./chunk-4FD33RTW.js";
+} from "./chunk-ZCIJRM2X.js";
 import {
   Droppable
 } from "./chunk-7VJOPJVX.js";
@@ -130,16 +143,6 @@ import {
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
-import {
-  FileStatus,
-  processStatus
-} from "./chunk-7NX4RGDB.js";
-import {
-  ProgressBar
-} from "./chunk-TYTEREKZ.js";
-import {
-  IconButton
-} from "./chunk-SLHX5K6I.js";
 import {
   FieldMessage
 } from "./chunk-VGHVH2T3.js";
@@ -165,8 +168,8 @@ import {
 import {
   $cerberusIcons,
   defineIcons
-} from "./chunk-5WVXIAG2.js";
-import "./chunk-GUECLKHY.js";
+} from "./chunk-NBG2OSYI.js";
+import "./chunk-BDCFYW34.js";
 import "./chunk-CP7OUC2Q.js";
 import {
   useModal
@@ -176,6 +179,7 @@ import {
 export * from "@dnd-kit/core";
 export {
   $cerberusIcons,
+  Avatar,
   Button,
   Checkbox,
   ConfirmModal,

package/build/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/ModalIcon'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8EA,cAAc;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/ModalIcon'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+EA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -26,7 +26,7 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.8.1"
+    "@cerberus-design/styled-system": "0.9.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Avatar.tsx

@@ -0,0 +1,132 @@
+import { css, cx } from '@cerberus/styled-system/css'
+import { circle } from '@cerberus/styled-system/patterns'
+import {
+  avatar,
+  type AvatarVariantProps,
+} from '@cerberus/styled-system/recipes'
+import { $cerberusIcons } from '../config/defineIcons'
+import type { HtmlHTMLAttributes, ReactNode } from 'react'
+import { Show } from './Show'
+
+/**
+ * This module contains the Avatar component.
+ * @module
+ */
+
+export type SharedAvatarProps = {
+  icon?: ReactNode
+  width?: number
+  height?: number
+}
+export type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> &
+  SharedAvatarProps & {
+    ariaLabel: string
+    as?: never
+    src: string
+  }
+export type AvatarAsProps = SharedAvatarProps & {
+  as: ReactNode
+  ariaLabel?: never
+  src?: never
+}
+
+export type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &
+  AvatarVariantProps) &
+  (AvatarImageProps | AvatarAsProps)
+
+/**
+ * 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.
+ * @definition [Avatar docs](https://cerberus.digitalu.design/react/avatar)
+ * @example
+ * ```tsx
+ * <Avatar
+ *   ariaLabel="Protector Cerberus"
+ *   src="https://cerberus.digitalu.design/logo.svg"
+ * />
+ * ```
+ */
+export function Avatar(props: AvatarProps) {
+  const {
+    ariaLabel,
+    as,
+    gradient,
+    size,
+    src,
+    width,
+    height,
+    icon,
+    ...nativeProps
+  } = props
+  const { avatar: AvatarIcon } = $cerberusIcons
+  const initials = (ariaLabel || '')
+    .split(' ')
+    .map((word) => word[0])
+    .join('')
+    .slice(0, 2)
+
+  return (
+    <div
+      {...nativeProps}
+      className={cx(
+        nativeProps.className,
+        avatar({ gradient, size }),
+        circle(),
+      )}
+    >
+      <Show
+        when={Boolean(src) || Boolean(as)}
+        fallback={
+          <Show
+            when={Boolean(initials)}
+            fallback={
+              <Show
+                when={Boolean(icon)}
+                fallback={
+                  <AvatarIcon
+                    size={iconSizeMap[size as keyof typeof iconSizeMap]}
+                  />
+                }
+              >
+                {icon}
+              </Show>
+            }
+          >
+            {initials}
+          </Show>
+        }
+      >
+        <Show
+          when={Boolean(as)}
+          fallback={
+            <img
+              alt={props.ariaLabel}
+              className={css({
+                h: 'full',
+                objectFit: 'cover',
+                w: 'full',
+              })}
+              decoding="async"
+              loading="lazy"
+              src={src}
+              height={height}
+              width={width}
+            />
+          }
+        >
+          {as}
+        </Show>
+      </Show>
+    </div>
+  )
+}
+
+const iconSizeMap = {
+  xs: 16,
+  sm: 16,
+  md: 20,
+  lg: 34,
+  xl: 32,
+  '2xl': 32,
+  '3xl': 32,
+  '4xl': 32,
+}

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/src/index.ts

@@ -5,6 +5,7 @@
 
 // components
 
+export * from './components/Avatar'
 export * from './components/Button'
 export * from './components/Checkbox'
 export * from './components/Droppable'

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":[]}