@orangecheck/design 0.7.6 → 0.9.0

package/dist/components.mjs

@@ -4,6 +4,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import Link6 from 'next/link';
+import * as React from 'react';
 import { Fragment, useState, useRef, useEffect, useId } from 'react';
 import { useRouter } from 'next/router';
 import { useOcSession, fetchOcLinkedIdentities } from '@orangecheck/auth-client';
@@ -439,6 +440,141 @@ function EcosystemSwitcher({
     )
   ] });
 }
+var TOOLTIP_SURFACE_CLASS = "bg-popover text-popover-foreground border-border rounded-md border p-2.5 shadow-md";
+var TOOLTIP_MOTION_CLASS = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 origin-(--radix-popover-content-transform-origin) duration-150 ease-out";
+function compose(theirs, ours) {
+  return (e) => {
+    theirs?.(e);
+    ours(e);
+  };
+}
+var lastInputWasKeyboard = false;
+var modalityInstalled = false;
+function installModalityTracking() {
+  if (modalityInstalled || typeof window === "undefined") return;
+  modalityInstalled = true;
+  window.addEventListener("keydown", () => lastInputWasKeyboard = true, true);
+  window.addEventListener("pointerdown", () => lastInputWasKeyboard = false, true);
+}
+function Tooltip({
+  content,
+  children,
+  side = "bottom",
+  align = "start",
+  sideOffset = 8,
+  collisionPadding = 12,
+  openDelay = 300,
+  closeDelay = 90,
+  disabled = false,
+  portal = true,
+  zIndexClassName = "z-50",
+  contentClassName
+}) {
+  const [hovering, setHovering] = React.useState(false);
+  const [focusing, setFocusing] = React.useState(false);
+  const [isFinePointer, setIsFinePointer] = React.useState(false);
+  const openTimer = React.useRef(null);
+  const closeTimer = React.useRef(null);
+  React.useEffect(() => {
+    installModalityTracking();
+    const mq = window.matchMedia("(hover: hover) and (pointer: fine)");
+    const apply = () => setIsFinePointer(mq.matches);
+    apply();
+    mq.addEventListener("change", apply);
+    return () => mq.removeEventListener("change", apply);
+  }, []);
+  const clearTimers = React.useCallback(() => {
+    if (openTimer.current) clearTimeout(openTimer.current);
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+  }, []);
+  React.useEffect(() => clearTimers, [clearTimers]);
+  React.useEffect(() => {
+    if (disabled) {
+      clearTimers();
+      setHovering(false);
+    }
+  }, [disabled, clearTimers]);
+  const handlePointerEnter = () => {
+    if (!isFinePointer) return;
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    openTimer.current = setTimeout(() => setHovering(true), openDelay);
+  };
+  const handlePointerLeave = () => {
+    if (openTimer.current) clearTimeout(openTimer.current);
+    closeTimer.current = setTimeout(() => setHovering(false), closeDelay);
+  };
+  const handlePointerDown = () => {
+    clearTimers();
+    setHovering(false);
+    setFocusing(false);
+  };
+  const handleFocus = () => {
+    if (lastInputWasKeyboard) {
+      clearTimers();
+      setFocusing(true);
+    }
+  };
+  const handleBlur = () => {
+    clearTimers();
+    setFocusing(false);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      clearTimers();
+      setHovering(false);
+      setFocusing(false);
+    }
+  };
+  const effectiveOpen = !disabled && (isFinePointer && hovering || focusing);
+  const extra = {};
+  const childProps = children.props;
+  extra.onPointerEnter = compose(childProps.onPointerEnter, handlePointerEnter);
+  extra.onPointerLeave = compose(childProps.onPointerLeave, handlePointerLeave);
+  extra.onPointerDown = compose(childProps.onPointerDown, handlePointerDown);
+  extra.onFocus = compose(childProps.onFocus, handleFocus);
+  extra.onBlur = compose(childProps.onBlur, handleBlur);
+  extra.onKeyDown = compose(childProps.onKeyDown, handleKeyDown);
+  const trigger = React.cloneElement(children, extra);
+  const contentEl = /* @__PURE__ */ jsx(
+    Popover.Content,
+    {
+      side,
+      align,
+      sideOffset,
+      collisionPadding,
+      "aria-hidden": true,
+      onOpenAutoFocus: (e) => e.preventDefault(),
+      onCloseAutoFocus: (e) => e.preventDefault(),
+      onFocusOutside: (e) => e.preventDefault(),
+      className: cn(
+        TOOLTIP_SURFACE_CLASS,
+        TOOLTIP_MOTION_CLASS,
+        "pointer-events-none",
+        zIndexClassName,
+        contentClassName
+      ),
+      children: content
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    Popover.Root,
+    {
+      open: effectiveOpen,
+      onOpenChange: (o) => {
+        if (!o) {
+          clearTimers();
+          setHovering(false);
+          setFocusing(false);
+        }
+      },
+      modal: false,
+      children: [
+        /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: trigger }),
+        portal ? /* @__PURE__ */ jsx(Popover.Portal, { children: contentEl }) : contentEl
+      ]
+    }
+  );
+}
 
 // src/chrome/family-properties.ts
 var FAMILY_PROPERTIES = [
@@ -603,6 +739,31 @@ function MenuCategoryChip({ category }) {
     }
   );
 }
+function SwitcherTooltipCard({ current }) {
+  const prop = findFamilyProperty(current);
+  return /* @__PURE__ */ jsxs("div", { className: "w-[13rem] max-w-[calc(100vw-1.5rem)]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col leading-tight", children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex flex-wrap items-baseline gap-x-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono text-[9px] tracking-widest uppercase", children: "you\u2019re on" }),
+        /* @__PURE__ */ jsx("span", { className: "text-primary font-display text-[12px] font-semibold tracking-tight", children: prop?.label ?? "orangecheck family" })
+      ] }),
+      prop?.sub && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground mt-0.5 font-mono text-[10px] tracking-wide", children: prop.sub })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "border-border -mx-2.5 my-2 border-t" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true, className: "text-muted-foreground h-3 w-3 shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "text-primary font-mono text-[10px] font-medium tracking-widest uppercase", children: "click" }),
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono text-[10px]", children: "\xB7" }),
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono text-[10px] tracking-wide", children: "switch site" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(CornerDownLeft, { "aria-hidden": true, className: "text-muted-foreground h-3 w-3 shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "text-primary font-mono text-[10px] font-medium tracking-widest uppercase", children: "double-click" }),
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono text-[10px]", children: "\xB7" }),
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-mono text-[10px] tracking-wide", children: "home" })
+    ] })
+  ] });
+}
 function OcLogoDropdown({
   current,
   homeHref = "/",
@@ -652,31 +813,45 @@ function OcLogoDropdown({
       "data-oc-current-category": currentCategory,
       "data-oc-site-state": siteState,
       children: [
-        /* @__PURE__ */ jsxs(
-          "button",
+        /* @__PURE__ */ jsx(
+          Tooltip,
           {
-            type: "button",
-            "aria-haspopup": "menu",
-            "aria-expanded": open,
-            "aria-controls": menuId,
-            "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__ */ jsx(CategoryChip, { category: currentCategory }),
-              /* @__PURE__ */ jsx(SiteStateBadge, { state: siteState }),
-              /* @__PURE__ */ jsx(
-                ChevronDown,
-                {
-                  "aria-hidden": true,
-                  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" : "")
-                }
-              )
-            ]
+            content: /* @__PURE__ */ jsx(SwitcherTooltipCard, { current }),
+            disabled: open,
+            side: "bottom",
+            align: "start",
+            sideOffset: 8,
+            zIndexClassName: "z-[70]",
+            children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                "aria-haspopup": "menu",
+                "aria-expanded": open,
+                "aria-controls": menuId,
+                "aria-label": "orangecheck family menu",
+                onClick: handleTriggerClick,
+                className: cn(
+                  // focus indicator is guaranteed even if a consumer overrides triggerClassName
+                  "focus-visible:ring-primary/60 rounded-sm focus-visible:ring-2 focus-visible:outline-none",
+                  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__ */ jsx(CategoryChip, { category: currentCategory }),
+                  /* @__PURE__ */ jsx(SiteStateBadge, { state: siteState }),
+                  /* @__PURE__ */ jsx(
+                    ChevronDown,
+                    {
+                      "aria-hidden": true,
+                      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__ */ jsxs(
@@ -705,7 +880,7 @@ function OcLogoDropdown({
           {
             id: menuId,
             role: "menu",
-            "aria-label": "OrangeCheck family",
+            "aria-label": "orangecheck family",
             className: popoverClassName ?? "bg-background absolute top-full left-0 z-[60] mt-2 w-[min(20rem,calc(100vw-1rem))] border shadow-lg",
             "data-oc-logo-dropdown-popover": "",
             children: [