@orangecheck/ui 0.7.0 → 0.8.1

package/dist/index.d.mts

@@ -58,6 +58,8 @@ interface OcAccountMenuProps {
     signInUrl?: string;
     signInLabel?: string;
     menuItems?: ReadonlyArray<OcAccountMenuItem>;
+    primaryNavLinks?: ReadonlyArray<OcAccountMenuItem>;
+    secondaryNavLinks?: ReadonlyArray<OcAccountMenuItem>;
     showFamilyDashboard?: boolean;
     build?: OcAccountMenuBuildInfo;
     siteState?: SiteState;
@@ -69,7 +71,7 @@ declare function OcAccountMenu(props: OcAccountMenuProps): react_jsx_runtime.JSX
 interface OcAccountMenuViewProps extends OcAccountMenuProps {
     session: OcAccountMenuSession;
 }
-declare function OcAccountMenuView({ current, signInUrl, signInLabel, menuItems, showFamilyDashboard, build, siteState, className, triggerClassName, popoverClassName, session, }: OcAccountMenuViewProps): react_jsx_runtime.JSX.Element;
+declare function OcAccountMenuView({ current, signInUrl, signInLabel, menuItems, primaryNavLinks, secondaryNavLinks, showFamilyDashboard, build, siteState, className, triggerClassName, popoverClassName, session, }: OcAccountMenuViewProps): react_jsx_runtime.JSX.Element;
 
 interface OcPrimaryNavLink {
     href: string;

package/dist/index.d.ts

@@ -58,6 +58,8 @@ interface OcAccountMenuProps {
     signInUrl?: string;
     signInLabel?: string;
     menuItems?: ReadonlyArray<OcAccountMenuItem>;
+    primaryNavLinks?: ReadonlyArray<OcAccountMenuItem>;
+    secondaryNavLinks?: ReadonlyArray<OcAccountMenuItem>;
     showFamilyDashboard?: boolean;
     build?: OcAccountMenuBuildInfo;
     siteState?: SiteState;
@@ -69,7 +71,7 @@ declare function OcAccountMenu(props: OcAccountMenuProps): react_jsx_runtime.JSX
 interface OcAccountMenuViewProps extends OcAccountMenuProps {
     session: OcAccountMenuSession;
 }
-declare function OcAccountMenuView({ current, signInUrl, signInLabel, menuItems, showFamilyDashboard, build, siteState, className, triggerClassName, popoverClassName, session, }: OcAccountMenuViewProps): react_jsx_runtime.JSX.Element;
+declare function OcAccountMenuView({ current, signInUrl, signInLabel, menuItems, primaryNavLinks, secondaryNavLinks, showFamilyDashboard, build, siteState, className, triggerClassName, popoverClassName, session, }: OcAccountMenuViewProps): react_jsx_runtime.JSX.Element;
 
 interface OcPrimaryNavLink {
     href: string;

package/dist/index.js

@@ -4,6 +4,7 @@ var lucideReact = require('lucide-react');
 var Link5 = require('next/link');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var router = require('next/router');
 var authClient = require('@orangecheck/auth-client');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -343,7 +344,17 @@ function OcLogoDropdown({
   const [open, setOpen] = react.useState(false);
   const containerRef = react.useRef(null);
   const menuId = react.useId();
+  const router$1 = router.useRouter();
   const currentCategory = findFamilyProperty(current)?.category ?? "hub";
+  function handleTriggerClick(e) {
+    if (e.detail >= 2) {
+      e.preventDefault();
+      setOpen(false);
+      void router$1.push(homeHref);
+      return;
+    }
+    setOpen((v) => !v);
+  }
   react.useEffect(() => {
     if (!open) return;
     function onDoc(e) {
@@ -376,11 +387,12 @@ function OcLogoDropdown({
             "aria-haspopup": "menu",
             "aria-expanded": open,
             "aria-controls": menuId,
-            "aria-label": "OrangeCheck family \xB7 open property menu",
-            title: "Switch OrangeCheck product",
-            onClick: () => setOpen((v) => !v),
-            className: triggerClassName ?? "group hover:bg-accent/30 -mx-1.5 -my-1 flex min-h-[40px] items-center gap-2 rounded-sm px-1.5 py-1 transition-colors",
+            "aria-label": "OrangeCheck family \xB7 click to open property menu, double-click to go home",
+            title: "single-click \xB7 family menu  \xB7  double-click \xB7 go home",
+            onClick: handleTriggerClick,
+            className: triggerClassName ?? "group hover:bg-accent/30 -mx-1.5 -my-1 flex min-h-[40px] items-center gap-2 rounded-sm px-1.5 py-1 transition-colors " + (open ? "bg-accent/20" : ""),
             "data-oc-logo-dropdown-trigger": "",
+            "data-oc-logo-dropdown-open": open ? "true" : "false",
             children: [
               children,
               /* @__PURE__ */ jsxRuntime.jsx(CategoryChip, { category: currentCategory }),
@@ -389,7 +401,24 @@ function OcLogoDropdown({
                 lucideReact.ChevronDown,
                 {
                   "aria-hidden": true,
-                  className: "text-muted-foreground/70 group-hover:text-foreground/80 h-3.5 w-3.5 shrink-0 transition-transform " + (open ? "rotate-180" : "")
+                  className: "text-muted-foreground/70 group-hover:text-foreground/80 h-3.5 w-3.5 shrink-0 transition-transform duration-200 " + (open ? "rotate-180" : "")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "pointer-events-none ml-0.5 hidden items-center gap-1 font-mono text-[9px] tracking-widest uppercase transition-all duration-200 sm:inline-flex " + (open ? "text-muted-foreground/70 translate-x-0 opacity-100" : "-translate-x-1 opacity-0"),
+                  "data-oc-logo-dropdown-home-hint": "",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      lucideReact.CornerDownLeft,
+                      {
+                        className: "h-3 w-3 " + (open ? "motion-safe:animate-pulse" : "")
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary/70", children: "home" })
+                  ]
                 }
               )
             ]
@@ -498,6 +527,8 @@ function OcAccountMenuView({
   signInUrl = "/signin",
   signInLabel = "sign in",
   menuItems,
+  primaryNavLinks,
+  secondaryNavLinks,
   showFamilyDashboard,
   build,
   siteState,
@@ -619,7 +650,16 @@ function OcAccountMenuView({
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground/90 font-mono text-[11px] leading-tight break-all", children: account.didOc }),
                 displayName ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground/80 mt-1 font-mono text-[10px] tracking-wide", children: displayName }) : null
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-1", children: [
+              primaryNavLinks && primaryNavLinks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                PopoverSection,
+                {
+                  label: "navigate",
+                  items: primaryNavLinks,
+                  onItemClick: () => setOpen(false)
+                }
+              ) : null,
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-1", "data-oc-account-menu-section": "account", children: [
+                primaryNavLinks && primaryNavLinks.length > 0 ? /* @__PURE__ */ jsxRuntime.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";
@@ -705,6 +745,15 @@ function OcAccountMenuView({
                   }
                 )
               ] }),
+              secondaryNavLinks && secondaryNavLinks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                PopoverSection,
+                {
+                  label: "more",
+                  items: secondaryNavLinks,
+                  onItemClick: () => setOpen(false),
+                  bordered: true
+                }
+              ) : null,
               build ? /* @__PURE__ */ jsxRuntime.jsx(BuildFooter, { hostname, build, state: siteState }) : null
             ]
           }
@@ -713,6 +762,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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "p-1 " + (bordered ? "border-border border-t" : ""),
+      "data-oc-account-menu-section": label,
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", "aria-hidden": true, children: "\u2192" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: item.label }),
+            item.external ? /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "text-muted-foreground/70 text-[10px]",
+                "aria-hidden": true,
+                children: "\u2197"
+              }
+            ) : null
+          ] });
+          return item.external ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            Link5__default.default,
+            {
+              href: item.href,
+              onClick: onItemClick,
+              role: "menuitem",
+              className: cls,
+              "data-oc-account-menu-item": "",
+              children: inner
+            },
+            item.href
+          );
+        })
+      ]
+    }
+  );
+}
 function BuildFooter({
   hostname,
   build,