@expcat/tigercat-react 1.0.7 → 1.1.0

package/dist/{chunk-H3JAEEEE.js → chunk-MOSVX52I.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk2XOFRGY6_js = require('./chunk-2XOFRGY6.js');
+var chunk6YBLWFP5_js = require('./chunk-6YBLWFP5.js');
 var React = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -18,12 +18,7 @@ var CardItem = React__default.default.memo(
     draggable,
     dragHintText,
     renderCard,
-    onDragStart,
-    onDragEnd,
-    onTouchStart,
-    onTouchMove,
-    onTouchEnd,
-    onKeyDown
+    dragCtrl
   }) => {
     const cardClasses = tigercatCore.classNames(
       tigercatCore.taskBoardCardClasses,
@@ -41,12 +36,16 @@ var CardItem = React__default.default.memo(
         "aria-grabbed": isKbGrabbed ? "true" : void 0,
         "data-tiger-taskboard-card": "",
         "data-tiger-taskboard-card-id": String(card.id),
-        onDragStart: (e) => onDragStart(e, card, column),
-        onDragEnd,
-        onTouchStart: (e) => onTouchStart(e, card, column),
-        onTouchMove,
-        onTouchEnd,
-        onKeyDown: (e) => onKeyDown(e, card, column),
+        onDragStart: (e) => {
+          if (e.dataTransfer) dragCtrl.cardDragStart(e.dataTransfer, card, column);
+        },
+        onDragEnd: () => dragCtrl.dragEnd(),
+        onTouchStart: (e) => dragCtrl.cardTouchStart(e.nativeEvent, e.currentTarget, card, column),
+        onTouchMove: (e) => dragCtrl.cardTouchMove(e.nativeEvent),
+        onTouchEnd: () => dragCtrl.cardTouchEnd(),
+        onKeyDown: (e) => {
+          if (dragCtrl.cardKeyDown(e.key, card, column)) e.preventDefault();
+        },
         children: renderCard ? renderCard(card, column.id) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-sm text-[var(--tiger-text,#1f2937)]", children: card.title }),
           card.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-xs text-[var(--tiger-text-muted,#6b7280)] line-clamp-2", children: card.description })
@@ -73,21 +72,7 @@ var ColumnItem = React__default.default.memo(
     renderEmptyColumn,
     onCardAdd,
     dragType,
-    onCardDragStart,
-    onCardDragOver,
-    onCardDrop,
-    onDragEnd,
-    onDragLeave,
-    onColumnDragStart,
-    onColumnDragOver,
-    onColumnDrop,
-    onCardTouchStart,
-    onCardTouchMove,
-    onCardTouchEnd,
-    onColumnTouchStart,
-    onColumnTouchMove,
-    onColumnTouchEnd,
-    onCardKeyDown,
+    dragCtrl,
     dragStateId,
     kbDragStateId,
     showCardCount,
@@ -120,12 +105,7 @@ var ColumnItem = React__default.default.memo(
               draggable,
               dragHintText: labels.dragHintText,
               renderCard: renderCardProp,
-              onDragStart: onCardDragStart,
-              onDragEnd,
-              onTouchStart: onCardTouchStart,
-              onTouchMove: onCardTouchMove,
-              onTouchEnd: onCardTouchEnd,
-              onKeyDown: onCardKeyDown
+              dragCtrl
             },
             String(card.id)
           )
@@ -145,19 +125,27 @@ var ColumnItem = React__default.default.memo(
         className: colClasses,
         "data-tiger-taskboard-column": "",
         "data-tiger-taskboard-column-id": String(column.id),
-        onDragOver: dragType === "column" ? onColumnDragOver : void 0,
-        onDrop: dragType === "column" ? onColumnDrop : void 0,
+        onDragOver: dragType === "column" ? (e) => {
+          e.preventDefault();
+          dragCtrl.columnDragOver();
+        } : void 0,
+        onDrop: dragType === "column" ? (e) => {
+          e.preventDefault();
+          if (e.dataTransfer) dragCtrl.columnDrop(e.dataTransfer, e.clientX);
+        } : void 0,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: tigercatCore.taskBoardColumnHeaderClasses,
               draggable: columnDraggable,
-              onDragStart: (e) => onColumnDragStart(e, column, colIndex),
-              onDragEnd,
-              onTouchStart: (e) => onColumnTouchStart(e, column, colIndex),
-              onTouchMove: onColumnTouchMove,
-              onTouchEnd: onColumnTouchEnd,
+              onDragStart: (e) => {
+                if (e.dataTransfer) dragCtrl.columnDragStart(e.dataTransfer, column, colIndex);
+              },
+              onDragEnd: () => dragCtrl.dragEnd(),
+              onTouchStart: (e) => dragCtrl.columnTouchStart(e.nativeEvent, e.currentTarget, column, colIndex),
+              onTouchMove: (e) => dragCtrl.columnTouchMove(e.nativeEvent),
+              onTouchEnd: () => dragCtrl.columnTouchEnd(),
               style: columnDraggable ? { cursor: "grab" } : void 0,
               children: renderColumnHeader ? renderColumnHeader(column) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: wipOver ? tigercatCore.taskBoardWipExceededClasses : void 0, children: [
@@ -190,9 +178,15 @@ var ColumnItem = React__default.default.memo(
               className: tigercatCore.taskBoardColumnBodyClasses,
               role: "list",
               "aria-label": column.title,
-              onDragOver: (e) => onCardDragOver(e, column),
-              onDrop: (e) => onCardDrop(e, column),
-              onDragLeave,
+              onDragOver: (e) => {
+                e.preventDefault();
+                dragCtrl.cardDragOver(e.clientY, e.currentTarget, column);
+              },
+              onDrop: (e) => {
+                e.preventDefault();
+                if (e.dataTransfer) dragCtrl.cardDrop(e.dataTransfer, column);
+              },
+              onDragLeave: (e) => dragCtrl.dragLeave(e.currentTarget, e.relatedTarget),
               children: cardsContent
             }
           ),
@@ -252,7 +246,7 @@ var TaskBoard = ({
   style,
   ...rest
 }) => {
-  const config = chunk2XOFRGY6_js.useTigerConfig();
+  const config = chunk6YBLWFP5_js.useTigerConfig();
   const mergedLocale = React.useMemo(
     () => tigercatCore.mergeTigerLocale(config.locale, locale),
     [config.locale, locale]
@@ -278,13 +272,8 @@ var TaskBoard = ({
     },
     [onColumnsChange]
   );
-  const [dragState, setDragState] = React.useState(null);
-  const [dropTargetColumnId, setDropTargetColumnId] = React.useState(null);
-  const [dropIdx, setDropIdx] = React.useState(-1);
-  const [kbDragState, setKbDragState] = React.useState(null);
+  const [dragSnap, setDragSnap] = React.useState(tigercatCore.createDefaultDragSnapshot);
   const boardRef = React.useRef(null);
-  const touchTrackerRef = React.useRef(null);
-  const touchRafRef = React.useRef(0);
   const beforeCardMoveRef = React.useRef(beforeCardMove);
   beforeCardMoveRef.current = beforeCardMove;
   const beforeColumnMoveRef = React.useRef(beforeColumnMove);
@@ -295,17 +284,6 @@ var TaskBoard = ({
   onColumnMoveRef.current = onColumnMove;
   const enforceWipLimitRef = React.useRef(enforceWipLimit);
   enforceWipLimitRef.current = enforceWipLimit;
-  React.useEffect(() => {
-    if (typeof window !== "undefined" && ("ontouchstart" in window || navigator.maxTouchPoints > 0)) {
-      touchTrackerRef.current = tigercatCore.createTouchDragTracker();
-    }
-    return () => cancelAnimationFrame(touchRafRef.current);
-  }, []);
-  const resetDrag = React.useCallback(() => {
-    setDragState(null);
-    setDropTargetColumnId(null);
-    setDropIdx(-1);
-  }, []);
   const applyCardMove = React.useCallback(
     async (cardId, fromColumnId, toColumnId, toIdx) => {
       const result = tigercatCore.moveCard(columnsRef.current, cardId, fromColumnId, toColumnId, toIdx, {
@@ -335,187 +313,35 @@ var TaskBoard = ({
     },
     [updateColumns]
   );
-  const handleCardDragStart = React.useCallback(
-    (e, card, column) => {
-      if (!draggable) return;
-      const idx = column.cards.findIndex((c) => c.id === card.id);
-      tigercatCore.setDragData(e.dataTransfer, tigercatCore.createCardDragData(card.id, column.id, idx));
-      setDragState({ type: "card", id: card.id, fromColumnId: column.id, fromIndex: idx });
-    },
-    [draggable]
-  );
-  const handleCardDragOver = React.useCallback(
-    (e, column) => {
-      e.preventDefault();
-      if (!dragState || dragState.type !== "card") return;
-      setDropTargetColumnId(column.id);
-      const target = e.currentTarget;
-      const cardEls = target.querySelectorAll("[data-tiger-taskboard-card]");
-      const rects = [];
-      cardEls.forEach((el) => rects.push(el.getBoundingClientRect()));
-      setDropIdx(tigercatCore.getDropIndex(e.clientY, rects));
-    },
-    [dragState]
-  );
-  const handleCardDrop = React.useCallback(
-    (e, column) => {
-      e.preventDefault();
-      const data = tigercatCore.parseDragData(e.dataTransfer);
-      if (!data || data.type !== "card") return;
-      applyCardMove(
-        data.cardId,
-        data.columnId,
-        column.id,
-        dropIdx >= 0 ? dropIdx : column.cards.length
-      );
-      resetDrag();
-    },
-    [dropIdx, applyCardMove, resetDrag]
-  );
-  const handleColumnDragStart = React.useCallback(
-    (e, column, index) => {
-      if (!columnDraggable) return;
-      tigercatCore.setDragData(e.dataTransfer, tigercatCore.createColumnDragData(column.id, index));
-      setDragState({ type: "column", id: column.id, fromIndex: index });
-    },
-    [columnDraggable]
-  );
-  const handleColumnDragOver = React.useCallback(
-    (e) => {
-      if (!dragState || dragState.type !== "column") return;
-      e.preventDefault();
-    },
-    [dragState]
-  );
-  const handleColumnDrop = React.useCallback(
-    (e) => {
-      e.preventDefault();
-      const data = tigercatCore.parseDragData(e.dataTransfer);
-      if (!data || data.type !== "column") return;
-      const colEls = boardRef.current?.querySelectorAll("[data-tiger-taskboard-column]");
-      if (!colEls) return;
-      const rects = [];
-      colEls.forEach((el) => rects.push(el.getBoundingClientRect()));
-      const toIdx = tigercatCore.getColumnDropIndex(e.clientX, rects);
-      applyColumnMove(data.index, toIdx);
-      resetDrag();
-    },
-    [applyColumnMove, resetDrag]
-  );
-  const handleDragEnd = React.useCallback(() => resetDrag(), [resetDrag]);
-  const handleDragLeave = React.useCallback(
-    (e) => {
-      const related = e.relatedTarget;
-      if (!related || !e.currentTarget.contains(related)) {
-        if (dragState?.type === "card") {
-          setDropTargetColumnId(null);
-          setDropIdx(-1);
-        }
-      }
-    },
-    [dragState]
-  );
-  const handleTouchStart = React.useCallback(
-    (e, card, column) => {
-      if (!draggable || !touchTrackerRef.current) return;
-      const idx = column.cards.findIndex((c) => c.id === card.id);
-      touchTrackerRef.current.onTouchStart(e.nativeEvent, e.currentTarget);
-      setDragState({ type: "card", id: card.id, fromColumnId: column.id, fromIndex: idx });
-    },
-    [draggable]
-  );
-  const handleTouchMove = React.useCallback(
-    (e) => {
-      if (!touchTrackerRef.current || !dragState) return;
-      touchTrackerRef.current.onTouchMove(e.nativeEvent);
-      cancelAnimationFrame(touchRafRef.current);
-      touchRafRef.current = requestAnimationFrame(() => {
-        const st = touchTrackerRef.current.getState();
-        if (dragState?.type === "card") {
-          const colEl = tigercatCore.findColumnFromPoint(st.currentX, st.currentY, boardRef.current);
-          if (colEl) {
-            const colId = colEl.getAttribute("data-tiger-taskboard-column-id");
-            setDropTargetColumnId(colId ?? null);
-            const cardEls = colEl.querySelectorAll("[data-tiger-taskboard-card]");
-            const rects = [];
-            cardEls.forEach((el) => rects.push(el.getBoundingClientRect()));
-            setDropIdx(tigercatCore.getDropIndex(st.currentY, rects));
-          }
-        }
-      });
-    },
-    [dragState]
-  );
-  const handleTouchEnd = React.useCallback(() => {
-    if (!touchTrackerRef.current || !dragState) return;
-    touchTrackerRef.current.onTouchEnd();
-    if (dragState.type === "card" && dropTargetColumnId != null) {
-      applyCardMove(
-        dragState.id,
-        dragState.fromColumnId,
-        dropTargetColumnId,
-        dropIdx >= 0 ? dropIdx : 0
-      );
-    }
-    resetDrag();
-  }, [dragState, dropIdx, dropTargetColumnId, applyCardMove, resetDrag]);
-  const handleColumnTouchStart = React.useCallback(
-    (e, column, index) => {
-      if (!columnDraggable || !touchTrackerRef.current) return;
-      touchTrackerRef.current.onTouchStart(e.nativeEvent, e.currentTarget);
-      setDragState({ type: "column", id: column.id, fromIndex: index });
-    },
-    [columnDraggable]
-  );
-  const handleColumnTouchMove = React.useCallback(
-    (e) => {
-      if (!touchTrackerRef.current || !dragState || dragState.type !== "column") return;
-      touchTrackerRef.current.onTouchMove(e.nativeEvent);
-    },
-    [dragState]
-  );
-  const handleColumnTouchEnd = React.useCallback(() => {
-    if (!touchTrackerRef.current || !dragState || dragState.type !== "column") return;
-    const st = touchTrackerRef.current.onTouchEnd();
-    const colEls = boardRef.current?.querySelectorAll("[data-tiger-taskboard-column]");
-    if (!colEls) {
-      resetDrag();
-      return;
-    }
-    const rects = [];
-    colEls.forEach((el) => rects.push(el.getBoundingClientRect()));
-    const toIdx = tigercatCore.getColumnDropIndex(st.currentX, rects);
-    applyColumnMove(dragState.fromIndex, Math.min(toIdx, columnsRef.current.length - 1));
-    resetDrag();
-  }, [dragState, applyColumnMove, resetDrag]);
-  const handleCardKeyDown = React.useCallback(
-    (e, card, column) => {
-      if (!draggable) return;
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        if (!kbDragState) {
-          const idx = column.cards.findIndex((c) => c.id === card.id);
-          setKbDragState({ type: "card", id: card.id, fromColumnId: column.id, fromIndex: idx });
-        } else {
-          const cardIdx = column.cards.findIndex((c) => c.id === card.id);
-          if (kbDragState.fromColumnId !== void 0) {
-            applyCardMove(kbDragState.id, kbDragState.fromColumnId, column.id, cardIdx);
-          }
-          setKbDragState(null);
-        }
-        return;
-      }
-      if (e.key === "Escape" && kbDragState) {
-        e.preventDefault();
-        setKbDragState(null);
-      }
-    },
-    [draggable, kbDragState, applyCardMove]
-  );
+  const dragCtrlRef = React.useRef(null);
+  if (!dragCtrlRef.current) {
+    dragCtrlRef.current = tigercatCore.createTaskBoardDragController(
+      {
+        onStateChange: setDragSnap,
+        applyCardMove: (...args) => applyCardMoveRef.current(...args),
+        applyColumnMove: (...args) => applyColumnMoveRef.current(...args),
+        getBoardEl: () => boardRef.current,
+        getColumnCount: () => columnsRef.current.length
+      },
+      { draggable, columnDraggable }
+    );
+  }
+  const dragCtrl = dragCtrlRef.current;
+  const applyCardMoveRef = React.useRef(applyCardMove);
+  applyCardMoveRef.current = applyCardMove;
+  const applyColumnMoveRef = React.useRef(applyColumnMove);
+  applyColumnMoveRef.current = applyColumnMove;
+  React.useEffect(() => {
+    dragCtrl.setOptions({ draggable, columnDraggable });
+  }, [draggable, columnDraggable, dragCtrl]);
+  React.useEffect(() => {
+    dragCtrl.init();
+    return () => dragCtrl.dispose();
+  }, [dragCtrl]);
   const wrapperClasses = React.useMemo(() => tigercatCore.classNames(tigercatCore.taskBoardBaseClasses, className), [className]);
-  const dragType = dragState?.type ?? null;
-  const dragStateId = dragState?.type === "card" ? dragState.id : null;
-  const kbDragStateId = kbDragState?.id ?? null;
+  const dragType = dragSnap.drag?.type ?? null;
+  const dragStateId = dragSnap.drag?.type === "card" ? dragSnap.drag.id : null;
+  const kbDragStateId = dragSnap.kbDrag?.id ?? null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -528,8 +354,8 @@ var TaskBoard = ({
       ...rest,
       children: [
         visibleColumns.map((col, i) => {
-          const isDropTarget = dragState?.type === "card" && dropTargetColumnId === col.id;
-          const isColDragging = dragState?.type === "column" && dragState.id === col.id;
+          const isDropTarget = dragSnap.drag?.type === "card" && dragSnap.dropTargetColumnId === col.id;
+          const isColDragging = dragSnap.drag?.type === "column" && dragSnap.drag.id === col.id;
           return /* @__PURE__ */ jsxRuntime.jsx(
             ColumnItem,
             {
@@ -537,7 +363,7 @@ var TaskBoard = ({
               colIndex: i,
               isDropTarget,
               isColDragging,
-              dropIdx: isDropTarget ? dropIdx : -1,
+              dropIdx: isDropTarget ? dragSnap.dropIndex : -1,
               draggable,
               columnDraggable,
               labels,
@@ -547,21 +373,7 @@ var TaskBoard = ({
               renderEmptyColumn,
               onCardAdd,
               dragType,
-              onCardDragStart: handleCardDragStart,
-              onCardDragOver: handleCardDragOver,
-              onCardDrop: handleCardDrop,
-              onDragEnd: handleDragEnd,
-              onDragLeave: handleDragLeave,
-              onColumnDragStart: handleColumnDragStart,
-              onColumnDragOver: handleColumnDragOver,
-              onColumnDrop: handleColumnDrop,
-              onCardTouchStart: handleTouchStart,
-              onCardTouchMove: handleTouchMove,
-              onCardTouchEnd: handleTouchEnd,
-              onColumnTouchStart: handleColumnTouchStart,
-              onColumnTouchMove: handleColumnTouchMove,
-              onColumnTouchEnd: handleColumnTouchEnd,
-              onCardKeyDown: handleCardKeyDown,
+              dragCtrl,
               dragStateId,
               kbDragStateId,
               showCardCount,

package/dist/{chunk-2GKTVAAB.js → chunk-MPO7Y76D.js}

@@ -1,10 +1,10 @@
 'use strict';
 
+var chunkPGBKMW4Q_js = require('./chunk-PGBKMW4Q.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/Loading.tsx
 var Loading = ({
   variant = "spinner",
   size = "md",
@@ -14,14 +14,16 @@ var Loading = ({
   delay = 0,
   background = "rgba(255, 255, 255, 0.9)",
   customColor,
+  lockScroll = true,
   className,
   style,
   ...props
 }) => {
+  const [visible, setVisible] = react.useState(delay <= 0);
   react.useEffect(() => {
     tigercatCore.injectLoadingAnimationStyles();
   }, []);
-  const [visible, setVisible] = react.useState(delay <= 0);
+  chunkPGBKMW4Q_js.useBodyScrollLock({ enabled: fullscreen && visible && lockScroll });
   react.useEffect(() => {
     if (delay <= 0) {
       setVisible(true);
@@ -93,7 +95,7 @@ var Loading = ({
   if (!visible) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const loadingNode = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: containerClasses,
@@ -109,6 +111,10 @@ var Loading = ({
       ]
     }
   );
+  if (fullscreen) {
+    return chunkPGBKMW4Q_js.renderBodyPortal(loadingNode);
+  }
+  return loadingNode;
 };
 
 exports.Loading = Loading;

package/dist/{chunk-JLM4LBUS.js → chunk-MU6Z5DCI.js}

@@ -1,6 +1,7 @@
 'use strict';
 
-var chunkAJQPGAYL_js = require('./chunk-AJQPGAYL.js');
+var chunkJFOSDCCG_js = require('./chunk-JFOSDCCG.js');
+var chunkPGBKMW4Q_js = require('./chunk-PGBKMW4Q.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -24,7 +25,7 @@ var Tooltip = ({
   if (!tooltipIdRef.current) tooltipIdRef.current = createTooltipId();
   const tooltipId = tooltipIdRef.current;
   const describedBy = content != null ? tooltipId : void 0;
-  const { currentVisible, containerRef, triggerRef, floatingRef, floatingStyles, triggerHandlers } = chunkAJQPGAYL_js.usePopup({ open, defaultOpen, disabled, trigger, placement, offset, onOpenChange });
+  const { currentVisible, containerRef, triggerRef, floatingRef, floatingStyles, triggerHandlers } = chunkJFOSDCCG_js.usePopup({ open, defaultOpen, disabled, trigger, placement, offset, onOpenChange });
   const containerClasses = react.useMemo(
     () => tigercatCore.classNames(tigercatCore.getTooltipContainerClasses(), className),
     [className]
@@ -43,7 +44,9 @@ var Tooltip = ({
         children
       }
     ),
-    currentVisible && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: floatingRef, style: floatingStyles, "aria-hidden": false, children: /* @__PURE__ */ jsxRuntime.jsx("div", { id: tooltipId, role: "tooltip", className: contentClasses, children: content }) })
+    currentVisible && chunkPGBKMW4Q_js.renderBodyPortal(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: floatingRef, style: floatingStyles, "aria-hidden": false, children: /* @__PURE__ */ jsxRuntime.jsx("div", { id: tooltipId, role: "tooltip", className: contentClasses, children: content }) })
+    )
   ] });
 };
 

package/dist/{chunk-5MALB34H.js → chunk-MUUOE2NT.js}

@@ -1,10 +1,9 @@
 'use strict';
 
-var chunkXO6NSGV3_js = require('./chunk-XO6NSGV3.js');
-var chunkNZNSUKPT_js = require('./chunk-NZNSUKPT.js');
-var chunk3GW3UAKB_js = require('./chunk-3GW3UAKB.js');
+var chunkL5HVRTUO_js = require('./chunk-L5HVRTUO.js');
+var chunk2HDQRMGU_js = require('./chunk-2HDQRMGU.js');
 var chunkZYJTHGQW_js = require('./chunk-ZYJTHGQW.js');
-var chunkBCNKTT5C_js = require('./chunk-BCNKTT5C.js');
+var chunkGRXBGL6Q_js = require('./chunk-GRXBGL6Q.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -22,6 +21,9 @@ var DataTableWithToolbar = ({
   tableClassName,
   ...tableProps
 }) => {
+  const previousPageSizeRef = react.useRef(
+    pagination && typeof pagination === "object" ? pagination.pageSize ?? pagination.defaultPageSize ?? 10 : void 0
+  );
   const [internalSearch, setInternalSearch] = react.useState(toolbar?.defaultSearchValue ?? "");
   const [internalFilters, setInternalFilters] = react.useState(
     () => {
@@ -39,6 +41,11 @@ var DataTableWithToolbar = ({
       setInternalSearch(toolbar.searchValue ?? "");
     }
   }, [toolbar?.searchValue]);
+  react.useEffect(() => {
+    if (pagination && typeof pagination === "object") {
+      previousPageSizeRef.current = pagination.pageSize ?? pagination.defaultPageSize ?? 10;
+    }
+  }, [pagination]);
   react.useEffect(() => {
     const filters = toolbar?.filters;
     if (!filters) return;
@@ -103,9 +110,16 @@ var DataTableWithToolbar = ({
     onBulkAction?.(action, keys);
     toolbar?.onBulkAction?.(action, keys);
   };
+  const handleTablePageChange = ({ current, pageSize }) => {
+    onPageChange?.(current, pageSize);
+    if (previousPageSizeRef.current !== void 0 && previousPageSizeRef.current !== pageSize) {
+      onPageSizeChange?.(current, pageSize);
+    }
+    previousPageSizeRef.current = pageSize;
+  };
   const renderToolbar = () => {
     if (!hasSearch && !hasFilters && !hasBulkActions) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tiger-data-table-toolbar flex flex-wrap items-center gap-2 pb-3", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("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("div", { className: "flex items-center gap-2 flex-wrap flex-1 min-w-0", children: [
         hasSearch ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full sm:w-auto sm:min-w-[200px] sm:max-w-[320px]", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -124,7 +138,7 @@ var DataTableWithToolbar = ({
             }
           ),
           toolbar?.showSearchButton ?? true ? /* @__PURE__ */ jsxRuntime.jsx(
-            chunkBCNKTT5C_js.Button,
+            chunkGRXBGL6Q_js.Button,
             {
               size: "sm",
               variant: "primary",
@@ -143,7 +157,7 @@ var DataTableWithToolbar = ({
             {
               className: "w-full sm:w-auto sm:min-w-[120px] sm:max-w-[180px]",
               children: /* @__PURE__ */ jsxRuntime.jsx(
-                chunkNZNSUKPT_js.Select,
+                chunk2HDQRMGU_js.Select,
                 {
                   size: "sm",
                   options: filter.options.map((opt) => ({
@@ -171,7 +185,7 @@ var DataTableWithToolbar = ({
           " \u9879"
         ] }) : null,
         toolbar?.bulkActions?.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
-          chunkBCNKTT5C_js.Button,
+          chunkGRXBGL6Q_js.Button,
           {
             size: "sm",
             variant: action.variant ?? "outline",
@@ -184,11 +198,17 @@ var DataTableWithToolbar = ({
       ] }) : null
     ] });
   };
-  const showPagination = pagination && typeof pagination === "object";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, "data-tiger-data-table-with-toolbar": true, children: [
     renderToolbar(),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkXO6NSGV3_js.Table, { ...tableProps, pagination: false, className: tableClassName }),
-    showPagination ? /* @__PURE__ */ jsxRuntime.jsx(chunk3GW3UAKB_js.Pagination, { ...pagination, onChange: onPageChange, onPageSizeChange }) : null
+    /* @__PURE__ */ jsxRuntime.jsx(
+      chunkL5HVRTUO_js.Table,
+      {
+        ...tableProps,
+        pagination,
+        className: tableClassName,
+        onPageChange: handleTablePageChange
+      }
+    )
   ] });
 };
 var DataTableWithToolbar_default = DataTableWithToolbar;

package/dist/chunk-N2JYU4JI.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Segmented.tsx
+var Segmented = ({
+  value,
+  options = [],
+  disabled = false,
+  size = "md",
+  block = false,
+  className,
+  onChange
+}) => {
+  function handleSelect(opt) {
+    if (opt.disabled || disabled) return;
+    if (opt.value === value) return;
+    onChange?.(opt.value);
+  }
+  const selectedIndex = options.findIndex((opt) => opt.value === value);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: tigercatCore.classNames(tigercatCore.getSegmentedContainerClasses(size, block), className),
+      style: tigercatCore.getSegmentedContainerStyle(options.length),
+      role: "radiogroup",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-tiger-segmented-indicator": "true",
+            "aria-hidden": "true",
+            className: tigercatCore.getSegmentedIndicatorClasses(size),
+            style: tigercatCore.getSegmentedIndicatorStyle(selectedIndex, options.length, size)
+          }
+        ),
+        options.map((opt) => {
+          const selected = opt.value === value;
+          const isDisabled = !!opt.disabled || disabled;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
+            {
+              className: tigercatCore.classNames(
+                tigercatCore.getSegmentedOptionClasses(size, selected, isDisabled),
+                block ? "flex-1 text-center" : ""
+              ),
+              role: "radio",
+              "aria-checked": selected,
+              "aria-disabled": isDisabled,
+              onClick: () => handleSelect(opt),
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: opt.label })
+            },
+            opt.value
+          );
+        })
+      ]
+    }
+  );
+};
+
+exports.Segmented = Segmented;