@expcat/tigercat-react 0.3.0 → 0.3.70

package/dist/{chunk-XS5JP2KO.mjs → chunk-ZFHTSHXS.mjs}

@@ -1,5 +1,5 @@
-import { useState, useRef, useEffect } from 'react';
-import { parseDate, formatDate, getCalendarDays, getShortDayNames, getDatePickerLabels, getDatePickerInputClasses, getDatePickerIconButtonClasses, classNames, datePickerInputWrapperClasses, datePickerClearButtonClasses, CloseIconPath, CalendarIconPath, datePickerCalendarClasses, datePickerCalendarHeaderClasses, datePickerNavButtonClasses, ChevronLeftIconPath, formatMonthYear, datePickerMonthYearClasses, ChevronRightIconPath, datePickerCalendarGridClasses, datePickerDayNameClasses, isSameDay, normalizeDate, isToday, getDatePickerDayCellClasses, datePickerFooterClasses, datePickerFooterButtonClasses, datePickerBaseClasses, isDateInRange, icon20ViewBox } from '@expcat/tigercat-core';
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { parseDate, formatDate, getCalendarDays, getShortDayNames, getDatePickerLabels, getDatePickerInputClasses, getDatePickerIconButtonClasses, classNames, datePickerInputWrapperClasses, datePickerClearButtonClasses, CloseIconPath, CalendarIconPath, datePickerCalendarClasses, datePickerCalendarHeaderClasses, datePickerNavButtonClasses, ChevronLeftIconPath, formatMonthYear, datePickerMonthYearClasses, ChevronRightIconPath, datePickerCalendarGridClasses, datePickerDayNameClasses, normalizeDate, isSameDay, isToday, getDatePickerDayCellClasses, datePickerFooterClasses, datePickerFooterButtonClasses, datePickerBaseClasses, isDateInRange, icon20ViewBox } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/DatePicker.tsx
@@ -80,8 +80,8 @@ var DatePicker = (props) => {
     const end = Array.isArray(tuple) ? parseDate(tuple[1]) : null;
     return [start, end];
   })();
-  const minDateParsed = parseDate(props.minDate ?? null);
-  const maxDateParsed = parseDate(props.maxDate ?? null);
+  const minDateParsed = useMemo(() => parseDate(props.minDate ?? null), [props.minDate]);
+  const maxDateParsed = useMemo(() => parseDate(props.maxDate ?? null), [props.maxDate]);
   const [viewingMonth, setViewingMonth] = useState(
     (selectedDate ?? selectedRange[0])?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth()
   );
@@ -104,14 +104,20 @@ var DatePicker = (props) => {
     if (!isRangeMode) return selectedDate !== null;
     return selectedRange[0] !== null || selectedRange[1] !== null;
   })();
-  const calendarDays = getCalendarDays(viewingYear, viewingMonth);
-  const dayNames = getShortDayNames(props.locale);
-  const labels = getDatePickerLabels(props.locale, props.labels);
+  const calendarDays = useMemo(
+    () => getCalendarDays(viewingYear, viewingMonth),
+    [viewingYear, viewingMonth]
+  );
+  const dayNames = useMemo(() => getShortDayNames(props.locale), [props.locale]);
+  const labels = useMemo(
+    () => getDatePickerLabels(props.locale, props.labels),
+    [props.locale, props.labels]
+  );
   const toggleCalendar = () => {
     if (!disabled && !readonly) {
       setIsOpen(!isOpen);
       if (!isOpen) {
-        restoreFocusRef.current = document.activeElement ?? null;
+        restoreFocusRef.current = inputRef.current ?? null;
         const baseDate = selectedDate ?? selectedRange[0];
         if (baseDate) {
           setViewingMonth(baseDate.getMonth());
@@ -256,11 +262,7 @@ var DatePicker = (props) => {
       setRangeValue([normalizedDate, null]);
       return;
     }
-    if (normalizedDate < start) {
-      setRangeValue([start, start]);
-    } else {
-      setRangeValue([start, normalizedDate]);
-    }
+    setRangeValue([start, normalizedDate < start ? start : normalizedDate]);
   };
   const setToday = () => {
     selectDate(/* @__PURE__ */ new Date());
@@ -301,25 +303,14 @@ var DatePicker = (props) => {
     if (!date) return false;
     return date.getMonth() === viewingMonth;
   };
-  const handleInputClick = () => {
-    toggleCalendar();
-  };
   useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (calendarRef.current && inputWrapperRef.current && !calendarRef.current.contains(event.target) && !inputWrapperRef.current.contains(event.target)) {
-        closeCalendar();
-      }
-    };
     if (isOpen) {
-      document.addEventListener("click", handleClickOutside);
-      return () => {
-        document.removeEventListener("click", handleClickOutside);
+      const handleClickOutside = (event) => {
+        if (calendarRef.current && inputWrapperRef.current && !calendarRef.current.contains(event.target) && !inputWrapperRef.current.contains(event.target)) {
+          closeCalendar();
+        }
       };
-    }
-  }, [isOpen]);
-  useEffect(() => {
-    if (isOpen) {
-      restoreFocusRef.current = document.activeElement ?? null;
+      document.addEventListener("click", handleClickOutside);
       const preferred = pendingFocusIsoRef.current ?? getPreferredFocusIso();
       pendingFocusIsoRef.current = null;
       setTimeout(() => {
@@ -327,11 +318,9 @@ var DatePicker = (props) => {
         const fallback = getFirstEnabledIsoInView();
         if (fallback) focusDateButtonByIso(fallback);
       }, 0);
-      return;
+      return () => document.removeEventListener("click", handleClickOutside);
     }
-    setTimeout(() => {
-      restoreFocus();
-    }, 0);
+    setTimeout(() => restoreFocus(), 0);
   }, [isOpen]);
   useEffect(() => {
     if (!isOpen) return;
@@ -344,8 +333,11 @@ var DatePicker = (props) => {
       if (fallback) focusDateButtonByIso(fallback);
     }, 0);
   }, [isOpen, viewingMonth, viewingYear]);
-  const inputClasses = getDatePickerInputClasses(size, disabled || readonly);
-  const iconButtonClasses = getDatePickerIconButtonClasses(size);
+  const inputClasses = useMemo(
+    () => getDatePickerInputClasses(size, disabled || readonly),
+    [size, disabled, readonly]
+  );
+  const iconButtonClasses = useMemo(() => getDatePickerIconButtonClasses(size), [size]);
   return /* @__PURE__ */ jsxs("div", { className: classNames(datePickerBaseClasses, props.className), ...divProps, children: [
     /* @__PURE__ */ jsxs("div", { ref: inputWrapperRef, className: datePickerInputWrapperClasses, children: [
       /* @__PURE__ */ jsx(
@@ -361,7 +353,7 @@ var DatePicker = (props) => {
           required,
           name: props.name,
           id: props.id,
-          onClick: handleInputClick,
+          onClick: toggleCalendar,
           "aria-label": placeholder || "Select date"
         }
       ),
@@ -421,55 +413,60 @@ var DatePicker = (props) => {
             )
           ] }),
           /* @__PURE__ */ jsx("div", { className: datePickerCalendarGridClasses, role: "row", children: dayNames.map((day) => /* @__PURE__ */ jsx("div", { className: datePickerDayNameClasses, role: "columnheader", children: day }, day)) }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: datePickerCalendarGridClasses,
-              role: "grid",
-              "aria-rowcount": 6,
-              "aria-colcount": 7,
-              children: calendarDays.map((date, index) => {
-                if (!date) return null;
-                const [rangeStart, rangeEnd] = selectedRange;
-                const isRangeStart = isRangeMode && rangeStart ? isSameDay(date, rangeStart) : false;
-                const isRangeEnd = isRangeMode && rangeEnd ? isSameDay(date, rangeEnd) : false;
-                const isInRange = isRangeMode && rangeStart && rangeEnd && normalizeDate(date) >= normalizeDate(rangeStart) && normalizeDate(date) <= normalizeDate(rangeEnd);
-                const isSelected = !isRangeMode ? selectedDate ? isSameDay(date, selectedDate) : false : isRangeStart || isRangeEnd;
-                const isCurrentMonthDay = isCurrentMonth(date);
-                const isTodayDay = isToday(date);
-                const isSelectingRangeEnd = isRangeMode && Boolean(rangeStart) && !rangeEnd;
-                const isBeforeRangeStart = isSelectingRangeEnd && rangeStart && normalizeDate(date) < normalizeDate(rangeStart);
-                const isDisabled = isDateDisabled(date) || Boolean(isBeforeRangeStart);
-                const iso = formatDate(date, "yyyy-MM-dd");
-                return /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: getDatePickerDayCellClasses(
-                      isCurrentMonthDay,
-                      isSelected,
-                      isTodayDay,
-                      isDisabled,
-                      Boolean(isInRange),
-                      Boolean(isRangeStart),
-                      Boolean(isRangeEnd)
-                    ),
-                    disabled: isDisabled,
-                    onClick: () => selectDate(date),
-                    role: "gridcell",
-                    "data-date": iso,
-                    onFocus: () => setActiveDateIso(iso),
-                    tabIndex: activeDateIso === iso && !isDisabled ? 0 : -1,
-                    "aria-label": iso,
-                    "aria-selected": isSelected,
-                    "aria-current": isTodayDay ? "date" : void 0,
-                    children: date.getDate()
-                  },
-                  index
-                );
-              })
-            }
-          ),
+          (() => {
+            const [rangeStart, rangeEnd] = selectedRange;
+            const normStart = rangeStart ? normalizeDate(rangeStart) : null;
+            const normEnd = rangeEnd ? normalizeDate(rangeEnd) : null;
+            const isSelectingEnd = isRangeMode && Boolean(rangeStart) && !rangeEnd;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: datePickerCalendarGridClasses,
+                role: "grid",
+                "aria-rowcount": 6,
+                "aria-colcount": 7,
+                children: calendarDays.map((date, index) => {
+                  if (!date) return null;
+                  const normDate = normalizeDate(date);
+                  const isRangeStart = isRangeMode && rangeStart ? isSameDay(date, rangeStart) : false;
+                  const isRangeEnd = isRangeMode && rangeEnd ? isSameDay(date, rangeEnd) : false;
+                  const isInRange = isRangeMode && normStart && normEnd && normDate >= normStart && normDate <= normEnd;
+                  const isSelected = !isRangeMode ? selectedDate ? isSameDay(date, selectedDate) : false : isRangeStart || isRangeEnd;
+                  const isCurrentMonthDay = isCurrentMonth(date);
+                  const isTodayDay = isToday(date);
+                  const isBeforeRangeStart = isSelectingEnd && normStart && normDate < normStart;
+                  const isDisabled = isDateDisabled(date) || Boolean(isBeforeRangeStart);
+                  const iso = formatDate(date, "yyyy-MM-dd");
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: getDatePickerDayCellClasses(
+                        isCurrentMonthDay,
+                        isSelected,
+                        isTodayDay,
+                        isDisabled,
+                        Boolean(isInRange),
+                        Boolean(isRangeStart),
+                        Boolean(isRangeEnd)
+                      ),
+                      disabled: isDisabled,
+                      onClick: () => selectDate(date),
+                      role: "gridcell",
+                      "data-date": iso,
+                      onFocus: () => setActiveDateIso(iso),
+                      tabIndex: activeDateIso === iso && !isDisabled ? 0 : -1,
+                      "aria-label": iso,
+                      "aria-selected": isSelected,
+                      "aria-current": isTodayDay ? "date" : void 0,
+                      children: date.getDate()
+                    },
+                    index
+                  );
+                })
+              }
+            );
+          })(),
           isRangeMode && /* @__PURE__ */ jsxs("div", { className: datePickerFooterClasses, children: [
             /* @__PURE__ */ jsx("button", { type: "button", className: datePickerFooterButtonClasses, onClick: setToday, children: labels.today }),
             /* @__PURE__ */ jsx(

package/dist/{chunk-73DMQ2SR.mjs → chunk-ZGQOYCQT.mjs}

@@ -1,22 +1,12 @@
-import { Table } from './chunk-HGTF6A46.mjs';
-import { Pagination } from './chunk-NDOYQK2R.mjs';
-import { DropdownItem } from './chunk-IAF24RKI.mjs';
-import { Dropdown } from './chunk-YGOTPK2W.mjs';
-import { DropdownMenu } from './chunk-SIVJX7VU.mjs';
-import { Input } from './chunk-6ZTCBQJ7.mjs';
-import { Button } from './chunk-STEIWBMF.mjs';
+import { Table } from './chunk-3577FW3I.mjs';
+import { Select } from './chunk-MDZDPGRK.mjs';
+import { Pagination } from './chunk-NZLOLMT2.mjs';
+import { Input } from './chunk-RPTLVIBF.mjs';
+import { Button } from './chunk-ENSLMM3L.mjs';
 import { useState, useEffect, useMemo } from 'react';
 import { classNames } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var resolveFilterLabel = (filter, value) => {
-  const option = filter.options.find((item) => item.value === value);
-  if (option) return `${filter.label}: ${option.label}`;
-  if (value !== null && value !== void 0 && value !== "") {
-    return `${filter.label}: ${String(value)}`;
-  }
-  return filter.placeholder ?? filter.label;
-};
 var DataTableWithToolbar = ({
   toolbar,
   onSearchChange,
@@ -113,9 +103,9 @@ var DataTableWithToolbar = ({
   };
   const renderToolbar = () => {
     if (!hasSearch && !hasFilters && !hasBulkActions) return null;
-    return /* @__PURE__ */ jsxs("div", { className: "tiger-data-table-toolbar flex flex-wrap items-center gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-        hasSearch ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "tiger-data-table-toolbar flex flex-wrap items-center gap-2 pb-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap flex-1 min-w-0", children: [
+        hasSearch ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full sm:w-auto sm:min-w-[200px] sm:max-w-[320px]", children: [
           /* @__PURE__ */ jsx(
             Input,
             {
@@ -136,7 +126,7 @@ var DataTableWithToolbar = ({
             {
               size: "sm",
               variant: "primary",
-              className: "whitespace-nowrap",
+              className: "whitespace-nowrap shrink-0",
               onClick: handleSearchSubmit,
               disabled: !onSearch && !toolbar?.onSearch,
               children: toolbar?.searchButtonText ?? "\u641C\u7D22"
@@ -145,35 +135,33 @@ var DataTableWithToolbar = ({
         ] }) : null,
         hasFilters ? toolbar?.filters?.map((filter) => {
           const currentValue = resolvedFilters[filter.key];
-          const triggerLabel = resolveFilterLabel(filter, currentValue);
           const clearable = filter.clearable !== false;
-          const clearLabel = filter.clearLabel ?? "\u5168\u90E8";
-          const isActive = currentValue !== null && currentValue !== void 0 && currentValue !== "";
-          return /* @__PURE__ */ jsxs(Dropdown, { trigger: "click", children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                size: "sm",
-                variant: isActive ? "secondary" : "outline",
-                className: "whitespace-nowrap",
-                children: triggerLabel
-              }
-            ),
-            /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-              clearable ? /* @__PURE__ */ jsx(DropdownItem, { onClick: () => handleFilterSelect(filter, null), children: clearLabel }) : null,
-              filter.options.map((option) => /* @__PURE__ */ jsx(
-                DropdownItem,
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "w-full sm:w-auto sm:min-w-[120px] sm:max-w-[180px]",
+              children: /* @__PURE__ */ jsx(
+                Select,
                 {
-                  onClick: () => handleFilterSelect(filter, option.value),
-                  children: option.label
-                },
-                String(option.value)
-              ))
-            ] })
-          ] }, filter.key);
+                  size: "sm",
+                  options: filter.options.map((opt) => ({
+                    label: opt.label,
+                    value: opt.value
+                  })),
+                  value: currentValue ?? void 0,
+                  placeholder: filter.placeholder ?? filter.label,
+                  clearable,
+                  onChange: (value) => {
+                    handleFilterSelect(filter, value ?? null);
+                  }
+                }
+              )
+            },
+            filter.key
+          );
         }) : null
       ] }),
-      hasBulkActions ? /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2 flex-wrap", children: [
+      hasBulkActions ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap ml-auto shrink-0", children: [
         selectedCount > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-sm text-[var(--tiger-text-muted,#6b7280)]", children: [
           bulkLabel,
           " ",

package/dist/{chunk-WDAMDVLU.mjs → chunk-ZIUOENTL.mjs}

@@ -1,5 +1,5 @@
 import { createContext, useContext, useRef, useState, useCallback, useMemo, useEffect } from 'react';
-import { classNames, getMenuClasses } from '@expcat/tigercat-core';
+import { replaceKeys, toggleKey, classNames, getMenuClasses, initRovingTabIndex } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';
 
 // src/components/Menu.tsx
@@ -30,27 +30,18 @@ var Menu = ({
   const openKeys = controlledOpenKeys !== void 0 ? controlledOpenKeys : internalOpenKeys;
   const handleSelect = useCallback(
     (key) => {
-      const newSelectedKeys = [key];
+      const newSelectedKeys = replaceKeys(key, selectedKeys);
       if (controlledSelectedKeys === void 0) {
         setInternalSelectedKeys(newSelectedKeys);
       }
       onSelect?.(key, { selectedKeys: newSelectedKeys });
     },
-    [controlledSelectedKeys, onSelect]
+    [controlledSelectedKeys, selectedKeys, onSelect]
   );
   const handleOpenChange = useCallback(
     (key) => {
-      const isOpen = openKeys.includes(key);
-      let newOpenKeys;
-      if (isOpen) {
-        newOpenKeys = openKeys.filter((k) => k !== key);
-      } else {
-        if (multiple) {
-          newOpenKeys = [...openKeys, key];
-        } else {
-          newOpenKeys = [key];
-        }
-      }
+      const toggled = toggleKey(key, openKeys);
+      const newOpenKeys = multiple ? toggled : toggled.includes(key) ? [key] : [];
       if (controlledOpenKeys === void 0) {
         setInternalOpenKeys(newOpenKeys);
       }
@@ -75,19 +66,7 @@ var Menu = ({
     [mode, theme, collapsed, inlineIndent, selectedKeys, openKeys, handleSelect, handleOpenChange]
   );
   useEffect(() => {
-    const root = menuRef.current;
-    if (!root) return;
-    const items = Array.from(
-      root.querySelectorAll('button[data-tiger-menuitem="true"]')
-    ).filter((el) => !el.disabled && !el.closest('[data-tiger-menu-hidden="true"]'));
-    if (items.length === 0) return;
-    const hasActive = items.some((el) => el.tabIndex === 0);
-    if (hasActive) return;
-    const selected = items.find((el) => el.dataset.tigerSelected === "true");
-    const active = selected ?? items[0];
-    items.forEach((el) => {
-      el.tabIndex = el === active ? 0 : -1;
-    });
+    if (menuRef.current) initRovingTabIndex(menuRef.current);
   }, [mode, collapsed, selectedKeys, openKeys]);
   return /* @__PURE__ */ jsx(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "ul",

package/dist/{chunk-GJKT2B56.js → chunk-ZTVATZB6.js}

@@ -7,41 +7,17 @@ var jsxRuntime = require('react/jsx-runtime');
 // src/components/Table.tsx
 var spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
 var SortIcon = ({ direction }) => {
-  if (direction === "asc") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        className: tigercatCore.getSortIconClasses(true),
-        width: "16",
-        height: "16",
-        viewBox: tigercatCore.icon16ViewBox,
-        fill: "currentColor",
-        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: tigercatCore.sortAscIcon16PathD })
-      }
-    );
-  }
-  if (direction === "desc") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        className: tigercatCore.getSortIconClasses(true),
-        width: "16",
-        height: "16",
-        viewBox: tigercatCore.icon16ViewBox,
-        fill: "currentColor",
-        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: tigercatCore.sortDescIcon16PathD })
-      }
-    );
-  }
+  const active = direction !== null;
+  const pathD = direction === "asc" ? tigercatCore.sortAscIcon16PathD : direction === "desc" ? tigercatCore.sortDescIcon16PathD : tigercatCore.sortBothIcon16PathD;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
-      className: tigercatCore.getSortIconClasses(false),
+      className: tigercatCore.getSortIconClasses(active),
       width: "16",
       height: "16",
       viewBox: tigercatCore.icon16ViewBox,
       fill: "currentColor",
-      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: tigercatCore.sortBothIcon16PathD })
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: pathD })
     }
   );
 };
@@ -287,11 +263,7 @@ function Table({
   );
   const handlePageChange = react.useCallback(
     (page) => {
-      if (!isCurrentPageControlled) {
-        setUncontrolledCurrentPage(page);
-      } else {
-        setUncontrolledCurrentPage(page);
-      }
+      setUncontrolledCurrentPage(page);
       onPageChange?.({ current: page, pageSize: currentPageSize });
       onChange?.({
         sort: sortState,
@@ -302,20 +274,12 @@ function Table({
         }
       });
     },
-    [currentPageSize, sortState, filterState, isCurrentPageControlled, onPageChange, onChange]
+    [currentPageSize, sortState, filterState, onPageChange, onChange]
   );
   const handlePageSizeChange = react.useCallback(
     (pageSize) => {
-      if (!isPageSizeControlled) {
-        setUncontrolledCurrentPageSize(pageSize);
-      } else {
-        setUncontrolledCurrentPageSize(pageSize);
-      }
-      if (!isCurrentPageControlled) {
-        setUncontrolledCurrentPage(1);
-      } else {
-        setUncontrolledCurrentPage(1);
-      }
+      setUncontrolledCurrentPageSize(pageSize);
+      setUncontrolledCurrentPage(1);
       onPageChange?.({ current: 1, pageSize });
       onChange?.({
         sort: sortState,
@@ -326,7 +290,7 @@ function Table({
         }
       });
     },
-    [sortState, filterState, isPageSizeControlled, isCurrentPageControlled, onPageChange, onChange]
+    [sortState, filterState, onPageChange, onChange]
   );
   const handleRowClick = react.useCallback(
     (record, index) => {
@@ -423,7 +387,7 @@ function Table({
                 !!column.sortable,
                 column.headerClassName
               ),
-              (isFixedLeft || isFixedRight) && "bg-gray-50"
+              (isFixedLeft || isFixedRight) && "bg-[var(--tiger-surface-muted,#f9fafb)]"
             ),
             style,
             onClick: column.sortable ? () => handleSort(column.key) : void 0,
@@ -546,8 +510,11 @@ function Table({
                 width: typeof column.width === "number" ? `${column.width}px` : column.width
               } : void 0;
               const style = fixedStyle ? { ...widthStyle, ...fixedStyle } : widthStyle;
-              const stickyBgClass = striped && index % 2 === 0 ? "bg-gray-50/50" : "bg-white";
-              const stickyCellClass = isFixedLeft || isFixedRight ? tigercatCore.classNames(stickyBgClass, hoverable && "group-hover:bg-gray-50") : void 0;
+              const stickyBgClass = striped && index % 2 === 0 ? "bg-[var(--tiger-surface-muted,#f9fafb)]/50" : "bg-[var(--tiger-surface,#ffffff)]";
+              const stickyCellClass = isFixedLeft || isFixedRight ? tigercatCore.classNames(
+                stickyBgClass,
+                hoverable && "group-hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
+              ) : void 0;
               return /* @__PURE__ */ jsxRuntime.jsx(
                 "td",
                 {
@@ -647,50 +614,49 @@ function Table({
     } : void 0,
     [maxHeight]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.classNames("relative", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: tigercatCore.getTableWrapperClasses(bordered, maxHeight),
-        style: wrapperStyle,
-        "aria-busy": loading,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "table",
-            {
-              className: tigercatCore.classNames(
-                tigercatCore.tableBaseClasses,
-                tableLayout === "fixed" ? "table-fixed" : "table-auto"
-              ),
-              ...props,
-              style: fixedColumnsInfo.hasFixedColumns && fixedColumnsInfo.minTableWidth ? {
-                ...props.style,
-                minWidth: `${fixedColumnsInfo.minTableWidth}px`
-              } : props.style,
-              children: [
-                renderTableHeader(),
-                renderTableBody()
-              ]
-            }
-          ),
-          loading && /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: tigercatCore.tableLoadingOverlayClasses,
-              role: "status",
-              "aria-live": "polite",
-              "aria-label": "Loading",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, {}),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading" })
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    renderPagination()
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: tigercatCore.getTableWrapperClasses(bordered, maxHeight),
+      style: wrapperStyle,
+      "aria-busy": loading,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "table",
+          {
+            className: tigercatCore.classNames(
+              tigercatCore.tableBaseClasses,
+              tableLayout === "fixed" ? "table-fixed" : "table-auto",
+              className
+            ),
+            ...props,
+            style: fixedColumnsInfo.hasFixedColumns && fixedColumnsInfo.minTableWidth ? {
+              ...props.style,
+              minWidth: `${fixedColumnsInfo.minTableWidth}px`
+            } : props.style,
+            children: [
+              renderTableHeader(),
+              renderTableBody()
+            ]
+          }
+        ),
+        loading && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: tigercatCore.tableLoadingOverlayClasses,
+            role: "status",
+            "aria-live": "polite",
+            "aria-label": "Loading",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, {}),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading" })
+            ]
+          }
+        ),
+        renderPagination()
+      ]
+    }
+  );
 }
 
 exports.Table = Table;

package/dist/components/ActivityFeed.js

@@ -2,22 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunk4IO2M3ZJ_js = require('../chunk-4IO2M3ZJ.js');
-require('../chunk-IQINYCU6.js');
-require('../chunk-MKWXJZ3T.js');
-require('../chunk-6MGEGOYJ.js');
-require('../chunk-2TS6X5RA.js');
-require('../chunk-YYGTJKP5.js');
-require('../chunk-VO4WDK4K.js');
-require('../chunk-TZ26HQAW.js');
+var chunkIOM7DWWQ_js = require('../chunk-IOM7DWWQ.js');
+require('../chunk-PR3PQUKM.js');
+require('../chunk-2GKTVAAB.js');
+require('../chunk-QYYAXM5F.js');
+require('../chunk-VCULFIZ5.js');
+require('../chunk-I5TCE5E7.js');
+require('../chunk-SSQOCZ6O.js');
+require('../chunk-CI2WHAT2.js');
 
 
 
 Object.defineProperty(exports, "ActivityFeed", {
   enumerable: true,
-  get: function () { return chunk4IO2M3ZJ_js.ActivityFeed; }
+  get: function () { return chunkIOM7DWWQ_js.ActivityFeed; }
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function () { return chunk4IO2M3ZJ_js.ActivityFeed_default; }
+  get: function () { return chunkIOM7DWWQ_js.ActivityFeed_default; }
 });