@orangecheck/app-design 0.5.0 → 0.5.1

package/dist/components.mjs

@@ -1298,7 +1298,77 @@ function FloatChip({
     }
   );
 }
+var GROUNDS = [
+  {
+    className: "text-oca-ink",
+    background: "linear-gradient(145deg, var(--oca-orange-light), var(--oca-orange-deep))",
+    dot: "rgb(10 10 10 / 0.22)"
+  },
+  {
+    className: "text-white ring-1 ring-inset ring-white/10",
+    background: "linear-gradient(145deg, #2a2a2a, #0a0a0a)",
+    dot: "rgb(255 255 255 / 0.16)"
+  },
+  {
+    className: "text-oca-ink",
+    background: "linear-gradient(145deg, #fff1df, var(--oca-peach))",
+    dot: "rgb(234 88 11 / 0.22)"
+  }
+];
+var SIZES = {
+  sm: "size-9 rounded-[0.7rem] text-[0.9375rem]",
+  md: "size-11 rounded-[0.85rem] text-[1.125rem]",
+  lg: "size-14 rounded-[1.05rem] text-[1.5rem]"
+};
+function monogramLetter(name) {
+  const match = name.match(/[\p{L}\p{N}]/u);
+  return match ? match[0].toLocaleUpperCase() : "\xB7";
+}
+function monogramGround(seed) {
+  let h = 2166136261;
+  for (let i = 0; i < seed.length; i++) {
+    h ^= seed.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return (h >>> 0) % GROUNDS.length;
+}
+function Monogram({
+  name,
+  seed,
+  size = "md",
+  className,
+  style
+}) {
+  const ground = GROUNDS[monogramGround(seed ?? name)] ?? GROUNDS[0];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden font-semibold leading-none tracking-[-0.02em]",
+        SIZES[size],
+        ground.className,
+        className
+      ),
+      style: { background: ground.background, ...style },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "absolute inset-0",
+            style: {
+              backgroundImage: `radial-gradient(circle, ${ground.dot} 0.9px, transparent 1.2px)`,
+              backgroundSize: "6px 6px",
+              maskImage: "radial-gradient(90% 90% at 100% 100%, black, transparent 75%)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "relative", children: monogramLetter(name) })
+      ]
+    }
+  );
+}
 
-export { Accent, ActivityList, BrowserFrame, CodeBlock, Container, CopyButton, DataTable, Display, DocHeader, DocLayout, EmptyLine, EmptyState, Eyebrow, FloatChip, Footnote, HashChip, KeyValueList, Lead, LoadingBlock, Notice, PackageCard, PageHeader, PageHero, PhoneFrame, ProgressSteps, Prose, Reveal, Sats, SatsFigure, ScrollStory, Section, SectionIntro, SplitBar, StatCard, StatGrid, StepGrid, Ticker, TruthTable, UsdApprox, satsText, sectionVariants, useCopy, useInView };
+export { Accent, ActivityList, BrowserFrame, CodeBlock, Container, CopyButton, DataTable, Display, DocHeader, DocLayout, EmptyLine, EmptyState, Eyebrow, FloatChip, Footnote, HashChip, KeyValueList, Lead, LoadingBlock, Monogram, Notice, PackageCard, PageHeader, PageHero, PhoneFrame, ProgressSteps, Prose, Reveal, Sats, SatsFigure, ScrollStory, Section, SectionIntro, SplitBar, StatCard, StatGrid, StepGrid, Ticker, TruthTable, UsdApprox, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView };
 //# sourceMappingURL=components.mjs.map
 //# sourceMappingURL=components.mjs.map