@krpkg/ui 0.4.0 → 0.4.2

package/dist/index.mjs

@@ -653,6 +653,7 @@ var TerminalWindow = forwardRef12(
 TerminalWindow.displayName = "TerminalWindow";
 
 // src/components/Tooltip.tsx
+import { useState as useState3, useRef } from "react";
 import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var Tooltip = ({
   content,
@@ -662,18 +663,51 @@ var Tooltip = ({
   shortcut,
   className = ""
 }) => {
-  return /* @__PURE__ */ jsxs11("div", { className: `kz-tooltip-wrapper ${className}`, children: [
-    children,
-    /* @__PURE__ */ jsxs11("div", { className: `kz-tooltip-bubble kz-tooltip-${position}`, children: [
-      /* @__PURE__ */ jsxs11("div", { className: "kz-tooltip-content", children: [
-        coord && /* @__PURE__ */ jsx15("span", { className: "kz-tooltip-coord", children: coord }),
-        /* @__PURE__ */ jsx15("span", { className: "kz-tooltip-text", children: content }),
-        shortcut && /* @__PURE__ */ jsx15("kbd", { className: "kz-tooltip-shortcut", children: shortcut })
-      ] }),
-      /* @__PURE__ */ jsx15("div", { className: "kz-tooltip-arrow" })
-    ] })
-  ] });
+  const [isVisible, setIsVisible] = useState3(false);
+  const timeoutRef = useRef(null);
+  const show = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setIsVisible(true);
+  };
+  const hide = () => {
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(false);
+    }, 100);
+  };
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: `kz-tooltip-wrapper ${className}`,
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
+      children: [
+        children,
+        isVisible && /* @__PURE__ */ jsxs11(
+          "div",
+          {
+            role: "tooltip",
+            className: `kz-tooltip-box kz-tooltip-${position}`,
+            children: [
+              coord && /* @__PURE__ */ jsxs11("span", { className: "kz-tooltip-coord", children: [
+                "[",
+                coord,
+                "]"
+              ] }),
+              /* @__PURE__ */ jsxs11("div", { className: "kz-tooltip-content", children: [
+                /* @__PURE__ */ jsx15("span", { className: "kz-tooltip-text", children: content }),
+                shortcut && /* @__PURE__ */ jsx15("kbd", { className: "kz-tooltip-shortcut", children: shortcut })
+              ] }),
+              /* @__PURE__ */ jsx15("div", { className: "kz-tooltip-arrow" })
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
+Tooltip.displayName = "Tooltip";
 
 // src/components/SegmentedControl.tsx
 import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -927,7 +961,7 @@ function TacticalDrawer({
 }
 
 // src/components/HudToast.tsx
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 function HudToast({
   isOpen,
@@ -939,7 +973,7 @@ function HudToast({
   coord = "HUD // NOTIFY",
   className = ""
 }) {
-  const [progress, setProgress] = useState3(100);
+  const [progress, setProgress] = useState4(100);
   useEffect3(() => {
     if (!isOpen || duration <= 0) return;
     setProgress(100);
@@ -1046,9 +1080,9 @@ function BottomBar({
 }
 
 // src/components/Slider.tsx
-import { forwardRef as forwardRef13 } from "react";
+import { forwardRef as forwardRef14 } from "react";
 import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
-var Slider = forwardRef13(
+var Slider = forwardRef14(
   ({
     className = "",
     label,
@@ -1113,9 +1147,9 @@ var Slider = forwardRef13(
 Slider.displayName = "Slider";
 
 // src/components/ColorPicker.tsx
-import { forwardRef as forwardRef14, useState as useState4, useRef, useEffect as useEffect4 } from "react";
+import { forwardRef as forwardRef15, useState as useState5, useRef as useRef2, useEffect as useEffect4 } from "react";
 import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
-var ColorPicker = forwardRef14(
+var ColorPicker = forwardRef15(
   ({
     value,
     onChange,
@@ -1141,8 +1175,8 @@ var ColorPicker = forwardRef14(
     size = "md",
     className = ""
   }, ref) => {
-    const [isOpen, setIsOpen] = useState4(false);
-    const containerRef = useRef(null);
+    const [isOpen, setIsOpen] = useState5(false);
+    const containerRef = useRef2(null);
     useEffect4(() => {
       const handleOutsideClick = (e) => {
         if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -1237,9 +1271,9 @@ var ColorPicker = forwardRef14(
 ColorPicker.displayName = "ColorPicker";
 
 // src/components/DropdownMenu.tsx
-import { forwardRef as forwardRef15, useState as useState5, useRef as useRef2, useEffect as useEffect5 } from "react";
+import { forwardRef as forwardRef16, useState as useState6, useRef as useRef3, useEffect as useEffect5 } from "react";
 import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
-var DropdownMenu = forwardRef15(
+var DropdownMenu = forwardRef16(
   ({
     trigger,
     items,
@@ -1249,8 +1283,8 @@ var DropdownMenu = forwardRef15(
     className = "",
     disabled = false
   }, ref) => {
-    const [isOpen, setIsOpen] = useState5(false);
-    const containerRef = useRef2(null);
+    const [isOpen, setIsOpen] = useState6(false);
+    const containerRef = useRef3(null);
     useEffect5(() => {
       const handleOutsideClick = (e) => {
         if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -1333,9 +1367,9 @@ var DropdownMenu = forwardRef15(
 DropdownMenu.displayName = "DropdownMenu";
 
 // src/components/Popover.tsx
-import { forwardRef as forwardRef16, useState as useState6, useRef as useRef3, useEffect as useEffect6 } from "react";
+import { forwardRef as forwardRef17, useState as useState7, useRef as useRef4, useEffect as useEffect6 } from "react";
 import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
-var Popover = forwardRef16(
+var Popover = forwardRef17(
   ({
     trigger,
     children,
@@ -1349,10 +1383,10 @@ var Popover = forwardRef16(
     onOpenChange,
     disabled = false
   }, ref) => {
-    const [internalOpen, setInternalOpen] = useState6(defaultOpen);
+    const [internalOpen, setInternalOpen] = useState7(defaultOpen);
     const isControlled = controlledOpen !== void 0;
     const open = isControlled ? controlledOpen : internalOpen;
-    const containerRef = useRef3(null);
+    const containerRef = useRef4(null);
     const toggleOpen = () => {
       if (disabled) return;
       const next = !open;