@expcat/tigercat-vue 2.0.0-rc.2 → 2.0.4

package/dist/{chunk-3NQUEQJT.mjs → chunk-RID7A5V7.mjs}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-3MO7A4GU.mjs";
 import {
   Loading
-} from "./chunk-O6BN5R6J.mjs";
+} from "./chunk-AUMTHL6N.mjs";
 import {
   Tag
 } from "./chunk-342DH5CF.mjs";
@@ -37,6 +37,43 @@ import {
   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.ts
 var renderAction = (item, action, index) => {
   const key = action.key ?? `${item.id}-action-${index}`;
   return h(
@@ -49,7 +86,7 @@ var renderAction = (item, action, index) => {
       href: action.href,
       target: action.target,
       disabled: action.disabled,
-      className: "inline-flex items-center px-2.5 py-1 rounded-lg hover:bg-blue-50/50 dark:hover:bg-blue-950/20 text-xs font-semibold transition-all duration-200",
+      className: activityFeedActionClasses,
       onClick: () => action.onClick?.(item, action)
     },
     {
@@ -140,10 +177,7 @@ var ActivityFeed = defineComponent({
       return h(
         "div",
         {
-          class: classNames(
-            activityItemClasses,
-            "p-4 rounded-2xl border border-gray-100/70 dark:border-gray-800/40 bg-white/40 dark:bg-gray-900/15 backdrop-blur-sm shadow-sm transition-all duration-300 hover:shadow-md hover:shadow-gray-100/30 dark:hover:shadow-none hover:bg-white dark:hover:bg-gray-900/30 hover:-translate-y-0.5 w-full"
-          )
+          class: classNames(activityItemClasses, activityFeedItemSurfaceClasses)
         },
         [
           h("div", { class: activityItemLayoutClasses }, [
@@ -151,7 +185,7 @@ var ActivityFeed = defineComponent({
               size: "sm",
               src: item.user.avatar,
               text: item.user.name,
-              className: "shrink-0 ring-2 ring-white dark:ring-gray-900 shadow-sm transition-transform hover:scale-105 duration-200"
+              className: activityFeedAvatarClasses
             }) : null,
             h("div", { class: activityItemBodyClasses }, [
               h("div", { class: activityItemHeaderClasses }, [
@@ -162,7 +196,7 @@ var ActivityFeed = defineComponent({
                       tag: "div",
                       size: "sm",
                       weight: "semibold",
-                      class: "text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 transition-colors cursor-pointer truncate"
+                      class: activityFeedTitleClasses
                     },
                     { default: () => titleText }
                   ) : null,
@@ -182,7 +216,7 @@ var ActivityFeed = defineComponent({
                     tag: "div",
                     size: "xs",
                     color: "muted",
-                    class: "shrink-0 whitespace-nowrap font-medium text-gray-400 dark:text-gray-500"
+                    class: activityFeedTimeClasses
                   },
                   { default: () => timeText }
                 ) : null
@@ -195,7 +229,7 @@ var ActivityFeed = defineComponent({
                   color: "muted",
                   class: classNames(
                     activityItemDescriptionClasses,
-                    "text-gray-600 dark:text-gray-300 leading-relaxed pl-0.5 mt-1"
+                    activityFeedDescriptionClasses
                   )
                 },
                 { default: () => descriptionText }
@@ -219,7 +253,7 @@ var ActivityFeed = defineComponent({
       if (props.loading) {
         const loadingNode = slots.loading ? slots.loading() : h(Loading, {
           text: props.loadingText,
-          class: "text-blue-500 dark:text-blue-400 font-medium"
+          class: activityFeedLoadingClasses
         });
         return h(
           "div",
@@ -238,7 +272,7 @@ var ActivityFeed = defineComponent({
               {
                 variant: "bordered",
                 size: "sm",
-                className: "tiger-activity-feed-loading bg-white/40 dark:bg-gray-900/20 border-gray-100 dark:border-gray-800/80 backdrop-blur-sm rounded-2xl shadow-sm overflow-hidden"
+                className: classNames("tiger-activity-feed-loading", activityFeedStateCardClasses)
               },
               {
                 default: () => h("div", { class: "flex items-center justify-center py-8" }, loadingNode)
@@ -252,7 +286,7 @@ var ActivityFeed = defineComponent({
           h(
             "svg",
             {
-              class: "w-12 h-12 text-gray-300 dark:text-gray-600 mb-3 animate-pulse",
+              class: activityFeedEmptyIconClasses,
               fill: "none",
               viewBox: "0 0 24 24",
               stroke: "currentColor",
@@ -288,7 +322,7 @@ var ActivityFeed = defineComponent({
               {
                 variant: "bordered",
                 size: "sm",
-                className: "tiger-activity-feed-empty bg-white/40 dark:bg-gray-900/20 border-gray-100 dark:border-gray-800/80 backdrop-blur-sm rounded-2xl shadow-sm overflow-hidden"
+                className: classNames("tiger-activity-feed-empty", activityFeedStateCardClasses)
               },
               {
                 default: () => emptyNode
@@ -314,7 +348,7 @@ var ActivityFeed = defineComponent({
           return h("div", { key: group.key ?? groupIndex, class: "space-y-3" }, [
             props.showGroupTitle && groupTitle ? headerNode ?? h("div", { class: "flex items-center gap-2 mb-2" }, [
               h("span", {
-                class: "w-1.5 h-3.5 bg-blue-500 rounded-full dark:bg-blue-400 shadow-sm shadow-blue-500/20"
+                class: activityFeedGroupMarkerClasses
               }),
               h(
                 Text,
@@ -322,7 +356,7 @@ var ActivityFeed = defineComponent({
                   tag: "span",
                   size: "sm",
                   weight: "bold",
-                  class: "text-gray-900 dark:text-gray-100 uppercase tracking-wider"
+                  class: activityFeedGroupTitleClasses
                 },
                 { default: () => groupTitle }
               )
@@ -331,33 +365,15 @@ var ActivityFeed = defineComponent({
               Timeline,
               {
                 items: timelineItems,
-                style: {
-                  "--tiger-border": "rgba(156, 163, 175, 0.18)"
-                },
                 renderDot: (timelineItem) => {
                   const activity = timelineItem.activity;
                   const statusVariant = activity?.status?.variant ?? "default";
-                  const baseDotClass = "w-3 h-3 rounded-full border-2 border-white dark:border-gray-950 shadow-sm";
-                  let colorClass = "bg-gray-300 dark:bg-gray-700";
-                  let pulseClass = "";
-                  if (statusVariant === "success") {
-                    colorClass = "bg-emerald-500";
-                    pulseClass = "bg-emerald-500/30";
-                  } else if (statusVariant === "warning") {
-                    colorClass = "bg-amber-500";
-                    pulseClass = "bg-amber-500/30";
-                  } else if (statusVariant === "error" || statusVariant === "danger") {
-                    colorClass = "bg-rose-500";
-                    pulseClass = "bg-rose-500/30";
-                  } else if (statusVariant === "primary" || statusVariant === "info") {
-                    colorClass = "bg-blue-500";
-                    pulseClass = "bg-blue-500/30";
-                  }
+                  const dotClasses = getActivityFeedDotClasses(statusVariant);
                   return h("div", { class: "relative flex items-center justify-center w-4 h-4" }, [
-                    pulseClass ? h("span", {
-                      class: `absolute inline-flex h-full w-full rounded-full animate-ping opacity-75 ${pulseClass}`
+                    dotClasses.pulse ? h("span", {
+                      class: `${activityFeedDotPulseBaseClasses} ${dotClasses.pulse}`
                     }) : null,
-                    h("span", { class: `${baseDotClass} ${colorClass} relative z-10` })
+                    h("span", { class: `${activityFeedDotBaseClasses} ${dotClasses.dot}` })
                   ]);
                 }
               },

package/dist/{chunk-CFH5T3V2.mjs → chunk-S5RTMAQN.mjs}

@@ -1,9 +1,9 @@
 import {
   Modal
-} from "./chunk-D4APFWWS.mjs";
+} from "./chunk-IPGPLFUZ.mjs";
 import {
   ImageCropper
-} from "./chunk-7JT5ZIHC.mjs";
+} from "./chunk-BCU7GYF6.mjs";
 import {
   Button
 } from "./chunk-YZBQ6IR7.mjs";

package/dist/{chunk-SJ7W5I5H.mjs → chunk-TCV6YPH5.mjs}

@@ -3,7 +3,7 @@ import {
   useVueBodyScrollLock,
   useVueEscapeKey,
   useVueFocusTrap
-} from "./chunk-BDTPFPSB.mjs";
+} from "./chunk-Q7Y22OFX.mjs";
 import {
   useTigerConfig
 } from "./chunk-UOJOJBEU.mjs";

package/dist/{chunk-LFENEILY.mjs → chunk-WC5MKASU.mjs}

@@ -1,9 +1,13 @@
+import {
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay
+} from "./chunk-Q7Y22OFX.mjs";
 import {
   useTigerConfig
 } from "./chunk-UOJOJBEU.mjs";
 
 // src/components/TreeSelect.ts
-import { defineComponent, h, ref, computed, watch, onBeforeUnmount } from "vue";
+import { defineComponent, h, ref, computed } from "vue";
 import {
   treeSelectBaseClasses,
   treeSelectDropdownClasses,
@@ -130,6 +134,21 @@ var TreeSelect = defineComponent({
     const uncontrolledSearchValue = ref(props.defaultSearchValue);
     const searchQuery = computed(() => props.searchValue ?? uncontrolledSearchValue.value);
     const containerRef = ref(null);
+    const triggerRef = ref(null);
+    const dropdownRef = ref(null);
+    const overlay = useVueAnchoredOverlay({
+      enabled: isOpen,
+      referenceRef: triggerRef,
+      floatingRef: dropdownRef,
+      containerRef,
+      placement: "bottom-start",
+      offset: 4,
+      matchReferenceWidth: true,
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      onDismiss: closeDropdown
+    });
     const expandedKeys = ref(
       props.defaultExpandAll ? new Set(getAllTreeSelectKeys(props.treeData)) : /* @__PURE__ */ new Set()
     );
@@ -222,21 +241,6 @@ var TreeSelect = defineComponent({
         closeDropdown();
       }
     }
-    function handleClickOutside(e) {
-      if (containerRef.value && !containerRef.value.contains(e.target)) {
-        closeDropdown();
-      }
-    }
-    watch(isOpen, (val) => {
-      if (val) {
-        document.addEventListener("click", handleClickOutside);
-      } else {
-        document.removeEventListener("click", handleClickOutside);
-      }
-    });
-    onBeforeUnmount(() => {
-      document.removeEventListener("click", handleClickOutside);
-    });
     return () => {
       const containerClasses = classNames(treeSelectBaseClasses, coerceClassValue(attrs.class));
       return h("div", { ref: containerRef, class: containerClasses }, [
@@ -244,6 +248,7 @@ var TreeSelect = defineComponent({
         h(
           "button",
           {
+            ref: triggerRef,
             type: "button",
             class: getTreeSelectTriggerClasses(props.size, props.disabled, isOpen.value),
             ...getPickerComboboxAria({ expanded: isOpen.value, listboxId }),
@@ -284,91 +289,97 @@ var TreeSelect = defineComponent({
           ]
         ),
         // Dropdown
-        isOpen.value ? h(
-          "div",
-          {
-            ...getPickerListboxAria({ id: listboxId }),
-            class: treeSelectDropdownClasses
-          },
-          [
-            // Search
-            props.searchable ? h("input", {
-              type: "text",
-              class: treeSelectSearchClasses,
-              placeholder: resolveLocaleText(
-                "Search...",
-                mergedLocale.value?.common?.searchPlaceholder
-              ),
-              value: searchQuery.value,
-              "aria-label": resolveLocaleText(
-                "Search tree",
-                mergedLocale.value?.common?.searchPlaceholder
-              ),
-              onInput: (e) => updateSearchValue(e.target.value)
-            }) : null,
-            // Tree nodes
-            visibleNodes.value.length > 0 ? visibleNodes.value.map((flatNode) => {
-              const { node, level, hasChildren, isExpanded } = flatNode;
-              const selected = isSelected(node.key);
-              const indent = level * 20;
-              return h(
+        isOpen.value ? renderVueOverlayTeleport(
+          h(
+            "div",
+            {
+              ref: dropdownRef,
+              ...getPickerListboxAria({ id: listboxId }),
+              class: classNames(treeSelectDropdownClasses, overlay.floatingClasses.value),
+              style: overlay.floatingStyles.value,
+              "data-positioned": overlay.positioned.value
+            },
+            [
+              // Search
+              props.searchable ? h("input", {
+                type: "text",
+                class: treeSelectSearchClasses,
+                placeholder: resolveLocaleText(
+                  "Search...",
+                  mergedLocale.value?.common?.searchPlaceholder
+                ),
+                value: searchQuery.value,
+                "aria-label": resolveLocaleText(
+                  "Search tree",
+                  mergedLocale.value?.common?.searchPlaceholder
+                ),
+                onInput: (e) => updateSearchValue(e.target.value)
+              }) : null,
+              // Tree nodes
+              visibleNodes.value.length > 0 ? visibleNodes.value.map((flatNode) => {
+                const { node, level, hasChildren, isExpanded } = flatNode;
+                const selected = isSelected(node.key);
+                const indent = level * 20;
+                return h(
+                  "div",
+                  {
+                    key: node.key,
+                    ...getPickerOptionAria({ selected, disabled: !!node.disabled }),
+                    class: getTreeSelectNodeClasses(selected, !!node.disabled, props.size),
+                    style: { paddingLeft: `${indent + 8}px` },
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleNodeSelect(node);
+                    }
+                  },
+                  [
+                    // Expand toggle
+                    hasChildren ? h(
+                      "span",
+                      {
+                        class: classNames(
+                          "inline-flex items-center justify-center w-4 h-4 mr-1 transition-transform",
+                          isExpanded ? "rotate-90" : ""
+                        ),
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          toggleExpand(node.key);
+                        }
+                      },
+                      [
+                        h(
+                          "svg",
+                          {
+                            class: "w-3 h-3",
+                            viewBox: icon20ViewBox,
+                            fill: "currentColor"
+                          },
+                          [
+                            h("path", {
+                              d: chevronRightSolidIcon20PathD,
+                              "fill-rule": "evenodd",
+                              "clip-rule": "evenodd"
+                            })
+                          ]
+                        )
+                      ]
+                    ) : h("span", { class: "w-4 mr-1" }),
+                    // Label
+                    h("span", { class: "flex-1 truncate" }, node.label)
+                  ]
+                );
+              }) : h(
                 "div",
-                {
-                  key: node.key,
-                  ...getPickerOptionAria({ selected, disabled: !!node.disabled }),
-                  class: getTreeSelectNodeClasses(selected, !!node.disabled, props.size),
-                  style: { paddingLeft: `${indent + 8}px` },
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handleNodeSelect(node);
-                  }
-                },
-                [
-                  // Expand toggle
-                  hasChildren ? h(
-                    "span",
-                    {
-                      class: classNames(
-                        "inline-flex items-center justify-center w-4 h-4 mr-1 transition-transform",
-                        isExpanded ? "rotate-90" : ""
-                      ),
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        toggleExpand(node.key);
-                      }
-                    },
-                    [
-                      h(
-                        "svg",
-                        {
-                          class: "w-3 h-3",
-                          viewBox: icon20ViewBox,
-                          fill: "currentColor"
-                        },
-                        [
-                          h("path", {
-                            d: chevronRightSolidIcon20PathD,
-                            "fill-rule": "evenodd",
-                            "clip-rule": "evenodd"
-                          })
-                        ]
-                      )
-                    ]
-                  ) : h("span", { class: "w-4 mr-1" }),
-                  // Label
-                  h("span", { class: "flex-1 truncate" }, node.label)
-                ]
-              );
-            }) : h(
-              "div",
-              { class: treeSelectEmptyClasses },
-              resolveLocaleText(
-                "No data",
-                props.emptyText,
-                mergedLocale.value?.common?.emptyText
+                { class: treeSelectEmptyClasses },
+                resolveLocaleText(
+                  "No data",
+                  props.emptyText,
+                  mergedLocale.value?.common?.emptyText
+                )
               )
-            )
-          ]
+            ]
+          ),
+          overlay.target.value
         ) : null
       ]);
     };

package/dist/{chunk-JZCETBUV.mjs → chunk-WUQMFKQ6.mjs}

@@ -349,23 +349,36 @@ var ScatterChart = defineComponent({
         y: tooltipPosition.value.y
       }) : null;
       if (!props.showLegend) {
-        return h("div", { class: "inline-block relative" }, [chart, tooltip]);
+        return h(
+          "div",
+          {
+            class: classNames(
+              "relative",
+              props.responsive ? "block w-full min-w-0" : "inline-block"
+            )
+          },
+          [chart, tooltip]
+        );
       }
-      return h("div", { class: wrapperClasses.value }, [
-        chart,
-        h(ChartLegend, {
-          items: legendItems.value,
-          position: props.legendPosition,
-          markerSize: props.legendMarkerSize,
-          gap: props.legendGap,
-          ariaLabel: labels.value.legendAriaLabel,
-          interactive: props.hoverable || props.selectable,
-          onItemClick: handleLegendClick,
-          onItemHover: handleLegendHover,
-          onItemLeave: handleLegendLeave
-        }),
-        tooltip
-      ]);
+      return h(
+        "div",
+        { class: classNames(wrapperClasses.value, props.responsive && "w-full min-w-0") },
+        [
+          chart,
+          h(ChartLegend, {
+            items: legendItems.value,
+            position: props.legendPosition,
+            markerSize: props.legendMarkerSize,
+            gap: props.legendGap,
+            ariaLabel: labels.value.legendAriaLabel,
+            interactive: props.hoverable || props.selectable,
+            onItemClick: handleLegendClick,
+            onItemHover: handleLegendHover,
+            onItemLeave: handleLegendLeave
+          }),
+          tooltip
+        ]
+      );
     };
   }
 });

package/dist/{chunk-GWFVBG22.mjs → chunk-XGXZF27U.mjs}

@@ -673,22 +673,35 @@ var LineChart = defineComponent({
         y: tooltipPosition.value.y
       }) : null;
       if (!props.showLegend) {
-        return h("div", { class: "inline-block relative" }, [chart, tooltip]);
+        return h(
+          "div",
+          {
+            class: classNames(
+              "relative",
+              props.responsive ? "block w-full min-w-0" : "inline-block"
+            )
+          },
+          [chart, tooltip]
+        );
       }
-      return h("div", { class: wrapperClasses.value }, [
-        chart,
-        h(ChartLegend, {
-          items: legendItems.value,
-          position: props.legendPosition,
-          markerSize: props.legendMarkerSize,
-          gap: props.legendGap,
-          interactive: props.hoverable || props.selectable,
-          onItemClick: handleLegendClick,
-          onItemHover: handleLegendHover,
-          onItemLeave: handleLegendLeave
-        }),
-        tooltip
-      ]);
+      return h(
+        "div",
+        { class: classNames(wrapperClasses.value, props.responsive && "w-full min-w-0") },
+        [
+          chart,
+          h(ChartLegend, {
+            items: legendItems.value,
+            position: props.legendPosition,
+            markerSize: props.legendMarkerSize,
+            gap: props.legendGap,
+            interactive: props.hoverable || props.selectable,
+            onItemClick: handleLegendClick,
+            onItemHover: handleLegendHover,
+            onItemLeave: handleLegendLeave
+          }),
+          tooltip
+        ]
+      );
     };
   }
 });

package/dist/{chunk-JVQPU4M2.mjs → chunk-ZGA66PSG.mjs}

@@ -717,22 +717,35 @@ var AreaChart = defineComponent({
         y: tooltipPosition.value.y
       }) : null;
       if (!props.showLegend) {
-        return h("div", { class: "inline-block relative" }, [chart, tooltip]);
+        return h(
+          "div",
+          {
+            class: classNames(
+              "relative",
+              props.responsive ? "block w-full min-w-0" : "inline-block"
+            )
+          },
+          [chart, tooltip]
+        );
       }
-      return h("div", { class: wrapperClasses.value }, [
-        chart,
-        h(ChartLegend, {
-          items: legendItems.value,
-          position: props.legendPosition,
-          markerSize: props.legendMarkerSize,
-          gap: props.legendGap,
-          interactive: props.hoverable || props.selectable,
-          onItemClick: handleSeriesSelect,
-          onItemHover: handleSeriesHoverEnter,
-          onItemLeave: handleSeriesHoverLeave
-        }),
-        tooltip
-      ]);
+      return h(
+        "div",
+        { class: classNames(wrapperClasses.value, props.responsive && "w-full min-w-0") },
+        [
+          chart,
+          h(ChartLegend, {
+            items: legendItems.value,
+            position: props.legendPosition,
+            markerSize: props.legendMarkerSize,
+            gap: props.legendGap,
+            interactive: props.hoverable || props.selectable,
+            onItemClick: handleSeriesSelect,
+            onItemHover: handleSeriesHoverEnter,
+            onItemLeave: handleSeriesHoverLeave
+          }),
+          tooltip
+        ]
+      );
     };
   }
 });

package/dist/components/ActivityFeed.d.mts

@@ -107,18 +107,18 @@ declare const ActivityFeed: vue.DefineComponent<vue.ExtractPropTypes<{
         default: undefined;
     };
 }>> & Readonly<{}>, {
+    loadingText: string;
+    emptyText: string;
+    className: string;
+    style: Record<string, string | number>;
+    loading: boolean;
+    groupBy: (item: ActivityItem) => string;
     items: ActivityItem[];
     groups: ActivityGroup[];
-    groupBy: (item: ActivityItem) => string;
     groupOrder: string[];
-    loading: boolean;
-    loadingText: string;
-    emptyText: string;
     showAvatar: boolean;
     showTime: boolean;
     showGroupTitle: boolean;
-    className: string;
-    style: Record<string, string | number>;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 export { ActivityFeed, type VueActivityFeedProps, ActivityFeed as default };