@krpkg/ui 0.4.0 → 0.4.2

package/dist/index.js

@@ -877,6 +877,7 @@ var TerminalWindow = (0, import_react14.forwardRef)(
 TerminalWindow.displayName = "TerminalWindow";
 
 // src/components/Tooltip.tsx
+var import_react15 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var Tooltip = ({
   content,
@@ -886,18 +887,51 @@ var Tooltip = ({
   shortcut,
   className = ""
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `kz-tooltip-wrapper ${className}`, children: [
-    children,
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `kz-tooltip-bubble kz-tooltip-${position}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "kz-tooltip-content", children: [
-        coord && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "kz-tooltip-coord", children: coord }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "kz-tooltip-text", children: content }),
-        shortcut && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("kbd", { className: "kz-tooltip-shortcut", children: shortcut })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "kz-tooltip-arrow" })
-    ] })
-  ] });
+  const [isVisible, setIsVisible] = (0, import_react15.useState)(false);
+  const timeoutRef = (0, import_react15.useRef)(null);
+  const show = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setIsVisible(true);
+  };
+  const hide = () => {
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(false);
+    }, 100);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      className: `kz-tooltip-wrapper ${className}`,
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
+      children: [
+        children,
+        isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "div",
+          {
+            role: "tooltip",
+            className: `kz-tooltip-box kz-tooltip-${position}`,
+            children: [
+              coord && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "kz-tooltip-coord", children: [
+                "[",
+                coord,
+                "]"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "kz-tooltip-content", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "kz-tooltip-text", children: content }),
+                shortcut && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("kbd", { className: "kz-tooltip-shortcut", children: shortcut })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "kz-tooltip-arrow" })
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
+Tooltip.displayName = "Tooltip";
 
 // src/components/SegmentedControl.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
@@ -1089,7 +1123,7 @@ function Breadcrumbs({
 }
 
 // src/components/TacticalDrawer.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function TacticalDrawer({
   isOpen,
@@ -1101,7 +1135,7 @@ function TacticalDrawer({
   position = "bottom",
   className = ""
 }) {
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!isOpen) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") onClose();
@@ -1151,7 +1185,7 @@ function TacticalDrawer({
 }
 
 // src/components/HudToast.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function HudToast({
   isOpen,
@@ -1163,8 +1197,8 @@ function HudToast({
   coord = "HUD // NOTIFY",
   className = ""
 }) {
-  const [progress, setProgress] = (0, import_react16.useState)(100);
-  (0, import_react16.useEffect)(() => {
+  const [progress, setProgress] = (0, import_react17.useState)(100);
+  (0, import_react17.useEffect)(() => {
     if (!isOpen || duration <= 0) return;
     setProgress(100);
     const startTime = Date.now();
@@ -1270,9 +1304,9 @@ function BottomBar({
 }
 
 // src/components/Slider.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var Slider = (0, import_react17.forwardRef)(
+var Slider = (0, import_react18.forwardRef)(
   ({
     className = "",
     label,
@@ -1337,9 +1371,9 @@ var Slider = (0, import_react17.forwardRef)(
 Slider.displayName = "Slider";
 
 // src/components/ColorPicker.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var ColorPicker = (0, import_react18.forwardRef)(
+var ColorPicker = (0, import_react19.forwardRef)(
   ({
     value,
     onChange,
@@ -1365,9 +1399,9 @@ var ColorPicker = (0, import_react18.forwardRef)(
     size = "md",
     className = ""
   }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
-    const containerRef = (0, import_react18.useRef)(null);
-    (0, import_react18.useEffect)(() => {
+    const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
+    const containerRef = (0, import_react19.useRef)(null);
+    (0, import_react19.useEffect)(() => {
       const handleOutsideClick = (e) => {
         if (containerRef.current && !containerRef.current.contains(e.target)) {
           setIsOpen(false);
@@ -1461,9 +1495,9 @@ var ColorPicker = (0, import_react18.forwardRef)(
 ColorPicker.displayName = "ColorPicker";
 
 // src/components/DropdownMenu.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var DropdownMenu = (0, import_react19.forwardRef)(
+var DropdownMenu = (0, import_react20.forwardRef)(
   ({
     trigger,
     items,
@@ -1473,9 +1507,9 @@ var DropdownMenu = (0, import_react19.forwardRef)(
     className = "",
     disabled = false
   }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
-    const containerRef = (0, import_react19.useRef)(null);
-    (0, import_react19.useEffect)(() => {
+    const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
+    const containerRef = (0, import_react20.useRef)(null);
+    (0, import_react20.useEffect)(() => {
       const handleOutsideClick = (e) => {
         if (containerRef.current && !containerRef.current.contains(e.target)) {
           setIsOpen(false);
@@ -1557,9 +1591,9 @@ var DropdownMenu = (0, import_react19.forwardRef)(
 DropdownMenu.displayName = "DropdownMenu";
 
 // src/components/Popover.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var Popover = (0, import_react20.forwardRef)(
+var Popover = (0, import_react21.forwardRef)(
   ({
     trigger,
     children,
@@ -1573,10 +1607,10 @@ var Popover = (0, import_react20.forwardRef)(
     onOpenChange,
     disabled = false
   }, ref) => {
-    const [internalOpen, setInternalOpen] = (0, import_react20.useState)(defaultOpen);
+    const [internalOpen, setInternalOpen] = (0, import_react21.useState)(defaultOpen);
     const isControlled = controlledOpen !== void 0;
     const open = isControlled ? controlledOpen : internalOpen;
-    const containerRef = (0, import_react20.useRef)(null);
+    const containerRef = (0, import_react21.useRef)(null);
     const toggleOpen = () => {
       if (disabled) return;
       const next = !open;
@@ -1591,7 +1625,7 @@ var Popover = (0, import_react20.forwardRef)(
       }
       onOpenChange?.(false);
     };
-    (0, import_react20.useEffect)(() => {
+    (0, import_react21.useEffect)(() => {
       const handleOutsideClick = (e) => {
         if (containerRef.current && !containerRef.current.contains(e.target)) {
           handleClose();