@blurrow/ui 0.1.0 → 0.2.1

package/dist/Tooltip.js

@@ -0,0 +1,138 @@
+"use client";
+
+// ../../components/ui/Tooltip.tsx
+import React, { useState, useRef, useCallback, useEffect, useId } from "react";
+import { ENTER_FROM, LAYER, ORIGIN, Portal, useAnchoredPosition } from "./Floating.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Tooltip({
+  content,
+  position = "top",
+  children,
+  className = ""
+}) {
+  const [open, setOpen] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const triggerRef = useRef(null);
+  const enterTimer = useRef(null);
+  const exitTimer = useRef(null);
+  const autoHideTimer = useRef(null);
+  const touchActiveRef = useRef(false);
+  const uid = useId();
+  const hide = useCallback(() => {
+    if (enterTimer.current) clearTimeout(enterTimer.current);
+    if (autoHideTimer.current) clearTimeout(autoHideTimer.current);
+    setVisible(false);
+    exitTimer.current = setTimeout(() => {
+      setMounted(false);
+      setOpen(false);
+    }, 150);
+  }, []);
+  const show = useCallback((fromTouch = false) => {
+    if (exitTimer.current) clearTimeout(exitTimer.current);
+    if (autoHideTimer.current) clearTimeout(autoHideTimer.current);
+    enterTimer.current = setTimeout(() => setOpen(true), fromTouch ? 0 : 80);
+    if (fromTouch) {
+      autoHideTimer.current = setTimeout(() => {
+        touchActiveRef.current = false;
+        hide();
+      }, 2400);
+    }
+  }, [hide]);
+  if (open && !mounted) setMounted(true);
+  useEffect(() => {
+    if (open) {
+      requestAnimationFrame(() => requestAnimationFrame(() => setVisible(true)));
+    }
+  }, [open]);
+  const { setFloating, side } = useAnchoredPosition(triggerRef, { open: mounted, side: position, align: "center", gap: 7 });
+  useEffect(() => {
+    if (!open) return;
+    const onDocPointer = (e) => {
+      if (!triggerRef.current?.contains(e.target)) {
+        touchActiveRef.current = false;
+        hide();
+      }
+    };
+    document.addEventListener("pointerdown", onDocPointer);
+    return () => document.removeEventListener("pointerdown", onDocPointer);
+  }, [open, hide]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") hide();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, hide]);
+  useEffect(() => {
+    return () => {
+      if (enterTimer.current) clearTimeout(enterTimer.current);
+      if (exitTimer.current) clearTimeout(exitTimer.current);
+      if (autoHideTimer.current) clearTimeout(autoHideTimer.current);
+    };
+  }, []);
+  const handlePointerEnter = (e) => {
+    if (e.pointerType === "touch") return;
+    show(false);
+  };
+  const handlePointerLeave = (e) => {
+    if (e.pointerType === "touch") return;
+    if (touchActiveRef.current) return;
+    hide();
+  };
+  const handlePointerDown = (e) => {
+    if (e.pointerType !== "touch") return;
+    touchActiveRef.current = true;
+    if (open) {
+      hide();
+    } else {
+      show(true);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: triggerRef,
+      className: ["relative inline-flex", className].join(" "),
+      onPointerEnter: handlePointerEnter,
+      onPointerLeave: handlePointerLeave,
+      onPointerDown: handlePointerDown,
+      onFocus: () => show(false),
+      onBlur: () => {
+        if (!touchActiveRef.current) hide();
+      },
+      children: [
+        React.isValidElement(children) ? React.cloneElement(children, {
+          "aria-describedby": mounted ? `${uid}-tip` : void 0
+        }) : children,
+        mounted && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setFloating,
+            id: `${uid}-tip`,
+            role: "tooltip",
+            className: "px-2.5 py-1.5 rounded-[9px] text-ink-inverse text-[11.5px] font-medium whitespace-nowrap pointer-events-none transition-[opacity,transform] duration-150 ease-[var(--ease-spring)]",
+            style: {
+              position: "fixed",
+              top: 0,
+              left: 0,
+              zIndex: LAYER.tooltip,
+              transformOrigin: ORIGIN[side],
+              opacity: visible ? 1 : 0,
+              transform: visible ? "none" : `${ENTER_FROM[side]} scale(0.95)`,
+              background: "var(--face-inverse)",
+              boxShadow: "var(--tooltip-shadow)",
+              textShadow: "var(--emboss-inverse)"
+            },
+            children: content
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  Tooltip
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useRef, useCallback, useEffect, useId } from \"react\";\nimport { ENTER_FROM, LAYER, ORIGIN, Portal, useAnchoredPosition } from \"./Floating\";\n\ntype TooltipPosition = \"top\" | \"bottom\" | \"left\" | \"right\";\n\ninterface TooltipProps {\n  content: string;\n  position?: TooltipPosition;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function Tooltip({\n  content,\n  position = \"top\",\n  children,\n  className = \"\",\n}: TooltipProps) {\n  const [open, setOpen] = useState(false);\n  const [visible, setVisible] = useState(false);\n  const [mounted, setMounted] = useState(false);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const enterTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const exitTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const autoHideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const touchActiveRef = useRef(false);\n  const uid = useId();\n\n  const hide = useCallback(() => {\n    if (enterTimer.current) clearTimeout(enterTimer.current);\n    if (autoHideTimer.current) clearTimeout(autoHideTimer.current);\n    setVisible(false);\n    exitTimer.current = setTimeout(() => {\n      setMounted(false);\n      setOpen(false);\n    }, 150);\n  }, []);\n\n  const show = useCallback((fromTouch = false) => {\n    if (exitTimer.current) clearTimeout(exitTimer.current);\n    if (autoHideTimer.current) clearTimeout(autoHideTimer.current);\n    enterTimer.current = setTimeout(() => setOpen(true), fromTouch ? 0 : 80);\n    if (fromTouch) {\n      autoHideTimer.current = setTimeout(() => {\n        touchActiveRef.current = false;\n        hide();\n      }, 2400);\n    }\n  }, [hide]);\n\n  // Mounted during render; the effect only waits for it to paint\n  if (open && !mounted) setMounted(true);\n\n  useEffect(() => {\n    if (open) {\n      requestAnimationFrame(() => requestAnimationFrame(() => setVisible(true)));\n    }\n  }, [open]);\n\n  /* Portalled to the body and placed before its first paint, flipping\n     to the other side when there's no room                           */\n  const { setFloating, side } = useAnchoredPosition(triggerRef, { open: mounted, side: position, align: \"center\", gap: 7 });\n\n  useEffect(() => {\n    if (!open) return;\n    const onDocPointer = (e: PointerEvent) => {\n      if (!triggerRef.current?.contains(e.target as Node)) {\n        touchActiveRef.current = false;\n        hide();\n      }\n    };\n    document.addEventListener(\"pointerdown\", onDocPointer);\n    return () => document.removeEventListener(\"pointerdown\", onDocPointer);\n  }, [open, hide]);\n\n  // Escape dismisses without moving focus (WCAG 1.4.13)\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") hide();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, hide]);\n\n  useEffect(() => {\n    return () => {\n      if (enterTimer.current) clearTimeout(enterTimer.current);\n      if (exitTimer.current) clearTimeout(exitTimer.current);\n      if (autoHideTimer.current) clearTimeout(autoHideTimer.current);\n    };\n  }, []);\n\n  const handlePointerEnter = (e: React.PointerEvent) => {\n    if (e.pointerType === \"touch\") return;\n    show(false);\n  };\n\n  const handlePointerLeave = (e: React.PointerEvent) => {\n    if (e.pointerType === \"touch\") return;\n    if (touchActiveRef.current) return;\n    hide();\n  };\n\n  const handlePointerDown = (e: React.PointerEvent) => {\n    if (e.pointerType !== \"touch\") return;\n    touchActiveRef.current = true;\n    if (open) {\n      hide();\n    } else {\n      show(true);\n    }\n  };\n\n  return (\n    <div\n      ref={triggerRef}\n      className={[\"relative inline-flex\", className].join(\" \")}\n      onPointerEnter={handlePointerEnter}\n      onPointerLeave={handlePointerLeave}\n      onPointerDown={handlePointerDown}\n      onFocus={() => show(false)}\n      onBlur={() => {\n        if (!touchActiveRef.current) hide();\n      }}\n    >\n      {React.isValidElement(children)\n        ? React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {\n            \"aria-describedby\": mounted ? `${uid}-tip` : undefined,\n          })\n        : children}\n      {mounted && (\n        <Portal>\n        <div\n          ref={setFloating}\n          id={`${uid}-tip`}\n          role=\"tooltip\"\n          className=\"px-2.5 py-1.5 rounded-[9px] text-ink-inverse text-[11.5px] font-medium whitespace-nowrap pointer-events-none transition-[opacity,transform] duration-150 ease-[var(--ease-spring)]\"\n          style={{\n            position: \"fixed\",\n            top: 0,\n            left: 0,\n            zIndex: LAYER.tooltip,\n            transformOrigin: ORIGIN[side],\n            opacity: visible ? 1 : 0,\n            transform: visible ? \"none\" : `${ENTER_FROM[side]} scale(0.95)`,\n            background: \"var(--face-inverse)\",\n            boxShadow: \"var(--tooltip-shadow)\",\n            textShadow: \"var(--emboss-inverse)\",\n          }}\n        >\n          {content}\n        </div>\n        </Portal>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}