@orangecheck/app-design 0.5.0 → 0.5.2

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 export { APP_ATTRIBUTE, APP_ID, appColors, appFonts } from './tokens.mjs';
 export { Badge, BadgeProps, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNumeral, CardProps, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Field, FieldProps, Input, Kbd, Label, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, ScrollFade, ScrollFadeProps, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, Skeleton, Spinner, StatusDot, StatusPill, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cardVariants, cn, useTimedOut } from './primitives.mjs';
 export { AppIcon, AppIconProps, Crowd, CrowdProps, HalftoneCanvas, HalftoneCanvasProps, HalftoneSphere, HalftoneSphereProps, IsoCheck, IsoCheckProps, Lockup, LockupProps, MARK_FACES, Mark, MarkProps, SPHERE_GRADIENT, Tone, portraitTone } from './brand.mjs';
-export { Accent, ActivityItem, ActivityList, BrowserFrame, CodeBlock, Column, Container, CopyButton, DataTable, Display, DisplayProps, DocHeader, DocLayout, EmptyLine, EmptyState, Eyebrow, FloatChip, Footnote, HashChip, KeyValueItem, KeyValueList, Lead, LoadingBlock, Notice, PackageCard, PackageItem, PageHeader, PageHero, PageHeroProps, PhoneFrame, ProgressStep, ProgressSteps, Prose, Reveal, Sats, SatsFigure, SatsProps, SatsTextOptions, ScrollStory, Section, SectionIntro, SectionProps, SplitBar, SplitSegment, StatCard, StatCardProps, StatGrid, StatGridProps, StepGrid, StepGridProps, StepItem, StepState, Ticker, TocItem, TruthRow, TruthStatus, TruthTable, UsdApprox, satsText, sectionVariants, useCopy, useInView } from './components.mjs';
+export { Accent, ActivityItem, ActivityList, BrowserFrame, CodeBlock, Column, Container, CopyButton, DataTable, Display, DisplayProps, DocHeader, DocLayout, EmptyLine, EmptyState, Eyebrow, FloatChip, Footnote, HashChip, KeyValueItem, KeyValueList, Lead, LoadingBlock, Monogram, Notice, PackageCard, PackageItem, PageHeader, PageHero, PageHeroProps, PhoneFrame, ProgressStep, ProgressSteps, Prose, Reveal, Sats, SatsFigure, SatsProps, SatsTextOptions, ScrollStory, Section, SectionIntro, SectionProps, SplitBar, SplitSegment, StatCard, StatCardProps, StatGrid, StatGridProps, StepGrid, StepGridProps, StepItem, StepState, Ticker, TocItem, TruthRow, TruthStatus, TruthTable, UsdApprox, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView } from './components.mjs';
 export { AccountMenu, AccountMenuItem, AppShell, FooterColumn, NavItem, ShellContext, ShellNavGroup, ShellNavItem, ShellPlace, ShellSection, SiteFooter, SiteHeader, ThemeToggle, useShellPlace } from './chrome.mjs';
 export { toast } from 'sonner';
 import 'react';

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { APP_ATTRIBUTE, APP_ID, appColors, appFonts } from './tokens.js';
 export { Badge, BadgeProps, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNumeral, CardProps, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Field, FieldProps, Input, Kbd, Label, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, ScrollFade, ScrollFadeProps, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, Skeleton, Spinner, StatusDot, StatusPill, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cardVariants, cn, useTimedOut } from './primitives.js';
 export { AppIcon, AppIconProps, Crowd, CrowdProps, HalftoneCanvas, HalftoneCanvasProps, HalftoneSphere, HalftoneSphereProps, IsoCheck, IsoCheckProps, Lockup, LockupProps, MARK_FACES, Mark, MarkProps, SPHERE_GRADIENT, Tone, portraitTone } from './brand.js';
-export { Accent, ActivityItem, ActivityList, BrowserFrame, CodeBlock, Column, Container, CopyButton, DataTable, Display, DisplayProps, DocHeader, DocLayout, EmptyLine, EmptyState, Eyebrow, FloatChip, Footnote, HashChip, KeyValueItem, KeyValueList, Lead, LoadingBlock, Notice, PackageCard, PackageItem, PageHeader, PageHero, PageHeroProps, PhoneFrame, ProgressStep, ProgressSteps, Prose, Reveal, Sats, SatsFigure, SatsProps, SatsTextOptions, ScrollStory, Section, SectionIntro, SectionProps, SplitBar, SplitSegment, StatCard, StatCardProps, StatGrid, StatGridProps, StepGrid, StepGridProps, StepItem, StepState, Ticker, TocItem, TruthRow, TruthStatus, TruthTable, UsdApprox, satsText, sectionVariants, useCopy, useInView } from './components.js';
+export { Accent, ActivityItem, ActivityList, BrowserFrame, CodeBlock, Column, Container, CopyButton, DataTable, Display, DisplayProps, DocHeader, DocLayout, EmptyLine, EmptyState, Eyebrow, FloatChip, Footnote, HashChip, KeyValueItem, KeyValueList, Lead, LoadingBlock, Monogram, Notice, PackageCard, PackageItem, PageHeader, PageHero, PageHeroProps, PhoneFrame, ProgressStep, ProgressSteps, Prose, Reveal, Sats, SatsFigure, SatsProps, SatsTextOptions, ScrollStory, Section, SectionIntro, SectionProps, SplitBar, SplitSegment, StatCard, StatCardProps, StatGrid, StatGridProps, StepGrid, StepGridProps, StepItem, StepState, Ticker, TocItem, TruthRow, TruthStatus, TruthTable, UsdApprox, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView } from './components.js';
 export { AccountMenu, AccountMenuItem, AppShell, FooterColumn, NavItem, ShellContext, ShellNavGroup, ShellNavItem, ShellPlace, ShellSection, SiteFooter, SiteHeader, ThemeToggle, useShellPlace } from './chrome.js';
 export { toast } from 'sonner';
 import 'react';

package/dist/index.js

@@ -1954,9 +1954,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
     ] });
@@ -2293,6 +2296,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) })
+      ]
+    }
+  );
+}
 function NavLink({ item, className, onNavigate }) {
   const cls = cn(
     "rounded-full px-3 py-2 text-[0.9375rem] transition-colors",
@@ -2642,6 +2715,7 @@ exports.LoadingBlock = LoadingBlock;
 exports.Lockup = Lockup;
 exports.MARK_FACES = MARK_FACES;
 exports.Mark = Mark;
+exports.Monogram = Monogram;
 exports.Notice = Notice;
 exports.PackageCard = PackageCard;
 exports.PageHeader = PageHeader;
@@ -2708,6 +2782,8 @@ exports.badgeVariants = badgeVariants;
 exports.buttonVariants = buttonVariants;
 exports.cardVariants = cardVariants;
 exports.cn = cn;
+exports.monogramGround = monogramGround;
+exports.monogramLetter = monogramLetter;
 exports.portraitTone = portraitTone;
 exports.satsText = satsText;
 exports.sectionVariants = sectionVariants;