@orangecheck/design 0.8.0 → 0.9.1

package/dist/components.js

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var Link6 = require('next/link');
-var react = require('react');
+var React = require('react');
 var router = require('next/router');
 var authClient = require('@orangecheck/auth-client');
 
@@ -32,6 +32,7 @@ function _interopNamespace(e) {
 
 var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
 var Link6__default = /*#__PURE__*/_interopDefault(Link6);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/composites/help-hint.tsx
 function cn(...inputs) {
@@ -260,7 +261,7 @@ function DefinitionList({ items, className }) {
         "grid gap-x-5 gap-y-2 text-sm sm:grid-cols-[auto_1fr] sm:items-baseline",
         className
       ),
-      children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+      children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "label-mono text-muted-foreground text-[10px]", children: item.label }),
         /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground font-mono text-xs break-all", children: item.value })
       ] }, i))
@@ -379,9 +380,9 @@ function EcosystemSwitcher({
   className,
   showOwnerEntries = false
 }) {
-  const [open, setOpen] = react.useState(false);
-  const containerRef = react.useRef(null);
-  react.useEffect(() => {
+  const [open, setOpen] = React.useState(false);
+  const containerRef = React.useRef(null);
+  React.useEffect(() => {
     if (!open) return;
     function onDoc(e) {
       if (!containerRef.current) return;
@@ -464,6 +465,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__namespace.useState(false);
+  const [focusing, setFocusing] = React__namespace.useState(false);
+  const [isFinePointer, setIsFinePointer] = React__namespace.useState(false);
+  const openTimer = React__namespace.useRef(null);
+  const closeTimer = React__namespace.useRef(null);
+  React__namespace.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__namespace.useCallback(() => {
+    if (openTimer.current) clearTimeout(openTimer.current);
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+  }, []);
+  React__namespace.useEffect(() => clearTimers, [clearTimers]);
+  React__namespace.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__namespace.cloneElement(children, extra);
+  const contentEl = /* @__PURE__ */ jsxRuntime.jsx(
+    Popover__namespace.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__ */ jsxRuntime.jsxs(
+    Popover__namespace.Root,
+    {
+      open: effectiveOpen,
+      onOpenChange: (o) => {
+        if (!o) {
+          clearTimers();
+          setHovering(false);
+          setFocusing(false);
+        }
+      },
+      modal: false,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Anchor, { asChild: true, children: trigger }),
+        portal ? /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: contentEl }) : contentEl
+      ]
+    }
+  );
+}
 
 // src/chrome/family-properties.ts
 var FAMILY_PROPERTIES = [
@@ -628,6 +764,31 @@ function MenuCategoryChip({ category }) {
     }
   );
 }
+function SwitcherTooltipCard({ current }) {
+  const prop = findFamilyProperty(current);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[13rem] max-w-[calc(100vw-1.5rem)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col leading-tight", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-wrap items-baseline gap-x-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground font-mono text-[9px] tracking-widest uppercase", children: "you\u2019re on" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary font-display text-[12px] font-semibold tracking-tight", children: prop?.label ?? "orangecheck family" })
+      ] }),
+      prop?.sub && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground mt-0.5 font-mono text-[10px] tracking-wide", children: prop.sub })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border -mx-2.5 my-2 border-t" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": true, className: "text-muted-foreground h-3 w-3 shrink-0" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary font-mono text-[10px] font-medium tracking-widest uppercase", children: "click" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground font-mono text-[10px]", children: "\xB7" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground font-mono text-[10px] tracking-wide", children: "switch site" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1.5 flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CornerDownLeft, { "aria-hidden": true, className: "text-muted-foreground h-3 w-3 shrink-0" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary font-mono text-[10px] font-medium tracking-widest uppercase", children: "double-click" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground font-mono text-[10px]", children: "\xB7" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground font-mono text-[10px] tracking-wide", children: "home" })
+    ] })
+  ] });
+}
 function OcLogoDropdown({
   current,
   homeHref = "/",
@@ -638,9 +799,9 @@ function OcLogoDropdown({
   popoverClassName,
   showOwnerEntries = false
 }) {
-  const [open, setOpen] = react.useState(false);
-  const containerRef = react.useRef(null);
-  const menuId = react.useId();
+  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) {
@@ -652,7 +813,7 @@ function OcLogoDropdown({
     }
     setOpen((v) => !v);
   }
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!open) return;
     function onDoc(e) {
       if (!containerRef.current) return;
@@ -677,31 +838,45 @@ function OcLogoDropdown({
       "data-oc-current-category": currentCategory,
       "data-oc-site-state": siteState,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CategoryChip, { category: currentCategory }),
-              /* @__PURE__ */ jsxRuntime.jsx(SiteStateBadge, { state: siteState }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                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 duration-200 " + (open ? "rotate-180" : "")
-                }
-              )
-            ]
+            content: /* @__PURE__ */ jsxRuntime.jsx(SwitcherTooltipCard, { current }),
+            disabled: open,
+            side: "bottom",
+            align: "start",
+            sideOffset: 8,
+            zIndexClassName: "z-[70]",
+            children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CategoryChip, { category: currentCategory }),
+                  /* @__PURE__ */ jsxRuntime.jsx(SiteStateBadge, { state: siteState }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    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 duration-200 " + (open ? "rotate-180" : "")
+                    }
+                  )
+                ]
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -730,7 +905,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: [
@@ -839,9 +1014,9 @@ async function writeClipboard(text) {
   }
 }
 function CopyableDid({ did }) {
-  const [copied, setCopied] = react.useState(false);
-  const timerRef = react.useRef(null);
-  react.useEffect(
+  const [copied, setCopied] = React.useState(false);
+  const timerRef = React.useRef(null);
+  React.useEffect(
     () => () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     },
@@ -887,9 +1062,9 @@ function PromoteRow({
   disabled,
   onPromote
 }) {
-  const [copied, setCopied] = react.useState(false);
-  const timerRef = react.useRef(null);
-  react.useEffect(
+  const [copied, setCopied] = React.useState(false);
+  const timerRef = React.useRef(null);
+  React.useEffect(
     () => () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     },
@@ -960,12 +1135,12 @@ function IdentityPromoteSection({
   open,
   setDisplayIdentity
 }) {
-  const [identities, setIdentities] = react.useState(null);
-  const [loadFailed, setLoadFailed] = react.useState(false);
-  const [promoting, setPromoting] = react.useState(null);
-  const [promoteErr, setPromoteErr] = react.useState(null);
-  const lastFetchKeyRef = react.useRef(null);
-  react.useEffect(() => {
+  const [identities, setIdentities] = React.useState(null);
+  const [loadFailed, setLoadFailed] = React.useState(false);
+  const [promoting, setPromoting] = React.useState(null);
+  const [promoteErr, setPromoteErr] = React.useState(null);
+  const lastFetchKeyRef = React.useRef(null);
+  React.useEffect(() => {
     if (!open) return;
     if (lastFetchKeyRef.current === didOc) return;
     lastFetchKeyRef.current = didOc;
@@ -1074,15 +1249,15 @@ function OcAccountMenuView({
     switchAccount,
     addAccountUrl
   } = session;
-  const [hydrated, setHydrated] = react.useState(false);
-  const [open, setOpen] = react.useState(false);
-  const wrapRef = react.useRef(null);
+  const [hydrated, setHydrated] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
+  const wrapRef = React.useRef(null);
   const property = findFamilyProperty(current);
   const hostname = property?.hostname ?? `${current}.ochk.io`;
   const isHome = current === "home";
   const familyDashboardEnabled = showFamilyDashboard ?? !isHome;
-  react.useEffect(() => setHydrated(true), []);
-  react.useEffect(() => {
+  React.useEffect(() => setHydrated(true), []);
+  React.useEffect(() => {
     const onWake = () => {
       if (document.visibilityState === "visible") void refresh();
     };
@@ -1094,7 +1269,7 @@ function OcAccountMenuView({
       window.removeEventListener("focus", onFocus);
     };
   }, [refresh]);
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (!open) return;
     const onClick = (e) => {
       if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
@@ -1330,8 +1505,8 @@ function AccountsSection({
   signOut,
   onActionStart
 }) {
-  const [switching, setSwitching] = react.useState(null);
-  const [err, setErr] = react.useState(null);
+  const [switching, setSwitching] = React.useState(null);
+  const [err, setErr] = React.useState(null);
   if (!addAccountUrl) return null;
   const onSwitch = async (didOc) => {
     if (!switchAccount || switching) return;
@@ -1594,8 +1769,8 @@ function OcDashboardShell({
   children,
   className
 }) {
-  const [drawerOpen, setDrawerOpen] = react.useState(false);
-  react.useEffect(() => {
+  const [drawerOpen, setDrawerOpen] = React.useState(false);
+  React.useEffect(() => {
     if (!drawerOpen) return;
     function onKey(e) {
       if (e.key === "Escape") setDrawerOpen(false);