@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/{chunk-QU3QXUTC.mjs → chunk-KJB2OIG7.mjs}

@@ -1,64 +1,63 @@
 import {
   TabPane,
   Tabs
-} from "./chunk-Z3CRHC5F.mjs";
+} from "./chunk-4BJCH6FI.mjs";
 import {
   List
-} from "./chunk-Y6UH3EKE.mjs";
-import {
-  Button
-} from "./chunk-5TE7KLE5.mjs";
+} from "./chunk-ZGXC47M5.mjs";
 import {
   Loading
-} from "./chunk-I2BENK5X.mjs";
+} from "./chunk-BNCUJLRV.mjs";
 import {
   Text
-} from "./chunk-HLS4CHWX.mjs";
+} from "./chunk-VDBLI5Y3.mjs";
 import {
   Card
-} from "./chunk-IXV5YBCZ.mjs";
+} from "./chunk-WCIUNNIN.mjs";
+import {
+  Button
+} from "./chunk-WFLXJOFU.mjs";
 import {
   useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/NotificationCenter.tsx
 import { useMemo, useEffect, useState, useCallback } from "react";
 import {
   classNames,
+  EMPTY_NOTIFICATION_ITEMS,
   buildNotificationGroups,
   formatActivityTime,
+  formatBadgeCountLabel,
+  shouldUseNotificationTabs,
   getNotificationCenterLabels,
   mergeTigerLocale,
-  resolveLocaleText
+  resolveLocaleText,
+  notificationCenterItemClasses,
+  notificationCenterUnreadItemClasses,
+  notificationCenterReadItemClasses,
+  notificationCenterReadTitleClasses,
+  notificationCenterUnreadTitleClasses,
+  notificationCenterUnreadDotClasses,
+  notificationCenterTimeClasses,
+  notificationCenterReadDescriptionClasses,
+  notificationCenterUnreadDescriptionClasses,
+  notificationCenterItemActionClasses,
+  notificationCenterEmptyIconWrapperClasses,
+  notificationCenterEmptyIconClasses,
+  notificationCenterEmptyTextClasses,
+  notificationCenterLoadingClasses,
+  notificationCenterCardClasses,
+  notificationCenterTitleClasses,
+  notificationCenterUnreadBadgeClasses,
+  notificationCenterMarkAllBaseClasses,
+  notificationCenterMarkAllEnabledClasses,
+  notificationCenterMarkAllDisabledClasses,
+  notificationCenterFilterGroupClasses,
+  notificationCenterFilterButtonClasses,
+  notificationCenterFilterActiveClasses,
+  notificationCenterFilterIdleClasses
 } 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;
@@ -72,7 +71,7 @@ var filterItems = (items, filter) => {
   });
 };
 var NotificationCenter = ({
-  items = [],
+  items = EMPTY_NOTIFICATION_ITEMS,
   groups,
   groupBy,
   groupOrder,
@@ -120,8 +119,8 @@ var NotificationCenter = ({
   const resolvedMarkReadText = resolveLocaleText(labels.markReadText, markReadText);
   const resolvedMarkUnreadText = resolveLocaleText(labels.markUnreadText, markUnreadText);
   const resolvedGroups = useMemo(
-    () => buildNotificationGroups(items, groups, groupBy, groupOrder),
-    [items, groups, groupBy, groupOrder]
+    () => buildNotificationGroups(items, groups, groupBy, groupOrder, labels.defaultGroupTitle),
+    [items, groups, groupBy, groupOrder, labels.defaultGroupTitle]
   );
   const firstGroupKey = useMemo(() => {
     return resolvedGroups.length > 0 ? getGroupKey(resolvedGroups[0], 0) : void 0;
@@ -147,8 +146,18 @@ var NotificationCenter = ({
     () => /* @__PURE__ */ new Map()
   );
   useEffect(() => {
-    if (manageReadState) setReadStateOverrides(/* @__PURE__ */ new Map());
-  }, [items, manageReadState]);
+    if (!manageReadState) return;
+    setReadStateOverrides((prev) => {
+      if (prev.size === 0) return prev;
+      const source = (groups ?? []).flatMap((group) => group.items ?? []).concat(items);
+      const next = new Map(prev);
+      for (const [id, read] of prev) {
+        const item = source.find((entry) => entry.id === id);
+        if (!item || Boolean(item.read) === read) next.delete(id);
+      }
+      return next;
+    });
+  }, [groups, items, manageReadState]);
   const applyReadOverrides = useCallback(
     (list) => {
       if (!manageReadState || readStateOverrides.size === 0) return list;
@@ -166,23 +175,12 @@ var NotificationCenter = ({
     })),
     [resolvedGroups, applyReadOverrides]
   );
-  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 = useMemo(
-    () => effectiveCurrentGroup?.items ?? [],
-    [effectiveCurrentGroup]
-  );
   const effectiveItems = useMemo(() => applyReadOverrides(items), [items, applyReadOverrides]);
-  const hasUnread = useMemo(
-    () => effectiveCurrentGroupItems.some((item) => !item.read),
-    [effectiveCurrentGroupItems]
-  );
+  const allManagedItems = useMemo(() => {
+    const grouped = effectiveGroups.flatMap((group) => group.items);
+    return grouped.length > 0 ? grouped : effectiveItems;
+  }, [effectiveGroups, effectiveItems]);
+  const hasUnread = useMemo(() => allManagedItems.some((item) => !item.read), [allManagedItems]);
   const totalUnread = useMemo(() => {
     const allItems = effectiveGroups.flatMap((group) => group.items);
     if (allItems.length === 0) return effectiveItems.filter((item) => !item.read).length;
@@ -234,15 +232,15 @@ var NotificationCenter = ({
     if (manageReadState) {
       setReadStateOverrides((prev) => {
         const next = new Map(prev);
-        effectiveCurrentGroupItems.forEach((item) => next.set(item.id, true));
+        allManagedItems.forEach((item) => next.set(item.id, true));
         return next;
       });
     }
-    onMarkAllRead?.(currentGroupKey, effectiveCurrentGroupItems);
+    onMarkAllRead?.(void 0, allManagedItems);
   };
   const renderItem = (item, _index) => {
     const isRead = Boolean(item.read);
-    const timeText = item.time ? formatActivityTime(item.time) : "";
+    const timeText = formatActivityTime(item.time, mergedLocale);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -264,7 +262,7 @@ var NotificationCenter = ({
                     children: item.title
                   }
                 ),
-                !isRead && /* @__PURE__ */ jsx("span", { className: notificationCenterUnreadDotClasses })
+                !isRead && /* @__PURE__ */ jsx("span", { className: notificationCenterUnreadDotClasses, "aria-hidden": "true" })
               ] }),
               timeText ? /* @__PURE__ */ jsx("span", { className: notificationCenterTimeClasses, children: timeText }) : null
             ] }),
@@ -331,30 +329,37 @@ var NotificationCenter = ({
       List,
       {
         dataSource: listItems,
+        rowKey: "id",
         split: true,
-        bordered: "divided",
-        hoverable: true,
+        hoverable: typeof onItemClick === "function",
         emptyText: resolvedEmptyText,
-        onItemClick: (item, index) => onItemClick?.(item, index),
+        onItemClick,
         renderItem
       }
     );
   };
-  const content = loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-16", children: /* @__PURE__ */ jsx(Loading, { text: resolvedLoadingText, className: notificationCenterLoadingClasses }) }) : resolvedGroups.length > 0 ? /* @__PURE__ */ jsx("div", { className: "-mx-4 -mb-4", children: /* @__PURE__ */ jsx(
+  const listBody = shouldUseNotificationTabs(groups, groupBy) ? resolvedGroups.length > 0 ? /* @__PURE__ */ jsx("div", { className: "-mx-4 -mb-4", children: /* @__PURE__ */ jsx(
     Tabs,
     {
       type: "line",
       size: "small",
+      swipeable: false,
       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) });
+  ) }) : /* @__PURE__ */ jsx("div", { className: "-mx-4 -mb-4 max-h-[380px] overflow-y-auto", children: renderList([]) }) : /* @__PURE__ */ jsx("div", { className: "-mx-4 -mb-4 max-h-[380px] overflow-y-auto", children: renderList(filteredFlatItems) });
+  const hasList = shouldUseNotificationTabs(groups, groupBy) ? resolvedGroups.length > 0 || filteredFlatItems.length > 0 : filteredFlatItems.length > 0;
+  const content = loading && !hasList ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-16", children: /* @__PURE__ */ jsx(Loading, { text: resolvedLoadingText, className: notificationCenterLoadingClasses }) }) : /* @__PURE__ */ jsxs("div", { className: "relative", "aria-busy": loading || void 0, children: [
+    listBody,
+    loading ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-[var(--tiger-surface,#ffffff)]/70", children: /* @__PURE__ */ jsx(Loading, { text: resolvedLoadingText, className: notificationCenterLoadingClasses }) }) : null
+  ] });
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: wrapperClasses,
       role: props.role ?? "region",
+      "aria-busy": loading || void 0,
       "aria-label": props["aria-label"] ?? (props["aria-labelledby"] ? void 0 : resolvedTitle),
       ...props,
       "data-tiger-notification-center": true,
@@ -376,7 +381,18 @@ var NotificationCenter = ({
                     children: resolvedTitle
                   }
                 ),
-                totalUnread > 0 ? /* @__PURE__ */ jsx("span", { className: notificationCenterUnreadBadgeClasses, children: totalUnread }) : null
+                totalUnread > 0 ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: notificationCenterUnreadBadgeClasses,
+                    "aria-label": formatBadgeCountLabel(
+                      labels.unreadCountText,
+                      totalUnread,
+                      mergedLocale?.locale
+                    ),
+                    children: totalUnread
+                  }
+                ) : null
               ] }),
               /* @__PURE__ */ jsx(
                 Button,
@@ -393,9 +409,12 @@ var NotificationCenter = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx("div", { className: notificationCenterFilterGroupClasses, children: filterButtons.map((option) => /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { className: notificationCenterFilterGroupClasses, role: "radiogroup", children: filterButtons.map((option) => /* @__PURE__ */ jsx(
               "button",
               {
+                type: "button",
+                role: "radio",
+                "aria-checked": currentReadFilter === option.key,
                 className: classNames(
                   notificationCenterFilterButtonClasses,
                   currentReadFilter === option.key ? notificationCenterFilterActiveClasses : notificationCenterFilterIdleClasses

package/dist/chunk-KJSNUS45.mjs

@@ -0,0 +1,23 @@
+// src/components/Col.tsx
+import { forwardRef, useMemo } from "react";
+import {
+  getColClasses,
+  getColMergedStyleVars
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var Col = forwardRef(function Col2({ span = 24, offset = 0, order, flex, children, className, style, ...divProps }, ref) {
+  const colClasses = useMemo(() => getColClasses({ flex, className }), [flex, className]);
+  const mergedStyle = useMemo(
+    () => ({
+      ...getColMergedStyleVars(span, offset, order, flex),
+      ...style
+    }),
+    [span, offset, order, flex, style]
+  );
+  return /* @__PURE__ */ jsx("div", { ref, className: colClasses, style: mergedStyle, ...divProps, children });
+});
+Col.displayName = "TigerCol";
+
+export {
+  Col
+};