@fairmint/ui 0.2.20 → 0.2.22

package/dist/fairmint-ui.js

@@ -15913,7 +15913,7 @@ function getInitialsColor(name, colors2 = defaultColors) {
   const index2 = Math.abs(hash2) % colors2.length;
   return colors2[index2];
 }
-function getInitials(name, limit = 2) {
+function getInitials$1(name, limit = 2) {
   const splitted = name.split(" ");
   if (splitted.length === 1) {
     return name.slice(0, limit).toUpperCase();
@@ -15987,7 +15987,7 @@ const Avatar$1 = polymorphicFactory((_props, ref) => {
       mod: [{ "within-group": ctx.withinGroup }, mod],
       ref,
       ...others,
-      children: error2 || !src ? /* @__PURE__ */ jsx("span", { ...getStyles2("placeholder"), title: alt, children: children || typeof name === "string" && getInitials(name) || /* @__PURE__ */ jsx(AvatarPlaceholderIcon, {}) }) : /* @__PURE__ */ jsx(
+      children: error2 || !src ? /* @__PURE__ */ jsx("span", { ...getStyles2("placeholder"), title: alt, children: children || typeof name === "string" && getInitials$1(name) || /* @__PURE__ */ jsx(AvatarPlaceholderIcon, {}) }) : /* @__PURE__ */ jsx(
         "img",
         {
           ...imageProps,
@@ -38114,6 +38114,112 @@ function ColorDot({ color, size: size2 = 8, style, ...rest }) {
   };
   return /* @__PURE__ */ jsx(Box, { "data-testid": "color-dot", style: [baseStyle, style], ...rest });
 }
+function getAvatarColor(name) {
+  if (!name) return AVATAR_PALETTE[0];
+  let hash2 = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash2 = hash2 * 31 + name.charCodeAt(i) >>> 0;
+  }
+  return AVATAR_PALETTE[hash2 % AVATAR_PALETTE.length];
+}
+function getInitials(name) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length >= 2) {
+    return (words[0][0] + words[1][0]).toUpperCase();
+  }
+  if (words.length === 1) {
+    return words[0][0].toUpperCase();
+  }
+  return "";
+}
+const BRAND_GRADIENT = `linear-gradient(90deg, ${brandColors.blue} 0%, ${brandColors.indigo} 50%, ${brandColors.purple} 100%)`;
+function CompanyBanner({
+  companyName,
+  companyLogoUrl,
+  label,
+  detail,
+  avatarSize = 52
+}) {
+  const trimmedName = companyName.trim();
+  const initials = getInitials(companyName);
+  const avatarColor = getAvatarColor(companyName);
+  const labelEl = label ? /* @__PURE__ */ jsx(
+    Text,
+    {
+      size: "xs",
+      fw: 600,
+      tt: "uppercase",
+      c: fairmintVars.colorTextTertiary,
+      style: {
+        fontFamily: fairmintVars.fontHeadings,
+        letterSpacing: "0.08em",
+        lineHeight: 1
+      },
+      children: label
+    }
+  ) : null;
+  const gradientNameEl = /* @__PURE__ */ jsx(
+    Text,
+    {
+      fw: 700,
+      style: {
+        fontFamily: fairmintVars.fontHeadings,
+        fontSize: "1.375rem",
+        lineHeight: 1.3,
+        letterSpacing: "-0.025em",
+        background: BRAND_GRADIENT,
+        backgroundClip: "text",
+        WebkitBackgroundClip: "text",
+        // Firefox ignores -webkit-text-fill-color; `color: transparent`
+        // is required for `background-clip: text` to show the gradient there.
+        // Chrome/Safari still pick up WebkitTextFillColor (kept for historical safety).
+        color: "transparent",
+        WebkitTextFillColor: "transparent",
+        wordBreak: "break-word"
+      },
+      children: companyName
+    }
+  );
+  const hasDetail = detail != null && typeof detail !== "boolean";
+  const detailEl = hasDetail ? /* @__PURE__ */ jsx(Text, { size: "sm", c: fairmintVars.colorTextSecondary, style: { lineHeight: 1.4 }, children: detail }) : null;
+  if (companyLogoUrl) {
+    return /* @__PURE__ */ jsxs(Box, { style: { display: "flex", alignItems: "stretch", gap: 16 }, children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            paddingRight: 16,
+            borderRight: `1px solid ${neutralColors[200]}`
+          },
+          children: /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              src: companyLogoUrl,
+              alt: trimmedName ? `${trimmedName} logo` : "Company logo",
+              radius: "xl",
+              size: avatarSize,
+              color: avatarColor,
+              children: initials
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs(Stack, { gap: 2, justify: "center", style: { minWidth: 0 }, children: [
+        labelEl,
+        gradientNameEl,
+        detailEl
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Stack, { align: "center", gap: 4, children: [
+    labelEl,
+    gradientNameEl,
+    detailEl
+  ] });
+}
 function ConfirmDialog({
   title,
   message,
@@ -40093,14 +40199,6 @@ function DocumentRow({
     }
   );
 }
-function getAvatarColor(name) {
-  if (!name) return AVATAR_PALETTE[0];
-  let hash2 = 0;
-  for (let i = 0; i < name.length; i++) {
-    hash2 = hash2 * 31 + name.charCodeAt(i) >>> 0;
-  }
-  return AVATAR_PALETTE[hash2 % AVATAR_PALETTE.length];
-}
 function EquityGrantCard({
   companyName,
   logoUrl,
@@ -40901,6 +40999,7 @@ export {
   ClickableCard,
   Collapse,
   ColorDot,
+  CompanyBanner,
   ConfirmDialog,
   Container,
   Currency,
@@ -40991,6 +41090,7 @@ export {
   formatPhoneDisplay,
   formatPreciseWithCurrency,
   getAvatarColor,
+  getInitials,
   getWalletDisplayName,
   getWalletKindPill,
   getWalletLabel,