@orangecheck/app-design 0.1.2 → 0.2.0

package/dist/index.mjs

@@ -241,6 +241,31 @@ var badgeVariants = cva(
 function Badge({ className, tone, ...props }) {
   return /* @__PURE__ */ jsx("span", { "data-ui": "badge", className: cn(badgeVariants({ tone }), className), ...props });
 }
+function StatusPill({
+  className,
+  children,
+  pulse = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-ui": "status-pill",
+      className: cn(
+        "inline-flex min-h-8 w-fit items-center gap-2.5 rounded-full border border-border bg-card py-1 pl-3 pr-3.5 text-[0.875rem] leading-snug text-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: "relative flex size-2 shrink-0", children: [
+          pulse ? /* @__PURE__ */ jsx("span", { className: "absolute inset-0 rounded-full bg-oca-orange opacity-50 motion-safe:animate-ping" }) : null,
+          /* @__PURE__ */ jsx("span", { className: "relative size-2 rounded-full bg-oca-orange" })
+        ] }),
+        children
+      ]
+    }
+  );
+}
 var cardVariants = cva("relative rounded-[1.25rem] border", {
   variants: {
     tone: {
@@ -712,30 +737,25 @@ function Lockup({ name = "orangecheck", size = 28, className }) {
     }
   );
 }
-var SPHERE_GRADIENT = "radial-gradient(circle at 50% 42%, #fff8f3 0%, #ffe2d3 22%, #ffb48d 45%, #ff8a55 68%, #ff6a2c 100%)";
+var SPHERE_GRADIENT = "radial-gradient(86% 86% at 36% 32%, #fff7f0 0%, #ffdec8 14%, #ffa069 34%, #ff7030 56%, #f65210 78%, #de4006 100%)";
+var SPHERE_DEPTH = "inset -14px -22px 44px rgb(150 40 0 / 0.16), 0 36px 70px -34px rgb(234 88 11 / 0.45)";
+function Ball({ src, alt, float }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("relative size-full overflow-hidden rounded-full", float && "oca-animate-float"),
+      style: { background: SPHERE_GRADIENT, boxShadow: SPHERE_DEPTH },
+      children: /* @__PURE__ */ jsx("img", { src, alt, className: "absolute inset-0 size-full select-none", draggable: false })
+    }
+  );
+}
 function HalftoneSphere({ src, alt, stadium = false, float = false, className, style }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative aspect-square w-full", className), style, children: [
-    stadium ? (
-      // Measured from the deck's title slide: a rounded square, its corners
-      // 17% of the sphere, level with the sphere's foot, reaching left behind
-      // the headline. On phones a ring inside the gutter, since the offset
-      // would push the page sideways.
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-hidden": true,
-          className: "oca-stadium pointer-events-none absolute inset-[-6%] rounded-full md:[inset:-12%_14%_0%_-26%] md:rounded-[17%]"
-        }
-      )
-    ) : null,
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn("relative size-full overflow-hidden rounded-full", float && "oca-animate-float"),
-        style: { background: SPHERE_GRADIENT },
-        children: /* @__PURE__ */ jsx("img", { src, alt, className: "absolute inset-0 size-full select-none", draggable: false })
-      }
-    )
+  if (!stadium) {
+    return /* @__PURE__ */ jsx("div", { className: cn("relative aspect-square w-full", className), style, children: /* @__PURE__ */ jsx(Ball, { src, alt, float }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative aspect-[1.255/1.127] w-full", className), style, children: [
+    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "oca-stadium pointer-events-none absolute left-0 top-0 h-full w-[88.4%] rounded-[32%]" }),
+    /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 right-0 aspect-square w-[79.7%]", children: /* @__PURE__ */ jsx(Ball, { src, alt, float }) })
   ] });
 }
 function IsoCheck({ size = 360, settle = false, shadow = true, title, className }) {
@@ -751,6 +771,66 @@ function IsoCheck({ size = 360, settle = false, shadow = true, title, className
     ) : null
   ] });
 }
+var CELL_W = 22;
+var CELL_H = 27;
+function picks(count, total, seed) {
+  let s = seed >>> 0;
+  const out = /* @__PURE__ */ new Set();
+  while (out.size < Math.min(count, total)) {
+    s = Math.imul(s, 1664525) + 1013904223 >>> 0;
+    out.add(s % total);
+  }
+  return out;
+}
+function Crowd({
+  cols = 26,
+  rows = 9,
+  real = 7,
+  seed = 21,
+  tone = "ink",
+  label = "A crowd of identical accounts. Only a few are real.",
+  className
+}) {
+  const width = cols * CELL_W;
+  const scales = Array.from({ length: rows }, (_, r) => 0.5 + 0.5 * (r / Math.max(1, rows - 1)));
+  const height = scales.reduce((h, s) => h + CELL_H * s, 0);
+  const nearFrom = Math.floor(rows / 2) * cols;
+  const realSet = new Set([...picks(real, rows * cols - nearFrom, seed)].map((i) => i + nearFrom));
+  const bot = tone === "ink" ? "#ffffff" : "#0a0a0a";
+  let y = 0;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      role: "img",
+      "aria-label": label,
+      viewBox: `0 0 ${width} ${Math.ceil(height)}`,
+      className: cn("block h-auto w-full", className),
+      children: scales.map((s, r) => {
+        const rowY = y;
+        y += CELL_H * s;
+        const rowW = cols * CELL_W * s;
+        const x0 = (width - rowW) / 2;
+        return Array.from({ length: cols }, (_, c) => {
+          const i = r * cols + c;
+          const isReal = realSet.has(i);
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              transform: `translate(${x0 + c * CELL_W * s} ${rowY}) scale(${s})`,
+              fill: isReal ? "var(--oca-orange)" : bot,
+              fillOpacity: isReal ? 1 : 0.1 + 0.16 * s,
+              children: [
+                /* @__PURE__ */ jsx("circle", { cx: 11, cy: 8, r: 4.4 }),
+                /* @__PURE__ */ jsx("path", { d: "M3 25a8 8.5 0 0 1 16 0Z" })
+              ]
+            },
+            i
+          );
+        });
+      })
+    }
+  );
+}
 function Eyebrow({ className, onInk, ...props }) {
   return /* @__PURE__ */ jsx("p", { className: cn("oca-eyebrow", onInk && "text-oca-ink-eyebrow", className), ...props });
 }
@@ -888,6 +968,47 @@ function CodeBlock({
     /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto p-5 font-mono text-[0.875rem] leading-relaxed text-oca-ink-muted", children: /* @__PURE__ */ jsx("code", { children: code }) })
   ] });
 }
+function SplitBar({
+  segments,
+  caption,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("figure", { className: cn("flex flex-col gap-5", className), children: [
+    caption ? /* @__PURE__ */ jsx("figcaption", { className: "text-[0.9375rem]", children: caption }) : null,
+    /* @__PURE__ */ jsx("div", { className: "flex h-16 w-full gap-1.5 overflow-hidden rounded-[1.25rem] md:h-20", children: segments.map((s, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex min-w-0 items-end rounded-[1rem] px-4 pb-3",
+          s.tone === "card" ? "bg-white text-oca-ink" : "bg-oca-ink text-white"
+        ),
+        style: { flexBasis: `${s.pct}%` },
+        children: /* @__PURE__ */ jsxs("span", { className: "oca-tabular text-[1.5rem] leading-none tracking-[-0.02em] md:text-[1.875rem]", children: [
+          s.pct,
+          "%"
+        ] })
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsx("dl", { className: "grid gap-x-8 gap-y-2 sm:grid-cols-2", children: segments.map((s, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2.5", children: [
+      /* @__PURE__ */ jsxs("dt", { className: "sr-only", children: [
+        s.pct,
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "inline-block size-2.5 shrink-0 translate-y-[-1px] rounded-full",
+            s.tone === "card" ? "bg-white" : "bg-oca-ink"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("dd", { className: "text-[0.9375rem] leading-snug", children: s.label })
+    ] }, i)) })
+  ] });
+}
 var LABEL = {
   yes: "Yes",
   testing: "In testing",
@@ -1443,6 +1564,6 @@ function ThemeToggle({ className }) {
   );
 }
 
-export { APP_ATTRIBUTE, APP_ID, Accent, AccountMenu, ActivityList, AppIcon, AppShell, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNumeral, CardTitle, Checkbox, CodeBlock, Container, CopyButton, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Display, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EmptyState, Eyebrow, Field, Footnote, HalftoneSphere, HashChip, Input, IsoCheck, Kbd, KeyValueList, Label, Lead, Lockup, MARK_FACES, Mark, Notice, PackageCard, PageHeader, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProgressSteps, Prose, RadioGroup, RadioGroupItem, SPHERE_GRADIENT, Sats, SatsFigure, Section, SectionIntro, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, SiteFooter, SiteHeader, Skeleton, Spinner, StatCard, StatGrid, StatusDot, StepGrid, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TruthTable, UsdApprox, appColors, appFonts, badgeVariants, buttonVariants, cardVariants, cn, satsText, sectionVariants, useCopy };
+export { APP_ATTRIBUTE, APP_ID, Accent, AccountMenu, ActivityList, AppIcon, AppShell, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardNumeral, CardTitle, Checkbox, CodeBlock, Container, CopyButton, Crowd, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Display, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EmptyState, Eyebrow, Field, Footnote, HalftoneSphere, HashChip, Input, IsoCheck, Kbd, KeyValueList, Label, Lead, Lockup, MARK_FACES, Mark, Notice, PackageCard, PageHeader, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProgressSteps, Prose, RadioGroup, RadioGroupItem, SPHERE_GRADIENT, Sats, SatsFigure, Section, SectionIntro, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger, SiteFooter, SiteHeader, Skeleton, Spinner, SplitBar, StatCard, StatGrid, StatusDot, StatusPill, StepGrid, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TruthTable, UsdApprox, appColors, appFonts, badgeVariants, buttonVariants, cardVariants, cn, satsText, sectionVariants, useCopy };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map