@wipco/sdui 0.2.0 → 0.3.0

package/dist/chunk-Q6SBH63R.js

@@ -0,0 +1,190 @@
+import { Badge, Checkbox, IconButton, Icon } from './chunk-ZUCI34QY.js';
+import { useState, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var BOARD_CSS = `
+.erp-colboard{display:flex;align-items:flex-start;gap:var(--wp-space-3);overflow-x:auto;padding-bottom:var(--wp-space-1)}
+.erp-colboard__col{flex:1 1 0;min-width:230px;display:flex;flex-direction:column;gap:var(--wp-space-2)}
+.erp-colboard__head{display:flex;align-items:center;justify-content:space-between;gap:var(--wp-space-2);padding:var(--wp-space-2) var(--wp-space-3);border:var(--wp-border-w) solid;border-radius:var(--wp-radius-md)}
+.erp-colboard__head-label{font-size:var(--wp-size-sm);font-weight:var(--wp-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.erp-colboard__body{display:flex;flex-direction:column;gap:var(--wp-space-2);padding:var(--wp-space-2);background:var(--wp-surface-sunken);border-radius:var(--wp-radius-lg);min-height:96px}
+.erp-colboard__empty{padding:var(--wp-space-4) var(--wp-space-2);text-align:center}
+.erp-colboard__card{display:flex;align-items:flex-start;gap:var(--wp-space-2);padding:var(--wp-space-2) var(--wp-space-3);background:var(--wp-surface-card);border:var(--wp-border-w) solid var(--wp-border-subtle);border-radius:var(--wp-radius-md);box-shadow:var(--wp-shadow-xs)}
+.erp-colboard__card--selected{border-color:var(--wp-border-focus);background:var(--wp-surface-selected)}
+.erp-colboard__main{flex:1 1 auto;min-width:0;display:block;text-align:left;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit}
+.erp-colboard__main--click{cursor:pointer}
+.erp-colboard__main--click:hover .erp-colboard__title{color:var(--wp-text-link)}
+.erp-colboard__trow{display:flex;align-items:center;gap:var(--wp-space-2);min-width:0}
+.erp-colboard__title{flex:0 1 auto;min-width:0;font-size:var(--wp-size-sm);font-weight:var(--wp-weight-medium);color:var(--wp-text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.erp-colboard__ellip{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.erp-colboard__menu{flex:none}
+.erp-colboard__opt{display:flex;align-items:center;gap:var(--wp-space-2);width:100%;text-align:left;padding:var(--wp-space-2) var(--wp-space-3);border:0;border-radius:var(--wp-radius-sm);background:transparent;color:var(--wp-text-default);font:inherit;font-size:var(--wp-size-sm);cursor:pointer;white-space:nowrap}
+.erp-colboard__opt:hover{background:var(--wp-surface-hover)}
+`;
+function BoardStyles() {
+  return /* @__PURE__ */ jsx("style", { href: "erp-colboard", precedence: "medium", children: BOARD_CSS });
+}
+function toneStyle(tone) {
+  return {
+    background: `var(--wp-status-${tone}-bg)`,
+    borderColor: `var(--wp-status-${tone}-border)`,
+    color: `var(--wp-status-${tone}-fg)`
+  };
+}
+function ColumnBoard({
+  columns,
+  items,
+  onMove,
+  onItemClick,
+  selectable = false,
+  selectedIds,
+  onSelectChange
+}) {
+  const [openMenuFor, setOpenMenuFor] = useState(null);
+  const [internalSelected, setInternalSelected] = useState([]);
+  const selected = selectedIds ?? internalSelected;
+  const toggleSelect = (id) => {
+    const next = selected.includes(id) ? selected.filter((existing) => existing !== id) : [...selected, id];
+    if (selectedIds === void 0) setInternalSelected(next);
+    onSelectChange?.(next);
+  };
+  useEffect(() => {
+    if (openMenuFor === null) return;
+    const closeOnOutsideClick = (event) => {
+      if (event.target instanceof Element && event.target.closest(".erp-colboard__menu")) return;
+      setOpenMenuFor(null);
+    };
+    const closeOnEscape = (event) => {
+      if (event.key === "Escape") setOpenMenuFor(null);
+    };
+    document.addEventListener("pointerdown", closeOnOutsideClick);
+    document.addEventListener("keydown", closeOnEscape);
+    return () => {
+      document.removeEventListener("pointerdown", closeOnOutsideClick);
+      document.removeEventListener("keydown", closeOnEscape);
+    };
+  }, [openMenuFor]);
+  const moveItem = (id, toColumn) => {
+    setOpenMenuFor(null);
+    onMove?.({ id, toColumn });
+  };
+  const knownKeys = new Set(columns.map((column) => column.key));
+  const orphanCount = items.filter((item) => !knownKeys.has(item.column)).length;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(BoardStyles, {}),
+    /* @__PURE__ */ jsx("div", { className: "erp-colboard", children: columns.map((column) => {
+      const tone = column.tone ?? "neutral";
+      const columnItems = items.filter((item) => item.column === column.key);
+      return /* @__PURE__ */ jsxs("section", { className: "erp-colboard__col", "aria-label": column.label, children: [
+        /* @__PURE__ */ jsxs("header", { className: "erp-colboard__head", style: toneStyle(tone), children: [
+          /* @__PURE__ */ jsx("span", { className: "erp-colboard__head-label", children: column.label }),
+          /* @__PURE__ */ jsx(Badge, { tone, children: columnItems.length })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "erp-colboard__body", children: columnItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "wp-caption erp-colboard__empty", children: "\uD56D\uBAA9 \uC5C6\uC74C" }) : columnItems.map((item) => {
+          const isSelected = selectable && selected.includes(item.id);
+          const targets = columns.filter((target) => target.key !== column.key);
+          const mainContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("span", { className: "erp-colboard__trow", children: [
+              /* @__PURE__ */ jsx("span", { className: "erp-colboard__title", children: item.title }),
+              item.badge ? /* @__PURE__ */ jsx(Badge, { tone: "neutral", children: item.badge }) : null
+            ] }),
+            item.sub ? /* @__PURE__ */ jsx("span", { className: "wp-caption erp-colboard__ellip", children: item.sub }) : null
+          ] });
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: isSelected ? "erp-colboard__card erp-colboard__card--selected" : "erp-colboard__card",
+              children: [
+                selectable ? /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: selected.includes(item.id),
+                    onChange: () => toggleSelect(item.id),
+                    "aria-label": `${item.title} \uC120\uD0DD`
+                  }
+                ) : null,
+                onItemClick ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "erp-colboard__main erp-colboard__main--click",
+                    onClick: () => onItemClick(item),
+                    children: mainContent
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: "erp-colboard__main", children: mainContent }),
+                /* @__PURE__ */ jsxs("div", { className: "erp-popover-host erp-colboard__menu", children: [
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      icon: "chevron-down",
+                      size: "xs",
+                      label: onMove ? `${item.title} \u2014 \uB2E4\uB978 \uCE78\uC73C\uB85C \uC774\uB3D9` : "\uC774\uB3D9 \uBD88\uAC00 \u2014 \uC774\uB3D9 \uB3D9\uC791\uC774 \uC5F0\uACB0\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4",
+                      disabled: !onMove,
+                      "aria-haspopup": "menu",
+                      "aria-expanded": openMenuFor === item.id,
+                      onClick: () => setOpenMenuFor((current) => current === item.id ? null : item.id)
+                    }
+                  ),
+                  openMenuFor === item.id && onMove ? /* @__PURE__ */ jsx("div", { className: "erp-popover", style: { minWidth: 180, width: "max-content" }, children: /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "erp-popover__body",
+                      role: "menu",
+                      style: { padding: "var(--wp-space-1)" },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: "wp-overline",
+                            style: { padding: "var(--wp-space-1) var(--wp-space-3)" },
+                            children: "\uC774\uB3D9\uD560 \uCE78"
+                          }
+                        ),
+                        targets.length === 0 ? /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: "wp-caption",
+                            style: { padding: "var(--wp-space-2) var(--wp-space-3)" },
+                            children: "\uC774\uB3D9\uD560 \uB2E4\uB978 \uCE78\uC774 \uC5C6\uC2B5\uB2C8\uB2E4"
+                          }
+                        ) : targets.map((target) => /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            role: "menuitem",
+                            className: "erp-colboard__opt",
+                            onClick: () => moveItem(item.id, target.key),
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                Icon,
+                                {
+                                  name: "arrow-right",
+                                  size: 14,
+                                  style: { color: "var(--wp-text-subtle)", flex: "none" }
+                                }
+                              ),
+                              target.label
+                            ]
+                          },
+                          target.key
+                        ))
+                      ]
+                    }
+                  ) }) : null
+                ] })
+              ]
+            },
+            item.id
+          );
+        }) })
+      ] }, column.key);
+    }) }),
+    orphanCount > 0 ? /* @__PURE__ */ jsxs("p", { className: "wp-caption", style: { margin: "var(--wp-space-2) 0 0" }, children: [
+      "\uBBF8\uBD84\uB958 \uD56D\uBAA9 ",
+      orphanCount,
+      "\uAC74 \u2014 \uCEEC\uB7FC \uC815\uC758\uC5D0 \uC5C6\uB294 \uBD84\uB958\uC785\uB2C8\uB2E4"
+    ] }) : null
+  ] });
+}
+
+export { ColumnBoard };

package/dist/chunk-QZQDHSMD.js

@@ -0,0 +1,78 @@
+import { useSyncExternalStore } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/widgets/LiveClock.tsx
+var PLACEHOLDER = "--:--:--";
+var WEEKDAYS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
+function pad2(value) {
+  return String(value).padStart(2, "0");
+}
+function formatClock(date) {
+  return `${pad2(date.getHours())}:${pad2(date.getMinutes())}:${pad2(date.getSeconds())}`;
+}
+function formatDate(date) {
+  const weekday = WEEKDAYS[date.getDay()] ?? "";
+  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())} (${weekday})`;
+}
+function formatElapsed(elapsedMs) {
+  const totalSeconds = Math.max(0, Math.floor(elapsedMs / 1e3));
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  return `${pad2(hours)}:${pad2(minutes)}:${pad2(seconds)}`;
+}
+function subscribeEverySecond(onTick) {
+  const timer = window.setInterval(onTick, 1e3);
+  return () => window.clearInterval(timer);
+}
+function getSecondSnapshot() {
+  return Math.floor(Date.now() / 1e3);
+}
+function getServerSnapshot() {
+  return null;
+}
+function LiveClock({ startedAt, showDate = false }) {
+  const nowSeconds = useSyncExternalStore(
+    subscribeEverySecond,
+    getSecondSnapshot,
+    getServerSnapshot
+  );
+  const now = nowSeconds === null ? null : nowSeconds * 1e3;
+  const isElapsedMode = startedAt !== void 0;
+  const startedMs = startedAt !== void 0 ? Date.parse(startedAt) : Number.NaN;
+  const startInvalid = isElapsedMode && Number.isNaN(startedMs);
+  let display = PLACEHOLDER;
+  let dateLine = null;
+  if (now !== null) {
+    if (isElapsedMode) {
+      display = startInvalid ? PLACEHOLDER : formatElapsed(now - startedMs);
+      if (showDate && !startInvalid) {
+        const started = new Date(startedMs);
+        dateLine = `\uC2DC\uC791 ${formatDate(started)} ${formatClock(started)}`;
+      }
+    } else {
+      const current = new Date(now);
+      display = formatClock(current);
+      if (showDate) dateLine = formatDate(current);
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        gap: "var(--wp-space-1)"
+      },
+      children: [
+        isElapsedMode ? /* @__PURE__ */ jsx("span", { className: "wp-overline", children: "\uACBD\uACFC \uC2DC\uAC04" }) : null,
+        dateLine !== null ? /* @__PURE__ */ jsx("span", { className: "wp-caption", children: dateLine }) : null,
+        /* @__PURE__ */ jsx("time", { className: "wp-metric", "aria-live": "off", children: display }),
+        startInvalid ? /* @__PURE__ */ jsx("span", { className: "wp-caption", style: { color: "var(--wp-text-danger)" }, children: "\uC2DC\uC791 \uC2DC\uAC01 \uD615\uC2DD\uC774 \uC62C\uBC14\uB974\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4" }) : null
+      ]
+    }
+  );
+}
+
+export { LiveClock };

package/dist/chunk-RH7ESUE6.js

@@ -0,0 +1,309 @@
+import { IconButton } from './chunk-ZUCI34QY.js';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var MIN_SCALE = 1;
+var MAX_SCALE = 8;
+var BUTTON_ZOOM_STEP = 1.5;
+var DRAG_CLOSE_THRESHOLD = 4;
+var INITIAL_VIEW = { scale: 1, x: 0, y: 0 };
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function ImageLightbox({ src, alt, thumbClassName, thumbStyle, children }) {
+  const [open, setOpen] = useState(false);
+  const [view, setView] = useState(INITIAL_VIEW);
+  const [dragging, setDragging] = useState(false);
+  const stageRef = useRef(null);
+  const imgRef = useRef(null);
+  const viewRef = useRef(view);
+  viewRef.current = view;
+  const dragRef = useRef(null);
+  const openViewer = (event) => {
+    event.stopPropagation();
+    setView(INITIAL_VIEW);
+    setOpen(true);
+  };
+  const close = useCallback(() => {
+    dragRef.current = null;
+    setDragging(false);
+    setOpen(false);
+  }, []);
+  const clampOffset = useCallback((x, y, scale) => {
+    const stage = stageRef.current;
+    const img = imgRef.current;
+    if (!stage || !img) return { x: 0, y: 0 };
+    const rect = stage.getBoundingClientRect();
+    const scaledW = img.clientWidth * scale;
+    const scaledH = img.clientHeight * scale;
+    const maxX = Math.max(0, (scaledW - rect.width) / 2);
+    const maxY = Math.max(0, (scaledH - rect.height) / 2);
+    return { x: clamp(x, -maxX, maxX), y: clamp(y, -maxY, maxY) };
+  }, []);
+  const zoomAt = useCallback(
+    (clientX, clientY, factor) => {
+      const stage = stageRef.current;
+      if (!stage) return;
+      const prev = viewRef.current;
+      const nextScale = clamp(prev.scale * factor, MIN_SCALE, MAX_SCALE);
+      if (nextScale === prev.scale) return;
+      const rect = stage.getBoundingClientRect();
+      const cx = clientX - rect.left - rect.width / 2;
+      const cy = clientY - rect.top - rect.height / 2;
+      const px = (cx - prev.x) / prev.scale;
+      const py = (cy - prev.y) / prev.scale;
+      const next = clampOffset(cx - px * nextScale, cy - py * nextScale, nextScale);
+      setView({ scale: nextScale, x: next.x, y: next.y });
+    },
+    [clampOffset]
+  );
+  const zoomAtCenter = useCallback(
+    (factor) => {
+      const stage = stageRef.current;
+      if (!stage) return;
+      const rect = stage.getBoundingClientRect();
+      zoomAt(rect.left + rect.width / 2, rect.top + rect.height / 2, factor);
+    },
+    [zoomAt]
+  );
+  const resetView = useCallback(() => setView(INITIAL_VIEW), []);
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        close();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [open, close]);
+  useEffect(() => {
+    if (!open) return;
+    const stage = stageRef.current;
+    if (!stage) return;
+    const onWheel = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      zoomAt(event.clientX, event.clientY, Math.exp(-event.deltaY * 2e-3));
+    };
+    stage.addEventListener("wheel", onWheel, { passive: false });
+    return () => stage.removeEventListener("wheel", onWheel);
+  }, [open, zoomAt]);
+  const onStagePointerDown = (event) => {
+    if (viewRef.current.scale <= MIN_SCALE) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    dragRef.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      originX: viewRef.current.x,
+      originY: viewRef.current.y,
+      moved: false
+    };
+    setDragging(true);
+  };
+  const onStagePointerMove = (event) => {
+    const drag = dragRef.current;
+    if (!drag || event.pointerId !== drag.pointerId) return;
+    const dx = event.clientX - drag.startX;
+    const dy = event.clientY - drag.startY;
+    if (Math.abs(dx) + Math.abs(dy) > DRAG_CLOSE_THRESHOLD) drag.moved = true;
+    const next = clampOffset(drag.originX + dx, drag.originY + dy, viewRef.current.scale);
+    setView((prev) => ({ ...prev, x: next.x, y: next.y }));
+  };
+  const endDrag = (event) => {
+    const drag = dragRef.current;
+    if (!drag || event.pointerId !== drag.pointerId) return;
+    try {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    } catch {
+    }
+    setTimeout(() => {
+      dragRef.current = null;
+    }, 0);
+    setDragging(false);
+  };
+  const onStageClick = (event) => {
+    if (dragRef.current?.moved) return;
+    if (event.target === event.currentTarget) close();
+  };
+  const zoomPercent = Math.round(view.scale * 100);
+  const isInitial = view.scale === 1 && view.x === 0 && view.y === 0;
+  const overlay = open ? createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": alt ?? "\uC774\uBBF8\uC9C0 \uBCF4\uAE30",
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: "var(--wp-z-dialog)",
+          background: "var(--wp-surface-scrim)"
+        },
+        onClick: (event) => event.stopPropagation(),
+        onPointerDown: (event) => event.stopPropagation(),
+        onDoubleClick: (event) => event.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: stageRef,
+              style: {
+                position: "absolute",
+                inset: 0,
+                overflow: "hidden",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                touchAction: "none",
+                cursor: view.scale > MIN_SCALE ? dragging ? "grabbing" : "grab" : "default"
+              },
+              onClick: onStageClick,
+              onPointerDown: onStagePointerDown,
+              onPointerMove: onStagePointerMove,
+              onPointerUp: endDrag,
+              onPointerCancel: endDrag,
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  ref: imgRef,
+                  src,
+                  alt: alt ?? "",
+                  draggable: false,
+                  style: {
+                    maxWidth: "calc(100vw - 96px)",
+                    maxHeight: "calc(100vh - 96px)",
+                    transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})`,
+                    userSelect: "none",
+                    boxShadow: "var(--wp-shadow-xl)",
+                    borderRadius: view.scale === 1 ? "var(--wp-radius-sm)" : 0
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: "var(--wp-space-4)",
+                right: "var(--wp-space-4)",
+                display: "flex",
+                alignItems: "center",
+                gap: "var(--wp-space-1)",
+                padding: "var(--wp-space-1)",
+                background: "var(--wp-surface-card)",
+                borderRadius: "var(--wp-radius-pill)",
+                boxShadow: "var(--wp-shadow-lg)"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "wp-mono-xs",
+                    "aria-live": "polite",
+                    style: {
+                      minWidth: 44,
+                      textAlign: "center",
+                      color: "var(--wp-text-muted)",
+                      fontVariantNumeric: "tabular-nums"
+                    },
+                    children: [
+                      zoomPercent,
+                      "%"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    icon: "zoom-out",
+                    label: "\uCD95\uC18C",
+                    size: "sm",
+                    disabled: view.scale <= MIN_SCALE,
+                    onClick: () => zoomAtCenter(1 / BUTTON_ZOOM_STEP)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    icon: "zoom-in",
+                    label: "\uD655\uB300",
+                    size: "sm",
+                    disabled: view.scale >= MAX_SCALE,
+                    onClick: () => zoomAtCenter(BUTTON_ZOOM_STEP)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    icon: "rotate-ccw",
+                    label: "\uC6D0\uB798 \uD06C\uAE30",
+                    size: "sm",
+                    disabled: isInitial,
+                    onClick: resetView
+                  }
+                ),
+                /* @__PURE__ */ jsx(IconButton, { icon: "x", label: "\uB2EB\uAE30", size: "sm", onClick: close })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  ) : null;
+  if (children) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: { display: "contents" },
+          onClick: openViewer,
+          onKeyDown: (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              openViewer(event);
+            }
+          },
+          children
+        }
+      ),
+      overlay
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt: alt ?? "",
+        role: "button",
+        tabIndex: 0,
+        className: thumbClassName,
+        style: { cursor: "zoom-in", ...thumbStyle },
+        onClick: openViewer,
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            openViewer(event);
+          }
+        }
+      }
+    ),
+    overlay
+  ] });
+}
+
+export { ImageLightbox };