@orangecheck/app-design 0.5.2 → 0.5.4

package/dist/index.mjs

@@ -206,7 +206,7 @@ var buttonVariants = cva(
         brand: "bg-brand text-brand-foreground hover:bg-oca-orange-deep",
         ghost: "text-foreground hover:bg-accent",
         danger: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        link: "h-auto rounded-none px-0 text-foreground underline decoration-border underline-offset-4 hover:decoration-foreground",
+        link: "h-auto rounded-none px-0 text-foreground underline decoration-foreground/35 underline-offset-4 hover:decoration-foreground",
         onInk: "bg-white text-oca-ink hover:bg-white/90",
         onInkOutline: "border border-white/20 text-white hover:bg-white/10"
       },
@@ -257,7 +257,8 @@ var badgeVariants = cva(
         // the brand accent, information is neutral.
         warning: "border-transparent bg-[color-mix(in_oklab,var(--oca-orange)_12%,var(--card))] text-oca-accent-ink",
         info: "border-border bg-card text-foreground",
-        ink: "border-transparent bg-oca-ink text-oca-ink-foreground",
+        // Inverted in dark mode, where ink would sit on a card of nearly its own colour.
+        ink: "border-transparent bg-oca-ink text-oca-ink-foreground dark:bg-foreground dark:text-background",
         onInk: "border-white/15 bg-white/5 text-white/90"
       }
     },
@@ -1221,7 +1222,7 @@ function Prose({ className, ...props }) {
         "[&_h2]:oca-display-3 [&_h2]:mb-4 [&_h2]:mt-14 [&_h2]:scroll-mt-24 [&_h2]:text-foreground",
         "[&_h3]:oca-title [&_h3]:mb-3 [&_h3]:mt-10 [&_h3]:text-foreground",
         "[&_p]:my-4 [&_strong]:font-medium [&_strong]:text-foreground",
-        "[&_a]:text-foreground [&_a]:underline [&_a]:decoration-border [&_a]:underline-offset-4 hover:[&_a]:decoration-foreground",
+        "[&_a]:text-foreground [&_a]:underline [&_a]:decoration-foreground/35 [&_a]:underline-offset-4 hover:[&_a]:decoration-foreground",
         "[&_ul]:my-4 [&_ul]:list-disc [&_ul]:pl-5 [&_li]:my-1.5 [&_code]:text-foreground",
         className
       ),
@@ -1568,7 +1569,16 @@ function StatCard({ label, value, hint, className }) {
       ),
       children: [
         /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] leading-snug text-muted-foreground", children: label }),
-        /* @__PURE__ */ jsx("span", { className: "self-end break-words oca-tabular text-[1.5rem] leading-tight tracking-[-0.02em] md:text-[1.75rem]", children: value }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "break-words oca-tabular text-[1.5rem] leading-tight tracking-[-0.02em] md:text-[1.75rem]",
+              inGrid && "self-end"
+            ),
+            children: value
+          }
+        ),
         hint ? /* @__PURE__ */ jsx("span", { className: "text-[0.8125rem] leading-snug text-muted-foreground", children: hint }) : inGrid ? /* @__PURE__ */ jsx("span", { "aria-hidden": true }) : null
       ]
     }
@@ -1878,7 +1888,7 @@ function HashChip({
   const shown = middle(value, head, tail);
   const text = /* @__PURE__ */ jsx("span", { title: value, className: "font-mono text-[0.875rem]", children: shown });
   return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex max-w-full items-center gap-1", className), children: [
-    href ? /* @__PURE__ */ jsx("a", { href, className: "underline decoration-border underline-offset-4 hover:decoration-foreground", children: text }) : text,
+    href ? /* @__PURE__ */ jsx("a", { href, className: "underline decoration-foreground/35 underline-offset-4 hover:decoration-foreground", children: text }) : text,
     copy ? /* @__PURE__ */ jsx(CopyButton, { value, label: "Copy full value" }) : null
   ] });
 }
@@ -1995,7 +2005,7 @@ function CodeBlock({
             {
               className: cn(folded && "overflow-hidden"),
               style: folded ? { maxHeight: `calc(${maxLines} * 1.625em + 2.5rem)` } : void 0,
-              children: /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--oca-code-surface)", children: /* @__PURE__ */ jsx("pre", { className: "w-max min-w-full p-5 font-mono text-[0.875rem] leading-[1.625] text-oca-ink-muted", children: /* @__PURE__ */ jsx("code", { children: code }) }) })
+              children: /* @__PURE__ */ jsx(ScrollFade, { fade: "var(--oca-code-surface)", children: /* @__PURE__ */ jsx("pre", { className: "w-max min-w-full p-5 font-mono text-[0.875rem] leading-[1.625] text-oca-ink-muted [font-variant-ligatures:none]", children: /* @__PURE__ */ jsx("code", { children: code }) }) })
             }
           ),
           foldable ? /* @__PURE__ */ jsx(
@@ -2177,14 +2187,24 @@ function SatsFigure({
   label,
   value,
   hint,
+  size = "md",
   className
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
     /* @__PURE__ */ jsx("span", { className: "text-[0.9375rem] text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsxs("span", { className: "oca-display-3 oca-tabular", children: [
-      /* @__PURE__ */ jsx(Sats, { value, unit: "none" }),
-      /* @__PURE__ */ jsx("span", { className: "ml-2 text-[0.5em] tracking-normal text-muted-foreground", children: "sats" })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "oca-tabular",
+          size === "lg" ? "text-[clamp(3rem,2.2rem+3vw,4.75rem)] leading-[0.95] tracking-[-0.045em] [font-family:var(--oc-font-display)]" : "oca-display-3"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Sats, { value, unit: "none" }),
+          /* @__PURE__ */ jsx("span", { className: "ml-2 text-[0.5em] tracking-normal text-muted-foreground", children: "sats" })
+        ]
+      }
+    ),
     hint ? /* @__PURE__ */ jsx("span", { className: "text-[0.875rem] text-muted-foreground", children: hint }) : null
   ] });
 }
@@ -2193,7 +2213,8 @@ function PhoneFrame({ className, style, children }) {
     "div",
     {
       className: cn(
-        "relative w-[17.5rem] shrink-0 rounded-[2.9rem] bg-[#0b0b0c] p-[0.6rem]",
+        // A lighter bezel in dark mode, or the phone dissolves into the page.
+        "relative w-[17.5rem] shrink-0 rounded-[2.9rem] bg-[#0b0b0c] p-[0.6rem] dark:bg-[#2a2a2d]",
         "shadow-[0_50px_100px_-40px_rgb(10_10_10/0.55),0_0_0_1px_rgb(255_255_255/0.06)_inset]",
         className
       ),
@@ -2269,8 +2290,9 @@ var GROUNDS = [
     dot: "rgb(10 10 10 / 0.22)"
   },
   {
-    className: "text-white ring-1 ring-inset ring-white/10",
-    background: "linear-gradient(145deg, #2a2a2a, #0a0a0a)",
+    // Lifted at the top edge so the tile keeps its shape on a dark card.
+    className: "text-white ring-1 ring-inset ring-white/15",
+    background: "linear-gradient(145deg, #3d3d3d, #0d0d0d 70%)",
     dot: "rgb(255 255 255 / 0.16)"
   },
   {
@@ -2403,23 +2425,33 @@ function SiteFooter({
         /* @__PURE__ */ jsx(Lockup, { size: 26 }),
         fineprint ? /* @__PURE__ */ jsx("p", { className: "max-w-xs text-[0.9375rem] leading-relaxed text-muted-foreground", children: fineprint }) : null
       ] }),
-      columns.map((col) => /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
-        /* @__PURE__ */ jsx("p", { className: "mb-2 text-[0.875rem] font-medium", children: col.heading }),
-        col.links.map((l) => /* @__PURE__ */ jsx(
-          NavLink,
+      columns.map((col, i) => {
+        const spans = columns.length % 2 === 1 && i === columns.length - 1;
+        return /* @__PURE__ */ jsxs(
+          "div",
           {
-            item: l,
-            className: "-mx-3 py-2.5 text-[0.9375rem] md:py-1.5"
+            className: cn("flex min-w-0 flex-col gap-1", spans && "col-span-2 md:col-span-1"),
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "mb-2 text-[0.875rem] font-medium", children: col.heading }),
+              /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1", spans && "grid grid-cols-2 gap-x-6 md:flex md:flex-col"), children: col.links.map((l) => /* @__PURE__ */ jsx(
+                NavLink,
+                {
+                  item: l,
+                  className: "-mx-3 py-2.5 text-[0.9375rem] md:py-1.5"
+                },
+                l.href
+              )) })
+            ]
           },
-          l.href
-        ))
-      ] }, col.heading))
+          col.heading
+        );
+      })
     ] }),
-    signature ? /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "oca-container select-none overflow-hidden pb-6 md:pb-8", children: /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-[0.18em] text-[clamp(3rem,11.5vw,10rem)] leading-[0.78] tracking-[-0.065em] [font-family:var(--oc-font-display)]", children: [
+    signature ? /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "oca-container select-none overflow-hidden pb-8 md:pb-12", children: /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-[0.18em] text-[clamp(3rem,11.5vw,10rem)] leading-[0.78] tracking-[-0.065em] [font-family:var(--oc-font-display)]", children: [
       /* @__PURE__ */ jsx("span", { className: "mb-[0.06em] inline-block w-[1.1em] shrink-0", children: /* @__PURE__ */ jsx(Mark, { className: "block h-auto w-full" }) }),
       /* @__PURE__ */ jsx("span", { children: "orangecheck" })
     ] }) }) : null,
-    meta ? /* @__PURE__ */ jsx("div", { className: "oca-container border-t border-border py-6 text-[0.875rem] text-muted-foreground", children: meta }) : null
+    meta ? /* @__PURE__ */ jsx("div", { className: "oca-container", children: /* @__PURE__ */ jsx("div", { className: "border-t border-border py-6 text-[0.875rem] text-muted-foreground", children: meta }) }) : null
   ] });
 }
 function SideNav({ groups, onNavigate }) {