@prioticket/design-system-charts 1.8.0-beta.4

package/README.md

@@ -0,0 +1,137 @@
+# Prioticket Design System Charts
+
+Charts for Prioticket React apps, built on [shadcn/ui charts](https://ui.shadcn.com/docs/components/chart) (Recharts v3) and themed by the Prioticket design tokens.
+
+This package ships **no chart components**. shadcn's chart wrapper is one file that lands in your app, and every chart is a Recharts composition you write in your page, so there is nothing per chart type to maintain here. What this package adds is the theme:
+
+- `shadcn.css` · a bridge stylesheet that points shadcn's chart variables at the Prioticket design tokens. Every value is a `var()` reference, so charts follow `initialize()` and `applyTheme()` live, with no re-render and no copied colours.
+- a shadcn **registry item**, `@prioticket/chart`, that installs shadcn's own chart wrapper into your app together with this package in one command.
+
+## Requirements
+
+- A React app with **Tailwind CSS v4** and shadcn/ui initialised (`npx shadcn@latest init`). The wrapper is styled with Tailwind utilities, and the bridge relies on shadcn's current variable scheme where variables hold full colours (`@theme inline`). The older Tailwind v3 scheme wraps variables in `hsl()` and cannot take the hex tokens.
+- `@prioticket/design-system-web` at the same version, with its theme stylesheet on the page. The bridge references its tokens.
+
+## Install
+
+1. Register the Prioticket registry in `components.json`. The registry is static JSON published inside this npm package; the URL below is a CDN view of the package, nothing is hosted anywhere else. Pin a version (`...design-system-charts@1.8.0/dist/...`) if you want installs to be reproducible.
+
+   ```json
+   {
+     "registries": {
+       "@prioticket": "https://cdn.jsdelivr.net/npm/@prioticket/design-system-charts/dist/r/{name}.json"
+     }
+   }
+   ```
+
+   Without a URL you can also add the item from the installed package:
+
+   ```bash
+   npm install @prioticket/design-system-charts @prioticket/design-system-web
+   npx shadcn@latest add ./node_modules/@prioticket/design-system-charts/dist/r/chart.json
+   ```
+
+2. Add the chart:
+
+   ```bash
+   npx shadcn@latest add @prioticket/chart
+   ```
+
+   This copies shadcn's `components/ui/chart.tsx` into your app, installs `recharts` and the two Prioticket packages.
+
+3. Import the theme stylesheet and the bridge once, after your Tailwind globals (in `app/layout.tsx` for Next.js, `main.tsx` for Vite):
+
+   ```tsx
+   import './globals.css';
+   import '@prioticket/design-system-web/theme-with-fonts.css';
+   import '@prioticket/design-system-charts/shadcn.css';
+   ```
+
+## Use
+
+Colour series through the palette, in fixed order, never with hardcoded colours:
+
+```tsx
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';
+import {
+  ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, type ChartConfig
+} from '@/components/ui/chart';
+
+const config = {
+  online: { label: 'Online', color: 'var(--chart-1)' },
+  boxOffice: { label: 'Box office', color: 'var(--chart-2)' }
+} satisfies ChartConfig;
+
+export function TicketsPerDay({ data }: { data: Array<{ day: string; online: number; boxOffice: number }> }) {
+  return (
+    <ChartContainer config={config} className="h-64 w-full">
+      <BarChart data={data}>
+        <CartesianGrid vertical={false} />
+        <XAxis dataKey="day" tickLine={false} axisLine={false} />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartLegend content={<ChartLegendContent />} />
+        <Bar dataKey="online" fill="var(--color-online)" radius={4} />
+        <Bar dataKey="boxOffice" fill="var(--color-boxOffice)" radius={4} />
+      </BarChart>
+    </ChartContainer>
+  );
+}
+```
+
+Rules that keep charts readable for everyone:
+
+- Six series slots, `var(--chart-1)` to `var(--chart-6)`, assigned in order and never cycled. A seventh category folds into "Other".
+- Two or more series always get a legend. Series 3, 4 and 5 sit below 3:1 contrast on the surface by design, so every chart carries visible labels or a table view; colour never carries meaning alone.
+- One y axis per chart. Two measures of different scale become two charts.
+- Give `ChartContainer` a height (`h-64`, `min-h-*` or `aspect-*`).
+
+## Dynamic theming
+
+The palette lives in the web package as `--pd-chart-1` to `--pd-chart-6`. Series 1 is `var(--md-sys-color-primary)`, so a client rebrand recolours it automatically; the rest are fixed house colours that clients can override:
+
+```ts
+import { applyTheme, resetTheme } from '@prioticket/design-system-web/theming';
+
+applyTheme({ colorPrimary: '#166534' });          // series 1 follows
+applyTheme({ colorChart2: '#b45309' });           // set a fixed series
+resetTheme();                                     // back to the stylesheet palette
+```
+
+Charts that are already on screen pick the new colours up immediately, because the SVG marks read `var()` references.
+
+## What the bridge maps
+
+| shadcn variable | Prioticket token | Scope |
+|---|---|---|
+| `--chart-1` … `--chart-6` | `--pd-chart-1` … `--pd-chart-6` | global (`html:root`) |
+| `--background`, `--popover` | `--md-sys-color-surface` | inside `[data-slot="chart"]` |
+| `--foreground`, `--popover-foreground` | `--md-sys-color-on-surface` | inside `[data-slot="chart"]` |
+| `--border` | `--md-sys-color-outline-variant` | inside `[data-slot="chart"]` |
+| `--muted` (active-bar cursor) | `--md-sys-color-on-surface-hover` | inside `[data-slot="chart"]` |
+| `--muted-foreground` (ticks, legend) | `--md-sys-color-on-surface-variant` | inside `[data-slot="chart"]` |
+| `--radius` | `--md-sys-shape-corner-small` | inside `[data-slot="chart"]` |
+| `color` (legend and inherited text) | `--md-sys-color-on-surface` | inside `[data-slot="chart"]` |
+| `font-family` | `--md-sys-typescale-body-small-font` | inside `[data-slot="chart"]` |
+| axis tick `fill` | `--md-sys-color-on-surface-variant` | direct rule on `.recharts-*-tick-value` inside the chart |
+
+The tick rule exists because shadcn's wrapper styles ticks through `.recharts-cartesian-axis-tick text`, a class Recharts 3.8 no longer renders, so a fresh shadcn install shows ticks in Recharts' default grey. Both resolve to the same token, so the rule stays harmless once upstream catches up.
+
+The surface, ink, border and radius overrides are scoped to the chart container so the rest of your shadcn UI keeps its own theme. The palette is global so legends and KPI tiles outside a chart can use it too. The design system ships one light theme; the palette therefore also wins over an app's `.dark` block.
+
+## Working with Claude
+
+Add the shadcn MCP server to the project so Claude can browse and install from the Prioticket registry:
+
+```json
+{
+  "mcpServers": {
+    "shadcn": { "command": "npx", "args": ["shadcn@latest", "mcp"] }
+  }
+}
+```
+
+Then ask for what you need in plain words, for example "add @prioticket/chart and build a bar chart of tickets per day, online versus box office". The registry item prints the three rules above after installing, and the `color: 'var(--chart-N)'` convention is what AI-written shadcn code already uses.
+
+## Not for PHP or vanilla pages
+
+Recharts is React only. A vanilla or PHP page that needs a chart uses the same `--pd-chart-N` tokens with a framework-agnostic library such as ECharts or Chart.js.

package/dist/r/chart.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chart",
+  "type": "registry:ui",
+  "title": "Prioticket chart",
+  "description": "shadcn's Recharts chart wrapper, themed by the Prioticket design tokens and re-themed live by applyTheme(). Colour series with var(--chart-1) to var(--chart-6).",
+  "dependencies": [
+    "@prioticket/design-system-charts@^1.8.0-beta.4",
+    "@prioticket/design-system-web@^1.8.0-beta.4"
+  ],
+  "registryDependencies": [
+    "chart"
+  ],
+  "docs": "Prioticket chart installed.\n\n1. Import the bridge once, after your Tailwind globals:\n     import '@prioticket/design-system-web/theme-with-fonts.css';\n     import '@prioticket/design-system-charts/shadcn.css';\n2. Colour series through the palette, in fixed order, never hardcoded:\n     { online: { label: 'Online', color: 'var(--chart-1)' } }\n3. Give every chart a legend (two or more series), direct labels or a table view, and one y axis.\n\nSeries 1 follows colorPrimary; colorChart1 to colorChart6 are settable through applyTheme().\nGuide: node_modules/@prioticket/design-system-charts/README.md"
+}

package/dist/r/index.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "prioticket",
+  "homepage": "https://gitlab.prioticket.dev/innovation/prioticket-design-system-web",
+  "items": [
+    {
+      "name": "chart",
+      "type": "registry:ui",
+      "title": "Prioticket chart",
+      "description": "shadcn's Recharts chart wrapper, themed by the Prioticket design tokens and re-themed live by applyTheme(). Colour series with var(--chart-1) to var(--chart-6).",
+      "dependencies": [
+        "@prioticket/design-system-charts@^1.8.0-beta.4",
+        "@prioticket/design-system-web@^1.8.0-beta.4"
+      ],
+      "registryDependencies": [
+        "chart"
+      ],
+      "docs": "Prioticket chart installed.\n\n1. Import the bridge once, after your Tailwind globals:\n     import '@prioticket/design-system-web/theme-with-fonts.css';\n     import '@prioticket/design-system-charts/shadcn.css';\n2. Colour series through the palette, in fixed order, never hardcoded:\n     { online: { label: 'Online', color: 'var(--chart-1)' } }\n3. Give every chart a legend (two or more series), direct labels or a table view, and one y axis.\n\nSeries 1 follows colorPrimary; colorChart1 to colorChart6 are settable through applyTheme().\nGuide: node_modules/@prioticket/design-system-charts/README.md"
+    }
+  ]
+}

package/dist/r/registry.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "prioticket",
+  "homepage": "https://gitlab.prioticket.dev/innovation/prioticket-design-system-web",
+  "items": [
+    {
+      "name": "chart",
+      "type": "registry:ui",
+      "title": "Prioticket chart",
+      "description": "shadcn's Recharts chart wrapper, themed by the Prioticket design tokens and re-themed live by applyTheme(). Colour series with var(--chart-1) to var(--chart-6).",
+      "dependencies": [
+        "@prioticket/design-system-charts@^1.8.0-beta.4",
+        "@prioticket/design-system-web@^1.8.0-beta.4"
+      ],
+      "registryDependencies": [
+        "chart"
+      ],
+      "docs": "Prioticket chart installed.\n\n1. Import the bridge once, after your Tailwind globals:\n     import '@prioticket/design-system-web/theme-with-fonts.css';\n     import '@prioticket/design-system-charts/shadcn.css';\n2. Colour series through the palette, in fixed order, never hardcoded:\n     { online: { label: 'Online', color: 'var(--chart-1)' } }\n3. Give every chart a legend (two or more series), direct labels or a table view, and one y axis.\n\nSeries 1 follows colorPrimary; colorChart1 to colorChart6 are settable through applyTheme().\nGuide: node_modules/@prioticket/design-system-charts/README.md"
+    }
+  ]
+}

package/dist/shadcn.css

@@ -0,0 +1,64 @@
+/**
+ * Prioticket bridge for shadcn/ui charts.
+ *
+ * shadcn's chart wrapper (Recharts v3, Tailwind v4, the current shadcn CSS-variable scheme) paints
+ * from the app's shadcn variables: --background, --foreground, --border, --muted, --muted-foreground
+ * and --radius, and colours each series through var(--chart-N). This file points those names at the
+ * Prioticket design tokens. Every value is a var() reference, so nothing is copied and every chart
+ * follows initialize() / applyTheme() at runtime without a re-render.
+ *
+ * Requirements
+ * - The Prioticket theme stylesheet is on the page (theme-only.css or theme-with-fonts.css); the
+ *   tokens referenced here come from it.
+ * - Tailwind v4 with shadcn's `@theme inline` block, where variables hold full colours and utilities
+ *   read them as var(--x). The older Tailwind v3 scheme wraps them in hsl() and cannot take hex.
+ *
+ * Import once, after the Tailwind/shadcn globals so the series palette wins on source order:
+ *   import '@prioticket/design-system-charts/shadcn.css';
+ *
+ * Scope
+ * - The series palette is global: legends, KPI tiles and custom marks outside a chart may use
+ *   var(--chart-N) too. The `html:root` selector outranks the app's `:root` and `.dark` blocks
+ *   whatever the import order. The design system ships one light theme, so charts stay on it.
+ * - Surface, ink, border, radius and typeface apply only inside the chart container
+ *   ([data-slot="chart"]), so the rest of the app's shadcn UI keeps its own theme.
+ */
+
+html:root {
+  --chart-1: var(--pd-chart-1);
+  --chart-2: var(--pd-chart-2);
+  --chart-3: var(--pd-chart-3);
+  --chart-4: var(--pd-chart-4);
+  --chart-5: var(--pd-chart-5);
+  --chart-6: var(--pd-chart-6);
+}
+
+[data-slot="chart"] {
+  /* tooltip card and legend ink */
+  --background: var(--md-sys-color-surface);
+  --foreground: var(--md-sys-color-on-surface);
+  --popover: var(--md-sys-color-surface);
+  --popover-foreground: var(--md-sys-color-on-surface);
+  /* grid lines, tooltip border, dashed indicator */
+  --border: var(--md-sys-color-outline-variant);
+  /* active-bar cursor fill: the design system's hover state, not a flat grey */
+  --muted: var(--md-sys-color-on-surface-hover);
+  /* axis tick labels, legend labels, tooltip names */
+  --muted-foreground: var(--md-sys-color-on-surface-variant);
+  --radius: var(--md-sys-shape-corner-small);
+  /* legend labels and anything else that inherits its ink, instead of the app's body colour */
+  color: var(--md-sys-color-on-surface);
+  font-family: var(--md-sys-typescale-body-small-font), sans-serif;
+}
+
+/*
+ * Axis tick labels. shadcn's wrapper paints them through `.recharts-cartesian-axis-tick text`, a
+ * class Recharts 3.8 no longer renders (ticks are `.recharts-cartesian-axis-tick-value` inside
+ * `.recharts-cartesian-axis-tick-label`), so without this rule ticks stay Recharts grey (#666).
+ * Harmless once upstream catches up: both resolve to the same token.
+ */
+[data-slot="chart"] .recharts-cartesian-axis-tick-value,
+[data-slot="chart"] .recharts-polar-angle-axis-tick-value,
+[data-slot="chart"] .recharts-polar-radius-axis-tick-value {
+  fill: var(--md-sys-color-on-surface-variant);
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@prioticket/design-system-charts",
+  "version": "1.8.0-beta.4",
+  "description": "shadcn/ui chart registry item plus the CSS bridge that themes shadcn charts with the Prioticket design tokens",
+  "type": "module",
+  "exports": {
+    "./shadcn.css": "./dist/shadcn.css",
+    "./r/*": "./dist/r/*",
+    "./registry.json": "./registry.json",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "registry.json",
+    "README.md"
+  ],
+  "sideEffects": [
+    "./dist/shadcn.css"
+  ],
+  "scripts": {
+    "build": "node ../../scripts/build-charts-registry.mjs"
+  },
+  "peerDependencies": {
+    "@prioticket/design-system-web": "^1.8.0-beta.4"
+  },
+  "keywords": [
+    "prioticket",
+    "design-system",
+    "charts",
+    "shadcn",
+    "recharts",
+    "react"
+  ],
+  "author": "Prioticket",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/registry.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "prioticket",
+  "homepage": "https://gitlab.prioticket.dev/innovation/prioticket-design-system-web",
+  "items": [
+    {
+      "name": "chart",
+      "type": "registry:ui",
+      "title": "Prioticket chart",
+      "description": "shadcn's Recharts chart wrapper, themed by the Prioticket design tokens and re-themed live by applyTheme(). Colour series with var(--chart-1) to var(--chart-6).",
+      "dependencies": [
+        "@prioticket/design-system-charts@{{version}}",
+        "@prioticket/design-system-web@{{version}}"
+      ],
+      "registryDependencies": [
+        "chart"
+      ],
+      "docs": "Prioticket chart installed.\n\n1. Import the bridge once, after your Tailwind globals:\n     import '@prioticket/design-system-web/theme-with-fonts.css';\n     import '@prioticket/design-system-charts/shadcn.css';\n2. Colour series through the palette, in fixed order, never hardcoded:\n     { online: { label: 'Online', color: 'var(--chart-1)' } }\n3. Give every chart a legend (two or more series), direct labels or a table view, and one y axis.\n\nSeries 1 follows colorPrimary; colorChart1 to colorChart6 are settable through applyTheme().\nGuide: node_modules/@prioticket/design-system-charts/README.md"
+    }
+  ]
+}