npm - @sckyzo/cosmos-charts - Versions diffs - 0.0.2 → 0.1.1 - Mend

@sckyzo/cosmos-charts 0.0.2 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -5,6 +5,25 @@ All notable changes to `@sckyzo/cosmos-charts` are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+## [0.1.1](https://github.com/SckyzO/cosmos/compare/@sckyzo/cosmos-charts@0.1.0...@sckyzo/cosmos-charts@0.1.1) (2026-10-21)
+### Bug Fixes
+* **charts:** escape series names, categories and labels in HTML output ([c0b7137](https://github.com/SckyzO/cosmos/commit/c0b71379b1ce6f5b449eb64e8198ad5dd1bde27e))
+## [0.1.0](https://github.com/SckyzO/cosmos/compare/@sckyzo/cosmos-charts@0.0.2...@sckyzo/cosmos-charts@0.1.0) (2026-10-20)
+### Features
+* **charts:** follow the deep-blue theme and the accent color ([174f255](https://github.com/SckyzO/cosmos/commit/174f25578e45e78ca5688b7f032b812b74f763e4))
+### Bug Fixes
+* **charts:** keep LineAreaChart y-axis labels after a theme change ([bf0cc6d](https://github.com/SckyzO/cosmos/commit/bf0cc6d843df2c60386b4ce6321b1a4f7b473c06))
 ## [0.0.2] - 2026-05-21
 Packaging/metadata only — no component or API changes.

package/README.md CHANGED Viewed

@@ -1,5 +1,7 @@
 # @sckyzo/cosmos-charts
+[![npm](https://img.shields.io/npm/v/@sckyzo/cosmos-charts)](https://www.npmjs.com/package/@sckyzo/cosmos-charts)
 Cosmos charts — opinionated [ApexCharts](https://apexcharts.com/) wrappers themed for the Cosmos design system.
 Kept in a dedicated subpackage so that `@sckyzo/cosmos-react` consumers who don't render charts don't ship the ApexCharts bundle.
@@ -8,6 +10,7 @@ Kept in a dedicated subpackage so that `@sckyzo/cosmos-react` consumers who don'
 ```bash
 pnpm add @sckyzo/cosmos-charts
+pnpm add react react-dom   # peers, react 19+
 ```
 ## Use
@@ -21,12 +24,13 @@ import { LineAreaChart, RealtimeChart, useChartTheme } from '@sckyzo/cosmos-char
 />;
 ```
-The included `useChartTheme()` hook adapts ApexCharts grid + axis tokens to the current Cosmos color scheme (subscribes to `<html class="dark">` toggles).
+The included `useChartTheme()` hook adapts ApexCharts grid + axis tokens and the brand color to the current Cosmos theme and accent: it subscribes to the theme class (`dark` and `deep-blue` render dark charts) and `data-accent` on `<html>`, and reads `--color-brand-500` and the gray scale from the CSS. `COSMOS_BRAND` is the default blue; use `useChartTheme().brand` to follow the accent.
 ## Charts shipped
 | Chart                             | Notes                                             |
 | --------------------------------- | ------------------------------------------------- |
+| `BarChart`                        | Vertical or horizontal bars                       |
 | `LineAreaChart`                   | Smooth area + gradient fill                       |
 | `RealtimeChart`                   | Live updates with WARN/CRIT threshold annotations |
 | `RadialBarChart`                  | Multi-series radial gauge                         |
@@ -36,3 +40,7 @@ The included `useChartTheme()` hook adapts ApexCharts grid + axis tokens to the
 | `DonutChart` / `DonutRightLegend` | Donut with bottom or right legend                 |
 | `Sparkline` / `SparklineGroup`    | Mini sparklines + KPI grid                        |
 | `TreemapChart`                    | Repartition treemap                               |
+## License
+MIT — see [LICENSE](../../LICENSE).

package/dist/index.cjs CHANGED Viewed

@@ -17,38 +17,64 @@ var ReactApexChart__default = /*#__PURE__*/_interopDefault(ReactApexChart);
 var COSMOS_BRAND = "#465fff";
 var COSMOS_PALETTE = ["#465fff", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"];
+var DARK_THEME_CLASSES = ["dark", "deep-blue"];
 var detectDark = () => {
   if (typeof document === "undefined") return false;
-  return document.documentElement.classList.contains("dark");
+  const { classList } = document.documentElement;
+  return DARK_THEME_CLASSES.some((c) => classList.contains(c));
 };
-var useDarkMode = () => {
-  const [dark, setDark] = react.useState(detectDark);
+var readCssVar = (name, fallback) => {
+  if (typeof document === "undefined") return fallback;
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+};
+var readChartColors = () => {
+  const dark = detectDark();
+  return {
+    dark,
+    brand: readCssVar("--color-brand-500", COSMOS_BRAND),
+    grid: dark ? readCssVar("--color-gray-800", "#1f2937") : readCssVar("--color-gray-200", "#e5e7eb"),
+    axis: dark ? readCssVar("--color-gray-400", "#9ca3af") : readCssVar("--color-gray-500", "#6b7280")
+  };
+};
+var useHtmlAppearance = (read) => {
+  const [value, setValue] = react.useState(read);
   react.useEffect(() => {
     if (typeof document === "undefined") return;
-    const observer = new MutationObserver(() => setDark(detectDark()));
+    const observer = new MutationObserver(() => setValue(read));
     observer.observe(document.documentElement, {
       attributes: true,
-      attributeFilter: ["class"]
+      attributeFilter: ["class", "data-accent"]
     });
     return () => observer.disconnect();
-  }, []);
-  return dark;
+  }, [read]);
+  return value;
 };
+var useDarkMode = () => useHtmlAppearance(detectDark);
 var useChartTheme = () => {
-  const dark = useDarkMode();
+  const { dark, brand, grid: gridColor, axis } = useHtmlAppearance(readChartColors);
   const grid = {
-    borderColor: dark ? "#1f2937" : "#e5e7eb",
+    borderColor: gridColor,
     strokeDashArray: 4
   };
   const axisLabels = {
     style: {
-      colors: dark ? "#9ca3af" : "#6b7280",
+      colors: axis,
       fontSize: "11px",
       fontFamily: "inherit"
     }
   };
-  return { dark, grid, axisLabels, brand: COSMOS_BRAND, palette: COSMOS_PALETTE };
+  return { dark, grid, axisLabels, brand, palette: [brand, ...COSMOS_PALETTE.slice(1)] };
 };
+// src/escape.ts
+var ENTITIES = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
+};
+var escapeHtml = (value) => String(value).replace(/[&<>"']/g, (char) => ENTITIES[char]);
 var LineAreaChart = ({
   series,
   categories,
@@ -68,15 +94,26 @@ var LineAreaChart = ({
     stroke: { curve: "smooth", width: 2 },
     fill: { type: "gradient", gradient: { opacityFrom: 0.45, opacityTo: 0.05 } },
     grid,
+    // One labels object per axis: ApexCharts writes the x-axis category
+    // formatter onto it, which blanked the y labels on the next update.
     xaxis: {
       categories,
-      labels: axisLabels,
+      labels: { ...axisLabels },
       axisBorder: { show: false },
       axisTicks: { show: false }
     },
-    yaxis: { labels: axisLabels },
+    yaxis: { labels: { ...axisLabels } },
     legend: { show: false },
-    tooltip: { theme: "dark" }
+    // The tooltip is HTML: escape the category and the series name. ApexCharts
+    // hands the x formatter the point's position on the axis (1, 2, …), not
+    // its category, so read the category back by index.
+    tooltip: {
+      theme: "dark",
+      x: {
+        formatter: (v, opts) => escapeHtml(opts === void 0 ? v : categories[opts.dataPointIndex] ?? v)
+      },
+      y: { title: { formatter: (name) => `${escapeHtml(name)}: ` } }
+    }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(ReactApexChart__default.default, { type: "area", options, series, height, width });
 };
@@ -314,7 +351,9 @@ var DonutChart = ({
     chart: { type: "donut", fontFamily: "inherit" },
     colors: palette,
     labels,
-    legend: { position: rightLegend ? "right" : "bottom" },
+    // The legend and the tooltip are HTML: escape the labels.
+    legend: { position: rightLegend ? "right" : "bottom", formatter: (name) => escapeHtml(name) },
+    tooltip: { y: { title: { formatter: (name) => `${escapeHtml(name)}: ` } } },
     dataLabels: { enabled: false },
     plotOptions: {
       pie: {
@@ -452,11 +491,17 @@ var BarChart = ({
       position: "top",
       horizontalAlign: "right",
       labels: { colors: axisLabels.style.colors },
-      markers: { size: 5 }
+      markers: { size: 5 },
+      formatter: (name) => escapeHtml(name)
     },
+    // Tooltips and the legend are HTML: escape names, categories and values.
     tooltip: {
       theme: "dark",
-      y: { formatter: (v) => valueFormatter(Number(v)) }
+      x: { formatter: (v) => escapeHtml(v) },
+      y: {
+        formatter: (v) => escapeHtml(valueFormatter(Number(v))),
+        title: { formatter: (name) => `${escapeHtml(name)}: ` }
+      }
     },
     fill: { opacity: 1 },
     stroke: { show: false }

package/dist/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/theme.ts","../src/LineAreaChart.tsx","../src/RealtimeChart.tsx","../src/RadialBarChart.tsx","../src/GradientRadial.tsx","../src/SemiCircleGauge.tsx","../src/StrokedGauge.tsx","../src/DonutChart.tsx","../src/Sparkline.tsx","../src/TreemapChart.tsx","../src/BarChart.tsx"],"names":["useState","useEffect","ReactApexChart","jsx","jsxs"],"mappings":"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","file":"index.cjs","sourcesContent":["import type { ApexOptions } from 'apexcharts';\nimport { useEffect, useState } from 'react';\n\nexport const COSMOS_BRAND = '#465fff';\nexport const COSMOS_PALETTE = ['#465fff', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];\n\nconst detectDark = (): boolean => {\n if (typeof document === 'undefined') return false;\n return document.documentElement.classList.contains('dark');\n};\n\n/*\n Subscribes to dark-mode toggles on `<html>` (the Cosmos convention).\n * Returns the current `isDark` value.\n /\nexport const useDarkMode = (): boolean => {\n const [dark, setDark] = useState(detectDark);\n\n useEffect(() => {\n if (typeof document === 'undefined') return;\n const observer = new MutationObserver(() => setDark(detectDark()));\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['class'],\n });\n return () => observer.disconnect();\n }, []);\n\n return dark;\n};\n\n/\n Returns ApexCharts grid + axis options matching the Cosmos design tokens\n * for the current color scheme.\n /\nexport const useChartTheme = () => {\n const dark = useDarkMode();\n const grid: ApexOptions['grid'] = {\n borderColor: dark ? '#1f2937' : '#e5e7eb',\n strokeDashArray: 4,\n };\n const axisLabels = {\n style: {\n colors: dark ? '#9ca3af' : '#6b7280',\n fontSize: '11px',\n fontFamily: 'inherit',\n },\n };\n return { dark, grid, axisLabels, brand: COSMOS_BRAND, palette: COSMOS_PALETTE };\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/line';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type LineAreaChartProps = ChartSize & {\n series: { name: string; data: number[] }[];\n categories: (string \| number)[];\n};\n\nexport const LineAreaChart = ({\n series,\n categories,\n height = 280,\n width = '100%',\n}: LineAreaChartProps) => {\n const { grid, axisLabels, palette } = useChartTheme();\n const options: ApexOptions = {\n chart: {\n type: 'area',\n toolbar: { show: false },\n zoom: { enabled: false },\n fontFamily: 'inherit',\n },\n colors: palette,\n dataLabels: { enabled: false },\n stroke: { curve: 'smooth', width: 2 },\n fill: { type: 'gradient', gradient: { opacityFrom: 0.45, opacityTo: 0.05 } },\n grid,\n xaxis: {\n categories,\n labels: axisLabels,\n axisBorder: { show: false },\n axisTicks: { show: false },\n },\n yaxis: { labels: axisLabels },\n legend: { show: false },\n tooltip: { theme: 'dark' },\n };\n return (\n <ReactApexChart type=\"area\" options={options} series={series} height={height} width={width} />\n );\n};\n","import { useEffect, useState } from 'react';\nimport type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/line';\nimport 'apexcharts/features/annotations';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type RealtimeChartProps = ChartSize & {\n /* Sample generator — defaults to a noisy walk between 30 and 80. /\n generator?: () => number;\n /* Interval in ms — defaults to 2000. /\n intervalMs?: number;\n windowSize?: number;\n warnThreshold?: number;\n critThreshold?: number;\n};\n\nconst defaultGenerator = (() => {\n let last = 50;\n return () => {\n last += (Math.random() - 0.5) 8;\n last = Math.max(20, Math.min(95, last));\n return Math.round(last);\n };\n})();\n\nexport const RealtimeChart = ({\n generator = defaultGenerator,\n intervalMs = 2000,\n windowSize = 30,\n warnThreshold = 70,\n critThreshold = 85,\n height = 240,\n width = '100%',\n}: RealtimeChartProps) => {\n const { grid, axisLabels, brand } = useChartTheme();\n const [series, setSeries] = useState(() => Array.from({ length: windowSize }, () => generator()));\n\n useEffect(() => {\n const id = setInterval(() => {\n setSeries((current) => [...current.slice(1), generator()]);\n }, intervalMs);\n return () => clearInterval(id);\n }, [generator, intervalMs]);\n\n const options: ApexOptions = {\n chart: {\n type: 'line',\n animations: { enabled: true, dynamicAnimation: { enabled: true, speed: 800 } },\n toolbar: { show: false },\n zoom: { enabled: false },\n fontFamily: 'inherit',\n },\n colors: [brand],\n stroke: { curve: 'smooth', width: 2 },\n dataLabels: { enabled: false },\n grid,\n xaxis: {\n type: 'numeric',\n labels: { show: false },\n axisBorder: { show: false },\n axisTicks: { show: false },\n },\n yaxis: { min: 0, max: 100, labels: axisLabels },\n annotations: {\n yaxis: [\n {\n y: warnThreshold,\n borderColor: '#f59e0b',\n label: { text: 'WARN', style: { color: '#fff', background: '#f59e0b' } },\n },\n {\n y: critThreshold,\n borderColor: '#ef4444',\n label: { text: 'CRIT', style: { color: '#fff', background: '#ef4444' } },\n },\n ],\n },\n tooltip: { theme: 'dark' },\n };\n\n return (\n <ReactApexChart\n type=\"line\"\n options={options}\n series={[{ name: 'value', data: series }]}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/radialBar';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type RadialBarChartProps = ChartSize & {\n series: number[];\n labels: string[];\n};\n\nexport const RadialBarChart = ({\n series,\n labels,\n height = 320,\n width = '100%',\n}: RadialBarChartProps) => {\n const { palette } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'radialBar', fontFamily: 'inherit' },\n colors: palette,\n labels,\n plotOptions: {\n radialBar: {\n track: { background: 'rgba(150,150,150,0.15)' },\n dataLabels: {\n name: { fontSize: '12px' },\n value: { fontSize: '14px', formatter: (v) => `${v}%` },\n total: {\n show: true,\n label: 'Avg',\n formatter: () => `${Math.round(series.reduce((a, b) => a + b, 0) / series.length)}%`,\n },\n },\n },\n },\n };\n return (\n <ReactApexChart\n type=\"radialBar\"\n options={options}\n series={series}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/radialBar';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type GradientRadialProps = ChartSize & {\n value: number;\n label?: string;\n};\n\nexport const GradientRadial = ({\n value,\n label = 'Score',\n height = 280,\n width = '100%',\n}: GradientRadialProps) => {\n const { brand } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'radialBar', fontFamily: 'inherit' },\n colors: [brand],\n fill: {\n type: 'gradient',\n gradient: {\n shade: 'dark',\n type: 'horizontal',\n shadeIntensity: 0.5,\n gradientToColors: ['#10b981'],\n inverseColors: false,\n opacityFrom: 1,\n opacityTo: 1,\n stops: [0, 100],\n },\n },\n plotOptions: {\n radialBar: {\n hollow: { size: '70%' },\n dataLabels: {\n name: { fontSize: '12px', offsetY: -10 },\n value: { fontSize: '32px', fontWeight: 700, formatter: (v) => `${v}%` },\n },\n },\n },\n labels: [label],\n };\n return (\n <ReactApexChart\n type=\"radialBar\"\n options={options}\n series={[value]}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/radialBar';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type SemiCircleGaugeProps = ChartSize & {\n value: number;\n label?: string;\n color?: string;\n};\n\nexport const SemiCircleGauge = ({\n value,\n label = '',\n color,\n height = 200,\n width = '100%',\n}: SemiCircleGaugeProps) => {\n const { brand } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'radialBar', fontFamily: 'inherit', sparkline: { enabled: true } },\n colors: [color ?? brand],\n plotOptions: {\n radialBar: {\n startAngle: -90,\n endAngle: 90,\n track: { background: 'rgba(150,150,150,0.15)', strokeWidth: '100%' },\n dataLabels: {\n name: { offsetY: -10, fontSize: '12px' },\n value: { offsetY: -45, fontSize: '24px', fontWeight: 700, formatter: (v) => `${v}%` },\n },\n },\n },\n labels: [label],\n };\n return (\n <ReactApexChart\n type=\"radialBar\"\n options={options}\n series={[value]}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/radialBar';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type StrokedGaugeProps = ChartSize & {\n value: number;\n label?: string;\n};\n\nexport const StrokedGauge = ({\n value,\n label = '',\n height = 280,\n width = '100%',\n}: StrokedGaugeProps) => {\n const { brand } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'radialBar', fontFamily: 'inherit' },\n colors: [brand],\n stroke: { lineCap: 'round', dashArray: 4 },\n plotOptions: {\n radialBar: {\n hollow: { size: '70%' },\n track: { background: 'rgba(150,150,150,0.15)', strokeWidth: '100%' },\n dataLabels: {\n name: { fontSize: '12px', offsetY: -10 },\n value: { fontSize: '32px', fontWeight: 700, formatter: (v) => `${v}%` },\n },\n },\n },\n labels: [label],\n };\n return (\n <ReactApexChart\n type=\"radialBar\"\n options={options}\n series={[value]}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/donut';\nimport 'apexcharts/features/legend';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type DonutChartProps = ChartSize & {\n series: number[];\n labels: string[];\n /** Whether to show the right-side legend (default: bottom). /\n rightLegend?: boolean;\n};\n\nexport const DonutChart = ({\n series,\n labels,\n rightLegend = false,\n height = 280,\n width = '100%',\n}: DonutChartProps) => {\n const { palette } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'donut', fontFamily: 'inherit' },\n colors: palette,\n labels,\n legend: { position: rightLegend ? 'right' : 'bottom' },\n dataLabels: { enabled: false },\n plotOptions: {\n pie: {\n donut: { size: '68%', labels: { show: true, total: { show: true, label: 'Total' } } },\n },\n },\n };\n return (\n <ReactApexChart type=\"donut\" options={options} series={series} height={height} width={width} />\n );\n};\n\nexport const DonutRightLegend = (props: Omit<DonutChartProps, 'rightLegend'>) => (\n <DonutChart {...props} rightLegend />\n);\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/line';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type SparklineProps = ChartSize & {\n data: number[];\n color?: string;\n variant?: 'line' \| 'area';\n};\n\nexport const Sparkline = ({\n data,\n color,\n variant = 'area',\n height = 60,\n width = '100%',\n}: SparklineProps) => {\n const { brand } = useChartTheme();\n const options: ApexOptions = {\n chart: { sparkline: { enabled: true }, fontFamily: 'inherit', type: variant },\n colors: [color ?? brand],\n stroke: { curve: 'smooth', width: 2 },\n fill:\n variant === 'area'\n ? { type: 'gradient', gradient: { opacityFrom: 0.45, opacityTo: 0.05 } }\n : undefined,\n tooltip: { fixed: { enabled: false }, x: { show: false }, marker: { show: false } },\n };\n return (\n <ReactApexChart\n type={variant}\n options={options}\n series={[{ name: 'value', data }]}\n height={height}\n width={width}\n />\n );\n};\n\nexport type SparklineGroupItem = {\n label: string;\n value: number \| string;\n data: number[];\n color?: string;\n};\n\nexport const SparklineGroup = ({\n items,\n className,\n}: {\n items: SparklineGroupItem[];\n className?: string;\n}) => (\n <div\n className={className}\n style={{\n display: 'grid',\n gap: '1rem',\n gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',\n }}\n >\n {items.map((it) => (\n <div\n key={it.label}\n className=\"rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900\"\n >\n <p className=\"text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400\">\n {it.label}\n </p>\n <p className=\"mt-1 text-2xl font-bold text-gray-900 dark:text-white\">{it.value}</p>\n <Sparkline data={it.data} color={it.color} height={50} />\n </div>\n ))}\n </div>\n);\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/treemap';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type TreemapDatum = { x: string; y: number };\n\nexport type TreemapChartProps = ChartSize & {\n series: { name?: string; data: TreemapDatum[] }[];\n};\n\nexport const TreemapChart = ({ series, height = 320, width = '100%' }: TreemapChartProps) => {\n const { palette } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'treemap', fontFamily: 'inherit', toolbar: { show: false } },\n colors: palette,\n legend: { show: false },\n dataLabels: { enabled: true, style: { fontSize: '12px' } },\n plotOptions: { treemap: { distributed: true, enableShades: false } },\n };\n return (\n <ReactApexChart\n type=\"treemap\"\n options={options}\n series={series}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/bar';\nimport 'apexcharts/features/legend';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type BarChartOrientation = 'vertical' \| 'horizontal';\n\nexport type BarChartProps = ChartSize & {\n series: { name: string; data: number[] }[];\n categories: (string \| number)[];\n /* `vertical` (default) draws bars upward; `horizontal` draws them rightward. /\n orientation?: BarChartOrientation;\n /* Stack multi-series bars instead of grouping them side-by-side. /\n stacked?: boolean;\n /* Override the default Cosmos palette. /\n colors?: string[];\n /* Format the numeric axis labels (and tooltip values). /\n formatValue?: (value: number) => string;\n /* Show the legend (auto-true when 2+ series). /\n showLegend?: boolean;\n /* Tailwind border-radius applied to bar tops. Default 4. */\n borderRadius?: number;\n};\n\nexport const BarChart = ({\n series,\n categories,\n orientation = 'vertical',\n stacked = false,\n colors,\n formatValue,\n showLegend,\n borderRadius = 4,\n height = 320,\n width = '100%',\n}: BarChartProps) => {\n const { grid, axisLabels, palette } = useChartTheme();\n const horizontal = orientation === 'horizontal';\n const legendVisible = showLegend ?? series.length > 1;\n\n const valueFormatter = formatValue ?? ((v: number) => String(v));\n\n const options: ApexOptions = {\n chart: {\n type: 'bar',\n toolbar: { show: false },\n zoom: { enabled: false },\n stacked,\n fontFamily: 'inherit',\n },\n colors: colors ?? palette,\n dataLabels: { enabled: false },\n plotOptions: {\n bar: {\n horizontal,\n borderRadius,\n borderRadiusApplication: 'end',\n columnWidth: '55%',\n },\n },\n grid,\n xaxis: {\n categories,\n labels: {\n ...axisLabels,\n formatter: horizontal ? (val) => valueFormatter(Number(val)) : undefined,\n },\n axisBorder: { show: false },\n axisTicks: { show: false },\n },\n yaxis: {\n labels: {\n ...axisLabels,\n formatter: horizontal ? undefined : (val) => valueFormatter(Number(val)),\n },\n },\n legend: {\n show: legendVisible,\n position: 'top',\n horizontalAlign: 'right',\n labels: { colors: axisLabels.style.colors },\n markers: { size: 5 },\n },\n tooltip: {\n theme: 'dark',\n y: { formatter: (v) => valueFormatter(Number(v)) },\n },\n fill: { opacity: 1 },\n stroke: { show: false },\n };\n\n return (\n <ReactApexChart type=\"bar\" options={options} series={series} height={height} width={width} />\n );\n};\n"]}
1	+ {"version":3,"sources":["../src/theme.ts","../src/escape.ts","../src/LineAreaChart.tsx","../src/RealtimeChart.tsx","../src/RadialBarChart.tsx","../src/GradientRadial.tsx","../src/SemiCircleGauge.tsx","../src/StrokedGauge.tsx","../src/DonutChart.tsx","../src/Sparkline.tsx","../src/TreemapChart.tsx","../src/BarChart.tsx"],"names":["useState","useEffect","ReactApexChart","jsx","jsxs"],"mappings":"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","file":"index.cjs","sourcesContent":["import type { ApexOptions } from 'apexcharts';\nimport { useEffect, useState } from 'react';\n\n/** Default brand color (the blue accent). Prefer `useChartTheme().brand`, which follows the accent. /\nexport const COSMOS_BRAND = '#465fff';\nexport const COSMOS_PALETTE = ['#465fff', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];\n\n// Theme classes that enable the dark variant (see @sckyzo/cosmos-theme).\nconst DARK_THEME_CLASSES = ['dark', 'deep-blue'];\n\nconst detectDark = (): boolean => {\n if (typeof document === 'undefined') return false;\n const { classList } = document.documentElement;\n return DARK_THEME_CLASSES.some((c) => classList.contains(c));\n};\n\n/* A CSS custom property on `<html>`, or `fallback` when it's unset or during SSR. /\nconst readCssVar = (name: string, fallback: string): string => {\n if (typeof document === 'undefined') return fallback;\n return getComputedStyle(document.documentElement).getPropertyValue(name).trim() \|\| fallback;\n};\n\nconst readChartColors = () => {\n const dark = detectDark();\n return {\n dark,\n brand: readCssVar('--color-brand-500', COSMOS_BRAND),\n grid: dark\n ? readCssVar('--color-gray-800', '#1f2937')\n : readCssVar('--color-gray-200', '#e5e7eb'),\n axis: dark\n ? readCssVar('--color-gray-400', '#9ca3af')\n : readCssVar('--color-gray-500', '#6b7280'),\n };\n};\n\n/\n Returns `read()` and calls it again whenever `<html>` changes theme or\n * accent (the Cosmos convention: a theme class and `data-accent`). `read`\n * must be stable.\n /\nconst useHtmlAppearance = <T>(read: () => T): T => {\n const [value, setValue] = useState(read);\n\n useEffect(() => {\n if (typeof document === 'undefined') return;\n const observer = new MutationObserver(() => setValue(read));\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['class', 'data-accent'],\n });\n return () => observer.disconnect();\n }, [read]);\n\n return value;\n};\n\n/\n Subscribes to dark-mode toggles on `<html>` (the Cosmos convention).\n * Returns the current `isDark` value.\n /\nexport const useDarkMode = (): boolean => useHtmlAppearance(detectDark);\n\n/\n Returns ApexCharts grid + axis options and colors matching the Cosmos\n * design tokens for the current theme and accent.\n /\nexport const useChartTheme = () => {\n const { dark, brand, grid: gridColor, axis } = useHtmlAppearance(readChartColors);\n const grid: ApexOptions['grid'] = {\n borderColor: gridColor,\n strokeDashArray: 4,\n };\n const axisLabels = {\n style: {\n colors: axis,\n fontSize: '11px',\n fontFamily: 'inherit',\n },\n };\n return { dark, grid, axisLabels, brand, palette: [brand, ...COSMOS_PALETTE.slice(1)] };\n};\n","const ENTITIES: Record<string, string> = {\n '&': '&',\n '<': '<',\n '>': '>',\n '\"': '"',\n \"'\": ''',\n};\n\n/\n Escapes text for the parts of a chart ApexCharts writes with innerHTML:\n * legend entries, tooltip titles, series names and values. Series names,\n * categories and labels are data and must never be parsed as markup. Axis\n * labels are SVG text and must stay unescaped.\n /\nexport const escapeHtml = (value: unknown): string =>\n String(value).replace(/[&<>\"']/g, (char) => ENTITIES[char]);\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/line';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { escapeHtml } from './escape';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type LineAreaChartProps = ChartSize & {\n series: { name: string; data: number[] }[];\n categories: (string \| number)[];\n};\n\nexport const LineAreaChart = ({\n series,\n categories,\n height = 280,\n width = '100%',\n}: LineAreaChartProps) => {\n const { grid, axisLabels, palette } = useChartTheme();\n const options: ApexOptions = {\n chart: {\n type: 'area',\n toolbar: { show: false },\n zoom: { enabled: false },\n fontFamily: 'inherit',\n },\n colors: palette,\n dataLabels: { enabled: false },\n stroke: { curve: 'smooth', width: 2 },\n fill: { type: 'gradient', gradient: { opacityFrom: 0.45, opacityTo: 0.05 } },\n grid,\n // One labels object per axis: ApexCharts writes the x-axis category\n // formatter onto it, which blanked the y labels on the next update.\n xaxis: {\n categories,\n labels: { ...axisLabels },\n axisBorder: { show: false },\n axisTicks: { show: false },\n },\n yaxis: { labels: { ...axisLabels } },\n legend: { show: false },\n // The tooltip is HTML: escape the category and the series name. ApexCharts\n // hands the x formatter the point's position on the axis (1, 2, …), not\n // its category, so read the category back by index.\n tooltip: {\n theme: 'dark',\n x: {\n formatter: (v, opts) =>\n escapeHtml(opts === undefined ? v : (categories[opts.dataPointIndex] ?? v)),\n },\n y: { title: { formatter: (name) => `${escapeHtml(name)}: ` } },\n },\n };\n return (\n <ReactApexChart type=\"area\" options={options} series={series} height={height} width={width} />\n );\n};\n","import { useEffect, useState } from 'react';\nimport type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/line';\nimport 'apexcharts/features/annotations';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type RealtimeChartProps = ChartSize & {\n /* Sample generator — defaults to a noisy walk between 30 and 80. /\n generator?: () => number;\n /* Interval in ms — defaults to 2000. /\n intervalMs?: number;\n windowSize?: number;\n warnThreshold?: number;\n critThreshold?: number;\n};\n\nconst defaultGenerator = (() => {\n let last = 50;\n return () => {\n last += (Math.random() - 0.5) 8;\n last = Math.max(20, Math.min(95, last));\n return Math.round(last);\n };\n})();\n\nexport const RealtimeChart = ({\n generator = defaultGenerator,\n intervalMs = 2000,\n windowSize = 30,\n warnThreshold = 70,\n critThreshold = 85,\n height = 240,\n width = '100%',\n}: RealtimeChartProps) => {\n const { grid, axisLabels, brand } = useChartTheme();\n const [series, setSeries] = useState(() => Array.from({ length: windowSize }, () => generator()));\n\n useEffect(() => {\n const id = setInterval(() => {\n setSeries((current) => [...current.slice(1), generator()]);\n }, intervalMs);\n return () => clearInterval(id);\n }, [generator, intervalMs]);\n\n const options: ApexOptions = {\n chart: {\n type: 'line',\n animations: { enabled: true, dynamicAnimation: { enabled: true, speed: 800 } },\n toolbar: { show: false },\n zoom: { enabled: false },\n fontFamily: 'inherit',\n },\n colors: [brand],\n stroke: { curve: 'smooth', width: 2 },\n dataLabels: { enabled: false },\n grid,\n xaxis: {\n type: 'numeric',\n labels: { show: false },\n axisBorder: { show: false },\n axisTicks: { show: false },\n },\n yaxis: { min: 0, max: 100, labels: axisLabels },\n annotations: {\n yaxis: [\n {\n y: warnThreshold,\n borderColor: '#f59e0b',\n label: { text: 'WARN', style: { color: '#fff', background: '#f59e0b' } },\n },\n {\n y: critThreshold,\n borderColor: '#ef4444',\n label: { text: 'CRIT', style: { color: '#fff', background: '#ef4444' } },\n },\n ],\n },\n tooltip: { theme: 'dark' },\n };\n\n return (\n <ReactApexChart\n type=\"line\"\n options={options}\n series={[{ name: 'value', data: series }]}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/radialBar';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type RadialBarChartProps = ChartSize & {\n series: number[];\n labels: string[];\n};\n\nexport const RadialBarChart = ({\n series,\n labels,\n height = 320,\n width = '100%',\n}: RadialBarChartProps) => {\n const { palette } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'radialBar', fontFamily: 'inherit' },\n colors: palette,\n labels,\n plotOptions: {\n radialBar: {\n track: { background: 'rgba(150,150,150,0.15)' },\n dataLabels: {\n name: { fontSize: '12px' },\n value: { fontSize: '14px', formatter: (v) => `${v}%` },\n total: {\n show: true,\n label: 'Avg',\n formatter: () => `${Math.round(series.reduce((a, b) => a + b, 0) / series.length)}%`,\n },\n },\n },\n },\n };\n return (\n <ReactApexChart\n type=\"radialBar\"\n options={options}\n series={series}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/radialBar';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type GradientRadialProps = ChartSize & {\n value: number;\n label?: string;\n};\n\nexport const GradientRadial = ({\n value,\n label = 'Score',\n height = 280,\n width = '100%',\n}: GradientRadialProps) => {\n const { brand } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'radialBar', fontFamily: 'inherit' },\n colors: [brand],\n fill: {\n type: 'gradient',\n gradient: {\n shade: 'dark',\n type: 'horizontal',\n shadeIntensity: 0.5,\n gradientToColors: ['#10b981'],\n inverseColors: false,\n opacityFrom: 1,\n opacityTo: 1,\n stops: [0, 100],\n },\n },\n plotOptions: {\n radialBar: {\n hollow: { size: '70%' },\n dataLabels: {\n name: { fontSize: '12px', offsetY: -10 },\n value: { fontSize: '32px', fontWeight: 700, formatter: (v) => `${v}%` },\n },\n },\n },\n labels: [label],\n };\n return (\n <ReactApexChart\n type=\"radialBar\"\n options={options}\n series={[value]}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/radialBar';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type SemiCircleGaugeProps = ChartSize & {\n value: number;\n label?: string;\n color?: string;\n};\n\nexport const SemiCircleGauge = ({\n value,\n label = '',\n color,\n height = 200,\n width = '100%',\n}: SemiCircleGaugeProps) => {\n const { brand } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'radialBar', fontFamily: 'inherit', sparkline: { enabled: true } },\n colors: [color ?? brand],\n plotOptions: {\n radialBar: {\n startAngle: -90,\n endAngle: 90,\n track: { background: 'rgba(150,150,150,0.15)', strokeWidth: '100%' },\n dataLabels: {\n name: { offsetY: -10, fontSize: '12px' },\n value: { offsetY: -45, fontSize: '24px', fontWeight: 700, formatter: (v) => `${v}%` },\n },\n },\n },\n labels: [label],\n };\n return (\n <ReactApexChart\n type=\"radialBar\"\n options={options}\n series={[value]}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/radialBar';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type StrokedGaugeProps = ChartSize & {\n value: number;\n label?: string;\n};\n\nexport const StrokedGauge = ({\n value,\n label = '',\n height = 280,\n width = '100%',\n}: StrokedGaugeProps) => {\n const { brand } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'radialBar', fontFamily: 'inherit' },\n colors: [brand],\n stroke: { lineCap: 'round', dashArray: 4 },\n plotOptions: {\n radialBar: {\n hollow: { size: '70%' },\n track: { background: 'rgba(150,150,150,0.15)', strokeWidth: '100%' },\n dataLabels: {\n name: { fontSize: '12px', offsetY: -10 },\n value: { fontSize: '32px', fontWeight: 700, formatter: (v) => `${v}%` },\n },\n },\n },\n labels: [label],\n };\n return (\n <ReactApexChart\n type=\"radialBar\"\n options={options}\n series={[value]}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/donut';\nimport 'apexcharts/features/legend';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { escapeHtml } from './escape';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type DonutChartProps = ChartSize & {\n series: number[];\n labels: string[];\n /** Whether to show the right-side legend (default: bottom). /\n rightLegend?: boolean;\n};\n\nexport const DonutChart = ({\n series,\n labels,\n rightLegend = false,\n height = 280,\n width = '100%',\n}: DonutChartProps) => {\n const { palette } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'donut', fontFamily: 'inherit' },\n colors: palette,\n labels,\n // The legend and the tooltip are HTML: escape the labels.\n legend: { position: rightLegend ? 'right' : 'bottom', formatter: (name) => escapeHtml(name) },\n tooltip: { y: { title: { formatter: (name) => `${escapeHtml(name)}: ` } } },\n dataLabels: { enabled: false },\n plotOptions: {\n pie: {\n donut: { size: '68%', labels: { show: true, total: { show: true, label: 'Total' } } },\n },\n },\n };\n return (\n <ReactApexChart type=\"donut\" options={options} series={series} height={height} width={width} />\n );\n};\n\nexport const DonutRightLegend = (props: Omit<DonutChartProps, 'rightLegend'>) => (\n <DonutChart {...props} rightLegend />\n);\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/line';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type SparklineProps = ChartSize & {\n data: number[];\n color?: string;\n variant?: 'line' \| 'area';\n};\n\nexport const Sparkline = ({\n data,\n color,\n variant = 'area',\n height = 60,\n width = '100%',\n}: SparklineProps) => {\n const { brand } = useChartTheme();\n const options: ApexOptions = {\n chart: { sparkline: { enabled: true }, fontFamily: 'inherit', type: variant },\n colors: [color ?? brand],\n stroke: { curve: 'smooth', width: 2 },\n fill:\n variant === 'area'\n ? { type: 'gradient', gradient: { opacityFrom: 0.45, opacityTo: 0.05 } }\n : undefined,\n tooltip: { fixed: { enabled: false }, x: { show: false }, marker: { show: false } },\n };\n return (\n <ReactApexChart\n type={variant}\n options={options}\n series={[{ name: 'value', data }]}\n height={height}\n width={width}\n />\n );\n};\n\nexport type SparklineGroupItem = {\n label: string;\n value: number \| string;\n data: number[];\n color?: string;\n};\n\nexport const SparklineGroup = ({\n items,\n className,\n}: {\n items: SparklineGroupItem[];\n className?: string;\n}) => (\n <div\n className={className}\n style={{\n display: 'grid',\n gap: '1rem',\n gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',\n }}\n >\n {items.map((it) => (\n <div\n key={it.label}\n className=\"rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900\"\n >\n <p className=\"text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400\">\n {it.label}\n </p>\n <p className=\"mt-1 text-2xl font-bold text-gray-900 dark:text-white\">{it.value}</p>\n <Sparkline data={it.data} color={it.color} height={50} />\n </div>\n ))}\n </div>\n);\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/treemap';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type TreemapDatum = { x: string; y: number };\n\nexport type TreemapChartProps = ChartSize & {\n series: { name?: string; data: TreemapDatum[] }[];\n};\n\nexport const TreemapChart = ({ series, height = 320, width = '100%' }: TreemapChartProps) => {\n const { palette } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'treemap', fontFamily: 'inherit', toolbar: { show: false } },\n colors: palette,\n legend: { show: false },\n dataLabels: { enabled: true, style: { fontSize: '12px' } },\n plotOptions: { treemap: { distributed: true, enableShades: false } },\n };\n return (\n <ReactApexChart\n type=\"treemap\"\n options={options}\n series={series}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/bar';\nimport 'apexcharts/features/legend';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { escapeHtml } from './escape';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type BarChartOrientation = 'vertical' \| 'horizontal';\n\nexport type BarChartProps = ChartSize & {\n series: { name: string; data: number[] }[];\n categories: (string \| number)[];\n /* `vertical` (default) draws bars upward; `horizontal` draws them rightward. /\n orientation?: BarChartOrientation;\n /* Stack multi-series bars instead of grouping them side-by-side. /\n stacked?: boolean;\n /* Override the default Cosmos palette. /\n colors?: string[];\n /* Format the numeric axis labels (and tooltip values). /\n formatValue?: (value: number) => string;\n /* Show the legend (auto-true when 2+ series). /\n showLegend?: boolean;\n /* Tailwind border-radius applied to bar tops. Default 4. */\n borderRadius?: number;\n};\n\nexport const BarChart = ({\n series,\n categories,\n orientation = 'vertical',\n stacked = false,\n colors,\n formatValue,\n showLegend,\n borderRadius = 4,\n height = 320,\n width = '100%',\n}: BarChartProps) => {\n const { grid, axisLabels, palette } = useChartTheme();\n const horizontal = orientation === 'horizontal';\n const legendVisible = showLegend ?? series.length > 1;\n\n const valueFormatter = formatValue ?? ((v: number) => String(v));\n\n const options: ApexOptions = {\n chart: {\n type: 'bar',\n toolbar: { show: false },\n zoom: { enabled: false },\n stacked,\n fontFamily: 'inherit',\n },\n colors: colors ?? palette,\n dataLabels: { enabled: false },\n plotOptions: {\n bar: {\n horizontal,\n borderRadius,\n borderRadiusApplication: 'end',\n columnWidth: '55%',\n },\n },\n grid,\n xaxis: {\n categories,\n labels: {\n ...axisLabels,\n formatter: horizontal ? (val) => valueFormatter(Number(val)) : undefined,\n },\n axisBorder: { show: false },\n axisTicks: { show: false },\n },\n yaxis: {\n labels: {\n ...axisLabels,\n formatter: horizontal ? undefined : (val) => valueFormatter(Number(val)),\n },\n },\n legend: {\n show: legendVisible,\n position: 'top',\n horizontalAlign: 'right',\n labels: { colors: axisLabels.style.colors },\n markers: { size: 5 },\n formatter: (name) => escapeHtml(name),\n },\n // Tooltips and the legend are HTML: escape names, categories and values.\n tooltip: {\n theme: 'dark',\n x: { formatter: (v) => escapeHtml(v) },\n y: {\n formatter: (v) => escapeHtml(valueFormatter(Number(v))),\n title: { formatter: (name) => `${escapeHtml(name)}: ` },\n },\n },\n fill: { opacity: 1 },\n stroke: { show: false },\n };\n\n return (\n <ReactApexChart type=\"bar\" options={options} series={series} height={height} width={width} />\n );\n};\n"]}

package/dist/index.d.cts CHANGED Viewed

@@ -1,6 +1,7 @@
 import * as apexcharts from 'apexcharts';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+/** Default brand color (the blue accent). Prefer `useChartTheme().brand`, which follows the accent. */
 declare const COSMOS_BRAND = "#465fff";
 declare const COSMOS_PALETTE: string[];
 /**
@@ -9,8 +10,8 @@ declare const COSMOS_PALETTE: string[];
  */
 declare const useDarkMode: () => boolean;
 /**
- * Returns ApexCharts grid + axis options matching the Cosmos design tokens
- * for the current color scheme.
+ * Returns ApexCharts grid + axis options and colors matching the Cosmos
+ * design tokens for the current theme and accent.
  */
 declare const useChartTheme: () => {
     dark: boolean;
@@ -42,7 +43,7 @@ type LineAreaChartProps = ChartSize & {
     }[];
     categories: (string | number)[];
 };
-declare const LineAreaChart: ({ series, categories, height, width, }: LineAreaChartProps) => react_jsx_runtime.JSX.Element;
+declare const LineAreaChart: ({ series, categories, height, width, }: LineAreaChartProps) => react.JSX.Element;
 type RealtimeChartProps = ChartSize & {
     /** Sample generator — defaults to a noisy walk between 30 and 80. */
@@ -53,32 +54,32 @@ type RealtimeChartProps = ChartSize & {
     warnThreshold?: number;
     critThreshold?: number;
 };
-declare const RealtimeChart: ({ generator, intervalMs, windowSize, warnThreshold, critThreshold, height, width, }: RealtimeChartProps) => react_jsx_runtime.JSX.Element;
+declare const RealtimeChart: ({ generator, intervalMs, windowSize, warnThreshold, critThreshold, height, width, }: RealtimeChartProps) => react.JSX.Element;
 type RadialBarChartProps = ChartSize & {
     series: number[];
     labels: string[];
 };
-declare const RadialBarChart: ({ series, labels, height, width, }: RadialBarChartProps) => react_jsx_runtime.JSX.Element;
+declare const RadialBarChart: ({ series, labels, height, width, }: RadialBarChartProps) => react.JSX.Element;
 type GradientRadialProps = ChartSize & {
     value: number;
     label?: string;
 };
-declare const GradientRadial: ({ value, label, height, width, }: GradientRadialProps) => react_jsx_runtime.JSX.Element;
+declare const GradientRadial: ({ value, label, height, width, }: GradientRadialProps) => react.JSX.Element;
 type SemiCircleGaugeProps = ChartSize & {
     value: number;
     label?: string;
     color?: string;
 };
-declare const SemiCircleGauge: ({ value, label, color, height, width, }: SemiCircleGaugeProps) => react_jsx_runtime.JSX.Element;
+declare const SemiCircleGauge: ({ value, label, color, height, width, }: SemiCircleGaugeProps) => react.JSX.Element;
 type StrokedGaugeProps = ChartSize & {
     value: number;
     label?: string;
 };
-declare const StrokedGauge: ({ value, label, height, width, }: StrokedGaugeProps) => react_jsx_runtime.JSX.Element;
+declare const StrokedGauge: ({ value, label, height, width, }: StrokedGaugeProps) => react.JSX.Element;
 type DonutChartProps = ChartSize & {
     series: number[];
@@ -86,15 +87,15 @@ type DonutChartProps = ChartSize & {
     /** Whether to show the right-side legend (default: bottom). */
     rightLegend?: boolean;
 };
-declare const DonutChart: ({ series, labels, rightLegend, height, width, }: DonutChartProps) => react_jsx_runtime.JSX.Element;
-declare const DonutRightLegend: (props: Omit<DonutChartProps, "rightLegend">) => react_jsx_runtime.JSX.Element;
+declare const DonutChart: ({ series, labels, rightLegend, height, width, }: DonutChartProps) => react.JSX.Element;
+declare const DonutRightLegend: (props: Omit<DonutChartProps, "rightLegend">) => react.JSX.Element;
 type SparklineProps = ChartSize & {
     data: number[];
     color?: string;
     variant?: 'line' | 'area';
 };
-declare const Sparkline: ({ data, color, variant, height, width, }: SparklineProps) => react_jsx_runtime.JSX.Element;
+declare const Sparkline: ({ data, color, variant, height, width, }: SparklineProps) => react.JSX.Element;
 type SparklineGroupItem = {
     label: string;
     value: number | string;
@@ -104,7 +105,7 @@ type SparklineGroupItem = {
 declare const SparklineGroup: ({ items, className, }: {
     items: SparklineGroupItem[];
     className?: string;
-}) => react_jsx_runtime.JSX.Element;
+}) => react.JSX.Element;
 type TreemapDatum = {
     x: string;
@@ -116,7 +117,7 @@ type TreemapChartProps = ChartSize & {
         data: TreemapDatum[];
     }[];
 };
-declare const TreemapChart: ({ series, height, width }: TreemapChartProps) => react_jsx_runtime.JSX.Element;
+declare const TreemapChart: ({ series, height, width }: TreemapChartProps) => react.JSX.Element;
 type BarChartOrientation = 'vertical' | 'horizontal';
 type BarChartProps = ChartSize & {
@@ -138,6 +139,6 @@ type BarChartProps = ChartSize & {
     /** Tailwind border-radius applied to bar tops. Default 4. */
     borderRadius?: number;
 };
-declare const BarChart: ({ series, categories, orientation, stacked, colors, formatValue, showLegend, borderRadius, height, width, }: BarChartProps) => react_jsx_runtime.JSX.Element;
+declare const BarChart: ({ series, categories, orientation, stacked, colors, formatValue, showLegend, borderRadius, height, width, }: BarChartProps) => react.JSX.Element;
 export { BarChart, type BarChartOrientation, type BarChartProps, COSMOS_BRAND, COSMOS_PALETTE, type ChartSeriesPoint, type ChartSize, DonutChart, type DonutChartProps, DonutRightLegend, GradientRadial, type GradientRadialProps, LineAreaChart, type LineAreaChartProps, RadialBarChart, type RadialBarChartProps, RealtimeChart, type RealtimeChartProps, SemiCircleGauge, type SemiCircleGaugeProps, Sparkline, SparklineGroup, type SparklineGroupItem, type SparklineProps, StrokedGauge, type StrokedGaugeProps, TreemapChart, type TreemapChartProps, type TreemapDatum, useChartTheme, useDarkMode };

package/dist/index.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import * as apexcharts from 'apexcharts';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+/** Default brand color (the blue accent). Prefer `useChartTheme().brand`, which follows the accent. */
 declare const COSMOS_BRAND = "#465fff";
 declare const COSMOS_PALETTE: string[];
 /**
@@ -9,8 +10,8 @@ declare const COSMOS_PALETTE: string[];
  */
 declare const useDarkMode: () => boolean;
 /**
- * Returns ApexCharts grid + axis options matching the Cosmos design tokens
- * for the current color scheme.
+ * Returns ApexCharts grid + axis options and colors matching the Cosmos
+ * design tokens for the current theme and accent.
  */
 declare const useChartTheme: () => {
     dark: boolean;
@@ -42,7 +43,7 @@ type LineAreaChartProps = ChartSize & {
     }[];
     categories: (string | number)[];
 };
-declare const LineAreaChart: ({ series, categories, height, width, }: LineAreaChartProps) => react_jsx_runtime.JSX.Element;
+declare const LineAreaChart: ({ series, categories, height, width, }: LineAreaChartProps) => react.JSX.Element;
 type RealtimeChartProps = ChartSize & {
     /** Sample generator — defaults to a noisy walk between 30 and 80. */
@@ -53,32 +54,32 @@ type RealtimeChartProps = ChartSize & {
     warnThreshold?: number;
     critThreshold?: number;
 };
-declare const RealtimeChart: ({ generator, intervalMs, windowSize, warnThreshold, critThreshold, height, width, }: RealtimeChartProps) => react_jsx_runtime.JSX.Element;
+declare const RealtimeChart: ({ generator, intervalMs, windowSize, warnThreshold, critThreshold, height, width, }: RealtimeChartProps) => react.JSX.Element;
 type RadialBarChartProps = ChartSize & {
     series: number[];
     labels: string[];
 };
-declare const RadialBarChart: ({ series, labels, height, width, }: RadialBarChartProps) => react_jsx_runtime.JSX.Element;
+declare const RadialBarChart: ({ series, labels, height, width, }: RadialBarChartProps) => react.JSX.Element;
 type GradientRadialProps = ChartSize & {
     value: number;
     label?: string;
 };
-declare const GradientRadial: ({ value, label, height, width, }: GradientRadialProps) => react_jsx_runtime.JSX.Element;
+declare const GradientRadial: ({ value, label, height, width, }: GradientRadialProps) => react.JSX.Element;
 type SemiCircleGaugeProps = ChartSize & {
     value: number;
     label?: string;
     color?: string;
 };
-declare const SemiCircleGauge: ({ value, label, color, height, width, }: SemiCircleGaugeProps) => react_jsx_runtime.JSX.Element;
+declare const SemiCircleGauge: ({ value, label, color, height, width, }: SemiCircleGaugeProps) => react.JSX.Element;
 type StrokedGaugeProps = ChartSize & {
     value: number;
     label?: string;
 };
-declare const StrokedGauge: ({ value, label, height, width, }: StrokedGaugeProps) => react_jsx_runtime.JSX.Element;
+declare const StrokedGauge: ({ value, label, height, width, }: StrokedGaugeProps) => react.JSX.Element;
 type DonutChartProps = ChartSize & {
     series: number[];
@@ -86,15 +87,15 @@ type DonutChartProps = ChartSize & {
     /** Whether to show the right-side legend (default: bottom). */
     rightLegend?: boolean;
 };
-declare const DonutChart: ({ series, labels, rightLegend, height, width, }: DonutChartProps) => react_jsx_runtime.JSX.Element;
-declare const DonutRightLegend: (props: Omit<DonutChartProps, "rightLegend">) => react_jsx_runtime.JSX.Element;
+declare const DonutChart: ({ series, labels, rightLegend, height, width, }: DonutChartProps) => react.JSX.Element;
+declare const DonutRightLegend: (props: Omit<DonutChartProps, "rightLegend">) => react.JSX.Element;
 type SparklineProps = ChartSize & {
     data: number[];
     color?: string;
     variant?: 'line' | 'area';
 };
-declare const Sparkline: ({ data, color, variant, height, width, }: SparklineProps) => react_jsx_runtime.JSX.Element;
+declare const Sparkline: ({ data, color, variant, height, width, }: SparklineProps) => react.JSX.Element;
 type SparklineGroupItem = {
     label: string;
     value: number | string;
@@ -104,7 +105,7 @@ type SparklineGroupItem = {
 declare const SparklineGroup: ({ items, className, }: {
     items: SparklineGroupItem[];
     className?: string;
-}) => react_jsx_runtime.JSX.Element;
+}) => react.JSX.Element;
 type TreemapDatum = {
     x: string;
@@ -116,7 +117,7 @@ type TreemapChartProps = ChartSize & {
         data: TreemapDatum[];
     }[];
 };
-declare const TreemapChart: ({ series, height, width }: TreemapChartProps) => react_jsx_runtime.JSX.Element;
+declare const TreemapChart: ({ series, height, width }: TreemapChartProps) => react.JSX.Element;
 type BarChartOrientation = 'vertical' | 'horizontal';
 type BarChartProps = ChartSize & {
@@ -138,6 +139,6 @@ type BarChartProps = ChartSize & {
     /** Tailwind border-radius applied to bar tops. Default 4. */
     borderRadius?: number;
 };
-declare const BarChart: ({ series, categories, orientation, stacked, colors, formatValue, showLegend, borderRadius, height, width, }: BarChartProps) => react_jsx_runtime.JSX.Element;
+declare const BarChart: ({ series, categories, orientation, stacked, colors, formatValue, showLegend, borderRadius, height, width, }: BarChartProps) => react.JSX.Element;
 export { BarChart, type BarChartOrientation, type BarChartProps, COSMOS_BRAND, COSMOS_PALETTE, type ChartSeriesPoint, type ChartSize, DonutChart, type DonutChartProps, DonutRightLegend, GradientRadial, type GradientRadialProps, LineAreaChart, type LineAreaChartProps, RadialBarChart, type RadialBarChartProps, RealtimeChart, type RealtimeChartProps, SemiCircleGauge, type SemiCircleGaugeProps, Sparkline, SparklineGroup, type SparklineGroupItem, type SparklineProps, StrokedGauge, type StrokedGaugeProps, TreemapChart, type TreemapChartProps, type TreemapDatum, useChartTheme, useDarkMode };

package/dist/index.js CHANGED Viewed

@@ -11,38 +11,64 @@ import 'apexcharts/bar';
 var COSMOS_BRAND = "#465fff";
 var COSMOS_PALETTE = ["#465fff", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"];
+var DARK_THEME_CLASSES = ["dark", "deep-blue"];
 var detectDark = () => {
   if (typeof document === "undefined") return false;
-  return document.documentElement.classList.contains("dark");
+  const { classList } = document.documentElement;
+  return DARK_THEME_CLASSES.some((c) => classList.contains(c));
 };
-var useDarkMode = () => {
-  const [dark, setDark] = useState(detectDark);
+var readCssVar = (name, fallback) => {
+  if (typeof document === "undefined") return fallback;
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+};
+var readChartColors = () => {
+  const dark = detectDark();
+  return {
+    dark,
+    brand: readCssVar("--color-brand-500", COSMOS_BRAND),
+    grid: dark ? readCssVar("--color-gray-800", "#1f2937") : readCssVar("--color-gray-200", "#e5e7eb"),
+    axis: dark ? readCssVar("--color-gray-400", "#9ca3af") : readCssVar("--color-gray-500", "#6b7280")
+  };
+};
+var useHtmlAppearance = (read) => {
+  const [value, setValue] = useState(read);
   useEffect(() => {
     if (typeof document === "undefined") return;
-    const observer = new MutationObserver(() => setDark(detectDark()));
+    const observer = new MutationObserver(() => setValue(read));
     observer.observe(document.documentElement, {
       attributes: true,
-      attributeFilter: ["class"]
+      attributeFilter: ["class", "data-accent"]
     });
     return () => observer.disconnect();
-  }, []);
-  return dark;
+  }, [read]);
+  return value;
 };
+var useDarkMode = () => useHtmlAppearance(detectDark);
 var useChartTheme = () => {
-  const dark = useDarkMode();
+  const { dark, brand, grid: gridColor, axis } = useHtmlAppearance(readChartColors);
   const grid = {
-    borderColor: dark ? "#1f2937" : "#e5e7eb",
+    borderColor: gridColor,
     strokeDashArray: 4
   };
   const axisLabels = {
     style: {
-      colors: dark ? "#9ca3af" : "#6b7280",
+      colors: axis,
       fontSize: "11px",
       fontFamily: "inherit"
     }
   };
-  return { dark, grid, axisLabels, brand: COSMOS_BRAND, palette: COSMOS_PALETTE };
+  return { dark, grid, axisLabels, brand, palette: [brand, ...COSMOS_PALETTE.slice(1)] };
 };
+// src/escape.ts
+var ENTITIES = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
+};
+var escapeHtml = (value) => String(value).replace(/[&<>"']/g, (char) => ENTITIES[char]);
 var LineAreaChart = ({
   series,
   categories,
@@ -62,15 +88,26 @@ var LineAreaChart = ({
     stroke: { curve: "smooth", width: 2 },
     fill: { type: "gradient", gradient: { opacityFrom: 0.45, opacityTo: 0.05 } },
     grid,
+    // One labels object per axis: ApexCharts writes the x-axis category
+    // formatter onto it, which blanked the y labels on the next update.
     xaxis: {
       categories,
-      labels: axisLabels,
+      labels: { ...axisLabels },
       axisBorder: { show: false },
       axisTicks: { show: false }
     },
-    yaxis: { labels: axisLabels },
+    yaxis: { labels: { ...axisLabels } },
     legend: { show: false },
-    tooltip: { theme: "dark" }
+    // The tooltip is HTML: escape the category and the series name. ApexCharts
+    // hands the x formatter the point's position on the axis (1, 2, …), not
+    // its category, so read the category back by index.
+    tooltip: {
+      theme: "dark",
+      x: {
+        formatter: (v, opts) => escapeHtml(opts === void 0 ? v : categories[opts.dataPointIndex] ?? v)
+      },
+      y: { title: { formatter: (name) => `${escapeHtml(name)}: ` } }
+    }
   };
   return /* @__PURE__ */ jsx(ReactApexChart, { type: "area", options, series, height, width });
 };
@@ -308,7 +345,9 @@ var DonutChart = ({
     chart: { type: "donut", fontFamily: "inherit" },
     colors: palette,
     labels,
-    legend: { position: rightLegend ? "right" : "bottom" },
+    // The legend and the tooltip are HTML: escape the labels.
+    legend: { position: rightLegend ? "right" : "bottom", formatter: (name) => escapeHtml(name) },
+    tooltip: { y: { title: { formatter: (name) => `${escapeHtml(name)}: ` } } },
     dataLabels: { enabled: false },
     plotOptions: {
       pie: {
@@ -446,11 +485,17 @@ var BarChart = ({
       position: "top",
       horizontalAlign: "right",
       labels: { colors: axisLabels.style.colors },
-      markers: { size: 5 }
+      markers: { size: 5 },
+      formatter: (name) => escapeHtml(name)
     },
+    // Tooltips and the legend are HTML: escape names, categories and values.
     tooltip: {
       theme: "dark",
-      y: { formatter: (v) => valueFormatter(Number(v)) }
+      x: { formatter: (v) => escapeHtml(v) },
+      y: {
+        formatter: (v) => escapeHtml(valueFormatter(Number(v))),
+        title: { formatter: (name) => `${escapeHtml(name)}: ` }
+      }
     },
     fill: { opacity: 1 },
     stroke: { show: false }

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/theme.ts","../src/LineAreaChart.tsx","../src/RealtimeChart.tsx","../src/RadialBarChart.tsx","../src/GradientRadial.tsx","../src/SemiCircleGauge.tsx","../src/StrokedGauge.tsx","../src/DonutChart.tsx","../src/Sparkline.tsx","../src/TreemapChart.tsx","../src/BarChart.tsx"],"names":["useState","useEffect","jsx","ReactApexChart"],"mappings":"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","file":"index.js","sourcesContent":["import type { ApexOptions } from 'apexcharts';\nimport { useEffect, useState } from 'react';\n\nexport const COSMOS_BRAND = '#465fff';\nexport const COSMOS_PALETTE = ['#465fff', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];\n\nconst detectDark = (): boolean => {\n if (typeof document === 'undefined') return false;\n return document.documentElement.classList.contains('dark');\n};\n\n/*\n Subscribes to dark-mode toggles on `<html>` (the Cosmos convention).\n * Returns the current `isDark` value.\n /\nexport const useDarkMode = (): boolean => {\n const [dark, setDark] = useState(detectDark);\n\n useEffect(() => {\n if (typeof document === 'undefined') return;\n const observer = new MutationObserver(() => setDark(detectDark()));\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['class'],\n });\n return () => observer.disconnect();\n }, []);\n\n return dark;\n};\n\n/\n Returns ApexCharts grid + axis options matching the Cosmos design tokens\n * for the current color scheme.\n /\nexport const useChartTheme = () => {\n const dark = useDarkMode();\n const grid: ApexOptions['grid'] = {\n borderColor: dark ? '#1f2937' : '#e5e7eb',\n strokeDashArray: 4,\n };\n const axisLabels = {\n style: {\n colors: dark ? '#9ca3af' : '#6b7280',\n fontSize: '11px',\n fontFamily: 'inherit',\n },\n };\n return { dark, grid, axisLabels, brand: COSMOS_BRAND, palette: COSMOS_PALETTE };\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/line';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type LineAreaChartProps = ChartSize & {\n series: { name: string; data: number[] }[];\n categories: (string \| number)[];\n};\n\nexport const LineAreaChart = ({\n series,\n categories,\n height = 280,\n width = '100%',\n}: LineAreaChartProps) => {\n const { grid, axisLabels, palette } = useChartTheme();\n const options: ApexOptions = {\n chart: {\n type: 'area',\n toolbar: { show: false },\n zoom: { enabled: false },\n fontFamily: 'inherit',\n },\n colors: palette,\n dataLabels: { enabled: false },\n stroke: { curve: 'smooth', width: 2 },\n fill: { type: 'gradient', gradient: { opacityFrom: 0.45, opacityTo: 0.05 } },\n grid,\n xaxis: {\n categories,\n labels: axisLabels,\n axisBorder: { show: false },\n axisTicks: { show: false },\n },\n yaxis: { labels: axisLabels },\n legend: { show: false },\n tooltip: { theme: 'dark' },\n };\n return (\n <ReactApexChart type=\"area\" options={options} series={series} height={height} width={width} />\n );\n};\n","import { useEffect, useState } from 'react';\nimport type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/line';\nimport 'apexcharts/features/annotations';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type RealtimeChartProps = ChartSize & {\n /* Sample generator — defaults to a noisy walk between 30 and 80. /\n generator?: () => number;\n /* Interval in ms — defaults to 2000. /\n intervalMs?: number;\n windowSize?: number;\n warnThreshold?: number;\n critThreshold?: number;\n};\n\nconst defaultGenerator = (() => {\n let last = 50;\n return () => {\n last += (Math.random() - 0.5) 8;\n last = Math.max(20, Math.min(95, last));\n return Math.round(last);\n };\n})();\n\nexport const RealtimeChart = ({\n generator = defaultGenerator,\n intervalMs = 2000,\n windowSize = 30,\n warnThreshold = 70,\n critThreshold = 85,\n height = 240,\n width = '100%',\n}: RealtimeChartProps) => {\n const { grid, axisLabels, brand } = useChartTheme();\n const [series, setSeries] = useState(() => Array.from({ length: windowSize }, () => generator()));\n\n useEffect(() => {\n const id = setInterval(() => {\n setSeries((current) => [...current.slice(1), generator()]);\n }, intervalMs);\n return () => clearInterval(id);\n }, [generator, intervalMs]);\n\n const options: ApexOptions = {\n chart: {\n type: 'line',\n animations: { enabled: true, dynamicAnimation: { enabled: true, speed: 800 } },\n toolbar: { show: false },\n zoom: { enabled: false },\n fontFamily: 'inherit',\n },\n colors: [brand],\n stroke: { curve: 'smooth', width: 2 },\n dataLabels: { enabled: false },\n grid,\n xaxis: {\n type: 'numeric',\n labels: { show: false },\n axisBorder: { show: false },\n axisTicks: { show: false },\n },\n yaxis: { min: 0, max: 100, labels: axisLabels },\n annotations: {\n yaxis: [\n {\n y: warnThreshold,\n borderColor: '#f59e0b',\n label: { text: 'WARN', style: { color: '#fff', background: '#f59e0b' } },\n },\n {\n y: critThreshold,\n borderColor: '#ef4444',\n label: { text: 'CRIT', style: { color: '#fff', background: '#ef4444' } },\n },\n ],\n },\n tooltip: { theme: 'dark' },\n };\n\n return (\n <ReactApexChart\n type=\"line\"\n options={options}\n series={[{ name: 'value', data: series }]}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/radialBar';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type RadialBarChartProps = ChartSize & {\n series: number[];\n labels: string[];\n};\n\nexport const RadialBarChart = ({\n series,\n labels,\n height = 320,\n width = '100%',\n}: RadialBarChartProps) => {\n const { palette } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'radialBar', fontFamily: 'inherit' },\n colors: palette,\n labels,\n plotOptions: {\n radialBar: {\n track: { background: 'rgba(150,150,150,0.15)' },\n dataLabels: {\n name: { fontSize: '12px' },\n value: { fontSize: '14px', formatter: (v) => `${v}%` },\n total: {\n show: true,\n label: 'Avg',\n formatter: () => `${Math.round(series.reduce((a, b) => a + b, 0) / series.length)}%`,\n },\n },\n },\n },\n };\n return (\n <ReactApexChart\n type=\"radialBar\"\n options={options}\n series={series}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/radialBar';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type GradientRadialProps = ChartSize & {\n value: number;\n label?: string;\n};\n\nexport const GradientRadial = ({\n value,\n label = 'Score',\n height = 280,\n width = '100%',\n}: GradientRadialProps) => {\n const { brand } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'radialBar', fontFamily: 'inherit' },\n colors: [brand],\n fill: {\n type: 'gradient',\n gradient: {\n shade: 'dark',\n type: 'horizontal',\n shadeIntensity: 0.5,\n gradientToColors: ['#10b981'],\n inverseColors: false,\n opacityFrom: 1,\n opacityTo: 1,\n stops: [0, 100],\n },\n },\n plotOptions: {\n radialBar: {\n hollow: { size: '70%' },\n dataLabels: {\n name: { fontSize: '12px', offsetY: -10 },\n value: { fontSize: '32px', fontWeight: 700, formatter: (v) => `${v}%` },\n },\n },\n },\n labels: [label],\n };\n return (\n <ReactApexChart\n type=\"radialBar\"\n options={options}\n series={[value]}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/radialBar';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type SemiCircleGaugeProps = ChartSize & {\n value: number;\n label?: string;\n color?: string;\n};\n\nexport const SemiCircleGauge = ({\n value,\n label = '',\n color,\n height = 200,\n width = '100%',\n}: SemiCircleGaugeProps) => {\n const { brand } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'radialBar', fontFamily: 'inherit', sparkline: { enabled: true } },\n colors: [color ?? brand],\n plotOptions: {\n radialBar: {\n startAngle: -90,\n endAngle: 90,\n track: { background: 'rgba(150,150,150,0.15)', strokeWidth: '100%' },\n dataLabels: {\n name: { offsetY: -10, fontSize: '12px' },\n value: { offsetY: -45, fontSize: '24px', fontWeight: 700, formatter: (v) => `${v}%` },\n },\n },\n },\n labels: [label],\n };\n return (\n <ReactApexChart\n type=\"radialBar\"\n options={options}\n series={[value]}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/radialBar';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type StrokedGaugeProps = ChartSize & {\n value: number;\n label?: string;\n};\n\nexport const StrokedGauge = ({\n value,\n label = '',\n height = 280,\n width = '100%',\n}: StrokedGaugeProps) => {\n const { brand } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'radialBar', fontFamily: 'inherit' },\n colors: [brand],\n stroke: { lineCap: 'round', dashArray: 4 },\n plotOptions: {\n radialBar: {\n hollow: { size: '70%' },\n track: { background: 'rgba(150,150,150,0.15)', strokeWidth: '100%' },\n dataLabels: {\n name: { fontSize: '12px', offsetY: -10 },\n value: { fontSize: '32px', fontWeight: 700, formatter: (v) => `${v}%` },\n },\n },\n },\n labels: [label],\n };\n return (\n <ReactApexChart\n type=\"radialBar\"\n options={options}\n series={[value]}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/donut';\nimport 'apexcharts/features/legend';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type DonutChartProps = ChartSize & {\n series: number[];\n labels: string[];\n /** Whether to show the right-side legend (default: bottom). /\n rightLegend?: boolean;\n};\n\nexport const DonutChart = ({\n series,\n labels,\n rightLegend = false,\n height = 280,\n width = '100%',\n}: DonutChartProps) => {\n const { palette } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'donut', fontFamily: 'inherit' },\n colors: palette,\n labels,\n legend: { position: rightLegend ? 'right' : 'bottom' },\n dataLabels: { enabled: false },\n plotOptions: {\n pie: {\n donut: { size: '68%', labels: { show: true, total: { show: true, label: 'Total' } } },\n },\n },\n };\n return (\n <ReactApexChart type=\"donut\" options={options} series={series} height={height} width={width} />\n );\n};\n\nexport const DonutRightLegend = (props: Omit<DonutChartProps, 'rightLegend'>) => (\n <DonutChart {...props} rightLegend />\n);\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/line';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type SparklineProps = ChartSize & {\n data: number[];\n color?: string;\n variant?: 'line' \| 'area';\n};\n\nexport const Sparkline = ({\n data,\n color,\n variant = 'area',\n height = 60,\n width = '100%',\n}: SparklineProps) => {\n const { brand } = useChartTheme();\n const options: ApexOptions = {\n chart: { sparkline: { enabled: true }, fontFamily: 'inherit', type: variant },\n colors: [color ?? brand],\n stroke: { curve: 'smooth', width: 2 },\n fill:\n variant === 'area'\n ? { type: 'gradient', gradient: { opacityFrom: 0.45, opacityTo: 0.05 } }\n : undefined,\n tooltip: { fixed: { enabled: false }, x: { show: false }, marker: { show: false } },\n };\n return (\n <ReactApexChart\n type={variant}\n options={options}\n series={[{ name: 'value', data }]}\n height={height}\n width={width}\n />\n );\n};\n\nexport type SparklineGroupItem = {\n label: string;\n value: number \| string;\n data: number[];\n color?: string;\n};\n\nexport const SparklineGroup = ({\n items,\n className,\n}: {\n items: SparklineGroupItem[];\n className?: string;\n}) => (\n <div\n className={className}\n style={{\n display: 'grid',\n gap: '1rem',\n gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',\n }}\n >\n {items.map((it) => (\n <div\n key={it.label}\n className=\"rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900\"\n >\n <p className=\"text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400\">\n {it.label}\n </p>\n <p className=\"mt-1 text-2xl font-bold text-gray-900 dark:text-white\">{it.value}</p>\n <Sparkline data={it.data} color={it.color} height={50} />\n </div>\n ))}\n </div>\n);\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/treemap';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type TreemapDatum = { x: string; y: number };\n\nexport type TreemapChartProps = ChartSize & {\n series: { name?: string; data: TreemapDatum[] }[];\n};\n\nexport const TreemapChart = ({ series, height = 320, width = '100%' }: TreemapChartProps) => {\n const { palette } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'treemap', fontFamily: 'inherit', toolbar: { show: false } },\n colors: palette,\n legend: { show: false },\n dataLabels: { enabled: true, style: { fontSize: '12px' } },\n plotOptions: { treemap: { distributed: true, enableShades: false } },\n };\n return (\n <ReactApexChart\n type=\"treemap\"\n options={options}\n series={series}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/bar';\nimport 'apexcharts/features/legend';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type BarChartOrientation = 'vertical' \| 'horizontal';\n\nexport type BarChartProps = ChartSize & {\n series: { name: string; data: number[] }[];\n categories: (string \| number)[];\n /* `vertical` (default) draws bars upward; `horizontal` draws them rightward. /\n orientation?: BarChartOrientation;\n /* Stack multi-series bars instead of grouping them side-by-side. /\n stacked?: boolean;\n /* Override the default Cosmos palette. /\n colors?: string[];\n /* Format the numeric axis labels (and tooltip values). /\n formatValue?: (value: number) => string;\n /* Show the legend (auto-true when 2+ series). /\n showLegend?: boolean;\n /* Tailwind border-radius applied to bar tops. Default 4. */\n borderRadius?: number;\n};\n\nexport const BarChart = ({\n series,\n categories,\n orientation = 'vertical',\n stacked = false,\n colors,\n formatValue,\n showLegend,\n borderRadius = 4,\n height = 320,\n width = '100%',\n}: BarChartProps) => {\n const { grid, axisLabels, palette } = useChartTheme();\n const horizontal = orientation === 'horizontal';\n const legendVisible = showLegend ?? series.length > 1;\n\n const valueFormatter = formatValue ?? ((v: number) => String(v));\n\n const options: ApexOptions = {\n chart: {\n type: 'bar',\n toolbar: { show: false },\n zoom: { enabled: false },\n stacked,\n fontFamily: 'inherit',\n },\n colors: colors ?? palette,\n dataLabels: { enabled: false },\n plotOptions: {\n bar: {\n horizontal,\n borderRadius,\n borderRadiusApplication: 'end',\n columnWidth: '55%',\n },\n },\n grid,\n xaxis: {\n categories,\n labels: {\n ...axisLabels,\n formatter: horizontal ? (val) => valueFormatter(Number(val)) : undefined,\n },\n axisBorder: { show: false },\n axisTicks: { show: false },\n },\n yaxis: {\n labels: {\n ...axisLabels,\n formatter: horizontal ? undefined : (val) => valueFormatter(Number(val)),\n },\n },\n legend: {\n show: legendVisible,\n position: 'top',\n horizontalAlign: 'right',\n labels: { colors: axisLabels.style.colors },\n markers: { size: 5 },\n },\n tooltip: {\n theme: 'dark',\n y: { formatter: (v) => valueFormatter(Number(v)) },\n },\n fill: { opacity: 1 },\n stroke: { show: false },\n };\n\n return (\n <ReactApexChart type=\"bar\" options={options} series={series} height={height} width={width} />\n );\n};\n"]}
1	+ {"version":3,"sources":["../src/theme.ts","../src/escape.ts","../src/LineAreaChart.tsx","../src/RealtimeChart.tsx","../src/RadialBarChart.tsx","../src/GradientRadial.tsx","../src/SemiCircleGauge.tsx","../src/StrokedGauge.tsx","../src/DonutChart.tsx","../src/Sparkline.tsx","../src/TreemapChart.tsx","../src/BarChart.tsx"],"names":["useState","useEffect","jsx","ReactApexChart"],"mappings":"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","file":"index.js","sourcesContent":["import type { ApexOptions } from 'apexcharts';\nimport { useEffect, useState } from 'react';\n\n/** Default brand color (the blue accent). Prefer `useChartTheme().brand`, which follows the accent. /\nexport const COSMOS_BRAND = '#465fff';\nexport const COSMOS_PALETTE = ['#465fff', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];\n\n// Theme classes that enable the dark variant (see @sckyzo/cosmos-theme).\nconst DARK_THEME_CLASSES = ['dark', 'deep-blue'];\n\nconst detectDark = (): boolean => {\n if (typeof document === 'undefined') return false;\n const { classList } = document.documentElement;\n return DARK_THEME_CLASSES.some((c) => classList.contains(c));\n};\n\n/* A CSS custom property on `<html>`, or `fallback` when it's unset or during SSR. /\nconst readCssVar = (name: string, fallback: string): string => {\n if (typeof document === 'undefined') return fallback;\n return getComputedStyle(document.documentElement).getPropertyValue(name).trim() \|\| fallback;\n};\n\nconst readChartColors = () => {\n const dark = detectDark();\n return {\n dark,\n brand: readCssVar('--color-brand-500', COSMOS_BRAND),\n grid: dark\n ? readCssVar('--color-gray-800', '#1f2937')\n : readCssVar('--color-gray-200', '#e5e7eb'),\n axis: dark\n ? readCssVar('--color-gray-400', '#9ca3af')\n : readCssVar('--color-gray-500', '#6b7280'),\n };\n};\n\n/\n Returns `read()` and calls it again whenever `<html>` changes theme or\n * accent (the Cosmos convention: a theme class and `data-accent`). `read`\n * must be stable.\n /\nconst useHtmlAppearance = <T>(read: () => T): T => {\n const [value, setValue] = useState(read);\n\n useEffect(() => {\n if (typeof document === 'undefined') return;\n const observer = new MutationObserver(() => setValue(read));\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['class', 'data-accent'],\n });\n return () => observer.disconnect();\n }, [read]);\n\n return value;\n};\n\n/\n Subscribes to dark-mode toggles on `<html>` (the Cosmos convention).\n * Returns the current `isDark` value.\n /\nexport const useDarkMode = (): boolean => useHtmlAppearance(detectDark);\n\n/\n Returns ApexCharts grid + axis options and colors matching the Cosmos\n * design tokens for the current theme and accent.\n /\nexport const useChartTheme = () => {\n const { dark, brand, grid: gridColor, axis } = useHtmlAppearance(readChartColors);\n const grid: ApexOptions['grid'] = {\n borderColor: gridColor,\n strokeDashArray: 4,\n };\n const axisLabels = {\n style: {\n colors: axis,\n fontSize: '11px',\n fontFamily: 'inherit',\n },\n };\n return { dark, grid, axisLabels, brand, palette: [brand, ...COSMOS_PALETTE.slice(1)] };\n};\n","const ENTITIES: Record<string, string> = {\n '&': '&',\n '<': '<',\n '>': '>',\n '\"': '"',\n \"'\": ''',\n};\n\n/\n Escapes text for the parts of a chart ApexCharts writes with innerHTML:\n * legend entries, tooltip titles, series names and values. Series names,\n * categories and labels are data and must never be parsed as markup. Axis\n * labels are SVG text and must stay unescaped.\n /\nexport const escapeHtml = (value: unknown): string =>\n String(value).replace(/[&<>\"']/g, (char) => ENTITIES[char]);\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/line';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { escapeHtml } from './escape';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type LineAreaChartProps = ChartSize & {\n series: { name: string; data: number[] }[];\n categories: (string \| number)[];\n};\n\nexport const LineAreaChart = ({\n series,\n categories,\n height = 280,\n width = '100%',\n}: LineAreaChartProps) => {\n const { grid, axisLabels, palette } = useChartTheme();\n const options: ApexOptions = {\n chart: {\n type: 'area',\n toolbar: { show: false },\n zoom: { enabled: false },\n fontFamily: 'inherit',\n },\n colors: palette,\n dataLabels: { enabled: false },\n stroke: { curve: 'smooth', width: 2 },\n fill: { type: 'gradient', gradient: { opacityFrom: 0.45, opacityTo: 0.05 } },\n grid,\n // One labels object per axis: ApexCharts writes the x-axis category\n // formatter onto it, which blanked the y labels on the next update.\n xaxis: {\n categories,\n labels: { ...axisLabels },\n axisBorder: { show: false },\n axisTicks: { show: false },\n },\n yaxis: { labels: { ...axisLabels } },\n legend: { show: false },\n // The tooltip is HTML: escape the category and the series name. ApexCharts\n // hands the x formatter the point's position on the axis (1, 2, …), not\n // its category, so read the category back by index.\n tooltip: {\n theme: 'dark',\n x: {\n formatter: (v, opts) =>\n escapeHtml(opts === undefined ? v : (categories[opts.dataPointIndex] ?? v)),\n },\n y: { title: { formatter: (name) => `${escapeHtml(name)}: ` } },\n },\n };\n return (\n <ReactApexChart type=\"area\" options={options} series={series} height={height} width={width} />\n );\n};\n","import { useEffect, useState } from 'react';\nimport type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/line';\nimport 'apexcharts/features/annotations';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type RealtimeChartProps = ChartSize & {\n /* Sample generator — defaults to a noisy walk between 30 and 80. /\n generator?: () => number;\n /* Interval in ms — defaults to 2000. /\n intervalMs?: number;\n windowSize?: number;\n warnThreshold?: number;\n critThreshold?: number;\n};\n\nconst defaultGenerator = (() => {\n let last = 50;\n return () => {\n last += (Math.random() - 0.5) 8;\n last = Math.max(20, Math.min(95, last));\n return Math.round(last);\n };\n})();\n\nexport const RealtimeChart = ({\n generator = defaultGenerator,\n intervalMs = 2000,\n windowSize = 30,\n warnThreshold = 70,\n critThreshold = 85,\n height = 240,\n width = '100%',\n}: RealtimeChartProps) => {\n const { grid, axisLabels, brand } = useChartTheme();\n const [series, setSeries] = useState(() => Array.from({ length: windowSize }, () => generator()));\n\n useEffect(() => {\n const id = setInterval(() => {\n setSeries((current) => [...current.slice(1), generator()]);\n }, intervalMs);\n return () => clearInterval(id);\n }, [generator, intervalMs]);\n\n const options: ApexOptions = {\n chart: {\n type: 'line',\n animations: { enabled: true, dynamicAnimation: { enabled: true, speed: 800 } },\n toolbar: { show: false },\n zoom: { enabled: false },\n fontFamily: 'inherit',\n },\n colors: [brand],\n stroke: { curve: 'smooth', width: 2 },\n dataLabels: { enabled: false },\n grid,\n xaxis: {\n type: 'numeric',\n labels: { show: false },\n axisBorder: { show: false },\n axisTicks: { show: false },\n },\n yaxis: { min: 0, max: 100, labels: axisLabels },\n annotations: {\n yaxis: [\n {\n y: warnThreshold,\n borderColor: '#f59e0b',\n label: { text: 'WARN', style: { color: '#fff', background: '#f59e0b' } },\n },\n {\n y: critThreshold,\n borderColor: '#ef4444',\n label: { text: 'CRIT', style: { color: '#fff', background: '#ef4444' } },\n },\n ],\n },\n tooltip: { theme: 'dark' },\n };\n\n return (\n <ReactApexChart\n type=\"line\"\n options={options}\n series={[{ name: 'value', data: series }]}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/radialBar';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type RadialBarChartProps = ChartSize & {\n series: number[];\n labels: string[];\n};\n\nexport const RadialBarChart = ({\n series,\n labels,\n height = 320,\n width = '100%',\n}: RadialBarChartProps) => {\n const { palette } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'radialBar', fontFamily: 'inherit' },\n colors: palette,\n labels,\n plotOptions: {\n radialBar: {\n track: { background: 'rgba(150,150,150,0.15)' },\n dataLabels: {\n name: { fontSize: '12px' },\n value: { fontSize: '14px', formatter: (v) => `${v}%` },\n total: {\n show: true,\n label: 'Avg',\n formatter: () => `${Math.round(series.reduce((a, b) => a + b, 0) / series.length)}%`,\n },\n },\n },\n },\n };\n return (\n <ReactApexChart\n type=\"radialBar\"\n options={options}\n series={series}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/radialBar';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type GradientRadialProps = ChartSize & {\n value: number;\n label?: string;\n};\n\nexport const GradientRadial = ({\n value,\n label = 'Score',\n height = 280,\n width = '100%',\n}: GradientRadialProps) => {\n const { brand } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'radialBar', fontFamily: 'inherit' },\n colors: [brand],\n fill: {\n type: 'gradient',\n gradient: {\n shade: 'dark',\n type: 'horizontal',\n shadeIntensity: 0.5,\n gradientToColors: ['#10b981'],\n inverseColors: false,\n opacityFrom: 1,\n opacityTo: 1,\n stops: [0, 100],\n },\n },\n plotOptions: {\n radialBar: {\n hollow: { size: '70%' },\n dataLabels: {\n name: { fontSize: '12px', offsetY: -10 },\n value: { fontSize: '32px', fontWeight: 700, formatter: (v) => `${v}%` },\n },\n },\n },\n labels: [label],\n };\n return (\n <ReactApexChart\n type=\"radialBar\"\n options={options}\n series={[value]}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/radialBar';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type SemiCircleGaugeProps = ChartSize & {\n value: number;\n label?: string;\n color?: string;\n};\n\nexport const SemiCircleGauge = ({\n value,\n label = '',\n color,\n height = 200,\n width = '100%',\n}: SemiCircleGaugeProps) => {\n const { brand } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'radialBar', fontFamily: 'inherit', sparkline: { enabled: true } },\n colors: [color ?? brand],\n plotOptions: {\n radialBar: {\n startAngle: -90,\n endAngle: 90,\n track: { background: 'rgba(150,150,150,0.15)', strokeWidth: '100%' },\n dataLabels: {\n name: { offsetY: -10, fontSize: '12px' },\n value: { offsetY: -45, fontSize: '24px', fontWeight: 700, formatter: (v) => `${v}%` },\n },\n },\n },\n labels: [label],\n };\n return (\n <ReactApexChart\n type=\"radialBar\"\n options={options}\n series={[value]}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/radialBar';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type StrokedGaugeProps = ChartSize & {\n value: number;\n label?: string;\n};\n\nexport const StrokedGauge = ({\n value,\n label = '',\n height = 280,\n width = '100%',\n}: StrokedGaugeProps) => {\n const { brand } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'radialBar', fontFamily: 'inherit' },\n colors: [brand],\n stroke: { lineCap: 'round', dashArray: 4 },\n plotOptions: {\n radialBar: {\n hollow: { size: '70%' },\n track: { background: 'rgba(150,150,150,0.15)', strokeWidth: '100%' },\n dataLabels: {\n name: { fontSize: '12px', offsetY: -10 },\n value: { fontSize: '32px', fontWeight: 700, formatter: (v) => `${v}%` },\n },\n },\n },\n labels: [label],\n };\n return (\n <ReactApexChart\n type=\"radialBar\"\n options={options}\n series={[value]}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/donut';\nimport 'apexcharts/features/legend';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { escapeHtml } from './escape';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type DonutChartProps = ChartSize & {\n series: number[];\n labels: string[];\n /** Whether to show the right-side legend (default: bottom). /\n rightLegend?: boolean;\n};\n\nexport const DonutChart = ({\n series,\n labels,\n rightLegend = false,\n height = 280,\n width = '100%',\n}: DonutChartProps) => {\n const { palette } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'donut', fontFamily: 'inherit' },\n colors: palette,\n labels,\n // The legend and the tooltip are HTML: escape the labels.\n legend: { position: rightLegend ? 'right' : 'bottom', formatter: (name) => escapeHtml(name) },\n tooltip: { y: { title: { formatter: (name) => `${escapeHtml(name)}: ` } } },\n dataLabels: { enabled: false },\n plotOptions: {\n pie: {\n donut: { size: '68%', labels: { show: true, total: { show: true, label: 'Total' } } },\n },\n },\n };\n return (\n <ReactApexChart type=\"donut\" options={options} series={series} height={height} width={width} />\n );\n};\n\nexport const DonutRightLegend = (props: Omit<DonutChartProps, 'rightLegend'>) => (\n <DonutChart {...props} rightLegend />\n);\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/line';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type SparklineProps = ChartSize & {\n data: number[];\n color?: string;\n variant?: 'line' \| 'area';\n};\n\nexport const Sparkline = ({\n data,\n color,\n variant = 'area',\n height = 60,\n width = '100%',\n}: SparklineProps) => {\n const { brand } = useChartTheme();\n const options: ApexOptions = {\n chart: { sparkline: { enabled: true }, fontFamily: 'inherit', type: variant },\n colors: [color ?? brand],\n stroke: { curve: 'smooth', width: 2 },\n fill:\n variant === 'area'\n ? { type: 'gradient', gradient: { opacityFrom: 0.45, opacityTo: 0.05 } }\n : undefined,\n tooltip: { fixed: { enabled: false }, x: { show: false }, marker: { show: false } },\n };\n return (\n <ReactApexChart\n type={variant}\n options={options}\n series={[{ name: 'value', data }]}\n height={height}\n width={width}\n />\n );\n};\n\nexport type SparklineGroupItem = {\n label: string;\n value: number \| string;\n data: number[];\n color?: string;\n};\n\nexport const SparklineGroup = ({\n items,\n className,\n}: {\n items: SparklineGroupItem[];\n className?: string;\n}) => (\n <div\n className={className}\n style={{\n display: 'grid',\n gap: '1rem',\n gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',\n }}\n >\n {items.map((it) => (\n <div\n key={it.label}\n className=\"rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900\"\n >\n <p className=\"text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400\">\n {it.label}\n </p>\n <p className=\"mt-1 text-2xl font-bold text-gray-900 dark:text-white\">{it.value}</p>\n <Sparkline data={it.data} color={it.color} height={50} />\n </div>\n ))}\n </div>\n);\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/treemap';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type TreemapDatum = { x: string; y: number };\n\nexport type TreemapChartProps = ChartSize & {\n series: { name?: string; data: TreemapDatum[] }[];\n};\n\nexport const TreemapChart = ({ series, height = 320, width = '100%' }: TreemapChartProps) => {\n const { palette } = useChartTheme();\n const options: ApexOptions = {\n chart: { type: 'treemap', fontFamily: 'inherit', toolbar: { show: false } },\n colors: palette,\n legend: { show: false },\n dataLabels: { enabled: true, style: { fontSize: '12px' } },\n plotOptions: { treemap: { distributed: true, enableShades: false } },\n };\n return (\n <ReactApexChart\n type=\"treemap\"\n options={options}\n series={series}\n height={height}\n width={width}\n />\n );\n};\n","import type { ApexOptions } from 'apexcharts';\nimport 'apexcharts/bar';\nimport 'apexcharts/features/legend';\nimport ReactApexChart from 'react-apexcharts/core';\nimport { escapeHtml } from './escape';\nimport { useChartTheme } from './theme';\nimport type { ChartSize } from './types';\n\nexport type BarChartOrientation = 'vertical' \| 'horizontal';\n\nexport type BarChartProps = ChartSize & {\n series: { name: string; data: number[] }[];\n categories: (string \| number)[];\n /* `vertical` (default) draws bars upward; `horizontal` draws them rightward. /\n orientation?: BarChartOrientation;\n /* Stack multi-series bars instead of grouping them side-by-side. /\n stacked?: boolean;\n /* Override the default Cosmos palette. /\n colors?: string[];\n /* Format the numeric axis labels (and tooltip values). /\n formatValue?: (value: number) => string;\n /* Show the legend (auto-true when 2+ series). /\n showLegend?: boolean;\n /* Tailwind border-radius applied to bar tops. Default 4. */\n borderRadius?: number;\n};\n\nexport const BarChart = ({\n series,\n categories,\n orientation = 'vertical',\n stacked = false,\n colors,\n formatValue,\n showLegend,\n borderRadius = 4,\n height = 320,\n width = '100%',\n}: BarChartProps) => {\n const { grid, axisLabels, palette } = useChartTheme();\n const horizontal = orientation === 'horizontal';\n const legendVisible = showLegend ?? series.length > 1;\n\n const valueFormatter = formatValue ?? ((v: number) => String(v));\n\n const options: ApexOptions = {\n chart: {\n type: 'bar',\n toolbar: { show: false },\n zoom: { enabled: false },\n stacked,\n fontFamily: 'inherit',\n },\n colors: colors ?? palette,\n dataLabels: { enabled: false },\n plotOptions: {\n bar: {\n horizontal,\n borderRadius,\n borderRadiusApplication: 'end',\n columnWidth: '55%',\n },\n },\n grid,\n xaxis: {\n categories,\n labels: {\n ...axisLabels,\n formatter: horizontal ? (val) => valueFormatter(Number(val)) : undefined,\n },\n axisBorder: { show: false },\n axisTicks: { show: false },\n },\n yaxis: {\n labels: {\n ...axisLabels,\n formatter: horizontal ? undefined : (val) => valueFormatter(Number(val)),\n },\n },\n legend: {\n show: legendVisible,\n position: 'top',\n horizontalAlign: 'right',\n labels: { colors: axisLabels.style.colors },\n markers: { size: 5 },\n formatter: (name) => escapeHtml(name),\n },\n // Tooltips and the legend are HTML: escape names, categories and values.\n tooltip: {\n theme: 'dark',\n x: { formatter: (v) => escapeHtml(v) },\n y: {\n formatter: (v) => escapeHtml(valueFormatter(Number(v))),\n title: { formatter: (name) => `${escapeHtml(name)}: ` },\n },\n },\n fill: { opacity: 1 },\n stroke: { show: false },\n };\n\n return (\n <ReactApexChart type=\"bar\" options={options} series={series} height={height} width={width} />\n );\n};\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@sckyzo/cosmos-charts",
-  "version": "0.0.2",
+  "version": "0.1.1",
   "description": "React chart components for the Cosmos design system — themeable ApexCharts 5 wrappers (bar, line, area, donut, radial gauges, sparkline, treemap, realtime) with light/dark support.",
   "license": "MIT",
   "author": "SckyzO",
@@ -42,20 +42,19 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "apexcharts": "^5.12.0",
-    "clsx": "^2.1.1",
-    "react-apexcharts": "^2.1.0"
+    "apexcharts": "^8.3.1",
+    "react-apexcharts": "^2.1.1"
   },
   "devDependencies": {
-    "@storybook/react-vite": "^10.4.0",
-    "@types/react": "^19.2.15",
-    "@types/react-dom": "^19.2.3",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
-    "storybook": "^10.4.0",
+    "@storybook/react-vite": "^10.5.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "storybook": "^10.5.5",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.7"
+    "vitest": "^4.1.11"
   },
   "publishConfig": {
     "access": "public"