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

package/build/legacy/_tsup-dts-rollup.d.cts

@@ -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/legacy/components/Avatar.cjs

@@ -0,0 +1,115 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Avatar.tsx
+var Avatar_exports = {};
+__export(Avatar_exports, {
+  Avatar: () => Avatar
+});
+module.exports = __toCommonJS(Avatar_exports);
+var import_css = require("@cerberus/styled-system/css");
+var import_patterns = require("@cerberus/styled-system/patterns");
+var import_recipes = require("@cerberus/styled-system/recipes");
+var import_icons = require("@cerberus/icons");
+
+// src/components/Show.tsx
+var import_react = require("react");
+function Show(props) {
+  const { when, children, fallback } = props;
+  const condition = (0, import_react.useMemo)(() => when ?? false, [when]);
+  return (0, import_react.useMemo)(() => {
+    if (condition) return children;
+    return fallback ?? null;
+  }, [condition, children, fallback]);
+}
+
+// src/components/Avatar.tsx
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...nativeProps,
+      className: (0, import_css.cx)(
+        nativeProps.className,
+        (0, import_recipes.avatar)({ gradient, size }),
+        (0, import_patterns.circle)()
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Show,
+        {
+          when: Boolean(src) || Boolean(as),
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            Show,
+            {
+              when: Boolean(initials),
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_icons.UserFilled,
+                {
+                  size: iconSizeMap[size]
+                }
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: initials })
+            }
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            Show,
+            {
+              when: Boolean(as),
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "img",
+                {
+                  alt: props.ariaLabel,
+                  className: (0, import_css.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
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Avatar
+});
+//# sourceMappingURL=Avatar.cjs.map

package/build/legacy/components/Avatar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Avatar.tsx","../../../src/components/Show.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","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\nexport interface ShowProps {\n  when: boolean | null | undefined\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render its children or an optional fallback component\n * based on the SolidJS component.\n * @definition [Show docs](https://cerberus.digitalu.design/react/show)\n * @example\n * ```tsx\n * <Show when={condition}>\n *  <div>Content</div>\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAwB;AACxB,sBAAuB;AACvB,qBAGO;AACP,mBAA2B;;;ACJ3B,mBAAgE;AAiBzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;AD0Cc;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,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,uBAAO,EAAE,UAAU,KAAK,CAAC;AAAA,YACzB,wBAAO;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,qFAAG,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,eAAW,gBAAI;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":[]}