@expcat/tigercat-react 2.0.0-rc.2 → 2.0.0

package/dist/{chunk-IZYFETUS.mjs → chunk-3RY6M4AK.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-K7MYQISG.mjs";
 import {
   ImageCropper
-} from "./chunk-VD55SSP7.mjs";
+} from "./chunk-PD6Q36OO.mjs";
 import {
   Button
 } from "./chunk-5TE7KLE5.mjs";

package/dist/chunk-C6QK5MJT.mjs

@@ -0,0 +1,292 @@
+import {
+  Timeline
+} from "./chunk-QB5472NM.mjs";
+import {
+  Link
+} from "./chunk-XZVQ3PJS.mjs";
+import {
+  Loading
+} from "./chunk-AJJJ6HWC.mjs";
+import {
+  Tag
+} from "./chunk-7EXOY7GD.mjs";
+import {
+  Text
+} from "./chunk-HLS4CHWX.mjs";
+import {
+  Card
+} from "./chunk-IXV5YBCZ.mjs";
+import {
+  Avatar
+} from "./chunk-OO562MFD.mjs";
+
+// src/components/ActivityFeed.tsx
+import { useMemo } from "react";
+import {
+  classNames,
+  buildActivityGroups,
+  formatActivityTime,
+  toActivityTimelineItems,
+  activityItemClasses,
+  activityItemLayoutClasses,
+  activityItemBodyClasses,
+  activityItemHeaderClasses,
+  activityItemTitleGroupClasses,
+  activityItemDescriptionClasses,
+  activityItemActionsClasses
+} from "@expcat/tigercat-core";
+
+// ../core/src/internal/activity-feed-styles.ts
+var activityFeedActionClasses = "tiger-motion-aware inline-flex items-center px-2.5 py-1 rounded-[var(--tiger-radius-md,0.5rem)] text-xs font-semibold text-[var(--tiger-primary,#2563eb)] hover:bg-[var(--tiger-outline-bg-hover,#eff6ff)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
+var activityFeedItemSurfaceClasses = "tiger-motion-aware p-4 rounded-[var(--tiger-radius-xl,1rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] shadow-[var(--tiger-shadow-sm,0_1px_2px_rgb(0_0_0_/_0.05))] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))] hover:shadow-[var(--tiger-shadow-glass-strong,0_4px_6px_-1px_rgb(0_0_0_/_0.1))] hover:-translate-y-0.5 w-full";
+var activityFeedAvatarClasses = "tiger-motion-aware shrink-0 ring-2 ring-[var(--tiger-surface,#ffffff)] shadow-[var(--tiger-shadow-sm,0_1px_2px_rgb(0_0_0_/_0.05))] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))] hover:scale-105";
+var activityFeedTitleClasses = "tiger-motion-aware text-[var(--tiger-text,#111827)] hover:text-[var(--tiger-primary,#2563eb)] transition-colors cursor-pointer truncate";
+var activityFeedTimeClasses = "shrink-0 whitespace-nowrap font-medium text-[var(--tiger-text-muted,#6b7280)]";
+var activityFeedDescriptionClasses = "text-[var(--tiger-text-secondary,#4b5563)] leading-relaxed pl-0.5 mt-1";
+var activityFeedStateCardClasses = "bg-[var(--tiger-surface,#ffffff)] border-[var(--tiger-border,#e5e7eb)] rounded-[var(--tiger-radius-xl,1rem)] shadow-[var(--tiger-shadow-sm,0_1px_2px_rgb(0_0_0_/_0.05))] overflow-hidden";
+var activityFeedLoadingClasses = "text-[var(--tiger-primary,#2563eb)] font-medium";
+var activityFeedEmptyIconClasses = "tiger-motion-aware w-12 h-12 text-[var(--tiger-text-muted,#9ca3af)] mb-3 animate-pulse";
+var activityFeedGroupMarkerClasses = "w-1.5 h-3.5 bg-[var(--tiger-primary,#2563eb)] rounded-full shadow-sm";
+var activityFeedGroupTitleClasses = "text-[var(--tiger-text,#111827)] uppercase tracking-wider";
+var activityFeedDotBaseClasses = "w-3 h-3 rounded-full border-2 border-[var(--tiger-surface,#ffffff)] shadow-sm relative z-10";
+var activityFeedDotPulseBaseClasses = "tiger-motion-aware absolute inline-flex h-full w-full rounded-full animate-ping opacity-75";
+var dotVariantClasses = {
+  success: "bg-[var(--tiger-success,#16a34a)]",
+  warning: "bg-[var(--tiger-warning,#d97706)]",
+  error: "bg-[var(--tiger-error,#dc2626)]",
+  danger: "bg-[var(--tiger-error,#dc2626)]",
+  primary: "bg-[var(--tiger-primary,#2563eb)]",
+  info: "bg-[var(--tiger-primary,#2563eb)]"
+};
+var dotPulseVariantClasses = {
+  success: "bg-[var(--tiger-success,#16a34a)]/30",
+  warning: "bg-[var(--tiger-warning,#d97706)]/30",
+  error: "bg-[var(--tiger-error,#dc2626)]/30",
+  danger: "bg-[var(--tiger-error,#dc2626)]/30",
+  primary: "bg-[var(--tiger-primary,#2563eb)]/30",
+  info: "bg-[var(--tiger-primary,#2563eb)]/30"
+};
+var getActivityFeedDotClasses = (variant) => ({
+  dot: dotVariantClasses[variant ?? ""] ?? "bg-[var(--tiger-border,#d1d5db)]",
+  pulse: dotPulseVariantClasses[variant ?? ""] ?? ""
+});
+
+// src/components/ActivityFeed.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var renderAction = (item, action, index) => {
+  const key = action.key ?? `${item.id}-action-${index}`;
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      size: "sm",
+      variant: "primary",
+      underline: false,
+      href: action.href,
+      target: action.target,
+      disabled: action.disabled,
+      className: activityFeedActionClasses,
+      onClick: () => action.onClick?.(item, action),
+      children: action.label
+    },
+    key
+  );
+};
+var ActivityFeed = ({
+  items = [],
+  groups,
+  groupBy,
+  groupOrder,
+  loading = false,
+  loadingText = "\u52A0\u8F7D\u4E2D...",
+  emptyText = "\u6682\u65E0\u52A8\u6001",
+  showAvatar = true,
+  showTime = true,
+  showGroupTitle = true,
+  renderItem,
+  renderGroupHeader,
+  className,
+  ...props
+}) => {
+  const resolvedGroups = useMemo(
+    () => buildActivityGroups(items, groups, groupBy, groupOrder),
+    [items, groups, groupBy, groupOrder]
+  );
+  const wrapperClasses = classNames(
+    "tiger-activity-feed",
+    "flex",
+    "flex-col",
+    "gap-6",
+    "w-full",
+    className
+  );
+  const renderDefaultItem = (item, index, group) => {
+    if (renderItem) return renderItem(item, index, group);
+    const titleText = item.title ?? (typeof item.content === "string" || typeof item.content === "number" ? String(item.content) : "");
+    const descriptionText = item.description;
+    const timeText = showTime ? formatActivityTime(item.time) : "";
+    const actionNodes = item.actions?.map(
+      (action, actionIndex) => renderAction(item, action, actionIndex)
+    );
+    return /* @__PURE__ */ jsx("div", { className: classNames(activityItemClasses, activityFeedItemSurfaceClasses), children: /* @__PURE__ */ jsxs("div", { className: activityItemLayoutClasses, children: [
+      showAvatar && item.user ? /* @__PURE__ */ jsx(
+        Avatar,
+        {
+          size: "sm",
+          src: item.user.avatar,
+          text: item.user.name,
+          className: activityFeedAvatarClasses
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs("div", { className: activityItemBodyClasses, children: [
+        /* @__PURE__ */ jsxs("div", { className: activityItemHeaderClasses, children: [
+          /* @__PURE__ */ jsxs("div", { className: activityItemTitleGroupClasses, children: [
+            titleText ? /* @__PURE__ */ jsx(Text, { tag: "div", size: "sm", weight: "semibold", className: activityFeedTitleClasses, children: titleText }) : null,
+            item.status ? /* @__PURE__ */ jsx(
+              Tag,
+              {
+                variant: item.status.variant ?? "default",
+                size: "sm",
+                className: "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide uppercase border border-current bg-current/10 shadow-sm",
+                children: item.status.label
+              }
+            ) : null
+          ] }),
+          timeText ? /* @__PURE__ */ jsx(Text, { tag: "div", size: "xs", color: "muted", className: activityFeedTimeClasses, children: timeText }) : null
+        ] }),
+        descriptionText ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            tag: "div",
+            size: "sm",
+            color: "muted",
+            className: classNames(
+              activityItemDescriptionClasses,
+              activityFeedDescriptionClasses
+            ),
+            children: descriptionText
+          }
+        ) : null,
+        actionNodes?.length ? /* @__PURE__ */ jsx("div", { className: classNames(activityItemActionsClasses, "mt-2.5"), children: actionNodes }) : null
+      ] })
+    ] }) });
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: wrapperClasses,
+        role: "feed",
+        "aria-label": "\u52A8\u6001",
+        "aria-busy": true,
+        ...props,
+        "data-tiger-activity-feed": true,
+        children: /* @__PURE__ */ jsx(
+          Card,
+          {
+            variant: "bordered",
+            size: "sm",
+            className: classNames("tiger-activity-feed-loading", activityFeedStateCardClasses),
+            children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx(Loading, { text: loadingText, className: activityFeedLoadingClasses }) })
+          }
+        )
+      }
+    );
+  }
+  if (resolvedGroups.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: wrapperClasses,
+        role: "feed",
+        "aria-label": "\u52A8\u6001",
+        ...props,
+        "data-tiger-activity-feed": true,
+        children: /* @__PURE__ */ jsx(
+          Card,
+          {
+            variant: "bordered",
+            size: "sm",
+            className: classNames("tiger-activity-feed-empty", activityFeedStateCardClasses),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 px-4", children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: activityFeedEmptyIconClasses,
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M12 7.5h1.5m-1.5 3h1.5m-7.5 3h10.5m-10.5 3h10.5m-13.5-9h16.5M3 5.25h18M3 18.75h18"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(Text, { tag: "div", size: "sm", color: "muted", className: "font-medium", children: emptyText })
+            ] })
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: wrapperClasses,
+      role: "feed",
+      "aria-label": "\u52A8\u6001",
+      ...props,
+      "data-tiger-activity-feed": true,
+      children: resolvedGroups.map((group, groupIndex) => {
+        const headerNode = renderGroupHeader?.(group);
+        const groupTitle = group.title;
+        const timelineItems = toActivityTimelineItems(group.items);
+        return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          showGroupTitle && groupTitle ? headerNode ?? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+            /* @__PURE__ */ jsx("span", { className: activityFeedGroupMarkerClasses }),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                tag: "span",
+                size: "sm",
+                weight: "bold",
+                className: activityFeedGroupTitleClasses,
+                children: groupTitle
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ jsx(
+            Timeline,
+            {
+              items: timelineItems,
+              renderDot: (timelineItem) => {
+                const activity = timelineItem.activity;
+                const statusVariant = activity?.status?.variant ?? "default";
+                const dotClasses = getActivityFeedDotClasses(statusVariant);
+                return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center w-4 h-4", children: [
+                  dotClasses.pulse ? /* @__PURE__ */ jsx("span", { className: `${activityFeedDotPulseBaseClasses} ${dotClasses.pulse}` }) : null,
+                  /* @__PURE__ */ jsx("span", { className: `${activityFeedDotBaseClasses} ${dotClasses.dot}` })
+                ] });
+              },
+              renderItem: (timelineItem, index) => {
+                const activity = timelineItem.activity;
+                if (!activity) return null;
+                return renderDefaultItem(activity, index, group);
+              }
+            }
+          )
+        ] }, group.key ?? groupIndex);
+      })
+    }
+  );
+};
+var ActivityFeed_default = ActivityFeed;
+
+export {
+  ActivityFeed,
+  ActivityFeed_default
+};

package/dist/{chunk-44CQTGAN.mjs → chunk-E7OTDBI6.mjs}

@@ -353,12 +353,12 @@ var ScatterChart = ({
     }
   );
   if (!showLegend) {
-    return /* @__PURE__ */ jsxs("div", { className: "inline-block relative", children: [
+    return /* @__PURE__ */ jsxs("div", { className: classNames("relative", responsive ? "block w-full min-w-0" : "inline-block"), children: [
       chart,
       tooltip
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+  return /* @__PURE__ */ jsxs("div", { className: classNames(wrapperClasses, responsive && "w-full min-w-0"), children: [
     chart,
     /* @__PURE__ */ jsx(
       ChartLegend,

package/dist/{chunk-DJ4PSDQS.mjs → chunk-FYINJRYN.mjs}

@@ -566,12 +566,12 @@ var AreaChart = ({
     }
   );
   if (!showLegend) {
-    return /* @__PURE__ */ jsxs("div", { className: "inline-block relative", children: [
+    return /* @__PURE__ */ jsxs("div", { className: classNames("relative", responsive ? "block w-full min-w-0" : "inline-block"), children: [
       chart,
       tooltip
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+  return /* @__PURE__ */ jsxs("div", { className: classNames(wrapperClasses, responsive && "w-full min-w-0"), children: [
     chart,
     /* @__PURE__ */ jsx(
       ChartLegend,

package/dist/{chunk-KFPQ6DIH.mjs → chunk-GV4F6X3C.mjs}

@@ -178,7 +178,7 @@ var VirtualTable = ({
                     })
                   ),
                   style: { ...widthStyle, ...stickyStyle },
-                  children: col.title ?? ""
+                  children: col.renderHeader ? col.renderHeader() : col.title ?? ""
                 },
                 col.key
               );
@@ -215,30 +215,34 @@ var VirtualTable = ({
                   } : void 0,
                   children: [
                     colRange && colRange.leftPad > 0 && /* @__PURE__ */ jsx("td", { "aria-hidden": true, style: { width: `${colRange.leftPad}px`, padding: 0 } }),
-                    visibleColumns.map((col, colIdx) => /* @__PURE__ */ jsx(
-                      "td",
-                      {
-                        "aria-colindex": colIndexOffset + colIdx + 1,
-                        className: classNames(
-                          virtualTableCellClasses,
-                          getTableFixedCellClasses({
-                            view: "virtual-table",
-                            column: col,
-                            record: row,
-                            rowIndex: globalIdx,
-                            striped,
-                            stripedActive: striped && globalIdx % 2 === 1,
-                            selected: isSelected,
-                            hoverable: true,
-                            fixedInfo,
-                            selectedClassName: virtualTableFixedCellSelectedClasses
-                          })
-                        ),
-                        style: getVirtualTableFixedCellStyle(col.key, fixedInfo),
-                        children: renderCell ? renderCell(row[col.key], row, col) : String(row[col.key] ?? "")
-                      },
-                      col.key
-                    )),
+                    visibleColumns.map((col, colIdx) => {
+                      const dataKey = col.dataKey || col.key;
+                      const value = row[dataKey];
+                      return /* @__PURE__ */ jsx(
+                        "td",
+                        {
+                          "aria-colindex": colIndexOffset + colIdx + 1,
+                          className: classNames(
+                            virtualTableCellClasses,
+                            getTableFixedCellClasses({
+                              view: "virtual-table",
+                              column: col,
+                              record: row,
+                              rowIndex: globalIdx,
+                              striped,
+                              stripedActive: striped && globalIdx % 2 === 1,
+                              selected: isSelected,
+                              hoverable: true,
+                              fixedInfo,
+                              selectedClassName: virtualTableFixedCellSelectedClasses
+                            })
+                          ),
+                          style: getVirtualTableFixedCellStyle(col.key, fixedInfo),
+                          children: renderCell ? renderCell(value, row, col) : col.render ? col.render(row, globalIdx) : value
+                        },
+                        col.key
+                      );
+                    }),
                     colRange && colRange.rightPad > 0 && /* @__PURE__ */ jsx("td", { "aria-hidden": true, style: { width: `${colRange.rightPad}px`, padding: 0 } })
                   ]
                 },

package/dist/{chunk-K6GJMKJR.mjs → chunk-HELLYIX2.mjs}

@@ -1,6 +1,6 @@
 import {
   Table
-} from "./chunk-N6JNLJIN.mjs";
+} from "./chunk-YCKY72BW.mjs";
 import {
   Select
 } from "./chunk-PAN256RW.mjs";

package/dist/{chunk-POP3TS4Q.mjs → chunk-NBQ3Q6DD.mjs}

@@ -25,6 +25,34 @@ import {
   buildNotificationGroups,
   formatActivityTime
 } from "@expcat/tigercat-core";
+
+// ../core/src/internal/notification-center-styles.ts
+var notificationCenterItemClasses = "tiger-motion-aware group relative flex items-start gap-3.5 w-full p-3.5 rounded-[var(--tiger-radius-lg,0.75rem)] hover:bg-[var(--tiger-surface-muted,#f9fafb)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
+var notificationCenterUnreadItemClasses = "bg-[var(--tiger-outline-bg-hover,#eff6ff)] border-l-[3px] border-l-[var(--tiger-primary,#2563eb)] -ml-[3px] pl-[calc(0.875rem-3px)]";
+var notificationCenterReadItemClasses = "border-l-[3px] border-l-transparent -ml-[3px] pl-[calc(0.875rem-3px)]";
+var notificationCenterReadTitleClasses = "text-[var(--tiger-text-secondary,#4b5563)]";
+var notificationCenterUnreadTitleClasses = "text-[var(--tiger-text,#111827)]";
+var notificationCenterUnreadDotClasses = "tiger-motion-aware w-1.5 h-1.5 rounded-full bg-[var(--tiger-primary,#2563eb)] shrink-0 shadow-sm animate-pulse";
+var notificationCenterTimeClasses = "text-[11px] text-[var(--tiger-text-muted,#6b7280)] font-medium whitespace-nowrap flex-shrink-0 self-center";
+var notificationCenterReadDescriptionClasses = "text-[var(--tiger-text-muted,#6b7280)]";
+var notificationCenterUnreadDescriptionClasses = "text-[var(--tiger-text-secondary,#4b5563)]";
+var notificationCenterItemActionClasses = "tiger-motion-aware opacity-0 group-hover:opacity-100 focus:opacity-100 rounded-full px-2.5 py-1 text-[11px] font-semibold bg-[var(--tiger-surface-muted,#f3f4f6)] hover:bg-[var(--tiger-fill-hover,#e5e7eb)] text-[var(--tiger-text-secondary,#374151)] border-0 flex-shrink-0 self-center [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
+var notificationCenterEmptyIconWrapperClasses = "p-3.5 bg-[var(--tiger-surface-muted,#f9fafb)] rounded-full mb-3 shadow-inner";
+var notificationCenterEmptyIconClasses = "tiger-motion-aware w-8 h-8 text-[var(--tiger-text-muted,#9ca3af)] animate-pulse";
+var notificationCenterEmptyTextClasses = "font-semibold text-[var(--tiger-text-muted,#6b7280)]";
+var notificationCenterLoadingClasses = "text-[var(--tiger-primary,#2563eb)] font-medium";
+var notificationCenterCardClasses = "tiger-motion-aware w-full rounded-[var(--tiger-radius-xl,1rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] shadow-[var(--tiger-shadow-glass,0_8px_30px_rgb(0_0_0_/_0.04))] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))] overflow-hidden";
+var notificationCenterTitleClasses = "text-[var(--tiger-text,#111827)]";
+var notificationCenterUnreadBadgeClasses = "tiger-motion-aware inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-[11px] font-bold rounded-full bg-[var(--tiger-primary,#2563eb)] text-white shadow-sm animate-pulse";
+var notificationCenterMarkAllBaseClasses = "tiger-motion-aware text-xs font-semibold transition-colors";
+var notificationCenterMarkAllEnabledClasses = "text-[var(--tiger-primary,#2563eb)] hover:text-[var(--tiger-primary-hover,#1d4ed8)]";
+var notificationCenterMarkAllDisabledClasses = "text-[var(--tiger-text-muted,#9ca3af)]";
+var notificationCenterFilterGroupClasses = "inline-flex items-center gap-0.5 p-0.5 rounded-[var(--tiger-radius-md,0.5rem)] bg-[var(--tiger-surface-muted,#f3f4f6)] self-start";
+var notificationCenterFilterButtonClasses = "tiger-motion-aware px-3.5 py-1 text-xs font-semibold rounded-[var(--tiger-radius-sm,0.375rem)] [transition:var(--tiger-transition-base,all_200ms_cubic-bezier(0.4,0,0.2,1))]";
+var notificationCenterFilterActiveClasses = "bg-[var(--tiger-surface,#ffffff)] text-[var(--tiger-text,#111827)] shadow-sm";
+var notificationCenterFilterIdleClasses = "text-[var(--tiger-text-muted,#6b7280)] hover:text-[var(--tiger-text,#111827)]";
+
+// src/components/NotificationCenter.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var getGroupKey = (group, index) => {
   return group.key ?? group.title ?? index;
@@ -193,8 +221,8 @@ var NotificationCenter = ({
       "div",
       {
         className: classNames(
-          "group relative flex items-start gap-3.5 w-full p-3.5 rounded-xl transition-all duration-300 hover:bg-gray-50/60 dark:hover:bg-gray-800/30",
-          !isRead ? "bg-blue-50/20 dark:bg-blue-950/5 hover:bg-blue-50/40 dark:hover:bg-blue-950/10 border-l-[3px] border-l-blue-500/80 -ml-[3px] pl-[calc(0.875rem-3px)]" : "border-l-[3px] border-l-transparent -ml-[3px] pl-[calc(0.875rem-3px)]"
+          notificationCenterItemClasses,
+          isRead ? notificationCenterReadItemClasses : notificationCenterUnreadItemClasses
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
@@ -206,20 +234,20 @@ var NotificationCenter = ({
                     tag: "span",
                     size: "sm",
                     weight: isRead ? "normal" : "semibold",
-                    className: isRead ? "text-gray-600 dark:text-gray-400" : "text-gray-900 dark:text-gray-100",
+                    className: isRead ? notificationCenterReadTitleClasses : notificationCenterUnreadTitleClasses,
                     children: item.title
                   }
                 ),
-                !isRead && /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-blue-500 dark:bg-blue-400 shrink-0 shadow-sm shadow-blue-500/40 animate-pulse" })
+                !isRead && /* @__PURE__ */ jsx("span", { className: notificationCenterUnreadDotClasses })
               ] }),
-              timeText ? /* @__PURE__ */ jsx("span", { className: "text-[11px] text-gray-400 dark:text-gray-500 font-medium whitespace-nowrap flex-shrink-0 self-center", children: timeText }) : null
+              timeText ? /* @__PURE__ */ jsx("span", { className: notificationCenterTimeClasses, children: timeText }) : null
             ] }),
             item.description ? /* @__PURE__ */ jsx(
               "div",
               {
                 className: classNames(
                   "mt-1 text-xs leading-relaxed line-clamp-2",
-                  isRead ? "text-gray-500 dark:text-gray-400" : "text-gray-600 dark:text-gray-300"
+                  isRead ? notificationCenterReadDescriptionClasses : notificationCenterUnreadDescriptionClasses
                 ),
                 children: item.description
               }
@@ -230,7 +258,7 @@ var NotificationCenter = ({
             {
               size: "sm",
               variant: "ghost",
-              className: "opacity-0 group-hover:opacity-100 focus:opacity-100 rounded-full px-2.5 py-1 text-[11px] font-semibold transition-all duration-200 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 border-0 flex-shrink-0 self-center",
+              className: notificationCenterItemActionClasses,
               onClick: (event) => {
                 event.stopPropagation();
                 if (manageReadState) {
@@ -252,10 +280,10 @@ var NotificationCenter = ({
   const renderList = (listItems) => {
     if (listItems.length === 0) {
       return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-14 px-4 text-center", children: [
-        /* @__PURE__ */ jsx("div", { className: "p-3.5 bg-gray-50 dark:bg-gray-900 rounded-full mb-3 shadow-inner", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: notificationCenterEmptyIconWrapperClasses, children: /* @__PURE__ */ jsx(
           "svg",
           {
-            className: "w-8 h-8 text-gray-400 dark:text-gray-600 animate-pulse",
+            className: notificationCenterEmptyIconClasses,
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
@@ -270,16 +298,7 @@ var NotificationCenter = ({
             )
           }
         ) }),
-        /* @__PURE__ */ jsx(
-          Text,
-          {
-            tag: "div",
-            size: "sm",
-            color: "muted",
-            className: "font-semibold text-gray-400 dark:text-gray-500",
-            children: emptyText
-          }
-        )
+        /* @__PURE__ */ jsx(Text, { tag: "div", size: "sm", color: "muted", className: notificationCenterEmptyTextClasses, children: emptyText })
       ] });
     }
     return /* @__PURE__ */ jsx(
@@ -295,7 +314,16 @@ var NotificationCenter = ({
       }
     );
   };
-  const content = loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-16", children: /* @__PURE__ */ jsx(Loading, { text: loadingText, className: "text-blue-500 dark:text-blue-400 font-medium" }) }) : resolvedGroups.length > 0 ? /* @__PURE__ */ jsx("div", { className: "-mx-4 -mb-4", children: /* @__PURE__ */ jsx(Tabs, { type: "line", size: "small", activeKey: currentGroupKey, onActiveKeyChange: 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) });
+  const content = loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-16", children: /* @__PURE__ */ jsx(Loading, { text: loadingText, className: notificationCenterLoadingClasses }) }) : resolvedGroups.length > 0 ? /* @__PURE__ */ jsx("div", { className: "-mx-4 -mb-4", children: /* @__PURE__ */ jsx(
+    Tabs,
+    {
+      type: "line",
+      size: "small",
+      activeKey: currentGroupKey,
+      onActiveKeyChange: 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",
     {
@@ -308,7 +336,7 @@ var NotificationCenter = ({
         Card,
         {
           variant: "bordered",
-          className: "w-full rounded-2xl border border-gray-100/80 dark:border-gray-800/80 bg-white/95 dark:bg-gray-950/90 backdrop-blur-md shadow-[0_8px_30px_rgb(0,0,0,0.04)] dark:shadow-[0_8px_30px_rgb(0,0,0,0.2)] transition-all duration-300 overflow-hidden",
+          className: notificationCenterCardClasses,
           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: [
@@ -318,11 +346,11 @@ var NotificationCenter = ({
                     tag: "div",
                     size: "base",
                     weight: "bold",
-                    className: "text-gray-900 dark:text-gray-100",
+                    className: notificationCenterTitleClasses,
                     children: title
                   }
                 ),
-                totalUnread > 0 ? /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-[11px] font-bold rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-sm shadow-blue-500/20 animate-pulse", children: totalUnread }) : null
+                totalUnread > 0 ? /* @__PURE__ */ jsx("span", { className: notificationCenterUnreadBadgeClasses, children: totalUnread }) : null
               ] }),
               /* @__PURE__ */ jsx(
                 Button,
@@ -332,19 +360,19 @@ var NotificationCenter = ({
                   disabled: !hasUnread,
                   onClick: handleMarkAllRead,
                   className: classNames(
-                    "text-xs font-semibold transition-colors duration-200",
-                    hasUnread ? "text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300" : "text-gray-400 dark:text-gray-600"
+                    notificationCenterMarkAllBaseClasses,
+                    hasUnread ? notificationCenterMarkAllEnabledClasses : notificationCenterMarkAllDisabledClasses
                   ),
                   children: markAllReadText
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "inline-flex items-center gap-0.5 p-0.5 rounded-lg bg-gray-100/80 dark:bg-gray-800/60 self-start", children: filterButtons.map((option) => /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { className: notificationCenterFilterGroupClasses, children: filterButtons.map((option) => /* @__PURE__ */ jsx(
               "button",
               {
                 className: classNames(
-                  "px-3.5 py-1 text-xs font-semibold rounded-md transition-all duration-200",
-                  currentReadFilter === option.key ? "bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm scale-102" : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
+                  notificationCenterFilterButtonClasses,
+                  currentReadFilter === option.key ? notificationCenterFilterActiveClasses : notificationCenterFilterIdleClasses
                 ),
                 onClick: () => handleReadFilterChange(option.key),
                 children: option.label

package/dist/{chunk-3O2WHF3U.mjs → chunk-NCHUEGUW.mjs}

@@ -528,12 +528,12 @@ var LineChart = ({
     }
   );
   if (!showLegend) {
-    return /* @__PURE__ */ jsxs("div", { className: "inline-block relative", children: [
+    return /* @__PURE__ */ jsxs("div", { className: classNames("relative", responsive ? "block w-full min-w-0" : "inline-block"), children: [
       chart,
       tooltip
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+  return /* @__PURE__ */ jsxs("div", { className: classNames(wrapperClasses, responsive && "w-full min-w-0"), children: [
     chart,
     /* @__PURE__ */ jsx(
       ChartLegend,

package/dist/{chunk-VD55SSP7.mjs → chunk-PD6Q36OO.mjs}

@@ -31,6 +31,7 @@ import {
   mergeTigerLocale
 } from "@expcat/tigercat-core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var isPositiveFinite = (value) => Number.isFinite(value) && value > 0;
 var ImageCropper = forwardRef(
   ({
     src,
@@ -70,16 +71,23 @@ var ImageCropper = forwardRef(
     }, [displayWidth, displayHeight]);
     useEffect(() => {
       setImageLoaded(false);
+      imageRef.current = null;
       const img = new window.Image();
       img.crossOrigin = "anonymous";
       img.onload = () => {
-        imageRef.current = img;
+        const naturalWidth = img.naturalWidth;
+        const naturalHeight = img.naturalHeight;
+        if (!isPositiveFinite(naturalWidth) || !isPositiveFinite(naturalHeight)) return;
         const container = containerRef.current;
-        const containerW = container ? container.clientWidth : img.naturalWidth;
-        const containerH = container ? container.clientHeight || 400 : img.naturalHeight;
-        const ratio = Math.min(containerW / img.naturalWidth, containerH / img.naturalHeight, 1);
-        const dw = img.naturalWidth * ratio;
-        const dh = img.naturalHeight * ratio;
+        const measuredWidth = container?.clientWidth ?? 0;
+        const measuredHeight = container?.clientHeight ?? 0;
+        const containerW = isPositiveFinite(measuredWidth) ? measuredWidth : naturalWidth;
+        const containerH = isPositiveFinite(measuredHeight) ? measuredHeight : 400;
+        const ratio = Math.min(containerW / naturalWidth, containerH / naturalHeight, 1);
+        const dw = naturalWidth * ratio;
+        const dh = naturalHeight * ratio;
+        if (!isPositiveFinite(ratio) || !isPositiveFinite(dw) || !isPositiveFinite(dh)) return;
+        imageRef.current = img;
         setDisplayWidth(dw);
         setDisplayHeight(dh);
         displayDimsRef.current = { w: dw, h: dh };