dsp-semactic 0.2.0 → 0.3.0

package/dist/dsp-semactic.css

@@ -1 +1 @@
-.storybook-button[data-v-ade7987a]{display:inline-block;cursor:pointer;border:0;border-radius:3em;font-weight:700;line-height:1;font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-button--primary[data-v-ade7987a]{background-color:#555ab9;color:#fff}.storybook-button--secondary[data-v-ade7987a]{box-shadow:#00000026 0 0 0 1px inset;background-color:transparent;color:#333}.storybook-button--small[data-v-ade7987a]{padding:10px 16px;font-size:12px}.storybook-button--medium[data-v-ade7987a]{padding:11px 20px;font-size:14px}.storybook-button--large[data-v-ade7987a]{padding:12px 24px;font-size:16px}
+.storybook-button[data-v-ade7987a]{display:inline-block;cursor:pointer;border:0;border-radius:3em;font-weight:700;line-height:1;font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-button--primary[data-v-ade7987a]{background-color:#555ab9;color:#fff}.storybook-button--secondary[data-v-ade7987a]{box-shadow:#00000026 0 0 0 1px inset;background-color:transparent;color:#333}.storybook-button--small[data-v-ade7987a]{padding:10px 16px;font-size:12px}.storybook-button--medium[data-v-ade7987a]{padding:11px 20px;font-size:14px}.storybook-button--large[data-v-ade7987a]{padding:12px 24px;font-size:16px}.custom-chart-container[data-v-a8dbe667]{position:relative;font-family:Arial,sans-serif;background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;overflow:hidden}.chart-title[data-v-a8dbe667]{text-align:center;font-size:18px;font-weight:700;color:#333;margin:15px 0 5px}.chart-subtitle[data-v-a8dbe667]{text-align:center;font-size:14px;color:#666;margin-bottom:10px}.chart-svg[data-v-a8dbe667]{display:block}.chart-legend[data-v-a8dbe667]{display:flex;justify-content:center;flex-wrap:wrap;padding:15px;gap:20px;background:#f8f9fa;border-top:1px solid #e0e0e0}.legend-item[data-v-a8dbe667]{display:flex;align-items:center;gap:8px;cursor:pointer;transition:opacity .2s ease}.legend-item[data-v-a8dbe667]:hover{opacity:.7}.legend-item.hidden[data-v-a8dbe667]{opacity:.4}.legend-color[data-v-a8dbe667]{width:16px;height:16px;border-radius:2px}.legend-text[data-v-a8dbe667]{font-size:14px;color:#333}.chart-tooltip[data-v-a8dbe667]{position:absolute;background:#000c;color:#fff;padding:8px 12px;border-radius:4px;font-size:12px;pointer-events:none;z-index:1000;box-shadow:0 2px 8px #0003}.tooltip-title[data-v-a8dbe667]{font-weight:700;margin-bottom:2px}.tooltip-value[data-v-a8dbe667]{font-size:11px;opacity:.9}.chart-logos image[data-v-a8dbe667]{cursor:pointer;border-radius:50%}.chart-logos circle[data-v-a8dbe667]{cursor:pointer}

package/dist/vue-design-system.es.js

@@ -1,10 +1,10 @@
-import { computed as a, createElementBlock as l, openBlock as i, normalizeStyle as u, normalizeClass as y, toDisplayString as m } from "vue";
-const p = (t, e) => {
-  const o = t.__vccOpts || t;
-  for (const [r, n] of e)
-    o[r] = n;
-  return o;
-}, d = {
+import { computed as h, createElementBlock as o, openBlock as s, normalizeStyle as z, normalizeClass as B, toDisplayString as M, ref as O, createCommentVNode as v, createElementVNode as p, Fragment as f, renderList as x } from "vue";
+const j = (i, c) => {
+  const d = i.__vccOpts || i;
+  for (const [m, r] of c)
+    d[m] = r;
+  return d;
+}, ve = {
   __name: "MyButton",
   props: {
     label: {
@@ -17,8 +17,8 @@ const p = (t, e) => {
     },
     size: {
       type: String,
-      validator: function(t) {
-        return ["small", "medium", "large"].indexOf(t) !== -1;
+      validator: function(i) {
+        return ["small", "medium", "large"].indexOf(i) !== -1;
       }
     },
     backgroundColor: {
@@ -26,28 +26,562 @@ const p = (t, e) => {
     }
   },
   emits: ["click"],
-  setup(t, { emit: e }) {
-    const o = t, r = e, n = a(() => ({
+  setup(i, { emit: c }) {
+    const d = i, m = c, r = h(() => ({
       "storybook-button": !0,
-      "storybook-button--primary": o.primary,
-      "storybook-button--secondary": !o.primary,
-      [`storybook-button--${o.size || "medium"}`]: !0
-    })), s = a(() => ({
-      backgroundColor: o.backgroundColor
-    })), c = () => {
-      r("click");
+      "storybook-button--primary": d.primary,
+      "storybook-button--secondary": !d.primary,
+      [`storybook-button--${d.size || "medium"}`]: !0
+    })), N = h(() => ({
+      backgroundColor: d.backgroundColor
+    })), Y = () => {
+      m("click");
     };
-    return (k, _) => (i(), l("button", {
+    return ($, b) => (s(), o("button", {
       type: "button",
-      class: y(n.value),
-      onClick: c,
-      style: u(s.value)
-    }, m(t.label), 7));
+      class: B(r.value),
+      onClick: Y,
+      style: z(N.value)
+    }, M(i.label), 7));
   }
-}, b = /* @__PURE__ */ p(d, [["__scopeId", "data-v-ade7987a"]]), g = {
-  MyButton: b
+}, fe = /* @__PURE__ */ j(ve, [["__scopeId", "data-v-ade7987a"]]), xe = {
+  key: 0,
+  class: "chart-title"
+}, ge = {
+  key: 1,
+  class: "chart-subtitle"
+}, me = ["width", "height"], ke = { key: 0 }, pe = {
+  key: 0,
+  class: "grid-lines"
+}, $e = ["x1", "x2", "y1", "y2"], be = ["x1", "x2", "y1", "y2"], we = { class: "axes" }, _e = ["x1", "x2", "y1", "y2"], Me = ["x1", "x2", "y1", "y2"], Ie = { class: "axis-labels" }, Se = ["x", "y"], Le = ["x", "y"], Te = ["x", "y"], Ae = ["y", "transform"], Ee = { class: "chart-data" }, Xe = { key: 0 }, Ce = ["d", "stroke", "stroke-width"], Ye = ["cx", "cy", "r", "fill", "onMouseover"], Ne = { key: 1 }, ze = ["d", "fill", "fill-opacity", "stroke", "stroke-width"], Be = { key: 2 }, Ge = ["x", "y", "width", "height", "fill", "onMouseover"], Pe = {
+  key: 1,
+  class: "radial-chart"
+}, De = ["cx", "cy", "r"], Re = ["d"], qe = { key: 2 }, Ve = ["cx", "cy", "r"], We = { class: "radial-data" }, Oe = ["d", "fill", "fill-opacity", "stroke", "onMouseover"], je = { class: "chart-logos" }, Fe = ["cx", "cy", "r", "fill"], Ze = ["x", "y", "width", "height", "xlink:href", "onLoad", "onError", "clip-path"], He = {
+  key: 2,
+  class: "chart-legend"
+}, Je = ["onClick"], Ke = { class: "legend-text" }, Qe = { class: "tooltip-title" }, Ue = { class: "tooltip-value" }, C = 60, et = {
+  __name: "Graph",
+  props: {
+    // Required
+    series: {
+      type: Array,
+      required: !0,
+      default: () => []
+    },
+    // Chart type
+    chartType: {
+      type: String,
+      default: "line",
+      validator: (i) => ["line", "area", "bar", "radial", "semi-radial"].includes(i)
+    },
+    // Dimensions
+    width: {
+      type: Number,
+      default: 800
+    },
+    height: {
+      type: Number,
+      default: 400
+    },
+    // Titles
+    title: {
+      type: String,
+      default: ""
+    },
+    subtitle: {
+      type: String,
+      default: ""
+    },
+    xAxisTitle: {
+      type: String,
+      default: ""
+    },
+    yAxisTitle: {
+      type: String,
+      default: ""
+    },
+    // Data
+    categories: {
+      type: Array,
+      default: () => []
+    },
+    // Colors
+    colors: {
+      type: Array,
+      default: () => ["#3498db", "#e74c3c", "#2ecc71", "#f39c12", "#9b59b6", "#1abc9c", "#34495e"]
+    },
+    // Logos
+    logos: {
+      type: Array,
+      default: () => []
+    },
+    // Display options
+    showGrid: {
+      type: Boolean,
+      default: !0
+    },
+    showLegend: {
+      type: Boolean,
+      default: !0
+    },
+    // Styling
+    strokeWidth: {
+      type: Number,
+      default: 2
+    },
+    markerSize: {
+      type: Number,
+      default: 4
+    },
+    areaOpacity: {
+      type: Number,
+      default: 0.3
+    }
+  },
+  setup(i) {
+    const c = i, d = O(/* @__PURE__ */ new Set()), m = O({
+      show: !1,
+      x: 0,
+      y: 0,
+      title: "",
+      value: ""
+    }), r = h(() => ({
+      left: C,
+      top: C,
+      right: c.width - C,
+      bottom: c.height - C,
+      width: c.width - C * 2,
+      height: c.height - C * 2
+    })), N = h(() => ["line", "area", "bar"].includes(c.chartType)), Y = h(() => ["radial", "semi-radial"].includes(c.chartType)), $ = h(() => c.width / 2), b = h(() => c.height / 2), y = h(() => Math.min(r.value.width, r.value.height) / 2 - 20), I = h(() => y.value * 0.3), w = h(() => c.series.filter((a, l) => !d.value.has(l))), A = h(() => {
+      if (!w.value.length) return { minX: 0, maxX: 1, minY: 0, maxY: 1 };
+      let a = 1 / 0, l = -1 / 0, e = 0;
+      w.value.forEach((n) => {
+        n.data && n.data.length && (e = Math.max(e, n.data.length - 1), n.data.forEach((u) => {
+          typeof u == "number" && (a = Math.min(a, u), l = Math.max(l, u));
+        }));
+      }), a === 1 / 0 && (a = 0, l = 100);
+      const t = (l - a) * 0.1;
+      return {
+        minX: 0,
+        maxX: e,
+        minY: Math.max(0, a - t),
+        maxY: l + t
+      };
+    }), E = (a) => {
+      const { minX: l, maxX: e } = A.value, t = e - l || 1;
+      return r.value.left + (a - l) / t * r.value.width;
+    }, S = (a) => {
+      const { minY: l, maxY: e } = A.value, t = e - l || 1;
+      return r.value.bottom - (a - l) / t * r.value.height;
+    }, F = h(() => {
+      const a = [];
+      for (let e = 0; e <= 5; e++) {
+        const t = r.value.top + r.value.height / 5 * e;
+        a.push({ y: t });
+      }
+      return a;
+    }), Z = h(() => {
+      const a = [], l = Math.min(A.value.maxX || 5, 6);
+      for (let e = 0; e <= l; e++) {
+        const t = r.value.left + r.value.width / l * e;
+        a.push({ x: t });
+      }
+      return a;
+    }), H = h(() => {
+      const a = [], { maxX: l } = A.value, e = Math.max(1, Math.floor(l / 6));
+      for (let t = 0; t <= l; t += e)
+        a.push({
+          x: E(t),
+          y: r.value.bottom + 20,
+          text: c.categories[t] || t.toString()
+        });
+      return a;
+    }), J = h(() => {
+      const a = [], { minY: l, maxY: e } = A.value, t = 5;
+      for (let n = 0; n <= t; n++) {
+        const u = l + (e - l) * (n / t);
+        a.push({
+          x: r.value.left - 10,
+          y: S(u),
+          text: Math.round(u).toString()
+        });
+      }
+      return a;
+    }), L = (a) => c.colors[a % c.colors.length], K = h(() => c.chartType !== "line" ? [] : w.value.map((a, l) => {
+      const e = c.series.findIndex((u) => u === a), t = a.data.map((u, _) => ({
+        x: E(_),
+        y: S(u)
+      }));
+      return {
+        path: t.length > 0 ? `M ${t[0].x} ${t[0].y}` + t.slice(1).map((u) => ` L ${u.x} ${u.y}`).join("") : "",
+        color: L(e)
+      };
+    })), Q = h(() => {
+      if (c.chartType !== "line") return [];
+      const a = [];
+      return w.value.forEach((l, e) => {
+        const t = c.series.findIndex((n) => n === l);
+        l.data.forEach((n, u) => {
+          a.push({
+            x: E(u),
+            y: S(n),
+            color: L(t),
+            value: n,
+            label: c.categories[u] || u.toString(),
+            seriesName: l.name
+          });
+        });
+      }), a;
+    }), U = h(() => c.chartType !== "area" ? [] : w.value.map((a, l) => {
+      const e = c.series.findIndex((u) => u === a), t = a.data.map((u, _) => ({
+        x: E(_),
+        y: S(u)
+      }));
+      if (t.length === 0) return { path: "", color: L(e) };
+      let n = `M ${t[0].x} ${r.value.bottom}`;
+      return n += ` L ${t[0].x} ${t[0].y}`, t.slice(1).forEach((u) => {
+        n += ` L ${u.x} ${u.y}`;
+      }), n += ` L ${t[t.length - 1].x} ${r.value.bottom} Z`, {
+        path: n,
+        color: L(e)
+      };
+    })), ee = h(() => {
+      if (c.chartType !== "bar") return [];
+      const a = [], { maxX: l } = A.value, e = r.value.width / (l + 1) * 0.8, t = w.value.length, n = e / t;
+      return w.value.forEach((u, _) => {
+        const g = c.series.findIndex((k) => k === u);
+        u.data.forEach((k, T) => {
+          const D = E(T) - e / 2 + _ * n, R = S(Math.max(0, k)), q = Math.abs(S(0) - S(k));
+          a.push({
+            x: D,
+            y: R,
+            width: n - 2,
+            height: q,
+            color: L(g),
+            value: k,
+            label: c.categories[T] || T.toString(),
+            seriesName: u.name
+          });
+        });
+      }), a;
+    }), te = h(() => {
+      const a = [];
+      for (let e = 1; e <= 4; e++)
+        a.push(I.value + (y.value - I.value) * (e / 4));
+      return a;
+    }), ae = h(() => {
+      if (c.chartType !== "semi-radial") return "";
+      const a = $.value - y.value, l = b.value, e = $.value + y.value, t = b.value;
+      return `M ${a} ${l} A ${y.value} ${y.value} 0 0 0 ${e} ${t}`;
+    }), le = h(() => {
+      if (!Y.value) return [];
+      const a = [], l = w.value.reduce((n, u) => n + (u.data[0] || 0), 0);
+      if (l === 0) return [];
+      let e = c.chartType === "semi-radial" ? Math.PI : -Math.PI / 2;
+      const t = c.chartType === "semi-radial" ? Math.PI : Math.PI * 2;
+      return w.value.forEach((n, u) => {
+        const _ = c.series.findIndex((ye) => ye === n), g = n.data[0] || 0, k = g / l * t, T = e, X = e + k, D = $.value + Math.cos(T) * I.value, R = b.value + Math.sin(T) * I.value, q = $.value + Math.cos(X) * I.value, re = b.value + Math.sin(X) * I.value, ie = $.value + Math.cos(X) * y.value, ce = b.value + Math.sin(X) * y.value, ue = $.value + Math.cos(T) * y.value, he = b.value + Math.sin(T) * y.value, W = k > Math.PI ? 1 : 0, de = [
+          `M ${D} ${R}`,
+          `A ${I.value} ${I.value} 0 ${W} 1 ${q} ${re}`,
+          `L ${ie} ${ce}`,
+          `A ${y.value} ${y.value} 0 ${W} 0 ${ue} ${he}`,
+          "Z"
+        ].join(" ");
+        a.push({
+          path: de,
+          color: L(_),
+          value: g,
+          seriesName: n.name,
+          opacity: 0.8
+        }), e = X;
+      }), a;
+    }), V = h(() => (console.log("Calculating logo positions...", c.logos), c.logos.map((a, l) => {
+      var _;
+      const e = c.series[a.seriesIndex];
+      if (console.log(`Logo ${l}:`, {
+        seriesIndex: a.seriesIndex,
+        series: e,
+        hasData: ((_ = e == null ? void 0 : e.data) == null ? void 0 : _.length) > 0,
+        isHidden: d.value.has(a.seriesIndex)
+      }), !e || !e.data || e.data.length === 0)
+        return console.warn(`No data for logo series ${a.seriesIndex}`), null;
+      if (d.value.has(a.seriesIndex))
+        return null;
+      let t, n;
+      if (N.value) {
+        const g = e.data.length - 1, k = e.data[g];
+        t = E(g) + (a.offsetX || 0), n = S(k) + (a.offsetY || 0), console.log("Linear chart logo position:", { x: t, y: n, lastValue: k, lastIndex: g });
+      } else if (Y.value) {
+        const g = Math.PI * 2 / c.logos.length * l;
+        t = $.value + Math.cos(g) * (y.value + 30) + (a.offsetX || 0), n = b.value + Math.sin(g) * (y.value + 30) + (a.offsetY || 0), console.log("Radial chart logo position:", { x: t, y: n, angle: g });
+      }
+      const u = {
+        ...a,
+        x: t,
+        y: n,
+        seriesIndex: a.seriesIndex
+      };
+      return console.log("Final logo position:", u), u;
+    }).filter(Boolean))), oe = (a) => {
+      console.log(`Logo ${a} loaded successfully`);
+      const l = document.querySelector(`.logo-fallback-${a}`), e = document.querySelector(`.logo-image-${a}`);
+      l && (l.style.opacity = "0"), e && (e.style.opacity = "1");
+    }, se = (a) => {
+      console.warn(`Logo ${a} failed to load, keeping fallback circle`);
+      const l = document.querySelector(`.logo-image-${a}`);
+      l && (l.style.display = "none");
+    }, ne = (a) => {
+      d.value.has(a) ? d.value.delete(a) : d.value.add(a);
+    }, G = (a, l) => {
+      var t;
+      const e = l.target.closest(".custom-chart-container").getBoundingClientRect();
+      m.value = {
+        show: !0,
+        x: l.clientX - e.left + 10,
+        y: l.clientY - e.top - 10,
+        title: a.seriesName || a.label || "",
+        value: ((t = a.value) == null ? void 0 : t.toString()) || ""
+      };
+    }, P = () => {
+      m.value.show = !1;
+    };
+    return (a, l) => (s(), o("div", {
+      class: "custom-chart-container",
+      style: z({ width: i.width + "px", height: i.height + "px" })
+    }, [
+      i.title ? (s(), o("div", xe, M(i.title), 1)) : v("", !0),
+      i.subtitle ? (s(), o("div", ge, M(i.subtitle), 1)) : v("", !0),
+      (s(), o("svg", {
+        width: i.width,
+        height: i.height,
+        class: "chart-svg"
+      }, [
+        N.value ? (s(), o("g", ke, [
+          i.showGrid ? (s(), o("g", pe, [
+            (s(!0), o(f, null, x(F.value, (e, t) => (s(), o("line", {
+              key: `h-grid-${t}`,
+              x1: r.value.left,
+              x2: r.value.right,
+              y1: e.y,
+              y2: e.y,
+              stroke: "#e0e0e0",
+              "stroke-width": "1",
+              "stroke-dasharray": "2,2"
+            }, null, 8, $e))), 128)),
+            (s(!0), o(f, null, x(Z.value, (e, t) => (s(), o("line", {
+              key: `v-grid-${t}`,
+              x1: e.x,
+              x2: e.x,
+              y1: r.value.top,
+              y2: r.value.bottom,
+              stroke: "#e0e0e0",
+              "stroke-width": "1",
+              "stroke-dasharray": "2,2"
+            }, null, 8, be))), 128))
+          ])) : v("", !0),
+          p("g", we, [
+            p("line", {
+              x1: r.value.left,
+              x2: r.value.right,
+              y1: r.value.bottom,
+              y2: r.value.bottom,
+              stroke: "#ccc",
+              "stroke-width": "1"
+            }, null, 8, _e),
+            p("line", {
+              x1: r.value.left,
+              x2: r.value.left,
+              y1: r.value.top,
+              y2: r.value.bottom,
+              stroke: "#ccc",
+              "stroke-width": "1"
+            }, null, 8, Me)
+          ]),
+          p("g", Ie, [
+            (s(!0), o(f, null, x(H.value, (e, t) => (s(), o("text", {
+              key: `x-${t}`,
+              x: e.x,
+              y: e.y,
+              "text-anchor": "middle",
+              "font-size": "12",
+              fill: "#666"
+            }, M(e.text), 9, Se))), 128)),
+            (s(!0), o(f, null, x(J.value, (e, t) => (s(), o("text", {
+              key: `y-${t}`,
+              x: e.x,
+              y: e.y,
+              "text-anchor": "end",
+              "font-size": "12",
+              fill: "#666",
+              "dominant-baseline": "middle"
+            }, M(e.text), 9, Le))), 128)),
+            i.xAxisTitle ? (s(), o("text", {
+              key: 0,
+              x: r.value.left + r.value.width / 2,
+              y: i.height - 15,
+              "text-anchor": "middle",
+              "font-size": "14",
+              "font-weight": "bold",
+              fill: "#333"
+            }, M(i.xAxisTitle), 9, Te)) : v("", !0),
+            i.yAxisTitle ? (s(), o("text", {
+              key: 1,
+              x: 15,
+              y: r.value.top + r.value.height / 2,
+              "text-anchor": "middle",
+              "font-size": "14",
+              "font-weight": "bold",
+              fill: "#333",
+              transform: `rotate(-90, 15, ${r.value.top + r.value.height / 2})`
+            }, M(i.yAxisTitle), 9, Ae)) : v("", !0)
+          ]),
+          p("g", Ee, [
+            i.chartType === "line" ? (s(), o("g", Xe, [
+              (s(!0), o(f, null, x(K.value, (e, t) => (s(), o("path", {
+                key: `line-${t}`,
+                d: e.path,
+                stroke: e.color,
+                "stroke-width": i.strokeWidth,
+                fill: "none",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              }, null, 8, Ce))), 128)),
+              (s(!0), o(f, null, x(Q.value, (e, t) => (s(), o("circle", {
+                key: `point-${t}`,
+                cx: e.x,
+                cy: e.y,
+                r: i.markerSize,
+                fill: e.color,
+                stroke: "white",
+                "stroke-width": "2",
+                onMouseover: (n) => G(e, n),
+                onMouseleave: P
+              }, null, 40, Ye))), 128))
+            ])) : v("", !0),
+            i.chartType === "area" ? (s(), o("g", Ne, [
+              (s(!0), o(f, null, x(U.value, (e, t) => (s(), o("path", {
+                key: `area-${t}`,
+                d: e.path,
+                fill: e.color,
+                "fill-opacity": i.areaOpacity,
+                stroke: e.color,
+                "stroke-width": i.strokeWidth
+              }, null, 8, ze))), 128))
+            ])) : v("", !0),
+            i.chartType === "bar" ? (s(), o("g", Be, [
+              (s(!0), o(f, null, x(ee.value, (e, t) => (s(), o("rect", {
+                key: `bar-${t}`,
+                x: e.x,
+                y: e.y,
+                width: e.width,
+                height: e.height,
+                fill: e.color,
+                stroke: "white",
+                "stroke-width": "1",
+                onMouseover: (n) => G(e, n),
+                onMouseleave: P
+              }, null, 40, Ge))), 128))
+            ])) : v("", !0)
+          ])
+        ])) : v("", !0),
+        Y.value ? (s(), o("g", Pe, [
+          i.chartType === "radial" ? (s(), o("circle", {
+            key: 0,
+            cx: $.value,
+            cy: b.value,
+            r: y.value,
+            fill: "none",
+            stroke: "#e0e0e0",
+            "stroke-width": "1"
+          }, null, 8, De)) : v("", !0),
+          i.chartType === "semi-radial" ? (s(), o("path", {
+            key: 1,
+            d: ae.value,
+            fill: "none",
+            stroke: "#e0e0e0",
+            "stroke-width": "1"
+          }, null, 8, Re)) : v("", !0),
+          i.showGrid ? (s(), o("g", qe, [
+            (s(!0), o(f, null, x(te.value, (e) => (s(), o("circle", {
+              key: `grid-${e}`,
+              cx: $.value,
+              cy: b.value,
+              r: e,
+              fill: "none",
+              stroke: "#f0f0f0",
+              "stroke-width": "1"
+            }, null, 8, Ve))), 128))
+          ])) : v("", !0),
+          p("g", We, [
+            (s(!0), o(f, null, x(le.value, (e, t) => (s(), o("path", {
+              key: `radial-${t}`,
+              d: e.path,
+              fill: e.color,
+              "fill-opacity": e.opacity || 0.8,
+              stroke: e.color,
+              "stroke-width": 2,
+              onMouseover: (n) => G(e, n),
+              onMouseleave: P
+            }, null, 40, Oe))), 128))
+          ])
+        ])) : v("", !0),
+        p("g", je, [
+          (s(!0), o(f, null, x(V.value, (e, t) => (s(), o("circle", {
+            key: `logo-fallback-${t}`,
+            cx: e.x,
+            cy: e.y,
+            r: e.width / 2,
+            fill: L(e.seriesIndex),
+            stroke: "white",
+            "stroke-width": "2",
+            class: B(`logo-fallback-${t}`)
+          }, null, 10, Fe))), 128)),
+          (s(!0), o(f, null, x(V.value, (e, t) => (s(), o("image", {
+            key: `logo-${t}`,
+            x: e.x - e.width / 2,
+            y: e.y - e.height / 2,
+            width: e.width,
+            height: e.height,
+            "xlink:href": e.url,
+            onLoad: (n) => oe(t),
+            onError: (n) => se(t),
+            class: B(`logo-image-${t}`),
+            "clip-path": `circle(${e.width / 2}px at ${e.width / 2}px ${e.height / 2}px)`
+          }, null, 42, Ze))), 128))
+        ])
+      ], 8, me)),
+      i.showLegend ? (s(), o("div", He, [
+        (s(!0), o(f, null, x(w.value, (e, t) => (s(), o("div", {
+          key: `legend-${t}`,
+          class: B(["legend-item", { hidden: d.value.has(t) }]),
+          onClick: (n) => ne(t)
+        }, [
+          p("div", {
+            class: "legend-color",
+            style: z({ backgroundColor: L(t) })
+          }, null, 4),
+          p("span", Ke, M(e.name), 1)
+        ], 10, Je))), 128))
+      ])) : v("", !0),
+      m.value.show ? (s(), o("div", {
+        key: 3,
+        class: "chart-tooltip",
+        style: z({
+          left: m.value.x + "px",
+          top: m.value.y + "px"
+        })
+      }, [
+        p("div", Qe, M(m.value.title), 1),
+        p("div", Ue, M(m.value.value), 1)
+      ], 4)) : v("", !0)
+    ], 4));
+  }
+}, tt = /* @__PURE__ */ j(et, [["__scopeId", "data-v-a8dbe667"]]), lt = {
+  MyButton: fe,
+  Graph: tt
 };
 export {
-  b as MyButton,
-  g as default
+  tt as Graph,
+  fe as MyButton,
+  lt as default
 };

package/dist/vue-design-system.umd.js

@@ -1 +1 @@
-(function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.VueDesignSystem={},e.Vue))})(this,function(e,t){"use strict";const c=((o,r)=>{const n=o.__vccOpts||o;for(const[s,i]of r)n[s]=i;return n})({__name:"MyButton",props:{label:{type:String,required:!0},primary:{type:Boolean,default:!1},size:{type:String,validator:function(o){return["small","medium","large"].indexOf(o)!==-1}},backgroundColor:{type:String}},emits:["click"],setup(o,{emit:r}){const n=o,s=r,i=t.computed(()=>({"storybook-button":!0,"storybook-button--primary":n.primary,"storybook-button--secondary":!n.primary,[`storybook-button--${n.size||"medium"}`]:!0})),l=t.computed(()=>({backgroundColor:n.backgroundColor})),a=()=>{s("click")};return(y,m)=>(t.openBlock(),t.createElementBlock("button",{type:"button",class:t.normalizeClass(i.value),onClick:a,style:t.normalizeStyle(l.value)},t.toDisplayString(o.label),7))}},[["__scopeId","data-v-ade7987a"]]),u={MyButton:c};e.MyButton=c,e.default=u,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(x,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(x=typeof globalThis<"u"?globalThis:x||self,e(x.VueDesignSystem={},x.Vue))})(this,function(x,e){"use strict";const z=(c,s)=>{const d=c.__vccOpts||c;for(const[u,r]of s)d[u]=r;return d},X=z({__name:"MyButton",props:{label:{type:String,required:!0},primary:{type:Boolean,default:!1},size:{type:String,validator:function(c){return["small","medium","large"].indexOf(c)!==-1}},backgroundColor:{type:String}},emits:["click"],setup(c,{emit:s}){const d=c,u=s,r=e.computed(()=>({"storybook-button":!0,"storybook-button--primary":d.primary,"storybook-button--secondary":!d.primary,[`storybook-button--${d.size||"medium"}`]:!0})),L=e.computed(()=>({backgroundColor:d.backgroundColor})),N=()=>{u("click")};return(k,p)=>(e.openBlock(),e.createElementBlock("button",{type:"button",class:e.normalizeClass(r.value),onClick:N,style:e.normalizeStyle(L.value)},e.toDisplayString(c.label),7))}},[["__scopeId","data-v-ade7987a"]]),G={key:0,class:"chart-title"},P={key:1,class:"chart-subtitle"},q=["width","height"],R={key:0},j={key:0,class:"grid-lines"},O=["x1","x2","y1","y2"],W=["x1","x2","y1","y2"],Z={class:"axes"},H=["x1","x2","y1","y2"],J=["x1","x2","y1","y2"],K={class:"axis-labels"},Q=["x","y"],U=["x","y"],v=["x","y"],ee=["y","transform"],te={class:"chart-data"},oe={key:0},le=["d","stroke","stroke-width"],ne=["cx","cy","r","fill","onMouseover"],ae={key:1},re=["d","fill","fill-opacity","stroke","stroke-width"],ce={key:2},se=["x","y","width","height","fill","onMouseover"],ie={key:1,class:"radial-chart"},de=["cx","cy","r"],he=["d"],me={key:2},ue=["cx","cy","r"],ye={class:"radial-data"},ke=["d","fill","fill-opacity","stroke","onMouseover"],pe={class:"chart-logos"},fe=["cx","cy","r","fill"],ge=["x","y","width","height","xlink:href","onLoad","onError","clip-path"],xe={key:2,class:"chart-legend"},Be=["onClick"],Ee={class:"legend-text"},$e={class:"tooltip-title"},be={class:"tooltip-value"},w=60,D=z({__name:"Graph",props:{series:{type:Array,required:!0,default:()=>[]},chartType:{type:String,default:"line",validator:c=>["line","area","bar","radial","semi-radial"].includes(c)},width:{type:Number,default:800},height:{type:Number,default:400},title:{type:String,default:""},subtitle:{type:String,default:""},xAxisTitle:{type:String,default:""},yAxisTitle:{type:String,default:""},categories:{type:Array,default:()=>[]},colors:{type:Array,default:()=>["#3498db","#e74c3c","#2ecc71","#f39c12","#9b59b6","#1abc9c","#34495e"]},logos:{type:Array,default:()=>[]},showGrid:{type:Boolean,default:!0},showLegend:{type:Boolean,default:!0},strokeWidth:{type:Number,default:2},markerSize:{type:Number,default:4},areaOpacity:{type:Number,default:.3}},setup(c){const s=c,d=e.ref(new Set),u=e.ref({show:!1,x:0,y:0,title:"",value:""}),r=e.computed(()=>({left:w,top:w,right:s.width-w,bottom:s.height-w,width:s.width-w*2,height:s.height-w*2})),L=e.computed(()=>["line","area","bar"].includes(s.chartType)),N=e.computed(()=>["radial","semi-radial"].includes(s.chartType)),k=e.computed(()=>s.width/2),p=e.computed(()=>s.height/2),h=e.computed(()=>Math.min(r.value.width,r.value.height)/2-20),B=e.computed(()=>h.value*.3),f=e.computed(()=>s.series.filter((l,n)=>!d.value.has(n))),_=e.computed(()=>{if(!f.value.length)return{minX:0,maxX:1,minY:0,maxY:1};let l=1/0,n=-1/0,t=0;f.value.forEach(a=>{a.data&&a.data.length&&(t=Math.max(t,a.data.length-1),a.data.forEach(i=>{typeof i=="number"&&(l=Math.min(l,i),n=Math.max(n,i))}))}),l===1/0&&(l=0,n=100);const o=(n-l)*.1;return{minX:0,maxX:t,minY:Math.max(0,l-o),maxY:n+o}}),M=l=>{const{minX:n,maxX:t}=_.value,o=t-n||1;return r.value.left+(l-n)/o*r.value.width},E=l=>{const{minY:n,maxY:t}=_.value,o=t-n||1;return r.value.bottom-(l-n)/o*r.value.height},_e=e.computed(()=>{const l=[];for(let t=0;t<=5;t++){const o=r.value.top+r.value.height/5*t;l.push({y:o})}return l}),Me=e.computed(()=>{const l=[],n=Math.min(_.value.maxX||5,6);for(let t=0;t<=n;t++){const o=r.value.left+r.value.width/n*t;l.push({x:o})}return l}),Se=e.computed(()=>{const l=[],{maxX:n}=_.value,t=Math.max(1,Math.floor(n/6));for(let o=0;o<=n;o+=t)l.push({x:M(o),y:r.value.bottom+20,text:s.categories[o]||o.toString()});return l}),Ne=e.computed(()=>{const l=[],{minY:n,maxY:t}=_.value,o=5;for(let a=0;a<=o;a++){const i=n+(t-n)*(a/o);l.push({x:r.value.left-10,y:E(i),text:Math.round(i).toString()})}return l}),$=l=>s.colors[l%s.colors.length],Le=e.computed(()=>s.chartType!=="line"?[]:f.value.map((l,n)=>{const t=s.series.findIndex(i=>i===l),o=l.data.map((i,g)=>({x:M(g),y:E(i)}));return{path:o.length>0?`M ${o[0].x} ${o[0].y}`+o.slice(1).map(i=>` L ${i.x} ${i.y}`).join(""):"",color:$(t)}})),Ce=e.computed(()=>{if(s.chartType!=="line")return[];const l=[];return f.value.forEach((n,t)=>{const o=s.series.findIndex(a=>a===n);n.data.forEach((a,i)=>{l.push({x:M(i),y:E(a),color:$(o),value:a,label:s.categories[i]||i.toString(),seriesName:n.name})})}),l}),Ve=e.computed(()=>s.chartType!=="area"?[]:f.value.map((l,n)=>{const t=s.series.findIndex(i=>i===l),o=l.data.map((i,g)=>({x:M(g),y:E(i)}));if(o.length===0)return{path:"",color:$(t)};let a=`M ${o[0].x} ${r.value.bottom}`;return a+=` L ${o[0].x} ${o[0].y}`,o.slice(1).forEach(i=>{a+=` L ${i.x} ${i.y}`}),a+=` L ${o[o.length-1].x} ${r.value.bottom} Z`,{path:a,color:$(t)}})),Ie=e.computed(()=>{if(s.chartType!=="bar")return[];const l=[],{maxX:n}=_.value,t=r.value.width/(n+1)*.8,o=f.value.length,a=t/o;return f.value.forEach((i,g)=>{const m=s.series.findIndex(y=>y===i);i.data.forEach((y,b)=>{const I=M(b)-t/2+g*a,T=E(Math.max(0,y)),A=Math.abs(E(0)-E(y));l.push({x:I,y:T,width:a-2,height:A,color:$(m),value:y,label:s.categories[b]||b.toString(),seriesName:i.name})})}),l}),Te=e.computed(()=>{const l=[];for(let t=1;t<=4;t++)l.push(B.value+(h.value-B.value)*(t/4));return l}),Ae=e.computed(()=>{if(s.chartType!=="semi-radial")return"";const l=k.value-h.value,n=p.value,t=k.value+h.value,o=p.value;return`M ${l} ${n} A ${h.value} ${h.value} 0 0 0 ${t} ${o}`}),ze=e.computed(()=>{if(!N.value)return[];const l=[],n=f.value.reduce((a,i)=>a+(i.data[0]||0),0);if(n===0)return[];let t=s.chartType==="semi-radial"?Math.PI:-Math.PI/2;const o=s.chartType==="semi-radial"?Math.PI:Math.PI*2;return f.value.forEach((a,i)=>{const g=s.series.findIndex(Oe=>Oe===a),m=a.data[0]||0,y=m/n*o,b=t,S=t+y,I=k.value+Math.cos(b)*B.value,T=p.value+Math.sin(b)*B.value,A=k.value+Math.cos(S)*B.value,Fe=p.value+Math.sin(S)*B.value,Ge=k.value+Math.cos(S)*h.value,Pe=p.value+Math.sin(S)*h.value,qe=k.value+Math.cos(b)*h.value,Re=p.value+Math.sin(b)*h.value,F=y>Math.PI?1:0,je=[`M ${I} ${T}`,`A ${B.value} ${B.value} 0 ${F} 1 ${A} ${Fe}`,`L ${Ge} ${Pe}`,`A ${h.value} ${h.value} 0 ${F} 0 ${qe} ${Re}`,"Z"].join(" ");l.push({path:je,color:$(g),value:m,seriesName:a.name,opacity:.8}),t=S}),l}),Y=e.computed(()=>(console.log("Calculating logo positions...",s.logos),s.logos.map((l,n)=>{var g;const t=s.series[l.seriesIndex];if(console.log(`Logo ${n}:`,{seriesIndex:l.seriesIndex,series:t,hasData:((g=t==null?void 0:t.data)==null?void 0:g.length)>0,isHidden:d.value.has(l.seriesIndex)}),!t||!t.data||t.data.length===0)return console.warn(`No data for logo series ${l.seriesIndex}`),null;if(d.value.has(l.seriesIndex))return null;let o,a;if(L.value){const m=t.data.length-1,y=t.data[m];o=M(m)+(l.offsetX||0),a=E(y)+(l.offsetY||0),console.log("Linear chart logo position:",{x:o,y:a,lastValue:y,lastIndex:m})}else if(N.value){const m=Math.PI*2/s.logos.length*n;o=k.value+Math.cos(m)*(h.value+30)+(l.offsetX||0),a=p.value+Math.sin(m)*(h.value+30)+(l.offsetY||0),console.log("Radial chart logo position:",{x:o,y:a,angle:m})}const i={...l,x:o,y:a,seriesIndex:l.seriesIndex};return console.log("Final logo position:",i),i}).filter(Boolean))),Xe=l=>{console.log(`Logo ${l} loaded successfully`);const n=document.querySelector(`.logo-fallback-${l}`),t=document.querySelector(`.logo-image-${l}`);n&&(n.style.opacity="0"),t&&(t.style.opacity="1")},De=l=>{console.warn(`Logo ${l} failed to load, keeping fallback circle`);const n=document.querySelector(`.logo-image-${l}`);n&&(n.style.display="none")},Ye=l=>{d.value.has(l)?d.value.delete(l):d.value.add(l)},C=(l,n)=>{var o;const t=n.target.closest(".custom-chart-container").getBoundingClientRect();u.value={show:!0,x:n.clientX-t.left+10,y:n.clientY-t.top-10,title:l.seriesName||l.label||"",value:((o=l.value)==null?void 0:o.toString())||""}},V=()=>{u.value.show=!1};return(l,n)=>(e.openBlock(),e.createElementBlock("div",{class:"custom-chart-container",style:e.normalizeStyle({width:c.width+"px",height:c.height+"px"})},[c.title?(e.openBlock(),e.createElementBlock("div",G,e.toDisplayString(c.title),1)):e.createCommentVNode("",!0),c.subtitle?(e.openBlock(),e.createElementBlock("div",P,e.toDisplayString(c.subtitle),1)):e.createCommentVNode("",!0),(e.openBlock(),e.createElementBlock("svg",{width:c.width,height:c.height,class:"chart-svg"},[L.value?(e.openBlock(),e.createElementBlock("g",R,[c.showGrid?(e.openBlock(),e.createElementBlock("g",j,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(_e.value,(t,o)=>(e.openBlock(),e.createElementBlock("line",{key:`h-grid-${o}`,x1:r.value.left,x2:r.value.right,y1:t.y,y2:t.y,stroke:"#e0e0e0","stroke-width":"1","stroke-dasharray":"2,2"},null,8,O))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Me.value,(t,o)=>(e.openBlock(),e.createElementBlock("line",{key:`v-grid-${o}`,x1:t.x,x2:t.x,y1:r.value.top,y2:r.value.bottom,stroke:"#e0e0e0","stroke-width":"1","stroke-dasharray":"2,2"},null,8,W))),128))])):e.createCommentVNode("",!0),e.createElementVNode("g",Z,[e.createElementVNode("line",{x1:r.value.left,x2:r.value.right,y1:r.value.bottom,y2:r.value.bottom,stroke:"#ccc","stroke-width":"1"},null,8,H),e.createElementVNode("line",{x1:r.value.left,x2:r.value.left,y1:r.value.top,y2:r.value.bottom,stroke:"#ccc","stroke-width":"1"},null,8,J)]),e.createElementVNode("g",K,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Se.value,(t,o)=>(e.openBlock(),e.createElementBlock("text",{key:`x-${o}`,x:t.x,y:t.y,"text-anchor":"middle","font-size":"12",fill:"#666"},e.toDisplayString(t.text),9,Q))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Ne.value,(t,o)=>(e.openBlock(),e.createElementBlock("text",{key:`y-${o}`,x:t.x,y:t.y,"text-anchor":"end","font-size":"12",fill:"#666","dominant-baseline":"middle"},e.toDisplayString(t.text),9,U))),128)),c.xAxisTitle?(e.openBlock(),e.createElementBlock("text",{key:0,x:r.value.left+r.value.width/2,y:c.height-15,"text-anchor":"middle","font-size":"14","font-weight":"bold",fill:"#333"},e.toDisplayString(c.xAxisTitle),9,v)):e.createCommentVNode("",!0),c.yAxisTitle?(e.openBlock(),e.createElementBlock("text",{key:1,x:15,y:r.value.top+r.value.height/2,"text-anchor":"middle","font-size":"14","font-weight":"bold",fill:"#333",transform:`rotate(-90, 15, ${r.value.top+r.value.height/2})`},e.toDisplayString(c.yAxisTitle),9,ee)):e.createCommentVNode("",!0)]),e.createElementVNode("g",te,[c.chartType==="line"?(e.openBlock(),e.createElementBlock("g",oe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Le.value,(t,o)=>(e.openBlock(),e.createElementBlock("path",{key:`line-${o}`,d:t.path,stroke:t.color,"stroke-width":c.strokeWidth,fill:"none","stroke-linecap":"round","stroke-linejoin":"round"},null,8,le))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Ce.value,(t,o)=>(e.openBlock(),e.createElementBlock("circle",{key:`point-${o}`,cx:t.x,cy:t.y,r:c.markerSize,fill:t.color,stroke:"white","stroke-width":"2",onMouseover:a=>C(t,a),onMouseleave:V},null,40,ne))),128))])):e.createCommentVNode("",!0),c.chartType==="area"?(e.openBlock(),e.createElementBlock("g",ae,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Ve.value,(t,o)=>(e.openBlock(),e.createElementBlock("path",{key:`area-${o}`,d:t.path,fill:t.color,"fill-opacity":c.areaOpacity,stroke:t.color,"stroke-width":c.strokeWidth},null,8,re))),128))])):e.createCommentVNode("",!0),c.chartType==="bar"?(e.openBlock(),e.createElementBlock("g",ce,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Ie.value,(t,o)=>(e.openBlock(),e.createElementBlock("rect",{key:`bar-${o}`,x:t.x,y:t.y,width:t.width,height:t.height,fill:t.color,stroke:"white","stroke-width":"1",onMouseover:a=>C(t,a),onMouseleave:V},null,40,se))),128))])):e.createCommentVNode("",!0)])])):e.createCommentVNode("",!0),N.value?(e.openBlock(),e.createElementBlock("g",ie,[c.chartType==="radial"?(e.openBlock(),e.createElementBlock("circle",{key:0,cx:k.value,cy:p.value,r:h.value,fill:"none",stroke:"#e0e0e0","stroke-width":"1"},null,8,de)):e.createCommentVNode("",!0),c.chartType==="semi-radial"?(e.openBlock(),e.createElementBlock("path",{key:1,d:Ae.value,fill:"none",stroke:"#e0e0e0","stroke-width":"1"},null,8,he)):e.createCommentVNode("",!0),c.showGrid?(e.openBlock(),e.createElementBlock("g",me,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Te.value,t=>(e.openBlock(),e.createElementBlock("circle",{key:`grid-${t}`,cx:k.value,cy:p.value,r:t,fill:"none",stroke:"#f0f0f0","stroke-width":"1"},null,8,ue))),128))])):e.createCommentVNode("",!0),e.createElementVNode("g",ye,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(ze.value,(t,o)=>(e.openBlock(),e.createElementBlock("path",{key:`radial-${o}`,d:t.path,fill:t.color,"fill-opacity":t.opacity||.8,stroke:t.color,"stroke-width":2,onMouseover:a=>C(t,a),onMouseleave:V},null,40,ke))),128))])])):e.createCommentVNode("",!0),e.createElementVNode("g",pe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Y.value,(t,o)=>(e.openBlock(),e.createElementBlock("circle",{key:`logo-fallback-${o}`,cx:t.x,cy:t.y,r:t.width/2,fill:$(t.seriesIndex),stroke:"white","stroke-width":"2",class:e.normalizeClass(`logo-fallback-${o}`)},null,10,fe))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Y.value,(t,o)=>(e.openBlock(),e.createElementBlock("image",{key:`logo-${o}`,x:t.x-t.width/2,y:t.y-t.height/2,width:t.width,height:t.height,"xlink:href":t.url,onLoad:a=>Xe(o),onError:a=>De(o),class:e.normalizeClass(`logo-image-${o}`),"clip-path":`circle(${t.width/2}px at ${t.width/2}px ${t.height/2}px)`},null,42,ge))),128))])],8,q)),c.showLegend?(e.openBlock(),e.createElementBlock("div",xe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,(t,o)=>(e.openBlock(),e.createElementBlock("div",{key:`legend-${o}`,class:e.normalizeClass(["legend-item",{hidden:d.value.has(o)}]),onClick:a=>Ye(o)},[e.createElementVNode("div",{class:"legend-color",style:e.normalizeStyle({backgroundColor:$(o)})},null,4),e.createElementVNode("span",Ee,e.toDisplayString(t.name),1)],10,Be))),128))])):e.createCommentVNode("",!0),u.value.show?(e.openBlock(),e.createElementBlock("div",{key:3,class:"chart-tooltip",style:e.normalizeStyle({left:u.value.x+"px",top:u.value.y+"px"})},[e.createElementVNode("div",$e,e.toDisplayString(u.value.title),1),e.createElementVNode("div",be,e.toDisplayString(u.value.value),1)],4)):e.createCommentVNode("",!0)],4))}},[["__scopeId","data-v-a8dbe667"]]),we={MyButton:X,Graph:D};x.Graph=D,x.MyButton=X,x.default=we,Object.defineProperties(x,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsp-semactic",
   "private": false,
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "dist/vue-design-system.umd.js",
   "module": "dist/vue-design-system.es.js",
@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",
+    "@intlify/unplugin-vue-i18n": "^6.0.8",
     "@storybook/addon-a11y": "^9.0.10",
     "@storybook/addon-docs": "^9.0.10",
     "@storybook/addon-onboarding": "^9.0.10",
@@ -38,5 +39,8 @@
     "storybook": "^9.0.10",
     "vite": "^6.3.5",
     "vitest": "^3.2.3"
+  },
+  "dependencies": {
+    "vue-i18n": "^9.14.4"
   }
 }