@orangecheck/app-design 0.5.0 → 0.5.2

package/dist/components.d.mts

@@ -527,6 +527,7 @@ interface ActivityItem {
     id: string;
     title: ReactNode;
     meta?: ReactNode;
+    leading?: ReactNode;
     trailing?: ReactNode;
     href?: string;
 }
@@ -577,4 +578,19 @@ declare function FloatChip({ icon, title, detail, delay, className, style, }: {
     style?: CSSProperties;
 }): react.JSX.Element;
 
-export { Accent, type ActivityItem, ActivityList, BrowserFrame, CodeBlock, type Column, Container, CopyButton, DataTable, Display, type DisplayProps, DocHeader, DocLayout, EmptyLine, EmptyState, Eyebrow, FloatChip, Footnote, HashChip, type KeyValueItem, KeyValueList, Lead, LoadingBlock, Notice, PackageCard, type PackageItem, PageHeader, PageHero, type PageHeroProps, PhoneFrame, type ProgressStep, ProgressSteps, Prose, Reveal, Sats, SatsFigure, type SatsProps, type SatsTextOptions, ScrollStory, Section, SectionIntro, type SectionProps, SplitBar, type SplitSegment, StatCard, type StatCardProps, StatGrid, type StatGridProps, StepGrid, type StepGridProps, type StepItem, type StepState, Ticker, type TocItem, type TruthRow, type TruthStatus, TruthTable, UsdApprox, satsText, sectionVariants, useCopy, useInView };
+declare const SIZES: {
+    readonly sm: "size-9 rounded-[0.7rem] text-[0.9375rem]";
+    readonly md: "size-11 rounded-[0.85rem] text-[1.125rem]";
+    readonly lg: "size-14 rounded-[1.05rem] text-[1.5rem]";
+};
+declare function monogramLetter(name: string): string;
+declare function monogramGround(seed: string): number;
+declare function Monogram({ name, seed, size, className, style, }: {
+    name: string;
+    seed?: string;
+    size?: keyof typeof SIZES;
+    className?: string;
+    style?: CSSProperties;
+}): react.JSX.Element;
+
+export { Accent, type ActivityItem, ActivityList, BrowserFrame, CodeBlock, type Column, Container, CopyButton, DataTable, Display, type DisplayProps, DocHeader, DocLayout, EmptyLine, EmptyState, Eyebrow, FloatChip, Footnote, HashChip, type KeyValueItem, KeyValueList, Lead, LoadingBlock, Monogram, Notice, PackageCard, type PackageItem, PageHeader, PageHero, type PageHeroProps, PhoneFrame, type ProgressStep, ProgressSteps, Prose, Reveal, Sats, SatsFigure, type SatsProps, type SatsTextOptions, ScrollStory, Section, SectionIntro, type SectionProps, SplitBar, type SplitSegment, StatCard, type StatCardProps, StatGrid, type StatGridProps, StepGrid, type StepGridProps, type StepItem, type StepState, Ticker, type TocItem, type TruthRow, type TruthStatus, TruthTable, UsdApprox, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView };

package/dist/components.d.ts

@@ -527,6 +527,7 @@ interface ActivityItem {
     id: string;
     title: ReactNode;
     meta?: ReactNode;
+    leading?: ReactNode;
     trailing?: ReactNode;
     href?: string;
 }
@@ -577,4 +578,19 @@ declare function FloatChip({ icon, title, detail, delay, className, style, }: {
     style?: CSSProperties;
 }): react.JSX.Element;
 
-export { Accent, type ActivityItem, ActivityList, BrowserFrame, CodeBlock, type Column, Container, CopyButton, DataTable, Display, type DisplayProps, DocHeader, DocLayout, EmptyLine, EmptyState, Eyebrow, FloatChip, Footnote, HashChip, type KeyValueItem, KeyValueList, Lead, LoadingBlock, Notice, PackageCard, type PackageItem, PageHeader, PageHero, type PageHeroProps, PhoneFrame, type ProgressStep, ProgressSteps, Prose, Reveal, Sats, SatsFigure, type SatsProps, type SatsTextOptions, ScrollStory, Section, SectionIntro, type SectionProps, SplitBar, type SplitSegment, StatCard, type StatCardProps, StatGrid, type StatGridProps, StepGrid, type StepGridProps, type StepItem, type StepState, Ticker, type TocItem, type TruthRow, type TruthStatus, TruthTable, UsdApprox, satsText, sectionVariants, useCopy, useInView };
+declare const SIZES: {
+    readonly sm: "size-9 rounded-[0.7rem] text-[0.9375rem]";
+    readonly md: "size-11 rounded-[0.85rem] text-[1.125rem]";
+    readonly lg: "size-14 rounded-[1.05rem] text-[1.5rem]";
+};
+declare function monogramLetter(name: string): string;
+declare function monogramGround(seed: string): number;
+declare function Monogram({ name, seed, size, className, style, }: {
+    name: string;
+    seed?: string;
+    size?: keyof typeof SIZES;
+    className?: string;
+    style?: CSSProperties;
+}): react.JSX.Element;
+
+export { Accent, type ActivityItem, ActivityList, BrowserFrame, CodeBlock, type Column, Container, CopyButton, DataTable, Display, type DisplayProps, DocHeader, DocLayout, EmptyLine, EmptyState, Eyebrow, FloatChip, Footnote, HashChip, type KeyValueItem, KeyValueList, Lead, LoadingBlock, Monogram, Notice, PackageCard, type PackageItem, PageHeader, PageHero, type PageHeroProps, PhoneFrame, type ProgressStep, ProgressSteps, Prose, Reveal, Sats, SatsFigure, type SatsProps, type SatsTextOptions, ScrollStory, Section, SectionIntro, type SectionProps, SplitBar, type SplitSegment, StatCard, type StatCardProps, StatGrid, type StatGridProps, StepGrid, type StepGridProps, type StepItem, type StepState, Ticker, type TocItem, type TruthRow, type TruthStatus, TruthTable, UsdApprox, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView };

package/dist/components.js

@@ -981,9 +981,12 @@ function ActivityList({ items, empty, className }) {
   if (items.length === 0 && empty) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: empty });
   return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("divide-y divide-border rounded-[1.25rem] border border-border bg-card", className), children: items.map((it) => {
     const body = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 px-5 py-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[0.9375rem]", children: it.title }),
-        it.meta ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[0.8125rem] text-muted-foreground", children: it.meta }) : null
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+        it.leading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: it.leading }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[0.9375rem]", children: it.title }),
+          it.meta ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-[0.8125rem] text-muted-foreground", children: it.meta }) : null
+        ] })
       ] }),
       it.trailing ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 text-right", children: it.trailing }) : null
     ] });
@@ -1320,6 +1323,76 @@ 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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "relative", children: monogramLetter(name) })
+      ]
+    }
+  );
+}
 
 exports.Accent = Accent;
 exports.ActivityList = ActivityList;
@@ -1340,6 +1413,7 @@ exports.HashChip = HashChip;
 exports.KeyValueList = KeyValueList;
 exports.Lead = Lead;
 exports.LoadingBlock = LoadingBlock;
+exports.Monogram = Monogram;
 exports.Notice = Notice;
 exports.PackageCard = PackageCard;
 exports.PageHeader = PageHeader;
@@ -1360,6 +1434,8 @@ exports.StepGrid = StepGrid;
 exports.Ticker = Ticker;
 exports.TruthTable = TruthTable;
 exports.UsdApprox = UsdApprox;
+exports.monogramGround = monogramGround;
+exports.monogramLetter = monogramLetter;
 exports.satsText = satsText;
 exports.sectionVariants = sectionVariants;
 exports.useCopy = useCopy;