@orangecheck/app-design 0.5.0 → 0.5.1

package/dist/index.mjs

@@ -2259,6 +2259,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__ */ 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) })
+      ]
+    }
+  );
+}
 function NavLink({ item, className, onNavigate }) {
   const cls = cn(
     "rounded-full px-3 py-2 text-[0.9375rem] transition-colors",
@@ -2544,6 +2614,6 @@ function ThemeToggle({ className }) {
   );
 }
 
-export { APP_ATTRIBUTE, APP_ID, Accent, AccountMenu, ActivityList, AppIcon, AppShell, Badge, BrowserFrame, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNumeral, CardTitle, Checkbox, CodeBlock, Container, CopyButton, Crowd, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Display, DocHeader, DocLayout, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EmptyLine, EmptyState, Eyebrow, Field, FloatChip, Footnote, HalftoneCanvas, HalftoneSphere, HashChip, Input, IsoCheck, Kbd, KeyValueList, Label, Lead, LoadingBlock, Lockup, MARK_FACES, Mark, Notice, PackageCard, PageHeader, PageHero, PhoneFrame, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProgressSteps, Prose, RadioGroup, RadioGroupItem, Reveal, SPHERE_GRADIENT, Sats, SatsFigure, ScrollFade, ScrollStory, Section, SectionIntro, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, ShellContext, SiteFooter, SiteHeader, Skeleton, Spinner, SplitBar, StatCard, StatGrid, StatusDot, StatusPill, StepGrid, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, Ticker, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TruthTable, UsdApprox, appColors, appFonts, badgeVariants, buttonVariants, cardVariants, cn, portraitTone, satsText, sectionVariants, useCopy, useInView, useShellPlace, useTimedOut };
+export { APP_ATTRIBUTE, APP_ID, Accent, AccountMenu, ActivityList, AppIcon, AppShell, Badge, BrowserFrame, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNumeral, CardTitle, Checkbox, CodeBlock, Container, CopyButton, Crowd, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Display, DocHeader, DocLayout, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EmptyLine, EmptyState, Eyebrow, Field, FloatChip, Footnote, HalftoneCanvas, HalftoneSphere, HashChip, Input, IsoCheck, Kbd, KeyValueList, Label, Lead, LoadingBlock, Lockup, MARK_FACES, Mark, Monogram, Notice, PackageCard, PageHeader, PageHero, PhoneFrame, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProgressSteps, Prose, RadioGroup, RadioGroupItem, Reveal, SPHERE_GRADIENT, Sats, SatsFigure, ScrollFade, ScrollStory, Section, SectionIntro, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, ShellContext, SiteFooter, SiteHeader, Skeleton, Spinner, SplitBar, StatCard, StatGrid, StatusDot, StatusPill, StepGrid, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, Ticker, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TruthTable, UsdApprox, appColors, appFonts, badgeVariants, buttonVariants, cardVariants, cn, monogramGround, monogramLetter, portraitTone, satsText, sectionVariants, useCopy, useInView, useShellPlace, useTimedOut };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map