@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/{chunk-AYFKHWJS.mjs → chunk-SOVB7HJF.mjs}

@@ -1,59 +1,70 @@
-import {
-  useResponsiveChartSize
-} from "./chunk-5JETWHLJ.mjs";
 import {
   useChartInteraction
-} from "./chunk-JZZPLKTW.mjs";
+} from "./chunk-7H7EKANG.mjs";
+import {
+  useResponsiveChartSize
+} from "./chunk-7P4R3NVO.mjs";
 import {
   ChartSeries
-} from "./chunk-SDLMB34Y.mjs";
+} from "./chunk-ST4NN6XV.mjs";
 import {
   ChartTooltip
-} from "./chunk-YORCCCQX.mjs";
+} from "./chunk-JX2WKSVM.mjs";
 import {
   ChartAxis
-} from "./chunk-RQSQXQN6.mjs";
+} from "./chunk-XZFHPHV5.mjs";
 import {
   ChartCanvas
-} from "./chunk-CUAXRBKO.mjs";
+} from "./chunk-OP77MPGN.mjs";
 import {
   ChartGrid
-} from "./chunk-677VSTPW.mjs";
+} from "./chunk-2PC625DX.mjs";
 import {
   ChartLegend
-} from "./chunk-F2ITBDUS.mjs";
+} from "./chunk-A4JRK5SM.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/BarChart.tsx
 import { useId, useMemo } from "react";
 import {
   classNames,
-  clampBarWidth,
   createBandScale,
   createLinearScale,
-  ensureBarMinHeight,
   getStableChartGradientPrefix,
   getBarValueLabelY,
-  getChartElementOpacity,
   getNumberExtent,
   resolveChartPalette,
   buildChartLegendItems,
+  chartLegendOrientationFromPosition,
+  DEFAULT_CHART_PADDING,
   resolveChartTooltipContent,
   defaultXYTooltipFormatter,
   barValueLabelClasses,
-  barValueLabelInsideClasses
+  barValueLabelInsideClasses,
+  barInteractiveClasses,
+  BAR_ANIMATED_CLASS,
+  layoutBarRects,
+  resolveBarCornerRadius,
+  getCartesianChartShellClasses,
+  chartMarkTabIndex,
+  nextChartRovingIndex,
+  isChartNavigationKey,
+  getChartLabels,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
-var DEFAULT_CARTESIAN_PADDING = { top: 24, right: 24, bottom: 52, left: 52 };
 var BarChart = ({
   width = 320,
   height = 200,
-  padding = DEFAULT_CARTESIAN_PADDING,
+  padding = DEFAULT_CHART_PADDING,
   responsive = false,
   data,
   xScale,
   yScale,
   barColor = "var(--tiger-primary,#2563eb)",
-  barRadius = 4,
+  barRadius,
   barPaddingInner = 0.2,
   barPaddingOuter = 0.1,
   showGrid = true,
@@ -99,14 +110,19 @@ var BarChart = ({
   onBarClick,
   onBarHover
 }) => {
+  const config = useTigerConfig();
+  const labels = useMemo(() => getChartLabels(mergeTigerLocale(config.locale)), [config.locale]);
   const gradientId = useId();
   const gradientPrefix = useMemo(
     () => getStableChartGradientPrefix("bar", gradientId),
     [gradientId]
   );
+  const interactive = hoverable || selectable || Boolean(onBarClick);
+  const corner = resolveBarCornerRadius(barRadius);
   const {
     tooltipPosition,
     resolvedHoveredIndex,
+    resolvedSelectedIndex,
     activeIndex,
     handleMouseEnter,
     handleMouseMove,
@@ -115,8 +131,7 @@ var BarChart = ({
     handleKeyDown,
     handleLegendClick,
     handleLegendHover,
-    handleLegendLeave,
-    wrapperClasses
+    handleLegendLeave
   } = useChartInteraction({
     hoverable,
     showTooltip,
@@ -132,8 +147,8 @@ var BarChart = ({
       onBarHover?.(index, index !== null ? data[index] : null);
     },
     onSelectedIndexChange,
-    callbacks: {
-      onClick: onBarClick
+    onClick: (index, datum) => {
+      if (datum !== void 0) onBarClick?.(index, datum);
     }
   });
   const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
@@ -143,7 +158,10 @@ var BarChart = ({
     responsive
   );
   const xDomain = useMemo(() => data.map((item) => String(item.x)), [data]);
-  const yValues = useMemo(() => data.map((item) => item.y), [data]);
+  const yValues = useMemo(
+    () => data.map((item) => item.y).filter((value) => Number.isFinite(value)),
+    [data]
+  );
   const resolvedXScale = useMemo(() => {
     if (xScale) return xScale;
     return createBandScale(xDomain, [0, innerRect.width], {
@@ -157,61 +175,39 @@ var BarChart = ({
     return createLinearScale(extent, [innerRect.height, 0]);
   }, [yScale, yValues, innerRect.height]);
   const palette = useMemo(() => resolveChartPalette(colors, barColor), [colors, barColor]);
-  const bars = useMemo(() => {
-    const scale = resolvedXScale;
-    const rawBandWidth = scale.bandwidth ?? (scale.step ? scale.step * 0.7 : innerRect.width / Math.max(1, data.length) * 0.8);
-    const bandWidth = clampBarWidth(rawBandWidth, barMaxWidth);
-    const bandOffset = rawBandWidth > bandWidth ? (rawBandWidth - bandWidth) / 2 : 0;
-    const baseline = resolvedYScale.map(0);
-    return data.map((item, index) => {
-      const xKey = scale.type === "linear" ? Number(item.x) : String(item.x);
-      const xPos = scale.map(xKey);
-      const barX = (scale.bandwidth ? xPos : xPos - rawBandWidth / 2) + bandOffset;
-      const barYValue = resolvedYScale.map(item.y);
-      let barHeight = Math.abs(baseline - barYValue);
-      let barY = Math.min(baseline, barYValue);
-      if (barMinHeight > 0 && barHeight > 0) {
-        const clamped = ensureBarMinHeight(barY, barHeight, baseline, barMinHeight);
-        barY = clamped.y;
-        barHeight = clamped.height;
-      }
-      const color = item.color ?? palette[index % palette.length];
-      const opacity = getChartElementOpacity(index, activeIndex, {
-        activeOpacity,
-        inactiveOpacity
-      });
-      return {
-        x: barX,
-        y: barY,
-        width: bandWidth,
-        height: barHeight,
-        color,
-        opacity,
-        datum: item,
-        index
-      };
-    });
-  }, [
-    resolvedXScale,
-    resolvedYScale,
-    data,
-    innerRect.width,
-    palette,
-    activeIndex,
-    activeOpacity,
-    inactiveOpacity,
-    barMinHeight,
-    barMaxWidth
-  ]);
+  const bars = useMemo(
+    () => layoutBarRects(data, resolvedXScale, resolvedYScale, {
+      barMaxWidth,
+      barMinHeight,
+      palette,
+      activeIndex,
+      activeOpacity,
+      inactiveOpacity,
+      innerWidth: innerRect.width
+    }),
+    [
+      resolvedXScale,
+      resolvedYScale,
+      data,
+      innerRect.width,
+      palette,
+      activeIndex,
+      activeOpacity,
+      inactiveOpacity,
+      barMinHeight,
+      barMaxWidth
+    ]
+  );
   const legendItems = useMemo(
     () => buildChartLegendItems({
       data,
       palette,
       activeIndex,
+      selectedIndex: resolvedSelectedIndex,
       getLabel: (d, i) => legendFormatter ? legendFormatter(d, i) : d.label ?? String(d.x),
       getColor: (d, i) => d.color ?? palette[i % palette.length]
     }),
-    [data, legendFormatter, palette, activeIndex]
+    [data, legendFormatter, palette, activeIndex, resolvedSelectedIndex]
   );
   const tooltipContent = useMemo(
     () => resolveChartTooltipContent(
@@ -224,6 +220,21 @@ var BarChart = ({
   );
   const shouldShowXAxis = showAxis && showXAxis;
   const shouldShowYAxis = showAxis && showYAxis;
+  const visualActive = bars.findIndex((bar) => bar.index === (activeIndex ?? resolvedHoveredIndex));
+  const handleBarKeyDown = (event, visualIndex) => {
+    if (isChartNavigationKey(event.key)) {
+      event.preventDefault();
+      const nextVisual = nextChartRovingIndex(visualIndex, event.key, bars.length);
+      const next = bars[nextVisual];
+      const node = event.currentTarget.parentElement?.querySelector(
+        `[data-bar-index="${next.index}"]`
+      );
+      if (node instanceof SVGElement) node.focus();
+      handleMouseEnter(next.index, event);
+      return;
+    }
+    handleKeyDown(event, bars[visualIndex].index);
+  };
   const chart = /* @__PURE__ */ jsxs(
     ChartCanvas,
     {
@@ -233,7 +244,6 @@ var BarChart = ({
       responsive,
       title,
       desc,
-      className: classNames(className),
       onResolvedSizeChange,
       children: [
         gradient && /* @__PURE__ */ jsx("defs", { children: bars.map((bar) => /* @__PURE__ */ jsxs(
@@ -288,43 +298,43 @@ var BarChart = ({
             label: yAxisLabel
           }
         ),
-        /* @__PURE__ */ jsx(ChartSeries, { data, type: "bar", children: bars.map((bar) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(ChartSeries, { data, type: "bar", children: bars.map((bar, visualIndex) => /* @__PURE__ */ jsx(
           "rect",
           {
             x: bar.x,
             y: bar.y,
             width: bar.width,
             height: bar.height,
-            rx: barRadius,
-            ry: barRadius,
+            rx: corner.rx,
+            ry: corner.ry,
             fill: gradient ? `url(#${gradientPrefix}-${bar.index})` : bar.color,
             opacity: bar.opacity,
             className: classNames(
-              "transition-[opacity,filter] [transition-duration:var(--tiger-motion-duration-base,200ms)] [transition-timing-function:var(--tiger-motion-ease-decelerate,ease-out)]",
-              (hoverable || selectable) && "cursor-pointer hover:brightness-110"
+              animated && BAR_ANIMATED_CLASS,
+              interactive && barInteractiveClasses
             ),
-            style: {
-              rx: `var(--tiger-chart-bar-radius, ${barRadius}px)`,
-              ry: `var(--tiger-chart-bar-radius, ${barRadius}px)`,
-              ...animated ? {
-                transition: "y var(--tiger-motion-duration-slow,600ms) var(--tiger-motion-ease-emphasized,cubic-bezier(.4,0,.2,1)), height var(--tiger-motion-duration-slow,600ms) var(--tiger-motion-ease-emphasized,cubic-bezier(.4,0,.2,1)), opacity var(--tiger-motion-duration-base,200ms) var(--tiger-motion-ease-decelerate,ease-out), filter var(--tiger-motion-duration-base,200ms) var(--tiger-motion-ease-decelerate,ease-out)"
-              } : null
-            },
-            tabIndex: selectable ? 0 : void 0,
-            role: selectable ? "button" : "img",
-            "aria-label": bar.datum.label ?? String(bar.datum.x),
+            style: corner.style ? {
+              rx: "var(--tiger-chart-bar-radius, 4px)",
+              ry: "var(--tiger-chart-bar-radius, 4px)"
+            } : void 0,
+            tabIndex: interactive ? chartMarkTabIndex(visualIndex, visualActive < 0 ? null : visualActive) : void 0,
+            role: interactive ? "button" : void 0,
+            "aria-hidden": interactive ? void 0 : true,
+            "aria-label": interactive ? bar.datum.label ?? defaultXYTooltipFormatter(bar.datum, bar.index) : void 0,
             "data-bar-index": bar.index,
             onMouseEnter: (e) => handleMouseEnter(bar.index, e),
             onMouseMove: handleMouseMove,
             onMouseLeave: handleMouseLeave,
             onClick: () => handleClick(bar.index),
-            onKeyDown: (e) => handleKeyDown(e, bar.index)
+            onKeyDown: (e) => handleBarKeyDown(e, visualIndex)
           },
           `bar-${bar.index}`
         )) }),
         showValueLabels && bars.map((bar) => {
           const labelText = valueLabelFormatter ? valueLabelFormatter(bar.datum, bar.index) : String(bar.datum.y);
-          const labelY = getBarValueLabelY(bar.y, bar.height, valueLabelPosition, 8);
+          const labelY = getBarValueLabelY(bar.y, bar.height, valueLabelPosition, 8, {
+            negative: bar.negative
+          });
           const isInside = valueLabelPosition === "inside";
           return /* @__PURE__ */ jsx(
             "text",
@@ -332,7 +342,7 @@ var BarChart = ({
               x: bar.x + bar.width / 2,
               y: labelY,
               textAnchor: "middle",
-              dominantBaseline: isInside ? "central" : "auto",
+              dominantBaseline: isInside ? "central" : bar.negative ? "hanging" : "auto",
               className: isInside ? barValueLabelInsideClasses : barValueLabelClasses,
               opacity: bar.opacity,
               "data-value-label": "",
@@ -353,29 +363,35 @@ var BarChart = ({
       y: tooltipPosition.y
     }
   );
-  if (!showLegend) {
-    return /* @__PURE__ */ jsxs("div", { className: classNames("relative", responsive ? "block w-full min-w-0" : "inline-block"), children: [
-      chart,
-      tooltip
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: classNames(wrapperClasses, responsive && "w-full min-w-0"), children: [
-    chart,
-    /* @__PURE__ */ jsx(
-      ChartLegend,
-      {
-        items: legendItems,
-        position: legendPosition,
-        markerSize: legendMarkerSize,
-        gap: legendGap,
-        interactive: hoverable || selectable,
-        onItemClick: handleLegendClick,
-        onItemHover: handleLegendHover,
-        onItemLeave: handleLegendLeave
-      }
-    ),
-    tooltip
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: getCartesianChartShellClasses({
+        showLegend,
+        legendPosition,
+        responsive,
+        className
+      }),
+      children: [
+        chart,
+        showLegend ? /* @__PURE__ */ jsx(
+          ChartLegend,
+          {
+            items: legendItems,
+            orientation: chartLegendOrientationFromPosition(legendPosition),
+            markerSize: legendMarkerSize,
+            gap: legendGap,
+            interactive: hoverable || selectable,
+            ariaLabel: labels.legendAriaLabel,
+            onItemClick: handleLegendClick,
+            onItemHover: handleLegendHover,
+            onItemLeave: handleLegendLeave
+          }
+        ) : null,
+        tooltip
+      ]
+    }
+  );
 };
 var BarChart_default = BarChart;
 

package/dist/{chunk-SDLMB34Y.mjs → chunk-ST4NN6XV.mjs}

@@ -1,6 +1,7 @@
 // src/components/ChartSeries.tsx
 import {
-  classNames
+  classNames,
+  getChartSeriesPaint
 } from "@expcat/tigercat-core";
 import { jsx } from "react/jsx-runtime";
 var ChartSeries = ({
@@ -14,6 +15,7 @@ var ChartSeries = ({
   ...props
 }) => {
   const content = typeof children === "function" ? children({ data, name, color, opacity, type }) : children;
+  const paint = getChartSeriesPaint(type, color);
   return /* @__PURE__ */ jsx(
     "g",
     {
@@ -21,8 +23,8 @@ var ChartSeries = ({
       className: classNames(className),
       "data-series-name": name,
       "data-series-type": type,
-      fill: color,
-      stroke: color,
+      fill: paint.fill,
+      stroke: paint.stroke,
       opacity,
       children: content
     }

package/dist/{chunk-ZATZRXMW.mjs → chunk-SUHSOVWP.mjs}

@@ -1,32 +1,36 @@
 import {
   Timeline
-} from "./chunk-QB5472NM.mjs";
+} from "./chunk-4DFN6RZ4.mjs";
 import {
   Link
-} from "./chunk-XZVQ3PJS.mjs";
+} from "./chunk-WQMOFDAY.mjs";
 import {
   Loading
-} from "./chunk-I2BENK5X.mjs";
+} from "./chunk-VW6RNQK4.mjs";
 import {
   Tag
-} from "./chunk-7EXOY7GD.mjs";
+} from "./chunk-FVA5VKN2.mjs";
 import {
   Text
-} from "./chunk-HLS4CHWX.mjs";
+} from "./chunk-VDBLI5Y3.mjs";
 import {
   Card
-} from "./chunk-IXV5YBCZ.mjs";
+} from "./chunk-WCIUNNIN.mjs";
 import {
   Avatar
-} from "./chunk-OO562MFD.mjs";
+} from "./chunk-3KBFOO2E.mjs";
+import {
+  Button
+} from "./chunk-WFLXJOFU.mjs";
 import {
   useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/ActivityFeed.tsx
 import { useMemo } from "react";
 import {
   classNames,
+  EMPTY_ACTIVITY_ITEMS,
   buildActivityGroups,
   formatActivityTime,
   getActivityFeedLabels,
@@ -39,66 +43,63 @@ import {
   activityItemHeaderClasses,
   activityItemTitleGroupClasses,
   activityItemDescriptionClasses,
-  activityItemActionsClasses
+  activityItemActionsClasses,
+  activityFeedActionClasses,
+  activityFeedItemSurfaceClasses,
+  activityFeedAvatarClasses,
+  activityFeedTitleClasses,
+  activityFeedTimeClasses,
+  activityFeedDescriptionClasses,
+  activityFeedStateCardClasses,
+  activityFeedLoadingClasses,
+  activityFeedEmptyIconClasses,
+  activityFeedGroupMarkerClasses,
+  activityFeedGroupTitleClasses,
+  activityFeedDotBaseClasses,
+  activityFeedDotPulseBaseClasses,
+  getActivityFeedDotClasses
 } 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}`;
+  const onClick = (event) => {
+    if (action.href === "#" || action.onClick) event?.preventDefault();
+    if (action.disabled) return;
+    action.onClick?.(item, action);
+  };
+  if (!action.href) {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        variant: "ghost",
+        disabled: action.disabled,
+        className: activityFeedActionClasses,
+        onClick,
+        children: action.label
+      },
+      key
+    );
+  }
   return /* @__PURE__ */ jsx(
     Link,
     {
       size: "sm",
       variant: "primary",
       underline: false,
-      href: action.href,
+      href: action.disabled ? void 0 : action.href,
       target: action.target,
       disabled: action.disabled,
       className: activityFeedActionClasses,
-      onClick: () => action.onClick?.(item, action),
+      tabIndex: action.disabled ? -1 : void 0,
+      onClick,
       children: action.label
     },
     key
   );
 };
 var ActivityFeed = ({
-  items = [],
+  items = EMPTY_ACTIVITY_ITEMS,
   groups,
   groupBy,
   groupOrder,
@@ -112,6 +113,8 @@ var ActivityFeed = ({
   showGroupTitle = true,
   renderItem,
   renderGroupHeader,
+  renderLoading,
+  renderEmpty,
   className,
   ...props
 }) => {
@@ -127,8 +130,8 @@ var ActivityFeed = ({
   const resolvedLoadingText = resolveLocaleText(labels.loadingText, loadingText);
   const resolvedEmptyText = resolveLocaleText(labels.emptyText, emptyText);
   const resolvedGroups = useMemo(
-    () => buildActivityGroups(items, groups, groupBy, groupOrder),
-    [items, groups, groupBy, groupOrder]
+    () => buildActivityGroups(items, groups, groupBy, groupOrder, labels.otherGroupTitle),
+    [items, groups, groupBy, groupOrder, labels.otherGroupTitle]
   );
   const wrapperClasses = classNames(
     "tiger-activity-feed",
@@ -141,8 +144,8 @@ var ActivityFeed = ({
   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 descriptionText = item.description ?? (item.title && (typeof item.content === "string" || typeof item.content === "number") ? String(item.content) : void 0);
+    const timeText = showTime ? formatActivityTime(item.time, mergedLocale) : "";
     const actionNodes = item.actions?.map(
       (action, actionIndex) => renderAction(item, action, actionIndex)
     );
@@ -189,13 +192,14 @@ var ActivityFeed = ({
       ] })
     ] }) });
   };
-  if (loading) {
+  const feedLabel = props["aria-labelledby"] ? void 0 : props["aria-label"] ?? labels.listAriaLabel;
+  if (loading && resolvedGroups.length === 0) {
     return /* @__PURE__ */ jsx(
       "div",
       {
         className: wrapperClasses,
         role: "feed",
-        "aria-label": "Activity",
+        "aria-label": feedLabel,
         "aria-busy": true,
         ...props,
         "data-tiger-activity-feed": true,
@@ -205,7 +209,7 @@ var ActivityFeed = ({
             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: resolvedLoadingText, className: activityFeedLoadingClasses }) })
+            children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: renderLoading?.() ?? /* @__PURE__ */ jsx(Loading, { text: resolvedLoadingText, className: activityFeedLoadingClasses }) })
           }
         )
       }
@@ -217,7 +221,7 @@ var ActivityFeed = ({
       {
         className: wrapperClasses,
         role: "feed",
-        "aria-label": "Activity",
+        "aria-label": feedLabel,
         ...props,
         "data-tiger-activity-feed": true,
         children: /* @__PURE__ */ jsx(
@@ -226,10 +230,11 @@ var ActivityFeed = ({
             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: [
+            children: renderEmpty?.() ?? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 px-4", children: [
               /* @__PURE__ */ jsx(
                 "svg",
                 {
+                  "aria-hidden": "true",
                   className: activityFeedEmptyIconClasses,
                   fill: "none",
                   viewBox: "0 0 24 24",
@@ -257,7 +262,8 @@ var ActivityFeed = ({
     {
       className: wrapperClasses,
       role: "feed",
-      "aria-label": "Activity",
+      "aria-label": feedLabel,
+      "aria-busy": loading || void 0,
       ...props,
       "data-tiger-activity-feed": true,
       children: resolvedGroups.map((group, groupIndex) => {
@@ -265,7 +271,7 @@ var ActivityFeed = ({
         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: [
+          showGroupTitle ? headerNode ?? (groupTitle ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
             /* @__PURE__ */ jsx("span", { className: activityFeedGroupMarkerClasses }),
             /* @__PURE__ */ jsx(
               Text,
@@ -277,7 +283,7 @@ var ActivityFeed = ({
                 children: groupTitle
               }
             )
-          ] }) : null,
+          ] }) : null) : null,
           /* @__PURE__ */ jsx(
             Timeline,
             {
@@ -286,7 +292,7 @@ var ActivityFeed = ({
                 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: [
+                return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center w-2.5 h-2.5", children: [
                   dotClasses.pulse ? /* @__PURE__ */ jsx("span", { className: `${activityFeedDotPulseBaseClasses} ${dotClasses.pulse}` }) : null,
                   /* @__PURE__ */ jsx("span", { className: `${activityFeedDotBaseClasses} ${dotClasses.dot}` })
                 ] });