@krpkg/ui 0.3.1 → 0.4.0

package/dist/index.mjs

@@ -653,57 +653,27 @@ 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,
   children,
   position = "top",
   coord,
+  shortcut,
   className = ""
 }) => {
-  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",
-      onMouseEnter: show,
-      onMouseLeave: hide,
-      onFocus: show,
-      onBlur: hide,
-      children: [
-        children,
-        isVisible && /* @__PURE__ */ jsxs11(
-          "div",
-          {
-            role: "tooltip",
-            className: `kz-tooltip-box kz-tooltip-${position} ${className}`,
-            children: [
-              coord && /* @__PURE__ */ jsxs11("span", { className: "kz-tooltip-coord", children: [
-                "[",
-                coord,
-                "]"
-              ] }),
-              /* @__PURE__ */ jsx15("div", { className: "kz-tooltip-content", children: content }),
-              /* @__PURE__ */ jsx15("div", { className: "kz-tooltip-arrow" })
-            ]
-          }
-        )
-      ]
-    }
-  );
+  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" })
+    ] })
+  ] });
 };
-Tooltip.displayName = "Tooltip";
 
 // src/components/SegmentedControl.tsx
 import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -957,7 +927,7 @@ function TacticalDrawer({
 }
 
 // src/components/HudToast.tsx
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
 import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 function HudToast({
   isOpen,
@@ -969,7 +939,7 @@ function HudToast({
   coord = "HUD // NOTIFY",
   className = ""
 }) {
-  const [progress, setProgress] = useState4(100);
+  const [progress, setProgress] = useState3(100);
   useEffect3(() => {
     if (!isOpen || duration <= 0) return;
     setProgress(100);
@@ -1074,21 +1044,399 @@ function BottomBar({
     }
   );
 }
+
+// src/components/Slider.tsx
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+var Slider = forwardRef13(
+  ({
+    className = "",
+    label,
+    sublabel,
+    coord,
+    showValue = true,
+    valueFormatter,
+    sliderSize = "md",
+    variant = "accent",
+    fullWidth = true,
+    min = 0,
+    max = 100,
+    value,
+    defaultValue,
+    disabled,
+    ...props
+  }, ref) => {
+    const currentVal = Number(value !== void 0 ? value : defaultValue !== void 0 ? defaultValue : min);
+    const minVal = Number(min);
+    const maxVal = Number(max);
+    const pct = Math.max(0, Math.min(100, (currentVal - minVal) / (maxVal - minVal || 1) * 100));
+    return /* @__PURE__ */ jsxs19(
+      "div",
+      {
+        className: [
+          "kz-slider-wrapper",
+          `kz-slider-${sliderSize}`,
+          `kz-slider-${variant}`,
+          fullWidth ? "kz-slider-full" : "",
+          disabled ? "kz-slider-disabled" : "",
+          className
+        ].filter(Boolean).join(" "),
+        children: [
+          (label || sublabel || showValue || coord) && /* @__PURE__ */ jsxs19("div", { className: "kz-slider-header", children: [
+            /* @__PURE__ */ jsxs19("div", { className: "kz-slider-label-group", children: [
+              label && /* @__PURE__ */ jsx23("label", { className: "kz-slider-label", children: label }),
+              sublabel && /* @__PURE__ */ jsx23("span", { className: "kz-slider-sublabel", children: sublabel }),
+              coord && /* @__PURE__ */ jsx23("span", { className: "kz-slider-coord", children: coord })
+            ] }),
+            showValue && /* @__PURE__ */ jsx23("span", { className: "kz-slider-value", children: valueFormatter ? valueFormatter(currentVal) : currentVal })
+          ] }),
+          /* @__PURE__ */ jsx23("div", { className: "kz-slider-track-container", children: /* @__PURE__ */ jsx23(
+            "input",
+            {
+              ref,
+              type: "range",
+              min,
+              max,
+              value,
+              defaultValue,
+              disabled,
+              className: "kz-slider-input",
+              style: { "--kz-slider-pct": `${pct}%` },
+              ...props
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Slider.displayName = "Slider";
+
+// src/components/ColorPicker.tsx
+import { forwardRef as forwardRef14, useState as useState4, useRef, useEffect as useEffect4 } from "react";
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+var ColorPicker = forwardRef14(
+  ({
+    value,
+    onChange,
+    presets = [
+      "#000000",
+      "#ffffff",
+      "#c49368",
+      "#6a9e9e",
+      "#a855f7",
+      "#3b82f6",
+      "#22c55e",
+      "#ef4444",
+      "#eab308",
+      "#ec4899",
+      "#64748b",
+      "#1e293b"
+    ],
+    label,
+    sublabel,
+    coord,
+    showHexInput = true,
+    disabled = false,
+    size = "md",
+    className = ""
+  }, ref) => {
+    const [isOpen, setIsOpen] = useState4(false);
+    const containerRef = useRef(null);
+    useEffect4(() => {
+      const handleOutsideClick = (e) => {
+        if (containerRef.current && !containerRef.current.contains(e.target)) {
+          setIsOpen(false);
+        }
+      };
+      if (isOpen) {
+        document.addEventListener("mousedown", handleOutsideClick);
+      }
+      return () => {
+        document.removeEventListener("mousedown", handleOutsideClick);
+      };
+    }, [isOpen]);
+    return /* @__PURE__ */ jsxs20(
+      "div",
+      {
+        ref: containerRef,
+        className: [
+          "kz-color-picker",
+          `kz-color-picker-${size}`,
+          disabled ? "kz-color-picker-disabled" : "",
+          className
+        ].filter(Boolean).join(" "),
+        children: [
+          (label || sublabel || coord) && /* @__PURE__ */ jsxs20("div", { className: "kz-color-picker-header", children: [
+            /* @__PURE__ */ jsxs20("div", { className: "kz-color-picker-label-group", children: [
+              label && /* @__PURE__ */ jsx24("label", { className: "kz-color-picker-label", children: label }),
+              sublabel && /* @__PURE__ */ jsx24("span", { className: "kz-color-picker-sublabel", children: sublabel }),
+              coord && /* @__PURE__ */ jsx24("span", { className: "kz-color-picker-coord", children: coord })
+            ] }),
+            /* @__PURE__ */ jsx24("span", { className: "kz-color-picker-hex", children: value.toUpperCase() })
+          ] }),
+          /* @__PURE__ */ jsx24("div", { className: "kz-color-picker-trigger-row", ref, children: /* @__PURE__ */ jsxs20(
+            "button",
+            {
+              type: "button",
+              disabled,
+              className: "kz-color-picker-swatch-trigger",
+              onClick: () => !disabled && setIsOpen(!isOpen),
+              "aria-label": label || "Select color",
+              children: [
+                /* @__PURE__ */ jsx24("span", { className: "kz-color-picker-swatch-preview", style: { backgroundColor: value } }),
+                /* @__PURE__ */ jsx24("span", { className: "kz-color-picker-swatch-val", children: value }),
+                /* @__PURE__ */ jsx24("span", { className: "kz-color-picker-caret", children: "\u25BC" })
+              ]
+            }
+          ) }),
+          isOpen && /* @__PURE__ */ jsxs20("div", { className: "kz-color-picker-popover", children: [
+            /* @__PURE__ */ jsx24("div", { className: "kz-color-picker-palette", children: presets.map((color) => /* @__PURE__ */ jsx24(
+              "button",
+              {
+                type: "button",
+                className: [
+                  "kz-color-picker-palette-btn",
+                  value.toLowerCase() === color.toLowerCase() ? "active" : ""
+                ].filter(Boolean).join(" "),
+                style: { backgroundColor: color },
+                onClick: () => {
+                  onChange(color);
+                },
+                title: color
+              },
+              color
+            )) }),
+            showHexInput && /* @__PURE__ */ jsxs20("div", { className: "kz-color-picker-custom-input", children: [
+              /* @__PURE__ */ jsx24(
+                "input",
+                {
+                  type: "color",
+                  value: value.startsWith("#") && value.length === 7 ? value : "#000000",
+                  onChange: (e) => onChange(e.target.value),
+                  className: "kz-color-picker-native-input"
+                }
+              ),
+              /* @__PURE__ */ jsx24(
+                "input",
+                {
+                  type: "text",
+                  value,
+                  onChange: (e) => onChange(e.target.value),
+                  placeholder: "#000000",
+                  className: "kz-color-picker-text-input"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+ColorPicker.displayName = "ColorPicker";
+
+// src/components/DropdownMenu.tsx
+import { forwardRef as forwardRef15, useState as useState5, useRef as useRef2, useEffect as useEffect5 } from "react";
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+var DropdownMenu = forwardRef15(
+  ({
+    trigger,
+    items,
+    title,
+    coord,
+    align = "left",
+    className = "",
+    disabled = false
+  }, ref) => {
+    const [isOpen, setIsOpen] = useState5(false);
+    const containerRef = useRef2(null);
+    useEffect5(() => {
+      const handleOutsideClick = (e) => {
+        if (containerRef.current && !containerRef.current.contains(e.target)) {
+          setIsOpen(false);
+        }
+      };
+      if (isOpen) {
+        document.addEventListener("mousedown", handleOutsideClick);
+      }
+      return () => {
+        document.removeEventListener("mousedown", handleOutsideClick);
+      };
+    }, [isOpen]);
+    return /* @__PURE__ */ jsxs21(
+      "div",
+      {
+        ref: containerRef,
+        className: ["kz-dropdown-container", className].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsx25(
+            "div",
+            {
+              ref,
+              className: "kz-dropdown-trigger-wrapper",
+              onClick: () => !disabled && setIsOpen(!isOpen),
+              children: trigger
+            }
+          ),
+          isOpen && /* @__PURE__ */ jsxs21(
+            "div",
+            {
+              className: [
+                "kz-dropdown-menu",
+                `align-${align}`
+              ].filter(Boolean).join(" "),
+              children: [
+                (title || coord) && /* @__PURE__ */ jsxs21("div", { className: "kz-dropdown-header", children: [
+                  title && /* @__PURE__ */ jsx25("span", { className: "kz-dropdown-title", children: title }),
+                  coord && /* @__PURE__ */ jsx25("span", { className: "kz-dropdown-coord", children: coord })
+                ] }),
+                /* @__PURE__ */ jsx25("div", { className: "kz-dropdown-list", children: items.map((item) => /* @__PURE__ */ jsxs21(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: item.disabled,
+                    className: [
+                      "kz-dropdown-item",
+                      item.danger ? "danger" : "",
+                      item.disabled ? "disabled" : ""
+                    ].filter(Boolean).join(" "),
+                    onClick: () => {
+                      if (item.disabled) return;
+                      item.onClick?.();
+                      setIsOpen(false);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs21("div", { className: "kz-dropdown-item-left", children: [
+                        item.icon && /* @__PURE__ */ jsx25("span", { className: "kz-dropdown-item-icon", children: item.icon }),
+                        /* @__PURE__ */ jsxs21("div", { className: "kz-dropdown-item-text", children: [
+                          /* @__PURE__ */ jsx25("span", { className: "kz-dropdown-item-label", children: item.label }),
+                          item.sublabel && /* @__PURE__ */ jsx25("span", { className: "kz-dropdown-item-sublabel", children: item.sublabel })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs21("div", { className: "kz-dropdown-item-right", children: [
+                        item.shortcut && /* @__PURE__ */ jsx25("span", { className: "kz-dropdown-item-shortcut", children: item.shortcut }),
+                        item.badge !== void 0 && /* @__PURE__ */ jsx25("span", { className: "kz-dropdown-item-badge", children: item.badge })
+                      ] })
+                    ]
+                  },
+                  item.id
+                )) })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+DropdownMenu.displayName = "DropdownMenu";
+
+// src/components/Popover.tsx
+import { forwardRef as forwardRef16, useState as useState6, useRef as useRef3, useEffect as useEffect6 } from "react";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+var Popover = forwardRef16(
+  ({
+    trigger,
+    children,
+    title,
+    coord,
+    align = "center",
+    position = "bottom",
+    className = "",
+    isOpen: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+    disabled = false
+  }, ref) => {
+    const [internalOpen, setInternalOpen] = useState6(defaultOpen);
+    const isControlled = controlledOpen !== void 0;
+    const open = isControlled ? controlledOpen : internalOpen;
+    const containerRef = useRef3(null);
+    const toggleOpen = () => {
+      if (disabled) return;
+      const next = !open;
+      if (!isControlled) {
+        setInternalOpen(next);
+      }
+      onOpenChange?.(next);
+    };
+    const handleClose = () => {
+      if (!isControlled) {
+        setInternalOpen(false);
+      }
+      onOpenChange?.(false);
+    };
+    useEffect6(() => {
+      const handleOutsideClick = (e) => {
+        if (containerRef.current && !containerRef.current.contains(e.target)) {
+          handleClose();
+        }
+      };
+      if (open) {
+        document.addEventListener("mousedown", handleOutsideClick);
+      }
+      return () => {
+        document.removeEventListener("mousedown", handleOutsideClick);
+      };
+    }, [open]);
+    return /* @__PURE__ */ jsxs22(
+      "div",
+      {
+        ref: containerRef,
+        className: ["kz-popover-container", className].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsx26(
+            "div",
+            {
+              ref,
+              className: "kz-popover-trigger-wrapper",
+              onClick: toggleOpen,
+              children: trigger
+            }
+          ),
+          open && /* @__PURE__ */ jsxs22(
+            "div",
+            {
+              className: [
+                "kz-popover-content",
+                `pos-${position}`,
+                `align-${align}`
+              ].filter(Boolean).join(" "),
+              children: [
+                (title || coord) && /* @__PURE__ */ jsxs22("div", { className: "kz-popover-header", children: [
+                  title && /* @__PURE__ */ jsx26("span", { className: "kz-popover-title", children: title }),
+                  coord && /* @__PURE__ */ jsx26("span", { className: "kz-popover-coord", children: coord })
+                ] }),
+                /* @__PURE__ */ jsx26("div", { className: "kz-popover-body", children })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Popover.displayName = "Popover";
 export {
   Badge,
   BottomBar,
   BracketCard,
   Breadcrumbs,
   Button,
+  ColorPicker,
   CornerFrame,
   CyberSwitch,
   Dot,
+  DropdownMenu,
   HudModal,
   HudToast,
   Input,
   KeyValGrid,
   Logo,
+  Popover,
   SegmentedControl,
+  Slider,
   SpoilerGate,
   StickyNote,
   TacticalDrawer,