npm - klun-ui - Versions diffs - 0.1.9 → 0.1.11 - Mend

klun-ui 0.1.9 → 0.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/CHANGELOG.md +14 -0
package/README.md +2 -2
package/dist/{chunk-PRDLMM4A.cjs → chunk-F7D5VPDL.cjs} +417 -26
package/dist/chunk-F7D5VPDL.cjs.map +1 -0
package/dist/{chunk-N3A4NTMY.js → chunk-N4NBEKYR.js} +414 -27
package/dist/chunk-N4NBEKYR.js.map +1 -0
package/dist/index.cjs +160 -144
package/dist/index.d.cts +115 -2
package/dist/index.d.ts +115 -2
package/dist/index.js +1 -1
package/dist/styles.css +286 -0
package/dist/templates/index.cjs +1047 -82
package/dist/templates/index.cjs.map +1 -1
package/dist/templates/index.d.cts +3 -1
package/dist/templates/index.d.ts +3 -1
package/dist/templates/index.js +966 -2
package/dist/templates/index.js.map +1 -1
package/package.json +1 -1
package/dist/chunk-N3A4NTMY.js.map +0 -1
package/dist/chunk-PRDLMM4A.cjs.map +0 -1

package/CHANGELOG.md CHANGED Viewed

@@ -5,6 +5,20 @@ All notable changes to **klun-ui** are documented here. The format follows
 [Semantic Versioning](https://semver.org/) (pre-1.0: minor/patch bumps may carry
 small breaking changes).
+## [0.1.10] — 2026-06-21
+### Added
+- **`ImageViewer` — a full-screen image lightbox.** Single image or gallery
+  (prev/next + counter), wheel & button zoom, rotate, drag-to-pan when zoomed,
+  double-click to toggle fit/100%, optional download, and keyboard control
+  (Esc / ←→ / `+` `-` / `0`). Portals to `<body>` and locks body scroll.
+- **`ContextMenu` + `useContextMenu` — a cursor-positioned right-click menu.**
+  Nested submenus via `item.children` (open on hover or `→`, any depth, each
+  level flips to stay on-screen), clamps/flips to the viewport, keyboard
+  navigation (↑ ↓ → ← Enter Esc Home End), disabled items, shortcuts, dividers
+  and danger items. The `useContextMenu` hook wires up `onContextMenu` →
+  open-at-cursor.
 ## [0.1.9] — 2026-06-21
 ### Fixed

package/README.md CHANGED Viewed

@@ -75,7 +75,7 @@ You can also override tokens directly:
 | **Feedback** | Alert, Banner, InlineTip, Toast, NotificationItem, ProgressBar, GaugeBar, CircularProgress, SegmentedProgress, Spinner, Skeleton, EmptyState |
 | **Navigation** | Tabs, SegmentedControl, Breadcrumb, Pagination, StepIndicator, Divider, ContentDivider, HorizontalFilter, PageHeader |
 | **Overlays** | Modal, Drawer, Dropdown, Popover, CommandMenu |
-| **Disclosure** | Accordion |
+| **Disclosure** | Accordion, Collapse |
 | **Layout** | Card, ContentCard, FeatureCard |
 All components and their prop types are named exports; a `cx` classnames helper is exported too.
@@ -86,7 +86,7 @@ Full-screen example compositions are available from the `klun-ui/templates` subp
 ```tsx
 import "klun-ui/styles.css";
-import { DashboardTemplate, AIAssistantTemplate, CryptoTemplate, MarketingTemplate } from "klun-ui/templates";
+import { DashboardTemplate, AIAssistantTemplate, AgentChatTemplate, CryptoTemplate, MarketingTemplate } from "klun-ui/templates";
 export default function App() {
   return <DashboardTemplate />;

package/dist/{chunk-PRDLMM4A.cjs → chunk-F7D5VPDL.cjs} RENAMED Viewed

@@ -4372,9 +4372,9 @@ function useExpandedRows({
       list.forEach((row, i) => {
         const id = getRowId(row, i);
         const kids = row[childrenKey];
-        const hasChildren = Array.isArray(kids) && kids.length > 0;
-        out.push({ row, id, depth, hasChildren });
-        if (hasChildren && treeOpen.has(id)) walk(kids, depth + 1);
+        const hasChildren2 = Array.isArray(kids) && kids.length > 0;
+        out.push({ row, id, depth, hasChildren: hasChildren2 });
+        if (hasChildren2 && treeOpen.has(id)) walk(kids, depth + 1);
       });
     };
     walk(pageRows, 0);
@@ -4912,7 +4912,7 @@ var Tree = react.forwardRef(function Tree2({
       className: chunkTPGAXYFU_cjs.cx("klun-tree", showLine && "klun-tree--line", className),
       ...props,
       children: rows.filter((r) => !r.hidden).map(({ node, level }) => {
-        const hasChildren = !!(node.children && node.children.length);
+        const hasChildren2 = !!(node.children && node.children.length);
         const isExpanded = exp.includes(node.key);
         const selected = selectedKey === node.key;
         const cs = checkable ? checkState(node) : null;
@@ -4920,7 +4920,7 @@ var Tree = react.forwardRef(function Tree2({
           "div",
           {
             role: "treeitem",
-            "aria-expanded": hasChildren ? isExpanded : void 0,
+            "aria-expanded": hasChildren2 ? isExpanded : void 0,
             "aria-selected": selected,
             className: chunkTPGAXYFU_cjs.cx(
               "klun-tree__item",
@@ -4939,12 +4939,12 @@ var Tree = react.forwardRef(function Tree2({
                 {
                   className: chunkTPGAXYFU_cjs.cx(
                     "klun-tree__caret",
-                    hasChildren && isExpanded && "klun-tree__caret--expanded"
+                    hasChildren2 && isExpanded && "klun-tree__caret--expanded"
                   ),
-                  "data-leaf": hasChildren ? void 0 : "",
+                  "data-leaf": hasChildren2 ? void 0 : "",
                   onClick: (e) => {
                     e.stopPropagation();
-                    if (hasChildren) toggle(node.key);
+                    if (hasChildren2) toggle(node.key);
                   },
                   children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line" })
                 }
@@ -5018,6 +5018,56 @@ var Accordion = react.forwardRef(function Accordion2({ items: items2 = [], defau
   }) });
 });
 Accordion.displayName = "Accordion";
+var Collapse = react.forwardRef(function Collapse2({
+  title,
+  icon,
+  extra,
+  defaultOpen = false,
+  open,
+  onOpenChange,
+  hideChevron = false,
+  contentStyle,
+  contentClassName,
+  className,
+  children,
+  ...props
+}, ref) {
+  const isControlled = open !== void 0;
+  const [internal, setInternal] = react.useState(defaultOpen);
+  const isOpen = isControlled ? open : internal;
+  const toggle = () => {
+    const next = !isOpen;
+    if (!isControlled) setInternal(next);
+    onOpenChange?.(next);
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      toggle();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: chunkTPGAXYFU_cjs.cx("klun-collapse", className), "data-state": isOpen ? "open" : "closed", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "klun-collapse__trigger",
+        role: "button",
+        tabIndex: 0,
+        "aria-expanded": isOpen,
+        onClick: toggle,
+        onKeyDown,
+        children: [
+          icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-collapse__icon", children: icon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-collapse__title", children: title }),
+          extra != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-collapse__extra", onClick: (e) => e.stopPropagation(), children: extra }) : null,
+          !hideChevron ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-collapse__chevron", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-collapse__panel", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkTPGAXYFU_cjs.cx("klun-collapse__content", contentClassName), style: contentStyle, children }) })
+  ] });
+});
+Collapse.displayName = "Collapse";
 var Alert = react.forwardRef(function Alert2({ status = "information", variant = "lighter", icon, title, action, onClose, className, children, ...props }, ref) {
   const { alert } = useLocale();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5920,7 +5970,7 @@ var Cascader = react.forwardRef(function Cascader2({
             ),
             children: col.map((opt) => {
               const selected = active[ci] === opt.value;
-              const hasChildren = !!(opt.children && opt.children.length);
+              const hasChildren2 = !!(opt.children && opt.children.length);
               return /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
@@ -5931,7 +5981,7 @@ var Cascader = react.forwardRef(function Cascader2({
                   "data-selected": selected || void 0,
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-cascader__option-label", children: opt.label }),
-                    hasChildren ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line klun-cascader__option-arrow" }) : selected ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-check-line klun-cascader__option-check" }) : null
+                    hasChildren2 ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line klun-cascader__option-arrow" }) : selected ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-check-line klun-cascader__option-check" }) : null
                   ]
                 },
                 opt.value
@@ -9838,6 +9888,203 @@ function Confirm(opts = {}) {
     root.render(/* @__PURE__ */ jsxRuntime.jsx(ConfirmDialog, { opts, onClose: close }));
   });
 }
+var isSelectable = (it) => !it.divider && !it.disabled;
+var hasChildren = (it) => !!it.children && it.children.length > 0;
+var GAP2 = 8;
+function place(w, h, opts) {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  let left;
+  let top;
+  if (opts.rect) {
+    const r = opts.rect;
+    left = r.right - 4 + w > vw - GAP2 ? r.left - w + 4 : r.right - 4;
+    top = r.top - 4;
+  } else {
+    const p = opts.point ?? { x: 0, y: 0 };
+    left = p.x + w > vw - GAP2 ? p.x - w : p.x;
+    top = p.y + h > vh - GAP2 ? p.y - h : p.y;
+  }
+  left = Math.min(Math.max(GAP2, left), vw - w - GAP2);
+  top = Math.min(Math.max(GAP2, top), vh - h - GAP2);
+  return { left, top };
+}
+function MenuPanel({ items: items2, width, className, point, anchorEl, autoActive, depth, onCloseAll, onCloseSelf }) {
+  const ref = react.useRef(null);
+  const itemEls = react.useRef([]);
+  const [pos, setPos] = react.useState(null);
+  const [active, setActive] = react.useState(autoActive ? items2.findIndex(isSelectable) : -1);
+  const [sub, setSub] = react.useState(null);
+  const isLeaf = sub === null;
+  react.useLayoutEffect(() => {
+    const el = ref.current;
+    const w = el?.offsetWidth ?? width;
+    const h = el?.offsetHeight ?? 0;
+    setPos(place(w, h, anchorEl ? { rect: anchorEl.getBoundingClientRect() } : { point }));
+  }, [width, point?.x, point?.y, anchorEl, items2]);
+  const move = react.useCallback(
+    (dir) => {
+      setActive((cur) => {
+        const n = items2.length;
+        for (let s = 1; s <= n; s++) {
+          const i = (cur + dir * s + n * s) % n;
+          if (isSelectable(items2[i])) return i;
+        }
+        return cur;
+      });
+    },
+    [items2]
+  );
+  const activate = react.useCallback(
+    (i, viaKeyboard) => {
+      const it = items2[i];
+      if (!it || !isSelectable(it)) return;
+      if (hasChildren(it)) setSub({ i, kbd: viaKeyboard });
+      else {
+        onCloseAll();
+        it.onClick?.();
+      }
+    },
+    [items2, onCloseAll]
+  );
+  react.useEffect(() => {
+    if (!isLeaf) return;
+    const onKey = (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        move(1);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        move(-1);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setActive(items2.findIndex(isSelectable));
+      } else if (e.key === "End") {
+        e.preventDefault();
+        for (let i = items2.length - 1; i >= 0; i--)
+          if (isSelectable(items2[i])) {
+            setActive(i);
+            break;
+          }
+      } else if (e.key === "ArrowRight") {
+        if (active >= 0 && hasChildren(items2[active])) {
+          e.preventDefault();
+          setSub({ i: active, kbd: true });
+        }
+      } else if (e.key === "ArrowLeft") {
+        if (depth > 0) {
+          e.preventDefault();
+          onCloseSelf?.();
+        }
+      } else if (e.key === "Enter") {
+        if (active >= 0) {
+          e.preventDefault();
+          activate(active, true);
+        }
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onCloseAll();
+      }
+    };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  }, [isLeaf, active, items2, depth, move, activate, onCloseAll, onCloseSelf]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role: "menu",
+      className: chunkTPGAXYFU_cjs.cx("klun-context-menu", className),
+      style: pos ? { left: pos.left, top: pos.top, width } : { left: -9999, top: -9999, width },
+      onMouseDown: (e) => e.stopPropagation(),
+      children: [
+        items2.map(
+          (it, i) => it.divider ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-context-menu__divider", role: "separator" }, i) : /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              ref: (el) => {
+                itemEls.current[i] = el;
+              },
+              type: "button",
+              role: "menuitem",
+              "aria-haspopup": hasChildren(it) || void 0,
+              "aria-expanded": hasChildren(it) ? sub?.i === i : void 0,
+              disabled: it.disabled,
+              className: chunkTPGAXYFU_cjs.cx(
+                "klun-context-menu__item",
+                it.danger && "klun-context-menu__item--danger",
+                i === active && "is-active"
+              ),
+              onMouseEnter: () => {
+                setActive(i);
+                if (isSelectable(it)) setSub(hasChildren(it) ? { i, kbd: false } : null);
+              },
+              onClick: () => activate(i, false),
+              children: [
+                it.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-context-menu__icon", children: it.icon }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-context-menu__label", children: it.label }),
+                hasChildren(it) ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line klun-context-menu__arrow" }) : it.shortcut ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "klun-context-menu__shortcut", children: it.shortcut }) : null
+              ]
+            },
+            i
+          )
+        ),
+        sub && items2[sub.i]?.children ? /* @__PURE__ */ jsxRuntime.jsx(
+          MenuPanel,
+          {
+            items: items2[sub.i].children,
+            width,
+            anchorEl: itemEls.current[sub.i],
+            autoActive: sub.kbd,
+            depth: depth + 1,
+            onCloseAll,
+            onCloseSelf: () => setSub(null)
+          },
+          `sub-${sub.i}`
+        ) : null
+      ]
+    }
+  );
+}
+function ContextMenu2({ open, x, y, items: items2, onClose, width = 208, className }) {
+  if (!open || typeof document === "undefined") return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "klun-context-menu__layer",
+        onMouseDown: onClose,
+        onContextMenu: (e) => {
+          e.preventDefault();
+          onClose();
+        },
+        onWheel: onClose,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          MenuPanel,
+          {
+            items: items2,
+            width,
+            className,
+            point: { x, y },
+            depth: 0,
+            onCloseAll: onClose
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+ContextMenu2.displayName = "ContextMenu";
+function useContextMenu() {
+  const [state, setState] = react.useState(null);
+  const open = react.useCallback((e, items2) => {
+    e.preventDefault();
+    setState({ x: e.clientX, y: e.clientY, items: items2 });
+  }, []);
+  const close = react.useCallback(() => setState(null), []);
+  return { state, open, close };
+}
 var Drawer = react.forwardRef(function Drawer2({
   open,
   onClose,
@@ -9861,8 +10108,8 @@ var Drawer = react.forwardRef(function Drawer2({
   ...props
 }, ref) {
   const { drawer } = useLocale();
-  const place = placement ?? side ?? "right";
-  const horizontal = place === "left" || place === "right";
+  const place2 = placement ?? side ?? "right";
+  const horizontal = place2 === "left" || place2 === "right";
   const prevOpen = react.useRef(open);
   react.useEffect(() => {
     if (!open) return;
@@ -9889,7 +10136,7 @@ var Drawer = react.forwardRef(function Drawer2({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: chunkTPGAXYFU_cjs.cx("klun-drawer", `klun-drawer--${place}`, !mask && "klun-drawer--no-mask"),
+      className: chunkTPGAXYFU_cjs.cx("klun-drawer", `klun-drawer--${place2}`, !mask && "klun-drawer--no-mask"),
       style: zIndex != null ? { zIndex } : void 0,
       onClick: maskClosable ? onClose : void 0,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -9972,6 +10219,146 @@ var Dropdown = react.forwardRef(function Dropdown2({ trigger, items: items2 = []
   ] });
 });
 Dropdown.displayName = "Dropdown";
+var MIN = 0.25;
+var MAX = 6;
+var clampScale = (s) => Math.min(MAX, Math.max(MIN, +s.toFixed(2)));
+function ImageViewer({
+  open,
+  src,
+  alt,
+  items: items2,
+  index,
+  onIndexChange,
+  onClose,
+  onDownload,
+  title,
+  zoomable = true,
+  rotatable = true,
+  closeOnBackdrop = true,
+  className
+}) {
+  const gallery = items2 && items2.length > 0 ? items2 : src != null ? [{ src, alt }] : [];
+  const [innerIndex, setInnerIndex] = react.useState(0);
+  const idx = index ?? innerIndex;
+  const safeIdx = Math.min(Math.max(idx, 0), Math.max(0, gallery.length - 1));
+  const current = gallery[safeIdx];
+  const [scale, setScale] = react.useState(1);
+  const [rot, setRot] = react.useState(0);
+  const [pan, setPan] = react.useState({ x: 0, y: 0 });
+  const drag = react.useRef(null);
+  const reset = react.useCallback(() => {
+    setScale(1);
+    setRot(0);
+    setPan({ x: 0, y: 0 });
+  }, []);
+  const goTo = react.useCallback(
+    (next) => {
+      if (gallery.length < 2) return;
+      const n = (next + gallery.length) % gallery.length;
+      if (index === void 0) setInnerIndex(n);
+      onIndexChange?.(n);
+      reset();
+    },
+    [gallery.length, index, onIndexChange, reset]
+  );
+  react.useEffect(() => {
+    reset();
+  }, [safeIdx, open, reset]);
+  react.useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+      else if (e.key === "ArrowLeft") goTo(safeIdx - 1);
+      else if (e.key === "ArrowRight") goTo(safeIdx + 1);
+      else if (zoomable && (e.key === "+" || e.key === "=")) setScale((s) => clampScale(s + 0.25));
+      else if (zoomable && (e.key === "-" || e.key === "_")) setScale((s) => clampScale(s - 0.25));
+      else if (e.key === "0") reset();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => {
+      document.body.style.overflow = prev;
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open, safeIdx, zoomable, onClose, goTo, reset]);
+  if (!open || !current || typeof document === "undefined") return null;
+  const onWheel = (e) => {
+    if (!zoomable) return;
+    e.preventDefault();
+    setScale((s) => clampScale(s + (e.deltaY < 0 ? 0.2 : -0.2)));
+  };
+  const onImgDown = (e) => {
+    if (scale <= 1) return;
+    e.preventDefault();
+    drag.current = { x: e.clientX, y: e.clientY, px: pan.x, py: pan.y };
+  };
+  const onMove = (e) => {
+    if (!drag.current) return;
+    setPan({ x: drag.current.px + (e.clientX - drag.current.x), y: drag.current.py + (e.clientY - drag.current.y) });
+  };
+  const endDrag = () => {
+    drag.current = null;
+  };
+  const toggleZoom = () => scale > 1 ? reset() : setScale(2);
+  const heading = title ?? current.title ?? current.alt;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: chunkTPGAXYFU_cjs.cx("klun-image-viewer", className),
+        onMouseDown: (e) => {
+          if (closeOnBackdrop && e.target === e.currentTarget) onClose();
+        },
+        onMouseMove: onMove,
+        onMouseUp: endDrag,
+        onMouseLeave: endDrag,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-image-viewer__bar", onMouseDown: (e) => e.stopPropagation(), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-image-viewer__title", children: [
+              heading,
+              gallery.length > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "klun-image-viewer__counter", children: [
+                safeIdx + 1,
+                " / ",
+                gallery.length
+              ] }) : null
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "klun-image-viewer__tools", children: [
+              zoomable ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-image-viewer__btn", "aria-label": "Zoom out", onClick: () => setScale((s) => clampScale(s - 0.25)), children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-zoom-out-line" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "klun-image-viewer__zoom", children: [
+                  Math.round(scale * 100),
+                  "%"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-image-viewer__btn", "aria-label": "Zoom in", onClick: () => setScale((s) => clampScale(s + 0.25)), children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-zoom-in-line" }) })
+              ] }) : null,
+              rotatable ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-image-viewer__btn", "aria-label": "Rotate", onClick: () => setRot((r) => (r + 90) % 360), children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-anticlockwise-line" }) }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-image-viewer__btn", "aria-label": "Reset", onClick: reset, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-aspect-ratio-line" }) }),
+              onDownload ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-image-viewer__btn", "aria-label": "Download", onClick: () => onDownload(current, safeIdx), children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-download-2-line" }) }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-image-viewer__btn", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-close-line" }) })
+            ] })
+          ] }),
+          gallery.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-image-viewer__nav klun-image-viewer__nav--prev", "aria-label": "Previous", onMouseDown: (e) => e.stopPropagation(), onClick: () => goTo(safeIdx - 1), children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-left-s-line" }) }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "klun-image-viewer__stage", onMouseDown: (e) => e.stopPropagation(), onWheel, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              className: chunkTPGAXYFU_cjs.cx("klun-image-viewer__img", scale > 1 && "is-zoomed"),
+              src: current.src,
+              alt: current.alt ?? "",
+              draggable: false,
+              onDoubleClick: toggleZoom,
+              onMouseDown: onImgDown,
+              style: { transform: `translate(${pan.x}px, ${pan.y}px) scale(${scale}) rotate(${rot}deg)` }
+            }
+          ) }),
+          gallery.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "klun-image-viewer__nav klun-image-viewer__nav--next", "aria-label": "Next", onMouseDown: (e) => e.stopPropagation(), onClick: () => goTo(safeIdx + 1), children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-arrow-right-s-line" }) }) : null
+        ]
+      }
+    ),
+    document.body
+  );
+}
+ImageViewer.displayName = "ImageViewer";
 var Modal = react.forwardRef(function Modal2({
   open,
   onClose,
@@ -10101,7 +10488,7 @@ var Modal = react.forwardRef(function Modal2({
   );
 });
 Modal.displayName = "Modal";
-var GAP2 = 8;
+var GAP3 = 8;
 var MARGIN = 8;
 var Popconfirm = react.forwardRef(function Popconfirm2({
   title: titleProp,
@@ -10150,7 +10537,7 @@ var Popconfirm = react.forwardRef(function Popconfirm2({
       setPos(null);
       return;
     }
-    const place = () => {
+    const place2 = () => {
       const trigger = innerRef.current;
       const bubble = bubbleRef.current;
       if (!trigger || !bubble) return;
@@ -10163,31 +10550,31 @@ var Popconfirm = react.forwardRef(function Popconfirm2({
       let left;
       switch (placement) {
         case "bottom":
-          top = tr.bottom + GAP2;
+          top = tr.bottom + GAP3;
           left = tr.left + tr.width / 2 - bw / 2;
           break;
         case "left":
-          left = tr.left - bw - GAP2;
+          left = tr.left - bw - GAP3;
           top = tr.top + tr.height / 2 - bh / 2;
           break;
         case "right":
-          left = tr.right + GAP2;
+          left = tr.right + GAP3;
           top = tr.top + tr.height / 2 - bh / 2;
           break;
         default:
-          top = tr.top - bh - GAP2;
+          top = tr.top - bh - GAP3;
           left = tr.left + tr.width / 2 - bw / 2;
       }
       left = Math.max(MARGIN, Math.min(left, vw - bw - MARGIN));
       top = Math.max(MARGIN, Math.min(top, vh - bh - MARGIN));
       setPos({ top, left });
     };
-    place();
-    window.addEventListener("scroll", place, true);
-    window.addEventListener("resize", place);
+    place2();
+    window.addEventListener("scroll", place2, true);
+    window.addEventListener("resize", place2);
     return () => {
-      window.removeEventListener("scroll", place, true);
-      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place2, true);
+      window.removeEventListener("resize", place2);
     };
   }, [open, placement, title, description]);
   const setRefs = (node) => {
@@ -10299,6 +10686,7 @@ exports.Chip = Chip;
 exports.CircularProgress = CircularProgress;
 exports.CodeViewer = CodeViewer;
 exports.Col = Col;
+exports.Collapse = Collapse;
 exports.ColorDot = ColorDot;
 exports.ColorPicker = ColorPicker;
 exports.ColorSlider = ColorSlider;
@@ -10308,6 +10696,7 @@ exports.CompactSelectForInput = CompactSelectForInput;
 exports.ConfigProvider = ConfigProvider;
 exports.Confirm = Confirm;
 exports.ContentLabel = ContentLabel;
+exports.ContextMenu = ContextMenu2;
 exports.CopyButton = CopyButton;
 exports.CounterInput = CounterInput;
 exports.DatePicker = DatePicker;
@@ -10330,6 +10719,7 @@ exports.Grid = Grid;
 exports.Hint = Hint;
 exports.HorizontalFilter = HorizontalFilter;
 exports.ImageUpload = ImageUpload;
+exports.ImageViewer = ImageViewer;
 exports.InlineInput = InlineInput;
 exports.InlineSelect = InlineSelect;
 exports.Input = Input;
@@ -10409,6 +10799,7 @@ exports.toast = toast;
 exports.trTR = trTR;
 exports.useBreakpoint = useBreakpoint;
 exports.useConfig = useConfig;
+exports.useContextMenu = useContextMenu;
 exports.useForm = useForm;
 exports.useLocale = useLocale;
 exports.useMappedSize = useMappedSize;
@@ -10418,5 +10809,5 @@ exports.useSize = useSize;
 exports.viVN = viVN;
 exports.zhCN = zhCN;
 exports.zhTW = zhTW;
-//# sourceMappingURL=chunk-PRDLMM4A.cjs.map
-//# sourceMappingURL=chunk-PRDLMM4A.cjs.map
+//# sourceMappingURL=chunk-F7D5VPDL.cjs.map
+//# sourceMappingURL=chunk-F7D5VPDL.cjs.map