@wizeworks/silicaui-charts 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 WizeWorks
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,61 @@
+# @wizeworks/silicaui-charts
+
+Silica UI charts — [Apache ECharts](https://echarts.apache.org/) wrapped in a
+single `<Chart>` component that **auto-themes to your Silica design tokens**.
+Full ECharts API, zero manual palette wiring.
+
+[![Website](https://img.shields.io/badge/website-silicaui.com-8b5cf6?style=flat-square)](https://silicaui.com)
+[![npm version](https://img.shields.io/npm/v/@wizeworks/silicaui-charts.svg?style=flat-square)](https://www.npmjs.com/package/@wizeworks/silicaui-charts)
+[![npm downloads](https://img.shields.io/npm/dm/@wizeworks/silicaui-charts.svg?style=flat-square)](https://www.npmjs.com/package/@wizeworks/silicaui-charts)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/@wizeworks/silicaui-charts?style=flat-square)](https://bundlephobia.com/package/@wizeworks/silicaui-charts)
+[![license](https://img.shields.io/npm/l/@wizeworks/silicaui-charts.svg?style=flat-square)](https://github.com/silicaui/silicaui/blob/main/LICENSE)
+[![CI](https://img.shields.io/github/actions/workflow/status/silicaui/silicaui/ci.yml?branch=main&style=flat-square&label=CI)](https://github.com/silicaui/silicaui/actions/workflows/ci.yml)
+
+## Install
+
+```bash
+pnpm add @wizeworks/silicaui-charts @wizeworks/silicaui-react
+pnpm add -D @wizeworks/silicaui tailwindcss
+```
+
+## Usage
+
+```tsx
+import { Chart } from "@wizeworks/silicaui-charts";
+
+<Chart
+  style={{ height: 320 }}
+  option={{
+    xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri"] },
+    yAxis: { type: "value" },
+    series: [{ type: "bar", data: [120, 200, 150, 80, 70] }],
+  }}
+/>
+```
+
+The chart re-reads Silica's color tokens — and re-inits, since ECharts themes
+are fixed at `init` — whenever the ambient theme changes (a `data-theme` flip
+or an OS light/dark switch), so it tracks the rest of your UI automatically.
+It also resizes with its container via a `ResizeObserver`. Give the container
+a height; ECharts can't measure a zero-height box.
+
+## `<Chart>` props
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `option` | `EChartsOption` — the full ECharts option (series, axes, tooltip, legend, …) | — |
+| `notMerge` | `boolean` — replace the whole option instead of merging on update | `true` |
+| `loading` | `boolean` — toggle ECharts' built-in loading spinner | `false` |
+| `renderer` | `"canvas" \| "svg"` | `"canvas"` |
+| `onInit` | `(chart: EChartsInstance) => void` — called after each (re-)init | — |
+
+Also ships `<Sparkline>` for compact inline trend charts, and re-exports
+`EChartsOption` so you can type `option` without a direct `echarts` import.
+
+## Links
+
+- [silicaui.com](https://silicaui.com) — website & docs
+
+- [GitHub repo](https://github.com/silicaui/silicaui)
+- [Issues](https://github.com/silicaui/silicaui/issues)
+- [`@wizeworks/silicaui-react`](https://www.npmjs.com/package/@wizeworks/silicaui-react) — the component layer this package extends

package/dist/index.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import * as echarts from 'echarts';
+import { EChartsOption } from 'echarts';
+export { EChartsOption } from 'echarts';
+
+/** The live ECharts instance type (whatever `echarts.init` returns). */
+type EChartsInstance = ReturnType<typeof echarts.init>;
+interface ChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClick"> {
+    /** The ECharts option (series, axes, tooltip, legend, …) — full ECharts API. */
+    option: EChartsOption;
+    /** Replace the whole option instead of merging on update. Default `true`. */
+    notMerge?: boolean;
+    /** Toggle ECharts' built-in loading spinner. */
+    loading?: boolean;
+    /** Renderer backend. Default `"canvas"`. */
+    renderer?: "canvas" | "svg";
+    /** Called with the instance right after it's created (and after each re-init). */
+    onInit?: (chart: EChartsInstance) => void;
+}
+/**
+ * A thin, fully-featured wrapper over Apache ECharts that auto-themes to the
+ * active Silica tokens.
+ *
+ * ECharts owns all rendering; Silica supplies the palette. The chart re-reads
+ * the tokens (and re-inits, since ECharts themes are fixed at `init`) whenever
+ * the ambient theme changes — a `data-theme` flip on `<html>` or an OS
+ * light/dark switch — so charts track the rest of the UI automatically. It also
+ * resizes with its container via a `ResizeObserver`.
+ *
+ * Give the container a height (defaults to 20rem); ECharts cannot measure a
+ * zero-height box.
+ */
+declare const Chart: React.ForwardRefExoticComponent<ChartProps & React.RefAttributes<HTMLDivElement>>;
+
+interface SparklineProps extends Omit<ChartProps, "option"> {
+    /** The series values. */
+    data: number[];
+    /** `"line"` (default) or `"bar"`. */
+    type?: "line" | "bar";
+    /** Fill under a line sparkline. */
+    area?: boolean;
+    /** Series color. Defaults to the Silica primary via the theme palette. */
+    color?: string;
+    /** Show a tooltip on hover. Default `false` — sparklines are glanceable. */
+    tooltip?: boolean;
+    /** Optional category labels (used only in the tooltip). */
+    labels?: (string | number)[];
+}
+/**
+ * A compact, axis-less trend line/bar for inline metrics (KPI cards, table
+ * cells). It builds the ECharts option for you and renders through {@link Chart},
+ * so it inherits Silica theming and container-resize behavior.
+ */
+declare const Sparkline: React.ForwardRefExoticComponent<SparklineProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Builds an Apache ECharts theme from the live Silica design tokens.
+ *
+ * ECharts bakes its theme in at `init()` time and reads plain color strings, not
+ * CSS variables — so we resolve the current `--color-*` custom properties off a
+ * live element with `getComputedStyle` and hand ECharts concrete values. Because
+ * we read from a real element, a prefixed / nested-theme subtree (a client site
+ * embedded in the platform shell) yields that subtree's palette, and the
+ * `<Chart>` wrapper re-runs this whenever the ambient theme flips light↔dark.
+ *
+ * The resolved values may be `oklch(…)` / `color-mix(…)` strings; modern canvas
+ * and SVG renderers accept those directly.
+ */
+/**
+ * @param el - element to read tokens from; defaults to `document.documentElement`.
+ * @returns an ECharts theme object (safe to pass to `echarts.registerTheme`).
+ */
+declare function buildSilicaEChartsTheme(el?: HTMLElement | null): Record<string, unknown>;
+
+export { Chart, type ChartProps, type EChartsInstance, Sparkline, type SparklineProps, buildSilicaEChartsTheme };

package/dist/index.js

@@ -0,0 +1,187 @@
+import * as React from 'react';
+import * as echarts from 'echarts';
+import { useSilicaClass, cx } from '@wizeworks/silicaui-react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/chart.tsx
+
+// src/theme.ts
+function readVar(cs, name, fallback) {
+  const v = cs.getPropertyValue(name).trim();
+  return v || fallback;
+}
+function buildSilicaEChartsTheme(el) {
+  const root = el ?? (typeof document !== "undefined" ? document.documentElement : null);
+  if (!root || typeof getComputedStyle === "undefined") {
+    return { backgroundColor: "transparent" };
+  }
+  const cs = getComputedStyle(root);
+  const base100 = readVar(cs, "--color-base-100", "#ffffff");
+  const base300 = readVar(cs, "--color-base-300", "#e5e7eb");
+  const content = readVar(cs, "--color-base-content", "#1f2937");
+  const palette = [
+    "--color-primary",
+    "--color-secondary",
+    "--color-accent",
+    "--color-info",
+    "--color-success",
+    "--color-warning",
+    "--color-error"
+  ].map((n) => readVar(cs, n, "")).filter(Boolean);
+  const faint = (pct) => `color-mix(in oklab, ${content} ${pct}%, transparent)`;
+  const label = faint(70);
+  const axisLine = faint(22);
+  const splitLine = faint(9);
+  const axis = {
+    axisLine: { show: true, lineStyle: { color: axisLine } },
+    axisTick: { show: true, lineStyle: { color: axisLine } },
+    axisLabel: { color: label },
+    splitLine: { show: true, lineStyle: { color: splitLine } },
+    splitArea: { show: false }
+  };
+  return {
+    color: palette.length ? palette : void 0,
+    backgroundColor: "transparent",
+    textStyle: { color: content },
+    title: { textStyle: { color: content }, subtextStyle: { color: label } },
+    legend: { textStyle: { color: label } },
+    tooltip: {
+      backgroundColor: base100,
+      borderColor: base300,
+      borderWidth: 1,
+      textStyle: { color: content },
+      axisPointer: {
+        lineStyle: { color: axisLine },
+        crossStyle: { color: axisLine },
+        shadowStyle: { color: faint(6) }
+      }
+    },
+    grid: { borderColor: base300, containLabel: true },
+    categoryAxis: axis,
+    valueAxis: axis,
+    logAxis: axis,
+    timeAxis: axis,
+    line: {
+      symbol: "circle",
+      symbolSize: 7,
+      lineStyle: { width: 2 },
+      smooth: false
+    },
+    bar: { itemStyle: { borderRadius: [4, 4, 0, 0] } },
+    pie: {
+      itemStyle: { borderColor: base100, borderWidth: 2 },
+      label: { color: content }
+    },
+    scatter: { symbolSize: 10 }
+  };
+}
+var Chart = React.forwardRef(function Chart2({
+  option,
+  notMerge = true,
+  loading = false,
+  renderer = "canvas",
+  onInit,
+  className,
+  style,
+  ...rest
+}, forwardedRef) {
+  const sc = useSilicaClass();
+  const containerRef = React.useRef(null);
+  const chartRef = React.useRef(null);
+  const onInitRef = React.useRef(onInit);
+  onInitRef.current = onInit;
+  const themeName = `silica-${React.useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const [themeTick, setThemeTick] = React.useState(0);
+  const setRefs = React.useCallback(
+    (node) => {
+      containerRef.current = node;
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [forwardedRef]
+  );
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const bump = () => setThemeTick((t) => t + 1);
+    const html = document.documentElement;
+    const mo = new MutationObserver(bump);
+    mo.observe(html, {
+      attributes: true,
+      attributeFilter: ["data-theme", "class", "style"]
+    });
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    mq.addEventListener("change", bump);
+    return () => {
+      mo.disconnect();
+      mq.removeEventListener("change", bump);
+    };
+  }, []);
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    echarts.registerTheme(themeName, buildSilicaEChartsTheme(el));
+    const chart = echarts.init(el, themeName, { renderer });
+    chartRef.current = chart;
+    onInitRef.current?.(chart);
+    const ro = new ResizeObserver(() => chart.resize());
+    ro.observe(el);
+    return () => {
+      ro.disconnect();
+      chart.dispose();
+      chartRef.current = null;
+    };
+  }, [themeName, renderer, themeTick]);
+  React.useEffect(() => {
+    chartRef.current?.setOption(option, notMerge);
+  }, [option, notMerge, themeTick]);
+  React.useEffect(() => {
+    const chart = chartRef.current;
+    if (!chart) return;
+    if (loading) chart.showLoading();
+    else chart.hideLoading();
+  }, [loading, themeTick]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setRefs,
+      className: cx(sc("chart"), className),
+      style: { width: "100%", height: "20rem", ...style },
+      ...rest
+    }
+  );
+});
+var Sparkline = React.forwardRef(
+  function Sparkline2({ data, type = "line", area = false, color, tooltip = false, labels, style, ...rest }, ref) {
+    const option = React.useMemo(
+      () => ({
+        grid: { left: 1, right: 1, top: 3, bottom: 3 },
+        xAxis: {
+          type: "category",
+          show: false,
+          boundaryGap: type === "bar",
+          data: labels ?? data.map((_, i) => i)
+        },
+        yAxis: { type: "value", show: false, scale: true },
+        tooltip: tooltip ? { trigger: "axis", axisPointer: { type: "line" } } : void 0,
+        series: [
+          {
+            type,
+            data,
+            symbol: "none",
+            smooth: type === "line",
+            lineStyle: { width: 2 },
+            areaStyle: area && type === "line" ? { opacity: 0.18 } : void 0,
+            itemStyle: color ? { color } : void 0,
+            barCategoryGap: type === "bar" ? "30%" : void 0
+          }
+        ]
+      }),
+      [data, type, area, color, tooltip, labels]
+    );
+    return /* @__PURE__ */ jsx(Chart, { ref, option, style: { height: "3rem", ...style }, ...rest });
+  }
+);
+
+export { Chart, Sparkline, buildSilicaEChartsTheme };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme.ts","../src/chart.tsx","../src/sparkline.tsx"],"names":["Chart","React2","Sparkline","jsx"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Builds an Apache ECharts theme from the live Silica design tokens.\n *\n * ECharts bakes its theme in at `init()` time and reads plain color strings, not\n * CSS variables — so we resolve the current `--color-*` custom properties off a\n * live element with `getComputedStyle` and hand ECharts concrete values. Because\n * we read from a real element, a prefixed / nested-theme subtree (a client site\n * embedded in the platform shell) yields that subtree's palette, and the\n * `<Chart>` wrapper re-runs this whenever the ambient theme flips light↔dark.\n *\n * The resolved values may be `oklch(…)` / `color-mix(…)` strings; modern canvas\n * and SVG renderers accept those directly.\n */\n\nfunction readVar(cs: CSSStyleDeclaration, name: string, fallback: string): string {\n  const v = cs.getPropertyValue(name).trim();\n  return v || fallback;\n}\n\n/**\n * @param el - element to read tokens from; defaults to `document.documentElement`.\n * @returns an ECharts theme object (safe to pass to `echarts.registerTheme`).\n */\nexport function buildSilicaEChartsTheme(\n  el?: HTMLElement | null,\n): Record<string, unknown> {\n  const root =\n    el ?? (typeof document !== \"undefined\" ? document.documentElement : null);\n\n  // No DOM (SSR): a neutral, transparent theme so nothing crashes.\n  if (!root || typeof getComputedStyle === \"undefined\") {\n    return { backgroundColor: \"transparent\" };\n  }\n\n  const cs = getComputedStyle(root);\n  const base100 = readVar(cs, \"--color-base-100\", \"#ffffff\");\n  const base300 = readVar(cs, \"--color-base-300\", \"#e5e7eb\");\n  const content = readVar(cs, \"--color-base-content\", \"#1f2937\");\n\n  const palette = [\n    \"--color-primary\",\n    \"--color-secondary\",\n    \"--color-accent\",\n    \"--color-info\",\n    \"--color-success\",\n    \"--color-warning\",\n    \"--color-error\",\n  ]\n    .map((n) => readVar(cs, n, \"\"))\n    .filter(Boolean);\n\n  // Translucent washes of the text color for axes/gridlines — oklab, never oklch\n  // (oklch rotates hue toward 0° when mixing with transparent → tinted grey).\n  const faint = (pct: number) =>\n    `color-mix(in oklab, ${content} ${pct}%, transparent)`;\n  const label = faint(70);\n  const axisLine = faint(22);\n  const splitLine = faint(9);\n\n  const axis = {\n    axisLine: { show: true, lineStyle: { color: axisLine } },\n    axisTick: { show: true, lineStyle: { color: axisLine } },\n    axisLabel: { color: label },\n    splitLine: { show: true, lineStyle: { color: splitLine } },\n    splitArea: { show: false },\n  };\n\n  return {\n    color: palette.length ? palette : undefined,\n    backgroundColor: \"transparent\",\n    textStyle: { color: content },\n    title: { textStyle: { color: content }, subtextStyle: { color: label } },\n    legend: { textStyle: { color: label } },\n    tooltip: {\n      backgroundColor: base100,\n      borderColor: base300,\n      borderWidth: 1,\n      textStyle: { color: content },\n      axisPointer: {\n        lineStyle: { color: axisLine },\n        crossStyle: { color: axisLine },\n        shadowStyle: { color: faint(6) },\n      },\n    },\n    grid: { borderColor: base300, containLabel: true },\n    categoryAxis: axis,\n    valueAxis: axis,\n    logAxis: axis,\n    timeAxis: axis,\n    line: {\n      symbol: \"circle\",\n      symbolSize: 7,\n      lineStyle: { width: 2 },\n      smooth: false,\n    },\n    bar: { itemStyle: { borderRadius: [4, 4, 0, 0] } },\n    pie: {\n      itemStyle: { borderColor: base100, borderWidth: 2 },\n      label: { color: content },\n    },\n    scatter: { symbolSize: 10 },\n  };\n}\n","import * as React from \"react\";\nimport * as echarts from \"echarts\";\nimport type { EChartsOption } from \"echarts\";\nimport { cx, useSilicaClass } from \"@wizeworks/silicaui-react\";\nimport { buildSilicaEChartsTheme } from \"./theme\";\n\n/** The live ECharts instance type (whatever `echarts.init` returns). */\nexport type EChartsInstance = ReturnType<typeof echarts.init>;\n\nexport interface ChartProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onClick\"> {\n  /** The ECharts option (series, axes, tooltip, legend, …) — full ECharts API. */\n  option: EChartsOption;\n  /** Replace the whole option instead of merging on update. Default `true`. */\n  notMerge?: boolean;\n  /** Toggle ECharts' built-in loading spinner. */\n  loading?: boolean;\n  /** Renderer backend. Default `\"canvas\"`. */\n  renderer?: \"canvas\" | \"svg\";\n  /** Called with the instance right after it's created (and after each re-init). */\n  onInit?: (chart: EChartsInstance) => void;\n}\n\n/**\n * A thin, fully-featured wrapper over Apache ECharts that auto-themes to the\n * active Silica tokens.\n *\n * ECharts owns all rendering; Silica supplies the palette. The chart re-reads\n * the tokens (and re-inits, since ECharts themes are fixed at `init`) whenever\n * the ambient theme changes — a `data-theme` flip on `<html>` or an OS\n * light/dark switch — so charts track the rest of the UI automatically. It also\n * resizes with its container via a `ResizeObserver`.\n *\n * Give the container a height (defaults to 20rem); ECharts cannot measure a\n * zero-height box.\n */\nexport const Chart = React.forwardRef<HTMLDivElement, ChartProps>(function Chart(\n  {\n    option,\n    notMerge = true,\n    loading = false,\n    renderer = \"canvas\",\n    onInit,\n    className,\n    style,\n    ...rest\n  },\n  forwardedRef,\n) {\n  const sc = useSilicaClass();\n  const containerRef = React.useRef<HTMLDivElement | null>(null);\n  const chartRef = React.useRef<EChartsInstance | null>(null);\n  const onInitRef = React.useRef(onInit);\n  onInitRef.current = onInit;\n\n  // A DOM-safe, stable theme name unique to this instance so concurrent charts\n  // don't clobber one another's registered theme.\n  const themeName = `silica-${React.useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n\n  // Bumped whenever the ambient Silica theme changes → forces a re-init below.\n  const [themeTick, setThemeTick] = React.useState(0);\n\n  const setRefs = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      containerRef.current = node;\n      if (typeof forwardedRef === \"function\") forwardedRef(node);\n      else if (forwardedRef) forwardedRef.current = node;\n    },\n    [forwardedRef],\n  );\n\n  // Watch for theme changes: attribute flips on <html> + OS scheme changes.\n  React.useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    const bump = () => setThemeTick((t) => t + 1);\n    const html = document.documentElement;\n    const mo = new MutationObserver(bump);\n    mo.observe(html, {\n      attributes: true,\n      attributeFilter: [\"data-theme\", \"class\", \"style\"],\n    });\n    const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n    mq.addEventListener(\"change\", bump);\n    return () => {\n      mo.disconnect();\n      mq.removeEventListener(\"change\", bump);\n    };\n  }, []);\n\n  // Create / recreate the chart instance (re-runs on theme change).\n  React.useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n    echarts.registerTheme(themeName, buildSilicaEChartsTheme(el));\n    const chart = echarts.init(el, themeName, { renderer });\n    chartRef.current = chart;\n    onInitRef.current?.(chart);\n    const ro = new ResizeObserver(() => chart.resize());\n    ro.observe(el);\n    return () => {\n      ro.disconnect();\n      chart.dispose();\n      chartRef.current = null;\n    };\n  }, [themeName, renderer, themeTick]);\n\n  // Push option updates.\n  React.useEffect(() => {\n    chartRef.current?.setOption(option, notMerge);\n  }, [option, notMerge, themeTick]);\n\n  // Loading overlay.\n  React.useEffect(() => {\n    const chart = chartRef.current;\n    if (!chart) return;\n    if (loading) chart.showLoading();\n    else chart.hideLoading();\n  }, [loading, themeTick]);\n\n  return (\n    <div\n      ref={setRefs}\n      className={cx(sc(\"chart\"), className)}\n      style={{ width: \"100%\", height: \"20rem\", ...style }}\n      {...rest}\n    />\n  );\n});\n","import * as React from \"react\";\nimport type { EChartsOption } from \"echarts\";\nimport { Chart } from \"./chart\";\nimport type { ChartProps } from \"./chart\";\n\nexport interface SparklineProps extends Omit<ChartProps, \"option\"> {\n  /** The series values. */\n  data: number[];\n  /** `\"line\"` (default) or `\"bar\"`. */\n  type?: \"line\" | \"bar\";\n  /** Fill under a line sparkline. */\n  area?: boolean;\n  /** Series color. Defaults to the Silica primary via the theme palette. */\n  color?: string;\n  /** Show a tooltip on hover. Default `false` — sparklines are glanceable. */\n  tooltip?: boolean;\n  /** Optional category labels (used only in the tooltip). */\n  labels?: (string | number)[];\n}\n\n/**\n * A compact, axis-less trend line/bar for inline metrics (KPI cards, table\n * cells). It builds the ECharts option for you and renders through {@link Chart},\n * so it inherits Silica theming and container-resize behavior.\n */\nexport const Sparkline = React.forwardRef<HTMLDivElement, SparklineProps>(\n  function Sparkline(\n    { data, type = \"line\", area = false, color, tooltip = false, labels, style, ...rest },\n    ref,\n  ) {\n    const option = React.useMemo<EChartsOption>(\n      () => ({\n        grid: { left: 1, right: 1, top: 3, bottom: 3 },\n        xAxis: {\n          type: \"category\",\n          show: false,\n          boundaryGap: type === \"bar\",\n          data: labels ?? data.map((_, i) => i),\n        },\n        yAxis: { type: \"value\", show: false, scale: true },\n        tooltip: tooltip\n          ? { trigger: \"axis\", axisPointer: { type: \"line\" } }\n          : undefined,\n        series: [\n          {\n            type,\n            data,\n            symbol: \"none\",\n            smooth: type === \"line\",\n            lineStyle: { width: 2 },\n            areaStyle: area && type === \"line\" ? { opacity: 0.18 } : undefined,\n            itemStyle: color ? { color } : undefined,\n            barCategoryGap: type === \"bar\" ? \"30%\" : undefined,\n          } as never,\n        ],\n      }),\n      [data, type, area, color, tooltip, labels],\n    );\n\n    return (\n      <Chart ref={ref} option={option} style={{ height: \"3rem\", ...style }} {...rest} />\n    );\n  },\n);\n"]}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@wizeworks/silicaui-charts",
+  "version": "0.3.0",
+  "description": "Silica UI charts — Apache ECharts wrapped and auto-themed to Silica's design tokens.",
+  "type": "module",
+  "license": "MIT",
+  "author": "WizeWorks",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/silicaui/silicaui.git",
+    "directory": "packages/silicaui-charts"
+  },
+  "homepage": "https://silicaui.com",
+  "bugs": "https://github.com/silicaui/silicaui/issues",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@wizeworks/silicaui-react": ">=0.0.0"
+  },
+  "dependencies": {
+    "echarts": "^5.5.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0",
+    "@wizeworks/silicaui-react": "0.3.0"
+  },
+  "keywords": [
+    "react",
+    "charts",
+    "echarts",
+    "design-system",
+    "silica"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}