@expcat/tigercat-react 0.2.27 → 0.3.69

package/dist/{chunk-LWW2LXCP.js → chunk-NEP3CS6S.js}

@@ -1,12 +1,12 @@
 'use strict';
 
 var chunkKQZ4F7FZ_js = require('./chunk-KQZ4F7FZ.js');
+var chunkDUWAV47E_js = require('./chunk-DUWAV47E.js');
 var chunk3QFHVAZT_js = require('./chunk-3QFHVAZT.js');
 var chunk6PBNFLM7_js = require('./chunk-6PBNFLM7.js');
 var chunkAX5XRD2Q_js = require('./chunk-AX5XRD2Q.js');
 var chunkM375I56K_js = require('./chunk-M375I56K.js');
 var chunkE5GD3H7L_js = require('./chunk-E5GD3H7L.js');
-var chunkDUWAV47E_js = require('./chunk-DUWAV47E.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -52,6 +52,10 @@ var LineChart = ({
   legendMarkerSize = 10,
   legendGap = 8,
   showTooltip = true,
+  showArea = false,
+  areaOpacity = 0.15,
+  pointHollow = false,
+  animated = false,
   tooltipFormatter,
   legendFormatter,
   title,
@@ -66,15 +70,15 @@ var LineChart = ({
 }) => {
   const [hoveredPointInfo, setHoveredPointInfo] = react.useState(null);
   const [tooltipPosition, setTooltipPosition] = react.useState({ x: 0, y: 0 });
+  const gradientPrefix = react.useMemo(() => tigercatCore.getLineGradientPrefix(), []);
   const innerRect = react.useMemo(
     () => tigercatCore.getChartInnerRect(width, height, padding),
     [width, height, padding]
   );
-  const resolvedSeries = react.useMemo(() => {
-    if (series && series.length > 0) return series;
-    if (data && data.length > 0) return [{ data }];
-    return [];
-  }, [series, data]);
+  const resolvedSeries = react.useMemo(
+    () => tigercatCore.resolveSeriesData(series, data),
+    [series, data]
+  );
   const {
     activeIndex,
     handleMouseEnter: handleSeriesHoverEnter,
@@ -115,7 +119,7 @@ var LineChart = ({
       return tigercatCore.createLinearScale(extent, [0, innerRect.width]);
     } else {
       const categories = [...new Set(xValues.map(String))];
-      return tigercatCore.createPointScale(categories, [0, innerRect.width], { padding: 0.1 });
+      return tigercatCore.createPointScale(categories, [0, innerRect.width], { padding: 0 });
     }
   }, [xScaleProp, isXNumeric, xValues, innerRect.width]);
   const resolvedYScale = react.useMemo(() => {
@@ -123,12 +127,9 @@ var LineChart = ({
     const extent = tigercatCore.getNumberExtent(yValues, { includeZero });
     return tigercatCore.createLinearScale(extent, [innerRect.height, 0]);
   }, [yScaleProp, yValues, includeZero, innerRect.height]);
-  const resolvedShowXAxis = showAxis && showXAxis;
-  const resolvedShowYAxis = showAxis && showYAxis;
-  const palette = react.useMemo(
-    () => colors && colors.length > 0 ? colors : [...tigercatCore.DEFAULT_CHART_COLORS],
-    [colors]
-  );
+  const shouldShowXAxis = showAxis && showXAxis;
+  const shouldShowYAxis = showAxis && showYAxis;
+  const palette = react.useMemo(() => tigercatCore.resolveChartPalette(colors), [colors]);
   const seriesData = react.useMemo(
     () => resolvedSeries.map((s, seriesIndex) => {
       const color = s.color ?? palette[seriesIndex % palette.length];
@@ -139,6 +140,8 @@ var LineChart = ({
         pointIndex
       }));
       const linePath = tigercatCore.createLinePath(points, curve);
+      const seriesShowArea = s.showArea ?? showArea;
+      const areaPath = seriesShowArea ? tigercatCore.createAreaPath(points, innerRect.height, curve) : "";
       const opacity = tigercatCore.getChartElementOpacity(seriesIndex, activeIndex, {
         activeOpacity,
         inactiveOpacity
@@ -148,13 +151,17 @@ var LineChart = ({
         seriesIndex,
         color,
         linePath,
+        areaPath,
+        showArea: seriesShowArea,
+        areaOpacity: s.areaOpacity ?? areaOpacity,
         points,
         opacity,
         strokeWidth: s.strokeWidth ?? strokeWidth,
         strokeDasharray: s.strokeDasharray,
         showPoints: s.showPoints ?? showPoints,
         pointSize: s.pointSize ?? pointSize,
-        pointColor: s.pointColor ?? color
+        pointColor: s.pointColor ?? color,
+        pointHollow: s.pointHollow ?? pointHollow
       };
     }),
     [
@@ -168,34 +175,32 @@ var LineChart = ({
       inactiveOpacity,
       strokeWidth,
       showPoints,
-      pointSize
+      pointSize,
+      showArea,
+      areaOpacity,
+      pointHollow,
+      innerRect.height
     ]
   );
   const legendItems = react.useMemo(
-    () => resolvedSeries.map((s, index) => ({
-      index,
-      label: legendFormatter ? legendFormatter(s, index) : s.name ?? `Series ${index + 1}`,
-      color: s.color ?? palette[index % palette.length],
-      active: activeIndex === null || activeIndex === index
-    })),
+    () => tigercatCore.buildChartLegendItems({
+      data: resolvedSeries,
+      palette,
+      activeIndex,
+      getLabel: (s, i) => legendFormatter ? legendFormatter(s, i) : s.name ?? `Series ${i + 1}`,
+      getColor: (s, i) => s.color ?? palette[i % palette.length]
+    }),
     [resolvedSeries, legendFormatter, palette, activeIndex]
   );
-  const formatTooltip = react.useCallback(
-    (datum, seriesIndex, _pointIndex, s) => {
-      if (tooltipFormatter) return tooltipFormatter(datum, seriesIndex, _pointIndex, s);
-      const seriesName = s?.name ?? `Series ${seriesIndex + 1}`;
-      const label = datum.label ?? String(datum.x);
-      return `${seriesName} \xB7 ${label}: ${datum.y}`;
-    },
-    [tooltipFormatter]
+  const tooltipContent = react.useMemo(
+    () => tigercatCore.resolveMultiSeriesTooltipContent(
+      hoveredPointInfo,
+      resolvedSeries,
+      tooltipFormatter,
+      tigercatCore.defaultSeriesXYTooltipFormatter
+    ),
+    [hoveredPointInfo, resolvedSeries, tooltipFormatter]
   );
-  const tooltipContent = react.useMemo(() => {
-    if (!hoveredPointInfo) return "";
-    const { seriesIndex, pointIndex } = hoveredPointInfo;
-    const s = resolvedSeries[seriesIndex];
-    const datum = s?.data[pointIndex];
-    return datum ? formatTooltip(datum, seriesIndex, pointIndex, s) : "";
-  }, [hoveredPointInfo, resolvedSeries, formatTooltip]);
   const handlePointMouseEnter = react.useCallback(
     (seriesIndex, pointIndex, event) => {
       setHoveredPointInfo({ seriesIndex, pointIndex });
@@ -237,6 +242,32 @@ var LineChart = ({
       desc,
       className: tigercatCore.classNames(className),
       children: [
+        (seriesData.some((sd) => sd.showArea) || animated) && /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+          animated && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+              .tiger-line-animated {
+                animation: tiger-line-draw 1.2s cubic-bezier(.4,0,.2,1) forwards;
+              }
+              @keyframes tiger-line-draw {
+                from { stroke-dashoffset: 1; }
+                to { stroke-dashoffset: 0; }
+              }
+            ` }),
+          seriesData.filter((sd) => sd.showArea).map((sd) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "linearGradient",
+            {
+              id: `${gradientPrefix}-${sd.seriesIndex}`,
+              x1: "0",
+              y1: "0",
+              x2: "0",
+              y2: "1",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: sd.color, stopOpacity: sd.areaOpacity }),
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: sd.color, stopOpacity: 0.02 })
+              ]
+            },
+            `area-grad-${sd.seriesIndex}`
+          ))
+        ] }),
         showGrid && /* @__PURE__ */ jsxRuntime.jsx(
           chunk3QFHVAZT_js.ChartGrid,
           {
@@ -251,7 +282,7 @@ var LineChart = ({
             strokeWidth: gridStrokeWidth
           }
         ),
-        resolvedShowXAxis && /* @__PURE__ */ jsxRuntime.jsx(
+        shouldShowXAxis && /* @__PURE__ */ jsxRuntime.jsx(
           chunkE5GD3H7L_js.ChartAxis,
           {
             scale: resolvedXScale,
@@ -263,7 +294,7 @@ var LineChart = ({
             label: xAxisLabel
           }
         ),
-        resolvedShowYAxis && /* @__PURE__ */ jsxRuntime.jsx(
+        shouldShowYAxis && /* @__PURE__ */ jsxRuntime.jsx(
           chunkE5GD3H7L_js.ChartAxis,
           {
             scale: resolvedYScale,
@@ -288,6 +319,16 @@ var LineChart = ({
             tabIndex: selectable ? 0 : void 0,
             onKeyDown: (e) => handleKeyDown(e, sd.seriesIndex),
             children: [
+              sd.showArea && sd.areaPath && /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: sd.areaPath,
+                  fill: `url(#${gradientPrefix}-${sd.seriesIndex})`,
+                  stroke: "none",
+                  className: "transition-opacity duration-300",
+                  "data-area-series": sd.seriesIndex
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "path",
                 {
@@ -295,32 +336,44 @@ var LineChart = ({
                   fill: "none",
                   stroke: sd.color,
                   strokeWidth: sd.strokeWidth,
-                  strokeDasharray: sd.strokeDasharray,
+                  strokeDasharray: animated ? sd.strokeDasharray ?? "1" : sd.strokeDasharray,
+                  strokeDashoffset: animated ? "1" : void 0,
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
-                  className: "transition-opacity duration-150",
+                  pathLength: animated ? 1 : void 0,
+                  className: tigercatCore.classNames(
+                    "transition-opacity duration-200",
+                    animated && "tiger-line-animated"
+                  ),
                   "data-line-series": sd.seriesIndex
                 }
               ),
-              sd.showPoints && sd.points.map((point) => /* @__PURE__ */ jsxRuntime.jsx(
-                "circle",
-                {
-                  cx: point.x,
-                  cy: point.y,
-                  r: sd.pointSize,
-                  fill: sd.pointColor,
-                  className: "transition-all duration-150",
-                  "data-point-index": point.pointIndex,
-                  onMouseEnter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
-                  onMouseMove: handlePointMouseMove,
-                  onMouseLeave: handlePointMouseLeave,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handlePointClick(sd.seriesIndex, point.pointIndex);
-                  }
-                },
-                `point-${sd.seriesIndex}-${point.pointIndex}`
-              ))
+              sd.showPoints && sd.points.map((point) => {
+                const isHovered = hoveredPointInfo?.seriesIndex === sd.seriesIndex && hoveredPointInfo?.pointIndex === point.pointIndex;
+                const hoverSize = sd.pointSize + 2;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "circle",
+                  {
+                    cx: point.x,
+                    cy: point.y,
+                    r: isHovered ? hoverSize : sd.pointSize,
+                    fill: sd.pointHollow ? "white" : sd.pointColor,
+                    stroke: sd.pointHollow ? sd.pointColor : "none",
+                    strokeWidth: sd.pointHollow ? 2 : 0,
+                    className: "transition-all duration-200 ease-out",
+                    style: isHovered ? { filter: `drop-shadow(0 0 4px ${sd.color})` } : void 0,
+                    "data-point-index": point.pointIndex,
+                    onMouseEnter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
+                    onMouseMove: handlePointMouseMove,
+                    onMouseLeave: handlePointMouseLeave,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handlePointClick(sd.seriesIndex, point.pointIndex);
+                    }
+                  },
+                  `point-${sd.seriesIndex}-${point.pointIndex}`
+                );
+              })
             ]
           },
           `series-${sd.seriesIndex}`

package/dist/chunk-NJCKTIWB.mjs

@@ -0,0 +1,255 @@
+import { Tabs, TabPane } from './chunk-6PXNWGR5.mjs';
+import { List } from './chunk-TGPQ4KET.mjs';
+import { Button } from './chunk-ENSLMM3L.mjs';
+import { Loading } from './chunk-AVUXDQYO.mjs';
+import { Text } from './chunk-LIV33O73.mjs';
+import { Card } from './chunk-3M2IG6IN.mjs';
+import { useMemo, useState, useEffect } from 'react';
+import { buildNotificationGroups, classNames, formatActivityTime } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var getGroupKey = (group, index) => {
+  return group.key ?? group.title ?? index;
+};
+var filterItems = (items, filter) => {
+  return items.filter((item) => {
+    const isRead = Boolean(item.read);
+    if (filter === "read") return isRead;
+    if (filter === "unread") return !isRead;
+    return true;
+  });
+};
+var NotificationCenter = ({
+  items = [],
+  groups,
+  groupBy,
+  groupOrder,
+  activeGroupKey,
+  defaultActiveGroupKey,
+  readFilter,
+  defaultReadFilter = "all",
+  loading = false,
+  loadingText = "\u52A0\u8F7D\u4E2D...",
+  emptyText = "\u6682\u65E0\u901A\u77E5",
+  title = "\u901A\u77E5\u4E2D\u5FC3",
+  allLabel = "\u5168\u90E8",
+  unreadLabel = "\u672A\u8BFB",
+  readLabel = "\u5DF2\u8BFB",
+  markAllReadText = "\u5168\u90E8\u6807\u8BB0\u5DF2\u8BFB",
+  markReadText = "\u6807\u8BB0\u5DF2\u8BFB",
+  markUnreadText = "\u6807\u8BB0\u672A\u8BFB",
+  manageReadState = false,
+  onGroupChange,
+  onReadFilterChange,
+  onMarkAllRead,
+  onItemClick,
+  onItemReadChange,
+  className,
+  ...props
+}) => {
+  const resolvedGroups = useMemo(
+    () => buildNotificationGroups(items, groups, groupBy, groupOrder),
+    [items, groups, groupBy, groupOrder]
+  );
+  const firstGroupKey = useMemo(() => {
+    return resolvedGroups.length > 0 ? getGroupKey(resolvedGroups[0], 0) : void 0;
+  }, [resolvedGroups]);
+  const [internalGroupKey, setInternalGroupKey] = useState(
+    defaultActiveGroupKey
+  );
+  const [internalReadFilter, setInternalReadFilter] = useState(defaultReadFilter);
+  const currentGroupKey = activeGroupKey ?? internalGroupKey ?? firstGroupKey;
+  const currentReadFilter = readFilter ?? internalReadFilter;
+  useEffect(() => {
+    if (activeGroupKey !== void 0) return;
+    if (resolvedGroups.length === 0) {
+      setInternalGroupKey(void 0);
+      return;
+    }
+    const keys = resolvedGroups.map((group, index) => getGroupKey(group, index));
+    if (!keys.some((key) => key === currentGroupKey)) {
+      setInternalGroupKey(keys[0]);
+    }
+  }, [activeGroupKey, currentGroupKey, resolvedGroups]);
+  const currentGroup = useMemo(() => {
+    if (resolvedGroups.length === 0) return void 0;
+    if (currentGroupKey === void 0) return resolvedGroups[0];
+    const index = resolvedGroups.findIndex(
+      (group, groupIndex) => getGroupKey(group, groupIndex) === currentGroupKey
+    );
+    return index >= 0 ? resolvedGroups[index] : resolvedGroups[0];
+  }, [currentGroupKey, resolvedGroups]);
+  currentGroup?.items ?? [];
+  const [readStateOverrides, setReadStateOverrides] = useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  useEffect(() => {
+    if (manageReadState) setReadStateOverrides(/* @__PURE__ */ new Map());
+  }, [items, manageReadState]);
+  const applyReadOverrides = (list) => {
+    if (!manageReadState || readStateOverrides.size === 0) return list;
+    return list.map((item) => {
+      const override = readStateOverrides.get(item.id);
+      return override !== void 0 ? { ...item, read: override } : item;
+    });
+  };
+  const effectiveGroups = useMemo(
+    () => resolvedGroups.map((group) => ({
+      ...group,
+      items: applyReadOverrides(group.items)
+    })),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [resolvedGroups, readStateOverrides]
+  );
+  const effectiveCurrentGroup = useMemo(() => {
+    if (effectiveGroups.length === 0) return void 0;
+    if (currentGroupKey === void 0) return effectiveGroups[0];
+    const index = effectiveGroups.findIndex(
+      (group, groupIndex) => getGroupKey(group, groupIndex) === currentGroupKey
+    );
+    return index >= 0 ? effectiveGroups[index] : effectiveGroups[0];
+  }, [currentGroupKey, effectiveGroups]);
+  const effectiveCurrentGroupItems = effectiveCurrentGroup?.items ?? [];
+  const effectiveItems = useMemo(() => applyReadOverrides(items), [items, readStateOverrides]);
+  const hasUnread = effectiveCurrentGroupItems.some((item) => !item.read);
+  const totalUnread = useMemo(() => {
+    const allItems = effectiveGroups.flatMap((group) => group.items);
+    if (allItems.length === 0) return effectiveItems.filter((item) => !item.read).length;
+    return allItems.filter((item) => !item.read).length;
+  }, [effectiveGroups, effectiveItems]);
+  const wrapperClasses = useMemo(
+    () => classNames("tiger-notification-center", "w-full", "flex", "flex-col", className),
+    [className]
+  );
+  const handleGroupChange = (key) => {
+    if (activeGroupKey === void 0) {
+      setInternalGroupKey(key);
+    }
+    onGroupChange?.(key);
+  };
+  const handleReadFilterChange = (next) => {
+    if (readFilter === void 0) {
+      setInternalReadFilter(next);
+    }
+    onReadFilterChange?.(next);
+  };
+  const handleMarkAllRead = () => {
+    if (manageReadState) {
+      setReadStateOverrides((prev) => {
+        const next = new Map(prev);
+        effectiveCurrentGroupItems.forEach((item) => next.set(item.id, true));
+        return next;
+      });
+    }
+    onMarkAllRead?.(currentGroupKey, effectiveCurrentGroupItems);
+  };
+  const renderItem = (item, index) => {
+    const isRead = Boolean(item.read);
+    const timeText = item.time ? formatActivityTime(item.time) : "";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames(
+          "flex items-start gap-3 w-full py-0.5 transition-colors",
+          !isRead && "border-l-2 border-l-[var(--tiger-primary,#2563eb)] -ml-[2px] pl-[calc(0.75rem-2px)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+              /* @__PURE__ */ jsx(Text, { tag: "span", size: "sm", weight: isRead ? "normal" : "semibold", children: item.title }),
+              timeText ? /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--tiger-text-muted,#6b7280)] whitespace-nowrap flex-shrink-0", children: timeText }) : null
+            ] }),
+            item.description ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-[var(--tiger-text-muted,#6b7280)] line-clamp-2 leading-relaxed", children: item.description }) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: "ghost",
+              onClick: (event) => {
+                event.stopPropagation();
+                if (manageReadState) {
+                  setReadStateOverrides((prev) => {
+                    const next = new Map(prev);
+                    next.set(item.id, !isRead);
+                    return next;
+                  });
+                }
+                onItemReadChange?.(item, !isRead);
+              },
+              children: isRead ? markUnreadText : markReadText
+            }
+          )
+        ]
+      }
+    );
+  };
+  const renderList = (listItems) => /* @__PURE__ */ jsx(
+    List,
+    {
+      dataSource: listItems,
+      split: true,
+      bordered: "divided",
+      hoverable: true,
+      emptyText,
+      onItemClick: (item, index) => onItemClick?.(item, index),
+      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,
+    {
+      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-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
+    }
+  ) });
+};
+var NotificationCenter_default = NotificationCenter;
+
+export { NotificationCenter, NotificationCenter_default };