nuxt-charts 3.0.0-beta.0 → 3.0.0-beta.2

package/dist/module.json

@@ -4,9 +4,9 @@
   "compatibility": {
     "nuxt": ">=3"
   },
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
-    "unbuild": "3.6.1"
+    "unbuild": "unknown"
   }
 }

package/dist/runtime/assets/components.css

@@ -1 +1 @@
-@layer vue-chrts{.vc-tooltip{background:var(--vc-tooltip-bg,oklch(1 0 0));border:1px solid var(--vc-tooltip-border,oklch(.922 0 0));border-radius:var(--vc-tooltip-radius,.5rem);box-shadow:var(--vc-tooltip-shadow,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1));font-size:var(--vc-legend-size,.75rem);line-height:1.5;min-width:8rem;padding:var(--vc-tooltip-padding,.375rem .625rem);pointer-events:none}.vc-tooltip,.vc-tooltip__label{color:var(--vc-tooltip-fg,oklch(.205 0 0))}.vc-tooltip__label{font-weight:500;margin:0 0 .25rem}.vc-tooltip__list{display:flex;flex-direction:column;gap:.125rem;list-style:none;margin:0;padding:0}.vc-tooltip__item{align-items:center;display:flex;gap:.375rem}.vc-tooltip__dot{border-radius:9999px;display:inline-block;flex-shrink:0;height:.5rem;width:.5rem}.vc-tooltip__name{color:var(--vc-tooltip-muted,oklch(.556 0 0))}.vc-tooltip__value{color:var(--vc-tooltip-fg,oklch(.205 0 0));font-variant-numeric:tabular-nums;font-weight:500;margin-left:auto}.vc-legend{flex-wrap:wrap;font-size:var(--vc-legend-size,.75rem);font-weight:var(--vc-legend-weight,400);gap:var(--vc-legend-gap,.75rem);justify-content:center;line-height:1.5;list-style:none;margin:0;padding:0}.vc-legend,.vc-legend__item{align-items:center;display:flex}.vc-legend__item{gap:.375rem}.vc-legend__item--inactive{opacity:.4}.vc-legend__dot{border-radius:9999px;display:inline-block;flex-shrink:0;height:var(--vc-legend-dot-size,.5rem);width:var(--vc-legend-dot-size,.5rem)}.vc-legend__label{color:var(--vc-legend-color,oklch(.556 0 0))}.vc-candlestick-chart{cursor:crosshair;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.vc-candlestick-chart__svg{display:block;overflow:visible;width:100%}.vc-funnel-layered{position:relative;width:100%}.vc-funnel-layered__tooltip{align-items:center;background:var(--vc-tooltip-bg,oklch(1 0 0));border:1px solid var(--vc-tooltip-border,oklch(.922 0 0));border-radius:var(--vc-tooltip-radius,.5rem);box-shadow:var(--vc-tooltip-shadow,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1));color:var(--vc-tooltip-fg,oklch(.205 0 0));display:flex;font-size:var(--vc-legend-size,.75rem);gap:.375rem;padding:var(--vc-tooltip-padding,.375rem .625rem);pointer-events:none;position:absolute;transform:translate(-50%,calc(-100% - 10px));white-space:nowrap}.vc-funnel-layered__name{color:var(--vc-tooltip-muted,oklch(.556 0 0))}.vc-funnel-layered__value{font-variant-numeric:tabular-nums;font-weight:600}.vc-funnel-layered__dot{border-radius:9999px;display:inline-block;flex-shrink:0;height:var(--vc-legend-dot-size,.5rem);width:var(--vc-legend-dot-size,.5rem)}.vc-funnel-layered-shape{opacity:.96;transition:opacity .15s}.vc-funnel-layered-shape:hover{opacity:1}.vc-status-tracker{color:var(--foreground,oklch(.205 0 0));font-family:inherit;width:100%}.vc-status-tracker__header{align-items:baseline;display:flex;gap:1rem;justify-content:space-between;margin-bottom:.75rem}.vc-status-tracker__summary,.vc-status-tracker__title{font-size:.875rem;line-height:1.25rem;margin:0}.vc-status-tracker__title{font-weight:600}.vc-status-tracker__summary{color:var(--muted-foreground,oklch(.556 0 0));font-variant-numeric:tabular-nums}.vc-status-tracker__track{display:flex;overflow:hidden;width:100%}.vc-status-tracker__bar{display:block;flex:0 0 auto;height:100%;min-width:1px;transition:opacity .16s ease}.vc-status-tracker__bar:hover{opacity:.78}.vc-status-tracker__bar--rounded-start{border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}.vc-status-tracker__bar--rounded-end{border-bottom-right-radius:.25rem;border-top-right-radius:.25rem}.vc-status-tracker__bar--empty:hover{opacity:1}.vc-status-tracker__labels{gap:1rem;justify-content:space-between;margin-top:.5rem}.vc-status-tracker__labels,.vc-status-tracker__legend{color:var(--vc-legend-color,oklch(.556 0 0));display:flex;font-size:var(--vc-legend-size,.75rem);line-height:1rem}.vc-status-tracker__legend{flex-wrap:wrap;gap:.5rem 1rem;list-style:none;margin:.75rem 0 0;padding:0}.vc-status-tracker__legend-item{align-items:center;display:inline-flex;gap:.375rem}.vc-status-tracker__legend-dot{border-radius:9999px;flex:0 0 auto;height:var(--vc-legend-dot-size,.5rem);width:var(--vc-legend-dot-size,.5rem)}}
+@layer vue-chrts{.vc-tooltip{background:var(--vc-tooltip-bg,oklch(1 0 0));border:1px solid var(--vc-tooltip-border,oklch(.922 0 0));border-radius:var(--vc-tooltip-radius,.5rem);box-shadow:var(--vc-tooltip-shadow,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1));font-size:var(--vc-legend-size,.75rem);line-height:1.5;min-width:8rem;padding:var(--vc-tooltip-padding,.375rem .625rem);pointer-events:none}.vc-tooltip,.vc-tooltip__label{color:var(--vc-tooltip-fg,oklch(.205 0 0))}.vc-tooltip__label{font-weight:500;margin:0 0 .25rem}.vc-tooltip__list{display:flex;flex-direction:column;gap:.125rem;list-style:none;margin:0;padding:0}.vc-tooltip__item{align-items:center;display:flex;gap:.375rem}.vc-tooltip__dot{border-radius:9999px;display:inline-block;flex-shrink:0;height:.5rem;width:.5rem}.vc-tooltip__name{color:var(--vc-tooltip-muted,oklch(.556 0 0))}.vc-tooltip__value{color:var(--vc-tooltip-fg,oklch(.205 0 0));font-variant-numeric:tabular-nums;font-weight:500;margin-left:auto}.vc-legend{flex-wrap:wrap;font-size:var(--vc-legend-size,.75rem);font-weight:var(--vc-legend-weight,400);gap:var(--vc-legend-gap,.75rem);justify-content:center;line-height:1.5;list-style:none;margin:0;padding:0}.vc-legend,.vc-legend__item{align-items:center;display:flex}.vc-legend__item{gap:.375rem}.vc-legend__item--inactive{opacity:.4}.vc-legend__dot{border-radius:9999px;display:inline-block;flex-shrink:0;height:var(--vc-legend-dot-size,.5rem);width:var(--vc-legend-dot-size,.5rem)}.vc-legend__label{color:var(--vc-legend-color,oklch(.556 0 0))}.vc-candlestick-chart{cursor:crosshair;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.vc-candlestick-chart__svg{display:block;overflow:visible;width:100%}.vc-funnel-layered{position:relative;width:100%}.vc-funnel-layered__tooltip{align-items:center;background:var(--vc-tooltip-bg,oklch(1 0 0));border:1px solid var(--vc-tooltip-border,oklch(.922 0 0));border-radius:var(--vc-tooltip-radius,.5rem);box-shadow:var(--vc-tooltip-shadow,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1));color:var(--vc-tooltip-fg,oklch(.205 0 0));display:flex;font-size:var(--vc-legend-size,.75rem);gap:.375rem;padding:var(--vc-tooltip-padding,.375rem .625rem);pointer-events:none;position:absolute;transform:translate(-50%,calc(-100% - 10px));white-space:nowrap}.vc-funnel-layered__name{color:var(--vc-tooltip-muted,oklch(.556 0 0))}.vc-funnel-layered__value{font-variant-numeric:tabular-nums;font-weight:600}.vc-funnel-layered__dot{border-radius:9999px;display:inline-block;flex-shrink:0;height:var(--vc-legend-dot-size,.5rem);width:var(--vc-legend-dot-size,.5rem)}.vc-funnel-layered-shape{opacity:.96;transition:opacity .15s}.vc-funnel-layered-shape:hover{opacity:1}.vc-status-tracker{color:var(--vc-axis-label-color,var(--ui-text-highlighted,var(--foreground,oklch(.205 0 0))));font-family:inherit;width:100%}.vc-status-tracker__header{align-items:baseline;display:flex;gap:1rem;justify-content:space-between;margin-bottom:.75rem}.vc-status-tracker__summary,.vc-status-tracker__title{font-size:.875rem;line-height:1.25rem;margin:0}.vc-status-tracker__title{font-weight:600}.vc-status-tracker__summary{color:var(--vc-tick-color,var(--ui-text-muted,var(--muted-foreground,oklch(.556 0 0))));font-variant-numeric:tabular-nums}.vc-status-tracker__track{display:flex;overflow:hidden;width:100%}.vc-status-tracker__bar{display:block;flex:0 0 auto;height:100%;min-width:1px;transition:opacity .16s ease}.vc-status-tracker__bar:hover{opacity:.78}.vc-status-tracker__bar--rounded-start{border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}.vc-status-tracker__bar--rounded-end{border-bottom-right-radius:.25rem;border-top-right-radius:.25rem}.vc-status-tracker__bar--empty:hover{opacity:1}.vc-status-tracker__labels{gap:1rem;justify-content:space-between;margin-top:.5rem}.vc-status-tracker__labels,.vc-status-tracker__legend{color:var(--vc-legend-color,oklch(.556 0 0));display:flex;font-size:var(--vc-legend-size,.75rem);line-height:1rem}.vc-status-tracker__legend{flex-wrap:wrap;gap:.5rem 1rem;list-style:none;margin:.75rem 0 0;padding:0}.vc-status-tracker__legend-item{align-items:center;display:inline-flex;gap:.375rem}.vc-status-tracker__legend-dot{border-radius:9999px;flex:0 0 auto;height:var(--vc-legend-dot-size,.5rem);width:var(--vc-legend-dot-size,.5rem)}}

package/dist/runtime/assets/theme.css

@@ -1 +1 @@
-@layer vue-chrts{.vue-chrts{--vc-grid-color:var(--border,oklch(0.922 0 0));--vc-grid-dash:3 3;--vc-grid-width:1px;--vc-axis-line-color:var(--border,oklch(0.922 0 0));--vc-axis-line-width:1px;--vc-legend-size:0.75rem;--vc-legend-weight:400;--vc-tick-color:var(--muted-foreground,oklch(0.556 0 0));--vc-tick-size:var(--vc-legend-size);--vc-tick-weight:var(--vc-legend-weight);--vc-axis-label-color:var(--foreground,oklch(0.205 0 0));--vc-axis-label-size:var(--vc-legend-size);--vc-axis-label-weight:500}.vue-chrts .v-charts-cartesian-axis .v-charts-label{fill:var(--vc-axis-label-color);font-size:var(--vc-axis-label-size);font-weight:var(--vc-axis-label-weight)}.vue-chrts{--vc-legend-gap:0.75rem;--vc-legend-inset:0.75rem;--vc-legend-color:var(--muted-foreground,oklch(0.556 0 0));--vc-legend-dot-size:0.5rem;--vc-hover-fill:color-mix(in oklab,var(--foreground,oklch(0.205 0 0)) 6%,transparent);--vc-hover-stroke:transparent;--vc-hover-radius:6px;--vc-tooltip-bg:var(--popover,oklch(1 0 0));--vc-tooltip-fg:var(--popover-foreground,oklch(0.205 0 0));--vc-tooltip-muted:var(--muted-foreground,oklch(0.556 0 0));--vc-tooltip-border:var(--border,oklch(0.922 0 0));--vc-tooltip-radius:0.5rem;--vc-tooltip-padding:0.375rem 0.625rem;--vc-tooltip-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}.vue-chrts .v-charts-xAxis .v-charts-cartesian-axis-tick-value{fill:var(--vc-x-tick-color,var(--vc-tick-color));font-size:var(--vc-x-tick-size,var(--vc-tick-size));font-weight:var(--vc-x-tick-weight,var(--vc-tick-weight))}.vue-chrts .v-charts-yAxis .v-charts-cartesian-axis-tick-value{fill:var(--vc-y-tick-color,var(--vc-tick-color));font-size:var(--vc-y-tick-size,var(--vc-tick-size));font-weight:var(--vc-y-tick-weight,var(--vc-tick-weight))}.vue-chrts .v-charts-polar-angle-axis-tick-value,.vue-chrts .v-charts-polar-radius-axis-tick-value{fill:var(--vc-tick-color);font-size:var(--vc-tick-size);font-weight:var(--vc-tick-weight)}.vue-chrts:is(.dark,[data-theme=dark],.dark *,[data-theme=dark] *),:is(.dark,[data-theme=dark]) .vue-chrts{--vc-grid-color:var(--border,oklch(0.269 0 0));--vc-axis-line-color:var(--border,oklch(0.269 0 0));--vc-tick-color:var(--muted-foreground,oklch(0.708 0 0));--vc-axis-label-color:var(--foreground,oklch(0.985 0 0));--vc-legend-color:var(--muted-foreground,oklch(0.708 0 0));--vc-hover-fill:color-mix(in oklab,oklch(0.985 0 0) 8%,transparent);--vc-tooltip-bg:var(--popover,oklch(0.205 0 0));--vc-tooltip-fg:var(--popover-foreground,oklch(0.985 0 0));--vc-tooltip-muted:var(--muted-foreground,oklch(0.708 0 0));--vc-tooltip-border:var(--border,oklch(0.269 0 0))}}
+@layer vue-chrts{.vue-chrts{--vc-grid-color:var(--ui-border,var(--border,oklch(0.922 0 0)));--vc-grid-dash:3 3;--vc-grid-width:1px;--vc-axis-line-color:var(--ui-border,var(--border,oklch(0.922 0 0)));--vc-axis-line-width:1px;--vc-surface-bg:var(--ui-bg,var(--background,oklch(1 0 0)));--vc-legend-size:0.75rem;--vc-legend-weight:400;--vc-tick-color:var(--ui-text-muted,var(--muted-foreground,oklch(0.556 0 0)));--vc-tick-size:var(--vc-legend-size);--vc-tick-weight:var(--vc-legend-weight);--vc-axis-label-color:var(--ui-text-highlighted,var(--foreground,oklch(0.205 0 0)));--vc-axis-label-size:var(--vc-legend-size);--vc-axis-label-weight:500}.vue-chrts .v-charts-cartesian-axis .v-charts-label{fill:var(--vc-axis-label-color);font-size:var(--vc-axis-label-size);font-weight:var(--vc-axis-label-weight)}.vue-chrts{--vc-legend-gap:0.75rem;--vc-legend-inset:0.75rem;--vc-legend-color:var(--ui-text-muted,var(--muted-foreground,oklch(0.556 0 0)));--vc-legend-dot-size:0.5rem;--vc-hover-fill:color-mix(in oklab,var(--ui-text-highlighted,var(--foreground,oklch(0.205 0 0))) 6%,transparent);--vc-hover-stroke:transparent;--vc-hover-radius:6px;--vc-tooltip-bg:var(--ui-bg,var(--popover,oklch(1 0 0)));--vc-tooltip-fg:var(--ui-text-highlighted,var(--popover-foreground,oklch(0.205 0 0)));--vc-tooltip-muted:var(--ui-text-muted,var(--muted-foreground,oklch(0.556 0 0)));--vc-tooltip-border:var(--ui-border,var(--border,oklch(0.922 0 0)));--vc-tooltip-radius:0.5rem;--vc-tooltip-padding:0.375rem 0.625rem;--vc-tooltip-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}.vue-chrts .v-charts-xAxis .v-charts-cartesian-axis-tick-value{fill:var(--vc-x-tick-color,var(--vc-tick-color));font-size:var(--vc-x-tick-size,var(--vc-tick-size));font-weight:var(--vc-x-tick-weight,var(--vc-tick-weight))}.vue-chrts .v-charts-yAxis .v-charts-cartesian-axis-tick-value{fill:var(--vc-y-tick-color,var(--vc-tick-color));font-size:var(--vc-y-tick-size,var(--vc-tick-size));font-weight:var(--vc-y-tick-weight,var(--vc-tick-weight))}.vue-chrts .v-charts-polar-angle-axis-tick-value,.vue-chrts .v-charts-polar-radius-axis-tick-value{fill:var(--vc-tick-color);font-size:var(--vc-tick-size);font-weight:var(--vc-tick-weight)}.vue-chrts:is(.dark,[data-theme=dark],.dark *,[data-theme=dark] *),:is(.dark,[data-theme=dark]) .vue-chrts{--vc-grid-color:var(--ui-border,var(--border,oklch(0.269 0 0)));--vc-axis-line-color:var(--ui-border,var(--border,oklch(0.269 0 0)));--vc-surface-bg:var(--ui-bg,var(--background,oklch(0.145 0 0)));--vc-tick-color:var(--ui-text-muted,var(--muted-foreground,oklch(0.708 0 0)));--vc-axis-label-color:var(--ui-text-highlighted,var(--foreground,oklch(0.985 0 0)));--vc-legend-color:var(--ui-text-muted,var(--muted-foreground,oklch(0.708 0 0)));--vc-hover-fill:color-mix(in oklab,var(--ui-text-highlighted,oklch(0.985 0 0)) 8%,transparent);--vc-tooltip-bg:var(--ui-bg,var(--popover,oklch(0.205 0 0)));--vc-tooltip-fg:var(--ui-text-highlighted,var(--popover-foreground,oklch(0.985 0 0)));--vc-tooltip-muted:var(--ui-text-muted,var(--muted-foreground,oklch(0.708 0 0)));--vc-tooltip-border:var(--ui-border,var(--border,oklch(0.269 0 0)))}}

package/dist/runtime/components/BubbleChart.vue

@@ -3,7 +3,6 @@ import { computed } from "vue";
 import {
   CartesianGrid,
   Legend,
-  ResponsiveContainer,
   Scatter,
   ScatterChart,
   Tooltip,
@@ -11,6 +10,7 @@ import {
   YAxis,
   ZAxis
 } from "vccs";
+import ChartContainer from "./internal/ChartContainer";
 import ChartTooltip from "./internal/ChartTooltip.vue";
 import ChartLegend from "./internal/ChartLegend.vue";
 import { categoriesToSeries } from "../utils/categories";
@@ -147,7 +147,7 @@ const groups = computed(() => {
 
 <template>
   <div class="vue-chrts" :style="themeVars">
-  <ResponsiveContainer width="100%" :height="height">
+  <ChartContainer width="100%" :height="height">
     <ScatterChart>
       <CartesianGrid
         v-if="(xGridLine ?? true) || (yGridLine ?? true)"
@@ -208,6 +208,6 @@ const groups = computed(() => {
         </template>
       </Legend>
     </ScatterChart>
-  </ResponsiveContainer>
+  </ChartContainer>
   </div>
 </template>

package/dist/runtime/components/DonutChart.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from "vue";
-import { Legend, Pie, PieChart, ResponsiveContainer, Tooltip } from "vccs";
+import { Legend, Pie, PieChart, Tooltip } from "vccs";
+import ChartContainer from "./internal/ChartContainer";
 import ChartTooltip from "./internal/ChartTooltip.vue";
 import ChartLegend from "./internal/ChartLegend.vue";
 import { DonutType } from "../enums";
@@ -69,7 +70,7 @@ const legendWrapperStyle = computed(
 
 <template>
   <div class="donut-chart vue-chrts" :style="{ position: 'relative', width: '100%', height: `${height ?? (radius ? radius * 2 : 200)}px`, ...themeVars }">
-    <ResponsiveContainer width="100%" height="100%">
+    <ChartContainer width="100%" height="100%">
       <PieChart>
         <Pie
           :data="segments"
@@ -96,7 +97,7 @@ const legendWrapperStyle = computed(
           </template>
         </Legend>
       </PieChart>
-    </ResponsiveContainer>
+    </ChartContainer>
 
     <!-- Centered overlay for custom content (v2 parity: default slot). -->
     <div

package/dist/runtime/components/FunnelChart.vue

@@ -5,9 +5,9 @@ import {
   FunnelChart as VccsFunnelChart,
   LabelList,
   Legend,
-  ResponsiveContainer,
   Tooltip
 } from "vccs";
+import ChartContainer from "./internal/ChartContainer";
 import ChartTooltip from "./internal/ChartTooltip.vue";
 import ChartLegend from "./internal/ChartLegend.vue";
 import FunnelLayeredShape, {
@@ -85,7 +85,7 @@ function hideTooltip() {
     class="vc-funnel-layered vue-chrts"
     :style="{ height: `${height}px`, ...themeVars }"
   >
-    <ResponsiveContainer width="100%" height="100%">
+    <ChartContainer width="100%" height="100%">
       <VccsFunnelChart :margin="{ top: 16, right: 0, bottom: 8, left: 0 }">
         <Funnel
           :data="layeredData"
@@ -104,7 +104,7 @@ function hideTooltip() {
           </template>
         </Funnel>
       </VccsFunnelChart>
-    </ResponsiveContainer>
+    </ChartContainer>
 
     <div
       v-if="!hideTooltip && activeDatum"
@@ -123,7 +123,7 @@ function hideTooltip() {
   </div>
 
   <div v-else class="vue-chrts" :style="themeVars">
-  <ResponsiveContainer width="100%" :height="height">
+  <ChartContainer width="100%" :height="height">
     <VccsFunnelChart>
       <Funnel
         :data="stages"
@@ -147,6 +147,6 @@ function hideTooltip() {
         </template>
       </Legend>
     </VccsFunnelChart>
-  </ResponsiveContainer>
+  </ChartContainer>
   </div>
 </template>

package/dist/runtime/components/RadarChart.vue

@@ -7,9 +7,9 @@ import {
   PolarRadiusAxis,
   Radar,
   RadarChart as VccsRadarChart,
-  ResponsiveContainer,
   Tooltip
 } from "vccs";
+import ChartContainer from "./internal/ChartContainer";
 import ChartTooltip from "./internal/ChartTooltip.vue";
 import ChartLegend from "./internal/ChartLegend.vue";
 import { categoriesToSeries } from "../utils/categories";
@@ -45,7 +45,7 @@ const themeVars = computed(() => themeToVars(props.theme));
 
 <template>
   <div class="vue-chrts" :style="themeVars">
-  <ResponsiveContainer width="100%" :height="height">
+  <ChartContainer width="100%" :height="height">
     <VccsRadarChart :data="data">
       <PolarGrid stroke="var(--vc-grid-color)" />
       <PolarAngleAxis :data-key="angleKey" :tick-formatter="angleFormatter" />
@@ -85,6 +85,6 @@ const themeVars = computed(() => themeToVars(props.theme));
         </template>
       </Legend>
     </VccsRadarChart>
-  </ResponsiveContainer>
+  </ChartContainer>
   </div>
 </template>

package/dist/runtime/components/RadialBarChart.vue

@@ -4,9 +4,9 @@ import {
   Legend,
   RadialBar,
   RadialBarChart as VccsRadialBarChart,
-  ResponsiveContainer,
   Tooltip
 } from "vccs";
+import ChartContainer from "./internal/ChartContainer";
 import ChartTooltip from "./internal/ChartTooltip.vue";
 import ChartLegend from "./internal/ChartLegend.vue";
 import { categoriesToSeries } from "../utils/categories";
@@ -49,7 +49,7 @@ const legendWrapperStyle = computed(
 
 <template>
   <div class="vue-chrts" :style="themeVars">
-  <ResponsiveContainer width="100%" :height="height">
+  <ChartContainer width="100%" :height="height">
     <VccsRadialBarChart
       :data="bars"
       :inner-radius="innerRadius ?? '30%'"
@@ -76,6 +76,6 @@ const legendWrapperStyle = computed(
         </template>
       </Legend>
     </VccsRadialBarChart>
-  </ResponsiveContainer>
+  </ChartContainer>
   </div>
 </template>

package/dist/runtime/components/internal/CartesianFrame.vue

@@ -4,11 +4,11 @@ import {
   CartesianGrid,
   Legend,
   ReferenceLine,
-  ResponsiveContainer,
   Tooltip,
   XAxis,
   YAxis
 } from "vccs";
+import ChartContainer from "./ChartContainer";
 import { legendPositionToLegendProps, resolveLegendWrapperStyle } from "../../utils/legend";
 import {
   AXIS_TICK_MARGIN,
@@ -212,7 +212,7 @@ const resolvedYAxes = computed(() => {
 
 <template>
   <div class="vue-chrts" :style="rootStyle">
-  <ResponsiveContainer width="100%" :height="height">
+  <ChartContainer width="100%" :height="height">
     <component :is="container" v-bind="mergedContainerProps">
       <CartesianGrid
         v-if="showXGrid || showYGrid"
@@ -316,6 +316,6 @@ const resolvedYAxes = computed(() => {
         </template>
       </Legend>
     </component>
-  </ResponsiveContainer>
+  </ChartContainer>
   </div>
 </template>

package/dist/runtime/components/internal/ChartContainer.d.ts

@@ -0,0 +1,91 @@
+import { type PropType, type VNode } from "vue";
+type Size = number | string;
+/**
+ * Drop-in replacement for `vccs`' `ResponsiveContainer`.
+ *
+ * Upstream renders children through `resolveDynamicComponent(() => renderChildren())`,
+ * which produces a new component type every render and so unmounts + remounts the
+ * whole chart subtree. Charts that dispatch on `mouseenter` (radial bar, radar) then
+ * loop forever — remount recreates the `<path>` under the cursor, which refires
+ * `mouseenter` — and freeze the tab. Rendering the cloned children directly keeps
+ * the subtree stable.
+ */
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    width: {
+        type: PropType<Size>;
+        default: string;
+    };
+    height: {
+        type: PropType<Size>;
+        default: string;
+    };
+    aspect: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    minWidth: {
+        type: PropType<Size>;
+        default: number;
+    };
+    minHeight: {
+        type: PropType<Size>;
+        default: undefined;
+    };
+    maxHeight: {
+        type: PropType<Size>;
+        default: undefined;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    onResize: {
+        type: PropType<(width: number, height: number) => void>;
+        default: undefined;
+    };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    width: {
+        type: PropType<Size>;
+        default: string;
+    };
+    height: {
+        type: PropType<Size>;
+        default: string;
+    };
+    aspect: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    minWidth: {
+        type: PropType<Size>;
+        default: number;
+    };
+    minHeight: {
+        type: PropType<Size>;
+        default: undefined;
+    };
+    maxHeight: {
+        type: PropType<Size>;
+        default: undefined;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    onResize: {
+        type: PropType<(width: number, height: number) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    width: Size;
+    height: Size;
+    aspect: number;
+    minWidth: Size;
+    minHeight: Size;
+    maxHeight: Size;
+    id: string;
+    onResize: (width: number, height: number) => void;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/internal/ChartContainer.js

@@ -0,0 +1,111 @@
+import {
+  cloneVNode,
+  computed,
+  defineComponent,
+  Fragment,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  ref
+} from "vue";
+const isPercent = (value) => typeof value === "string" && value.endsWith("%");
+const toCssSize = (value) => value == null ? void 0 : typeof value === "number" ? `${value}px` : value;
+function flatten(vnodes) {
+  const result = [];
+  for (const vnode of vnodes) {
+    if (vnode.type === Fragment && Array.isArray(vnode.children))
+      result.push(...flatten(vnode.children));
+    else result.push(vnode);
+  }
+  return result;
+}
+export default defineComponent({
+  name: "ChartContainer",
+  inheritAttrs: false,
+  props: {
+    width: { type: [Number, String], default: "100%" },
+    height: { type: [Number, String], default: "100%" },
+    aspect: { type: Number, default: void 0 },
+    minWidth: { type: [Number, String], default: 0 },
+    minHeight: { type: [Number, String], default: void 0 },
+    maxHeight: { type: [Number, String], default: void 0 },
+    id: { type: String, default: void 0 },
+    onResize: { type: Function, default: void 0 }
+  },
+  setup(props, { slots }) {
+    const containerRef = ref();
+    const sizes = ref({ width: -1, height: -1 });
+    const calculatedWidth = computed(
+      () => isPercent(props.width) ? sizes.value.width : Number(props.width)
+    );
+    const calculatedHeight = computed(() => {
+      if (props.aspect && props.aspect > 0 && (props.height == null || props.height === "auto"))
+        return calculatedWidth.value / props.aspect;
+      return isPercent(props.height) ? sizes.value.height : Number(props.height);
+    });
+    const finalWidth = computed(() => {
+      if (props.aspect && props.aspect > 0 && (props.width == null || props.width === "auto"))
+        return calculatedHeight.value * props.aspect;
+      return calculatedWidth.value;
+    });
+    const isReady = computed(() => sizes.value.width >= 0 && sizes.value.height >= 0);
+    const containerStyle = computed(() => ({
+      width: toCssSize(props.width),
+      height: toCssSize(props.height),
+      minWidth: toCssSize(props.minWidth),
+      minHeight: toCssSize(props.minHeight),
+      maxHeight: toCssSize(props.maxHeight)
+    }));
+    function setSize(width, height) {
+      const next = { width: Math.round(width), height: Math.round(height) };
+      if (next.width === sizes.value.width && next.height === sizes.value.height) return;
+      sizes.value = next;
+      props.onResize?.(next.width, next.height);
+    }
+    let observer = null;
+    onMounted(() => {
+      const el = containerRef.value;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      setSize(rect.width, rect.height);
+      observer = new ResizeObserver((entries) => {
+        const { width, height } = entries[0].contentRect;
+        setSize(width, height);
+      });
+      observer.observe(el);
+    });
+    onBeforeUnmount(() => {
+      observer?.disconnect();
+      observer = null;
+    });
+    function renderChildren() {
+      if (!isReady.value) return [];
+      const raw = slots.default?.();
+      if (!raw) return [];
+      return flatten(raw).map(
+        (child, index) => cloneVNode(child, {
+          width: finalWidth.value,
+          height: calculatedHeight.value,
+          key: child.key || `chart-container-child-${index}`,
+          style: {
+            maxWidth: `${sizes.value.width}px`,
+            maxHeight: `${sizes.value.height}px`,
+            width: "100%",
+            height: "100%",
+            ...child.props?.style
+          }
+        })
+      );
+    }
+    return () => h(
+      "div",
+      {
+        id: props.id,
+        ref: containerRef,
+        class: "vcharts-responsive-container",
+        style: containerStyle.value
+      },
+      renderChildren()
+    );
+  }
+});

package/dist/runtime/components/internal/FunnelLayeredShape.vue

@@ -72,14 +72,14 @@ export default { name: "FunnelLayeredShape" };
       :x2="geometry.startX"
       :y1="geometry.dividerStartY"
       :y2="geometry.dividerEndY"
-      :stroke="`hsl(var(--background, 0 0% 100%))`"
+      stroke="var(--vc-surface-bg)"
       :stroke-width="5"
     />
 
     <text
       :x="geometry.middleX"
       :y="geometry.topLabelY"
-      :fill="`hsl(var(--foreground, 222.2 84% 4.9%))`"
+      fill="var(--vc-axis-label-color)"
       :font-size="16"
       :font-weight="700"
       text-anchor="middle"
@@ -93,16 +93,16 @@ export default { name: "FunnelLayeredShape" };
       :width="geometry.badgeWidth"
       :height="30"
       :rx="15"
-      :fill="`hsl(var(--background, 0 0% 100%))`"
+      fill="var(--vc-surface-bg)"
       fill-opacity="0.82"
-      :stroke="`hsl(var(--border, 214.3 31.8% 91.4%))`"
+      stroke="var(--vc-axis-line-color)"
       stroke-opacity="0.7"
       :stroke-width="1"
     />
     <text
       :x="geometry.middleX"
       :y="geometry.centerY + 5"
-      :fill="`hsl(var(--foreground, 222.2 84% 4.9%))`"
+      fill="var(--vc-axis-label-color)"
       :font-size="14"
       :font-weight="600"
       text-anchor="middle"
@@ -113,7 +113,7 @@ export default { name: "FunnelLayeredShape" };
     <text
       :x="geometry.middleX"
       :y="geometry.bottomLabelY"
-      :fill="`hsl(var(--muted-foreground, 215.4 16.3% 46.9%))`"
+      fill="var(--vc-tick-color)"
       :font-size="15"
       :font-weight="500"
       text-anchor="middle"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-charts",
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.2",
   "description": "Beautiful chart components for Nuxt (vccs engine) — Area, Bar, Line, Donut, Bubble, Radar, Radial Bar, Funnel, Candlestick, Status Tracker",
   "license": "MIT",
   "author": "Dennis Adriaansen <adriaansendennis@gmail.com>",
@@ -46,6 +46,20 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "nuxi dev playground",
+    "build": "nuxt-module-build build",
+    "build:playground": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "node ../../tools/release.mjs --package nuxt-charts",
+    "lint": "eslint .",
+    "typecheck": "pnpm run test:types",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
+    "release:dry": "node ../../tools/release.mjs --package nuxt-charts --dry-run"
+  },
   "dependencies": {
     "@types/d3-array": "^3.2.2",
     "@types/d3-scale": "^4.0.9",
@@ -58,7 +72,7 @@
     "d3-shape": "^3.2.0",
     "d3-zoom": "^3.0.0",
     "motion-v": "^2.3.0",
-    "vccs": "^0.4.0"
+    "vccs": "^0.5.0"
   },
   "devDependencies": {
     "@nuxt/devtools": "^3.1.1",
@@ -67,10 +81,10 @@
     "@nuxt/kit": "^4.3.0",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^4.3.0",
-    "@nuxt/test-utils": "^3.23.0",
+    "@nuxt/test-utils": "^4.2.0",
     "@tailwindcss/vite": "^4.2.2",
     "@types/node": "latest",
-    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue": "^6.0.8",
     "@vue/test-utils": "^2.4.11",
     "eslint": "^9.39.2",
     "happy-dom": "^20.10.6",
@@ -78,23 +92,12 @@
     "tailwindcss": "^4.2.2",
     "typescript": "~5.9.3",
     "vitest": "^4.0.18",
+    "vue": "^3.5.42",
     "vue-tsc": "^3.2.4"
   },
+  "packageManager": "pnpm@10.33.0",
   "publishConfig": {
     "access": "public",
     "tag": "beta"
-  },
-  "scripts": {
-    "dev": "nuxi dev playground",
-    "build": "nuxt-module-build build",
-    "build:playground": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-    "release": "node ../../tools/release.mjs --package nuxt-charts",
-    "lint": "eslint .",
-    "typecheck": "pnpm run test:types",
-    "test": "vitest run",
-    "test:watch": "vitest watch",
-    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
-    "release:dry": "node ../../tools/release.mjs --package nuxt-charts --dry-run"
   }
-}
+}