@fairmint/ui 0.2.22 → 0.2.23

package/dist/fairmint-ui.js

@@ -36334,6 +36334,28 @@ const z = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   xid,
   xor
 }, Symbol.toStringTag, { value: "Module" }));
+const fontSizes = {
+  /** 12px — labels, captions, table headers */
+  xs: "0.75rem",
+  /** 14px — secondary body text, meta */
+  sm: "0.875rem",
+  /** 16px — default body text */
+  md: "1rem",
+  /** 18px — large body, lead text */
+  lg: "1.125rem",
+  /** 20px — small headings, emphasized values */
+  xl: "1.25rem",
+  /** 24px — section values, stat subtitles */
+  "2xl": "1.5rem",
+  /** 28px — card hero values */
+  "3xl": "1.75rem",
+  /** 32px — page hero values */
+  "4xl": "2rem",
+  /** 36px — large display values */
+  "5xl": "2.25rem",
+  /** 40px — extra-large display values */
+  "6xl": "2.5rem"
+};
 const spacing = {
   xs: "0.625rem",
   sm: "0.75rem",
@@ -36493,6 +36515,13 @@ const theme = createTheme({
   radius: radii,
   defaultRadius: "md",
   spacing,
+  fontSizes: {
+    xs: fontSizes.xs,
+    sm: fontSizes.sm,
+    md: fontSizes.md,
+    lg: fontSizes.lg,
+    xl: fontSizes.xl
+  },
   breakpoints: {
     xs: "30em",
     sm: "48em",
@@ -36618,7 +36647,40 @@ ActionIcon.displayName = "ActionIcon";
 function Alert(props) {
   return /* @__PURE__ */ jsx(Alert$1, { ...props });
 }
-const Avatar = forwardRef((props, ref) => /* @__PURE__ */ jsx(Avatar$1, { radius: "md", color: colors.primary, ...props, ref }));
+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 Avatar = forwardRef(
+  ({ children, color, name, ...props }, ref) => {
+    const normalizedName = name?.trim() ?? "";
+    const fallbackInitial = normalizedName ? Array.from(normalizedName)[0]?.toUpperCase() : void 0;
+    return /* @__PURE__ */ jsx(
+      Avatar$1,
+      {
+        radius: "md",
+        color: color ?? (normalizedName ? getAvatarColor(normalizedName) : colors.primary),
+        ...props,
+        ref,
+        children: children ?? fallbackInitial
+      }
+    );
+  }
+);
 Avatar.displayName = "Avatar";
 const Badge = forwardRef((props, ref) => /* @__PURE__ */ jsx(Badge$1, { variant: "light", ...props, ref }));
 Badge.displayName = "Badge";
@@ -38114,24 +38176,6 @@ 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,
@@ -38604,8 +38648,10 @@ const DefaultChevronIcon = () => /* @__PURE__ */ jsx(
 function ListRow({
   avatarSrc,
   avatarFallback,
-  avatarColor = colors.primary,
+  avatarColor,
+  avatarColorFromName = false,
   title,
+  avatarName = title,
   subtitle,
   value,
   valueSubtitle,
@@ -38621,7 +38667,17 @@ function ListRow({
   const isClickable = Boolean(onClick);
   const displayChevron = showChevron ?? isClickable;
   const content = /* @__PURE__ */ jsxs(Group, { gap: "sm", wrap: "nowrap", children: [
-    /* @__PURE__ */ jsx(Avatar, { src: avatarSrc, alt: title, radius: "md", size: 40, color: avatarColor, children: avatarFallback ?? title.charAt(0).toUpperCase() }),
+    /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        src: avatarSrc,
+        alt: title,
+        name: avatarName,
+        size: 40,
+        color: avatarColor ?? (avatarColorFromName ? void 0 : colors.primary),
+        children: avatarFallback
+      }
+    ),
     /* @__PURE__ */ jsxs(Box, { flex: 1, miw: 0, children: [
       /* @__PURE__ */ jsx(Text, { fw: 500, size: "sm", truncate: true, children: title }),
       subtitle && /* @__PURE__ */ jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, lh: 1.3, children: subtitle })
@@ -40190,7 +40246,7 @@ function DocumentRow({
     {
       title: name,
       subtitle: subtitle || void 0,
-      avatarFallback: name.charAt(0).toUpperCase(),
+      avatarName: name,
       avatarColor: colors.neutral,
       rightSection,
       onClick,
@@ -40216,7 +40272,8 @@ function EquityGrantCard({
     ListRow,
     {
       avatarSrc: logoUrl,
-      avatarColor: getAvatarColor(companyName),
+      avatarName: companyName,
+      avatarColorFromName: true,
       title: companyName,
       subtitle,
       value: estimatedValue !== void 0 ? formatCurrency(estimatedValue) : void 0,
@@ -40239,7 +40296,8 @@ function InvestmentCard({
     ListRow,
     {
       avatarSrc: logoUrl,
-      avatarColor: getAvatarColor(companyName),
+      avatarName: companyName,
+      avatarColorFromName: true,
       title: companyName,
       subtitle: status,
       rightSection: rightSection ?? /* @__PURE__ */ jsx(Currency, { value, fw: 500, size: "sm" }),
@@ -40311,17 +40369,7 @@ function InvestorProfileCard({
   const [isAvatarHovered, setIsAvatarHovered] = useState(false);
   const [isAvatarFocused, setIsAvatarFocused] = useState(false);
   const displayName = name?.trim() || "Add your name";
-  const avatarEl = /* @__PURE__ */ jsx(
-    Avatar,
-    {
-      src: avatarUrl,
-      alt: displayName,
-      radius: "md",
-      size: 56,
-      color: getAvatarColor(displayName),
-      children: displayName.charAt(0).toUpperCase()
-    }
-  );
+  const avatarEl = /* @__PURE__ */ jsx(Avatar, { name: displayName, src: avatarUrl, alt: displayName, radius: "md", size: 56 });
   return /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
     /* @__PURE__ */ jsxs(Group, { gap: "md", wrap: "nowrap", children: [
       onUploadPhoto ? /* @__PURE__ */ jsxs(
@@ -41081,6 +41129,7 @@ export {
   ethereumAddressSchema,
   fairmintCssVariables,
   fairmintVars,
+  fontSizes,
   formatCurrency,
   formatCurrencyPrecise,
   formatDate,