@sckyzo/cosmos-charts 0.1.1 → 0.3.0

package/dist/theme.cjs

@@ -0,0 +1,88 @@
+"use client";
+'use strict';
+
+// src/palette.ts
+var CATEGORICAL = [
+  "#06b6d4",
+  // cyan
+  "#8b5cf6",
+  // violet
+  "#ec4899",
+  // pink
+  "#64748b",
+  // slate
+  "#f97316",
+  // orange
+  "#14b8a6",
+  // teal
+  "#84cc16"
+  // lime
+];
+var RESERVES = [
+  "#3b82f6",
+  // blue
+  "#d946ef"
+  // fuchsia
+];
+var PALETTE_SIZE = 8;
+var HUE_DISTANCE = 24;
+var NEUTRAL_SATURATION = 0.2;
+var parseColor = (color) => {
+  const hex = /^#([0-9a-f]{6})$/i.exec(color.trim())?.[1];
+  if (hex)
+    return [0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16));
+  const rgb = /^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/i.exec(color.trim());
+  return rgb ? [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])] : void 0;
+};
+var hueAndSaturation = ([r, g, b]) => {
+  const [rn, gn, bn] = [r, g, b].map((c) => c / 255);
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const delta = max - min;
+  const lightness = (max + min) / 2;
+  const saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
+  let hue = 0;
+  if (delta !== 0) {
+    if (max === rn) hue = (gn - bn) / delta % 6;
+    else if (max === gn) hue = (bn - rn) / delta + 2;
+    else hue = (rn - gn) / delta + 4;
+  }
+  return { hue: (hue * 60 + 360) % 360, saturation };
+};
+var looksAlike = (a, b) => {
+  const [ca, cb] = [parseColor(a), parseColor(b)];
+  if (!ca || !cb) return false;
+  const [x, y] = [hueAndSaturation(ca), hueAndSaturation(cb)];
+  const neutralA = x.saturation < NEUTRAL_SATURATION;
+  const neutralB = y.saturation < NEUTRAL_SATURATION;
+  if (neutralA || neutralB) return neutralA && neutralB;
+  const distance = Math.abs(x.hue - y.hue);
+  return Math.min(distance, 360 - distance) < HUE_DISTANCE;
+};
+var categoricalPalette = (accent) => {
+  const candidates = [...CATEGORICAL, ...RESERVES];
+  const others = parseColor(accent) ? candidates.filter((color) => !looksAlike(accent, color)) : CATEGORICAL;
+  return [accent, ...others].slice(0, PALETTE_SIZE);
+};
+
+// src/theme.ts
+var COSMOS_BRAND = "#465fff";
+var COSMOS_PALETTE = categoricalPalette(COSMOS_BRAND);
+var relativeLuminance = (hex) => {
+  const [r, g, b] = [1, 3, 5].map((i) => {
+    const channel = parseInt(hex.slice(i, i + 2), 16) / 255;
+    return channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+var readableOn = (background) => {
+  if (!/^#[0-9a-f]{6}$/i.test(background)) return "#ffffff";
+  const luminance = relativeLuminance(background);
+  return 1.05 / (luminance + 0.05) >= (luminance + 0.05) / 0.05 ? "#ffffff" : "#000000";
+};
+
+exports.COSMOS_BRAND = COSMOS_BRAND;
+exports.COSMOS_PALETTE = COSMOS_PALETTE;
+exports.readableOn = readableOn;
+//# sourceMappingURL=theme.cjs.map
+//# sourceMappingURL=theme.cjs.map

package/dist/theme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/palette.ts","../src/theme.ts"],"names":[],"mappings":"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","file":"theme.cjs","sourcesContent":["// Categorical hues the default palette draws from, in the order a legend reads\n// them, then reserves. None of the first four reads as a status (green, amber,\n// red); lime, orange and teal sit near those hues and come after.\nexport const CATEGORICAL = [\n  '#06b6d4', // cyan\n  '#8b5cf6', // violet\n  '#ec4899', // pink\n  '#64748b', // slate\n  '#f97316', // orange\n  '#14b8a6', // teal\n  '#84cc16', // lime\n];\n\n// Taken in place of the candidates that collide with the accent.\nconst RESERVES = [\n  '#3b82f6', // blue\n  '#d946ef', // fuchsia\n];\n\n/** Series colors in a palette: the accent and seven others. */\nexport const PALETTE_SIZE = 8;\n\n// Two saturated colors closer than this many degrees of hue look alike: the\n// blue accent (231°) keeps violet (258°), the cyan accent (191°) loses teal\n// (173°). Below this saturation (HSL) a color is a gray: two grays look alike\n// whatever their hue (slate and the graphite accent).\nconst HUE_DISTANCE = 24;\nconst NEUTRAL_SATURATION = 0.2;\n\n/** `[r, g, b]` (0–255) of a `#rrggbb` or `rgb(r, g, b)` color, or `undefined`. */\nexport const parseColor = (color: string): [number, number, number] | undefined => {\n  const hex = /^#([0-9a-f]{6})$/i.exec(color.trim())?.[1];\n  if (hex)\n    return [0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16)) as [number, number, number];\n  const rgb = /^rgba?\\(\\s*(\\d+)[\\s,]+(\\d+)[\\s,]+(\\d+)/i.exec(color.trim());\n  return rgb ? [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])] : undefined;\n};\n\n/** Hue in degrees and HSL saturation (0–1) of an `[r, g, b]` color. */\nexport const hueAndSaturation = ([r, g, b]: [number, number, number]) => {\n  const [rn, gn, bn] = [r, g, b].map((c) => c / 255);\n  const max = Math.max(rn, gn, bn);\n  const min = Math.min(rn, gn, bn);\n  const delta = max - min;\n  const lightness = (max + min) / 2;\n  const saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1));\n  let hue = 0;\n  if (delta !== 0) {\n    if (max === rn) hue = ((gn - bn) / delta) % 6;\n    else if (max === gn) hue = (bn - rn) / delta + 2;\n    else hue = (rn - gn) / delta + 4;\n  }\n  return { hue: (hue * 60 + 360) % 360, saturation };\n};\n\n/** Whether two colors are close enough to be taken for one another in a chart. */\nexport const looksAlike = (a: string, b: string): boolean => {\n  const [ca, cb] = [parseColor(a), parseColor(b)];\n  if (!ca || !cb) return false;\n  const [x, y] = [hueAndSaturation(ca), hueAndSaturation(cb)];\n  const neutralA = x.saturation < NEUTRAL_SATURATION;\n  const neutralB = y.saturation < NEUTRAL_SATURATION;\n  if (neutralA || neutralB) return neutralA && neutralB;\n  const distance = Math.abs(x.hue - y.hue);\n  return Math.min(distance, 360 - distance) < HUE_DISTANCE;\n};\n\n/**\n * The default series colors for `accent`: the accent, then the categorical\n * hues that do not look like it, eight in all. An accent that is not a hex or\n * `rgb()` color is kept first and nothing is dropped.\n */\nexport const categoricalPalette = (accent: string): string[] => {\n  const candidates = [...CATEGORICAL, ...RESERVES];\n  const others = parseColor(accent)\n    ? candidates.filter((color) => !looksAlike(accent, color))\n    : CATEGORICAL;\n  return [accent, ...others].slice(0, PALETTE_SIZE);\n};\n","import { categoricalPalette } from './palette';\n\n/** Default brand color (the blue accent). The charts themselves follow the accent through `--color-brand-500`. */\nexport const COSMOS_BRAND = '#465fff';\n\n/**\n * The default series colors without the theme CSS: eight categorical colors,\n * the blue accent first. With the theme, the charts draw `--color-brand-500`\n * and `--color-chart-2` to `--color-chart-8` instead, and each accent skips the\n * hues that look like it (a cyan accent drops the cyan and the teal).\n *\n * Series do not read as statuses: green, amber and red are absent from the\n * first four places, and the status colors are never the default. A chart that\n * means a status passes them as `colors`. A palette is a categorical scale: it\n * names things, it does not rank them.\n */\nexport const COSMOS_PALETTE = categoricalPalette(COSMOS_BRAND);\n\nconst relativeLuminance = (hex: string): number => {\n  const [r, g, b] = [1, 3, 5].map((i) => {\n    const channel = parseInt(hex.slice(i, i + 2), 16) / 255;\n    return channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\n/**\n * The text color, white or black, that reads best on `background`, a\n * `#rrggbb` color (white when it is not one). White text drops under 3:1 on\n * the palette's green and amber, and black text drops to 4.34:1 on the brand\n * blue, where white gets 4.84:1: the pick reaches 4.5:1 on every color of the palette.\n */\nexport const readableOn = (background: string): string => {\n  if (!/^#[0-9a-f]{6}$/i.test(background)) return '#ffffff';\n  const luminance = relativeLuminance(background);\n  return 1.05 / (luminance + 0.05) >= (luminance + 0.05) / 0.05 ? '#ffffff' : '#000000';\n};\n"]}

package/dist/theme.js

@@ -0,0 +1,84 @@
+"use client";
+// src/palette.ts
+var CATEGORICAL = [
+  "#06b6d4",
+  // cyan
+  "#8b5cf6",
+  // violet
+  "#ec4899",
+  // pink
+  "#64748b",
+  // slate
+  "#f97316",
+  // orange
+  "#14b8a6",
+  // teal
+  "#84cc16"
+  // lime
+];
+var RESERVES = [
+  "#3b82f6",
+  // blue
+  "#d946ef"
+  // fuchsia
+];
+var PALETTE_SIZE = 8;
+var HUE_DISTANCE = 24;
+var NEUTRAL_SATURATION = 0.2;
+var parseColor = (color) => {
+  const hex = /^#([0-9a-f]{6})$/i.exec(color.trim())?.[1];
+  if (hex)
+    return [0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16));
+  const rgb = /^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/i.exec(color.trim());
+  return rgb ? [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])] : void 0;
+};
+var hueAndSaturation = ([r, g, b]) => {
+  const [rn, gn, bn] = [r, g, b].map((c) => c / 255);
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const delta = max - min;
+  const lightness = (max + min) / 2;
+  const saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
+  let hue = 0;
+  if (delta !== 0) {
+    if (max === rn) hue = (gn - bn) / delta % 6;
+    else if (max === gn) hue = (bn - rn) / delta + 2;
+    else hue = (rn - gn) / delta + 4;
+  }
+  return { hue: (hue * 60 + 360) % 360, saturation };
+};
+var looksAlike = (a, b) => {
+  const [ca, cb] = [parseColor(a), parseColor(b)];
+  if (!ca || !cb) return false;
+  const [x, y] = [hueAndSaturation(ca), hueAndSaturation(cb)];
+  const neutralA = x.saturation < NEUTRAL_SATURATION;
+  const neutralB = y.saturation < NEUTRAL_SATURATION;
+  if (neutralA || neutralB) return neutralA && neutralB;
+  const distance = Math.abs(x.hue - y.hue);
+  return Math.min(distance, 360 - distance) < HUE_DISTANCE;
+};
+var categoricalPalette = (accent) => {
+  const candidates = [...CATEGORICAL, ...RESERVES];
+  const others = parseColor(accent) ? candidates.filter((color) => !looksAlike(accent, color)) : CATEGORICAL;
+  return [accent, ...others].slice(0, PALETTE_SIZE);
+};
+
+// src/theme.ts
+var COSMOS_BRAND = "#465fff";
+var COSMOS_PALETTE = categoricalPalette(COSMOS_BRAND);
+var relativeLuminance = (hex) => {
+  const [r, g, b] = [1, 3, 5].map((i) => {
+    const channel = parseInt(hex.slice(i, i + 2), 16) / 255;
+    return channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+var readableOn = (background) => {
+  if (!/^#[0-9a-f]{6}$/i.test(background)) return "#ffffff";
+  const luminance = relativeLuminance(background);
+  return 1.05 / (luminance + 0.05) >= (luminance + 0.05) / 0.05 ? "#ffffff" : "#000000";
+};
+
+export { COSMOS_BRAND, COSMOS_PALETTE, readableOn };
+//# sourceMappingURL=theme.js.map
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/palette.ts","../src/theme.ts"],"names":[],"mappings":"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","file":"theme.js","sourcesContent":["// Categorical hues the default palette draws from, in the order a legend reads\n// them, then reserves. None of the first four reads as a status (green, amber,\n// red); lime, orange and teal sit near those hues and come after.\nexport const CATEGORICAL = [\n  '#06b6d4', // cyan\n  '#8b5cf6', // violet\n  '#ec4899', // pink\n  '#64748b', // slate\n  '#f97316', // orange\n  '#14b8a6', // teal\n  '#84cc16', // lime\n];\n\n// Taken in place of the candidates that collide with the accent.\nconst RESERVES = [\n  '#3b82f6', // blue\n  '#d946ef', // fuchsia\n];\n\n/** Series colors in a palette: the accent and seven others. */\nexport const PALETTE_SIZE = 8;\n\n// Two saturated colors closer than this many degrees of hue look alike: the\n// blue accent (231°) keeps violet (258°), the cyan accent (191°) loses teal\n// (173°). Below this saturation (HSL) a color is a gray: two grays look alike\n// whatever their hue (slate and the graphite accent).\nconst HUE_DISTANCE = 24;\nconst NEUTRAL_SATURATION = 0.2;\n\n/** `[r, g, b]` (0–255) of a `#rrggbb` or `rgb(r, g, b)` color, or `undefined`. */\nexport const parseColor = (color: string): [number, number, number] | undefined => {\n  const hex = /^#([0-9a-f]{6})$/i.exec(color.trim())?.[1];\n  if (hex)\n    return [0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16)) as [number, number, number];\n  const rgb = /^rgba?\\(\\s*(\\d+)[\\s,]+(\\d+)[\\s,]+(\\d+)/i.exec(color.trim());\n  return rgb ? [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])] : undefined;\n};\n\n/** Hue in degrees and HSL saturation (0–1) of an `[r, g, b]` color. */\nexport const hueAndSaturation = ([r, g, b]: [number, number, number]) => {\n  const [rn, gn, bn] = [r, g, b].map((c) => c / 255);\n  const max = Math.max(rn, gn, bn);\n  const min = Math.min(rn, gn, bn);\n  const delta = max - min;\n  const lightness = (max + min) / 2;\n  const saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1));\n  let hue = 0;\n  if (delta !== 0) {\n    if (max === rn) hue = ((gn - bn) / delta) % 6;\n    else if (max === gn) hue = (bn - rn) / delta + 2;\n    else hue = (rn - gn) / delta + 4;\n  }\n  return { hue: (hue * 60 + 360) % 360, saturation };\n};\n\n/** Whether two colors are close enough to be taken for one another in a chart. */\nexport const looksAlike = (a: string, b: string): boolean => {\n  const [ca, cb] = [parseColor(a), parseColor(b)];\n  if (!ca || !cb) return false;\n  const [x, y] = [hueAndSaturation(ca), hueAndSaturation(cb)];\n  const neutralA = x.saturation < NEUTRAL_SATURATION;\n  const neutralB = y.saturation < NEUTRAL_SATURATION;\n  if (neutralA || neutralB) return neutralA && neutralB;\n  const distance = Math.abs(x.hue - y.hue);\n  return Math.min(distance, 360 - distance) < HUE_DISTANCE;\n};\n\n/**\n * The default series colors for `accent`: the accent, then the categorical\n * hues that do not look like it, eight in all. An accent that is not a hex or\n * `rgb()` color is kept first and nothing is dropped.\n */\nexport const categoricalPalette = (accent: string): string[] => {\n  const candidates = [...CATEGORICAL, ...RESERVES];\n  const others = parseColor(accent)\n    ? candidates.filter((color) => !looksAlike(accent, color))\n    : CATEGORICAL;\n  return [accent, ...others].slice(0, PALETTE_SIZE);\n};\n","import { categoricalPalette } from './palette';\n\n/** Default brand color (the blue accent). The charts themselves follow the accent through `--color-brand-500`. */\nexport const COSMOS_BRAND = '#465fff';\n\n/**\n * The default series colors without the theme CSS: eight categorical colors,\n * the blue accent first. With the theme, the charts draw `--color-brand-500`\n * and `--color-chart-2` to `--color-chart-8` instead, and each accent skips the\n * hues that look like it (a cyan accent drops the cyan and the teal).\n *\n * Series do not read as statuses: green, amber and red are absent from the\n * first four places, and the status colors are never the default. A chart that\n * means a status passes them as `colors`. A palette is a categorical scale: it\n * names things, it does not rank them.\n */\nexport const COSMOS_PALETTE = categoricalPalette(COSMOS_BRAND);\n\nconst relativeLuminance = (hex: string): number => {\n  const [r, g, b] = [1, 3, 5].map((i) => {\n    const channel = parseInt(hex.slice(i, i + 2), 16) / 255;\n    return channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\n/**\n * The text color, white or black, that reads best on `background`, a\n * `#rrggbb` color (white when it is not one). White text drops under 3:1 on\n * the palette's green and amber, and black text drops to 4.34:1 on the brand\n * blue, where white gets 4.84:1: the pick reaches 4.5:1 on every color of the palette.\n */\nexport const readableOn = (background: string): string => {\n  if (!/^#[0-9a-f]{6}$/i.test(background)) return '#ffffff';\n  const luminance = relativeLuminance(background);\n  return 1.05 / (luminance + 0.05) >= (luminance + 0.05) / 0.05 ? '#ffffff' : '#000000';\n};\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sckyzo/cosmos-charts",
-  "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.",
+  "version": "0.3.0",
+  "description": "React chart components for the Cosmos design system — themeable Recharts wrappers (bar, line, area, donut, radial gauges, sparkline, treemap, realtime, heatmap, radar, scatter, bubble, box plot, range bar, mixed) that follow the Cosmos theme and accent.",
   "license": "MIT",
   "author": "SckyzO",
   "homepage": "https://github.com/SckyzO/cosmos/tree/main/packages/charts",
@@ -17,23 +17,30 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./package.json": "./package.json"
   },
+  "sideEffects": false,
   "files": [
     "dist/",
     "README.md",
     "CHANGELOG.md",
-    "LICENSE"
+    "LICENSE",
+    "THIRD_PARTY_NOTICES.md"
   ],
   "scripts": {
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
     "typecheck": "tsc --noEmit",
-    "test": "echo 'Stories tested via @cosmos/storybook addon-vitest (apps/storybook).'",
+    "test": "echo 'Stories and *.test.ts run via Vitest in @cosmos/storybook (apps/storybook).'",
     "build": "tsup",
     "dev": "tsup --watch"
   },
@@ -42,19 +49,23 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "apexcharts": "^8.3.1",
-    "react-apexcharts": "^2.1.1"
+    "@types/topojson-specification": "1.0.5",
+    "d3-geo": "3.1.1",
+    "recharts": "3.10.1",
+    "topojson-client": "3.1.0"
   },
   "devDependencies": {
-    "@storybook/react-vite": "^10.5.5",
+    "@storybook/react-vite": "^10.6.3",
+    "@types/d3-geo": "3.1.1",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
+    "@types/topojson-client": "3.1.5",
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
-    "storybook": "^10.5.5",
-    "tsup": "^8.5.1",
+    "storybook": "^10.6.3",
+    "tsup": "^9.0.0",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.11"
+    "world-atlas": "2.0.2"
   },
   "publishConfig": {
     "access": "public"
@@ -64,7 +75,7 @@
     "react",
     "react-19",
     "charts",
-    "apexcharts",
+    "recharts",
     "cosmos"
   ]
 }