@orangecheck/app-design 0.5.2 → 0.5.4

package/dist/components.mjs

@@ -53,7 +53,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
       ),
@@ -351,7 +351,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"
       }
     },
@@ -538,7 +539,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"
       },
@@ -607,7 +608,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
       ]
     }
@@ -917,7 +927,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
   ] });
 }
@@ -1034,7 +1044,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(
@@ -1216,14 +1226,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
   ] });
 }
@@ -1232,7 +1252,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
       ),
@@ -1308,8 +1329,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)"
   },
   {