react-public-components 0.1.0

package/dist/index.cjs

@@ -0,0 +1,600 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CollapseBox: () => CollapseBox_default,
+  Splitter: () => Splitter_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// CollapseBox/index.tsx
+var import_react = require("react");
+
+// src/icons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var baseStyle = {
+  display: "inline-block",
+  width: "1em",
+  height: "1em",
+  verticalAlign: "-0.125em"
+};
+var LeftOutlined = ({ style, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    viewBox: "0 0 1024 1024",
+    focusable: "false",
+    "data-icon": "left",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    style: { ...baseStyle, ...style },
+    className,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z" })
+  }
+);
+var RightOutlined = ({ style, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    viewBox: "0 0 1024 1024",
+    focusable: "false",
+    "data-icon": "right",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    style: { ...baseStyle, ...style },
+    className,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z" })
+  }
+);
+var UpOutlined = ({ style, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    viewBox: "0 0 1024 1024",
+    focusable: "false",
+    "data-icon": "up",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    style: { ...baseStyle, ...style },
+    className,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M890.5 755.3L537.4 268a31.96 31.96 0 00-50.8 0L133.5 755.3a7.95 7.95 0 006.3 12.7h75.5c4.9 0 9.6-2.3 12.6-6.1l281-360 281 360c3 3.8 7.7 6.1 12.6 6.1h75.5c6.7 0 10.4-7.6 6.1-12.7z" })
+  }
+);
+var DownOutlined = ({ style, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  {
+    viewBox: "0 0 1024 1024",
+    focusable: "false",
+    "data-icon": "down",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    style: { ...baseStyle, ...style },
+    className,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 37 17.6 49.8 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" })
+  }
+);
+
+// CollapseBox/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var isNumber = (value) => typeof value === "number" && !Number.isNaN(value);
+var ChevronLeft = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LeftOutlined, {});
+var ChevronRight = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RightOutlined, {});
+var ChevronUp = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(UpOutlined, {});
+var ChevronDown = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DownOutlined, {});
+var CollapsibleBox = ({
+  children,
+  title = "\u5185\u5BB9\u533A\u57DF",
+  direction = "horizontal",
+  buttonPosition = "right",
+  defaultWidth = 600,
+  defaultHeight = 300,
+  contentPadding = "16px",
+  headerHeight = 16
+}) => {
+  const [isExpanded, setIsExpanded] = (0, import_react.useState)(true);
+  const contentMaxHeight = isNumber(defaultHeight) ? defaultHeight - headerHeight : "100%";
+  const getIcon = () => {
+    if (direction === "horizontal") {
+      if (buttonPosition === "right") {
+        return isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronRight, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronLeft, {});
+      } else {
+        return isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronLeft, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronRight, {});
+      }
+    } else {
+      if (buttonPosition === "bottom") {
+        return isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronDown, {});
+      } else {
+        return isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronDown, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronUp, {});
+      }
+    }
+  };
+  const getButtonClass = () => {
+    if (direction === "horizontal") {
+      return buttonPosition === "right" ? "button-right" : "button-left";
+    } else {
+      return buttonPosition === "bottom" ? "button-bottom" : "button-top";
+    }
+  };
+  const getContainerStyle = () => {
+    const resolvedHeight = isNumber(defaultHeight) ? `${defaultHeight}px` : defaultHeight;
+    if (direction === "horizontal") {
+      return {
+        width: isExpanded ? defaultWidth : "0px",
+        height: resolvedHeight,
+        minWidth: 0
+      };
+    } else {
+      return {
+        height: isExpanded ? resolvedHeight : "0px",
+        width: defaultWidth,
+        minHeight: 0
+      };
+    }
+  };
+  const wrapperClass = direction === "horizontal" ? "collapsible-wrapper horizontal" : "collapsible-wrapper vertical";
+  const containerClass = direction === "horizontal" && buttonPosition === "right" ? "collapsible-container align-right" : "collapsible-container";
+  const height = isNumber(contentMaxHeight) ? contentMaxHeight + "px" : "100%";
+  const contentStyle = {
+    maxHeight: direction === "vertical" ? isExpanded ? `${height}` : "0px" : `${height}`,
+    overflowY: "auto",
+    padding: direction === "vertical" && !isExpanded ? "0px" : contentPadding,
+    boxSizing: "border-box"
+  };
+  const buttonStyle = direction === "vertical" && buttonPosition === "bottom" && !isExpanded ? { top: "0px", bottom: "auto" } : {};
+  const wrapperStyle = direction === "vertical" ? isExpanded ? {
+    height: isNumber(defaultHeight) ? `${defaultHeight}px` : void 0,
+    width: defaultWidth
+  } : { height: 0, width: defaultWidth } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: wrapperClass, style: wrapperStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: getContainerStyle(), className: containerClass, children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "collapsible-header", style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { children: title }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "collapsible-content", style: contentStyle, children })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        onClick: () => setIsExpanded(!isExpanded),
+        className: `toggle-button ${getButtonClass()}`,
+        style: buttonStyle,
+        title: isExpanded ? "\u9690\u85CF" : "\u5C55\u5F00",
+        children: getIcon()
+      }
+    )
+  ] });
+};
+var CollapseBox_default = CollapsibleBox;
+
+// Splitter/index.tsx
+var import_react2 = __toESM(require("react"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DRAGGER_SIZE = 8;
+var MIN_PANEL_SIZE = 0;
+var SplitterPanel = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children });
+var isPercentSize = (value) => typeof value === "string" && value.endsWith("%");
+var parseSize = (value, total, fallback) => {
+  if (value === void 0) {
+    return fallback;
+  }
+  if (isPercentSize(value)) {
+    return Number.parseFloat(value) / 100 * total;
+  }
+  return Number(value);
+};
+var roundSizes = (sizes) => sizes.map((size) => Math.round(size));
+var getPointerPosition = (event, orientation) => orientation === "horizontal" ? event.clientX : event.clientY;
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+var CustomSplitter = ({
+  children,
+  className,
+  lazy = false,
+  onResize,
+  onResizeEnd,
+  onResizeStart,
+  orientation,
+  style,
+  vertical = false
+}) => {
+  const resolvedOrientation = orientation != null ? orientation : vertical ? "vertical" : "horizontal";
+  const rootRef = (0, import_react2.useRef)(null);
+  const sizesRef = (0, import_react2.useRef)([]);
+  const lastNonZeroSizesRef = (0, import_react2.useRef)([]);
+  const [containerSize, setContainerSize] = (0, import_react2.useState)(0);
+  const [draggingIndex, setDraggingIndex] = (0, import_react2.useState)(null);
+  const [hoveredIndex, setHoveredIndex] = (0, import_react2.useState)(null);
+  const [sizes, setSizes] = (0, import_react2.useState)([]);
+  const panels = (0, import_react2.useMemo)(
+    () => import_react2.default.Children.toArray(children).filter(
+      import_react2.default.isValidElement
+    ),
+    [children]
+  );
+  const trackSize = Math.max(0, containerSize - Math.max(0, panels.length - 1) * DRAGGER_SIZE);
+  const getPanelMin = (0, import_react2.useCallback)(
+    (index) => {
+      var _a;
+      return parseSize((_a = panels[index]) == null ? void 0 : _a.props.min, trackSize, MIN_PANEL_SIZE);
+    },
+    [panels, trackSize]
+  );
+  const getPanelMax = (0, import_react2.useCallback)(
+    (index) => {
+      var _a;
+      return parseSize((_a = panels[index]) == null ? void 0 : _a.props.max, trackSize, trackSize);
+    },
+    [panels, trackSize]
+  );
+  const normalizeToTrack = (0, import_react2.useCallback)(
+    (nextSizes) => {
+      if (!trackSize || !nextSizes.length) {
+        return nextSizes;
+      }
+      const normalized = [...nextSizes];
+      const diff = trackSize - normalized.reduce((sum, size) => sum + size, 0);
+      const flexibleIndex = normalized.findIndex((size) => size > 0);
+      normalized[flexibleIndex === -1 ? 0 : flexibleIndex] += diff;
+      return normalized.map((size, index) => clamp(size, 0, getPanelMax(index)));
+    },
+    [getPanelMax, trackSize]
+  );
+  const buildInitialSizes = (0, import_react2.useCallback)(
+    (previous) => {
+      if (!trackSize || !panels.length) {
+        return [];
+      }
+      if ((previous == null ? void 0 : previous.length) === panels.length) {
+        const previousTotal = previous.reduce((sum, size) => sum + size, 0);
+        if (previousTotal > 0) {
+          return normalizeToTrack(previous.map((size) => size / previousTotal * trackSize));
+        }
+      }
+      const explicitSizes = panels.map(
+        (panel) => {
+          var _a;
+          return parseSize((_a = panel.props.size) != null ? _a : panel.props.defaultSize, trackSize, -1);
+        }
+      );
+      const usedSize = explicitSizes.filter((size) => size >= 0).reduce((sum, size) => sum + size, 0);
+      const unsetCount = explicitSizes.filter((size) => size < 0).length;
+      const fallbackSize = unsetCount ? Math.max(0, (trackSize - usedSize) / unsetCount) : 0;
+      return normalizeToTrack(
+        explicitSizes.map(
+          (size, index) => clamp(size >= 0 ? size : fallbackSize, getPanelMin(index), getPanelMax(index))
+        )
+      );
+    },
+    [getPanelMax, getPanelMin, normalizeToTrack, panels, trackSize]
+  );
+  const updateSizes = (0, import_react2.useCallback)(
+    (nextSizes, notify = true) => {
+      const normalized = normalizeToTrack(nextSizes);
+      setSizes(normalized);
+      sizesRef.current = normalized;
+      normalized.forEach((size, index) => {
+        if (size > 1) {
+          lastNonZeroSizesRef.current[index] = size;
+        }
+      });
+      if (notify) {
+        onResize == null ? void 0 : onResize(roundSizes(normalized));
+      }
+    },
+    [normalizeToTrack, onResize]
+  );
+  (0, import_react2.useEffect)(() => {
+    const node = rootRef.current;
+    if (!node) {
+      return void 0;
+    }
+    const syncSize = () => {
+      const rect = node.getBoundingClientRect();
+      setContainerSize(resolvedOrientation === "horizontal" ? rect.width : rect.height);
+    };
+    syncSize();
+    const observer = new ResizeObserver(syncSize);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [resolvedOrientation]);
+  (0, import_react2.useEffect)(() => {
+    setSizes((previous) => {
+      const nextSizes = buildInitialSizes(previous);
+      sizesRef.current = nextSizes;
+      lastNonZeroSizesRef.current = nextSizes.map(
+        (size) => Math.max(size, trackSize / Math.max(panels.length, 1))
+      );
+      return nextSizes;
+    });
+  }, [buildInitialSizes, panels.length, trackSize]);
+  const getResizedPair = (0, import_react2.useCallback)(
+    (sourceSizes, index, delta) => {
+      const nextSizes = [...sourceSizes];
+      const leftSize = nextSizes[index];
+      const rightSize = nextSizes[index + 1];
+      const leftMin = getPanelMin(index);
+      const rightMin = getPanelMin(index + 1);
+      const leftMax = getPanelMax(index);
+      const rightMax = getPanelMax(index + 1);
+      const minDelta = Math.max(leftMin - leftSize, rightSize - rightMax);
+      const maxDelta = Math.min(leftMax - leftSize, rightSize - rightMin);
+      const safeDelta = clamp(delta, minDelta, maxDelta);
+      nextSizes[index] = leftSize + safeDelta;
+      nextSizes[index + 1] = rightSize - safeDelta;
+      return normalizeToTrack(nextSizes);
+    },
+    [getPanelMax, getPanelMin, normalizeToTrack]
+  );
+  const resizePair = (0, import_react2.useCallback)(
+    (index, delta, notify = true) => {
+      updateSizes(getResizedPair(sizesRef.current, index, delta), notify);
+    },
+    [getResizedPair, updateSizes]
+  );
+  const startResize = (index, event) => {
+    if (panels[index].props.resizable === false || panels[index + 1].props.resizable === false) {
+      return;
+    }
+    event.preventDefault();
+    const startPosition = getPointerPosition(event, resolvedOrientation);
+    const startSizes = [...sizesRef.current];
+    let latestSizes = startSizes;
+    setDraggingIndex(index);
+    onResizeStart == null ? void 0 : onResizeStart(roundSizes(startSizes));
+    const handlePointerMove = (moveEvent) => {
+      const delta = getPointerPosition(moveEvent, resolvedOrientation) - startPosition;
+      latestSizes = getResizedPair(startSizes, index, delta);
+      if (!lazy) {
+        updateSizes(latestSizes, true);
+      }
+    };
+    const handlePointerUp = () => {
+      document.removeEventListener("pointermove", handlePointerMove);
+      document.removeEventListener("pointerup", handlePointerUp);
+      setDraggingIndex(null);
+      if (lazy) {
+        updateSizes(latestSizes, true);
+      }
+      onResizeEnd == null ? void 0 : onResizeEnd(roundSizes(sizesRef.current));
+    };
+    document.addEventListener("pointermove", handlePointerMove);
+    document.addEventListener("pointerup", handlePointerUp);
+  };
+  const toggleCollapse = (index, neighborIndex) => {
+    const nextSizes = [...sizesRef.current];
+    if (nextSizes[index] > 1) {
+      lastNonZeroSizesRef.current[index] = nextSizes[index];
+      nextSizes[neighborIndex] += nextSizes[index];
+      nextSizes[index] = 0;
+    } else {
+      const restoredSize = lastNonZeroSizesRef.current[index] || parseSize(panels[index].props.defaultSize, trackSize, trackSize / panels.length);
+      nextSizes[index] = clamp(restoredSize, getPanelMin(index), getPanelMax(index));
+      nextSizes[neighborIndex] = Math.max(0, nextSizes[neighborIndex] - nextSizes[index]);
+    }
+    updateSizes(nextSizes);
+    onResizeEnd == null ? void 0 : onResizeEnd(roundSizes(sizesRef.current));
+  };
+  const resetSizes = () => {
+    const nextSizes = buildInitialSizes();
+    updateSizes(nextSizes);
+    onResizeEnd == null ? void 0 : onResizeEnd(roundSizes(nextSizes));
+  };
+  const rootStyle = {
+    border: "1px solid #f0f0f0",
+    borderRadius: 8,
+    display: "flex",
+    flexDirection: resolvedOrientation === "horizontal" ? "row" : "column",
+    height: 360,
+    minHeight: 0,
+    overflow: "hidden",
+    width: "100%",
+    ...style
+  };
+  const renderCollapseButton = (draggerIndex, panelIndex, direction) => {
+    var _a, _b;
+    const panel = panels[panelIndex];
+    if (!(panel == null ? void 0 : panel.props.collapsible)) {
+      return null;
+    }
+    const neighborIndex = direction === "start" ? panelIndex + 1 : panelIndex - 1;
+    const isCollapsed = ((_a = sizes[panelIndex]) != null ? _a : 0) <= 1;
+    const isNeighborCollapsed = ((_b = sizes[neighborIndex]) != null ? _b : 0) <= 1;
+    if (isCollapsed || isNeighborCollapsed) {
+      return null;
+    }
+    const Icon = resolvedOrientation === "horizontal" ? direction === "start" ? LeftOutlined : RightOutlined : direction === "start" ? UpOutlined : DownOutlined;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        "aria-label": "\u6298\u53E0\u9762\u677F",
+        title: "\u6298\u53E0\u9762\u677F",
+        onClick: (event) => {
+          event.stopPropagation();
+          toggleCollapse(panelIndex, neighborIndex);
+        },
+        style: {
+          alignItems: "center",
+          background: "#fff",
+          border: "1px solid #d9d9d9",
+          borderRadius: 4,
+          color: "#595959",
+          cursor: "pointer",
+          display: "flex",
+          height: 20,
+          justifyContent: "center",
+          padding: 0,
+          width: 20,
+          fontSize: 12
+        },
+        type: "button",
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, {})
+      }
+    );
+  };
+  const renderExpandButton = (panelIndex, direction) => {
+    var _a;
+    const panel = panels[panelIndex];
+    if (!(panel == null ? void 0 : panel.props.collapsible)) {
+      return null;
+    }
+    const isCollapsed = ((_a = sizes[panelIndex]) != null ? _a : 0) <= 1;
+    if (!isCollapsed) {
+      return null;
+    }
+    const neighborIndex = direction === "start" ? panelIndex + 1 : panelIndex - 1;
+    const Icon = resolvedOrientation === "horizontal" ? direction === "start" ? RightOutlined : LeftOutlined : direction === "start" ? DownOutlined : UpOutlined;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        "aria-label": "\u5C55\u5F00\u9762\u677F",
+        title: "\u5C55\u5F00\u9762\u677F",
+        onClick: (event) => {
+          event.stopPropagation();
+          toggleCollapse(panelIndex, neighborIndex);
+        },
+        style: {
+          alignItems: "center",
+          background: "#fff",
+          border: "1px solid #d9d9d9",
+          borderRadius: 4,
+          color: "#595959",
+          cursor: "pointer",
+          display: "flex",
+          height: 20,
+          justifyContent: "center",
+          padding: 0,
+          width: 20,
+          fontSize: 12
+        },
+        type: "button",
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, {})
+      }
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, ref: rootRef, style: rootStyle, children: panels.map((panel, index) => {
+    var _a, _b, _c, _d, _e;
+    const isHidden = sizes[index] <= 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react2.default.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          style: {
+            background: index % 2 ? "#fff" : "#fafafa",
+            flex: `0 0 ${(_a = sizes[index]) != null ? _a : 0}px`,
+            minHeight: 0,
+            minWidth: 0,
+            overflow: "auto",
+            padding: isHidden ? 0 : 16,
+            transition: draggingIndex === null ? "flex-basis 0.2s ease" : void 0,
+            ...panel.props.style
+          },
+          children: !isHidden && panel.props.children
+        }
+      ),
+      index < panels.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          "aria-orientation": resolvedOrientation,
+          onDoubleClick: resetSizes,
+          onKeyDown: (event) => {
+            const step = event.shiftKey ? 40 : 10;
+            const directionMap = resolvedOrientation === "horizontal" ? { ArrowLeft: -step, ArrowRight: step } : { ArrowUp: -step, ArrowDown: step };
+            const delta = directionMap[event.key];
+            if (delta !== void 0) {
+              event.preventDefault();
+              resizePair(index, delta);
+            }
+          },
+          onPointerDown: (event) => startResize(index, event),
+          onPointerEnter: () => setHoveredIndex(index),
+          onPointerLeave: () => setHoveredIndex(null),
+          role: "separator",
+          style: {
+            alignItems: "center",
+            background: hoveredIndex === index || draggingIndex === index ? "#e6f4ff" : "#f5f5f5",
+            cursor: resolvedOrientation === "horizontal" ? "col-resize" : "row-resize",
+            display: "flex",
+            flex: `0 0 ${DRAGGER_SIZE}px`,
+            justifyContent: "center",
+            outline: "none",
+            position: "relative",
+            userSelect: "none",
+            zIndex: 1
+          },
+          tabIndex: 0,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                style: {
+                  background: hoveredIndex === index || draggingIndex === index ? "#1677ff" : "#d9d9d9",
+                  borderRadius: 2,
+                  height: resolvedOrientation === "horizontal" ? 48 : 2,
+                  width: resolvedOrientation === "horizontal" ? 2 : 48
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  display: "flex",
+                  flexDirection: resolvedOrientation === "horizontal" ? "column" : "row",
+                  gap: 2,
+                  opacity: hoveredIndex === index || ((_b = sizes[index]) != null ? _b : 0) <= 1 || ((_c = sizes[index + 1]) != null ? _c : 0) <= 1 ? 1 : 0,
+                  transition: "opacity 0.15s ease",
+                  pointerEvents: hoveredIndex === index || ((_d = sizes[index]) != null ? _d : 0) <= 1 || ((_e = sizes[index + 1]) != null ? _e : 0) <= 1 ? "auto" : "none"
+                },
+                children: [
+                  renderCollapseButton(index, index, "start"),
+                  renderCollapseButton(index, index + 1, "end"),
+                  renderExpandButton(index, "start"),
+                  renderExpandButton(index + 1, "end")
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] }, index);
+  }) });
+};
+CustomSplitter.Panel = SplitterPanel;
+var Splitter_default = CustomSplitter;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CollapseBox,
+  Splitter
+});
+//# sourceMappingURL=index.cjs.map