@krizaka/charts 0.0.0-stage → 0.1.0

package/registry/chart.json

@@ -0,0 +1,440 @@
+{
+  "name": "chart",
+  "package": "@krizaka/charts",
+  "type": "chart",
+  "title": "Chart (ECharts option)",
+  "summary": "Any ECharts option on the Krizaka frame: the theme resolved from the tokens, the lazy engine, the states, the table, the keyboard, the export.",
+  "description": "Any ECharts option on the Krizaka frame: the theme resolved from the tokens, the lazy engine, the states, the table, the keyboard, the export.",
+  "status": "beta",
+  "category": "charts",
+  "platforms": "web",
+  "engine": "echarts",
+  "whenToUse": [
+    "A chart type the typed components do not cover: polar bars, a sunburst, a parallel axis, a graph."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "A type the package has: its props say more and its summary is written for you.",
+      "use": "line-chart"
+    }
+  ],
+  "bestPractices": [
+    "Pass `modules` with only what the option needs (`use([...])` in a module of yours): the default loads all of ECharts.",
+    "Write `summaryText` and `table`: an option is opaque, the alternative is yours to give.",
+    "Read the colours from the theme function (`theme.palette`, `theme.text2`), never hard-coded."
+  ],
+  "accessibility": {
+    "keyboard": [
+      {
+        "keys": "Tab",
+        "action": "Moves the focus to the plot (one tab stop), then to the data and export buttons."
+      },
+      {
+        "keys": "Arrow keys",
+        "action": "Walk the items one by one: each is announced and highlighted, its tooltip shown."
+      },
+      {
+        "keys": "Home / End",
+        "action": "Jump to the first or the last item."
+      },
+      {
+        "keys": "Esc",
+        "action": "Hides the tooltip and clears the highlight."
+      }
+    ],
+    "notes": [
+      "The plot is a group named by the title and described by `summaryText`.",
+      "Give `items` for the arrow keys to walk; without them the plot is not a tab stop.",
+      "`table` is the data table, always in the page for assistive technology."
+    ]
+  },
+  "related": [
+    "charts-provider",
+    "radar-chart",
+    "heatmap"
+  ],
+  "source": "packages/charts/src/meta/chart.ts",
+  "install": {
+    "web": "npm install @krizaka/charts",
+    "native": "npx expo install react-native-svg\nnpm install @krizaka/charts"
+  },
+  "web": {
+    "entry": "@krizaka/charts/chart",
+    "import": "import { Chart } from \"@krizaka/charts/chart\";",
+    "props": [
+      {
+        "component": "Chart",
+        "description": "Any ECharts option, themed and framed like the typed charts. Memoise `option` when it is a function.",
+        "props": [
+          {
+            "name": "option",
+            "type": "ECBasicOption | ((theme: ResolvedTheme, size: { width: number; height: number; }) => ECBasicOption)",
+            "default": null,
+            "description": "The ECharts option, or a function of the resolved theme (colours as plain strings, the palette, the ramp).",
+            "required": true
+          },
+          {
+            "name": "summaryText",
+            "type": "string",
+            "default": null,
+            "description": "The written summary: an option says nothing on its own.",
+            "required": true
+          },
+          {
+            "name": "table",
+            "type": "TableModel",
+            "default": null,
+            "description": "The data as a table: the alternative of every chart.",
+            "required": true
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "default": null,
+            "description": "What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.",
+            "required": true
+          },
+          {
+            "name": "brand",
+            "type": "BrandId",
+            "default": null,
+            "description": "The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it\nwhen the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "A class on the figure (layout: margins, grid placement).",
+            "required": false
+          },
+          {
+            "name": "dataTable",
+            "type": "boolean",
+            "default": null,
+            "description": "The \"Show data\" button (the table is in the page for screen readers either way). Default true.",
+            "required": false
+          },
+          {
+            "name": "description",
+            "type": "ReactNode",
+            "default": null,
+            "description": "A sentence under the title: the period, the unit, the source.",
+            "required": false
+          },
+          {
+            "name": "empty",
+            "type": "ReactNode",
+            "default": null,
+            "description": "What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of\n@krizaka /ui fits.",
+            "required": false
+          },
+          {
+            "name": "error",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The data could not be loaded: `true` says the default words, a node says yours (a retry button…).",
+            "required": false
+          },
+          {
+            "name": "exportable",
+            "type": "boolean | readonly ExportFormat[]",
+            "default": null,
+            "description": "Export buttons: `true` for PNG, SVG and CSV, or the formats you want.",
+            "required": false
+          },
+          {
+            "name": "height",
+            "type": "number",
+            "default": null,
+            "description": "The height of the plot in pixels. Default 280 (a sparkline: 32).",
+            "required": false
+          },
+          {
+            "name": "hideTitle",
+            "type": "boolean",
+            "default": null,
+            "description": "Visually hide the title (it stays the chart's accessible name): a card that already has its heading.",
+            "required": false
+          },
+          {
+            "name": "id",
+            "type": "string",
+            "default": null,
+            "description": "The id of the figure.",
+            "required": false
+          },
+          {
+            "name": "items",
+            "type": "readonly WalkItem[]",
+            "default": null,
+            "description": "What the arrow keys walk (series and data indexes, and what each one says).",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "ChartLabelsInput",
+            "default": null,
+            "description": "The words, translated: the buttons, the states, the written summary.",
+            "required": false
+          },
+          {
+            "name": "live",
+            "type": "boolean",
+            "default": null,
+            "description": "Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.",
+            "required": false
+          },
+          {
+            "name": "loading",
+            "type": "boolean",
+            "default": null,
+            "description": "The data is on its way: a skeleton of the chart, announced once.",
+            "required": false
+          },
+          {
+            "name": "locale",
+            "type": "Locale",
+            "default": null,
+            "description": "The locale of every figure and date (`\"fr-FR\"`). Default `\"en-US\"`.",
+            "required": false
+          },
+          {
+            "name": "modules",
+            "type": "(() => Promise<unknown>)",
+            "default": "() => import(\"../echarts/engines/full\")",
+            "description": "Registers what the option needs, from `echarts/charts` and `echarts/components` (tree-shaken):\n`() => import(\"./my-echarts\")` where that module calls `use([...])`. Default: all of ECharts (~380 kB gzip).",
+            "required": false
+          },
+          {
+            "name": "onItem",
+            "type": "((item: { seriesIndex: number; dataIndex: number; }) => void)",
+            "default": null,
+            "description": "A click (or Enter) on a data item.",
+            "required": false
+          },
+          {
+            "name": "renderer",
+            "type": "Renderer",
+            "default": null,
+            "description": "`svg` (default): sharp, exportable as SVG. `canvas`: for tens of thousands of marks.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "CSSProperties",
+            "default": null,
+            "description": "Inline style on the figure (layout only: colours come from the tokens).",
+            "required": false
+          },
+          {
+            "name": "summary",
+            "type": "\"hidden\" | \"visible\"",
+            "default": null,
+            "description": "The written summary: read by screen readers only (`\"hidden\"`, default), or shown under the chart (`\"visible\"`).",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "polar-uploads",
+        "title": "Polar bars",
+        "description": "Uploads per hour on a clock face: a type the package does not ship, with only its modules loaded.",
+        "path": "examples/chart/polar-uploads.tsx",
+        "module": "@krizaka/charts/registry/examples/chart/polar-uploads",
+        "code": "import { Chart } from \"@krizaka/charts/chart\";\n\nconst uploads = [3, 2, 1, 1, 2, 4, 9, 18, 26, 31, 34, 37, 41, 39, 36, 38, 44, 52, 58, 61, 49, 33, 17, 8];\nconst hours = uploads.map((_, h) => `${String(h).padStart(2, \"0\")}:00`);\n\n// Only what the option needs: polar bars and the tooltip (not all of ECharts).\nconst modules = async () => {\n  const [{ use: register }, { BarChart }, { PolarComponent, TooltipComponent }] = await Promise.all([import(\"echarts/core\"), import(\"echarts/charts\"), import(\"echarts/components\")]);\n  register([BarChart, PolarComponent, TooltipComponent]);\n};\n\nexport default function PolarUploads() {\n  return (\n    <Chart\n      title=\"Uploads by hour of the day\"\n      modules={modules}\n      option={(theme) => ({\n        polar: { radius: [\"18%\", \"80%\"] },\n        angleAxis: { type: \"category\", data: hours, axisLabel: { color: theme.text2, interval: 2 }, axisLine: { lineStyle: { color: theme.axis } } },\n        radiusAxis: { axisLabel: { show: false }, splitLine: { lineStyle: { color: theme.grid } }, axisLine: { show: false } },\n        tooltip: { trigger: \"item\" },\n        series: [{ type: \"bar\", coordinateSystem: \"polar\", data: uploads, itemStyle: { color: theme.palette[0], borderRadius: 3 } }],\n      })}\n      summaryText={`Uploads by hour: quietest at 02:00 (1), busiest at 19:00 (61).`}\n      table={{ columns: [\"Hour\", \"Uploads\"], rows: hours.map((h, i) => [h, String(uploads[i])]) }}\n      items={uploads.map((u, i) => ({ seriesIndex: 0, dataIndex: i, text: `${hours[i]}: ${u}` }))}\n      height={340}\n    />\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "files": [],
+  "dependencies": [
+    "@krizaka/intl@workspace:^",
+    "d3-geo@^3.1.1",
+    "echarts@^6.1.0",
+    "topojson-client@^3.1.0"
+  ],
+  "registryDependencies": [],
+  "demo": {
+    "path": "examples/chart/polar-uploads.tsx",
+    "content": "import { Chart } from \"@krizaka/charts/chart\";\n\nconst uploads = [3, 2, 1, 1, 2, 4, 9, 18, 26, 31, 34, 37, 41, 39, 36, 38, 44, 52, 58, 61, 49, 33, 17, 8];\nconst hours = uploads.map((_, h) => `${String(h).padStart(2, \"0\")}:00`);\n\n// Only what the option needs: polar bars and the tooltip (not all of ECharts).\nconst modules = async () => {\n  const [{ use: register }, { BarChart }, { PolarComponent, TooltipComponent }] = await Promise.all([import(\"echarts/core\"), import(\"echarts/charts\"), import(\"echarts/components\")]);\n  register([BarChart, PolarComponent, TooltipComponent]);\n};\n\nexport default function PolarUploads() {\n  return (\n    <Chart\n      title=\"Uploads by hour of the day\"\n      modules={modules}\n      option={(theme) => ({\n        polar: { radius: [\"18%\", \"80%\"] },\n        angleAxis: { type: \"category\", data: hours, axisLabel: { color: theme.text2, interval: 2 }, axisLine: { lineStyle: { color: theme.axis } } },\n        radiusAxis: { axisLabel: { show: false }, splitLine: { lineStyle: { color: theme.grid } }, axisLine: { show: false } },\n        tooltip: { trigger: \"item\" },\n        series: [{ type: \"bar\", coordinateSystem: \"polar\", data: uploads, itemStyle: { color: theme.palette[0], borderRadius: 3 } }],\n      })}\n      summaryText={`Uploads by hour: quietest at 02:00 (1), busiest at 19:00 (61).`}\n      table={{ columns: [\"Hour\", \"Uploads\"], rows: hours.map((h, i) => [h, String(uploads[i])]) }}\n      items={uploads.map((u, i) => ({ seriesIndex: 0, dataIndex: i, text: `${hours[i]}: ${u}` }))}\n      height={340}\n    />\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "Chart",
+      "description": "Any ECharts option, themed and framed like the typed charts. Memoise `option` when it is a function.",
+      "props": [
+        {
+          "name": "option",
+          "type": "ECBasicOption | ((theme: ResolvedTheme, size: { width: number; height: number; }) => ECBasicOption)",
+          "default": null,
+          "description": "The ECharts option, or a function of the resolved theme (colours as plain strings, the palette, the ramp).",
+          "required": true
+        },
+        {
+          "name": "summaryText",
+          "type": "string",
+          "default": null,
+          "description": "The written summary: an option says nothing on its own.",
+          "required": true
+        },
+        {
+          "name": "table",
+          "type": "TableModel",
+          "default": null,
+          "description": "The data as a table: the alternative of every chart.",
+          "required": true
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "default": null,
+          "description": "What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`.",
+          "required": true
+        },
+        {
+          "name": "brand",
+          "type": "BrandId",
+          "default": null,
+          "description": "The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it\nwhen the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "A class on the figure (layout: margins, grid placement).",
+          "required": false
+        },
+        {
+          "name": "dataTable",
+          "type": "boolean",
+          "default": null,
+          "description": "The \"Show data\" button (the table is in the page for screen readers either way). Default true.",
+          "required": false
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "default": null,
+          "description": "A sentence under the title: the period, the unit, the source.",
+          "required": false
+        },
+        {
+          "name": "empty",
+          "type": "ReactNode",
+          "default": null,
+          "description": "What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of\n@krizaka /ui fits.",
+          "required": false
+        },
+        {
+          "name": "error",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The data could not be loaded: `true` says the default words, a node says yours (a retry button…).",
+          "required": false
+        },
+        {
+          "name": "exportable",
+          "type": "boolean | readonly ExportFormat[]",
+          "default": null,
+          "description": "Export buttons: `true` for PNG, SVG and CSV, or the formats you want.",
+          "required": false
+        },
+        {
+          "name": "height",
+          "type": "number",
+          "default": null,
+          "description": "The height of the plot in pixels. Default 280 (a sparkline: 32).",
+          "required": false
+        },
+        {
+          "name": "hideTitle",
+          "type": "boolean",
+          "default": null,
+          "description": "Visually hide the title (it stays the chart's accessible name): a card that already has its heading.",
+          "required": false
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "default": null,
+          "description": "The id of the figure.",
+          "required": false
+        },
+        {
+          "name": "items",
+          "type": "readonly WalkItem[]",
+          "default": null,
+          "description": "What the arrow keys walk (series and data indexes, and what each one says).",
+          "required": false
+        },
+        {
+          "name": "labels",
+          "type": "ChartLabelsInput",
+          "default": null,
+          "description": "The words, translated: the buttons, the states, the written summary.",
+          "required": false
+        },
+        {
+          "name": "live",
+          "type": "boolean",
+          "default": null,
+          "description": "Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point.",
+          "required": false
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "default": null,
+          "description": "The data is on its way: a skeleton of the chart, announced once.",
+          "required": false
+        },
+        {
+          "name": "locale",
+          "type": "Locale",
+          "default": null,
+          "description": "The locale of every figure and date (`\"fr-FR\"`). Default `\"en-US\"`.",
+          "required": false
+        },
+        {
+          "name": "modules",
+          "type": "(() => Promise<unknown>)",
+          "default": "() => import(\"../echarts/engines/full\")",
+          "description": "Registers what the option needs, from `echarts/charts` and `echarts/components` (tree-shaken):\n`() => import(\"./my-echarts\")` where that module calls `use([...])`. Default: all of ECharts (~380 kB gzip).",
+          "required": false
+        },
+        {
+          "name": "onItem",
+          "type": "((item: { seriesIndex: number; dataIndex: number; }) => void)",
+          "default": null,
+          "description": "A click (or Enter) on a data item.",
+          "required": false
+        },
+        {
+          "name": "renderer",
+          "type": "Renderer",
+          "default": null,
+          "description": "`svg` (default): sharp, exportable as SVG. `canvas`: for tens of thousands of marks.",
+          "required": false
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "default": null,
+          "description": "Inline style on the figure (layout only: colours come from the tokens).",
+          "required": false
+        },
+        {
+          "name": "summary",
+          "type": "\"hidden\" | \"visible\"",
+          "default": null,
+          "description": "The written summary: read by screen readers only (`\"hidden\"`, default), or shown under the chart (`\"visible\"`).",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/registry/charts-provider.json

@@ -0,0 +1,190 @@
+{
+  "name": "charts-provider",
+  "package": "@krizaka/charts",
+  "type": "chart",
+  "title": "Charts provider",
+  "summary": "The locale, the brand palette and the words of every chart below it, set once; plus the sliding window for live data.",
+  "description": "The locale, the brand palette and the words of every chart below it, set once; plus the sliding window for live data.",
+  "status": "beta",
+  "category": "charts",
+  "platforms": "both",
+  "engine": null,
+  "whenToUse": [
+    "Once near the root of an app: its locale (`fr-FR`), its brand (`orazaka`), its translated words.",
+    "An app that loads a brand stylesheet on `:root` rather than a `.brand-<id>` class: set `brand` here."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "To change one chart only: every chart takes `locale`, `brand` and `labels` itself.",
+      "use": "line-chart"
+    }
+  ],
+  "bestPractices": [
+    "Translate `labels` from the app's catalogue; the summary templates take `{placeholders}`.",
+    "In React Native, pass `scheme` and `theme` from @krizaka/ui/native's `useTheme()` so the charts follow the app's theme and brand."
+  ],
+  "accessibility": {
+    "keyboard": [],
+    "notes": [
+      "The words it sets are what screen readers hear: the summary, the role description, the keyboard hint."
+    ]
+  },
+  "related": [
+    "line-chart",
+    "chart",
+    "bar-chart"
+  ],
+  "source": "packages/charts/src/meta/charts-provider.ts",
+  "install": {
+    "web": "npm install @krizaka/charts",
+    "native": "npx expo install react-native-svg\nnpm install @krizaka/charts"
+  },
+  "web": {
+    "entry": "@krizaka/charts/provider",
+    "import": "import { ChartsProvider, useSlidingWindow } from \"@krizaka/charts/provider\";",
+    "props": [
+      {
+        "component": "ChartsProvider",
+        "description": "Sets the locale, the brand and the words of every chart below it.",
+        "props": [
+          {
+            "name": "brand",
+            "type": "BrandId",
+            "default": null,
+            "description": "The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it\nwhen the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "ChartLabelsInput",
+            "default": null,
+            "description": "The words, translated: the buttons, the states, the written summary.",
+            "required": false
+          },
+          {
+            "name": "locale",
+            "type": "Locale",
+            "default": null,
+            "description": "The locale of every figure and date (`\"fr-FR\"`). Default `\"en-US\"`.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "french-orazaka",
+        "title": "French, Orazaka",
+        "description": "Figures and dates in French, the Orazaka palette, the words translated.",
+        "path": "examples/charts-provider/french-orazaka.tsx",
+        "module": "@krizaka/charts/registry/examples/charts-provider/french-orazaka",
+        "code": "import { BarChart } from \"@krizaka/charts/bar\";\nimport { ChartsProvider } from \"@krizaka/charts/provider\";\n\nconst months = [\n  { month: \"2026-06\", credits: 412_000 },\n  { month: \"2026-07\", credits: 468_500 },\n  { month: \"2026-08\", credits: 391_200 },\n  { month: \"2026-09\", credits: 523_900 },\n];\n\n// Once near the app's root: the locale, the brand's palette, the words from the app's catalogue.\nexport default function FrenchOrazaka() {\n  return (\n    <ChartsProvider\n      locale=\"fr-FR\"\n      brand=\"orazaka\"\n      labels={{ showData: \"Voir les données\", hideData: \"Masquer les données\", empty: \"Pas encore de données.\", kinds: { bar: \"Histogramme\" } }}\n    >\n      <BarChart title=\"Crédits consommés par mois\" data={months} x=\"month\" xLabel=\"Mois\" y=\"credits\" yLabel=\"Crédits\" format=\"compact\" />\n    </ChartsProvider>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": {
+    "entry": "@krizaka/charts/native",
+    "import": "import { ChartsProvider } from \"@krizaka/charts/native\";",
+    "differences": [
+      "Also takes `scheme` and `theme` (the app's roles); no `useSlidingWindow` export on native."
+    ],
+    "props": [
+      {
+        "component": "ChartsProvider",
+        "description": "Sets the locale, brand, words, scheme and theme of every chart below it.",
+        "props": [
+          {
+            "name": "brand",
+            "type": "BrandId",
+            "default": null,
+            "description": "The brand whose palette leads. Default Krizaka.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "ChartLabelsInput",
+            "default": null,
+            "description": "The words: the readout, the summary.",
+            "required": false
+          },
+          {
+            "name": "locale",
+            "type": "Locale",
+            "default": null,
+            "description": "The locale of every figure and date. Default `\"en-US\"`.",
+            "required": false
+          },
+          {
+            "name": "scheme",
+            "type": "Mode",
+            "default": null,
+            "description": "Dark or light. Default: the device's (pass `useTheme().scheme` of\n@krizaka /ui/native to follow the app).",
+            "required": false
+          },
+          {
+            "name": "theme",
+            "type": "Partial<ChartTheme>",
+            "default": null,
+            "description": "The app's colour roles (`useTheme().theme` of\n@krizaka /ui/native): a product's brand overrides apply.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "french-orazaka",
+        "title": "French, Orazaka",
+        "description": "French figures, the Orazaka palette.",
+        "path": "examples/charts-provider/native/french-orazaka.tsx",
+        "module": "@krizaka/charts/registry/examples/charts-provider/native/french-orazaka",
+        "code": "import { BarChart, ChartsProvider } from \"@krizaka/charts/native\";\n\nconst months = [\n  { month: \"2026-06\", credits: 412_000 },\n  { month: \"2026-07\", credits: 468_500 },\n  { month: \"2026-08\", credits: 391_200 },\n  { month: \"2026-09\", credits: 523_900 },\n];\n\n// In an app: scheme and theme from @krizaka/ui/native's useTheme(), so the charts follow its mode and brand.\nexport default function FrenchOrazaka() {\n  return (\n    <ChartsProvider locale=\"fr-FR\" brand=\"orazaka\">\n      <BarChart title=\"Crédits consommés par mois\" data={months} x=\"month\" y=\"credits\" yLabel=\"Crédits\" format=\"compact\" />\n    </ChartsProvider>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/charts-provider/native/french-orazaka.dark.png",
+          "light": "examples/charts-provider/native/french-orazaka.light.png"
+        }
+      }
+    ]
+  },
+  "files": [],
+  "dependencies": [
+    "@krizaka/intl@workspace:^",
+    "d3-geo@^3.1.1",
+    "echarts@^6.1.0",
+    "topojson-client@^3.1.0"
+  ],
+  "registryDependencies": [],
+  "demo": {
+    "path": "examples/charts-provider/french-orazaka.tsx",
+    "content": "import { BarChart } from \"@krizaka/charts/bar\";\nimport { ChartsProvider } from \"@krizaka/charts/provider\";\n\nconst months = [\n  { month: \"2026-06\", credits: 412_000 },\n  { month: \"2026-07\", credits: 468_500 },\n  { month: \"2026-08\", credits: 391_200 },\n  { month: \"2026-09\", credits: 523_900 },\n];\n\n// Once near the app's root: the locale, the brand's palette, the words from the app's catalogue.\nexport default function FrenchOrazaka() {\n  return (\n    <ChartsProvider\n      locale=\"fr-FR\"\n      brand=\"orazaka\"\n      labels={{ showData: \"Voir les données\", hideData: \"Masquer les données\", empty: \"Pas encore de données.\", kinds: { bar: \"Histogramme\" } }}\n    >\n      <BarChart title=\"Crédits consommés par mois\" data={months} x=\"month\" xLabel=\"Mois\" y=\"credits\" yLabel=\"Crédits\" format=\"compact\" />\n    </ChartsProvider>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "ChartsProvider",
+      "description": "Sets the locale, the brand and the words of every chart below it.",
+      "props": [
+        {
+          "name": "brand",
+          "type": "BrandId",
+          "default": null,
+          "description": "The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it\nwhen the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).",
+          "required": false
+        },
+        {
+          "name": "labels",
+          "type": "ChartLabelsInput",
+          "default": null,
+          "description": "The words, translated: the buttons, the states, the written summary.",
+          "required": false
+        },
+        {
+          "name": "locale",
+          "type": "Locale",
+          "default": null,
+          "description": "The locale of every figure and date (`\"fr-FR\"`). Default `\"en-US\"`.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/registry/examples/area-chart/credits-usage.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/charts registry. */
+declare const Example: ComponentType;
+export default Example;