@sckyzo/cosmos-charts 0.0.1

package/dist/index.js

@@ -0,0 +1,463 @@
+import { useState, useEffect } from 'react';
+import 'apexcharts/line';
+import ReactApexChart from 'react-apexcharts/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'apexcharts/features/annotations';
+import 'apexcharts/radialBar';
+import 'apexcharts/donut';
+import 'apexcharts/features/legend';
+import 'apexcharts/treemap';
+import 'apexcharts/bar';
+
+var COSMOS_BRAND = "#465fff";
+var COSMOS_PALETTE = ["#465fff", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"];
+var detectDark = () => {
+  if (typeof document === "undefined") return false;
+  return document.documentElement.classList.contains("dark");
+};
+var useDarkMode = () => {
+  const [dark, setDark] = useState(detectDark);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const observer = new MutationObserver(() => setDark(detectDark()));
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return dark;
+};
+var useChartTheme = () => {
+  const dark = useDarkMode();
+  const grid = {
+    borderColor: dark ? "#1f2937" : "#e5e7eb",
+    strokeDashArray: 4
+  };
+  const axisLabels = {
+    style: {
+      colors: dark ? "#9ca3af" : "#6b7280",
+      fontSize: "11px",
+      fontFamily: "inherit"
+    }
+  };
+  return { dark, grid, axisLabels, brand: COSMOS_BRAND, palette: COSMOS_PALETTE };
+};
+var LineAreaChart = ({
+  series,
+  categories,
+  height = 280,
+  width = "100%"
+}) => {
+  const { grid, axisLabels, palette } = useChartTheme();
+  const options = {
+    chart: {
+      type: "area",
+      toolbar: { show: false },
+      zoom: { enabled: false },
+      fontFamily: "inherit"
+    },
+    colors: palette,
+    dataLabels: { enabled: false },
+    stroke: { curve: "smooth", width: 2 },
+    fill: { type: "gradient", gradient: { opacityFrom: 0.45, opacityTo: 0.05 } },
+    grid,
+    xaxis: {
+      categories,
+      labels: axisLabels,
+      axisBorder: { show: false },
+      axisTicks: { show: false }
+    },
+    yaxis: { labels: axisLabels },
+    legend: { show: false },
+    tooltip: { theme: "dark" }
+  };
+  return /* @__PURE__ */ jsx(ReactApexChart, { type: "area", options, series, height, width });
+};
+var defaultGenerator = /* @__PURE__ */ (() => {
+  let last = 50;
+  return () => {
+    last += (Math.random() - 0.5) * 8;
+    last = Math.max(20, Math.min(95, last));
+    return Math.round(last);
+  };
+})();
+var RealtimeChart = ({
+  generator = defaultGenerator,
+  intervalMs = 2e3,
+  windowSize = 30,
+  warnThreshold = 70,
+  critThreshold = 85,
+  height = 240,
+  width = "100%"
+}) => {
+  const { grid, axisLabels, brand } = useChartTheme();
+  const [series, setSeries] = useState(() => Array.from({ length: windowSize }, () => generator()));
+  useEffect(() => {
+    const id = setInterval(() => {
+      setSeries((current) => [...current.slice(1), generator()]);
+    }, intervalMs);
+    return () => clearInterval(id);
+  }, [generator, intervalMs]);
+  const options = {
+    chart: {
+      type: "line",
+      animations: { enabled: true, dynamicAnimation: { enabled: true, speed: 800 } },
+      toolbar: { show: false },
+      zoom: { enabled: false },
+      fontFamily: "inherit"
+    },
+    colors: [brand],
+    stroke: { curve: "smooth", width: 2 },
+    dataLabels: { enabled: false },
+    grid,
+    xaxis: {
+      type: "numeric",
+      labels: { show: false },
+      axisBorder: { show: false },
+      axisTicks: { show: false }
+    },
+    yaxis: { min: 0, max: 100, labels: axisLabels },
+    annotations: {
+      yaxis: [
+        {
+          y: warnThreshold,
+          borderColor: "#f59e0b",
+          label: { text: "WARN", style: { color: "#fff", background: "#f59e0b" } }
+        },
+        {
+          y: critThreshold,
+          borderColor: "#ef4444",
+          label: { text: "CRIT", style: { color: "#fff", background: "#ef4444" } }
+        }
+      ]
+    },
+    tooltip: { theme: "dark" }
+  };
+  return /* @__PURE__ */ jsx(
+    ReactApexChart,
+    {
+      type: "line",
+      options,
+      series: [{ name: "value", data: series }],
+      height,
+      width
+    }
+  );
+};
+var RadialBarChart = ({
+  series,
+  labels,
+  height = 320,
+  width = "100%"
+}) => {
+  const { palette } = useChartTheme();
+  const options = {
+    chart: { type: "radialBar", fontFamily: "inherit" },
+    colors: palette,
+    labels,
+    plotOptions: {
+      radialBar: {
+        track: { background: "rgba(150,150,150,0.15)" },
+        dataLabels: {
+          name: { fontSize: "12px" },
+          value: { fontSize: "14px", formatter: (v) => `${v}%` },
+          total: {
+            show: true,
+            label: "Avg",
+            formatter: () => `${Math.round(series.reduce((a, b) => a + b, 0) / series.length)}%`
+          }
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ReactApexChart,
+    {
+      type: "radialBar",
+      options,
+      series,
+      height,
+      width
+    }
+  );
+};
+var GradientRadial = ({
+  value,
+  label = "Score",
+  height = 280,
+  width = "100%"
+}) => {
+  const { brand } = useChartTheme();
+  const options = {
+    chart: { type: "radialBar", fontFamily: "inherit" },
+    colors: [brand],
+    fill: {
+      type: "gradient",
+      gradient: {
+        shade: "dark",
+        type: "horizontal",
+        shadeIntensity: 0.5,
+        gradientToColors: ["#10b981"],
+        inverseColors: false,
+        opacityFrom: 1,
+        opacityTo: 1,
+        stops: [0, 100]
+      }
+    },
+    plotOptions: {
+      radialBar: {
+        hollow: { size: "70%" },
+        dataLabels: {
+          name: { fontSize: "12px", offsetY: -10 },
+          value: { fontSize: "32px", fontWeight: 700, formatter: (v) => `${v}%` }
+        }
+      }
+    },
+    labels: [label]
+  };
+  return /* @__PURE__ */ jsx(
+    ReactApexChart,
+    {
+      type: "radialBar",
+      options,
+      series: [value],
+      height,
+      width
+    }
+  );
+};
+var SemiCircleGauge = ({
+  value,
+  label = "",
+  color,
+  height = 200,
+  width = "100%"
+}) => {
+  const { brand } = useChartTheme();
+  const options = {
+    chart: { type: "radialBar", fontFamily: "inherit", sparkline: { enabled: true } },
+    colors: [color ?? brand],
+    plotOptions: {
+      radialBar: {
+        startAngle: -90,
+        endAngle: 90,
+        track: { background: "rgba(150,150,150,0.15)", strokeWidth: "100%" },
+        dataLabels: {
+          name: { offsetY: -10, fontSize: "12px" },
+          value: { offsetY: -45, fontSize: "24px", fontWeight: 700, formatter: (v) => `${v}%` }
+        }
+      }
+    },
+    labels: [label]
+  };
+  return /* @__PURE__ */ jsx(
+    ReactApexChart,
+    {
+      type: "radialBar",
+      options,
+      series: [value],
+      height,
+      width
+    }
+  );
+};
+var StrokedGauge = ({
+  value,
+  label = "",
+  height = 280,
+  width = "100%"
+}) => {
+  const { brand } = useChartTheme();
+  const options = {
+    chart: { type: "radialBar", fontFamily: "inherit" },
+    colors: [brand],
+    stroke: { lineCap: "round", dashArray: 4 },
+    plotOptions: {
+      radialBar: {
+        hollow: { size: "70%" },
+        track: { background: "rgba(150,150,150,0.15)", strokeWidth: "100%" },
+        dataLabels: {
+          name: { fontSize: "12px", offsetY: -10 },
+          value: { fontSize: "32px", fontWeight: 700, formatter: (v) => `${v}%` }
+        }
+      }
+    },
+    labels: [label]
+  };
+  return /* @__PURE__ */ jsx(
+    ReactApexChart,
+    {
+      type: "radialBar",
+      options,
+      series: [value],
+      height,
+      width
+    }
+  );
+};
+var DonutChart = ({
+  series,
+  labels,
+  rightLegend = false,
+  height = 280,
+  width = "100%"
+}) => {
+  const { palette } = useChartTheme();
+  const options = {
+    chart: { type: "donut", fontFamily: "inherit" },
+    colors: palette,
+    labels,
+    legend: { position: rightLegend ? "right" : "bottom" },
+    dataLabels: { enabled: false },
+    plotOptions: {
+      pie: {
+        donut: { size: "68%", labels: { show: true, total: { show: true, label: "Total" } } }
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(ReactApexChart, { type: "donut", options, series, height, width });
+};
+var DonutRightLegend = (props) => /* @__PURE__ */ jsx(DonutChart, { ...props, rightLegend: true });
+var Sparkline = ({
+  data,
+  color,
+  variant = "area",
+  height = 60,
+  width = "100%"
+}) => {
+  const { brand } = useChartTheme();
+  const options = {
+    chart: { sparkline: { enabled: true }, fontFamily: "inherit", type: variant },
+    colors: [color ?? brand],
+    stroke: { curve: "smooth", width: 2 },
+    fill: variant === "area" ? { type: "gradient", gradient: { opacityFrom: 0.45, opacityTo: 0.05 } } : void 0,
+    tooltip: { fixed: { enabled: false }, x: { show: false }, marker: { show: false } }
+  };
+  return /* @__PURE__ */ jsx(
+    ReactApexChart,
+    {
+      type: variant,
+      options,
+      series: [{ name: "value", data }],
+      height,
+      width
+    }
+  );
+};
+var SparklineGroup = ({
+  items,
+  className
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className,
+    style: {
+      display: "grid",
+      gap: "1rem",
+      gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))"
+    },
+    children: items.map((it) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900",
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium tracking-wider text-gray-500 uppercase dark:text-gray-400", children: it.label }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-2xl font-bold text-gray-900 dark:text-white", children: it.value }),
+          /* @__PURE__ */ jsx(Sparkline, { data: it.data, color: it.color, height: 50 })
+        ]
+      },
+      it.label
+    ))
+  }
+);
+var TreemapChart = ({ series, height = 320, width = "100%" }) => {
+  const { palette } = useChartTheme();
+  const options = {
+    chart: { type: "treemap", fontFamily: "inherit", toolbar: { show: false } },
+    colors: palette,
+    legend: { show: false },
+    dataLabels: { enabled: true, style: { fontSize: "12px" } },
+    plotOptions: { treemap: { distributed: true, enableShades: false } }
+  };
+  return /* @__PURE__ */ jsx(
+    ReactApexChart,
+    {
+      type: "treemap",
+      options,
+      series,
+      height,
+      width
+    }
+  );
+};
+var BarChart = ({
+  series,
+  categories,
+  orientation = "vertical",
+  stacked = false,
+  colors,
+  formatValue,
+  showLegend,
+  borderRadius = 4,
+  height = 320,
+  width = "100%"
+}) => {
+  const { grid, axisLabels, palette } = useChartTheme();
+  const horizontal = orientation === "horizontal";
+  const legendVisible = showLegend ?? series.length > 1;
+  const valueFormatter = formatValue ?? ((v) => String(v));
+  const options = {
+    chart: {
+      type: "bar",
+      toolbar: { show: false },
+      zoom: { enabled: false },
+      stacked,
+      fontFamily: "inherit"
+    },
+    colors: colors ?? palette,
+    dataLabels: { enabled: false },
+    plotOptions: {
+      bar: {
+        horizontal,
+        borderRadius,
+        borderRadiusApplication: "end",
+        columnWidth: "55%"
+      }
+    },
+    grid,
+    xaxis: {
+      categories,
+      labels: {
+        ...axisLabels,
+        formatter: horizontal ? (val) => valueFormatter(Number(val)) : void 0
+      },
+      axisBorder: { show: false },
+      axisTicks: { show: false }
+    },
+    yaxis: {
+      labels: {
+        ...axisLabels,
+        formatter: horizontal ? void 0 : (val) => valueFormatter(Number(val))
+      }
+    },
+    legend: {
+      show: legendVisible,
+      position: "top",
+      horizontalAlign: "right",
+      labels: { colors: axisLabels.style.colors },
+      markers: { size: 5 }
+    },
+    tooltip: {
+      theme: "dark",
+      y: { formatter: (v) => valueFormatter(Number(v)) }
+    },
+    fill: { opacity: 1 },
+    stroke: { show: false }
+  };
+  return /* @__PURE__ */ jsx(ReactApexChart, { type: "bar", options, series, height, width });
+};
+
+export { BarChart, COSMOS_BRAND, COSMOS_PALETTE, DonutChart, DonutRightLegend, GradientRadial, LineAreaChart, RadialBarChart, RealtimeChart, SemiCircleGauge, Sparkline, SparklineGroup, StrokedGauge, TreemapChart, useChartTheme, useDarkMode };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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"]}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@sckyzo/cosmos-charts",
+  "version": "0.0.1",
+  "description": "Cosmos charts — opinionated ApexCharts wrappers themed for the Cosmos design system",
+  "license": "MIT",
+  "author": "SckyzO",
+  "homepage": "https://github.com/SckyzO/cosmos/tree/main/packages/charts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SckyzO/cosmos.git",
+    "directory": "packages/charts"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "apexcharts": "^5.12.0",
+    "clsx": "^2.1.1",
+    "react-apexcharts": "^2.1.0"
+  },
+  "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",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.7"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "design-system",
+    "react",
+    "react-19",
+    "charts",
+    "apexcharts",
+    "cosmos"
+  ],
+  "scripts": {
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "typecheck": "tsc --noEmit",
+    "test": "echo 'Stories tested via @cosmos/storybook addon-vitest (apps/storybook).'",
+    "build": "tsup",
+    "dev": "tsup --watch"
+  }
+}