@orangecheck/app-design 0.5.11 → 0.5.13

package/dist/index.mjs

@@ -673,13 +673,7 @@ var DropdownMenuLabel = forwardRef(function DropdownMenuLabel2({ className, ...p
 var DropdownMenuSeparator = forwardRef(function DropdownMenuSeparator2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, { ref, className: cn("my-1.5 h-px bg-border", className), ...props });
 });
-function ScrollFade({
-  fade = "var(--card)",
-  className,
-  innerClassName,
-  children,
-  ...props
-}) {
+function ScrollFade({ fade = "var(--card)", className, innerClassName, children, ...props }) {
   const ref = useRef(null);
   const [edges, setEdges] = useState({ left: false, right: false });
   const measure = useCallback(() => {
@@ -687,9 +681,7 @@ function ScrollFade({
     if (!el) return;
     const left = el.scrollLeft > 1;
     const right = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
-    setEdges(
-      (e) => e.left === left && e.right === right ? e : { left, right }
-    );
+    setEdges((e) => e.left === left && e.right === right ? e : { left, right });
   }, []);
   useEffect(() => {
     const el = ref.current;
@@ -723,9 +715,7 @@ function ScrollFade({
           "pointer-events-none absolute inset-y-0 left-0 w-8 transition-opacity duration-150",
           edges.left ? "opacity-100" : "opacity-0"
         ),
-        style: {
-          background: `linear-gradient(to right, ${fade}, transparent)`
-        }
+        style: { background: `linear-gradient(to right, ${fade}, transparent)` }
       }
     ),
     /* @__PURE__ */ jsx(
@@ -980,8 +970,7 @@ function HalftoneCanvas({
       raf = busy && visible && !document.hidden ? requestAnimationFrame(frame) : 0;
     }
     const kick = () => {
-      if (!raf && visible && !document.hidden)
-        raf = requestAnimationFrame(frame);
+      if (!raf && visible && !document.hidden) raf = requestAnimationFrame(frame);
     };
     layout();
     setLive(true);
@@ -1023,41 +1012,29 @@ function HalftoneCanvas({
       el.removeEventListener("pointerleave", leave);
     };
   }, [tone, density, lens, intro, breathe, ink]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: wrap,
-      className: cn("relative aspect-square w-full", className),
-      style,
-      "data-live": live || void 0,
-      children: [
-        fallbackSrc ? (
-          // eslint-disable-next-line @next/next/no-img-element -- the still screen, until the live one draws
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: fallbackSrc,
-              alt: "",
-              "aria-hidden": true,
-              className: cn(
-                "absolute inset-0 size-full select-none transition-opacity duration-300",
-                live && "opacity-0"
-              ),
-              draggable: false
-            }
-          )
-        ) : null,
-        /* @__PURE__ */ jsx(
-          "canvas",
-          {
-            ref: canvas,
-            ...alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true },
-            className: "absolute inset-0 size-full"
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { ref: wrap, className: cn("relative aspect-square w-full", className), style, "data-live": live || void 0, children: [
+    fallbackSrc ? (
+      // eslint-disable-next-line @next/next/no-img-element -- the still screen, until the live one draws
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: fallbackSrc,
+          alt: "",
+          "aria-hidden": true,
+          className: cn("absolute inset-0 size-full select-none transition-opacity duration-300", live && "opacity-0"),
+          draggable: false
+        }
+      )
+    ) : null,
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvas,
+        ...alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true },
+        className: "absolute inset-0 size-full"
+      }
+    )
+  ] });
 }
 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)";
@@ -2429,25 +2406,14 @@ var ErrorBoundary = class extends Component {
         title: "Something on this page broke.",
         action: /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Button, { onClick: this.reset, children: "Try again" }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "secondary",
-              onClick: () => window.location.reload(),
-              children: "Reload the page"
-            }
-          )
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => window.location.reload(), children: "Reload the page" })
         ] }),
         children: "Nothing you saved is affected. If it keeps happening, tell us at hello@ochk.io."
       }
     ) });
   }
 };
-function NavLink({
-  item,
-  className,
-  onNavigate
-}) {
+function NavLink({ item, className, onNavigate }) {
   const cls = cn(
     "rounded-full px-3 py-2 text-[0.9375rem] transition-colors",
     item.active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
@@ -2456,16 +2422,7 @@ function NavLink({
   if (item.external) {
     return /* @__PURE__ */ jsx("a", { href: item.href, className: cls, rel: "noreferrer", onClick: onNavigate, children: item.label });
   }
-  return /* @__PURE__ */ jsx(
-    Link2,
-    {
-      href: item.href,
-      className: cls,
-      "aria-current": item.active ? "page" : void 0,
-      onClick: onNavigate,
-      children: item.label
-    }
-  );
+  return /* @__PURE__ */ jsx(Link2, { href: item.href, className: cls, "aria-current": item.active ? "page" : void 0, onClick: onNavigate, children: item.label });
 }
 function SiteHeader({
   home = "/",
@@ -2482,38 +2439,50 @@ function SiteHeader({
         "sticky top-0 z-40 w-full border-b border-transparent bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/70",
         className
       ),
-      children: /* @__PURE__ */ jsxs("div", { className: "oca-container flex h-16 items-center justify-between gap-4 md:h-[4.5rem]", children: [
-        /* @__PURE__ */ jsxs(Link2, { href: home, className: "-ml-1 rounded-lg p-1", children: [
-          brand ?? /* @__PURE__ */ jsx(Lockup, { size: 28 }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: " home" })
-        ] }),
-        nav.length > 0 ? /* @__PURE__ */ jsx("nav", { "aria-label": "Main", className: "hidden items-center gap-1 md:flex", children: nav.map((n) => /* @__PURE__ */ jsx(NavLink, { item: n }, n.href)) }) : null,
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          actions,
-          nav.length > 0 ? /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
-            /* @__PURE__ */ jsx(
-              SheetTrigger,
-              {
-                className: "inline-flex size-10 items-center justify-center rounded-full text-foreground hover:bg-accent md:hidden",
-                "aria-label": "Open menu",
-                children: /* @__PURE__ */ jsx(Menu, { className: "size-5" })
-              }
-            ),
-            /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "pt-16", children: [
-              /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Menu" }),
-              /* @__PURE__ */ jsx("nav", { "aria-label": "Main", className: "flex flex-col", children: nav.map((n) => /* @__PURE__ */ jsx(
-                NavLink,
-                {
-                  item: n,
-                  className: "rounded-xl px-3 py-3 text-[1.0625rem]",
-                  onNavigate: () => setOpen(false)
-                },
-                n.href
-              )) })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "oca-container flex h-16 items-center justify-between gap-4 md:h-[4.5rem]",
+            // Three columns, the outer two each at least their content: the
+            // navigation stays centred whatever the actions hold, so it does
+            // not shift when they change (signed out to signed in).
+            nav.length > 0 && "md:grid md:grid-cols-[minmax(max-content,1fr)_auto_minmax(max-content,1fr)]"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs(Link2, { href: home, className: "-ml-1 justify-self-start rounded-lg p-1", children: [
+              brand ?? /* @__PURE__ */ jsx(Lockup, { size: 28 }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: " home" })
+            ] }),
+            nav.length > 0 ? /* @__PURE__ */ jsx("nav", { "aria-label": "Main", className: "hidden items-center gap-1 md:flex", children: nav.map((n) => /* @__PURE__ */ jsx(NavLink, { item: n }, n.href)) }) : null,
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 justify-self-end", children: [
+              actions,
+              nav.length > 0 ? /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+                /* @__PURE__ */ jsx(
+                  SheetTrigger,
+                  {
+                    className: "inline-flex size-10 items-center justify-center rounded-full text-foreground hover:bg-accent md:hidden",
+                    "aria-label": "Open menu",
+                    children: /* @__PURE__ */ jsx(Menu, { className: "size-5" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "pt-16", children: [
+                  /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Menu" }),
+                  /* @__PURE__ */ jsx("nav", { "aria-label": "Main", className: "flex flex-col", children: nav.map((n) => /* @__PURE__ */ jsx(
+                    NavLink,
+                    {
+                      item: n,
+                      className: "rounded-xl px-3 py-3 text-[1.0625rem]",
+                      onNavigate: () => setOpen(false)
+                    },
+                    n.href
+                  )) })
+                ] })
+              ] }) : null
             ] })
-          ] }) : null
-        ] })
-      ] })
+          ]
+        }
+      )
     }
   );
 }
@@ -2535,46 +2504,27 @@ function SiteFooter({
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: cn(
-              "flex min-w-0 flex-col gap-1",
-              spans && "col-span-2 md:col-span-1"
-            ),
+            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",
+              /* @__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,
                 {
-                  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
-                  ))
-                }
-              )
+                  item: l,
+                  className: "-mx-3 py-2.5 text-[0.9375rem] md:py-1.5"
+                },
+                l.href
+              )) })
             ]
           },
           col.heading
         );
       })
     ] }),
-    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,
+    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", children: /* @__PURE__ */ jsx("div", { className: "border-t border-border py-6 text-[0.875rem] text-muted-foreground", children: meta }) }) : null
   ] });
 }
@@ -2721,18 +2671,22 @@ function AppShell({
 function AccountMenu({
   name,
   detail,
-  items
+  items,
+  nameFrom = "sm"
 }) {
   const initial = name.trim().charAt(0).toUpperCase() || "\xB7";
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsxs(
       DropdownMenuTrigger,
       {
-        className: "inline-flex h-10 items-center gap-2.5 rounded-full border border-border bg-card pl-1 pr-1 text-[0.9375rem] outline-none transition-colors hover:border-oca-hairline-strong focus-visible:ring-2 focus-visible:ring-ring sm:pr-3.5",
+        className: cn(
+          "inline-flex h-10 items-center gap-2.5 rounded-full border border-border bg-card pl-1 pr-1 text-[0.9375rem] outline-none transition-colors hover:border-oca-hairline-strong focus-visible:ring-2 focus-visible:ring-ring",
+          nameFrom === "lg" ? "lg:pr-3.5" : "sm:pr-3.5"
+        ),
         "aria-label": `Account: ${name}`,
         children: [
           /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center rounded-full bg-foreground text-[0.8125rem] font-medium text-background", children: initial }),
-          /* @__PURE__ */ jsx("span", { className: "max-w-[10rem] truncate max-sm:hidden", children: name })
+          /* @__PURE__ */ jsx("span", { className: cn("max-w-[10rem] truncate", nameFrom === "lg" ? "max-lg:hidden" : "max-sm:hidden"), children: name })
         ]
       }
     ),