@fairmint/ui 0.2.20 → 0.2.22

package/dist/components/generic/CompanyBanner/CompanyBanner.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+export interface CompanyBannerProps {
+    /** Company name — displayed as gradient text. */
+    companyName: string;
+    /**
+     * Logo URL. When present, renders a side-by-side layout (avatar | text).
+     * When absent, renders a centered text-only layout.
+     */
+    companyLogoUrl?: string | null;
+    /** Optional eyebrow label rendered above the company name (e.g. "Invited by"). */
+    label?: string;
+    /**
+     * Optional secondary content rendered below the company name (e.g. share count).
+     *
+     * Rendered values: non-boolean ReactNodes (including numeric `0` and strings).
+     * Hidden values: `null`, `undefined`, `true`, and `false` — matches React's
+     * rendering rules so `condition && "text"` patterns do not leave an empty
+     * row when `condition` is falsy.
+     */
+    detail?: ReactNode;
+    /** Avatar size in px. @default 52 */
+    avatarSize?: number;
+}
+/**
+ * Renders a branded company banner — used on invitation flows and welcome
+ * screens to anchor the user in the context of a specific company.
+ *
+ * Two visual modes:
+ * - **With logo**: side-by-side layout (avatar | label / name / detail) with a
+ *   vertical divider.
+ * - **Without logo**: centered text-only layout with the gradient company name
+ *   as the visual focal point.
+ */
+export declare function CompanyBanner({ companyName, companyLogoUrl, label, detail, avatarSize, }: CompanyBannerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CompanyBanner.d.ts.map

package/dist/components/generic/CompanyBanner/CompanyBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompanyBanner.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/CompanyBanner/CompanyBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAavC,MAAM,WAAW,kBAAkB;IACjC,iDAAiD;IACjD,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kFAAkF;IAClF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,EAC5B,WAAW,EACX,cAAc,EACd,KAAK,EACL,MAAM,EACN,UAAe,GAChB,EAAE,kBAAkB,2CA6FpB"}

package/dist/fairmint-ui.cjs

@@ -15931,7 +15931,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();
@@ -16005,7 +16005,7 @@ const Avatar$1 = polymorphicFactory((_props, ref) => {
       mod: [{ "within-group": ctx.withinGroup }, mod],
       ref,
       ...others,
-      children: error2 || !src ? /* @__PURE__ */ jsxRuntime.jsx("span", { ...getStyles2("placeholder"), title: alt, children: children || typeof name === "string" && getInitials(name) || /* @__PURE__ */ jsxRuntime.jsx(AvatarPlaceholderIcon, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(
+      children: error2 || !src ? /* @__PURE__ */ jsxRuntime.jsx("span", { ...getStyles2("placeholder"), title: alt, children: children || typeof name === "string" && getInitials$1(name) || /* @__PURE__ */ jsxRuntime.jsx(AvatarPlaceholderIcon, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(
         "img",
         {
           ...imageProps,
@@ -38132,6 +38132,112 @@ function ColorDot({ color, size: size2 = 8, style, ...rest }) {
   };
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Text, { size: "sm", c: fairmintVars.colorTextSecondary, style: { lineHeight: 1.4 }, children: detail }) : null;
+  if (companyLogoUrl) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Box, { style: { display: "flex", alignItems: "stretch", gap: 16 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Box,
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            paddingRight: 16,
+            borderRight: `1px solid ${neutralColors[200]}`
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            Avatar,
+            {
+              src: companyLogoUrl,
+              alt: trimmedName ? `${trimmedName} logo` : "Company logo",
+              radius: "xl",
+              size: avatarSize,
+              color: avatarColor,
+              children: initials
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: 2, justify: "center", style: { minWidth: 0 }, children: [
+        labelEl,
+        gradientNameEl,
+        detailEl
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Stack, { align: "center", gap: 4, children: [
+    labelEl,
+    gradientNameEl,
+    detailEl
+  ] });
+}
 function ConfirmDialog({
   title,
   message,
@@ -40111,14 +40217,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,
@@ -40918,6 +41016,7 @@ exports.Checkbox = Checkbox;
 exports.ClickableCard = ClickableCard;
 exports.Collapse = Collapse;
 exports.ColorDot = ColorDot;
+exports.CompanyBanner = CompanyBanner;
 exports.ConfirmDialog = ConfirmDialog;
 exports.Container = Container;
 exports.Currency = Currency;
@@ -41008,6 +41107,7 @@ exports.formatPhone = formatPhone;
 exports.formatPhoneDisplay = formatPhoneDisplay;
 exports.formatPreciseWithCurrency = formatPreciseWithCurrency;
 exports.getAvatarColor = getAvatarColor;
+exports.getInitials = getInitials;
 exports.getWalletDisplayName = getWalletDisplayName;
 exports.getWalletKindPill = getWalletKindPill;
 exports.getWalletLabel = getWalletLabel;