@zuilib/charts 0.3.0 → 0.4.0

package/README.md

@@ -8,14 +8,20 @@ other and to `@zuilib/data-grid` — without a hard dependency on it.
 ## Install
 
 ```bash
-pnpm add @zuilib/charts @zuilib/components @zuilib/tokens recharts
+pnpm add @zuilib/charts
 ```
 
-`recharts` (v3), `react` and `@zuilib/tokens` are peer dependencies. The
-package imports the `@zuilib/components` primitives, so the components'
-Tailwind source (or the prebuilt `zui.css`) must be loaded once in your
-app; with the Tailwind source, add `@source "…/@zuilib/charts/dist"` so the
-chart utilities are generated.
+React and React DOM are the required peers. Recharts, the ZUI primitives and
+tokens install transitively. Install `recharts` yourself only when your own
+code imports it for hand-written composition.
+
+For a Tailwind v4 host, load the component and chart source entries once:
+
+```css
+@import "tailwindcss";
+@import "@zuilib/primitives/tailwind.css";
+@import "@zuilib/charts/tailwind.css";
+```
 
 ## Usage
 
@@ -47,7 +53,7 @@ const spec = {
 | `formats` | `Record<string, FormatterFn \| FormatterFactory>` | — custom formatter tokens the spec may name (functions stay out of the spec) |
 | `locale` | `string` | user's locale — BCP 47 tag for formatted values |
 | `width` / `height` | `number` | responsive — fixed pixel size for tests and SSR |
-| `aspect` | `number` | `16/9` — responsive width/height ratio when `height` is left out |
+| `aspect` | `number` | `16/9` — responsive width/height ratio when `height` is left out; the chart never gets shorter than 200px |
 | `loading` | `boolean` | `false` — renders a skeleton instead of the chart |
 | `error` | `ReactNode` | — renders an error state instead of the chart |
 | `emptyState` | `ReactNode` | the `noData` label — renders when `rows` is empty |
@@ -58,6 +64,19 @@ const spec = {
 | `ariaLabel` | `string` | the spec's title — accessible name of the figure |
 | `className` | `string` | merged onto the container |
 
+## Sizing
+
+A chart fills its container. Leave `width` and `height` out and the frame
+measures itself: the height follows `aspect` (16/9) with a 200px floor so a
+phone-width chart keeps a readable plot; pass `height` to fix the height and
+keep the width fluid; pass both for a fixed size (tests, SSR). The frame is
+a CSS size container (`@container`, `min-w-0`), so it never holds a flex or
+grid parent open at the width of a previous render — put it in any column
+without a `min-w-0` of your own. Under 384px the value axis sizes to its
+labels and the category axis keeps only its end ticks; the legend wraps and,
+on touch pointers, its buttons grow to 44px hit areas. Desktop rendering
+does not change.
+
 ## Entry points
 
 `@zuilib/charts` (or `./chart`) is the config-driven renderer: ten chart

package/dist/chart-frame.js

@@ -2,7 +2,7 @@
 import {
   ChartFrame,
   chart_frame_default
-} from "./chunk-G4FXJJ66.js";
+} from "./chunk-SID6O4PY.js";
 import "./chunk-7WABBHMT.js";
 import "./chunk-3VGLTPGL.js";
 import "./chunk-UN3XPBZ5.js";

package/dist/chart-legend.js

@@ -2,7 +2,7 @@
 import {
   ChartLegendList,
   chart_legend_default
-} from "./chunk-SHQZRND7.js";
+} from "./chunk-4FWNWLEJ.js";
 import "./chunk-WVWGHGZE.js";
 import "./chunk-UN3XPBZ5.js";
 import "./chunk-IPOBQIYU.js";

package/dist/chart-tooltip.js

@@ -2,7 +2,7 @@
 import {
   ChartTooltipPanel,
   chart_tooltip_default
-} from "./chunk-PV27RZSV.js";
+} from "./chunk-FDLNPZV6.js";
 import "./chunk-IPOBQIYU.js";
 import "./chunk-7WJ26NHR.js";
 export {

package/dist/chart.js

@@ -4,14 +4,14 @@ import {
   chart_default,
   configFromSpec,
   crossFilterFieldOf
-} from "./chunk-BFTWWI46.js";
-import "./chunk-YMPZODMC.js";
+} from "./chunk-NDBDHQME.js";
+import "./chunk-J2KWQJGC.js";
 import "./chunk-HNJKYOPE.js";
-import "./chunk-G4FXJJ66.js";
+import "./chunk-SID6O4PY.js";
 import "./chunk-7WABBHMT.js";
 import "./chunk-3VGLTPGL.js";
-import "./chunk-PV27RZSV.js";
-import "./chunk-SHQZRND7.js";
+import "./chunk-FDLNPZV6.js";
+import "./chunk-4FWNWLEJ.js";
 import "./chunk-WVWGHGZE.js";
 import "./chunk-UN3XPBZ5.js";
 import "./chunk-IPOBQIYU.js";

package/dist/{chunk-SHQZRND7.js → chunk-4FWNWLEJ.js}

@@ -12,8 +12,9 @@ import {
 } from "./chunk-7WJ26NHR.js";
 
 // src/chart-legend.tsx
-import { cn } from "@zuilib/components/lib/cn";
-import { focusRingClasses } from "@zuilib/components/lib/focus";
+import { cn } from "@zuilib/primitives/lib/cn";
+import { focusRingClasses } from "@zuilib/primitives/lib/focus";
+import { touchTargetClasses } from "@zuilib/primitives/lib/sizes";
 import { jsx, jsxs } from "react/jsx-runtime";
 function ChartLegendList({ payload, className }) {
   const { config, labels, hiddenSeries, onLegendClick, categoryField, categories } = useChartContext();
@@ -46,7 +47,11 @@ function ChartLegendList({ payload, className }) {
             "aria-label": fillLabel(labels.toggleSeries, { series: entry.name }),
             "data-slot": "chart-legend-button",
             className: cn(
-              "text-muted-foreground flex cursor-pointer items-center gap-1.5 rounded-sm px-1 py-0.5 text-xs transition-opacity",
+              "text-muted-foreground flex min-w-0 max-w-full cursor-pointer items-center gap-1.5 rounded-sm px-1 py-0.5 text-xs transition-opacity",
+              /* Touch: a 44px hit area; the legend reports its measured
+                 height to Recharts, so the plot gives way to it. */
+              touchTargetClasses,
+              "pointer-coarse:px-2",
               focusRingClasses,
               off && "opacity-45"
             ),
@@ -67,7 +72,7 @@ function ChartLegendList({ payload, className }) {
                   style: { backgroundColor: entry.color }
                 }
               ),
-              entry.name
+              /* @__PURE__ */ jsx("span", { "data-slot": "chart-legend-label", className: "min-w-0 text-start break-words", children: entry.name })
             ]
           }
         ) }, entry.key);

package/dist/{chunk-PV27RZSV.js → chunk-FDLNPZV6.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-7WJ26NHR.js";
 
 // src/chart-tooltip.tsx
-import { cn } from "@zuilib/components/lib/cn";
+import { cn } from "@zuilib/primitives/lib/cn";
 import { jsx, jsxs } from "react/jsx-runtime";
 function ChartTooltipPanel({
   active,
@@ -25,7 +25,9 @@ function ChartTooltipPanel({
     {
       "data-slot": "chart-tooltip",
       className: cn(
-        "bg-popover text-popover-foreground border-border min-w-32 rounded-md border px-2.5 py-1.5 shadow-md",
+        /* Never wider than the frame: Recharts keeps the panel inside the
+           chart box, so this is what keeps it inside the viewport too. */
+        "bg-popover text-popover-foreground border-border min-w-32 max-w-[calc(100cqw-1rem)] rounded-md border px-2.5 py-1.5 shadow-md",
         className
       ),
       children: [
@@ -45,7 +47,7 @@ function ChartTooltipPanel({
                 style: { backgroundColor: series ? seriesColorVar(field) : entry.color }
               }
             ),
-            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: name }),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground min-w-0 break-words", children: name }),
             /* @__PURE__ */ jsx("span", { className: "text-foreground ms-auto font-mono font-medium tabular-nums", children: format(entry.value) })
           ] }, `${field}-${index}`);
         }) })

package/dist/{chunk-YMPZODMC.js → chunk-J2KWQJGC.js}

@@ -9,10 +9,13 @@ import {
 } from "./chunk-3VGLTPGL.js";
 import {
   ChartTooltipPanel
-} from "./chunk-PV27RZSV.js";
+} from "./chunk-FDLNPZV6.js";
 import {
   ChartLegendList
-} from "./chunk-SHQZRND7.js";
+} from "./chunk-4FWNWLEJ.js";
+import {
+  ChartContext
+} from "./chunk-IPOBQIYU.js";
 import {
   cartesianGridDefaults,
   chartColorVar,
@@ -27,6 +30,7 @@ import {
 import { Area, AreaChart } from "recharts";
 
 // src/charts/cartesian.tsx
+import { useContext } from "react";
 import { Brush, CartesianGrid, Legend, ReferenceLine, Tooltip, XAxis, YAxis } from "recharts";
 import { jsx } from "react/jsx-runtime";
 function stackIdOf(series, stacked) {
@@ -35,6 +39,11 @@ function stackIdOf(series, stacked) {
 function valueFormatOf(spec, stacked) {
   return stacked === "percent" ? "percent" : spec.yAxis?.format ?? "number";
 }
+function useNarrowFrame() {
+  return useContext(ChartContext)?.narrow ?? false;
+}
+var narrowXAxisProps = { interval: "preserveStartEnd", minTickGap: 16 };
+var narrowYAxisProps = { width: "auto" };
 function renderXAxis(xKey, spec, formats, options) {
   const axis = spec.xAxis ?? {};
   const numeric = options?.numeric || axis.scale !== void 0 && axis.scale !== "band";
@@ -43,6 +52,7 @@ function renderXAxis(xKey, spec, formats, options) {
     {
       dataKey: xKey,
       ...xAxisDefaults,
+      ...options?.narrow ? narrowXAxisProps : {},
       type: numeric ? "number" : "category",
       ...axis.scale === "log" ? { scale: "log", domain: ["auto", "auto"] } : {},
       ...axis.scale === "time" ? { domain: ["dataMin", "dataMax"] } : {},
@@ -54,14 +64,16 @@ function renderXAxis(xKey, spec, formats, options) {
     "x"
   );
 }
-function renderYAxes(spec, formats, valueFormat, hasSecondary) {
+function renderYAxes(spec, formats, valueFormat, hasSecondary, options) {
   const y = spec.yAxis ?? {};
+  const narrowProps = options?.narrow ? narrowYAxisProps : {};
   const axes = [
     /* @__PURE__ */ jsx(
       YAxis,
       {
         yAxisId: "primary",
         ...yAxisDefaults,
+        ...narrowProps,
         hide: y.hidden,
         domain: y.domain,
         tickCount: y.tickCount,
@@ -80,6 +92,7 @@ function renderYAxes(spec, formats, valueFormat, hasSecondary) {
           yAxisId: "secondary",
           orientation: "right",
           ...yAxisDefaults,
+          ...narrowProps,
           hide: secondary.hidden,
           domain: secondary.domain,
           tickCount: secondary.tickCount,
@@ -187,6 +200,7 @@ function AreaChartRenderer({
   animate
 }) {
   warnOnSpecIssues(spec);
+  const narrow = useNarrowFrame();
   const hasSecondary = spec.series.some((s) => s.axis === "secondary");
   const valueFormat = valueFormatOf(spec, spec.stacked);
   return /* @__PURE__ */ jsxs(
@@ -200,8 +214,8 @@ function AreaChartRenderer({
       margin: { top: 8, bottom: 4 },
       children: [
         renderGrid(spec),
-        renderXAxis(spec.xKey, spec, formats),
-        renderYAxes(spec, formats, valueFormat, hasSecondary),
+        renderXAxis(spec.xKey, spec, formats, { narrow }),
+        renderYAxes(spec, formats, valueFormat, hasSecondary, { narrow }),
         renderTooltip(spec, valueFormat, tooltipCrosshairDefaults),
         renderLegend(spec, spec.series.length),
         renderReferenceLines(spec),
@@ -244,6 +258,7 @@ function BarChartRenderer({
   animate
 }) {
   warnOnSpecIssues(spec);
+  const narrow = useNarrowFrame();
   const horizontal = spec.orientation === "horizontal";
   const hasSecondary = !horizontal && spec.series.some((s) => s.axis === "secondary");
   const valueFormat = valueFormatOf(spec, spec.stacked);
@@ -283,6 +298,7 @@ function BarChartRenderer({
             {
               type: "number",
               ...xAxisDefaults,
+              ...narrow ? narrowXAxisProps : {},
               hide: spec.yAxis?.hidden,
               domain: spec.yAxis?.domain,
               tickFormatter: formats.resolve(spec.yAxis?.format, valueFormat)
@@ -318,8 +334,8 @@ function BarChartRenderer({
       margin: { top: 8, bottom: 4 },
       children: [
         renderGrid(spec),
-        renderXAxis(spec.xKey, spec, formats),
-        renderYAxes(spec, formats, valueFormat, hasSecondary),
+        renderXAxis(spec.xKey, spec, formats, { narrow }),
+        renderYAxes(spec, formats, valueFormat, hasSecondary, { narrow }),
         renderTooltip(spec, valueFormat, tooltipCursorDefaults),
         renderLegend(spec, spec.series.length),
         renderReferenceLines(spec),
@@ -381,6 +397,7 @@ function ComposedChartRenderer({
   animate
 }) {
   warnOnSpecIssues(spec);
+  const narrow = useNarrowFrame();
   const hasSecondary = spec.series.some((s) => s.axis === "secondary");
   const valueFormat = valueFormatOf(spec);
   return /* @__PURE__ */ jsxs3(
@@ -393,8 +410,8 @@ function ComposedChartRenderer({
       margin: { top: 8, bottom: 4 },
       children: [
         renderGrid(spec),
-        renderXAxis(spec.xKey, spec, formats),
-        renderYAxes(spec, formats, valueFormat, hasSecondary),
+        renderXAxis(spec.xKey, spec, formats, { narrow }),
+        renderYAxes(spec, formats, valueFormat, hasSecondary, { narrow }),
         renderTooltip(spec, valueFormat, tooltipCursorDefaults),
         renderLegend(spec, spec.series.length),
         renderReferenceLines(spec),
@@ -465,6 +482,7 @@ function LineChartRenderer({
   animate
 }) {
   warnOnSpecIssues(spec);
+  const narrow = useNarrowFrame();
   const hasSecondary = spec.series.some((s) => s.axis === "secondary");
   const valueFormat = valueFormatOf(spec);
   return /* @__PURE__ */ jsxs5(
@@ -477,8 +495,8 @@ function LineChartRenderer({
       margin: { top: 8, bottom: 4 },
       children: [
         renderGrid(spec),
-        renderXAxis(spec.xKey, spec, formats),
-        renderYAxes(spec, formats, valueFormat, hasSecondary),
+        renderXAxis(spec.xKey, spec, formats, { narrow }),
+        renderYAxes(spec, formats, valueFormat, hasSecondary, { narrow }),
         renderTooltip(spec, valueFormat, tooltipCrosshairDefaults),
         renderLegend(spec, spec.series.length),
         renderReferenceLines(spec),
@@ -667,11 +685,12 @@ function ScatterChartRenderer({
     );
   }
   const active = activeCategoryValues(markInteraction);
+  const narrow = useNarrowFrame();
   const valueFormat = spec.yAxis?.format ?? "number";
   return /* @__PURE__ */ jsxs9(ScatterChart, { width, height, margin: { top: 8, bottom: 4 }, children: [
     renderGrid(spec),
-    renderXAxis(spec.xKey, spec, formats, { numeric: true }),
-    renderYAxes(spec, formats, valueFormat, false),
+    renderXAxis(spec.xKey, spec, formats, { numeric: true, narrow }),
+    renderYAxes(spec, formats, valueFormat, false, { narrow }),
     spec.sizeKey && /* @__PURE__ */ jsx10(ZAxis, { dataKey: spec.sizeKey, range: spec.sizeRange ?? [64, 400] }),
     renderTooltip(spec, valueFormat, tooltipCrosshairDefaults),
     spec.groupKey ? renderLegend(spec, groups.length) : null,

package/dist/{chunk-BFTWWI46.js → chunk-NDBDHQME.js}

@@ -1,12 +1,12 @@
 import {
   defaultChartRegistry
-} from "./chunk-YMPZODMC.js";
+} from "./chunk-J2KWQJGC.js";
 import {
   prefersReducedMotion
 } from "./chunk-HNJKYOPE.js";
 import {
   chart_frame_default
-} from "./chunk-G4FXJJ66.js";
+} from "./chunk-SID6O4PY.js";
 import {
   createFormatters
 } from "./chunk-7WABBHMT.js";

package/dist/chunk-PPVZ3BYP.js

@@ -0,0 +1,44 @@
+import {
+  chart_default
+} from "./chunk-NDBDHQME.js";
+
+// src/forecast-chart.tsx
+import { jsx } from "react/jsx-runtime";
+function ForecastChart({
+  rows,
+  xKey,
+  actualKey,
+  forecastKey,
+  lowerKey,
+  upperKey,
+  title,
+  description,
+  format,
+  actualLabel = "Actual",
+  forecastLabel = "Forecast",
+  intervalLabel = "Forecast interval",
+  ...chartProps
+}) {
+  const spec = {
+    version: 1,
+    type: "composed",
+    title,
+    description,
+    xKey,
+    xAxis: { scale: "time" },
+    yAxis: { format },
+    series: [
+      ...lowerKey ? [{ field: lowerKey, label: `${intervalLabel} lower`, mark: "area", paletteSlot: 3, format }] : [],
+      ...upperKey ? [{ field: upperKey, label: `${intervalLabel} upper`, mark: "area", paletteSlot: 3, format }] : [],
+      { field: actualKey, label: actualLabel, mark: "line", paletteSlot: 1, format },
+      { field: forecastKey, label: forecastLabel, mark: "line", paletteSlot: 2, format }
+    ],
+    tooltip: true,
+    legend: true
+  };
+  return /* @__PURE__ */ jsx(chart_default, { ...chartProps, rows, spec });
+}
+
+export {
+  ForecastChart
+};

package/dist/{chunk-G4FXJJ66.js → chunk-SID6O4PY.js}

@@ -24,8 +24,8 @@ import {
   useState
 } from "react";
 import { ResponsiveContainer } from "recharts";
-import Alert from "@zuilib/components/alert";
-import { cn } from "@zuilib/components/lib/cn";
+import Alert from "@zuilib/primitives/alert";
+import { cn } from "@zuilib/primitives/lib/cn";
 
 // src/legend-toggle.ts
 function legendToggle(allFields, hidden, field, options) {
@@ -39,6 +39,8 @@ function legendToggle(allFields, hidden, field, options) {
 
 // src/chart-frame.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+var NARROW_FRAME_WIDTH = 384;
+var MIN_RESPONSIVE_HEIGHT = 200;
 var ChartFrame = forwardRef(
   ({
     config,
@@ -77,9 +79,17 @@ var ChartFrame = forwardRef(
       },
       [allFields, hiddenSeries, innerHidden, onHiddenSeriesChange]
     );
+    const [measuredWidth, setMeasuredWidth] = useState(null);
+    const onResize = useCallback((nextWidth) => {
+      setMeasuredWidth(nextWidth > 0 ? Math.round(nextWidth) : null);
+    }, []);
+    const fixedSize = typeof width === "number" && typeof height === "number";
+    const frameWidth = fixedSize ? width : measuredWidth;
+    const narrow = frameWidth !== null && frameWidth < NARROW_FRAME_WIDTH;
+    const responsiveAspect = measuredWidth !== null && measuredWidth / aspect < MIN_RESPONSIVE_HEIGHT ? measuredWidth / MIN_RESPONSIVE_HEIGHT : aspect;
     const context = useMemo(
-      () => ({ config, formats, labels, hiddenSeries: hidden, onLegendClick, categoryField, categories }),
-      [config, formats, labels, hidden, onLegendClick, categoryField, categories]
+      () => ({ config, formats, labels, hiddenSeries: hidden, onLegendClick, categoryField, categories, narrow }),
+      [config, formats, labels, hidden, onLegendClick, categoryField, categories, narrow]
     );
     const colorStyle = useMemo(() => {
       const vars = {};
@@ -93,7 +103,6 @@ var ChartFrame = forwardRef(
       () => Object.entries(config).filter((entry) => !!entry[1].theme && !entry[1].color),
       [config]
     );
-    const fixedSize = typeof width === "number" && typeof height === "number";
     let body;
     if (loading) {
       body = /* @__PURE__ */ jsx(
@@ -124,7 +133,15 @@ var ChartFrame = forwardRef(
       if (fixedSize && isValidElement(chart)) {
         body = cloneElement(chart, { width, height });
       } else {
-        body = /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", ...height !== void 0 ? { height } : { aspect }, children: chart });
+        body = /* @__PURE__ */ jsx(
+          ResponsiveContainer,
+          {
+            width: "100%",
+            onResize,
+            ...height !== void 0 ? { height } : { aspect: responsiveAspect },
+            children: chart
+          }
+        );
       }
     }
     return /* @__PURE__ */ jsxs(
@@ -136,7 +153,11 @@ var ChartFrame = forwardRef(
         role: "figure",
         "aria-label": ariaLabel,
         className: cn(
-          "text-foreground text-xs [&_.recharts-surface]:outline-none [&_.recharts-sector]:outline-none",
+          /* `@container` (inline-size containment) is load-bearing beyond
+             container queries: the rendered svg carries a pixel width, and
+             without containment a flex/grid parent's `min-width: auto`
+             would grow to it and never let the chart shrink again. */
+          "@container min-w-0 text-foreground text-xs [&_.recharts-surface]:outline-none [&_.recharts-sector]:outline-none",
           fixedSize ? "" : "w-full",
           className
         ),

package/dist/forecast-chart.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ChartProps } from './chart.js';
+import { d as ChartRow, F as FormatToken } from './chart-spec-CH0tAkLG.js';
+import 'react';
+import './chart-frame-B9fxUxGG.js';
+import './format.js';
+import './registry.js';
+import './authoring.js';
+import './cross-filter.js';
+
+interface ForecastChartProps extends Omit<ChartProps, 'spec' | 'rows'> {
+    rows: ChartRow[];
+    xKey: string;
+    actualKey: string;
+    forecastKey: string;
+    lowerKey?: string;
+    upperKey?: string;
+    title?: string;
+    description?: string;
+    format?: FormatToken;
+    actualLabel?: string;
+    forecastLabel?: string;
+    intervalLabel?: string;
+}
+/** Opinionated actual-versus-forecast chart with optional confidence bounds. */
+declare function ForecastChart({ rows, xKey, actualKey, forecastKey, lowerKey, upperKey, title, description, format, actualLabel, forecastLabel, intervalLabel, ...chartProps }: ForecastChartProps): react_jsx_runtime.JSX.Element;
+
+export { ForecastChart, type ForecastChartProps, ForecastChart as default };

package/dist/forecast-chart.js

@@ -0,0 +1,20 @@
+"use client";
+import {
+  ForecastChart
+} from "./chunk-PPVZ3BYP.js";
+import "./chunk-NDBDHQME.js";
+import "./chunk-J2KWQJGC.js";
+import "./chunk-HNJKYOPE.js";
+import "./chunk-SID6O4PY.js";
+import "./chunk-7WABBHMT.js";
+import "./chunk-3VGLTPGL.js";
+import "./chunk-FDLNPZV6.js";
+import "./chunk-4FWNWLEJ.js";
+import "./chunk-WVWGHGZE.js";
+import "./chunk-UN3XPBZ5.js";
+import "./chunk-IPOBQIYU.js";
+import "./chunk-7WJ26NHR.js";
+export {
+  ForecastChart,
+  ForecastChart as default
+};

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { Chart, ChartProps, CustomChartProps, configFromSpec, crossFilterFieldOf, Chart as default } from './chart.js';
+export { ForecastChart, ForecastChartProps } from './forecast-chart.js';
 export { AnyChartSpec, ChartRegistry, ChartTypeDef, CustomChartSpec, chartSpecJsonSchema, chartTypeSchema, createChartRegistry, defaultChartRegistry, defaultChartTypes, defineChartType } from './registry.js';
 export { C as ChartConfig, a as ChartFrame, b as ChartFrameProps, c as ChartLabels, d as ChartSeriesConfig, e as defaultChartLabels, f as fillLabel } from './chart-frame-B9fxUxGG.js';
 export { ChartTooltipPanel, ChartTooltipPanelProps } from './chart-tooltip.js';
@@ -9,5 +10,5 @@ export { ColumnFilter, applyFilters, fromColumnFilters, toColumnFilters, toHighl
 export { FormatterFactory, FormatterFn, Formatters, createFormatters } from './format.js';
 export { A as AreaChartSpec, a as AxisSpec, B as BarChartSpec, C as CartesianFrameSpec, b as CartesianSpecCommon, c as ChartMarkEvent, d as ChartRow, e as ChartSpec, f as ChartSpecCommon, g as ComposedChartSpec, F as FormatToken, h as FunnelChartSpec, L as LineChartSpec, P as PieChartSpec, R as RadarChartSpec, i as RadialBarChartSpec, j as ReferenceLineSpec, S as ScatterChartSpec, k as SeriesSpec, T as TreemapChartSpec } from './chart-spec-CH0tAkLG.js';
 import 'react';
-import './authoring.js';
 import 'react/jsx-runtime';
+import './authoring.js';

package/dist/index.js

@@ -5,11 +5,14 @@ import {
   toColumnFilters,
   toHighlight
 } from "./chunk-D7K23UFP.js";
+import {
+  ForecastChart
+} from "./chunk-PPVZ3BYP.js";
 import {
   chart_default,
   configFromSpec,
   crossFilterFieldOf
-} from "./chunk-BFTWWI46.js";
+} from "./chunk-NDBDHQME.js";
 import {
   chartSpecJsonSchema,
   chartTypeSchema,
@@ -17,21 +20,21 @@ import {
   defaultChartRegistry,
   defaultChartTypes,
   defineChartType
-} from "./chunk-YMPZODMC.js";
+} from "./chunk-J2KWQJGC.js";
 import "./chunk-HNJKYOPE.js";
 import {
   chart_frame_default
-} from "./chunk-G4FXJJ66.js";
+} from "./chunk-SID6O4PY.js";
 import {
   createFormatters
 } from "./chunk-7WABBHMT.js";
 import "./chunk-3VGLTPGL.js";
 import {
   ChartTooltipPanel
-} from "./chunk-PV27RZSV.js";
+} from "./chunk-FDLNPZV6.js";
 import {
   ChartLegendList
-} from "./chunk-SHQZRND7.js";
+} from "./chunk-4FWNWLEJ.js";
 import {
   cross_filter_default,
   defaultCrossFilterState,
@@ -63,6 +66,7 @@ export {
   ChartTooltipPanel,
   cross_filter_default as CrossFilterProvider,
   DIMMED_OPACITY,
+  ForecastChart,
   applyFilters,
   cartesianGridDefaults,
   chartColorVar,

package/dist/registry.js

@@ -6,11 +6,11 @@ import {
   defaultChartRegistry,
   defaultChartTypes,
   defineChartType
-} from "./chunk-YMPZODMC.js";
+} from "./chunk-J2KWQJGC.js";
 import "./chunk-HNJKYOPE.js";
 import "./chunk-3VGLTPGL.js";
-import "./chunk-PV27RZSV.js";
-import "./chunk-SHQZRND7.js";
+import "./chunk-FDLNPZV6.js";
+import "./chunk-4FWNWLEJ.js";
 import "./chunk-WVWGHGZE.js";
 import "./chunk-UN3XPBZ5.js";
 import "./chunk-IPOBQIYU.js";

package/dist/tailwind.css

@@ -0,0 +1,2 @@
+/** Tailwind v4 source registration for @zuilib/charts. */
+@source "./**/*.js";

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@zuilib/charts",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "ZUI — enterprise analytics charts on Recharts: a serializable chart spec, styled primitives, and cross-filtering that links charts to data tables",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist"
   ],
@@ -16,6 +18,10 @@
       "types": "./dist/chart.d.ts",
       "import": "./dist/chart.js"
     },
+    "./forecast-chart": {
+      "types": "./dist/forecast-chart.d.ts",
+      "import": "./dist/forecast-chart.js"
+    },
     "./registry": {
       "types": "./dist/registry.d.ts",
       "import": "./dist/registry.js"
@@ -52,16 +58,16 @@
       "types": "./dist/format.d.ts",
       "import": "./dist/format.js"
     },
+    "./tailwind.css": "./dist/tailwind.css",
     "./package.json": "./package.json"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "recharts": "^3.0.0",
-    "@zuilib/tokens": "^0.2.0"
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@zuilib/components": "^0.2.0"
+    "recharts": "^3.0.0",
+    "@zuilib/primitives": "^0.3.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",
@@ -75,10 +81,8 @@
     "jsdom": "^30.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "recharts": "^3.0.0",
     "typescript": "^6.0.2",
-    "vitest": "^4.1.11",
-    "@zuilib/tokens": "^0.2.0"
+    "vitest": "^4.1.11"
   },
   "keywords": [
     "charts",

package/dist/chunk-6QTIAMA3.js

@@ -1,169 +0,0 @@
-import {
-  createFormatters
-} from "./chunk-7WABBHMT.js";
-import {
-  defaultChartLabels
-} from "./chunk-UN3XPBZ5.js";
-import {
-  ChartContext
-} from "./chunk-IPOBQIYU.js";
-import {
-  CHART_COLOR_COUNT,
-  seriesColorProperty
-} from "./chunk-7WJ26NHR.js";
-
-// src/chart-frame.tsx
-import {
-  Children,
-  cloneElement,
-  forwardRef,
-  isValidElement,
-  useCallback,
-  useId,
-  useMemo,
-  useState
-} from "react";
-import { ResponsiveContainer } from "recharts";
-import Alert from "@zuilib/components/alert";
-import { cn } from "@zuilib/components/lib/cn";
-
-// src/legend-toggle.ts
-function legendToggle(allFields, hidden, field, options) {
-  if (options?.additive) {
-    return hidden.includes(field) ? hidden.filter((f) => f !== field) : [...hidden, field];
-  }
-  const visible = allFields.filter((f) => !hidden.includes(f));
-  const isolated = visible.length === 1 && visible[0] === field;
-  return isolated ? [] : allFields.filter((f) => f !== field);
-}
-
-// src/chart-frame.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var ChartFrame = forwardRef(
-  ({
-    config,
-    children,
-    width,
-    height,
-    aspect = 16 / 9,
-    loading = false,
-    error,
-    emptyState,
-    empty = false,
-    ariaLabel,
-    labels: labelOverrides,
-    formats: customFormats,
-    locale,
-    hiddenSeries,
-    defaultHiddenSeries,
-    onHiddenSeriesChange,
-    categoryField,
-    categories,
-    className,
-    style,
-    ...props
-  }, ref) => {
-    const chartId = useId().replace(/:/g, "");
-    const labels = useMemo(() => ({ ...defaultChartLabels, ...labelOverrides }), [labelOverrides]);
-    const formats = useMemo(() => createFormatters(locale, customFormats), [locale, customFormats]);
-    const [innerHidden, setInnerHidden] = useState(defaultHiddenSeries ?? []);
-    const hidden = hiddenSeries ?? innerHidden;
-    const allFields = useMemo(() => Object.keys(config), [config]);
-    const onLegendClick = useCallback(
-      (field, options) => {
-        const next = legendToggle(allFields, hiddenSeries ?? innerHidden, field, options);
-        if (hiddenSeries === void 0) setInnerHidden(next);
-        onHiddenSeriesChange?.(next);
-      },
-      [allFields, hiddenSeries, innerHidden, onHiddenSeriesChange]
-    );
-    const context = useMemo(
-      () => ({ config, formats, labels, hiddenSeries: hidden, onLegendClick, categoryField, categories }),
-      [config, formats, labels, hidden, onLegendClick, categoryField, categories]
-    );
-    const colorStyle = useMemo(() => {
-      const vars = {};
-      Object.entries(config).forEach(([field, series], index) => {
-        const slot = Math.min(index + 1, CHART_COLOR_COUNT);
-        vars[seriesColorProperty(field)] = series.color ?? (series.theme ? series.theme.light : `var(--chart-${slot})`);
-      });
-      return vars;
-    }, [config]);
-    const themed = useMemo(
-      () => Object.entries(config).filter((entry) => !!entry[1].theme && !entry[1].color),
-      [config]
-    );
-    const fixedSize = typeof width === "number" && typeof height === "number";
-    let body;
-    if (loading) {
-      body = /* @__PURE__ */ jsx(
-        "div",
-        {
-          "data-slot": "chart-skeleton",
-          role: "status",
-          "aria-label": labels.loading,
-          className: "bg-muted h-full min-h-32 w-full animate-pulse rounded-md motion-reduce:animate-none"
-        }
-      );
-    } else if (error !== void 0 && error !== null && error !== false) {
-      body = /* @__PURE__ */ jsxs(Alert, { variant: "destructive", "data-slot": "chart-error", children: [
-        /* @__PURE__ */ jsx(Alert.Title, { children: labels.chartError }),
-        typeof error === "boolean" ? null : /* @__PURE__ */ jsx(Alert.Description, { children: error })
-      ] });
-    } else if (empty) {
-      body = /* @__PURE__ */ jsx(
-        "div",
-        {
-          "data-slot": "chart-empty",
-          className: "text-muted-foreground flex h-full min-h-32 w-full items-center justify-center text-sm",
-          children: emptyState ?? labels.noData
-        }
-      );
-    } else {
-      const chart = Children.only(children);
-      if (fixedSize && isValidElement(chart)) {
-        body = cloneElement(chart, { width, height });
-      } else {
-        body = /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", ...height !== void 0 ? { height } : { aspect }, children: chart });
-      }
-    }
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        "data-slot": "chart",
-        "data-chart": chartId,
-        role: "figure",
-        "aria-label": ariaLabel,
-        className: cn(
-          "text-foreground text-xs [&_.recharts-surface]:outline-none [&_.recharts-sector]:outline-none",
-          fixedSize ? "" : "w-full",
-          className
-        ),
-        style: { ...colorStyle, ...style },
-        ...props,
-        children: [
-          themed.length > 0 && /* @__PURE__ */ jsx(
-            "style",
-            {
-              dangerouslySetInnerHTML: {
-                __html: [
-                  `[data-chart="${chartId}"]{${themed.map(([field, s]) => `${seriesColorProperty(field)}:${s.theme.light};`).join("")}}`,
-                  `.dark [data-chart="${chartId}"]{${themed.map(([field, s]) => `${seriesColorProperty(field)}:${s.theme.dark};`).join("")}}`
-                ].join("\n")
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(ChartContext.Provider, { value: context, children: body })
-        ]
-      }
-    );
-  }
-);
-ChartFrame.displayName = "ChartFrame";
-var chart_frame_default = ChartFrame;
-
-export {
-  ChartFrame,
-  chart_frame_default
-};

package/dist/chunk-MJDIQVJX.js

@@ -1,148 +0,0 @@
-import {
-  defaultChartRegistry
-} from "./chunk-YMPZODMC.js";
-import {
-  prefersReducedMotion
-} from "./chunk-HNJKYOPE.js";
-import {
-  chart_frame_default
-} from "./chunk-6QTIAMA3.js";
-import {
-  createFormatters
-} from "./chunk-7WABBHMT.js";
-import {
-  warnOnce
-} from "./chunk-3VGLTPGL.js";
-import {
-  useOptionalCrossFilter
-} from "./chunk-WVWGHGZE.js";
-import {
-  chartColorVar
-} from "./chunk-7WJ26NHR.js";
-
-// src/chart.tsx
-import { useMemo, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-function configFromSpec(spec, registry = defaultChartRegistry) {
-  const fromDef = registry.types.get(spec.type)?.configFrom?.(spec);
-  if (fromDef) return fromDef;
-  if ("series" in spec && Array.isArray(spec.series)) {
-    return Object.fromEntries(
-      spec.series.map((series) => [
-        series.field,
-        {
-          label: series.label ?? series.field,
-          color: series.paletteSlot ? chartColorVar(series.paletteSlot) : void 0,
-          format: series.format
-        }
-      ])
-    );
-  }
-  return {};
-}
-function crossFilterFieldOf(spec, registry = defaultChartRegistry) {
-  const field = registry.types.get(spec.type)?.crossFilterField?.(spec);
-  if (field !== void 0) return field;
-  const xKey = spec.xKey;
-  return typeof xKey === "string" ? xKey : "";
-}
-function categoriesOf(spec, rows, registry) {
-  const field = categoryFieldOf(spec, registry);
-  if (!field) return void 0;
-  const values = [];
-  for (const row of rows) {
-    const value = row[field];
-    if ((typeof value === "string" || typeof value === "number") && !values.includes(value)) values.push(value);
-  }
-  return values.map((value, index) => ({ value, color: chartColorVar(index + 1) }));
-}
-function categoryFieldOf(spec, registry) {
-  return registry.types.get(spec.type)?.categoryField?.(spec);
-}
-function renderSpec(props, registry) {
-  const def = registry.types.get(props.spec.type);
-  if (!def) {
-    warnOnce(`type-${props.spec.type}`, `@zuilib/charts: unknown chart type "${props.spec.type}"`);
-    return null;
-  }
-  return /* @__PURE__ */ jsx(def.render, { ...props });
-}
-function Chart({
-  spec,
-  rows,
-  registry,
-  formats,
-  locale,
-  className,
-  width,
-  height,
-  aspect,
-  loading,
-  error,
-  emptyState,
-  ariaLabel,
-  hiddenSeries,
-  defaultHiddenSeries,
-  onHiddenSeriesChange,
-  onMarkClick,
-  labels,
-  animate
-}) {
-  const chartRegistry = registry ?? defaultChartRegistry;
-  const crossFilter = useOptionalCrossFilter();
-  const formatters = useMemo(() => createFormatters(locale, formats), [locale, formats]);
-  const config = useMemo(() => configFromSpec(spec, chartRegistry), [spec, chartRegistry]);
-  const [innerHidden, setInnerHidden] = useState(defaultHiddenSeries ?? []);
-  const hidden = hiddenSeries ?? innerHidden;
-  const onHiddenChange = (next) => {
-    if (hiddenSeries === void 0) setInnerHidden(next);
-    onHiddenSeriesChange?.(next);
-  };
-  const markInteraction = {
-    field: crossFilterFieldOf(spec, chartRegistry),
-    crossFilter,
-    interaction: spec.interaction ?? "filter",
-    onMarkClick
-  };
-  return /* @__PURE__ */ jsx(
-    chart_frame_default,
-    {
-      config,
-      className,
-      width,
-      height,
-      aspect,
-      loading,
-      error,
-      emptyState,
-      empty: rows.length === 0,
-      ariaLabel: ariaLabel ?? spec.title,
-      labels,
-      formats,
-      locale,
-      hiddenSeries: hidden,
-      onHiddenSeriesChange: onHiddenChange,
-      categoryField: categoryFieldOf(spec, chartRegistry),
-      categories: useMemo(() => categoriesOf(spec, rows, chartRegistry), [spec, rows, chartRegistry]),
-      children: renderSpec(
-        {
-          spec,
-          rows,
-          formats: formatters,
-          hiddenSeries: hidden,
-          markInteraction,
-          animate: animate ?? !prefersReducedMotion()
-        },
-        chartRegistry
-      )
-    }
-  );
-}
-var chart_default = Chart;
-
-export {
-  configFromSpec,
-  crossFilterFieldOf,
-  Chart,
-  chart_default
-};