@orangecheck/ui 0.6.1 → 0.8.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { Boxes, ChevronDown, Check } from 'lucide-react';
-import Link from 'next/link';
+import Link5 from 'next/link';
 import { useState, useRef, useEffect, useId } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useOcSession } from '@orangecheck/auth-client';
@@ -137,30 +137,30 @@ function EcosystemSwitcher({
         children: [
           /* @__PURE__ */ jsx("div", { className: "label-mono text-primary border-b px-4 py-2", children: "\xA7 the family" }),
           /* @__PURE__ */ jsx("ul", { className: "py-1", children: ENTRIES.map((e) => {
-            const isActive = e.slug === current;
+            const isActive2 = e.slug === current;
             return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-              Link,
+              Link5,
               {
                 href: e.href,
                 onClick: () => setOpen(false),
-                "aria-current": isActive ? "page" : void 0,
-                className: "group flex items-baseline gap-3 px-4 py-2 transition-colors " + (isActive ? "bg-primary/5" : "hover:bg-muted"),
+                "aria-current": isActive2 ? "page" : void 0,
+                className: "group flex items-baseline gap-3 px-4 py-2 transition-colors " + (isActive2 ? "bg-primary/5" : "hover:bg-muted"),
                 children: [
                   /* @__PURE__ */ jsx(
                     "span",
                     {
-                      className: "font-display flex-1 text-[12px] font-semibold tracking-tight " + (isActive ? "text-primary" : "text-foreground group-hover:text-primary transition-colors"),
+                      className: "font-display flex-1 text-[12px] font-semibold tracking-tight " + (isActive2 ? "text-primary" : "text-foreground group-hover:text-primary transition-colors"),
                       children: e.label
                     }
                   ),
                   /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono text-[10px] tracking-wider uppercase", children: e.sub }),
-                  isActive && /* @__PURE__ */ jsx(Check, { className: "text-primary h-3 w-3" })
+                  isActive2 && /* @__PURE__ */ jsx(Check, { className: "text-primary h-3 w-3" })
                 ]
               }
             ) }, e.slug);
           }) }),
           /* @__PURE__ */ jsx("div", { className: "border-t px-4 py-2 font-mono text-[10px] tracking-widest uppercase", children: /* @__PURE__ */ jsx(
-            Link,
+            Link5,
             {
               href: "https://docs.ochk.io",
               onClick: () => setOpen(false),
@@ -415,31 +415,31 @@ function OcLogoDropdown({
                     }
                   ),
                   /* @__PURE__ */ jsx("ul", { role: "none", className: "pb-1", children: sectionEntries.map((e) => {
-                    const isActive = e.slug === current;
-                    const href = isActive ? homeHref : e.origin;
+                    const isActive2 = e.slug === current;
+                    const href = isActive2 ? homeHref : e.origin;
                     return /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsxs(
-                      Link,
+                      Link5,
                       {
                         href,
                         role: "menuitem",
                         onClick: () => setOpen(false),
-                        "aria-current": isActive ? "page" : void 0,
-                        className: "group flex items-center gap-2 px-4 py-2 transition-colors " + (isActive ? "bg-primary/8 border-primary -ml-px border-l-2" : "hover:bg-muted -ml-px border-l-2 border-transparent"),
-                        "data-oc-logo-dropdown-item": isActive ? "current" : "sibling",
+                        "aria-current": isActive2 ? "page" : void 0,
+                        className: "group flex items-center gap-2 px-4 py-2 transition-colors " + (isActive2 ? "bg-primary/8 border-primary -ml-px border-l-2" : "hover:bg-muted -ml-px border-l-2 border-transparent"),
+                        "data-oc-logo-dropdown-item": isActive2 ? "current" : "sibling",
                         "data-oc-entry-category": e.category,
                         children: [
                           /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col leading-tight", children: [
                             /* @__PURE__ */ jsx(
                               "span",
                               {
-                                className: "font-display text-[12px] font-semibold tracking-tight " + (isActive ? "text-primary" : "text-foreground group-hover:text-primary transition-colors"),
+                                className: "font-display text-[12px] font-semibold tracking-tight " + (isActive2 ? "text-primary" : "text-foreground group-hover:text-primary transition-colors"),
                                 children: e.label
                               }
                             ),
                             /* @__PURE__ */ jsx("span", { className: "text-muted-foreground mt-0.5 font-mono text-[10px] tracking-wide", children: e.sub })
                           ] }),
                           /* @__PURE__ */ jsx(MenuCategoryChip, { category: e.category }),
-                          isActive ? /* @__PURE__ */ jsxs("span", { className: "text-primary inline-flex shrink-0 items-center gap-1 font-mono text-[10px] tracking-widest uppercase", children: [
+                          isActive2 ? /* @__PURE__ */ jsxs("span", { className: "text-primary inline-flex shrink-0 items-center gap-1 font-mono text-[10px] tracking-widest uppercase", children: [
                             "home",
                             /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" })
                           ] }) : null
@@ -450,7 +450,7 @@ function OcLogoDropdown({
                 ] }, category);
               }) }),
               /* @__PURE__ */ jsx("div", { className: "border-t px-4 py-2 font-mono text-[10px] tracking-widest uppercase", children: /* @__PURE__ */ jsx(
-                Link,
+                Link5,
                 {
                   href: "https://docs.ochk.io",
                   onClick: () => setOpen(false),
@@ -492,6 +492,8 @@ function OcAccountMenuView({
   signInUrl = "/signin",
   signInLabel = "sign in",
   menuItems,
+  primaryNavLinks,
+  secondaryNavLinks,
   showFamilyDashboard,
   build,
   siteState,
@@ -613,7 +615,16 @@ function OcAccountMenuView({
                 /* @__PURE__ */ jsx("div", { className: "text-foreground/90 font-mono text-[11px] leading-tight break-all", children: account.didOc }),
                 displayName ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/80 mt-1 font-mono text-[10px] tracking-wide", children: displayName }) : null
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "p-1", children: [
+              primaryNavLinks && primaryNavLinks.length > 0 ? /* @__PURE__ */ jsx(
+                PopoverSection,
+                {
+                  label: "navigate",
+                  items: primaryNavLinks,
+                  onItemClick: () => setOpen(false)
+                }
+              ) : null,
+              /* @__PURE__ */ jsxs("div", { className: "p-1", "data-oc-account-menu-section": "account", children: [
+                primaryNavLinks && primaryNavLinks.length > 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/60 px-3 pb-1 pt-2 font-mono text-[10px] tracking-widest uppercase", children: "\xA7 account" }) : null,
                 menuItems?.map((item) => {
                   const onClick = () => setOpen(false);
                   const cls = "hover:bg-accent flex items-center gap-2 px-3 py-2 font-mono text-[11px] tracking-wide transition-colors";
@@ -643,7 +654,7 @@ function OcAccountMenuView({
                     },
                     item.href
                   ) : /* @__PURE__ */ jsx(
-                    Link,
+                    Link5,
                     {
                       href: item.href,
                       onClick,
@@ -699,6 +710,15 @@ function OcAccountMenuView({
                   }
                 )
               ] }),
+              secondaryNavLinks && secondaryNavLinks.length > 0 ? /* @__PURE__ */ jsx(
+                PopoverSection,
+                {
+                  label: "more",
+                  items: secondaryNavLinks,
+                  onItemClick: () => setOpen(false),
+                  bordered: true
+                }
+              ) : null,
               build ? /* @__PURE__ */ jsx(BuildFooter, { hostname, build, state: siteState }) : null
             ]
           }
@@ -707,6 +727,66 @@ function OcAccountMenuView({
     }
   );
 }
+function PopoverSection({
+  label,
+  items,
+  onItemClick,
+  bordered
+}) {
+  const cls = "hover:bg-accent flex items-center gap-2 px-3 py-2 font-mono text-[11px] tracking-wide transition-colors";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "p-1 " + (bordered ? "border-border border-t" : ""),
+      "data-oc-account-menu-section": label,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground/60 px-3 pt-2 pb-1 font-mono text-[10px] tracking-widest uppercase", children: [
+          "\xA7 ",
+          label
+        ] }),
+        items.map((item) => {
+          const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2192" }),
+            /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
+            item.external ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "text-muted-foreground/70 text-[10px]",
+                "aria-hidden": true,
+                children: "\u2197"
+              }
+            ) : null
+          ] });
+          return item.external ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: item.href,
+              target: "_blank",
+              rel: "noreferrer",
+              onClick: onItemClick,
+              role: "menuitem",
+              className: cls,
+              "data-oc-account-menu-item": "",
+              children: inner
+            },
+            item.href
+          ) : /* @__PURE__ */ jsx(
+            Link5,
+            {
+              href: item.href,
+              onClick: onItemClick,
+              role: "menuitem",
+              className: cls,
+              "data-oc-account-menu-item": "",
+              children: inner
+            },
+            item.href
+          );
+        })
+      ]
+    }
+  );
+}
 function BuildFooter({
   hostname,
   build,
@@ -748,6 +828,319 @@ function BuildFooter({
     }
   );
 }
+function isActive(pathname, link) {
+  if (link.external) return false;
+  if (link.matchExact) return pathname === link.href;
+  if (link.href === "/") return pathname === "/";
+  return pathname === link.href || pathname.startsWith(link.href + "/");
+}
+function OcPrimaryNav({ activePath, links, className }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "primary",
+      className: "flex min-w-0 items-center justify-start overflow-x-auto gap-0.5 sm:gap-1 whitespace-nowrap [scrollbar-width:none] [&::-webkit-scrollbar]:hidden " + (className ?? ""),
+      "data-oc-primary-nav": "",
+      children: links.map((link) => {
+        const active = isActive(activePath, link);
+        const className2 = "font-display relative shrink-0 px-2 py-1 sm:px-3 text-[11px] sm:text-[12px] font-semibold tracking-wider uppercase transition-colors " + (active ? 'text-primary after:bg-primary after:absolute after:inset-x-2 after:-bottom-[13px] after:h-px after:content-[""]' : "text-muted-foreground hover:text-foreground");
+        const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+          link.label,
+          link.external ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "text-muted-foreground/60 ml-1 text-[9px]",
+              children: "\u2197"
+            }
+          ) : null
+        ] });
+        return link.external ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: link.href,
+            target: "_blank",
+            rel: "noreferrer",
+            className: className2,
+            "data-oc-primary-nav-item": "",
+            children: content
+          },
+          link.href
+        ) : /* @__PURE__ */ jsx(
+          Link5,
+          {
+            href: link.href,
+            "aria-current": active ? "page" : void 0,
+            className: className2,
+            "data-oc-primary-nav-item": active ? "active" : "sibling",
+            children: content
+          },
+          link.href
+        );
+      })
+    }
+  );
+}
+function OcDashboardShell({
+  rootHref = "/dashboard",
+  siteLabel,
+  tools,
+  active,
+  eyebrow,
+  title,
+  description,
+  children,
+  className
+}) {
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  useEffect(() => {
+    if (!drawerOpen) return;
+    function onKey(e) {
+      if (e.key === "Escape") setDrawerOpen(false);
+    }
+    document.addEventListener("keydown", onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [drawerOpen]);
+  const hasHeader = Boolean(title) || Boolean(eyebrow);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "container " + (className ?? ""),
+      "data-oc-dashboard-shell": "",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-[calc(100vh-3rem)] flex-col md:flex-row md:gap-8", children: [
+          /* @__PURE__ */ jsx(
+            Sidebar,
+            {
+              rootHref,
+              siteLabel,
+              tools,
+              active,
+              variant: "desktop"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsxs("div", { className: "border-border flex items-center justify-between border-b py-3 md:hidden", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setDrawerOpen(true),
+                  className: "text-muted-foreground hover:text-foreground inline-flex h-9 items-center gap-2 px-1 font-mono text-[11px] tracking-widest uppercase transition-colors",
+                  "aria-label": "open dashboard tools",
+                  "aria-expanded": drawerOpen,
+                  "data-oc-dashboard-mobile-trigger": "",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[14px] leading-none", children: "\u2261" }),
+                    /* @__PURE__ */ jsx("span", { children: "tools" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Link5,
+                {
+                  href: rootHref,
+                  className: "text-primary font-mono text-[11px] tracking-widest uppercase",
+                  children: "\xA7 dashboard"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "pt-6 md:pt-3", children: [
+              hasHeader && /* @__PURE__ */ jsxs("div", { className: "max-w-3xl", children: [
+                eyebrow ? /* @__PURE__ */ jsx("div", { className: "label-mono text-primary mb-3 font-mono text-[10px] tracking-widest uppercase", children: eyebrow }) : null,
+                title ? /* @__PURE__ */ jsx("h1", { className: "font-display text-2xl font-bold tracking-tight sm:text-3xl", children: title }) : null,
+                description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-3 max-w-[64ch] text-sm leading-relaxed", children: description }) : null
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: hasHeader ? "mt-8 pb-12" : "pb-12", children })
+            ] })
+          ] })
+        ] }),
+        drawerOpen ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "fixed inset-0 z-50 md:hidden",
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": "dashboard tools",
+            "data-oc-dashboard-drawer": "",
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0 bg-background/80 backdrop-blur-sm",
+                  onClick: () => setDrawerOpen(false),
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "bg-background absolute top-0 left-0 h-full w-[85vw] max-w-sm border-r shadow-xl", children: /* @__PURE__ */ jsx(
+                Sidebar,
+                {
+                  rootHref,
+                  siteLabel,
+                  tools,
+                  active,
+                  variant: "drawer",
+                  onClose: () => setDrawerOpen(false)
+                }
+              ) })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function Sidebar({
+  rootHref,
+  siteLabel,
+  tools,
+  active,
+  variant,
+  onClose
+}) {
+  const isDrawer = variant === "drawer";
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: isDrawer ? "flex h-full w-full flex-col bg-card" : "hidden md:sticky md:top-4 md:flex md:h-[calc(100vh-2rem)] md:w-56 md:shrink-0 md:flex-col md:self-start md:overflow-y-auto md:rounded md:border md:bg-card/40 lg:w-60",
+      "aria-label": "dashboard tools",
+      "data-oc-dashboard-sidebar": variant,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "border-b px-4 py-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx(
+              Link5,
+              {
+                href: rootHref,
+                onClick: onClose,
+                className: "hover:text-foreground font-display text-sm font-bold tracking-tight",
+                children: "\xA7 dashboard"
+              }
+            ),
+            isDrawer ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                className: "text-muted-foreground hover:text-foreground -mr-2 inline-flex h-8 w-8 items-center justify-center rounded font-mono text-lg",
+                "aria-label": "close navigation",
+                children: "\xD7"
+              }
+            ) : null
+          ] }),
+          siteLabel ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/70 mt-1 font-mono text-[10px] tracking-widest uppercase", children: siteLabel }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("nav", { className: "flex-1 overflow-y-auto px-2 py-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/60 mb-1 px-3 font-mono text-[10px] tracking-widest uppercase", children: "\xA7 tools" }),
+          /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: tools.map((tool) => {
+            const isActive2 = tool.id === active;
+            const innerCls = "flex items-baseline gap-2 rounded px-3 py-1.5 text-[12.5px] transition-colors " + (isActive2 ? "bg-primary/10 text-primary font-semibold" : "text-muted-foreground hover:text-foreground hover:bg-muted/30");
+            const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+              tool.icon ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "shrink-0 font-mono text-[11px] " + (isActive2 ? "text-primary" : "text-muted-foreground/70"),
+                  "aria-hidden": true,
+                  children: tool.icon
+                }
+              ) : null,
+              /* @__PURE__ */ jsxs("span", { className: "flex-1 leading-tight", children: [
+                /* @__PURE__ */ jsx("span", { children: tool.label }),
+                tool.tagline ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60 mt-0.5 block font-mono text-[10px] tracking-wide normal-case", children: tool.tagline }) : null
+              ] }),
+              tool.external ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "text-muted-foreground/60 text-[10px]",
+                  "aria-hidden": true,
+                  children: "\u2197"
+                }
+              ) : null
+            ] });
+            return /* @__PURE__ */ jsx("li", { children: tool.external ? /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: tool.href,
+                target: "_blank",
+                rel: "noreferrer",
+                onClick: onClose,
+                className: innerCls,
+                "data-oc-dashboard-tool": isActive2 ? "active" : "sibling",
+                children: content
+              }
+            ) : /* @__PURE__ */ jsx(
+              Link5,
+              {
+                href: tool.href,
+                onClick: onClose,
+                "aria-current": isActive2 ? "page" : void 0,
+                className: innerCls,
+                "data-oc-dashboard-tool": isActive2 ? "active" : "sibling",
+                children: content
+              }
+            ) }, tool.id);
+          }) })
+        ] })
+      ]
+    }
+  );
+}
+function OcDashboardHub({ tools, className }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: "grid gap-px border-t border-l sm:grid-cols-2 " + (className ?? ""),
+      "data-oc-dashboard-hub": "",
+      children: tools.map((tool) => {
+        const content = /* @__PURE__ */ jsxs("span", { className: "flex h-full flex-col gap-3 p-5 transition-colors", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-baseline gap-3", children: [
+            tool.icon ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "text-primary font-mono text-[13px]",
+                "aria-hidden": true,
+                children: tool.icon
+              }
+            ) : null,
+            /* @__PURE__ */ jsx("span", { className: "font-display text-foreground text-base font-bold tracking-tight", children: tool.label }),
+            tool.external ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "text-muted-foreground/60 ml-auto text-xs",
+                "aria-hidden": true,
+                children: "\u2197"
+              }
+            ) : /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "text-muted-foreground/60 ml-auto text-xs",
+                "aria-hidden": true,
+                children: "\u2192"
+              }
+            )
+          ] }),
+          tool.tagline ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm leading-relaxed", children: tool.tagline }) : null
+        ] });
+        const cls = "hover:bg-muted/30 group block border-r border-b transition-colors";
+        return /* @__PURE__ */ jsx("li", { children: tool.external ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: tool.href,
+            target: "_blank",
+            rel: "noreferrer",
+            className: cls,
+            children: content
+          }
+        ) : /* @__PURE__ */ jsx(Link5, { href: tool.href, className: cls, children: content }) }, tool.id);
+      })
+    }
+  );
+}
 function AppShell({
   eyebrow,
   title,
@@ -831,7 +1224,7 @@ function CtaLink({
   if (external) {
     return /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noreferrer", className: cls, children: text });
   }
-  return /* @__PURE__ */ jsx(Link, { href, className: cls, children: text });
+  return /* @__PURE__ */ jsx(Link5, { href, className: cls, children: text });
 }
 var TONE_CLASS3 = {
   default: "",
@@ -871,6 +1264,6 @@ function StatTile({ children, ...item }) {
   ] });
 }
 
-export { AppShell, EcosystemSwitcher, EmptyState, FAMILY_PROPERTIES, OcAccountMenu, OcAccountMenuView, OcLogoDropdown, SITE_STATE_LABEL, SectionHeader, StatGrid, StatTile, findFamilyProperty };
+export { AppShell, EcosystemSwitcher, EmptyState, FAMILY_PROPERTIES, OcAccountMenu, OcAccountMenuView, OcDashboardHub, OcDashboardShell, OcLogoDropdown, OcPrimaryNav, SITE_STATE_LABEL, SectionHeader, StatGrid, StatTile, findFamilyProperty };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map