@expcat/tigercat-react 1.1.0 → 1.2.0

package/README.md

@@ -3,7 +3,7 @@
 [![npm version](https://img.shields.io/npm/v/@expcat/tigercat-react.svg)](https://www.npmjs.com/package/@expcat/tigercat-react)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-React UI components for [Tigercat](https://github.com/expcats/Tigercat) - A Tailwind CSS based component library.
+React UI components for [Tigercat](https://github.com/expcat/Tigercat) - A Tailwind CSS based component library.
 
 ## 📖 Documentation
 

package/dist/chunk-2GQCFTD7.mjs

@@ -0,0 +1,101 @@
+// src/components/NumberKeyboard.tsx
+import { useMemo, useState } from "react";
+import {
+  applyNumberKeyboardInput,
+  classNames,
+  deleteNumberKeyboardValue,
+  getNumberKeyboardAction,
+  getNumberKeyboardKeyClasses,
+  getNumberKeyboardKeys,
+  normalizeNumberKeyboardValue,
+  numberKeyboardGridClasses,
+  numberKeyboardRootClasses
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var NumberKeyboard = ({
+  value,
+  defaultValue = "",
+  mode = "number",
+  maxLength,
+  precision,
+  decimalSeparator = ".",
+  disabled = false,
+  readonly = false,
+  confirmText = "Done",
+  deleteText = "Delete",
+  ariaLabel = "Number keyboard",
+  showConfirm = true,
+  className,
+  style,
+  onChange,
+  onKeyPress,
+  onDelete,
+  onConfirm,
+  ...rest
+}) => {
+  const isControlled = value !== void 0;
+  const [innerValue, setInnerValue] = useState(() => normalizeNumberKeyboardValue(defaultValue));
+  const currentValue = isControlled ? normalizeNumberKeyboardValue(value) : innerValue;
+  const isDisabled = disabled || readonly;
+  const keys = useMemo(
+    () => getNumberKeyboardKeys({ mode, decimalSeparator, deleteText, confirmText, showConfirm }),
+    [confirmText, decimalSeparator, deleteText, mode, showConfirm]
+  );
+  function emitChange(nextValue, payload) {
+    if (!isControlled) setInnerValue(nextValue);
+    onChange?.(nextValue, payload);
+  }
+  function handleKeyClick(key) {
+    if (isDisabled || key.type === "empty") return;
+    const action = getNumberKeyboardAction(key);
+    const nextValue = action === "delete" ? deleteNumberKeyboardValue(currentValue) : action === "input" ? applyNumberKeyboardInput(currentValue, key.value, {
+      mode,
+      maxLength,
+      precision,
+      decimalSeparator
+    }) : currentValue;
+    const payload = {
+      value: nextValue,
+      key: key.value,
+      action,
+      mode
+    };
+    onKeyPress?.(key, payload);
+    if (action === "confirm") {
+      onConfirm?.(currentValue, { ...payload, value: currentValue });
+      return;
+    }
+    if (action === "delete") onDelete?.(nextValue, payload);
+    if (nextValue !== currentValue) emitChange(nextValue, payload);
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames(numberKeyboardRootClasses, className),
+      style,
+      role: "group",
+      "aria-label": ariaLabel,
+      "aria-disabled": isDisabled || void 0,
+      ...rest,
+      children: /* @__PURE__ */ jsx("div", { className: numberKeyboardGridClasses, children: keys.map((key, index) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: getNumberKeyboardKeyClasses(key, isDisabled),
+          disabled: isDisabled || key.disabled,
+          "aria-label": key.ariaLabel,
+          "data-key": key.value,
+          onClick: () => handleKeyClick(key),
+          children: key.label
+        },
+        `${key.type}-${key.value}-${index}`
+      )) })
+    }
+  );
+};
+var NumberKeyboard_default = NumberKeyboard;
+
+export {
+  NumberKeyboard,
+  NumberKeyboard_default
+};

package/dist/chunk-2HKFQ74Z.mjs

@@ -0,0 +1,127 @@
+// src/components/ColorSwatch.tsx
+import { useMemo, useRef, useState } from "react";
+import {
+  classNames,
+  colorSwatchBaseClasses,
+  colorSwatchGridClasses,
+  colorSwatchGroupClasses,
+  colorSwatchGroupLabelClasses,
+  flattenColorSwatchGroups,
+  getColorSwatchButtonClasses,
+  getColorSwatchCheckClasses,
+  getNextColorSwatchIndex,
+  isColorSwatchSelected,
+  normalizeColorSwatchGroups
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var checkPathD = "M5 10.5 8 13.5 15 6.5";
+var ColorSwatch = ({
+  value,
+  defaultValue,
+  disabled = false,
+  size = "md",
+  colors,
+  groups,
+  columns = 6,
+  ariaLabel = "Color swatches",
+  className,
+  onChange
+}) => {
+  const [innerValue, setInnerValue] = useState(defaultValue);
+  const [focusIndex, setFocusIndex] = useState(-1);
+  const optionRefs = useRef([]);
+  const normalizedGroups = useMemo(
+    () => normalizeColorSwatchGroups(groups, colors),
+    [groups, colors]
+  );
+  const options = useMemo(() => flattenColorSwatchGroups(normalizedGroups), [normalizedGroups]);
+  const selectedValue = value ?? innerValue;
+  const selectedIndex = options.findIndex(
+    (option) => isColorSwatchSelected(option.value, selectedValue)
+  );
+  const firstEnabledIndex = options.findIndex((option) => !option.disabled);
+  const activeIndex = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex;
+  function handleSelect(option) {
+    if (disabled || option.disabled) return;
+    if (value === void 0) setInnerValue(option.value);
+    onChange?.(option.value, option);
+  }
+  function handleKeyDown(optionIndex, event) {
+    if (disabled) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const option = options[optionIndex];
+      if (option) handleSelect(option);
+      return;
+    }
+    const nextIndex = getNextColorSwatchIndex(options, optionIndex, event.key, columns);
+    if (nextIndex === -1 || nextIndex === optionIndex) return;
+    event.preventDefault();
+    setFocusIndex(nextIndex);
+    optionRefs.current[nextIndex]?.focus();
+  }
+  let flatIndex = 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames(colorSwatchBaseClasses, className),
+      role: "radiogroup",
+      "aria-label": ariaLabel,
+      "aria-disabled": disabled || void 0,
+      children: normalizedGroups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { className: colorSwatchGroupClasses, children: [
+        group.label && /* @__PURE__ */ jsx("div", { className: colorSwatchGroupLabelClasses, children: group.label }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: colorSwatchGridClasses,
+            style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
+            children: group.colors.map((option) => {
+              const optionIndex = flatIndex;
+              flatIndex += 1;
+              const selected = isColorSwatchSelected(option.value, selectedValue);
+              const optionDisabled = disabled || !!option.disabled;
+              const tabIndex = !optionDisabled && optionIndex === (focusIndex >= 0 ? focusIndex : activeIndex) ? 0 : -1;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ref: (node) => {
+                    optionRefs.current[optionIndex] = node;
+                  },
+                  type: "button",
+                  className: getColorSwatchButtonClasses(size, selected, optionDisabled),
+                  style: { backgroundColor: option.value },
+                  role: "radio",
+                  "aria-checked": selected,
+                  "aria-label": option.label,
+                  "aria-disabled": optionDisabled || void 0,
+                  tabIndex,
+                  onFocus: () => setFocusIndex(optionIndex),
+                  onClick: () => handleSelect(option),
+                  onKeyDown: (event) => handleKeyDown(optionIndex, event),
+                  children: selected && /* @__PURE__ */ jsx("span", { className: getColorSwatchCheckClasses(size), "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      viewBox: "0 0 20 20",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2.5",
+                      className: "h-full w-full",
+                      children: /* @__PURE__ */ jsx("path", { d: checkPathD, strokeLinecap: "round", strokeLinejoin: "round" })
+                    }
+                  ) })
+                },
+                `${option.groupIndex}-${option.index}-${option.value}`
+              );
+            })
+          }
+        )
+      ] }, `${groupIndex}-${group.label ?? "group"}`))
+    }
+  );
+};
+var ColorSwatch_default = ColorSwatch;
+
+export {
+  ColorSwatch,
+  ColorSwatch_default
+};

package/dist/chunk-2JUPXEWX.js

@@ -0,0 +1,236 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunk5EZWYEGJjs = require('./chunk-5EZWYEGJ.js');
+
+
+var _chunk6Z4LLPZAjs = require('./chunk-6Z4LLPZA.js');
+
+
+var _chunkZYJTHGQWjs = require('./chunk-ZYJTHGQW.js');
+
+
+var _chunkGRXBGL6Qjs = require('./chunk-GRXBGL6Q.js');
+
+// src/components/DataTableWithToolbar.tsx
+var _react = require('react');
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var DataTableWithToolbar = ({
+  toolbar,
+  onSearchChange,
+  onSearch,
+  onFiltersChange,
+  onBulkAction,
+  pagination = false,
+  onPageChange,
+  onPageSizeChange,
+  className,
+  tableClassName,
+  ...tableProps
+}) => {
+  const previousPageSizeRef = _react.useRef.call(void 0, 
+    pagination && typeof pagination === "object" ? _nullishCoalesce(_nullishCoalesce(pagination.pageSize, () => ( pagination.defaultPageSize)), () => ( 10)) : void 0
+  );
+  const [internalSearch, setInternalSearch] = _react.useState.call(void 0, _nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _ => _.defaultSearchValue]), () => ( "")));
+  const [internalFilters, setInternalFilters] = _react.useState.call(void 0, 
+    () => {
+      const initial = {};
+      _optionalChain([toolbar, 'optionalAccess', _2 => _2.filters, 'optionalAccess', _3 => _3.forEach, 'call', _4 => _4((filter) => {
+        if (filter.value === void 0) {
+          initial[filter.key] = _nullishCoalesce(filter.defaultValue, () => ( null));
+        }
+      })]);
+      return initial;
+    }
+  );
+  _react.useEffect.call(void 0, () => {
+    if (_optionalChain([toolbar, 'optionalAccess', _5 => _5.searchValue]) !== void 0) {
+      setInternalSearch(_nullishCoalesce(toolbar.searchValue, () => ( "")));
+    }
+  }, [_optionalChain([toolbar, 'optionalAccess', _6 => _6.searchValue])]);
+  _react.useEffect.call(void 0, () => {
+    if (pagination && typeof pagination === "object") {
+      previousPageSizeRef.current = _nullishCoalesce(_nullishCoalesce(pagination.pageSize, () => ( pagination.defaultPageSize)), () => ( 10));
+    }
+  }, [pagination]);
+  _react.useEffect.call(void 0, () => {
+    const filters = _optionalChain([toolbar, 'optionalAccess', _7 => _7.filters]);
+    if (!filters) return;
+    setInternalFilters((prev) => {
+      const next = { ...prev };
+      filters.forEach((filter) => {
+        if (filter.value === void 0 && !(filter.key in next)) {
+          next[filter.key] = _nullishCoalesce(filter.defaultValue, () => ( null));
+        }
+      });
+      return next;
+    });
+  }, [_optionalChain([toolbar, 'optionalAccess', _8 => _8.filters])]);
+  const searchValue = _optionalChain([toolbar, 'optionalAccess', _9 => _9.searchValue]) !== void 0 ? toolbar.searchValue : internalSearch;
+  const resolvedFilters = _react.useMemo.call(void 0, () => {
+    const next = {};
+    _optionalChain([toolbar, 'optionalAccess', _10 => _10.filters, 'optionalAccess', _11 => _11.forEach, 'call', _12 => _12((filter) => {
+      next[filter.key] = filter.value !== void 0 ? filter.value : _nullishCoalesce(_nullishCoalesce(internalFilters[filter.key], () => ( filter.defaultValue)), () => ( null));
+    })]);
+    return next;
+  }, [_optionalChain([toolbar, 'optionalAccess', _13 => _13.filters]), internalFilters]);
+  const hasSearch = Boolean(
+    toolbar && (toolbar.searchPlaceholder || toolbar.searchValue !== void 0 || toolbar.defaultSearchValue !== void 0 || toolbar.showSearchButton || toolbar.onSearchChange || toolbar.onSearch || onSearchChange || onSearch)
+  );
+  const hasFilters = Boolean(_optionalChain([toolbar, 'optionalAccess', _14 => _14.filters]) && toolbar.filters.length > 0);
+  const hasBulkActions = Boolean(_optionalChain([toolbar, 'optionalAccess', _15 => _15.bulkActions]) && toolbar.bulkActions.length > 0);
+  const selectedKeys = _nullishCoalesce(_nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _16 => _16.selectedKeys]), () => ( _optionalChain([tableProps, 'access', _17 => _17.rowSelection, 'optionalAccess', _18 => _18.selectedRowKeys]))), () => ( []));
+  const selectedCount = _nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _19 => _19.selectedCount]), () => ( selectedKeys.length));
+  const bulkLabel = _nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _20 => _20.bulkActionsLabel]), () => ( "\u5DF2\u9009\u62E9"));
+  const wrapperClasses = _react.useMemo.call(void 0, 
+    () => _tigercatcore.classNames.call(void 0, "tiger-data-table-with-toolbar flex flex-col gap-3", className),
+    [className]
+  );
+  const handleSearchChange = (value) => {
+    if (_optionalChain([toolbar, 'optionalAccess', _21 => _21.searchValue]) === void 0) {
+      setInternalSearch(value);
+    }
+    _optionalChain([onSearchChange, 'optionalCall', _22 => _22(value)]);
+    _optionalChain([toolbar, 'optionalAccess', _23 => _23.onSearchChange, 'optionalCall', _24 => _24(value)]);
+  };
+  const handleSearchSubmit = () => {
+    _optionalChain([onSearch, 'optionalCall', _25 => _25(_nullishCoalesce(searchValue, () => ( "")))]);
+    _optionalChain([toolbar, 'optionalAccess', _26 => _26.onSearch, 'optionalCall', _27 => _27(_nullishCoalesce(searchValue, () => ( "")))]);
+  };
+  const handleFilterSelect = (filter, value) => {
+    const nextFilters = {
+      ...resolvedFilters,
+      [filter.key]: value
+    };
+    if (filter.value === void 0) {
+      setInternalFilters((prev) => ({
+        ...prev,
+        [filter.key]: value
+      }));
+    }
+    _optionalChain([onFiltersChange, 'optionalCall', _28 => _28(nextFilters)]);
+    _optionalChain([toolbar, 'optionalAccess', _29 => _29.onFiltersChange, 'optionalCall', _30 => _30(nextFilters)]);
+  };
+  const handleBulkAction = (action) => {
+    const keys = _nullishCoalesce(selectedKeys, () => ( []));
+    _optionalChain([action, 'access', _31 => _31.onClick, 'optionalCall', _32 => _32(keys)]);
+    _optionalChain([onBulkAction, 'optionalCall', _33 => _33(action, keys)]);
+    _optionalChain([toolbar, 'optionalAccess', _34 => _34.onBulkAction, 'optionalCall', _35 => _35(action, keys)]);
+  };
+  const handleTablePageChange = ({ current, pageSize }) => {
+    _optionalChain([onPageChange, 'optionalCall', _36 => _36(current, pageSize)]);
+    if (previousPageSizeRef.current !== void 0 && previousPageSizeRef.current !== pageSize) {
+      _optionalChain([onPageSizeChange, 'optionalCall', _37 => _37(current, pageSize)]);
+    }
+    previousPageSizeRef.current = pageSize;
+  };
+  const renderToolbar = () => {
+    if (!hasSearch && !hasFilters && !hasBulkActions) return null;
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: "tiger-data-table-toolbar flex flex-wrap items-center gap-2 pb-3",
+        role: "toolbar",
+        "aria-label": "\u6570\u636E\u8868\u683C\u5DE5\u5177\u680F",
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 flex-wrap flex-1 min-w-0", children: [
+            hasSearch ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 w-full sm:w-auto sm:min-w-[200px] sm:max-w-[320px]", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _chunkZYJTHGQWjs.Input,
+                {
+                  type: "search",
+                  size: "sm",
+                  value: searchValue,
+                  placeholder: _nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _38 => _38.searchPlaceholder]), () => ( "\u641C\u7D22")),
+                  onChange: (event) => handleSearchChange(String(event.currentTarget.value)),
+                  onKeyDown: (event) => {
+                    if (event.key === "Enter") {
+                      handleSearchSubmit();
+                    }
+                  }
+                }
+              ),
+              _nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _39 => _39.showSearchButton]), () => ( true)) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _chunkGRXBGL6Qjs.Button,
+                {
+                  size: "sm",
+                  variant: "primary",
+                  className: "whitespace-nowrap shrink-0",
+                  onClick: handleSearchSubmit,
+                  disabled: !onSearch && !_optionalChain([toolbar, 'optionalAccess', _40 => _40.onSearch]),
+                  children: _nullishCoalesce(_optionalChain([toolbar, 'optionalAccess', _41 => _41.searchButtonText]), () => ( "\u641C\u7D22"))
+                }
+              ) : null
+            ] }) : null,
+            hasFilters ? _optionalChain([toolbar, 'optionalAccess', _42 => _42.filters, 'optionalAccess', _43 => _43.map, 'call', _44 => _44((filter) => {
+              const currentValue = resolvedFilters[filter.key];
+              const clearable = filter.clearable !== false;
+              return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "div",
+                {
+                  className: "w-full sm:w-auto sm:min-w-[120px] sm:max-w-[180px]",
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    _chunk6Z4LLPZAjs.Select,
+                    {
+                      size: "sm",
+                      options: filter.options.map((opt) => ({
+                        label: opt.label,
+                        value: opt.value
+                      })),
+                      value: _nullishCoalesce(currentValue, () => ( void 0)),
+                      placeholder: _nullishCoalesce(filter.placeholder, () => ( filter.label)),
+                      clearable,
+                      onChange: (value) => {
+                        handleFilterSelect(filter, _nullishCoalesce(value, () => ( null)));
+                      }
+                    }
+                  )
+                },
+                filter.key
+              );
+            })]) : null
+          ] }),
+          hasBulkActions ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 flex-wrap ml-auto shrink-0", children: [
+            selectedCount > 0 ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-sm text-[var(--tiger-text-muted,#6b7280)]", children: [
+              bulkLabel,
+              " ",
+              selectedCount,
+              " \u9879"
+            ] }) : null,
+            _optionalChain([toolbar, 'optionalAccess', _45 => _45.bulkActions, 'optionalAccess', _46 => _46.map, 'call', _47 => _47((action) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _chunkGRXBGL6Qjs.Button,
+              {
+                size: "sm",
+                variant: _nullishCoalesce(action.variant, () => ( "outline")),
+                disabled: action.disabled || selectedCount === 0,
+                onClick: () => handleBulkAction(action),
+                children: action.label
+              },
+              action.key
+            ))])
+          ] }) : null
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: wrapperClasses, "data-tiger-data-table-with-toolbar": true, children: [
+    renderToolbar(),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunk5EZWYEGJjs.Table,
+      {
+        ...tableProps,
+        pagination,
+        className: tableClassName,
+        onPageChange: handleTablePageChange
+      }
+    )
+  ] });
+};
+var DataTableWithToolbar_default = DataTableWithToolbar;
+
+
+
+
+exports.DataTableWithToolbar = DataTableWithToolbar; exports.DataTableWithToolbar_default = DataTableWithToolbar_default;

package/dist/chunk-2PCALG7V.js

@@ -0,0 +1,178 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Splitter.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var Splitter = ({
+  direction = "horizontal",
+  sizes: controlledSizes,
+  min = 0,
+  max,
+  gutterSize = 4,
+  disabled = false,
+  className,
+  style,
+  onResizeStart,
+  onResize,
+  onResizeEnd,
+  onSizesChange,
+  children
+}) => {
+  const containerRef = _react.useRef.call(void 0, null);
+  const dragSessionRef = _react.useRef.call(void 0, null);
+  const [paneSizes, setPaneSizes] = _react.useState.call(void 0, []);
+  const draggingRef = _react.useRef.call(void 0, null);
+  const cleanupDragSession = _react.useCallback.call(void 0, () => {
+    _optionalChain([dragSessionRef, 'access', _ => _.current, 'optionalAccess', _2 => _2.dispose, 'call', _3 => _3()]);
+    dragSessionRef.current = null;
+  }, []);
+  _react.useEffect.call(void 0, () => cleanupDragSession, [cleanupDragSession]);
+  _react.useEffect.call(void 0, () => {
+    const el = containerRef.current;
+    if (!el) return;
+    const paneCount2 = _react2.default.Children.count(children);
+    if (paneCount2 === 0) return;
+    const totalGutter = (paneCount2 - 1) * gutterSize;
+    const total = direction === "horizontal" ? el.clientWidth - totalGutter : el.clientHeight - totalGutter;
+    if (controlledSizes && controlledSizes.length > 0) {
+      if (total > 0) {
+        const sum = controlledSizes.reduce((a, b) => a + b, 0);
+        if (sum > 0) {
+          setPaneSizes(controlledSizes.map((s) => s / sum * total));
+        }
+      } else {
+        setPaneSizes([...controlledSizes]);
+      }
+    } else {
+      if (total > 0) {
+        const eachSize = total / paneCount2;
+        setPaneSizes(Array.from({ length: paneCount2 }, () => eachSize));
+      }
+    }
+  }, [children, direction, gutterSize, controlledSizes]);
+  const paneCount = paneSizes.length;
+  const mins = _react.useMemo.call(void 0, () => Array.from({ length: paneCount }, () => min), [paneCount, min]);
+  const maxes = _react.useMemo.call(void 0, () => Array.from({ length: paneCount }, () => max), [paneCount, max]);
+  const handleMouseDown = _react.useCallback.call(void 0, 
+    (index, e) => {
+      if (disabled) return;
+      e.preventDefault();
+      cleanupDragSession();
+      draggingRef.current = {
+        index,
+        startPos: direction === "horizontal" ? e.clientX : e.clientY,
+        startSizes: [...paneSizes]
+      };
+      _optionalChain([onResizeStart, 'optionalCall', _4 => _4({ index, sizes: [...paneSizes] })]);
+      dragSessionRef.current = _tigercatcore.createDocumentDragSession.call(void 0, {
+        startX: e.clientX,
+        startY: e.clientY,
+        ownerDocument: e.currentTarget.ownerDocument,
+        onMove: ({ currentX, currentY }) => {
+          const drag = draggingRef.current;
+          if (!drag) return;
+          const currentPos = direction === "horizontal" ? currentX : currentY;
+          const delta = currentPos - drag.startPos;
+          const newSizes = _tigercatcore.resizePanes.call(void 0, drag.startSizes, drag.index, delta, mins, maxes);
+          if (newSizes) {
+            setPaneSizes(newSizes);
+            _optionalChain([onSizesChange, 'optionalCall', _5 => _5(newSizes)]);
+            _optionalChain([onResize, 'optionalCall', _6 => _6({ index: drag.index, sizes: newSizes })]);
+          }
+        },
+        onEnd: ({ currentX, currentY }) => {
+          const drag = draggingRef.current;
+          if (drag) {
+            const currentPos = direction === "horizontal" ? currentX : currentY;
+            const delta = currentPos - drag.startPos;
+            const finalSizes = _nullishCoalesce(_tigercatcore.resizePanes.call(void 0, drag.startSizes, drag.index, delta, mins, maxes), () => ( drag.startSizes));
+            _optionalChain([onResizeEnd, 'optionalCall', _7 => _7({ index: drag.index, sizes: finalSizes })]);
+          }
+          draggingRef.current = null;
+          dragSessionRef.current = null;
+        }
+      });
+    },
+    [
+      disabled,
+      direction,
+      paneSizes,
+      mins,
+      maxes,
+      cleanupDragSession,
+      onResizeStart,
+      onResize,
+      onResizeEnd,
+      onSizesChange
+    ]
+  );
+  const handleKeyDown = _react.useCallback.call(void 0, 
+    (gutterIdx, e) => {
+      if (disabled) return;
+      const step = 10;
+      let delta = 0;
+      if (direction === "horizontal" && e.key === "ArrowLeft" || direction === "vertical" && e.key === "ArrowUp") {
+        delta = -step;
+      } else if (direction === "horizontal" && e.key === "ArrowRight" || direction === "vertical" && e.key === "ArrowDown") {
+        delta = step;
+      }
+      if (delta !== 0) {
+        e.preventDefault();
+        const newSizes = _tigercatcore.resizePanes.call(void 0, paneSizes, gutterIdx, delta, mins, maxes);
+        if (newSizes) {
+          setPaneSizes(newSizes);
+          _optionalChain([onSizesChange, 'optionalCall', _8 => _8(newSizes)]);
+          _optionalChain([onResize, 'optionalCall', _9 => _9({ index: gutterIdx, sizes: newSizes })]);
+        }
+      }
+    },
+    [disabled, direction, paneSizes, mins, maxes, onResize, onSizesChange]
+  );
+  const childArray = _react2.default.Children.toArray(children);
+  const containerClasses = _react.useMemo.call(void 0, 
+    () => _tigercatcore.classNames.call(void 0, _tigercatcore.getSplitterContainerClasses.call(void 0, direction, className)),
+    [direction, className]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: containerRef, className: containerClasses, style, "data-direction": direction, children: childArray.map((child, i) => {
+    const size = paneSizes[i];
+    const paneStyle = size != null ? _tigercatcore.getPaneStyle.call(void 0, size, direction) : void 0;
+    const isDragging = _optionalChain([draggingRef, 'access', _10 => _10.current, 'optionalAccess', _11 => _11.index]) === i;
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react2.default.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          className: "tiger-splitter-pane relative overflow-auto",
+          style: paneStyle,
+          "data-pane-index": i,
+          children: child
+        }
+      ),
+      i < childArray.length - 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          className: _tigercatcore.getSplitterGutterClasses.call(void 0, direction, !!isDragging, disabled),
+          role: "separator",
+          "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
+          tabIndex: disabled ? -1 : 0,
+          "data-gutter-index": i,
+          onMouseDown: (e) => handleMouseDown(i, e),
+          onKeyDown: (e) => handleKeyDown(i, e),
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.getSplitterGutterHandleClasses.call(void 0, direction) })
+        }
+      )
+    ] }, i);
+  }) });
+};
+var Splitter_default = Splitter;
+
+
+
+
+exports.Splitter = Splitter; exports.Splitter_default = Splitter_default;