@bysages/charts 0.0.0

package/LICENSE

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

package/README.md

@@ -0,0 +1,54 @@
+# @bysages/charts
+
+![npm version](https://img.shields.io/npm/v/@bysages/charts)
+![npm downloads](https://img.shields.io/npm/dw/@bysages/charts)
+![npm license](https://img.shields.io/npm/l/@bysages/charts)
+
+> Token-themed charts for By Sages Elements — [TanStack Charts](https://tanstack.com/charts) re-exported per framework, with the palette and surface variables bridged onto the paper-and-ink tokens.
+
+## Features
+
+- 🎨 **Tokens as ink** — marks carry `var(--bs-color-*)` straight through paint attributes; `var()` resolves against the live theme, so mode, accent, and scene retune the ink with no redraw
+- 🖌️ **A fixed pigment palette** — ink → danger → success → warning → info, the system's semantic order, handed to series that don't name their own colors
+- 🪟 **Paper vessels** — tooltips dress like every other popup vessel (surface, hairline, elevation), crosshairs and focus takes the primary ink
+- 🧩 **The full grammar** — marks, transforms, scales, and `defineChart` pass through from TanStack Charts, one entry per framework (`/vue`, `/react`, `/solid`, `/svelte`)
+
+## Installation
+
+```bash
+# pnpm
+pnpm add @bysages/charts @bysages/core @bysages/tokens
+
+# npm
+npm install @bysages/charts @bysages/core @bysages/tokens
+
+# yarn
+yarn add @bysages/charts @bysages/core @bysages/tokens
+
+# bun
+bun add @bysages/charts @bysages/core @bysages/tokens
+```
+
+## Quick Start
+
+```vue
+<script setup lang="ts">
+import { Chart } from "@bysages/charts/vue";
+import { bar } from "@tanstack/charts";
+
+const definition = {
+  axis: ["Region", "Units"],
+  series: [{ type: bar(), label: "Sales", data: [42, 87, 63] }],
+} as const;
+</script>
+
+<template>
+  <Chart :definition="definition" />
+</template>
+```
+
+The module side-effects bridge the theme once on import — no setup call of its own.
+
+## License
+
+- [MIT](../../LICENSE) © [By Sages](https://www.bysages.com/)

package/dist/index.d.mts

@@ -0,0 +1,31 @@
+export * from "@tanstack/charts";
+//#region src/theme.d.ts
+/** Bridge the chart engine's surface variables onto the paper-and-ink
+ * tokens: its tooltip dresses like every other popup vessel, and its
+ * crosshair and focus takes the primary ink. The marks themselves carry
+ * tokens straight through paint attributes — var() resolves against the
+ * live theme, so mode, accent, and scene retune the ink with no redraw. */
+export declare const chartThemeCss = "\n.ts-chart {\n  --ts-chart-tooltip-background: var(--bs-color-surface-2);\n  --ts-chart-tooltip-border: 1px solid var(--bs-color-border);\n  --ts-chart-tooltip-border-radius: var(--bs-radius-lg);\n  --ts-chart-tooltip-color: var(--bs-color-text-primary);\n  --ts-chart-tooltip-font: var(--bs-font-size-sm) / var(--bs-line-height-relaxed)\n    var(--bs-font-sans);\n  --ts-chart-tooltip-max-width: 18rem;\n  --ts-chart-tooltip-padding: var(--bs-space-2) var(--bs-space-3);\n  --ts-chart-tooltip-shadow: var(--bs-elevation-3);\n  --ts-chart-tooltip-active-row-background: var(--bs-color-surface-0);\n  --ts-chart-tooltip-active-row-border-radius: var(--bs-radius-sm);\n  --ts-chart-tooltip-active-row-font-weight: var(--bs-font-weight-medium);\n  --ts-chart-tooltip-active-row-shadow: none;\n  --ts-chart-crosshair-marker-fill: var(--bs-color-primary);\n  --ts-chart-crosshair-label-halo: var(--bs-color-surface-1);\n  --ts-chart-focus-fill: var(--bs-color-primary);\n}\n";
+/** Inject the chart theme bridge (plus the token layer on first use).
+ * Idempotent; SSR is a no-op. */
+export declare function injectChartTheme(): void;
+//#endregion
+//#region src/palette.d.ts
+/** The semantic pigments as paint. Marks take these strings directly —
+ * the SVG renderer writes them as paint attributes, and var() inside a
+ * paint attribute resolves against the live theme. Ink leads; the fixed
+ * pigments follow in reading order, so any series can carry any hue and
+ * the chart never presumes an industry. */
+export declare const chartColors: {
+  readonly ink: "var(--bs-color-primary)";
+  readonly danger: "var(--bs-color-danger)";
+  readonly success: "var(--bs-color-success)";
+  readonly warning: "var(--bs-color-warning)";
+  readonly info: "var(--bs-color-info)";
+};
+/** Series order for categorical paint — hand this to an ordinal scale's
+ * range (`scaleOrdinal().range(chartSeriesRange)`). */
+export declare const chartSeriesRange: string[];
+/** The quiet ink for grids, guides, and secondary marks. */
+export declare const chartHairline = "var(--bs-color-border)";
+//#endregion

package/dist/index.mjs

@@ -0,0 +1,28 @@
+import { n as injectChartTheme, t as chartThemeCss } from "./theme-CCf9S1Jc.mjs";
+export * from "@tanstack/charts";
+//#region src/palette.ts
+/** The semantic pigments as paint. Marks take these strings directly —
+* the SVG renderer writes them as paint attributes, and var() inside a
+* paint attribute resolves against the live theme. Ink leads; the fixed
+* pigments follow in reading order, so any series can carry any hue and
+* the chart never presumes an industry. */
+const chartColors = {
+	ink: "var(--bs-color-primary)",
+	danger: "var(--bs-color-danger)",
+	success: "var(--bs-color-success)",
+	warning: "var(--bs-color-warning)",
+	info: "var(--bs-color-info)"
+};
+/** Series order for categorical paint — hand this to an ordinal scale's
+* range (`scaleOrdinal().range(chartSeriesRange)`). */
+const chartSeriesRange = [
+	chartColors.ink,
+	chartColors.danger,
+	chartColors.success,
+	chartColors.warning,
+	chartColors.info
+];
+/** The quiet ink for grids, guides, and secondary marks. */
+const chartHairline = "var(--bs-color-border)";
+//#endregion
+export { chartColors, chartHairline, chartSeriesRange, chartThemeCss, injectChartTheme };

package/dist/react/chart.d.mts

@@ -0,0 +1,2 @@
+import { Chart, ChartCommonProps, ChartDefinition, ChartPresentationProps, ChartProps } from "@tanstack/charts/react";
+export { Chart, type ChartCommonProps, type ChartDefinition, type ChartPresentationProps, type ChartProps };

package/dist/react/chart.mjs

@@ -0,0 +1,6 @@
+import { n as injectChartTheme } from "../theme-CCf9S1Jc.mjs";
+import { Chart } from "@tanstack/charts/react";
+//#region src/react/chart.ts
+injectChartTheme();
+//#endregion
+export { Chart };

package/dist/solid/chart.d.mts

@@ -0,0 +1,2 @@
+import { Chart, ChartCommonProps, ChartDefinition, ChartPresentationProps, ChartProps } from "@tanstack/charts/solid";
+export { Chart, type ChartCommonProps, type ChartDefinition, type ChartPresentationProps, type ChartProps };

package/dist/solid/chart.mjs

@@ -0,0 +1,6 @@
+import { n as injectChartTheme } from "../theme-CCf9S1Jc.mjs";
+import { Chart } from "@tanstack/charts/solid";
+//#region src/solid/chart.ts
+injectChartTheme();
+//#endregion
+export { Chart };

package/dist/svelte/chart.d.mts

@@ -0,0 +1,2 @@
+import { Chart, ChartCommonProps, ChartDefinition, ChartPresentationProps, ChartProps } from "@tanstack/charts/svelte";
+export { Chart, type ChartCommonProps, type ChartDefinition, type ChartPresentationProps, type ChartProps };

package/dist/svelte/chart.mjs

@@ -0,0 +1,6 @@
+import { n as injectChartTheme } from "../theme-CCf9S1Jc.mjs";
+import { Chart } from "@tanstack/charts/svelte";
+//#region src/svelte/chart.ts
+injectChartTheme();
+//#endregion
+export { Chart };

package/dist/theme-CCf9S1Jc.mjs

@@ -0,0 +1,41 @@
+import { injectTokens } from "@bysages/core";
+//#region src/theme.ts
+/** Bridge the chart engine's surface variables onto the paper-and-ink
+* tokens: its tooltip dresses like every other popup vessel, and its
+* crosshair and focus takes the primary ink. The marks themselves carry
+* tokens straight through paint attributes — var() resolves against the
+* live theme, so mode, accent, and scene retune the ink with no redraw. */
+const chartThemeCss = `
+.ts-chart {
+  --ts-chart-tooltip-background: var(--bs-color-surface-2);
+  --ts-chart-tooltip-border: 1px solid var(--bs-color-border);
+  --ts-chart-tooltip-border-radius: var(--bs-radius-lg);
+  --ts-chart-tooltip-color: var(--bs-color-text-primary);
+  --ts-chart-tooltip-font: var(--bs-font-size-sm) / var(--bs-line-height-relaxed)
+    var(--bs-font-sans);
+  --ts-chart-tooltip-max-width: 18rem;
+  --ts-chart-tooltip-padding: var(--bs-space-2) var(--bs-space-3);
+  --ts-chart-tooltip-shadow: var(--bs-elevation-3);
+  --ts-chart-tooltip-active-row-background: var(--bs-color-surface-0);
+  --ts-chart-tooltip-active-row-border-radius: var(--bs-radius-sm);
+  --ts-chart-tooltip-active-row-font-weight: var(--bs-font-weight-medium);
+  --ts-chart-tooltip-active-row-shadow: none;
+  --ts-chart-crosshair-marker-fill: var(--bs-color-primary);
+  --ts-chart-crosshair-label-halo: var(--bs-color-surface-1);
+  --ts-chart-focus-fill: var(--bs-color-primary);
+}
+`;
+let injected = false;
+/** Inject the chart theme bridge (plus the token layer on first use).
+* Idempotent; SSR is a no-op. */
+function injectChartTheme() {
+	if (injected || typeof document === "undefined") return;
+	injectTokens();
+	const style = document.createElement("style");
+	style.dataset.bsStyles = "chart-theme";
+	style.textContent = chartThemeCss;
+	document.head.append(style);
+	injected = true;
+}
+//#endregion
+export { injectChartTheme as n, chartThemeCss as t };

package/dist/vue/chart.d.mts

@@ -0,0 +1,2 @@
+import { Chart, ChartCommonProps, ChartDefinition, ChartPresentationProps, ChartProps } from "@tanstack/charts/vue";
+export { Chart, type ChartCommonProps, type ChartDefinition, type ChartPresentationProps, type ChartProps };

package/dist/vue/chart.mjs

@@ -0,0 +1,6 @@
+import { n as injectChartTheme } from "../theme-CCf9S1Jc.mjs";
+import { Chart } from "@tanstack/charts/vue";
+//#region src/vue/chart.ts
+injectChartTheme();
+//#endregion
+export { Chart };

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@bysages/charts",
+  "version": "0.0.0",
+  "description": "Token-themed charts for By Sages Elements — TanStack Charts dressed in the paper-and-ink system: one token bridge plus thin framework adapters",
+  "keywords": [
+    "charts",
+    "components",
+    "data-visualization",
+    "dataviz",
+    "design-system",
+    "design-tokens",
+    "theming",
+    "ui",
+    "vue"
+  ],
+  "homepage": "https://github.com/bysages/elements#readme",
+  "bugs": {
+    "url": "https://github.com/bysages/elements/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "By Sages",
+    "email": "contact@bysages.com",
+    "url": "https://www.bysages.com/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bysages/elements"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./vue": {
+      "types": "./dist/vue/chart.d.mts",
+      "import": "./dist/vue/chart.mjs"
+    },
+    "./react": {
+      "types": "./dist/react/chart.d.mts",
+      "import": "./dist/react/chart.mjs"
+    },
+    "./solid": {
+      "types": "./dist/solid/chart.d.mts",
+      "import": "./dist/solid/chart.mjs"
+    },
+    "./svelte": {
+      "types": "./dist/svelte/chart.d.mts",
+      "import": "./dist/svelte/chart.mjs"
+    }
+  },
+  "dependencies": {
+    "@tanstack/charts": "0.18.0",
+    "@bysages/core": "0.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "solid-js": ">=1.8",
+    "svelte": "^5.20.0",
+    "vue": "^3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "7.3.0",
+    "rollup-plugin-svelte": "7.2.3",
+    "svelte": "5.57.0"
+  },
+  "scripts": {
+    "dev": "basis build --stub",
+    "build": "vp pack"
+  }
+}