@cerberus-design/react 0.8.1-next-a0decf7 → 0.8.1-next-97f2c1c

package/build/modern/_tsup-dts-rollup.d.ts

@@ -6,6 +6,7 @@ import { Announcements } from '@dnd-kit/core';
 import { applyModifiers } from '@dnd-kit/core';
 import { AutoScrollActivator } from '@dnd-kit/core';
 import { AutoScrollOptions } from '@dnd-kit/core';
+import { AvatarVariantProps } from '@cerberus/styled-system/recipes';
 import { ButtonHTMLAttributes } from 'react';
 import { ButtonVariantProps } from '@cerberus/styled-system/recipes';
 import { CancelDrop } from '@dnd-kit/core';
@@ -157,6 +158,49 @@ export { AutoScrollActivator }
 
 export { AutoScrollOptions }
 
+/**
+ * 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"
+ * />
+ * ```
+ */
+declare function Avatar(props: AvatarProps): JSX_2.Element;
+export { Avatar }
+export { Avatar as Avatar_alias_1 }
+
+declare type AvatarAsProps = {
+    as: ReactNode;
+    ariaLabel?: never;
+    src?: never;
+    width?: never;
+    height?: never;
+};
+export { AvatarAsProps }
+export { AvatarAsProps as AvatarAsProps_alias_1 }
+
+/**
+ * This module contains the Avatar component.
+ * @module
+ */
+declare type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> & {
+    ariaLabel: string;
+    as?: never;
+    src: string;
+    width?: number;
+    height?: number;
+};
+export { AvatarImageProps }
+export { AvatarImageProps as AvatarImageProps_alias_1 }
+
+declare type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> & AvatarVariantProps) & (AvatarImageProps | AvatarAsProps);
+export { AvatarProps }
+export { AvatarProps as AvatarProps_alias_1 }
+
 declare interface BaseNotificationDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
 }
 export { BaseNotificationDescriptionProps }

package/build/modern/{chunk-GZY6CH7D.js → chunk-3JF6LWXF.js}

@@ -1,9 +1,12 @@
-import {
-  ModalIcon
-} from "./chunk-VCR5C6Q3.js";
 import {
   Portal
 } from "./chunk-4CAT3FHV.js";
+import {
+  ModalHeading
+} from "./chunk-JB7IQ2BM.js";
+import {
+  ModalIcon
+} from "./chunk-VCR5C6Q3.js";
 import {
   Modal
 } from "./chunk-2UFNQM55.js";
@@ -13,9 +16,6 @@ import {
 import {
   ModalHeader
 } from "./chunk-QU7UV5DB.js";
-import {
-  ModalHeading
-} from "./chunk-JB7IQ2BM.js";
 import {
   Button
 } from "./chunk-6F34A7NZ.js";
@@ -151,4 +151,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-GZY6CH7D.js.map
+//# sourceMappingURL=chunk-3JF6LWXF.js.map

package/build/modern/{chunk-S6CMAXQF.js → chunk-HMYC7CR3.js}

@@ -1,9 +1,12 @@
-import {
-  ModalIcon
-} from "./chunk-VCR5C6Q3.js";
 import {
   Portal
 } from "./chunk-4CAT3FHV.js";
+import {
+  ModalHeading
+} from "./chunk-JB7IQ2BM.js";
+import {
+  ModalIcon
+} from "./chunk-VCR5C6Q3.js";
 import {
   Input
 } from "./chunk-53QBTZZF.js";
@@ -19,9 +22,6 @@ import {
 import {
   ModalHeader
 } from "./chunk-QU7UV5DB.js";
-import {
-  ModalHeading
-} from "./chunk-JB7IQ2BM.js";
 import {
   Button
 } from "./chunk-6F34A7NZ.js";
@@ -204,4 +204,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-S6CMAXQF.js.map
+//# sourceMappingURL=chunk-HMYC7CR3.js.map

package/build/modern/{chunk-VPWBSZAR.js → chunk-OGAH7HBD.js}

@@ -1,3 +1,6 @@
+import {
+  Portal
+} from "./chunk-4CAT3FHV.js";
 import {
   Notification
 } from "./chunk-EJIMJWPB.js";
@@ -7,9 +10,6 @@ import {
 import {
   NotificationHeading
 } from "./chunk-3C2DJSEE.js";
-import {
-  Portal
-} from "./chunk-4CAT3FHV.js";
 import {
   Button
 } from "./chunk-6F34A7NZ.js";
@@ -119,4 +119,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-VPWBSZAR.js.map
+//# sourceMappingURL=chunk-OGAH7HBD.js.map

package/build/modern/chunk-ZYXEVTIX.js

@@ -0,0 +1,84 @@
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
+
+// src/components/Avatar.tsx
+import { css, cx } from "@cerberus/styled-system/css";
+import { circle } from "@cerberus/styled-system/patterns";
+import {
+  avatar
+} from "@cerberus/styled-system/recipes";
+import { UserFilled } from "@cerberus/icons";
+import { Fragment, jsx } from "react/jsx-runtime";
+function Avatar(props) {
+  const { ariaLabel, as, gradient, size, src, width, height, ...nativeProps } = props;
+  const initials = (ariaLabel || "").split(" ").map((word) => word[0]).join("").slice(0, 2);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...nativeProps,
+      className: cx(
+        nativeProps.className,
+        avatar({ gradient, size }),
+        circle()
+      ),
+      children: /* @__PURE__ */ jsx(
+        Show,
+        {
+          when: Boolean(src) || Boolean(as),
+          fallback: /* @__PURE__ */ jsx(
+            Show,
+            {
+              when: Boolean(initials),
+              fallback: /* @__PURE__ */ jsx(
+                UserFilled,
+                {
+                  size: iconSizeMap[size]
+                }
+              ),
+              children: /* @__PURE__ */ jsx(Fragment, { children: initials })
+            }
+          ),
+          children: /* @__PURE__ */ jsx(
+            Show,
+            {
+              when: Boolean(as),
+              fallback: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  alt: props.ariaLabel,
+                  className: css({
+                    h: "full",
+                    objectFit: "cover",
+                    w: "full"
+                  }),
+                  decoding: "async",
+                  loading: "lazy",
+                  src,
+                  height,
+                  width
+                }
+              ),
+              children: as
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var iconSizeMap = {
+  xs: 16,
+  sm: 16,
+  md: 20,
+  lg: 34,
+  xl: 32,
+  "2xl": 32,
+  "3xl": 32,
+  "4xl": 32
+};
+
+export {
+  Avatar
+};
+//# sourceMappingURL=chunk-ZYXEVTIX.js.map

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

@@ -0,0 +1 @@
+{"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":[]}

package/build/modern/components/Avatar.js

@@ -0,0 +1,8 @@
+import {
+  Avatar
+} from "../chunk-ZYXEVTIX.js";
+import "../chunk-4O4QFF4S.js";
+export {
+  Avatar
+};
+//# sourceMappingURL=Avatar.js.map

package/build/modern/components/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

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

@@ -2,13 +2,13 @@
 import {
   ConfirmModal,
   useConfirmModal
-} from "../chunk-GZY6CH7D.js";
-import "../chunk-VCR5C6Q3.js";
+} from "../chunk-3JF6LWXF.js";
 import "../chunk-4CAT3FHV.js";
+import "../chunk-JB7IQ2BM.js";
+import "../chunk-VCR5C6Q3.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-JIZQFTW6.js";

package/build/modern/context/notification-center.js

@@ -2,11 +2,11 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "../chunk-VPWBSZAR.js";
+} from "../chunk-OGAH7HBD.js";
+import "../chunk-4CAT3FHV.js";
 import "../chunk-EJIMJWPB.js";
 import "../chunk-HW76XVA3.js";
 import "../chunk-3C2DJSEE.js";
-import "../chunk-4CAT3FHV.js";
 import "../chunk-6F34A7NZ.js";
 import "../chunk-4O4QFF4S.js";
 import "../chunk-JIZQFTW6.js";

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

@@ -2,15 +2,15 @@
 import {
   PromptModal,
   usePromptModal
-} from "../chunk-S6CMAXQF.js";
-import "../chunk-VCR5C6Q3.js";
+} from "../chunk-HMYC7CR3.js";
 import "../chunk-4CAT3FHV.js";
+import "../chunk-JB7IQ2BM.js";
+import "../chunk-VCR5C6Q3.js";
 import "../chunk-53QBTZZF.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";

package/build/modern/index.js

@@ -1,11 +1,19 @@
+import {
+  ConfirmModal,
+  useConfirmModal
+} from "./chunk-3JF6LWXF.js";
 import {
   NotificationCenter,
   useNotificationCenter
-} from "./chunk-VPWBSZAR.js";
+} from "./chunk-OGAH7HBD.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-S6CMAXQF.js";
+} from "./chunk-HMYC7CR3.js";
+import {
+  Table,
+  Tr
+} from "./chunk-A5WYZVUR.js";
 import {
   Tag
 } from "./chunk-Z6IWNVPN.js";
@@ -28,9 +36,8 @@ import {
   Toggle
 } from "./chunk-ID3XWGLY.js";
 import {
-  ConfirmModal,
-  useConfirmModal
-} from "./chunk-GZY6CH7D.js";
+  Portal
+} from "./chunk-4CAT3FHV.js";
 import {
   Radio
 } from "./chunk-PH64POOB.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";
@@ -78,11 +84,18 @@ import {
   NotificationHeading
 } from "./chunk-3C2DJSEE.js";
 import {
-  Portal
-} from "./chunk-4CAT3FHV.js";
+  FileStatus,
+  processStatus
+} from "./chunk-7NX4RGDB.js";
+import {
+  ProgressBar
+} from "./chunk-TYTEREKZ.js";
 import {
   FileUploader
 } from "./chunk-TF3HRELU.js";
+import {
+  IconButton
+} from "./chunk-SLHX5K6I.js";
 import {
   Input
 } from "./chunk-53QBTZZF.js";
@@ -98,9 +111,6 @@ import {
 import {
   ModalHeader
 } from "./chunk-QU7UV5DB.js";
-import {
-  ModalHeading
-} from "./chunk-JB7IQ2BM.js";
 import {
   MODE_KEY,
   THEME_KEY,
@@ -111,6 +121,9 @@ import {
 import {
   useToggle
 } from "./chunk-QEA6N6TN.js";
+import {
+  Avatar
+} from "./chunk-ZYXEVTIX.js";
 import {
   Button
 } from "./chunk-6F34A7NZ.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";
@@ -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-next-a0decf7",
+  "version": "0.8.1-next-97f2c1c",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -25,8 +25,8 @@
     "react": "^18",
     "react-dom": "^18",
     "tsup": "^8.1.0",
-    "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.8.1-next-a0decf7"
+    "@cerberus-design/styled-system": "0.8.1-next-97f2c1c",
+    "@cerberus-design/configs": "0.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Avatar.tsx

@@ -0,0 +1,113 @@
+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 { UserFilled } from '@cerberus/icons'
+import type { HtmlHTMLAttributes, ReactNode } from 'react'
+import { Show } from './Show'
+
+/**
+ * This module contains the Avatar component.
+ * @module
+ */
+
+export type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> & {
+  ariaLabel: string
+  as?: never
+  src: string
+  width?: number
+  height?: number
+}
+export type AvatarAsProps = {
+  as: ReactNode
+  ariaLabel?: never
+  src?: never
+  width?: never
+  height?: 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, ...nativeProps } =
+    props
+  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={
+              <UserFilled
+                size={iconSizeMap[size as keyof typeof iconSizeMap]}
+              />
+            }
+          >
+            <>{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/index.ts

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