@expcat/tigercat-react 1.0.4 → 1.1.0

package/dist/{chunk-SWF7GJYT.mjs → chunk-VHW7NWXM.mjs}

@@ -1,7 +1,7 @@
-import { Tabs, TabPane } from './chunk-6744DTEB.mjs';
-import { List } from './chunk-VAQDUVBP.mjs';
-import { Button } from './chunk-3KMKMAE3.mjs';
-import { Loading } from './chunk-AVUXDQYO.mjs';
+import { Tabs, TabPane } from './chunk-JSUDEK2D.mjs';
+import { List } from './chunk-LY2OTQ4E.mjs';
+import { Button } from './chunk-GKJNQUTW.mjs';
+import { Loading } from './chunk-Z5B7VNEG.mjs';
 import { Text } from './chunk-HLS4CHWX.mjs';
 import { Card } from './chunk-P6E3DILH.mjs';
 import { useMemo, useState, useEffect } from 'react';
@@ -71,7 +71,7 @@ var NotificationCenter = ({
       setInternalGroupKey(keys[0]);
     }
   }, [activeGroupKey, currentGroupKey, resolvedGroups]);
-  const currentGroup = useMemo(() => {
+  useMemo(() => {
     if (resolvedGroups.length === 0) return void 0;
     if (currentGroupKey === void 0) return resolvedGroups[0];
     const index = resolvedGroups.findIndex(
@@ -79,7 +79,6 @@ var NotificationCenter = ({
     );
     return index >= 0 ? resolvedGroups[index] : resolvedGroups[0];
   }, [currentGroupKey, resolvedGroups]);
-  currentGroup?.items ?? [];
   const [readStateOverrides, setReadStateOverrides] = useState(
     () => /* @__PURE__ */ new Map()
   );
@@ -108,9 +107,15 @@ var NotificationCenter = ({
     );
     return index >= 0 ? effectiveGroups[index] : effectiveGroups[0];
   }, [currentGroupKey, effectiveGroups]);
-  const effectiveCurrentGroupItems = effectiveCurrentGroup?.items ?? [];
+  const effectiveCurrentGroupItems = useMemo(
+    () => effectiveCurrentGroup?.items ?? [],
+    [effectiveCurrentGroup]
+  );
   const effectiveItems = useMemo(() => applyReadOverrides(items), [items, readStateOverrides]);
-  const hasUnread = effectiveCurrentGroupItems.some((item) => !item.read);
+  const hasUnread = useMemo(
+    () => effectiveCurrentGroupItems.some((item) => !item.read),
+    [effectiveCurrentGroupItems]
+  );
   const totalUnread = useMemo(() => {
     const allItems = effectiveGroups.flatMap((group) => group.items);
     if (allItems.length === 0) return effectiveItems.filter((item) => !item.read).length;
@@ -120,6 +125,32 @@ var NotificationCenter = ({
     () => classNames("tiger-notification-center", "w-full", "flex", "flex-col", className),
     [className]
   );
+  const filterButtons = useMemo(
+    () => [
+      { key: "all", label: allLabel },
+      { key: "unread", label: unreadLabel },
+      { key: "read", label: readLabel }
+    ],
+    [allLabel, unreadLabel, readLabel]
+  );
+  const groupTabData = useMemo(
+    () => resolvedGroups.map((group, index) => {
+      const effectiveGroup = effectiveGroups.find(
+        (eg, ei) => getGroupKey(eg, ei) === getGroupKey(group, index)
+      );
+      const groupItems = effectiveGroup?.items ?? group.items;
+      const unreadCount = groupItems.filter((item) => !item.read).length;
+      const labelBase = group.title || String(group.key ?? index);
+      const label = unreadCount > 0 ? `${labelBase} (${unreadCount})` : labelBase;
+      const filteredItems = filterItems(groupItems, currentReadFilter);
+      return { key: getGroupKey(group, index), label, filteredItems };
+    }),
+    [resolvedGroups, effectiveGroups, currentReadFilter]
+  );
+  const filteredFlatItems = useMemo(
+    () => filterItems(effectiveItems, currentReadFilter),
+    [effectiveItems, currentReadFilter]
+  );
   const handleGroupChange = (key) => {
     if (activeGroupKey === void 0) {
       setInternalGroupKey(key);
@@ -195,59 +226,55 @@ var NotificationCenter = ({
       renderItem
     }
   );
-  const filterButtons = [
-    { key: "all", label: allLabel },
-    { key: "unread", label: unreadLabel },
-    { key: "read", label: readLabel }
-  ];
-  const content = loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(Loading, { text: loadingText }) }) : resolvedGroups.length > 0 ? /* @__PURE__ */ jsx("div", { className: "-mx-4 -mb-4", children: /* @__PURE__ */ jsx(Tabs, { type: "line", size: "small", activeKey: currentGroupKey, onChange: handleGroupChange, children: resolvedGroups.map((group, index) => {
-    const effectiveGroup = effectiveGroups.find(
-      (eg, ei) => getGroupKey(eg, ei) === getGroupKey(group, index)
-    );
-    const groupItems = effectiveGroup?.items ?? group.items;
-    const unreadCount = groupItems.filter((item) => !item.read).length;
-    const labelBase = group.title || String(group.key ?? index);
-    const label = unreadCount > 0 ? `${labelBase} (${unreadCount})` : labelBase;
-    return /* @__PURE__ */ jsx(
-      TabPane,
-      {
-        tabKey: getGroupKey(group, index),
-        label,
-        children: /* @__PURE__ */ jsx("div", { className: "max-h-[380px] overflow-y-auto", children: renderList(filterItems(groupItems, currentReadFilter)) })
-      },
-      String(getGroupKey(group, index))
-    );
-  }) }) }) : /* @__PURE__ */ jsx("div", { className: "-mx-4 -mb-4 max-h-[380px] overflow-y-auto", children: renderList(filterItems(effectiveItems, currentReadFilter)) });
-  return /* @__PURE__ */ jsx("div", { className: wrapperClasses, ...props, "data-tiger-notification-center": true, children: /* @__PURE__ */ jsx(
-    Card,
+  const content = loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(Loading, { text: loadingText }) }) : resolvedGroups.length > 0 ? /* @__PURE__ */ jsx("div", { className: "-mx-4 -mb-4", children: /* @__PURE__ */ jsx(Tabs, { type: "line", size: "small", activeKey: currentGroupKey, onChange: handleGroupChange, children: groupTabData.map((tab) => /* @__PURE__ */ jsx(
+    TabPane,
+    {
+      tabKey: tab.key,
+      label: tab.label,
+      children: /* @__PURE__ */ jsx("div", { className: "max-h-[380px] overflow-y-auto", children: renderList(tab.filteredItems) })
+    },
+    String(tab.key)
+  )) }) }) : /* @__PURE__ */ jsx("div", { className: "-mx-4 -mb-4 max-h-[380px] overflow-y-auto", children: renderList(filteredFlatItems) });
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      variant: "bordered",
-      className: "w-full",
-      header: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
-            /* @__PURE__ */ jsx(Text, { tag: "div", size: "base", weight: "bold", children: title }),
-            totalUnread > 0 ? /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-semibold rounded-full bg-[var(--tiger-primary,#2563eb)] text-white", children: totalUnread }) : null
+      className: wrapperClasses,
+      role: props.role ?? "region",
+      "aria-label": props["aria-label"] ?? (props["aria-labelledby"] ? void 0 : title),
+      ...props,
+      "data-tiger-notification-center": true,
+      children: /* @__PURE__ */ jsx(
+        Card,
+        {
+          variant: "bordered",
+          className: "w-full",
+          header: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+                /* @__PURE__ */ jsx(Text, { tag: "div", size: "base", weight: "bold", children: title }),
+                totalUnread > 0 ? /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-semibold rounded-full bg-[var(--tiger-primary,#2563eb)] text-white", children: totalUnread }) : null
+              ] }),
+              /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", disabled: !hasUnread, onClick: handleMarkAllRead, children: markAllReadText })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "inline-flex rounded-[var(--tiger-radius-sm,0.375rem)] border border-[var(--tiger-border,#e5e7eb)] overflow-hidden self-start", children: filterButtons.map((option) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: classNames(
+                  "px-3 py-1 text-xs font-medium transition-colors",
+                  "border-r border-[var(--tiger-border,#e5e7eb)] last:border-r-0",
+                  currentReadFilter === option.key ? "bg-[var(--tiger-primary,#2563eb)] text-white" : "bg-[var(--tiger-surface,#ffffff)] text-[var(--tiger-text-muted,#6b7280)] hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
+                ),
+                onClick: () => handleReadFilterChange(option.key),
+                children: option.label
+              },
+              option.key
+            )) })
           ] }),
-          /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", disabled: !hasUnread, onClick: handleMarkAllRead, children: markAllReadText })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "inline-flex rounded-md border border-[var(--tiger-border,#e5e7eb)] overflow-hidden self-start", children: filterButtons.map((option) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: classNames(
-              "px-3 py-1 text-xs font-medium transition-colors",
-              "border-r border-[var(--tiger-border,#e5e7eb)] last:border-r-0",
-              currentReadFilter === option.key ? "bg-[var(--tiger-primary,#2563eb)] text-white" : "bg-[var(--tiger-surface,#ffffff)] text-[var(--tiger-text-muted,#6b7280)] hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
-            ),
-            onClick: () => handleReadFilterChange(option.key),
-            children: option.label
-          },
-          option.key
-        )) })
-      ] }),
-      children: content
+          children: content
+        }
+      )
     }
-  ) });
+  );
 };
 var NotificationCenter_default = NotificationCenter;
 

package/dist/{chunk-YHFBPSMF.js → chunk-VTOMFVSF.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkKQZ4F7FZ_js = require('./chunk-KQZ4F7FZ.js');
-var chunk6PBNFLM7_js = require('./chunk-6PBNFLM7.js');
-var chunkM375I56K_js = require('./chunk-M375I56K.js');
-var chunkDUWAV47E_js = require('./chunk-DUWAV47E.js');
+var chunkXTV5JLLC_js = require('./chunk-XTV5JLLC.js');
+var chunkWV5XHYW6_js = require('./chunk-WV5XHYW6.js');
+var chunk36ATCHP4_js = require('./chunk-36ATCHP4.js');
+var chunkUKLVOR4E_js = require('./chunk-UKLVOR4E.js');
 var React = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -21,6 +21,7 @@ var TreeMapChart = ({
   showLabels = true,
   minLabelSize = 10,
   colors,
+  gradient = false,
   hoverable = false,
   hoveredIndex: hoveredIndexProp,
   activeOpacity = 1,
@@ -46,6 +47,7 @@ var TreeMapChart = ({
     [width, height, padding]
   );
   const palette = React.useMemo(() => tigercatCore.resolveChartPalette(colors), [colors]);
+  const gradientPrefix = React.useMemo(() => tigercatCore.getTreeMapGradientPrefix(), []);
   const nodes = React.useMemo(
     () => tigercatCore.computeTreeMapNodes(data, {
       width: innerRect.width,
@@ -67,7 +69,7 @@ var TreeMapChart = ({
     handleLegendHover,
     handleLegendLeave,
     wrapperClasses
-  } = chunkKQZ4F7FZ_js.useChartInteraction({
+  } = chunkXTV5JLLC_js.useChartInteraction({
     hoverable,
     hoveredIndexProp,
     selectable,
@@ -110,7 +112,7 @@ var TreeMapChart = ({
   );
   const interactive = hoverable || selectable;
   const chart = /* @__PURE__ */ jsxRuntime.jsx(
-    chunkDUWAV47E_js.ChartCanvas,
+    chunkUKLVOR4E_js.ChartCanvas,
     {
       width,
       height,
@@ -118,51 +120,72 @@ var TreeMapChart = ({
       title,
       desc,
       className: tigercatCore.classNames(className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("g", { "data-series-type": "treemap", children: nodes.map((node) => {
-        const opacity = tigercatCore.getChartElementOpacity(node.index, activeIndex, {
-          activeOpacity,
-          inactiveOpacity
-        });
-        return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "rect",
-            {
-              x: node.x,
-              y: node.y,
-              width: node.w,
-              height: node.h,
-              rx: 2,
-              fill: node.color,
-              opacity,
-              className: tigercatCore.classNames(interactive && "cursor-pointer"),
-              style: { transition: "opacity 0.2s ease-out" },
-              onMouseEnter: (e) => handleMouseEnter(node.index, e),
-              onMouseMove: handleMouseMove,
-              onMouseLeave: handleMouseLeave,
-              onClick: () => handleClick(node.index)
-            }
-          ),
-          showLabels && node.w > 30 && node.h > minLabelSize + 4 && /* @__PURE__ */ jsxRuntime.jsx(
-            "text",
-            {
-              x: node.x + node.w / 2,
-              y: node.y + node.h / 2,
-              className: "fill-white text-xs",
-              textAnchor: "middle",
-              dominantBaseline: "middle",
-              style: {
-                pointerEvents: "none",
-                fontSize: `${Math.min(12, node.h * 0.3)}px`
-              },
-              children: node.label
-            }
-          )
-        ] }, `node-${node.index}`);
-      }) })
+      children: /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-series-type": "treemap", children: [
+        gradient && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: nodes.map((node) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "linearGradient",
+          {
+            id: `${gradientPrefix}-${node.index}`,
+            x1: "0",
+            y1: "0",
+            x2: "0",
+            y2: "1",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: node.color, stopOpacity: 1 }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: node.color, stopOpacity: 0.7 })
+            ]
+          },
+          `grad-${node.index}`
+        )) }),
+        nodes.map((node) => {
+          const opacity = tigercatCore.getChartElementOpacity(node.index, activeIndex, {
+            activeOpacity,
+            inactiveOpacity
+          });
+          return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: node.x,
+                y: node.y,
+                width: node.w,
+                height: node.h,
+                rx: 2,
+                fill: gradient ? `url(#${gradientPrefix}-${node.index})` : node.color,
+                opacity,
+                className: tigercatCore.classNames(interactive && "cursor-pointer"),
+                style: {
+                  transition: "opacity 0.2s ease-out, filter 0.2s ease-out",
+                  rx: "var(--tiger-chart-block-radius, 2px)",
+                  filter: activeIndex === node.index ? "var(--tiger-chart-block-active-filter, none)" : "none"
+                },
+                onMouseEnter: (e) => handleMouseEnter(node.index, e),
+                onMouseMove: handleMouseMove,
+                onMouseLeave: handleMouseLeave,
+                onClick: () => handleClick(node.index)
+              }
+            ),
+            showLabels && node.w > 30 && node.h > minLabelSize + 4 && /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                x: node.x + node.w / 2,
+                y: node.y + node.h / 2,
+                className: "fill-white text-xs",
+                textAnchor: "middle",
+                dominantBaseline: "middle",
+                style: {
+                  pointerEvents: "none",
+                  fontSize: `${Math.min(12, node.h * 0.3)}px`
+                },
+                children: node.label
+              }
+            )
+          ] }, `node-${node.index}`);
+        })
+      ] })
     }
   );
   const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsxRuntime.jsx(
-    chunkM375I56K_js.ChartTooltip,
+    chunk36ATCHP4_js.ChartTooltip,
     {
       content: tooltipContent,
       visible: resolvedHoveredIndex !== null && tooltipContent !== "",
@@ -179,7 +202,7 @@ var TreeMapChart = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
     chart,
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk6PBNFLM7_js.ChartLegend,
+      chunkWV5XHYW6_js.ChartLegend,
       {
         items: legendItems,
         position: legendPosition,

package/dist/{chunk-QPGL4YEO.mjs → chunk-W7UGU2O6.mjs}

@@ -1,8 +1,8 @@
-import { StepsItem, Steps } from './chunk-AUP3PMDD.mjs';
-import { useTigerConfig } from './chunk-CRSMECWE.mjs';
-import { Button } from './chunk-3KMKMAE3.mjs';
+import { StepsItem, Steps } from './chunk-36WZNVQ5.mjs';
+import { useTigerConfig } from './chunk-VBZE77VM.mjs';
+import { Button } from './chunk-GKJNQUTW.mjs';
 import { useMemo, useState, useEffect, useCallback } from 'react';
-import { mergeTigerLocale, getFormWizardLabels, classNames, resolveLocaleText } from '@expcat/tigercat-core';
+import { mergeTigerLocale, getFormWizardLabels, classNames, clampStepIndex, runStepValidation, findNextUnskippedStep, resolveLocaleText } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var FormWizard = ({
@@ -44,13 +44,12 @@ var FormWizard = ({
   const isFirst = currentIndex <= 0;
   const isLast = currentIndex >= totalCount - 1;
   const wrapperClasses = classNames(
-    "tiger-form-wizard w-full rounded-lg border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] shadow-sm overflow-hidden",
+    "tiger-form-wizard w-full rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] shadow-sm overflow-hidden",
     className
   );
   const setCurrent = useCallback(
     (next) => {
-      const max = Math.max(totalCount - 1, 0);
-      const clamped = Math.min(Math.max(next, 0), max);
+      const clamped = clampStepIndex(next, totalCount);
       if (current === void 0) {
         setInnerCurrent(clamped);
       }
@@ -61,24 +60,13 @@ var FormWizard = ({
     },
     [current, currentIndex, onChange, totalCount, autoSave, steps]
   );
-  const runBeforeNext = useCallback(async () => {
-    if (!beforeNext || !currentStep) {
-      return true;
-    }
-    const result = await beforeNext(currentIndex, currentStep, steps);
-    return result === true;
-  }, [beforeNext, currentIndex, currentStep, steps]);
+  const runBeforeNext = useCallback(
+    () => runStepValidation(currentIndex, currentStep, steps, beforeNext),
+    [beforeNext, currentIndex, currentStep, steps]
+  );
   const findNextUnskipped = useCallback(
-    (from, dir) => {
-      let idx = from;
-      while (idx >= 0 && idx < totalCount) {
-        const step = steps[idx];
-        if (!step?.disabled && !step?.skipCondition?.()) return idx;
-        idx += dir;
-      }
-      return currentIndex;
-    },
-    [steps, totalCount, currentIndex]
+    (from, dir) => findNextUnskippedStep(from, dir, steps, currentIndex),
+    [steps, currentIndex]
   );
   const handlePrev = useCallback(() => {
     if (currentIndex <= 0) return;

package/dist/{chunk-AYDTXJOR.mjs → chunk-WDRYAP7T.mjs}

@@ -1,8 +1,8 @@
-import { Modal } from './chunk-BJ2GUKPU.mjs';
-import { ImageCropper } from './chunk-2EOXY2LP.mjs';
-import { Button } from './chunk-3KMKMAE3.mjs';
+import { Modal } from './chunk-2PLPUM5J.mjs';
+import { ImageCropper } from './chunk-CCDZLSOL.mjs';
+import { Button } from './chunk-GKJNQUTW.mjs';
 import { useRef, useState, useCallback, useMemo } from 'react';
-import { classNames, cropUploadTriggerDisabledClasses, cropUploadTriggerClasses, uploadPlusIconPath } from '@expcat/tigercat-core';
+import { validateUploadFile, readFileAsDataUrl, getCropperResult, classNames, cropUploadTriggerDisabledClasses, cropUploadTriggerClasses, isActivationKey, uploadPlusIconPath } from '@expcat/tigercat-core';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var CropUpload = ({
@@ -30,17 +30,16 @@ var CropUpload = ({
     (e) => {
       const file = e.target.files?.[0];
       if (!file) return;
-      if (maxSize && file.size > maxSize) {
-        onError?.(new Error(`File size exceeds maximum of ${maxSize} bytes`));
+      const sizeError = validateUploadFile(file, maxSize);
+      if (sizeError) {
+        onError?.(sizeError);
         e.target.value = "";
         return;
       }
-      const reader = new FileReader();
-      reader.onload = (ev) => {
-        setImageSrc(ev.target?.result);
+      readFileAsDataUrl(file).then((url) => {
+        setImageSrc(url);
         setModalVisible(true);
-      };
-      reader.readAsDataURL(file);
+      }).catch((err) => onError?.(err));
       e.target.value = "";
     },
     [maxSize, onError]
@@ -49,9 +48,13 @@ var CropUpload = ({
     if (!cropperRef.current) return;
     setCropping(true);
     try {
-      const result = await cropperRef.current.getCropResult();
-      onCropComplete?.(result);
-      setModalVisible(false);
+      const result = await getCropperResult(
+        cropperRef.current
+      );
+      if (result) {
+        onCropComplete?.(result);
+        setModalVisible(false);
+      }
     } catch (err) {
       onError?.(err);
     } finally {
@@ -68,7 +71,7 @@ var CropUpload = ({
   );
   const handleKeyDown = useCallback(
     (e) => {
-      if (e.key === "Enter" || e.key === " ") {
+      if (isActivationKey(e)) {
         e.preventDefault();
         handleTriggerClick();
       }

package/dist/{chunk-AMOH5AMN.mjs → chunk-WFIQIBLC.mjs}

@@ -1,4 +1,4 @@
-import { useFloating, useClickOutside, useEscapeKey } from './chunk-WLIFEALE.mjs';
+import { useFloating, useClickOutside, useEscapeKey } from './chunk-XTSG362L.mjs';
 import { useState, useRef, useCallback, useMemo } from 'react';
 import { getTransformOrigin, buildTriggerHandlerMap } from '@expcat/tigercat-core';
 
@@ -50,7 +50,7 @@ function usePopup(options) {
   const effectiveTrigger = multiTrigger ? trigger : "click";
   useClickOutside({
     enabled: currentVisible && effectiveTrigger === "click",
-    refs: [containerRef],
+    refs: [containerRef, floatingRef],
     onOutsideClick: () => setVisible(false),
     defer: true
   });

package/dist/{chunk-BR5OSUZT.mjs → chunk-WI4N5DD3.mjs}

@@ -1,5 +1,5 @@
 import { useRef, useMemo, useCallback, useEffect } from 'react';
-import { getInfiniteScrollContainerClasses, shouldLoadMore, classNames, infiniteScrollLoaderClasses, infiniteScrollEndClasses } from '@expcat/tigercat-core';
+import { getInfiniteScrollContainerClasses, shouldLoadMore, createInfiniteScrollObserver, classNames, infiniteScrollSentinelClasses, infiniteScrollLoaderClasses, infiniteScrollEndClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/InfiniteScroll.tsx
@@ -20,32 +20,63 @@ var InfiniteScroll = ({
   ...rest
 }) => {
   const containerRef = useRef(null);
+  const sentinelRef = useRef(null);
   const containerClasses = useMemo(
     () => getInfiniteScrollContainerClasses(direction, className),
     [direction, className]
   );
+  const onLoadMoreRef = useRef(onLoadMore);
+  onLoadMoreRef.current = onLoadMore;
   const checkScroll = useCallback(() => {
     if (disabled || loading || !hasMore) return;
     const el = containerRef.current;
     if (!el) return;
     if (shouldLoadMore(el, threshold, direction, inverse)) {
-      onLoadMore?.();
+      onLoadMoreRef.current?.();
     }
-  }, [disabled, loading, hasMore, threshold, direction, inverse, onLoadMore]);
+  }, [disabled, loading, hasMore, threshold, direction, inverse]);
   useEffect(() => {
+    if (disabled || !hasMore) return;
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+    const teardown = createInfiniteScrollObserver(sentinel, {
+      threshold,
+      direction,
+      root: containerRef.current,
+      onLoadMore: () => {
+        if (!disabled && !loading && hasMore) {
+          onLoadMoreRef.current?.();
+        }
+      }
+    });
+    if (teardown) {
+      return teardown;
+    }
     const el = containerRef.current;
-    if (!el) return;
-    el.addEventListener("scroll", checkScroll, { passive: true });
-    return () => el.removeEventListener("scroll", checkScroll);
-  }, [checkScroll]);
+    if (el) {
+      el.addEventListener("scroll", checkScroll, { passive: true });
+      return () => el.removeEventListener("scroll", checkScroll);
+    }
+  }, [disabled, loading, hasMore, threshold, direction, inverse, checkScroll]);
+  const sentinelEl = hasMore ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: sentinelRef,
+      className: infiniteScrollSentinelClasses,
+      "aria-hidden": "true",
+      style: { height: 0, overflow: "hidden" }
+    }
+  ) : null;
   const loaderEl = loading ? /* @__PURE__ */ jsx("div", { className: infiniteScrollLoaderClasses, role: "status", "aria-live": "polite", children: loader ?? loadingText }) : null;
   const endEl = !hasMore && !loading ? /* @__PURE__ */ jsx("div", { className: infiniteScrollEndClasses, children: end ?? endText }) : null;
   return /* @__PURE__ */ jsx("div", { ref: containerRef, className: classNames(containerClasses), ...rest, children: inverse ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    sentinelEl,
     loaderEl,
     children,
     endEl
   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     children,
+    sentinelEl,
     loaderEl,
     endEl
   ] }) });