@silverpoint/react 0.1.0 → 0.2.0

package/README.md

@@ -0,0 +1,228 @@
+# @silverpoint/react
+
+React components for **silverpoint**: charts drawn in the manner of a Renaissance silverpoint
+drawing, with a fine silver line on a prepared ground, tone built from hatching, and white
+heightening on the live value. The hand-drawn irregularity is only in the ornament. The data
+geometry is exact, and every chart has a `precision` mode that turns the inking off.
+
+- 33 charts, each importable on its own subpath so you only ship the charts you use.
+- React 18.2+ and 19. Client components (`"use client"`) and server entry points for React
+  Server Components.
+- Accessible: an accessible name, a hidden data table, keyboard navigation, and a
+  `prefers-contrast` / `forced-colors` fallback to `precision`.
+
+## Installation
+
+```sh
+npm install @silverpoint/react @silverpoint/grounds @silverpoint/fonts
+```
+
+| Package | Why |
+|---|---|
+| `@silverpoint/react` | The components. Brings `@silverpoint/core` with it. |
+| `@silverpoint/grounds` | The stylesheet (`styles.css`) that colours the strokes. Required. |
+| `@silverpoint/fonts` | Optional. Self-hosted EB Garamond, the typeface the charts are designed for. |
+
+Peer dependencies: `react` and `react-dom` `^18.2.0 || ^19.0.0`. You need a bundler (Vite,
+Next.js, or anything else that resolves `exports` and CSS imports). No `optimizeDeps` entry and
+no extra configuration are needed.
+
+Import the two stylesheets **once**, at the root of the app.
+
+## Quickstart (Vite)
+
+```sh
+npm create vite@latest my-charts -- --template react-ts
+cd my-charts
+npm install @silverpoint/react @silverpoint/grounds @silverpoint/fonts
+```
+
+Replace `src/App.tsx` with:
+
+```tsx
+import '@silverpoint/fonts/fonts.css';
+import '@silverpoint/grounds/styles.css';
+import { LineChart } from '@silverpoint/react/line-chart';
+
+const data = [
+  { hour: '00', hits: 18 },
+  { hour: '04', hits: 11 },
+  { hour: '08', hits: 42 },
+  { hour: '12', hits: 64 },
+  { hour: '16', hits: 57 },
+  { hour: '20', hits: 30 },
+];
+
+export default function App() {
+  return (
+    <div style={{ width: 480 }}>
+      <LineChart data={data} xKey="hour" valueKey="hits" title="Hits per hour" />
+    </div>
+  );
+}
+```
+
+Then run `npm run dev`. The chart takes the width of its container. `height` is the height of
+the drawing area and defaults to 160 px.
+
+## Examples
+
+### One ground for the whole app
+
+`SilverpointProvider` sets the ground, the substrate, the mode and the locale for every chart
+below it. A prop on a chart overrides the provider.
+
+```tsx
+import '@silverpoint/fonts/fonts.css';
+import '@silverpoint/grounds/styles.css';
+import { SilverpointProvider } from '@silverpoint/react';
+import { BarChart } from '@silverpoint/react/bar-chart';
+import { DonutChart } from '@silverpoint/react/donut-chart';
+
+const sales = [
+  { month: 'Jan', units: 120 },
+  { month: 'Feb', units: 98 },
+  { month: 'Mar', units: 143 },
+];
+
+const channels = [
+  { channel: 'Web', share: 54 },
+  { channel: 'Stores', share: 31 },
+  { channel: 'Partners', share: 15 },
+];
+
+export function Dashboard() {
+  return (
+    <SilverpointProvider ground="silverpoint" substrate="green" locale="en-GB">
+      <BarChart data={sales} xKey="month" valueKey="units" title="Units sold" unit="units" />
+      <DonutChart data={channels} nameKey="channel" valueKey="share" title="Sales by channel" centerLabel="%" />
+    </SilverpointProvider>
+  );
+}
+```
+
+Substrates: `cream` (the default), `green`, `blue`, `ochre`.
+
+### Precision mode
+
+`mode="precision"` switches the inking off entirely and draws exact, even strokes. It suits
+print, dense dashboards, and readers who prefer it. The chart switches to it by itself when the
+system asks for more contrast (`prefers-contrast: more` or `forced-colors: active`). No prop can
+override that.
+
+```tsx
+<LineChart data={data} xKey="hour" valueKey="hits" title="Hits per hour" mode="precision" />
+```
+
+### Interaction and a custom readout
+
+```tsx
+import { useState } from 'react';
+import { LineChart } from '@silverpoint/react/line-chart';
+
+export function Explorer({ data }: { data: { hour: string; hits: number }[] }) {
+  const [active, setActive] = useState<string>('—');
+  return (
+    <>
+      <LineChart
+        data={data}
+        xKey="hour"
+        valueKey="hits"
+        title="Hits per hour"
+        onActiveChange={(item) => setActive(item ? `${item.datum.hour}: ${item.value}` : '—')}
+        onSelect={(item) => console.log('selected', item.datum)}
+        tooltip={(item) => <strong>{item.value} hits</strong>}
+      />
+      <p>Under the pointer: {active}</p>
+    </>
+  );
+}
+```
+
+`onActiveChange` receives the item under the pointer or keyboard focus, and `null` when it
+leaves. `onSelect` fires on click, `Enter` or `Space`.
+
+### Imperative handle
+
+```tsx
+import { useRef } from 'react';
+import { LineChart, type ChartHandle } from '@silverpoint/react/line-chart';
+
+export function Exportable({ data }: { data: { hour: string; hits: number }[] }) {
+  const chart = useRef<ChartHandle>(null);
+  const download = () => {
+    const svg = chart.current?.toSVGString() ?? '';
+    const url = URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' }));
+    window.open(url);
+  };
+  return (
+    <>
+      <LineChart ref={chart} data={data} xKey="hour" valueKey="hits" title="Hits per hour" />
+      <button onClick={download}>Export SVG</button>
+    </>
+  );
+}
+```
+
+### Next.js and React Server Components
+
+The default subpaths are client components (`"use client"`). They work in the App Router and
+hydrate without a mismatch. For pure SVG with no client JavaScript, use the server entry point.
+It has no interaction, and `id`, `width` and `height` are required:
+
+```tsx
+// app/page.tsx — a Server Component
+import '@silverpoint/fonts/fonts.css';
+import '@silverpoint/grounds/styles.css';
+import { LineChart } from '@silverpoint/react/server/line-chart';
+
+const data = [
+  { hour: '00', hits: 18 },
+  { hour: '12', hits: 64 },
+  { hour: '20', hits: 30 },
+];
+
+export default function Page() {
+  return <LineChart id="hits" width={480} height={160} data={data} xKey="hour" valueKey="hits" title="Hits per hour" />;
+}
+```
+
+## Props every chart shares
+
+| Prop | Default | |
+|---|---|---|
+| `data` | demo dataset | The rows to draw. |
+| `ground` / `substrate` / `mode` | `'silverpoint'` / `'cream'` / `'ink'` | Style; `mode: 'precision'` turns off inking. |
+| `seed`, `id` | derived, stable | The hand drawing is deterministic: same props, same strokes. |
+| `height`, `width` | `160`, container width | Size of the drawing area in px. |
+| `chrome` | `'card'` | `'bare'` draws only the plot. |
+| `title`, `badge`, `value`, `unit`, `footerLeft`, `footerRight` | — | The card's text. |
+| `label`, `description`, `dataTable` | from `title`, —, `'hidden'` | Accessibility. |
+| `locale`, `numberFormat` | environment | Number formatting. |
+| `hatchFill` | `'tile'` | `'per-shape'` gives richer hatching at a much greater weight. |
+
+## The 33 charts
+
+Every chart is available as `@silverpoint/react/<kebab-case-name>` (and from the barrel
+`@silverpoint/react`):
+
+`LineChart`, `StepChart`, `SparklineRows`, `KpiCard`, `BarChart`, `StackedBarChart`,
+`ComposedChart`, `WaterfallChart`, `FunnelChart`, `BulletChart`, `PyramidChart`,
+`CandlestickChart`, `AreaChart`, `RangeBandChart`, `StreamChart`, `DonutChart`, `RadarChart`,
+`PolarBarChart`, `RadialArcGroup`, `RadialRings`, `GaugeArc`, `MeterChart`, `ScatterChart`,
+`BubbleChart`, `HeatmapChart`, `TreemapChart`, `SankeyChart`, `ActivityGrid`, `CoxcombChart`,
+`WindRose`, `VolvelleChart`, `ChordRing`, `OrbitChart`.
+
+Each chart's own props (`xKey`, `valueKey`, `nameKey`…) are typed and documented in its
+`*Props` type. The [repository](https://github.com/ecrespo/silverpoint) holds the API
+specification and the documentation site with the gallery.
+
+## Related packages
+
+[`@silverpoint/vue`](https://www.npmjs.com/package/@silverpoint/vue) ·
+[`@silverpoint/angular`](https://www.npmjs.com/package/@silverpoint/angular) ·
+[`@silverpoint/grounds`](https://www.npmjs.com/package/@silverpoint/grounds) ·
+[`@silverpoint/fonts`](https://www.npmjs.com/package/@silverpoint/fonts) ·
+[`@silverpoint/core`](https://www.npmjs.com/package/@silverpoint/core)
+
+MIT.

package/dist/activity-grid.js

@@ -1,8 +1,9 @@
 'use client';
 import {
   ActivityGrid
-} from "./chunk-PBT76UXS.js";
-import "./chunk-BHZNDYU3.js";
+} from "./chunk-X2ACXB2U.js";
+import "./chunk-WNX4XCL6.js";
+import "./chunk-4GQ5X2WK.js";
 export {
   ActivityGrid
 };

package/dist/area-chart.js

@@ -1,8 +1,9 @@
 'use client';
 import {
   AreaChart
-} from "./chunk-ORIH4UQP.js";
-import "./chunk-BHZNDYU3.js";
+} from "./chunk-7KED5KUU.js";
+import "./chunk-WNX4XCL6.js";
+import "./chunk-4GQ5X2WK.js";
 export {
   AreaChart
 };

package/dist/bar-chart.js

@@ -1,8 +1,9 @@
 'use client';
 import {
   BarChart
-} from "./chunk-4DUH2UHE.js";
-import "./chunk-BHZNDYU3.js";
+} from "./chunk-4LS7B7CK.js";
+import "./chunk-WNX4XCL6.js";
+import "./chunk-4GQ5X2WK.js";
 export {
   BarChart
 };

package/dist/bubble-chart.js

@@ -1,8 +1,9 @@
 'use client';
 import {
   BubbleChart
-} from "./chunk-6FZO4SMF.js";
-import "./chunk-BHZNDYU3.js";
+} from "./chunk-74ONV2GE.js";
+import "./chunk-WNX4XCL6.js";
+import "./chunk-4GQ5X2WK.js";
 export {
   BubbleChart
 };

package/dist/bullet-chart.js

@@ -1,8 +1,9 @@
 'use client';
 import {
   BulletChart
-} from "./chunk-O2DNGRM7.js";
-import "./chunk-BHZNDYU3.js";
+} from "./chunk-WOKDS6AK.js";
+import "./chunk-WNX4XCL6.js";
+import "./chunk-4GQ5X2WK.js";
 export {
   BulletChart
 };

package/dist/candlestick-chart.js

@@ -1,8 +1,9 @@
 'use client';
 import {
   CandlestickChart
-} from "./chunk-KPWHWNZH.js";
-import "./chunk-BHZNDYU3.js";
+} from "./chunk-XWSCKTPG.js";
+import "./chunk-WNX4XCL6.js";
+import "./chunk-4GQ5X2WK.js";
 export {
   CandlestickChart
 };

package/dist/chord-ring.js

@@ -1,8 +1,9 @@
 'use client';
 import {
   ChordRing
-} from "./chunk-2OAPH7JN.js";
-import "./chunk-BHZNDYU3.js";
+} from "./chunk-PWFDYIXV.js";
+import "./chunk-WNX4XCL6.js";
+import "./chunk-4GQ5X2WK.js";
 export {
   ChordRing
 };

package/dist/{chunk-FDROMD5U.js → chunk-2NQ4DXLT.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.js";
+} from "./chunk-WNX4XCL6.js";
 
 // src/step-chart.tsx
 import { stepChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var StepChart = createClientChart(stepChart);
 export {
   StepChart
 };
-//# sourceMappingURL=chunk-FDROMD5U.js.map
+//# sourceMappingURL=chunk-2NQ4DXLT.js.map

package/dist/{chunk-INZGRNO3.js → chunk-46S63XYT.js}

@@ -1,4 +1,5 @@
 // src/server/create-server-chart.tsx
+import { diagnose, inCell, instanceId } from "@silverpoint/core";
 import { renderChart } from "@silverpoint/grounds";
 
 // src/chart-svg.tsx
@@ -12,6 +13,7 @@ function Path({ path }) {
       "data-role": path.role,
       "data-paint": path.paint,
       "data-dash": path.dash ?? void 0,
+      "data-weight": path.weight ?? void 0,
       fill: path.fill ?? void 0
     }
   );
@@ -86,8 +88,13 @@ function ChartFrame({ rendered, className, rootProps, rootRef, overlay }) {
 // src/server/create-server-chart.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 function createServerChart(recipe) {
-  function Chart(props) {
-    const rendered = renderChart(recipe, props, { id: props.id });
+  function Chart({ dashboardCell, ...own }) {
+    const { props, width } = inCell(own, dashboardCell, recipe);
+    if (process.env.NODE_ENV !== "production") {
+      if (props.id === void 0) diagnose("SP002", recipe.name, { property: "id", message: "A server chart outside a Dashboard needs an `id`; a fixed one is used, which two such charts on a page would share." });
+      if (width === void 0) diagnose("SP003", recipe.name, { property: "width", message: "A server chart cannot be measured: pass `width`, or place it in a Dashboard." });
+    }
+    const rendered = renderChart(recipe, props, { id: props.id ?? instanceId(recipe.name, "server"), width });
     return /* @__PURE__ */ jsx3(ChartFrame, { rendered, className: props.className });
   }
   Chart.displayName = recipe.name;
@@ -97,4 +104,4 @@ function createServerChart(recipe) {
 export {
   createServerChart
 };
-//# sourceMappingURL=chunk-INZGRNO3.js.map
+//# sourceMappingURL=chunk-46S63XYT.js.map

package/dist/chunk-46S63XYT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/server/create-server-chart.tsx","../src/chart-svg.tsx","../src/chart-frame.tsx"],"sourcesContent":["import { diagnose, inCell, instanceId, type ChartRecipe, type CommonChartProps } from '@silverpoint/core';\nimport { renderChart } from '@silverpoint/grounds';\nimport { ChartFrame } from '../chart-frame';\nimport type { CellChartProps } from '../dashboard-markup';\n\n/**\n * Props of a server chart: pure SVG, no client JavaScript (REQ-104); interaction props do not\n * exist here. Nothing can be measured on the server and a server component has no mount position\n * to derive a unique id from (TD §6), so a chart standing alone passes `id`, `width` and `height`;\n * inside a `Dashboard` the cell supplies them (REQ-206, REQ-209).\n */\nexport type ServerChartProps<P extends CommonChartProps> = Omit<P, 'id' | 'width' | 'height'> & {\n  readonly id?: string;\n  readonly width?: number;\n  readonly height?: number;\n  readonly onActiveChange?: never;\n  readonly onSelect?: never;\n};\n\n/** The server component of a recipe, for React Server Components and static rendering. */\nexport function createServerChart<P extends CommonChartProps>(recipe: ChartRecipe<P>) {\n  function Chart({ dashboardCell, ...own }: ServerChartProps<P> & CellChartProps) {\n    const { props, width } = inCell(own as unknown as P, dashboardCell, recipe);\n    if (process.env.NODE_ENV !== 'production') {\n      if (props.id === undefined) diagnose('SP002', recipe.name, { property: 'id', message: 'A server chart outside a Dashboard needs an `id`; a fixed one is used, which two such charts on a page would share.' });\n      if (width === undefined) diagnose('SP003', recipe.name, { property: 'width', message: 'A server chart cannot be measured: pass `width`, or place it in a Dashboard.' });\n    }\n    const rendered = renderChart(recipe, props, { id: props.id ?? instanceId(recipe.name, 'server'), width });\n    return <ChartFrame rendered={rendered} className={props.className} />;\n  }\n  Chart.displayName = recipe.name;\n  return Chart;\n}\n","import type { PathView, SvgView } from '@silverpoint/core';\n\nfunction Path({ path }: { readonly path: PathView }) {\n  return (\n    <path\n      d={path.d}\n      part={path.part}\n      data-role={path.role}\n      data-paint={path.paint}\n      data-dash={path.dash ?? undefined}\n      data-weight={path.weight ?? undefined}\n      fill={path.fill ?? undefined}\n    />\n  );\n}\n\n/** Writes the core's SVG view one field to one attribute; computes nothing (Art. 2). */\nexport function ChartSvg({ view }: { readonly view: SvgView }) {\n  const { svg } = view;\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={svg.viewBox}\n      width={svg.width}\n      height={svg.height}\n      className={svg.class}\n      data-substrate={svg.substrate}\n      data-mode={svg.mode}\n      role={svg.role}\n      aria-labelledby={svg.labelledby}\n    >\n      <title id={view.title.id}>{view.title.text}</title>\n      <desc id={view.desc.id}>{view.desc.text}</desc>\n      {view.patterns.length > 0 && (\n        <defs>\n          {view.patterns.map((pattern) => (\n            <pattern\n              key={pattern.id}\n              id={pattern.id}\n              width={pattern.width}\n              height={pattern.height}\n              patternUnits=\"userSpaceOnUse\"\n              patternTransform={pattern.transform}\n            >\n              {pattern.paths.map((path, index) => (\n                <Path key={index} path={path} />\n              ))}\n            </pattern>\n          ))}\n        </defs>\n      )}\n      {view.paths.map((path, index) => (\n        <Path key={index} path={path} />\n      ))}\n      {view.texts.map((text, index) => (\n        <text key={index} x={text.x} y={text.y} part={text.part} data-kind={text.kind} textAnchor={text.anchor}>\n          {text.text}\n        </text>\n      ))}\n    </svg>\n  );\n}\n","import type { DataTable } from '@silverpoint/core';\nimport type { RenderedChart } from '@silverpoint/grounds';\nimport type { HTMLAttributes, ReactNode, Ref } from 'react';\nimport { ChartSvg } from './chart-svg';\n\nfunction Table({ table, id, visibility }: { readonly table: DataTable; readonly id: string; readonly visibility: string }) {\n  return (\n    <div className=\"sp-table-box\" data-visibility={visibility}>\n      <table className=\"sp-table\" id={id} data-visibility={visibility}>\n        <caption>{table.caption}</caption>\n        <thead>\n          <tr>\n            {table.columns.map((column, index) => (\n              <th key={index} scope=\"col\">\n                {column}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {table.rows.map((row, index) => (\n            <tr key={index}>\n              {row.map((cell, column) =>\n                column === 0 ? (\n                  <th key={column} scope=\"row\">\n                    {cell}\n                  </th>\n                ) : (\n                  <td key={column}>{cell}</td>\n                ),\n              )}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nexport interface ChartFrameProps {\n  readonly rendered: RenderedChart;\n  readonly className?: string;\n  /** Interaction handlers and focus attributes, supplied by the client component only. */\n  readonly rootProps?: HTMLAttributes<HTMLDivElement>;\n  readonly rootRef?: Ref<HTMLDivElement>;\n  /** Readout and marker, drawn over the chart by the client component. */\n  readonly overlay?: ReactNode;\n}\n\n/** The chart's DOM: root, SVG, overlay and tabular alternative (API Spec §10). */\nexport function ChartFrame({ rendered, className, rootProps, rootRef, overlay }: ChartFrameProps) {\n  const classes = ['sp-root', `sp-ground-${rendered.ground}`, className].filter(Boolean).join(' ');\n  return (\n    <div\n      className={classes}\n      data-substrate={rendered.substrate}\n      data-chrome={rendered.chrome}\n      data-status={rendered.status}\n      ref={rootRef}\n      {...rootProps}\n    >\n      <ChartSvg view={rendered.view} />\n      {overlay}\n      {rendered.dataTable !== 'none' && (\n        <Table table={rendered.table} id={rendered.ids.table} visibility={rendered.dataTable} />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs","jsx"]}

package/dist/chunk-4GQ5X2WK.js

@@ -0,0 +1,10 @@
+'use client';
+
+// src/link-context.ts
+import { createContext } from "react";
+var DashboardLinkContext = createContext(null);
+
+export {
+  DashboardLinkContext
+};
+//# sourceMappingURL=chunk-4GQ5X2WK.js.map

package/dist/chunk-4GQ5X2WK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/link-context.ts"],"sourcesContent":["import type { LinkState } from '@silverpoint/core';\nimport { createContext } from 'react';\n\n/** A linked dashboard's one reactive value, and how a chart sets it (TD DD-016, REQ-216). */\nexport interface DashboardLinkValue {\n  readonly key: string;\n  readonly state: LinkState | null;\n  set(next: LinkState | null): void;\n}\n\nexport const DashboardLinkContext = createContext<DashboardLinkValue | null>(null);\n"],"mappings":";;;AACA,SAAS,qBAAqB;AASvB,IAAM,uBAAuB,cAAyC,IAAI;","names":[]}

package/dist/{chunk-4DUH2UHE.js → chunk-4LS7B7CK.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.js";
+} from "./chunk-WNX4XCL6.js";
 
 // src/bar-chart.tsx
 import { barChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var BarChart = createClientChart(barChart);
 export {
   BarChart
 };
-//# sourceMappingURL=chunk-4DUH2UHE.js.map
+//# sourceMappingURL=chunk-4LS7B7CK.js.map

package/dist/{chunk-CXXCUD4B.js → chunk-6KPX5HYV.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.js";
+} from "./chunk-WNX4XCL6.js";
 
 // src/line-chart.tsx
 import { lineChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var LineChart = createClientChart(lineChart);
 export {
   LineChart
 };
-//# sourceMappingURL=chunk-CXXCUD4B.js.map
+//# sourceMappingURL=chunk-6KPX5HYV.js.map

package/dist/{chunk-6FZO4SMF.js → chunk-74ONV2GE.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.js";
+} from "./chunk-WNX4XCL6.js";
 
 // src/bubble-chart.tsx
 import { bubbleChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var BubbleChart = createClientChart(bubbleChart);
 export {
   BubbleChart
 };
-//# sourceMappingURL=chunk-6FZO4SMF.js.map
+//# sourceMappingURL=chunk-74ONV2GE.js.map

package/dist/{chunk-ORIH4UQP.js → chunk-7KED5KUU.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.js";
+} from "./chunk-WNX4XCL6.js";
 
 // src/area-chart.tsx
 import { areaChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var AreaChart = createClientChart(areaChart);
 export {
   AreaChart
 };
-//# sourceMappingURL=chunk-ORIH4UQP.js.map
+//# sourceMappingURL=chunk-7KED5KUU.js.map

package/dist/{chunk-Y7WZS3VB.js → chunk-A42AKCPS.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.js";
+} from "./chunk-WNX4XCL6.js";
 
 // src/composed-chart.tsx
 import { composedChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var ComposedChart = createClientChart(composedChart);
 export {
   ComposedChart
 };
-//# sourceMappingURL=chunk-Y7WZS3VB.js.map
+//# sourceMappingURL=chunk-A42AKCPS.js.map

package/dist/{chunk-WLHXHAEV.js → chunk-CERHTEML.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.js";
+} from "./chunk-WNX4XCL6.js";
 
 // src/radial-arc-group.tsx
 import { radialArcGroup } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var RadialArcGroup = createClientChart(radialArcGroup);
 export {
   RadialArcGroup
 };
-//# sourceMappingURL=chunk-WLHXHAEV.js.map
+//# sourceMappingURL=chunk-CERHTEML.js.map

package/dist/{chunk-2JXPSUCK.js → chunk-DTBEXYYC.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.js";
+} from "./chunk-WNX4XCL6.js";
 
 // src/stacked-bar-chart.tsx
 import { stackedBarChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var StackedBarChart = createClientChart(stackedBarChart);
 export {
   StackedBarChart
 };
-//# sourceMappingURL=chunk-2JXPSUCK.js.map
+//# sourceMappingURL=chunk-DTBEXYYC.js.map

package/dist/{chunk-JCIEWEQC.js → chunk-E5LIZKJT.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.js";
+} from "./chunk-WNX4XCL6.js";
 
 // src/sparkline-rows.tsx
 import { sparklineRows } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var SparklineRows = createClientChart(sparklineRows);
 export {
   SparklineRows
 };
-//# sourceMappingURL=chunk-JCIEWEQC.js.map
+//# sourceMappingURL=chunk-E5LIZKJT.js.map

package/dist/{chunk-R6PUPQUI.js → chunk-FQHAHZBR.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.js";
+} from "./chunk-WNX4XCL6.js";
 
 // src/funnel-chart.tsx
 import { funnelChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var FunnelChart = createClientChart(funnelChart);
 export {
   FunnelChart
 };
-//# sourceMappingURL=chunk-R6PUPQUI.js.map
+//# sourceMappingURL=chunk-FQHAHZBR.js.map

package/dist/{chunk-HH2RZCH6.js → chunk-FZMY6NWJ.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.js";
+} from "./chunk-WNX4XCL6.js";
 
 // src/treemap-chart.tsx
 import { treemapChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var TreemapChart = createClientChart(treemapChart);
 export {
   TreemapChart
 };
-//# sourceMappingURL=chunk-HH2RZCH6.js.map
+//# sourceMappingURL=chunk-FZMY6NWJ.js.map

package/dist/{chunk-5LQGSI6N.js → chunk-GBTH55AM.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.js";
+} from "./chunk-WNX4XCL6.js";
 
 // src/polar-bar-chart.tsx
 import { polarBarChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var PolarBarChart = createClientChart(polarBarChart);
 export {
   PolarBarChart
 };
-//# sourceMappingURL=chunk-5LQGSI6N.js.map
+//# sourceMappingURL=chunk-GBTH55AM.js.map

package/dist/{chunk-KTBGRGB7.js → chunk-GYUTG5R2.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.js";
+} from "./chunk-WNX4XCL6.js";
 
 // src/heatmap-chart.tsx
 import { heatmapChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var HeatmapChart = createClientChart(heatmapChart);
 export {
   HeatmapChart
 };
-//# sourceMappingURL=chunk-KTBGRGB7.js.map
+//# sourceMappingURL=chunk-GYUTG5R2.js.map

package/dist/{chunk-NAYUAF7O.js → chunk-H3UH7F5S.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.js";
+} from "./chunk-WNX4XCL6.js";
 
 // src/orbit-chart.tsx
 import { orbitChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var OrbitChart = createClientChart(orbitChart);
 export {
   OrbitChart
 };
-//# sourceMappingURL=chunk-NAYUAF7O.js.map
+//# sourceMappingURL=chunk-H3UH7F5S.js.map

package/dist/{chunk-AQMWZQ2P.js → chunk-H4NCK6RE.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.js";
+} from "./chunk-WNX4XCL6.js";
 
 // src/gauge-arc.tsx
 import { gaugeArc } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var GaugeArc = createClientChart(gaugeArc);
 export {
   GaugeArc
 };
-//# sourceMappingURL=chunk-AQMWZQ2P.js.map
+//# sourceMappingURL=chunk-H4NCK6RE.js.map

package/dist/{chunk-LOIVX5IV.js → chunk-J5OOZDFF.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.js";
+} from "./chunk-WNX4XCL6.js";
 
 // src/meter-chart.tsx
 import { meterChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var MeterChart = createClientChart(meterChart);
 export {
   MeterChart
 };
-//# sourceMappingURL=chunk-LOIVX5IV.js.map
+//# sourceMappingURL=chunk-J5OOZDFF.js.map

package/dist/{chunk-BIIINOXE.js → chunk-JRAHTS5O.js}

@@ -1,7 +1,7 @@
 'use client';
 import {
   createClientChart
-} from "./chunk-BHZNDYU3.js";
+} from "./chunk-WNX4XCL6.js";
 
 // src/stream-chart.tsx
 import { streamChart } from "@silverpoint/core";
@@ -10,4 +10,4 @@ var StreamChart = createClientChart(streamChart);
 export {
   StreamChart
 };
-//# sourceMappingURL=chunk-BIIINOXE.js.map
+//# sourceMappingURL=chunk-JRAHTS5O.js.map