@fairmint/ui 0.2.22 → 0.2.24

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,
@@ -38289,6 +38333,90 @@ function formatDate(dateString) {
 function formatPercent(n, decimals = 2) {
   return `${n.toFixed(decimals)}%`;
 }
+const COUNTRY_LOCALES = {
+  US: "en-US",
+  CA: "en-CA",
+  GB: "en-GB",
+  IE: "en-IE",
+  AU: "en-AU",
+  NZ: "en-NZ",
+  FR: "fr-FR",
+  BE: "fr-BE",
+  LU: "fr-LU",
+  DE: "de-DE",
+  AT: "de-AT",
+  CH: "de-CH",
+  NL: "nl-NL",
+  ES: "es-ES",
+  IT: "it-IT",
+  PT: "pt-PT",
+  BR: "pt-BR",
+  SE: "sv-SE",
+  NO: "nb-NO",
+  DK: "da-DK",
+  FI: "fi-FI",
+  PL: "pl-PL",
+  JP: "ja-JP",
+  CN: "zh-CN",
+  IN: "en-IN",
+  SG: "en-SG"
+};
+function localeForCountry(country) {
+  if (!country) return "en-US";
+  const key = country.toUpperCase();
+  return COUNTRY_LOCALES[key] ?? "en-US";
+}
+const toNumber = (value) => {
+  if (typeof value === "number") return value;
+  if (value.trim() === "") return Number.NaN;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : Number.NaN;
+};
+function formatMonetary(monetary, options = {}) {
+  const {
+    locale: explicitLocale,
+    country,
+    fallbackCurrency = "USD",
+    compactWholeNumbers = true
+  } = options;
+  if (monetary === null || monetary === void 0) return "";
+  let amount;
+  let currency;
+  if (typeof monetary === "number" || typeof monetary === "string") {
+    amount = toNumber(monetary);
+    currency = fallbackCurrency.toUpperCase();
+  } else {
+    amount = toNumber(monetary.amount);
+    currency = (monetary.currency || fallbackCurrency).toUpperCase();
+  }
+  if (!Number.isFinite(amount)) return "";
+  const locale = explicitLocale ?? localeForCountry(country);
+  let nativeFractionDigits = 2;
+  try {
+    const resolved = new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency
+    }).resolvedOptions().maximumFractionDigits;
+    if (typeof resolved === "number") nativeFractionDigits = resolved;
+  } catch {
+  }
+  const isWhole = Number.isInteger(amount);
+  const minimumFractionDigits = compactWholeNumbers && isWhole ? 0 : nativeFractionDigits;
+  const subUnitThreshold = 10 ** -nativeFractionDigits;
+  const subUnit = Math.abs(amount) > 0 && Math.abs(amount) < subUnitThreshold;
+  const maximumFractionDigits = subUnit ? Math.max(6, nativeFractionDigits) : nativeFractionDigits;
+  try {
+    return new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency,
+      minimumFractionDigits,
+      maximumFractionDigits
+    }).format(amount);
+  } catch {
+    const fallbackDigits = subUnit ? maximumFractionDigits : minimumFractionDigits;
+    return `${amount.toFixed(fallbackDigits)} ${currency}`;
+  }
+}
 const TABULAR_NUMS = { fontVariantNumeric: "tabular-nums" };
 function Currency({ value, precise = false, currency, style, ...rest }) {
   let formatted;
@@ -38604,8 +38732,10 @@ const DefaultChevronIcon = () => /* @__PURE__ */ jsx(
 function ListRow({
   avatarSrc,
   avatarFallback,
-  avatarColor = colors.primary,
+  avatarColor,
+  avatarColorFromName = false,
   title,
+  avatarName = title,
   subtitle,
   value,
   valueSubtitle,
@@ -38621,7 +38751,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 +40330,7 @@ function DocumentRow({
     {
       title: name,
       subtitle: subtitle || void 0,
-      avatarFallback: name.charAt(0).toUpperCase(),
+      avatarName: name,
       avatarColor: colors.neutral,
       rightSection,
       onClick,
@@ -40216,7 +40356,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 +40380,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 +40453,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,9 +41213,11 @@ export {
   ethereumAddressSchema,
   fairmintCssVariables,
   fairmintVars,
+  fontSizes,
   formatCurrency,
   formatCurrencyPrecise,
   formatDate,
+  formatMonetary,
   formatNumber,
   formatPercent,
   formatPhone,
@@ -41097,6 +41231,7 @@ export {
   isEthereumAddress,
   isRemovableWalletType,
   isSystemWalletType,
+  localeForCountry,
   neutralColors,
   normalizePhone,
   normalizeWalletType,