shadcn-vue-echarts 0.1.0

package/README.md

@@ -0,0 +1,52 @@
+# shadcn-vue-echarts
+
+Vue 3 ECharts wrapper with shadcn theming support.
+
+## Features
+
+- 🎨 Shadcn-compatible theming via CSS variables
+- 🌓 Automatic light/dark mode detection
+- 📱 Responsive resizing with ResizeObserver
+- ⚡ SSR-safe (Nuxt 3 compatible)
+- 📦 Zero runtime dependencies (echarts is peer dep)
+- 🧪 Full TypeScript support
+
+## Installation
+
+```bash
+pnpm add shadcn-vue-echarts echarts
+```
+
+## Quick Start
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Chart } from 'shadcn-vue-echarts'
+import type { EChartsOption } from 'shadcn-vue-echarts'
+
+const option = ref<EChartsOption>({
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      data: [120, 132, 101, 134, 90, 230, 210],
+      type: 'line'
+    }
+  ]
+})
+</script>
+
+<template>
+  <Chart :option="option" />
+</template>
+```
+
+## Documentation
+
+See [docs](../../docs) for complete guides on theming, SSR, and recipes.

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";var le=Object.create;var q=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var ae=Object.getPrototypeOf,se=Object.prototype.hasOwnProperty;var ce=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of ie(t))!se.call(e,a)&&a!==r&&q(e,a,{get:()=>t[a],enumerable:!(o=ne(t,a))||o.enumerable});return e};var ue=(e,t,r)=>(r=e!=null?le(ae(e)):{},ce(t||!e||!e.__esModule?q(r,"default",{value:e,enumerable:!0}):r,e));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("vue");function R(e){return/^\d+\.?\d*\s+\d+\.?\d*%\s+\d+\.?\d*%$/.test(e.trim())}function n(e,t){if(!e)return;const r=String(e).trim();if(r.startsWith("#")){if(t!=null){const o=r.slice(1),a=parseInt(o.slice(0,2),16),u=parseInt(o.slice(2,4),16),s=parseInt(o.slice(4,6),16);return`rgba(${a}, ${u}, ${s}, ${t})`}return r}if(r.startsWith("rgb("))return t!=null&&!r.includes("rgba")?r.replace(/rgb\(/,"rgba(").replace(/\)$/,`, ${t})`):t!=null&&r.includes("rgba")?r.replace(/rgba\(([^,]+),\s*([^,]+),\s*([^,]+),\s*[^)]+\)/,`rgba($1, $2, $3, ${t})`):r;if(r.startsWith("hsl("))return t!=null?r.replace(/hsl\(/,"hsla(").replace(/\)$/,`, ${t})`):r;if(r.startsWith("hsla("))return t!=null?r.replace(/hsla\(([^,]+),\s*([^,]+),\s*([^,]+),\s*[^)]+\)/,`hsla($1, $2, $3, ${t})`):r;if(R(r)||/^\d+\.?\d*\s+\d+\.?\d*%\s+\d+\.?\d*%\s*\/\s*[\d.]+$/.test(r)){if(r.includes("/"))return t!=null&&t!==1?`hsl(${r.split("/")[0].trim()} / ${t})`:`hsl(${r})`;const o=r.split(/\s+/),a=o[0],u=o[1].replace("%",""),s=o[2].replace("%","");return t!=null&&t!==1?`hsla(${a}, ${u}%, ${s}%, ${t})`:`hsl(${a}, ${u}%, ${s}%)`}return r}function j(e,t){const r=JSON.parse(JSON.stringify(e));r.color||(r.color=t.chart.map(s=>n(s)||s)),r.textStyle||(r.textStyle={}),r.textStyle.color||(r.textStyle.color=n(t.foreground)),r.textStyle.fontFamily||(r.textStyle.fontFamily="inherit"),r.title||(r.title={}),Array.isArray(r.title)?r.title=r.title.map(s=>({...s,textStyle:{color:n(t.foreground),...s.textStyle}})):r.title.textStyle={color:n(t.foreground),...r.title.textStyle||{}},r.legend||(r.legend={}),Array.isArray(r.legend)?r.legend=r.legend.map(s=>({...s,textStyle:{color:n(t.mutedForeground),...s.textStyle}})):r.legend.textStyle={color:n(t.mutedForeground),...r.legend.textStyle||{}},r.xAxis||(r.xAxis={}),r.yAxis||(r.yAxis={});const o=n(t.border,.6)||t.border,a=n(t.border,.35)||t.border,u=n(t.mutedForeground)||t.mutedForeground;for(const s of[r.xAxis,r.yAxis])Array.isArray(s)?s.forEach(b=>G(b,o,a,u)):G(s,o,a,u);return r.tooltip||(r.tooltip={}),Array.isArray(r.tooltip)||(r.tooltip.backgroundColor=n(t.popover),r.tooltip.borderColor=n(t.border,.6),r.tooltip.textStyle={color:n(t.popoverForeground),...r.tooltip.textStyle}),r.grid||(r.grid={}),Array.isArray(r.grid)?r.grid.forEach(s=>{s.containLabel=!0}):r.grid.containLabel=!0,r}function G(e,t,r,o){e&&(e.axisLine||(e.axisLine={}),e.axisLine.lineStyle||(e.axisLine.lineStyle={}),e.axisLine.lineStyle.color||(e.axisLine.lineStyle.color=t),e.axisLabel||(e.axisLabel={}),e.axisLabel.color||(e.axisLabel.color=o),e.splitLine||(e.splitLine={}),e.splitLine.lineStyle||(e.splitLine.lineStyle={}),e.splitLine.lineStyle.color||(e.splitLine.lineStyle.color=r))}function K(e){const t=n(e.border,.6),r=n(e.border,.35),o=n(e.background);return{color:e.chart.map(u=>n(u)||u),backgroundColor:o,textStyle:{color:n(e.foreground),fontFamily:"inherit"},title:{textStyle:{color:n(e.foreground)}},grid:{borderColor:t},legend:{textStyle:{color:n(e.mutedForeground)}},tooltip:{borderColor:t,backgroundColor:o,textStyle:{color:n(e.foreground)},axisPointer:{lineStyle:{color:t,width:1},crossStyle:{color:t,width:1}}},line:{lineStyle:{width:2},symbol:"circle",symbolSize:4},bar:{borderRadius:0},pie:{itemStyle:{borderWidth:0,borderColor:t}},candlestick:{itemStyle:{color:e.chart[0],color0:e.chart[1],borderColor:e.chart[0],borderColor0:e.chart[1],borderWidth:1}},gauge:{axisTick:{distance:-30,length:8,lineStyle:{color:e.foreground,width:2}},axisLabel:{color:n(e.foreground)},splitLine:{distance:-30,length:30,lineStyle:{color:e.foreground,width:2}},detail:{valueAnimation:!0,formatter:"{value}",color:n(e.foreground)}},geo:{borderColor:t,itemStyle:{areaColor:n(e.muted),borderColor:t,borderWidth:.5},emphasis:{itemStyle:{areaColor:n(e.border,.5)}}},categoryAxis:{axisLine:{show:!0,lineStyle:{color:t}},axisLabel:{show:!0,color:n(e.mutedForeground)},splitLine:{show:!1,lineStyle:{color:r}}},valueAxis:{axisLine:{show:!1,lineStyle:{color:t}},axisLabel:{show:!0,color:n(e.mutedForeground)},splitLine:{show:!0,lineStyle:{color:r}}},logAxis:{axisLine:{show:!0,lineStyle:{color:t}},axisLabel:{show:!0,color:n(e.mutedForeground)},splitLine:{show:!0,lineStyle:{color:r}}},timeAxis:{axisLine:{show:!0,lineStyle:{color:t}},axisLabel:{show:!0,color:n(e.mutedForeground)},splitLine:{show:!1,lineStyle:{color:r}}},angleAxis:{axisLine:{show:!0,lineStyle:{color:t}},axisLabel:{show:!0,color:n(e.mutedForeground)},splitLine:{show:!0,lineStyle:{color:r}}},radiusAxis:{axisLine:{show:!0,lineStyle:{color:t}},axisLabel:{show:!0,color:n(e.mutedForeground)},splitLine:{show:!0,lineStyle:{color:r}}},radar:{itemStyle:{borderWidth:1},lineStyle:{width:2},symbolSize:4},scatter:{itemStyle:{borderWidth:0,borderColor:t}},graph:{itemStyle:{borderWidth:0,borderColor:t},lineStyle:{width:1,color:t},symbolSize:4,smooth:!1},map:{itemStyle:{areaColor:n(e.muted),borderColor:t,borderWidth:.5},emphasis:{itemStyle:{areaColor:n(e.border,.5)}}},toolbox:{iconStyle:{borderColor:n(e.foreground)},emphasis:{iconStyle:{borderColor:n(e.foreground)}}},timeline:{lineStyle:{color:t,width:1},itemStyle:{color:e.chart[0],borderWidth:1},controlStyle:{color:n(e.foreground),borderColor:t,borderWidth:.5},checkpointStyle:{color:e.chart[0],borderColor:e.chart[0]},label:{color:n(e.foreground)},emphasis:{itemStyle:{color:e.chart[0]},controlStyle:{color:n(e.foreground),borderColor:t,borderWidth:.5},label:{color:n(e.foreground)}}},visualMap:{textStyle:{color:n(e.foreground)}},dataZoom:{backgroundColor:"rgba(0,0,0,0)",dataBackgroundColor:n(e.border,.1),fillerColor:n(e.border,.2),handleColor:n(e.foreground),handleSize:"100%",textStyle:{color:n(e.foreground)}},markPoint:{label:{color:n(e.popoverForeground)}},parallel:{itemStyle:{borderColor:t,borderWidth:1}}}}function V(){return typeof document<"u"&&typeof window<"u"}function de(e,t){if(e===t)return!0;if(e==null||t==null||typeof e!="object"||typeof t!="object")return!1;const r=Object.keys(e),o=Object.keys(t);if(r.length!==o.length)return!1;for(const a of r)if(!o.includes(a)||e[a]!==t[a])return!1;return!0}function m(e,t){if(!e)return null;try{return getComputedStyle(e).getPropertyValue(t).trim()||null}catch{return null}}function fe(e){return typeof document>"u"?null:m(document.documentElement,e)}const J=["#ef4444","#f97316","#eab308","#22c55e","#06b6d4","#3b82f6","#8b5cf6","#ec4899"];function X(e){var g,L,z,S,$,F,w,x,B,h;const t=e||(typeof document<"u"?document.documentElement:null);if(!t)return{background:"0 0% 100%",foreground:"0 0% 0%",muted:"210 40% 96%",mutedForeground:"215.4 16.3% 46.9%",card:"0 0% 100%",cardForeground:"0 0% 0%",popover:"0 0% 100%",popoverForeground:"0 0% 0%",border:"214.3 31.8% 91.4%",ring:"222.2 84% 4.9%",chart:J};const r=((g=m(t,"--background"))==null?void 0:g.trim())||"0 0% 100%",o=((L=m(t,"--foreground"))==null?void 0:L.trim())||"0 0% 0%",a=((z=m(t,"--muted"))==null?void 0:z.trim())||"210 40% 96%",u=((S=m(t,"--muted-foreground"))==null?void 0:S.trim())||"215.4 16.3% 46.9%",s=(($=m(t,"--card"))==null?void 0:$.trim())||"0 0% 100%",b=((F=m(t,"--card-foreground"))==null?void 0:F.trim())||"0 0% 0%",v=((w=m(t,"--popover"))==null?void 0:w.trim())||"0 0% 100%",y=((x=m(t,"--popover-foreground"))==null?void 0:x.trim())||"0 0% 0%",p=((B=m(t,"--border"))==null?void 0:B.trim())||"214.3 31.8% 91.4%",C=((h=m(t,"--ring"))==null?void 0:h.trim())||"222.2 84% 4.9%",_=Array.from({length:8},(I,O)=>{const W=`--chart-${O+1}`,A=m(t,W);return(A==null?void 0:A.trim())||J[O]});return{background:r,foreground:o,muted:a,mutedForeground:u,card:s,cardForeground:b,popover:v,popoverForeground:y,border:p,ring:C,chart:_}}function Y(e,t=l.ref("auto")){const r=l.shallowRef(null),o=l.ref(!1);let a=null,u=null;const s=()=>{if(!V()||!e.value)return;r.value=X(e.value);const p=document.documentElement.classList.contains("dark"),C=(u==null?void 0:u.matches)??!1;o.value=p||C},b=()=>{if(!V())return;const y=document.documentElement;a=new MutationObserver(()=>{s()}),a.observe(y,{attributes:!0,attributeFilter:["class"]}),u=matchMedia("(prefers-color-scheme: dark)");const p=()=>s();u.addEventListener("change",p)},v=()=>{a==null||a.disconnect(),a=null,u&&u.removeEventListener("change",()=>{})};return l.onMounted(()=>{s(),b()}),l.onUnmounted(()=>{v()}),l.watch(()=>t.value,()=>{s()}),{tokens:r,isDark:o,refresh:s}}function he(e){let t=null;return()=>{t===null&&(t=typeof requestAnimationFrame<"u"?requestAnimationFrame(()=>{e(),t=null}):setTimeout(()=>{e(),t=null},16))}}function me(e,t){const r=he(t);let o=null;return{start:()=>{!V()||!e.value||typeof ResizeObserver>"u"||(o=new ResizeObserver(()=>{r()}),o.observe(e.value))},stop:()=>{o&&(o.disconnect(),o=null)},isActive:()=>o!==null}}function Q(e,t,r={}){const o=l.shallowRef(null),{echarts:a,renderer:u="canvas",autoresize:s=!0,initOnNonZeroSize:b=!0,themeMode:v=l.ref("auto"),themeStrategy:y="option",themeName:p="shadcn",themeObject:C,updateMode:_="merge",notMerge:g=!1,lazyUpdate:L=!0,watch:z="shallow",loading:S,group:$,connectGroup:F=!1,events:w,debug:x=!1}=r,B=l.ref(v),{tokens:h,isDark:I}=Y(e,B),{start:O,stop:W}=me(e,()=>{var i;(i=o.value)==null||i.resize()});let A=null,M=null;const ee=async()=>{if(o.value)return;let i;if(a)i=a;else try{const c=await import("echarts");i=c.default||c}catch(c){throw console.error("[Chart] Failed to load echarts:",c),c}return i},N=async()=>{if(console.log("[Chart] init called, instance="+(o.value?"set":"null")),o.value)return;const i=V();if(!i||!e.value){console.error("[Chart] init skipped: domAvailable="+i+", elRef="+(e.value?"set":"null"));return}console.log("[Chart] init proceeding with ec.init");try{const c=await ee();console.log("[Chart] loaded echarts, ec.init="+(c.init?"exists":"missing"));let d;if(y==="echartsTheme"){if(C)c.registerTheme(p,C),d=p;else if(h.value){const E=K(h.value);c.registerTheme(p,E),d=p}}const f=c.init(e.value,d,{renderer:u});if(!f){console.error("[Chart] ec.init returned undefined");return}$&&(f.group=$,F&&c.connect($)),o.value=f,P(f,w),M=w?{...w}:null;const T=t.value,D=y==="option"&&h.value?j(T,h.value):T;if(f.setOption(D,{notMerge:_==="replace",lazyUpdate:L}),S===!0)f.showLoading();else if(typeof S=="object"&&S){const{text:E,color:H,maskColor:oe}=S;f.showLoading("default",{text:E,textColor:H,maskColor:oe})}x&&console.log("[Chart] Initialized")}catch(c){throw console.error("[Chart] Init failed:",c),c}},U=i=>{if(!o.value)return;const c=i||t.value,d=y==="option"&&h.value?j(c,h.value):c;o.value.setOption(d,{notMerge:_==="replace"||g,lazyUpdate:L}),A=d},te=i=>{var c;(c=o.value)==null||c.resize(i)},k=()=>{o.value&&(o.value.dispose(),o.value=null),W()},P=(i,c)=>{if(i){if(M)for(const[d,f]of Object.entries(M))i.off(d,f);if(c)for(const[d,f]of Object.entries(c))i.on(d,f)}},re=()=>{if(!o.value||y!=="option")return;if(!h.value){x&&console.log("[Chart] No tokens available for theme change");return}const i=t.value,c=j(i,h.value);o.value.setOption(c,{notMerge:!0}),x&&console.log("[Chart] Theme changed")};l.watch(()=>h.value,re,{deep:!1});const Z=()=>{if(!o.value)return;const i=t.value;z==="shallow"&&de(A,i)||(U(i),x&&console.log("[Chart] Option changed"))};return z==="shallow"?l.watch(()=>t.value,Z,{deep:!1}):l.watch(()=>t.value,Z,{deep:!0}),l.watch(()=>w,i=>{o.value&&(P(o.value,i),M=i?{...i}:null)},{deep:!0}),l.watch(()=>S,i=>{if(o.value){if(i===!1)o.value.hideLoading();else if(i===!0)o.value.showLoading();else if(typeof i=="object"&&i){const{text:c,color:d,maskColor:f}=i;o.value.showLoading("default",{text:c,textColor:d,maskColor:f})}}},{deep:!0}),l.onMounted(async()=>{try{if(b&&e.value){const{width:i,height:c}=e.value.getBoundingClientRect();if(i>0&&c>0){await N(),s&&O();return}let d=0;const f=10;for(;d<f&&e.value;){const T=e.value,{width:D,height:E}=T.getBoundingClientRect();if(D>0&&E>0)break;d++,await new Promise(H=>setTimeout(H,10))}e.value&&(await N(),s&&O())}else await N(),s&&O()}catch(i){throw console.error("[Chart] onMounted error:",i),i}}),l.onUnmounted(()=>{k()}),{instance:o,init:N,setOption:U,resize:te,dispose:k,tokens:h,isDark:I}}const pe=l.defineComponent({__name:"Chart",props:{echarts:{},renderer:{default:"canvas"},autoresize:{type:Boolean,default:!0},initOnNonZeroSize:{type:Boolean,default:!0},themeMode:{default:"auto"},themeStrategy:{default:"option"},themeName:{default:"shadcn"},themeObject:{},updateMode:{default:"merge"},notMerge:{type:Boolean},lazyUpdate:{type:Boolean,default:!0},watch:{default:"shallow"},loading:{type:[Boolean,Object]},group:{},connectGroup:{type:[Boolean,String],default:!1},events:{},minHeight:{default:240},debug:{type:Boolean,default:!1},option:{default:()=>({})}},emits:["ready","error","rendered"],setup(e,{expose:t,emit:r}){const o=e,a=r,u=l.ref(null),{instance:s,setOption:b,resize:v,dispose:y}=Q(u,l.computed(()=>o.option),{echarts:o.echarts,renderer:o.renderer,autoresize:o.autoresize,initOnNonZeroSize:o.initOnNonZeroSize,themeMode:o.themeMode,themeStrategy:o.themeStrategy,themeName:o.themeName,themeObject:o.themeObject,updateMode:o.updateMode,notMerge:o.notMerge,lazyUpdate:o.lazyUpdate,watch:o.watch,loading:o.loading,group:o.group,connectGroup:o.connectGroup,events:o.events,debug:o.debug}),p=l.computed(()=>({minHeight:typeof o.minHeight=="number"?`${o.minHeight}px`:o.minHeight}));return t({getInstance:()=>s.value,setOption:g=>{g&&b(g)},resize:v,dispose:y}),l.watch(s,g=>{g&&a("ready",g)}),(g,L)=>(l.openBlock(),l.createElementBlock("div",{ref_key:"el",ref:u,style:l.normalizeStyle(p.value),class:"w-full"},null,4))}});const ge=(e,t)=>{const r=e.__vccOpts||e;for(const[o,a]of t)r[o]=a;return r},ye=ge(pe,[["__scopeId","data-v-6e94ba6b"]]),be={class:"rounded-xl border bg-card text-card-foreground shadow-sm"},Se={key:0,class:"font-semibold"},ve={key:2,class:"text-sm text-muted-foreground"},Ce={key:1,class:"p-6 pt-0"},we=l.defineComponent({__name:"ChartCard",props:{title:{},description:{},contentClass:{},headerClass:{}},setup(e){return(t,r)=>(l.openBlock(),l.createElementBlock("div",be,[e.title||t.$slots.title||t.$slots.actions||e.description||t.$slots.description?(l.openBlock(),l.createElementBlock("div",{key:0,class:l.normalizeClass(["flex items-start justify-between p-6 pb-2",e.headerClass])},[l.createElementVNode("div",null,[e.title?(l.openBlock(),l.createElementBlock("h3",Se,l.toDisplayString(e.title),1)):l.createCommentVNode("",!0),e.title?l.createCommentVNode("",!0):l.renderSlot(t.$slots,"title",{key:1}),e.description?(l.openBlock(),l.createElementBlock("p",ve,l.toDisplayString(e.description),1)):l.createCommentVNode("",!0),e.description?l.createCommentVNode("",!0):l.renderSlot(t.$slots,"description",{key:3})]),l.renderSlot(t.$slots,"actions")],2)):l.createCommentVNode("",!0),l.createElementVNode("div",{class:l.normalizeClass(["p-6 pt-4",e.contentClass])},[l.renderSlot(t.$slots,"default")],2),t.$slots.footer?(l.openBlock(),l.createElementBlock("div",Ce,[l.renderSlot(t.$slots,"footer")])):l.createCommentVNode("",!0)]))}}),xe={class:"flex flex-col items-center justify-center py-12 text-center"},Le={class:"mt-4 font-semibold"},$e={class:"text-sm text-muted-foreground"},Oe=l.defineComponent({__name:"ChartEmpty",props:{title:{default:"No data"},description:{default:"Try adjusting filters."}},setup(e){return(t,r)=>(l.openBlock(),l.createElementBlock("div",xe,[l.renderSlot(t.$slots,"default"),l.createElementVNode("h3",Le,l.toDisplayString(e.title),1),l.createElementVNode("p",$e,l.toDisplayString(e.description),1)]))}}),Ae={class:"h-[240px] w-full rounded-md bg-muted animate-pulse"},_e=l.defineComponent({__name:"ChartSkeleton",props:{height:{}},setup(e){return(t,r)=>(l.openBlock(),l.createElementBlock("div",Ae))}});exports.Chart=ye;exports.ChartCard=we;exports.ChartEmpty=Oe;exports.ChartSkeleton=_e;exports.createEChartsTheme=K;exports.isHslComponent=R;exports.readCssVar=m;exports.readRootCssVar=fe;exports.readShadcnTokens=X;exports.resolveColor=n;exports.useChartTheme=Y;exports.useECharts=Q;exports.withShadcnDefaults=j;

package/dist/index.mjs

@@ -0,0 +1,845 @@
+import { shallowRef as le, ref as W, onMounted as ne, onUnmounted as ie, watch as $, defineComponent as G, computed as ee, openBlock as v, createElementBlock as S, normalizeStyle as ue, normalizeClass as te, createElementVNode as V, toDisplayString as U, createCommentVNode as F, renderSlot as M } from "vue";
+function de(e) {
+  return /^\d+\.?\d*\s+\d+\.?\d*%\s+\d+\.?\d*%$/.test(e.trim());
+}
+function l(e, t) {
+  if (!e)
+    return;
+  const r = String(e).trim();
+  if (r.startsWith("#")) {
+    if (t != null) {
+      const o = r.slice(1), s = parseInt(o.slice(0, 2), 16), c = parseInt(o.slice(2, 4), 16), i = parseInt(o.slice(4, 6), 16);
+      return `rgba(${s}, ${c}, ${i}, ${t})`;
+    }
+    return r;
+  }
+  if (r.startsWith("rgb("))
+    return t != null && !r.includes("rgba") ? r.replace(/rgb\(/, "rgba(").replace(/\)$/, `, ${t})`) : t != null && r.includes("rgba") ? r.replace(/rgba\(([^,]+),\s*([^,]+),\s*([^,]+),\s*[^)]+\)/, `rgba($1, $2, $3, ${t})`) : r;
+  if (r.startsWith("hsl("))
+    return t != null ? r.replace(/hsl\(/, "hsla(").replace(/\)$/, `, ${t})`) : r;
+  if (r.startsWith("hsla("))
+    return t != null ? r.replace(/hsla\(([^,]+),\s*([^,]+),\s*([^,]+),\s*[^)]+\)/, `hsla($1, $2, $3, ${t})`) : r;
+  if (de(r) || /^\d+\.?\d*\s+\d+\.?\d*%\s+\d+\.?\d*%\s*\/\s*[\d.]+$/.test(r)) {
+    if (r.includes("/"))
+      return t != null && t !== 1 ? `hsl(${r.split("/")[0].trim()} / ${t})` : `hsl(${r})`;
+    const o = r.split(/\s+/), s = o[0], c = o[1].replace("%", ""), i = o[2].replace("%", "");
+    return t != null && t !== 1 ? `hsla(${s}, ${c}%, ${i}%, ${t})` : `hsl(${s}, ${c}%, ${i}%)`;
+  }
+  return r;
+}
+function K(e, t) {
+  const r = JSON.parse(JSON.stringify(e));
+  r.color || (r.color = t.chart.map((i) => l(i) || i)), r.textStyle || (r.textStyle = {}), r.textStyle.color || (r.textStyle.color = l(t.foreground)), r.textStyle.fontFamily || (r.textStyle.fontFamily = "inherit"), r.title || (r.title = {}), Array.isArray(r.title) ? r.title = r.title.map((i) => ({
+    ...i,
+    textStyle: {
+      color: l(t.foreground),
+      ...i.textStyle
+    }
+  })) : r.title.textStyle = {
+    color: l(t.foreground),
+    ...r.title.textStyle || {}
+  }, r.legend || (r.legend = {}), Array.isArray(r.legend) ? r.legend = r.legend.map((i) => ({
+    ...i,
+    textStyle: {
+      color: l(t.mutedForeground),
+      ...i.textStyle
+    }
+  })) : r.legend.textStyle = {
+    color: l(t.mutedForeground),
+    ...r.legend.textStyle || {}
+  }, r.xAxis || (r.xAxis = {}), r.yAxis || (r.yAxis = {});
+  const o = l(t.border, 0.6) || t.border, s = l(t.border, 0.35) || t.border, c = l(t.mutedForeground) || t.mutedForeground;
+  for (const i of [r.xAxis, r.yAxis])
+    Array.isArray(i) ? i.forEach((y) => re(y, o, s, c)) : re(i, o, s, c);
+  return r.tooltip || (r.tooltip = {}), Array.isArray(r.tooltip) || (r.tooltip.backgroundColor = l(t.popover), r.tooltip.borderColor = l(t.border, 0.6), r.tooltip.textStyle = {
+    color: l(t.popoverForeground),
+    ...r.tooltip.textStyle
+  }), r.grid || (r.grid = {}), Array.isArray(r.grid) ? r.grid.forEach((i) => {
+    i.containLabel = !0;
+  }) : r.grid.containLabel = !0, r;
+}
+function re(e, t, r, o) {
+  e && (e.axisLine || (e.axisLine = {}), e.axisLine.lineStyle || (e.axisLine.lineStyle = {}), e.axisLine.lineStyle.color || (e.axisLine.lineStyle.color = t), e.axisLabel || (e.axisLabel = {}), e.axisLabel.color || (e.axisLabel.color = o), e.splitLine || (e.splitLine = {}), e.splitLine.lineStyle || (e.splitLine.lineStyle = {}), e.splitLine.lineStyle.color || (e.splitLine.lineStyle.color = r));
+}
+function fe(e) {
+  const t = l(e.border, 0.6), r = l(e.border, 0.35), o = l(e.background);
+  return {
+    color: e.chart.map((c) => l(c) || c),
+    backgroundColor: o,
+    textStyle: {
+      color: l(e.foreground),
+      fontFamily: "inherit"
+    },
+    title: {
+      textStyle: {
+        color: l(e.foreground)
+      }
+    },
+    grid: {
+      borderColor: t
+    },
+    legend: {
+      textStyle: {
+        color: l(e.mutedForeground)
+      }
+    },
+    tooltip: {
+      borderColor: t,
+      backgroundColor: o,
+      textStyle: {
+        color: l(e.foreground)
+      },
+      axisPointer: {
+        lineStyle: {
+          color: t,
+          width: 1
+        },
+        crossStyle: {
+          color: t,
+          width: 1
+        }
+      }
+    },
+    line: {
+      lineStyle: {
+        width: 2
+      },
+      symbol: "circle",
+      symbolSize: 4
+    },
+    bar: {
+      borderRadius: 0
+    },
+    pie: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: t
+      }
+    },
+    candlestick: {
+      itemStyle: {
+        color: e.chart[0],
+        color0: e.chart[1],
+        borderColor: e.chart[0],
+        borderColor0: e.chart[1],
+        borderWidth: 1
+      }
+    },
+    gauge: {
+      axisTick: {
+        distance: -30,
+        length: 8,
+        lineStyle: {
+          color: e.foreground,
+          width: 2
+        }
+      },
+      axisLabel: {
+        color: l(e.foreground)
+      },
+      splitLine: {
+        distance: -30,
+        length: 30,
+        lineStyle: {
+          color: e.foreground,
+          width: 2
+        }
+      },
+      detail: {
+        valueAnimation: !0,
+        formatter: "{value}",
+        color: l(e.foreground)
+      }
+    },
+    geo: {
+      borderColor: t,
+      itemStyle: {
+        areaColor: l(e.muted),
+        borderColor: t,
+        borderWidth: 0.5
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: l(e.border, 0.5)
+        }
+      }
+    },
+    categoryAxis: {
+      axisLine: {
+        show: !0,
+        lineStyle: {
+          color: t
+        }
+      },
+      axisLabel: {
+        show: !0,
+        color: l(e.mutedForeground)
+      },
+      splitLine: {
+        show: !1,
+        lineStyle: {
+          color: r
+        }
+      }
+    },
+    valueAxis: {
+      axisLine: {
+        show: !1,
+        lineStyle: {
+          color: t
+        }
+      },
+      axisLabel: {
+        show: !0,
+        color: l(e.mutedForeground)
+      },
+      splitLine: {
+        show: !0,
+        lineStyle: {
+          color: r
+        }
+      }
+    },
+    logAxis: {
+      axisLine: {
+        show: !0,
+        lineStyle: {
+          color: t
+        }
+      },
+      axisLabel: {
+        show: !0,
+        color: l(e.mutedForeground)
+      },
+      splitLine: {
+        show: !0,
+        lineStyle: {
+          color: r
+        }
+      }
+    },
+    timeAxis: {
+      axisLine: {
+        show: !0,
+        lineStyle: {
+          color: t
+        }
+      },
+      axisLabel: {
+        show: !0,
+        color: l(e.mutedForeground)
+      },
+      splitLine: {
+        show: !1,
+        lineStyle: {
+          color: r
+        }
+      }
+    },
+    angleAxis: {
+      axisLine: {
+        show: !0,
+        lineStyle: {
+          color: t
+        }
+      },
+      axisLabel: {
+        show: !0,
+        color: l(e.mutedForeground)
+      },
+      splitLine: {
+        show: !0,
+        lineStyle: {
+          color: r
+        }
+      }
+    },
+    radiusAxis: {
+      axisLine: {
+        show: !0,
+        lineStyle: {
+          color: t
+        }
+      },
+      axisLabel: {
+        show: !0,
+        color: l(e.mutedForeground)
+      },
+      splitLine: {
+        show: !0,
+        lineStyle: {
+          color: r
+        }
+      }
+    },
+    radar: {
+      itemStyle: {
+        borderWidth: 1
+      },
+      lineStyle: {
+        width: 2
+      },
+      symbolSize: 4
+    },
+    scatter: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: t
+      }
+    },
+    graph: {
+      itemStyle: {
+        borderWidth: 0,
+        borderColor: t
+      },
+      lineStyle: {
+        width: 1,
+        color: t
+      },
+      symbolSize: 4,
+      smooth: !1
+    },
+    map: {
+      itemStyle: {
+        areaColor: l(e.muted),
+        borderColor: t,
+        borderWidth: 0.5
+      },
+      emphasis: {
+        itemStyle: {
+          areaColor: l(e.border, 0.5)
+        }
+      }
+    },
+    toolbox: {
+      iconStyle: {
+        borderColor: l(e.foreground)
+      },
+      emphasis: {
+        iconStyle: {
+          borderColor: l(e.foreground)
+        }
+      }
+    },
+    timeline: {
+      lineStyle: {
+        color: t,
+        width: 1
+      },
+      itemStyle: {
+        color: e.chart[0],
+        borderWidth: 1
+      },
+      controlStyle: {
+        color: l(e.foreground),
+        borderColor: t,
+        borderWidth: 0.5
+      },
+      checkpointStyle: {
+        color: e.chart[0],
+        borderColor: e.chart[0]
+      },
+      label: {
+        color: l(e.foreground)
+      },
+      emphasis: {
+        itemStyle: {
+          color: e.chart[0]
+        },
+        controlStyle: {
+          color: l(e.foreground),
+          borderColor: t,
+          borderWidth: 0.5
+        },
+        label: {
+          color: l(e.foreground)
+        }
+      }
+    },
+    visualMap: {
+      textStyle: {
+        color: l(e.foreground)
+      }
+    },
+    dataZoom: {
+      backgroundColor: "rgba(0,0,0,0)",
+      dataBackgroundColor: l(e.border, 0.1),
+      fillerColor: l(e.border, 0.2),
+      handleColor: l(e.foreground),
+      handleSize: "100%",
+      textStyle: {
+        color: l(e.foreground)
+      }
+    },
+    markPoint: {
+      label: {
+        color: l(e.popoverForeground)
+      }
+    },
+    parallel: {
+      itemStyle: {
+        borderColor: t,
+        borderWidth: 1
+      }
+    }
+  };
+}
+function Z() {
+  return typeof document < "u" && typeof window < "u";
+}
+function he(e, t) {
+  if (e === t)
+    return !0;
+  if (e == null || t == null || typeof e != "object" || typeof t != "object")
+    return !1;
+  const r = Object.keys(e), o = Object.keys(t);
+  if (r.length !== o.length)
+    return !1;
+  for (const s of r)
+    if (!o.includes(s) || e[s] !== t[s])
+      return !1;
+  return !0;
+}
+function g(e, t) {
+  if (!e)
+    return null;
+  try {
+    return getComputedStyle(e).getPropertyValue(t).trim() || null;
+  } catch {
+    return null;
+  }
+}
+function Me(e) {
+  return typeof document > "u" ? null : g(document.documentElement, e);
+}
+const oe = [
+  "#ef4444",
+  "#f97316",
+  "#eab308",
+  "#22c55e",
+  "#06b6d4",
+  "#3b82f6",
+  "#8b5cf6",
+  "#ec4899"
+];
+function me(e) {
+  var m, O, j, b, A, N, w, L, B, f;
+  const t = e || (typeof document < "u" ? document.documentElement : null);
+  if (!t)
+    return {
+      background: "0 0% 100%",
+      foreground: "0 0% 0%",
+      muted: "210 40% 96%",
+      mutedForeground: "215.4 16.3% 46.9%",
+      card: "0 0% 100%",
+      cardForeground: "0 0% 0%",
+      popover: "0 0% 100%",
+      popoverForeground: "0 0% 0%",
+      border: "214.3 31.8% 91.4%",
+      ring: "222.2 84% 4.9%",
+      chart: oe
+    };
+  const r = ((m = g(t, "--background")) == null ? void 0 : m.trim()) || "0 0% 100%", o = ((O = g(t, "--foreground")) == null ? void 0 : O.trim()) || "0 0% 0%", s = ((j = g(t, "--muted")) == null ? void 0 : j.trim()) || "210 40% 96%", c = ((b = g(t, "--muted-foreground")) == null ? void 0 : b.trim()) || "215.4 16.3% 46.9%", i = ((A = g(t, "--card")) == null ? void 0 : A.trim()) || "0 0% 100%", y = ((N = g(t, "--card-foreground")) == null ? void 0 : N.trim()) || "0 0% 0%", C = ((w = g(t, "--popover")) == null ? void 0 : w.trim()) || "0 0% 100%", p = ((L = g(t, "--popover-foreground")) == null ? void 0 : L.trim()) || "0 0% 0%", h = ((B = g(t, "--border")) == null ? void 0 : B.trim()) || "214.3 31.8% 91.4%", x = ((f = g(t, "--ring")) == null ? void 0 : f.trim()) || "222.2 84% 4.9%", T = Array.from({ length: 8 }, (X, _) => {
+    const P = `--chart-${_ + 1}`, z = g(t, P);
+    return (z == null ? void 0 : z.trim()) || oe[_];
+  });
+  return {
+    background: r,
+    foreground: o,
+    muted: s,
+    mutedForeground: c,
+    card: i,
+    cardForeground: y,
+    popover: C,
+    popoverForeground: p,
+    border: h,
+    ring: x,
+    chart: T
+  };
+}
+function ge(e, t = W("auto")) {
+  const r = le(null), o = W(!1);
+  let s = null, c = null;
+  const i = () => {
+    if (!Z() || !e.value)
+      return;
+    r.value = me(e.value);
+    const h = document.documentElement.classList.contains("dark"), x = (c == null ? void 0 : c.matches) ?? !1;
+    o.value = h || x;
+  }, y = () => {
+    if (!Z())
+      return;
+    const p = document.documentElement;
+    s = new MutationObserver(() => {
+      i();
+    }), s.observe(p, { attributes: !0, attributeFilter: ["class"] }), c = matchMedia("(prefers-color-scheme: dark)");
+    const h = () => i();
+    c.addEventListener("change", h);
+  }, C = () => {
+    s == null || s.disconnect(), s = null, c && c.removeEventListener("change", () => {
+    });
+  };
+  return ne(() => {
+    i(), y();
+  }), ie(() => {
+    C();
+  }), $(() => t.value, () => {
+    i();
+  }), {
+    tokens: r,
+    isDark: o,
+    refresh: i
+  };
+}
+function pe(e) {
+  let t = null;
+  return () => {
+    t === null && (t = typeof requestAnimationFrame < "u" ? requestAnimationFrame(() => {
+      e(), t = null;
+    }) : setTimeout(() => {
+      e(), t = null;
+    }, 16));
+  };
+}
+function ye(e, t) {
+  const r = pe(t);
+  let o = null;
+  return {
+    start: () => {
+      !Z() || !e.value || typeof ResizeObserver > "u" || (o = new ResizeObserver(() => {
+        r();
+      }), o.observe(e.value));
+    },
+    stop: () => {
+      o && (o.disconnect(), o = null);
+    },
+    isActive: () => o !== null
+  };
+}
+function be(e, t, r = {}) {
+  const o = le(null), {
+    echarts: s,
+    renderer: c = "canvas",
+    autoresize: i = !0,
+    initOnNonZeroSize: y = !0,
+    themeMode: C = W("auto"),
+    themeStrategy: p = "option",
+    themeName: h = "shadcn",
+    themeObject: x,
+    updateMode: T = "merge",
+    notMerge: m = !1,
+    lazyUpdate: O = !0,
+    watch: j = "shallow",
+    loading: b,
+    group: A,
+    connectGroup: N = !1,
+    events: w,
+    debug: L = !1
+  } = r, B = W(C), { tokens: f, isDark: X } = ge(e, B), { start: _, stop: P } = ye(e, () => {
+    var n;
+    (n = o.value) == null || n.resize();
+  });
+  let z = null, D = null;
+  const se = async () => {
+    if (o.value)
+      return;
+    let n;
+    if (s)
+      n = s;
+    else
+      try {
+        const a = await import("echarts");
+        n = a.default || a;
+      } catch (a) {
+        throw console.error("[Chart] Failed to load echarts:", a), a;
+      }
+    return n;
+  }, H = async () => {
+    if (console.log("[Chart] init called, instance=" + (o.value ? "set" : "null")), o.value)
+      return;
+    const n = Z();
+    if (!n || !e.value) {
+      console.error("[Chart] init skipped: domAvailable=" + n + ", elRef=" + (e.value ? "set" : "null"));
+      return;
+    }
+    console.log("[Chart] init proceeding with ec.init");
+    try {
+      const a = await se();
+      console.log("[Chart] loaded echarts, ec.init=" + (a.init ? "exists" : "missing"));
+      let u;
+      if (p === "echartsTheme") {
+        if (x)
+          a.registerTheme(h, x), u = h;
+        else if (f.value) {
+          const E = fe(f.value);
+          a.registerTheme(h, E), u = h;
+        }
+      }
+      const d = a.init(e.value, u, { renderer: c });
+      if (!d) {
+        console.error("[Chart] ec.init returned undefined");
+        return;
+      }
+      A && (d.group = A, N && a.connect(A)), o.value = d, R(d, w), D = w ? { ...w } : null;
+      const I = t.value, q = p === "option" && f.value ? K(I, f.value) : I;
+      if (d.setOption(q, {
+        notMerge: T === "replace",
+        lazyUpdate: O
+      }), b === !0)
+        d.showLoading();
+      else if (typeof b == "object" && b) {
+        const { text: E, color: J, maskColor: ce } = b;
+        d.showLoading("default", { text: E, textColor: J, maskColor: ce });
+      }
+      L && console.log("[Chart] Initialized");
+    } catch (a) {
+      throw console.error("[Chart] Init failed:", a), a;
+    }
+  }, Y = (n) => {
+    if (!o.value)
+      return;
+    const a = n || t.value, u = p === "option" && f.value ? K(a, f.value) : a;
+    o.value.setOption(u, {
+      notMerge: T === "replace" || m,
+      lazyUpdate: O
+    }), z = u;
+  }, ae = (n) => {
+    var a;
+    (a = o.value) == null || a.resize(n);
+  }, Q = () => {
+    o.value && (o.value.dispose(), o.value = null), P();
+  }, R = (n, a) => {
+    if (n) {
+      if (D)
+        for (const [u, d] of Object.entries(D))
+          n.off(u, d);
+      if (a)
+        for (const [u, d] of Object.entries(a))
+          n.on(u, d);
+    }
+  };
+  $(() => f.value, () => {
+    if (!o.value || p !== "option")
+      return;
+    if (!f.value) {
+      L && console.log("[Chart] No tokens available for theme change");
+      return;
+    }
+    const n = t.value, a = K(n, f.value);
+    o.value.setOption(a, { notMerge: !0 }), L && console.log("[Chart] Theme changed");
+  }, { deep: !1 });
+  const k = () => {
+    if (!o.value)
+      return;
+    const n = t.value;
+    j === "shallow" && he(z, n) || (Y(n), L && console.log("[Chart] Option changed"));
+  };
+  return j === "shallow" ? $(() => t.value, k, { deep: !1 }) : $(() => t.value, k, { deep: !0 }), $(
+    () => w,
+    (n) => {
+      o.value && (R(o.value, n), D = n ? { ...n } : null);
+    },
+    { deep: !0 }
+  ), $(
+    () => b,
+    (n) => {
+      if (o.value) {
+        if (n === !1)
+          o.value.hideLoading();
+        else if (n === !0)
+          o.value.showLoading();
+        else if (typeof n == "object" && n) {
+          const { text: a, color: u, maskColor: d } = n;
+          o.value.showLoading("default", {
+            text: a,
+            textColor: u,
+            maskColor: d
+          });
+        }
+      }
+    },
+    { deep: !0 }
+  ), ne(async () => {
+    try {
+      if (y && e.value) {
+        const { width: n, height: a } = e.value.getBoundingClientRect();
+        if (n > 0 && a > 0) {
+          await H(), i && _();
+          return;
+        }
+        let u = 0;
+        const d = 10;
+        for (; u < d && e.value; ) {
+          const I = e.value, { width: q, height: E } = I.getBoundingClientRect();
+          if (q > 0 && E > 0)
+            break;
+          u++, await new Promise((J) => setTimeout(J, 10));
+        }
+        e.value && (await H(), i && _());
+      } else
+        await H(), i && _();
+    } catch (n) {
+      throw console.error("[Chart] onMounted error:", n), n;
+    }
+  }), ie(() => {
+    Q();
+  }), {
+    instance: o,
+    init: H,
+    setOption: Y,
+    resize: ae,
+    dispose: Q,
+    tokens: f,
+    isDark: X
+  };
+}
+const ve = /* @__PURE__ */ G({
+  __name: "Chart",
+  props: {
+    echarts: {},
+    renderer: { default: "canvas" },
+    autoresize: { type: Boolean, default: !0 },
+    initOnNonZeroSize: { type: Boolean, default: !0 },
+    themeMode: { default: "auto" },
+    themeStrategy: { default: "option" },
+    themeName: { default: "shadcn" },
+    themeObject: {},
+    updateMode: { default: "merge" },
+    notMerge: { type: Boolean },
+    lazyUpdate: { type: Boolean, default: !0 },
+    watch: { default: "shallow" },
+    loading: { type: [Boolean, Object] },
+    group: {},
+    connectGroup: { type: [Boolean, String], default: !1 },
+    events: {},
+    minHeight: { default: 240 },
+    debug: { type: Boolean, default: !1 },
+    option: { default: () => ({}) }
+  },
+  emits: ["ready", "error", "rendered"],
+  setup(e, { expose: t, emit: r }) {
+    const o = e, s = r, c = W(null), { instance: i, setOption: y, resize: C, dispose: p } = be(
+      c,
+      ee(() => o.option),
+      {
+        echarts: o.echarts,
+        renderer: o.renderer,
+        autoresize: o.autoresize,
+        initOnNonZeroSize: o.initOnNonZeroSize,
+        themeMode: o.themeMode,
+        themeStrategy: o.themeStrategy,
+        themeName: o.themeName,
+        themeObject: o.themeObject,
+        updateMode: o.updateMode,
+        notMerge: o.notMerge,
+        lazyUpdate: o.lazyUpdate,
+        watch: o.watch,
+        loading: o.loading,
+        group: o.group,
+        connectGroup: o.connectGroup,
+        events: o.events,
+        debug: o.debug
+      }
+    ), h = ee(() => ({
+      minHeight: typeof o.minHeight == "number" ? `${o.minHeight}px` : o.minHeight
+    }));
+    return t({
+      getInstance: () => i.value,
+      setOption: (m) => {
+        m && y(m);
+      },
+      resize: C,
+      dispose: p
+    }), $(i, (m) => {
+      m && s("ready", m);
+    }), (m, O) => (v(), S("div", {
+      ref_key: "el",
+      ref: c,
+      style: ue(h.value),
+      class: "w-full"
+    }, null, 4));
+  }
+});
+const Se = (e, t) => {
+  const r = e.__vccOpts || e;
+  for (const [o, s] of t)
+    r[o] = s;
+  return r;
+}, Te = /* @__PURE__ */ Se(ve, [["__scopeId", "data-v-6e94ba6b"]]), Ce = { class: "rounded-xl border bg-card text-card-foreground shadow-sm" }, xe = {
+  key: 0,
+  class: "font-semibold"
+}, we = {
+  key: 2,
+  class: "text-sm text-muted-foreground"
+}, Le = {
+  key: 1,
+  class: "p-6 pt-0"
+}, je = /* @__PURE__ */ G({
+  __name: "ChartCard",
+  props: {
+    title: {},
+    description: {},
+    contentClass: {},
+    headerClass: {}
+  },
+  setup(e) {
+    return (t, r) => (v(), S("div", Ce, [
+      e.title || t.$slots.title || t.$slots.actions || e.description || t.$slots.description ? (v(), S("div", {
+        key: 0,
+        class: te(["flex items-start justify-between p-6 pb-2", e.headerClass])
+      }, [
+        V("div", null, [
+          e.title ? (v(), S("h3", xe, U(e.title), 1)) : F("", !0),
+          e.title ? F("", !0) : M(t.$slots, "title", { key: 1 }),
+          e.description ? (v(), S("p", we, U(e.description), 1)) : F("", !0),
+          e.description ? F("", !0) : M(t.$slots, "description", { key: 3 })
+        ]),
+        M(t.$slots, "actions")
+      ], 2)) : F("", !0),
+      V("div", {
+        class: te(["p-6 pt-4", e.contentClass])
+      }, [
+        M(t.$slots, "default")
+      ], 2),
+      t.$slots.footer ? (v(), S("div", Le, [
+        M(t.$slots, "footer")
+      ])) : F("", !0)
+    ]));
+  }
+}), $e = { class: "flex flex-col items-center justify-center py-12 text-center" }, Oe = { class: "mt-4 font-semibold" }, Ae = { class: "text-sm text-muted-foreground" }, Ee = /* @__PURE__ */ G({
+  __name: "ChartEmpty",
+  props: {
+    title: { default: "No data" },
+    description: { default: "Try adjusting filters." }
+  },
+  setup(e) {
+    return (t, r) => (v(), S("div", $e, [
+      M(t.$slots, "default"),
+      V("h3", Oe, U(e.title), 1),
+      V("p", Ae, U(e.description), 1)
+    ]));
+  }
+}), _e = { class: "h-[240px] w-full rounded-md bg-muted animate-pulse" }, We = /* @__PURE__ */ G({
+  __name: "ChartSkeleton",
+  props: {
+    height: {}
+  },
+  setup(e) {
+    return (t, r) => (v(), S("div", _e));
+  }
+});
+export {
+  Te as Chart,
+  je as ChartCard,
+  Ee as ChartEmpty,
+  We as ChartSkeleton,
+  fe as createEChartsTheme,
+  de as isHslComponent,
+  g as readCssVar,
+  Me as readRootCssVar,
+  me as readShadcnTokens,
+  l as resolveColor,
+  ge as useChartTheme,
+  be as useECharts,
+  K as withShadcnDefaults
+};

package/dist/style.css

@@ -0,0 +1 @@
+[data-v-6e94ba6b] canvas{display:block;width:100%!important;height:100%!important}

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "shadcn-vue-echarts",
+  "version": "0.1.0",
+  "description": "Vue 3 ECharts wrapper with shadcn theming",
+  "type": "module",
+  "sideEffects": false,
+  "license": "MIT",
+  "author": "Jordan Thompson <jtthompson1887@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jtthompson1887/shadcn-vue-echarts.git"
+  },
+  "bugs": {
+    "url": "https://github.com/jtthompson1887/shadcn-vue-echarts/issues"
+  },
+  "keywords": [
+    "vue",
+    "echarts",
+    "shadcn",
+    "chart",
+    "theming",
+    "tailwind"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./components": {
+      "import": "./dist/components/index.mjs",
+      "require": "./dist/components/index.cjs",
+      "types": "./dist/components/index.d.ts"
+    },
+    "./composables": {
+      "import": "./dist/composables/index.mjs",
+      "require": "./dist/composables/index.cjs",
+      "types": "./dist/composables/index.d.ts"
+    },
+    "./theme": {
+      "import": "./dist/theme/index.mjs",
+      "require": "./dist/theme/index.cjs",
+      "types": "./dist/theme/index.d.ts"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "typecheck": "echo \"Type checking handled by ESLint and Vite\"",
+    "lint": "eslint src --ext .vue,.ts",
+    "lint:fix": "eslint src --ext .vue,.ts --fix"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0",
+    "echarts": "^5.4.0 || ^6.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/vue": "^8.0.0",
+    "@types/node": "^20.0.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/test-utils": "^2.4.0",
+    "happy-dom": "^12.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^4.4.0",
+    "vitest": "^0.34.0",
+    "vue": "^3.3.0",
+    "vue-tsc": "^1.8.0"
+  }
+}