@krpkg/ui 0.3.1 → 0.4.1

package/dist/index.js

@@ -25,15 +25,19 @@ __export(src_exports, {
   BracketCard: () => BracketCard,
   Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
+  ColorPicker: () => ColorPicker,
   CornerFrame: () => CornerFrame,
   CyberSwitch: () => CyberSwitch,
   Dot: () => Dot,
+  DropdownMenu: () => DropdownMenu,
   HudModal: () => HudModal,
   HudToast: () => HudToast,
   Input: () => Input,
   KeyValGrid: () => KeyValGrid,
   Logo: () => Logo,
+  Popover: () => Popover,
   SegmentedControl: () => SegmentedControl,
+  Slider: () => Slider,
   SpoilerGate: () => SpoilerGate,
   StickyNote: () => StickyNote,
   TacticalDrawer: () => TacticalDrawer,
@@ -873,57 +877,27 @@ 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,
   children,
   position = "top",
   coord,
+  shortcut,
   className = ""
 }) => {
-  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",
-      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} ${className}`,
-            children: [
-              coord && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "kz-tooltip-coord", children: [
-                "[",
-                coord,
-                "]"
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "kz-tooltip-content", children: content }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "kz-tooltip-arrow" })
-            ]
-          }
-        )
-      ]
-    }
-  );
+  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" })
+    ] })
+  ] });
 };
-Tooltip.displayName = "Tooltip";
 
 // src/components/SegmentedControl.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
@@ -1115,7 +1089,7 @@ function Breadcrumbs({
 }
 
 // src/components/TacticalDrawer.tsx
-var import_react16 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function TacticalDrawer({
   isOpen,
@@ -1127,7 +1101,7 @@ function TacticalDrawer({
   position = "bottom",
   className = ""
 }) {
-  (0, import_react16.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!isOpen) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") onClose();
@@ -1177,7 +1151,7 @@ function TacticalDrawer({
 }
 
 // src/components/HudToast.tsx
-var import_react17 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function HudToast({
   isOpen,
@@ -1189,8 +1163,8 @@ function HudToast({
   coord = "HUD // NOTIFY",
   className = ""
 }) {
-  const [progress, setProgress] = (0, import_react17.useState)(100);
-  (0, import_react17.useEffect)(() => {
+  const [progress, setProgress] = (0, import_react16.useState)(100);
+  (0, import_react16.useEffect)(() => {
     if (!isOpen || duration <= 0) return;
     setProgress(100);
     const startTime = Date.now();
@@ -1294,6 +1268,380 @@ function BottomBar({
     }
   );
 }
+
+// src/components/Slider.tsx
+var import_react17 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Slider = (0, import_react17.forwardRef)(
+  ({
+    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__ */ (0, import_jsx_runtime23.jsxs)(
+      "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__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "kz-slider-header", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "kz-slider-label-group", children: [
+              label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { className: "kz-slider-label", children: label }),
+              sublabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "kz-slider-sublabel", children: sublabel }),
+              coord && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "kz-slider-coord", children: coord })
+            ] }),
+            showValue && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "kz-slider-value", children: valueFormatter ? valueFormatter(currentVal) : currentVal })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "kz-slider-track-container", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "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
+var import_react18 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var ColorPicker = (0, import_react18.forwardRef)(
+  ({
+    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] = (0, import_react18.useState)(false);
+    const containerRef = (0, import_react18.useRef)(null);
+    (0, import_react18.useEffect)(() => {
+      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__ */ (0, import_jsx_runtime24.jsxs)(
+      "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__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "kz-color-picker-header", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "kz-color-picker-label-group", children: [
+              label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { className: "kz-color-picker-label", children: label }),
+              sublabel && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kz-color-picker-sublabel", children: sublabel }),
+              coord && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kz-color-picker-coord", children: coord })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kz-color-picker-hex", children: value.toUpperCase() })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "kz-color-picker-trigger-row", ref, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+            "button",
+            {
+              type: "button",
+              disabled,
+              className: "kz-color-picker-swatch-trigger",
+              onClick: () => !disabled && setIsOpen(!isOpen),
+              "aria-label": label || "Select color",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kz-color-picker-swatch-preview", style: { backgroundColor: value } }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kz-color-picker-swatch-val", children: value }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kz-color-picker-caret", children: "\u25BC" })
+              ]
+            }
+          ) }),
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "kz-color-picker-popover", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "kz-color-picker-palette", children: presets.map((color) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              "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__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "kz-color-picker-custom-input", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                "input",
+                {
+                  type: "color",
+                  value: value.startsWith("#") && value.length === 7 ? value : "#000000",
+                  onChange: (e) => onChange(e.target.value),
+                  className: "kz-color-picker-native-input"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                "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
+var import_react19 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var DropdownMenu = (0, import_react19.forwardRef)(
+  ({
+    trigger,
+    items,
+    title,
+    coord,
+    align = "left",
+    className = "",
+    disabled = false
+  }, ref) => {
+    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);
+        }
+      };
+      if (isOpen) {
+        document.addEventListener("mousedown", handleOutsideClick);
+      }
+      return () => {
+        document.removeEventListener("mousedown", handleOutsideClick);
+      };
+    }, [isOpen]);
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      "div",
+      {
+        ref: containerRef,
+        className: ["kz-dropdown-container", className].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            "div",
+            {
+              ref,
+              className: "kz-dropdown-trigger-wrapper",
+              onClick: () => !disabled && setIsOpen(!isOpen),
+              children: trigger
+            }
+          ),
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+            "div",
+            {
+              className: [
+                "kz-dropdown-menu",
+                `align-${align}`
+              ].filter(Boolean).join(" "),
+              children: [
+                (title || coord) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "kz-dropdown-header", children: [
+                  title && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "kz-dropdown-title", children: title }),
+                  coord && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "kz-dropdown-coord", children: coord })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "kz-dropdown-list", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+                  "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__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "kz-dropdown-item-left", children: [
+                        item.icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "kz-dropdown-item-icon", children: item.icon }),
+                        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "kz-dropdown-item-text", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "kz-dropdown-item-label", children: item.label }),
+                          item.sublabel && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "kz-dropdown-item-sublabel", children: item.sublabel })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "kz-dropdown-item-right", children: [
+                        item.shortcut && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "kz-dropdown-item-shortcut", children: item.shortcut }),
+                        item.badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "kz-dropdown-item-badge", children: item.badge })
+                      ] })
+                    ]
+                  },
+                  item.id
+                )) })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+DropdownMenu.displayName = "DropdownMenu";
+
+// src/components/Popover.tsx
+var import_react20 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var Popover = (0, import_react20.forwardRef)(
+  ({
+    trigger,
+    children,
+    title,
+    coord,
+    align = "center",
+    position = "bottom",
+    className = "",
+    isOpen: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+    disabled = false
+  }, ref) => {
+    const [internalOpen, setInternalOpen] = (0, import_react20.useState)(defaultOpen);
+    const isControlled = controlledOpen !== void 0;
+    const open = isControlled ? controlledOpen : internalOpen;
+    const containerRef = (0, import_react20.useRef)(null);
+    const toggleOpen = () => {
+      if (disabled) return;
+      const next = !open;
+      if (!isControlled) {
+        setInternalOpen(next);
+      }
+      onOpenChange?.(next);
+    };
+    const handleClose = () => {
+      if (!isControlled) {
+        setInternalOpen(false);
+      }
+      onOpenChange?.(false);
+    };
+    (0, import_react20.useEffect)(() => {
+      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__ */ (0, import_jsx_runtime26.jsxs)(
+      "div",
+      {
+        ref: containerRef,
+        className: ["kz-popover-container", className].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "div",
+            {
+              ref,
+              className: "kz-popover-trigger-wrapper",
+              onClick: toggleOpen,
+              children: trigger
+            }
+          ),
+          open && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+            "div",
+            {
+              className: [
+                "kz-popover-content",
+                `pos-${position}`,
+                `align-${align}`
+              ].filter(Boolean).join(" "),
+              children: [
+                (title || coord) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "kz-popover-header", children: [
+                  title && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "kz-popover-title", children: title }),
+                  coord && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "kz-popover-coord", children: coord })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "kz-popover-body", children })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Popover.displayName = "Popover";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Badge,
@@ -1301,15 +1649,19 @@ function BottomBar({
   BracketCard,
   Breadcrumbs,
   Button,
+  ColorPicker,
   CornerFrame,
   CyberSwitch,
   Dot,
+  DropdownMenu,
   HudModal,
   HudToast,
   Input,
   KeyValGrid,
   Logo,
+  Popover,
   SegmentedControl,
+  Slider,
   SpoilerGate,
   StickyNote,
   TacticalDrawer,