@rpcbase/ui 0.18.0 → 0.20.0

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@rpcbase/ui",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "type": "module",
   "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./header": "./src/header/index.tsx"
+  },
   "scripts": {
-    "build": "tsc --watch",
     "release": "wireit"
   },
   "wireit": {

package/src/header/MenuPopover/index.tsx

@@ -0,0 +1,86 @@
+import clsx from "clsx";
+import { ReactNode, useState, useRef, useEffect } from "react";
+import { Link } from "react-router";
+
+
+export const MenuPopover = ({
+  href,
+  labelClassName,
+  labelActiveClassName,
+  labelElement,
+  isActive,
+  children,
+}: {
+  href: string;
+  labelClassName: string;
+  labelActiveClassName: string;
+  labelElement: ReactNode;
+  isActive: boolean;
+  children: ReactNode;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const popoverRef = useRef(null);
+
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsOpen(true);
+  };
+
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => {
+      setIsOpen(false);
+    }, 120);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      className="flex"
+      ref={popoverRef}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className="relative flex">
+        <Link
+          to={href}
+          onClick={() => {
+            setIsOpen(false);
+          }}
+          className={clsx(
+            "relative z-10 -mb-px flex items-center border-b-2 pt-px text-sm font-medium text-gray-700 cursor-pointer transition-colors duration-200 ease-out hover:text-gray-800",
+            labelClassName,
+            isOpen || isActive ? labelActiveClassName : "border-transparent",
+          )}
+        >
+          {labelElement}
+        </Link>
+      </div>
+
+      {isOpen && (
+        <div
+          className="absolute left-0 right-0 top-full z-20 text-gray-500 sm:text-sm"
+          style={{ width: "100vw", left: "50%", transform: "translateX(-50%)" }}
+        >
+          <div
+            aria-hidden="true"
+            className="absolute inset-0 top-1/2 bg-white shadow-sm"
+          />
+
+          <div className="relative bg-white">
+            {children}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/header/index.tsx

@@ -0,0 +1,5 @@
+import { MenuPopover } from "./MenuPopover"
+
+export const Header = {
+  MenuPopover
+}