@avenue-ticketing/ui 0.11.0 → 0.12.0-beta.2

package/dist/react/avatar-profile-photo.js

@@ -0,0 +1,202 @@
+import { useState } from 'react';
+import { UserIcon } from '@phosphor-icons/react/dist/csr/User';
+import { extendTailwindMerge } from 'tailwind-merge';
+import '@phosphor-icons/react/dist/csr/Plus';
+import 'react-aria-components';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+var sizes = {
+  xs: "size-1.5",
+  sm: "size-2",
+  md: "size-2.5",
+  lg: "size-3",
+  xl: "size-3.5",
+  "2xl": "size-4",
+  "3xl": "size-4.5",
+  "4xl": "size-5"
+};
+var AvatarOnlineIndicator = ({ size, status, className }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cx(
+      "absolute right-0 bottom-0 flex justify-center rounded-full ring-[1.5px] ring-bg-primary",
+      status === "online" ? "bg-fg-success-secondary" : "bg-utility-neutral-300",
+      sizes[size],
+      className
+    ),
+    style: {
+      backgroundImage: "radial-gradient(43.75% 43.75% at 50% 28.75%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.00) 74.66%, rgba(255, 255, 255, 0.18) 100%), radial-gradient(75% 75% at 50% 0%, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.08) 99%, rgba(255, 255, 255, 0.00) 100%)"
+    },
+    children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 7.2 2.85", fill: "none", className: "mt-[10%] h-[20%] w-[60%]", children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M7.2 1.83107C7.2 2.84235 5.58823 2.19729 3.6 2.19729C1.61177 2.19729 0 2.84235 0 1.83107C0 0.8198 1.61177 0 3.6 0C5.58823 0 7.2 0.8198 7.2 1.83107Z",
+          fill: "url(#reflection-gradient)",
+          fillOpacity: "0.4"
+        }
+      ),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "reflection-gradient", x1: "3.6", y1: "0", x2: "3.6", y2: "2.4", gradientUnits: "userSpaceOnUse", children: [
+        /* @__PURE__ */ jsx("stop", { stopColor: "white" }),
+        /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "white", stopOpacity: "0.1" })
+      ] }) })
+    ] })
+  }
+);
+var sizes2 = {
+  xs: "size-2.5",
+  sm: "size-3",
+  md: "size-3.5",
+  lg: "size-4",
+  xl: "size-4.5",
+  "2xl": "size-5",
+  "3xl": "size-6",
+  "4xl": "size-8"
+};
+var VerifiedTick = ({ size, className }) => /* @__PURE__ */ jsxs("svg", { className: cx("z-10 text-utility-blue-500", sizes2[size], className), viewBox: "0 0 10 10", fill: "none", children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M7.72237 1.77098C7.81734 2.00068 7.99965 2.18326 8.2292 2.27858L9.03413 2.61199C9.26384 2.70714 9.44635 2.88965 9.5415 3.11936C9.63665 3.34908 9.63665 3.60718 9.5415 3.83689L9.20833 4.64125C9.11313 4.87106 9.113 5.12943 9.20863 5.35913L9.54122 6.16325C9.58839 6.27702 9.61268 6.39897 9.6127 6.52214C9.61272 6.6453 9.58847 6.76726 9.54134 6.88105C9.4942 6.99484 9.42511 7.09823 9.33801 7.18531C9.2509 7.27238 9.14749 7.34144 9.03369 7.38854L8.22934 7.72171C7.99964 7.81669 7.81706 7.99899 7.72174 8.22855L7.38833 9.03348C7.29318 9.26319 7.11067 9.4457 6.88096 9.54085C6.65124 9.636 6.39314 9.636 6.16343 9.54085L5.35907 9.20767C5.12935 9.11276 4.87134 9.11295 4.64177 9.20821L3.83684 9.54115C3.60725 9.63608 3.34937 9.636 3.11984 9.54092C2.89032 9.44585 2.70791 9.26356 2.6127 9.03409L2.27918 8.22892C2.18421 7.99923 2.0019 7.81665 1.77235 7.72133L0.967421 7.38792C0.737807 7.29281 0.555355 7.11041 0.460169 6.88083C0.364983 6.65125 0.364854 6.39327 0.45981 6.16359L0.792984 5.35924C0.8879 5.12952 0.887707 4.87151 0.792445 4.64193L0.459749 3.83642C0.41258 3.72265 0.388291 3.60069 0.388272 3.47753C0.388252 3.35436 0.412501 3.2324 0.459634 3.11861C0.506767 3.00482 0.57586 2.90144 0.662965 2.81436C0.75007 2.72728 0.853479 2.65822 0.967283 2.61113L1.77164 2.27795C2.00113 2.18306 2.1836 2.00099 2.27899 1.7717L2.6124 0.966768C2.70755 0.737054 2.89006 0.554547 3.11978 0.459397C3.34949 0.364246 3.60759 0.364246 3.83731 0.459397L4.64166 0.792571C4.87138 0.887487 5.12939 0.887293 5.35897 0.792031L6.16424 0.459913C6.39392 0.364816 6.65197 0.364836 6.88164 0.459968C7.11131 0.555099 7.29379 0.737554 7.38895 0.967208L7.72247 1.77238L7.72237 1.77098Z",
+      className: "fill-current"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M6.95829 3.68932C7.02509 3.58439 7.04747 3.45723 7.02051 3.3358C6.99356 3.21437 6.91946 3.10862 6.81454 3.04182C6.70961 2.97502 6.58245 2.95264 6.46102 2.97959C6.33959 3.00655 6.23384 3.08064 6.16704 3.18557L4.33141 6.06995L3.49141 5.01995C3.41375 4.92281 3.30069 4.8605 3.17709 4.84673C3.05349 4.83296 2.92949 4.86885 2.83235 4.94651C2.73522 5.02417 2.67291 5.13723 2.65914 5.26083C2.64536 5.38443 2.68125 5.50843 2.75891 5.60557L4.00891 7.16807C4.0555 7.22638 4.11533 7.27271 4.18344 7.30323C4.25154 7.33375 4.32595 7.34757 4.40047 7.34353C4.47499 7.3395 4.54747 7.31773 4.61188 7.28004C4.67629 7.24234 4.73077 7.18981 4.77079 7.12682L6.95829 3.68932Z",
+      fill: "white"
+    }
+  )
+] });
+var styles = {
+  sm: {
+    root: "size-18 p-0.75",
+    rootWithPlaceholder: "p-1",
+    content: "outline-[0.5px] -outline-offset-[0.5px] before:border",
+    icon: "size-9",
+    initials: "text-display-sm font-semibold",
+    badge: "bottom-0.5 right-0.5"
+  },
+  md: {
+    root: "size-24 p-1",
+    rootWithPlaceholder: "p-1.25",
+    content: "shadow-xl outline-[0.75px] -outline-offset-[0.75px] before:border-[1.5px]",
+    icon: "size-12",
+    initials: "text-display-md font-semibold",
+    badge: "bottom-1 right-1"
+  },
+  lg: {
+    root: "size-40 p-1.5",
+    rootWithPlaceholder: "p-1.75",
+    content: "shadow-2xl outline-[0.75px] -outline-offset-[0.75px] before:border-[1.5px]",
+    icon: "size-20",
+    initials: "text-display-xl font-semibold",
+    badge: "bottom-2 right-2"
+  }
+};
+var tickSizeMap = {
+  sm: "2xl",
+  md: "3xl",
+  lg: "4xl"
+};
+var AvatarProfilePhoto = ({
+  size = "md",
+  src,
+  alt,
+  initials,
+  placeholder,
+  placeholderIcon: PlaceholderIcon,
+  verified,
+  badge,
+  status,
+  className
+}) => {
+  const [isFailed, setIsFailed] = useState(false);
+  const renderMainContent = () => {
+    if (src && !isFailed) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cx(
+            "relative size-full overflow-hidden rounded-full outline-black/16 before:absolute before:inset-0 before:rounded-full before:border-white/32 before:mask-[linear-gradient(to_bottom,black_0%,transparent_25%,transparent_75%,black_100%)]",
+            styles[size].content
+          ),
+          children: /* @__PURE__ */ jsx("img", { src, alt, onError: () => setIsFailed(true), className: "size-full object-cover" })
+        }
+      );
+    }
+    if (initials) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cx(
+            "flex size-full items-center justify-center rounded-full bg-tertiary ring-1 ring-secondary_alt outline-transparent before:hidden",
+            styles[size].content
+          ),
+          children: /* @__PURE__ */ jsx("span", { className: cx("text-quaternary", styles[size].initials), children: initials })
+        }
+      );
+    }
+    if (PlaceholderIcon) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cx(
+            "flex size-full items-center justify-center rounded-full bg-tertiary ring-1 ring-secondary_alt outline-transparent before:hidden",
+            styles[size].content
+          ),
+          children: /* @__PURE__ */ jsx(PlaceholderIcon, { className: cx("text-fg-quaternary", styles[size].icon) })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(
+          "flex size-full items-center justify-center rounded-full bg-tertiary ring-1 ring-secondary_alt outline-transparent before:hidden",
+          styles[size].content
+        ),
+        children: placeholder || /* @__PURE__ */ jsx(UserIcon, { className: cx("text-fg-quaternary", styles[size].icon) })
+      }
+    );
+  };
+  const renderBadgeContent = () => {
+    if (status) {
+      return /* @__PURE__ */ jsx(AvatarOnlineIndicator, { status, size: tickSizeMap[size], className: styles[size].badge });
+    }
+    if (verified) {
+      return /* @__PURE__ */ jsx(VerifiedTick, { size: tickSizeMap[size], className: cx("absolute", styles[size].badge) });
+    }
+    return badge;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "relative flex shrink-0 items-center justify-center rounded-full bg-primary ring-1 ring-secondary_alt",
+        styles[size].root,
+        (!src || isFailed) && styles[size].rootWithPlaceholder,
+        className
+      ),
+      children: [
+        renderMainContent(),
+        renderBadgeContent()
+      ]
+    }
+  );
+};
+
+export { AvatarProfilePhoto };
+//# sourceMappingURL=avatar-profile-photo.js.map
+//# sourceMappingURL=avatar-profile-photo.js.map

package/dist/react/avatar-profile-photo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../utils/cx.ts","../../../../components/base/avatar/base-components/avatar-online-indicator.tsx","../../../../components/base/avatar/base-components/verified-tick.tsx","../../../../components/base/avatar/avatar-profile-photo.tsx"],"names":["jsx","jsxs","sizes","User01"],"mappings":";;;;;;;AAEA,IAAM,UAAU,mBAAA,CAAoB;AAAA,EAChC,MAAA,EAAQ;AAAA,IACJ,KAAA,EAAO;AAAA,MACH,MAAM,CAAC,YAAA,EAAc,cAAc,YAAA,EAAc,YAAA,EAAc,cAAc,aAAa;AAAA;AAC9F;AAER,CAAC,CAAA;AAMM,IAAM,EAAA,GAAK,OAAA;ACVlB,IAAM,KAAA,GAAQ;AAAA,EACV,EAAA,EAAI,UAAA;AAAA,EACJ,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI,UAAA;AAAA,EACJ,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI,UAAA;AAAA,EACJ,KAAA,EAAO,QAAA;AAAA,EACP,KAAA,EAAO,UAAA;AAAA,EACP,KAAA,EAAO;AACX,CAAA;AAQO,IAAM,wBAAwB,CAAC,EAAE,MAAM,MAAA,EAAQ,SAAA,uBAClDA,GAAAA;AAAA,EAAC,MAAA;AAAA,EAAA;AAAA,IACG,SAAA,EAAW,EAAA;AAAA,MACP,yFAAA;AAAA,MACA,MAAA,KAAW,WAAW,yBAAA,GAA4B,wBAAA;AAAA,MAClD,MAAM,IAAI,CAAA;AAAA,MACV;AAAA,KACJ;AAAA,IACA,KAAA,EAAO;AAAA,MACH,eAAA,EACI;AAAA,KACR;AAAA,IAGA,QAAA,kBAAAC,KAAC,KAAA,EAAA,EAAI,OAAA,EAAQ,gBAAe,IAAA,EAAK,MAAA,EAAO,WAAU,0BAAA,EAC9C,QAAA,EAAA;AAAA,sBAAAD,GAAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACG,CAAA,EAAE,qJAAA;AAAA,UACF,IAAA,EAAK,2BAAA;AAAA,UACL,WAAA,EAAY;AAAA;AAAA,OAChB;AAAA,sBACAA,GAAAA,CAAC,MAAA,EAAA,EACG,QAAA,kBAAAC,IAAAA,CAAC,oBAAe,EAAA,EAAG,qBAAA,EAAsB,EAAA,EAAG,KAAA,EAAM,IAAG,GAAA,EAAI,EAAA,EAAG,OAAM,EAAA,EAAG,KAAA,EAAM,eAAc,gBAAA,EACrF,QAAA,EAAA;AAAA,wBAAAD,GAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,OAAA,EAAQ,CAAA;AAAA,wBACxBA,IAAC,MAAA,EAAA,EAAK,MAAA,EAAO,KAAI,SAAA,EAAU,OAAA,EAAQ,aAAY,KAAA,EAAM;AAAA,OAAA,EACzD,CAAA,EACJ;AAAA,KAAA,EACJ;AAAA;AACJ,CAAA;AC5CJ,IAAME,MAAAA,GAAQ;AAAA,EACV,EAAA,EAAI,UAAA;AAAA,EACJ,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI,UAAA;AAAA,EACJ,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI,UAAA;AAAA,EACJ,KAAA,EAAO,QAAA;AAAA,EACP,KAAA,EAAO,QAAA;AAAA,EACP,KAAA,EAAO;AACX,CAAA;AAOO,IAAM,YAAA,GAAe,CAAC,EAAE,IAAA,EAAM,WAAU,qBAC3CD,KAAC,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,4BAAA,EAA8BC,MAAAA,CAAM,IAAI,CAAA,EAAG,SAAS,GAAG,OAAA,EAAQ,WAAA,EAAY,MAAK,MAAA,EAC/F,QAAA,EAAA;AAAA,kBAAAF,GAAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACG,CAAA,EAAE,inDAAA;AAAA,MACF,SAAA,EAAU;AAAA;AAAA,GACd;AAAA,kBACAA,GAAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACG,QAAA,EAAS,SAAA;AAAA,MACT,QAAA,EAAS,SAAA;AAAA,MACT,CAAA,EAAE,+oBAAA;AAAA,MACF,IAAA,EAAK;AAAA;AAAA;AACT,CAAA,EACJ,CAAA;ACxBJ,IAAM,MAAA,GAAS;AAAA,EACX,EAAA,EAAI;AAAA,IACA,IAAA,EAAM,gBAAA;AAAA,IACN,mBAAA,EAAqB,KAAA;AAAA,IACrB,OAAA,EAAS,uDAAA;AAAA,IACT,IAAA,EAAM,QAAA;AAAA,IACN,QAAA,EAAU,+BAAA;AAAA,IACV,KAAA,EAAO;AAAA,GACX;AAAA,EACA,EAAA,EAAI;AAAA,IACA,IAAA,EAAM,aAAA;AAAA,IACN,mBAAA,EAAqB,QAAA;AAAA,IACrB,OAAA,EAAS,2EAAA;AAAA,IACT,IAAA,EAAM,SAAA;AAAA,IACN,QAAA,EAAU,+BAAA;AAAA,IACV,KAAA,EAAO;AAAA,GACX;AAAA,EACA,EAAA,EAAI;AAAA,IACA,IAAA,EAAM,eAAA;AAAA,IACN,mBAAA,EAAqB,QAAA;AAAA,IACrB,OAAA,EAAS,4EAAA;AAAA,IACT,IAAA,EAAM,SAAA;AAAA,IACN,QAAA,EAAU,+BAAA;AAAA,IACV,KAAA,EAAO;AAAA;AAEf,CAAA;AAEA,IAAM,WAAA,GAAc;AAAA,EAChB,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI;AACR,CAAA;AAMO,IAAM,qBAAqB,CAAC;AAAA,EAC/B,IAAA,GAAO,IAAA;AAAA,EACP,GAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,eAAA,EAAiB,eAAA;AAAA,EACjB,QAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA;AACJ,CAAA,KAA+B;AAC3B,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAE9C,EAAA,MAAM,oBAAoB,MAAM;AAC5B,IAAA,IAAI,GAAA,IAAO,CAAC,QAAA,EAAU;AAClB,MAAA,uBACIA,GAAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACG,SAAA,EAAW,EAAA;AAAA,YACP,yOAAA;AAAA,YACA,MAAA,CAAO,IAAI,CAAA,CAAE;AAAA,WACjB;AAAA,UAEA,QAAA,kBAAAA,GAAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,GAAA,EAAU,OAAA,EAAS,MAAM,WAAA,CAAY,IAAI,CAAA,EAAG,SAAA,EAAU,wBAAA,EAAyB;AAAA;AAAA,OAClG;AAAA,IAER;AAEA,IAAA,IAAI,QAAA,EAAU;AACV,MAAA,uBACIA,GAAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACG,SAAA,EAAW,EAAA;AAAA,YACP,iIAAA;AAAA,YACA,MAAA,CAAO,IAAI,CAAA,CAAE;AAAA,WACjB;AAAA,UAEA,QAAA,kBAAAA,GAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,EAAA,CAAG,iBAAA,EAAmB,MAAA,CAAO,IAAI,CAAA,CAAE,QAAQ,CAAA,EAAI,QAAA,EAAA,QAAA,EAAS;AAAA;AAAA,OAC7E;AAAA,IAER;AAEA,IAAA,IAAI,eAAA,EAAiB;AACjB,MAAA,uBACIA,GAAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACG,SAAA,EAAW,EAAA;AAAA,YACP,iIAAA;AAAA,YACA,MAAA,CAAO,IAAI,CAAA,CAAE;AAAA,WACjB;AAAA,UAEA,QAAA,kBAAAA,GAAAA,CAAC,eAAA,EAAA,EAAgB,SAAA,EAAW,EAAA,CAAG,sBAAsB,MAAA,CAAO,IAAI,CAAA,CAAE,IAAI,CAAA,EAAG;AAAA;AAAA,OAC7E;AAAA,IAER;AAEA,IAAA,uBACIA,GAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACG,SAAA,EAAW,EAAA;AAAA,UACP,iIAAA;AAAA,UACA,MAAA,CAAO,IAAI,CAAA,CAAE;AAAA,SACjB;AAAA,QAEC,QAAA,EAAA,WAAA,oBAAeA,GAAAA,CAACG,QAAA,EAAA,EAAO,SAAA,EAAW,EAAA,CAAG,oBAAA,EAAsB,MAAA,CAAO,IAAI,CAAA,CAAE,IAAI,CAAA,EAAG;AAAA;AAAA,KACpF;AAAA,EAER,CAAA;AAEA,EAAA,MAAM,qBAAqB,MAAM;AAC7B,IAAA,IAAI,MAAA,EAAQ;AACR,MAAA,uBAAOH,GAAAA,CAAC,qBAAA,EAAA,EAAsB,MAAA,EAAgB,IAAA,EAAM,WAAA,CAAY,IAAI,CAAA,EAAG,SAAA,EAAW,MAAA,CAAO,IAAI,CAAA,CAAE,KAAA,EAAO,CAAA;AAAA,IAC1G;AAEA,IAAA,IAAI,QAAA,EAAU;AACV,MAAA,uBAAOA,GAAAA,CAAC,YAAA,EAAA,EAAa,IAAA,EAAM,YAAY,IAAI,CAAA,EAAG,SAAA,EAAW,EAAA,CAAG,UAAA,EAAY,MAAA,CAAO,IAAI,CAAA,CAAE,KAAK,CAAA,EAAG,CAAA;AAAA,IACjG;AAEA,IAAA,OAAO,KAAA;AAAA,EACX,CAAA;AAEA,EAAA,uBACIC,IAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACG,SAAA,EAAW,EAAA;AAAA,QACP,sGAAA;AAAA,QACA,MAAA,CAAO,IAAI,CAAA,CAAE,IAAA;AAAA,QAAA,CACZ,CAAC,GAAA,IAAO,QAAA,KAAa,MAAA,CAAO,IAAI,CAAA,CAAE,mBAAA;AAAA,QACnC;AAAA,OACJ;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,iBAAA,EAAkB;AAAA,QAClB,kBAAA;AAAmB;AAAA;AAAA,GACxB;AAER","file":"avatar-profile-photo.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","\"use client\";\n\nimport { cx } from \"@/utils/cx\";\n\nconst sizes = {\n    xs: \"size-1.5\",\n    sm: \"size-2\",\n    md: \"size-2.5\",\n    lg: \"size-3\",\n    xl: \"size-3.5\",\n    \"2xl\": \"size-4\",\n    \"3xl\": \"size-4.5\",\n    \"4xl\": \"size-5\",\n};\n\ninterface AvatarOnlineIndicatorProps {\n    size: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\";\n    status: \"online\" | \"offline\";\n    className?: string;\n}\n\nexport const AvatarOnlineIndicator = ({ size, status, className }: AvatarOnlineIndicatorProps) => (\n    <span\n        className={cx(\n            \"absolute right-0 bottom-0 flex justify-center rounded-full ring-[1.5px] ring-bg-primary\",\n            status === \"online\" ? \"bg-fg-success-secondary\" : \"bg-utility-neutral-300\",\n            sizes[size],\n            className,\n        )}\n        style={{\n            backgroundImage:\n                \"radial-gradient(43.75% 43.75% at 50% 28.75%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.00) 74.66%, rgba(255, 255, 255, 0.18) 100%), radial-gradient(75% 75% at 50% 0%, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.00) 50%, rgba(255, 255, 255, 0.08) 99%, rgba(255, 255, 255, 0.00) 100%)\",\n        }}\n    >\n        {/* Reflection */}\n        <svg viewBox=\"0 0 7.2 2.85\" fill=\"none\" className=\"mt-[10%] h-[20%] w-[60%]\">\n            <path\n                d=\"M7.2 1.83107C7.2 2.84235 5.58823 2.19729 3.6 2.19729C1.61177 2.19729 0 2.84235 0 1.83107C0 0.8198 1.61177 0 3.6 0C5.58823 0 7.2 0.8198 7.2 1.83107Z\"\n                fill=\"url(#reflection-gradient)\"\n                fillOpacity=\"0.4\"\n            />\n            <defs>\n                <linearGradient id=\"reflection-gradient\" x1=\"3.6\" y1=\"0\" x2=\"3.6\" y2=\"2.4\" gradientUnits=\"userSpaceOnUse\">\n                    <stop stopColor=\"white\" />\n                    <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0.1\" />\n                </linearGradient>\n            </defs>\n        </svg>\n    </span>\n);\n","\"use client\";\n\nimport { cx } from \"@/utils/cx\";\n\nconst sizes = {\n    xs: \"size-2.5\",\n    sm: \"size-3\",\n    md: \"size-3.5\",\n    lg: \"size-4\",\n    xl: \"size-4.5\",\n    \"2xl\": \"size-5\",\n    \"3xl\": \"size-6\",\n    \"4xl\": \"size-8\",\n};\n\ninterface VerifiedTickProps {\n    size: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\";\n    className?: string;\n}\n\nexport const VerifiedTick = ({ size, className }: VerifiedTickProps) => (\n    <svg className={cx(\"z-10 text-utility-blue-500\", sizes[size], className)} viewBox=\"0 0 10 10\" fill=\"none\">\n        <path\n            d=\"M7.72237 1.77098C7.81734 2.00068 7.99965 2.18326 8.2292 2.27858L9.03413 2.61199C9.26384 2.70714 9.44635 2.88965 9.5415 3.11936C9.63665 3.34908 9.63665 3.60718 9.5415 3.83689L9.20833 4.64125C9.11313 4.87106 9.113 5.12943 9.20863 5.35913L9.54122 6.16325C9.58839 6.27702 9.61268 6.39897 9.6127 6.52214C9.61272 6.6453 9.58847 6.76726 9.54134 6.88105C9.4942 6.99484 9.42511 7.09823 9.33801 7.18531C9.2509 7.27238 9.14749 7.34144 9.03369 7.38854L8.22934 7.72171C7.99964 7.81669 7.81706 7.99899 7.72174 8.22855L7.38833 9.03348C7.29318 9.26319 7.11067 9.4457 6.88096 9.54085C6.65124 9.636 6.39314 9.636 6.16343 9.54085L5.35907 9.20767C5.12935 9.11276 4.87134 9.11295 4.64177 9.20821L3.83684 9.54115C3.60725 9.63608 3.34937 9.636 3.11984 9.54092C2.89032 9.44585 2.70791 9.26356 2.6127 9.03409L2.27918 8.22892C2.18421 7.99923 2.0019 7.81665 1.77235 7.72133L0.967421 7.38792C0.737807 7.29281 0.555355 7.11041 0.460169 6.88083C0.364983 6.65125 0.364854 6.39327 0.45981 6.16359L0.792984 5.35924C0.8879 5.12952 0.887707 4.87151 0.792445 4.64193L0.459749 3.83642C0.41258 3.72265 0.388291 3.60069 0.388272 3.47753C0.388252 3.35436 0.412501 3.2324 0.459634 3.11861C0.506767 3.00482 0.57586 2.90144 0.662965 2.81436C0.75007 2.72728 0.853479 2.65822 0.967283 2.61113L1.77164 2.27795C2.00113 2.18306 2.1836 2.00099 2.27899 1.7717L2.6124 0.966768C2.70755 0.737054 2.89006 0.554547 3.11978 0.459397C3.34949 0.364246 3.60759 0.364246 3.83731 0.459397L4.64166 0.792571C4.87138 0.887487 5.12939 0.887293 5.35897 0.792031L6.16424 0.459913C6.39392 0.364816 6.65197 0.364836 6.88164 0.459968C7.11131 0.555099 7.29379 0.737554 7.38895 0.967208L7.72247 1.77238L7.72237 1.77098Z\"\n            className=\"fill-current\"\n        />\n        <path\n            fillRule=\"evenodd\"\n            clipRule=\"evenodd\"\n            d=\"M6.95829 3.68932C7.02509 3.58439 7.04747 3.45723 7.02051 3.3358C6.99356 3.21437 6.91946 3.10862 6.81454 3.04182C6.70961 2.97502 6.58245 2.95264 6.46102 2.97959C6.33959 3.00655 6.23384 3.08064 6.16704 3.18557L4.33141 6.06995L3.49141 5.01995C3.41375 4.92281 3.30069 4.8605 3.17709 4.84673C3.05349 4.83296 2.92949 4.86885 2.83235 4.94651C2.73522 5.02417 2.67291 5.13723 2.65914 5.26083C2.64536 5.38443 2.68125 5.50843 2.75891 5.60557L4.00891 7.16807C4.0555 7.22638 4.11533 7.27271 4.18344 7.30323C4.25154 7.33375 4.32595 7.34757 4.40047 7.34353C4.47499 7.3395 4.54747 7.31773 4.61188 7.28004C4.67629 7.24234 4.73077 7.18981 4.77079 7.12682L6.95829 3.68932Z\"\n            fill=\"white\"\n        />\n    </svg>\n);\n","\"use client\";\n\nimport { useState } from \"react\";\nimport { UserIcon as User01 } from \"@phosphor-icons/react/dist/csr/User\";\nimport { cx } from \"@/utils/cx\";\nimport { type AvatarProps } from \"./avatar\";\nimport { AvatarOnlineIndicator, VerifiedTick } from \"./base-components\";\n\nconst styles = {\n    sm: {\n        root: \"size-18 p-0.75\",\n        rootWithPlaceholder: \"p-1\",\n        content: \"outline-[0.5px] -outline-offset-[0.5px] before:border\",\n        icon: \"size-9\",\n        initials: \"text-display-sm font-semibold\",\n        badge: \"bottom-0.5 right-0.5\",\n    },\n    md: {\n        root: \"size-24 p-1\",\n        rootWithPlaceholder: \"p-1.25\",\n        content: \"shadow-xl outline-[0.75px] -outline-offset-[0.75px] before:border-[1.5px]\",\n        icon: \"size-12\",\n        initials: \"text-display-md font-semibold\",\n        badge: \"bottom-1 right-1\",\n    },\n    lg: {\n        root: \"size-40 p-1.5\",\n        rootWithPlaceholder: \"p-1.75\",\n        content: \"shadow-2xl outline-[0.75px] -outline-offset-[0.75px] before:border-[1.5px]\",\n        icon: \"size-20\",\n        initials: \"text-display-xl font-semibold\",\n        badge: \"bottom-2 right-2\",\n    },\n};\n\nconst tickSizeMap = {\n    sm: \"2xl\",\n    md: \"3xl\",\n    lg: \"4xl\",\n} as const;\n\ninterface AvatarProfilePhotoProps extends AvatarProps {\n    size: \"sm\" | \"md\" | \"lg\";\n}\n\nexport const AvatarProfilePhoto = ({\n    size = \"md\",\n    src,\n    alt,\n    initials,\n    placeholder,\n    placeholderIcon: PlaceholderIcon,\n    verified,\n    badge,\n    status,\n    className,\n}: AvatarProfilePhotoProps) => {\n    const [isFailed, setIsFailed] = useState(false);\n\n    const renderMainContent = () => {\n        if (src && !isFailed) {\n            return (\n                <div\n                    className={cx(\n                        \"relative size-full overflow-hidden rounded-full outline-black/16 before:absolute before:inset-0 before:rounded-full before:border-white/32 before:mask-[linear-gradient(to_bottom,black_0%,transparent_25%,transparent_75%,black_100%)]\",\n                        styles[size].content,\n                    )}\n                >\n                    <img src={src} alt={alt} onError={() => setIsFailed(true)} className=\"size-full object-cover\" />\n                </div>\n            );\n        }\n\n        if (initials) {\n            return (\n                <div\n                    className={cx(\n                        \"flex size-full items-center justify-center rounded-full bg-tertiary ring-1 ring-secondary_alt outline-transparent before:hidden\",\n                        styles[size].content,\n                    )}\n                >\n                    <span className={cx(\"text-quaternary\", styles[size].initials)}>{initials}</span>\n                </div>\n            );\n        }\n\n        if (PlaceholderIcon) {\n            return (\n                <div\n                    className={cx(\n                        \"flex size-full items-center justify-center rounded-full bg-tertiary ring-1 ring-secondary_alt outline-transparent before:hidden\",\n                        styles[size].content,\n                    )}\n                >\n                    <PlaceholderIcon className={cx(\"text-fg-quaternary\", styles[size].icon)} />\n                </div>\n            );\n        }\n\n        return (\n            <div\n                className={cx(\n                    \"flex size-full items-center justify-center rounded-full bg-tertiary ring-1 ring-secondary_alt outline-transparent before:hidden\",\n                    styles[size].content,\n                )}\n            >\n                {placeholder || <User01 className={cx(\"text-fg-quaternary\", styles[size].icon)} />}\n            </div>\n        );\n    };\n\n    const renderBadgeContent = () => {\n        if (status) {\n            return <AvatarOnlineIndicator status={status} size={tickSizeMap[size]} className={styles[size].badge} />;\n        }\n\n        if (verified) {\n            return <VerifiedTick size={tickSizeMap[size]} className={cx(\"absolute\", styles[size].badge)} />;\n        }\n\n        return badge;\n    };\n\n    return (\n        <div\n            className={cx(\n                \"relative flex shrink-0 items-center justify-center rounded-full bg-primary ring-1 ring-secondary_alt\",\n                styles[size].root,\n                (!src || isFailed) && styles[size].rootWithPlaceholder,\n                className,\n            )}\n        >\n            {renderMainContent()}\n            {renderBadgeContent()}\n        </div>\n    );\n};\n"]}

package/dist/react/avatar.d.ts

@@ -1,42 +1,68 @@
-import * as React from 'react';
+import * as react from 'react';
+import { ReactNode, FC } from 'react';
 
-declare const avatarSizeClass: {
-    readonly sm: "h-8 w-8 min-h-8 min-w-8";
-    readonly md: "h-10 w-10 min-h-10 min-w-10";
-    readonly lg: "h-12 w-12 min-h-12 min-w-12";
-};
-type AvatarSize = keyof typeof avatarSizeClass;
-type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
-    /** @default md */
-    size?: AvatarSize;
-};
-declare const Avatar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    /** @default md */
-    size?: AvatarSize;
-} & React.RefAttributes<HTMLDivElement>>;
-type AvatarImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
-declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
-type AvatarFallbackProps = React.HTMLAttributes<HTMLDivElement>;
-declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLDivElement>>;
-type AvatarGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
-    children: React.ReactNode;
-    /**
-     * show only the first `max` avatars; extra members become a +N chip (direct
-     * `Avatar` children only).
-     */
-    max?: number;
-    /** chip size; use the same `size` on each `Avatar` so the stack lines up */
-    size?: AvatarSize;
-};
-declare const AvatarGroup: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
-    children: React.ReactNode;
-    /**
-     * show only the first `max` avatars; extra members become a +N chip (direct
-     * `Avatar` children only).
-     */
-    max?: number;
-    /** chip size; use the same `size` on each `Avatar` so the stack lines up */
-    size?: AvatarSize;
-} & React.RefAttributes<HTMLDivElement>>;
+interface AvatarProps {
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    className?: string;
+    /**
+     * The class name for the main child of the avatar.
+     */
+    contentClassName?: string;
+    src?: string | null;
+    alt?: string;
+    /**
+     * Display an inner contrast border around the avatar image.
+     */
+    contrastBorder?: boolean;
+    /**
+     * Whether the avatar should be rounded.
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * Display an outer border around the avatar.
+     */
+    border?: boolean;
+    /**
+     * Display a badge (i.e. company logo).
+     */
+    badge?: ReactNode;
+    /**
+     * Display a status indicator.
+     */
+    status?: "online" | "offline";
+    /**
+     * Display a verified tick icon.
+     *
+     * @default false
+     */
+    verified?: boolean;
+    /**
+     * Display a count badge.
+     */
+    count?: number;
+    /**
+     * The initials of the user to display if no image is available.
+     */
+    initials?: string;
+    /**
+     * An icon to display if no image is available.
+     */
+    placeholderIcon?: FC<{
+        className?: string;
+    }>;
+    /**
+     * A placeholder to display if no image is available.
+     */
+    placeholder?: ReactNode;
+    /**
+     * Whether the avatar should show a focus ring when the parent group is in focus.
+     * For example, when the avatar is wrapped inside a link.
+     *
+     * @default false
+     */
+    focusable?: boolean;
+}
+declare const Avatar: ({ size, src, alt, initials, placeholder, placeholderIcon: PlaceholderIcon, border, badge, status, verified, count, focusable, rounded, className, contentClassName, }: AvatarProps) => react.JSX.Element;
 
-export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarSize };
+export { Avatar, type AvatarProps };