@misael703/ui 1.62.2 → 1.64.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/{chunk-5SYT7KZX.js → chunk-CP6DXFGZ.js} +32 -16
  2. package/dist/chunk-CP6DXFGZ.js.map +1 -0
  3. package/dist/{chunk-4K26DN5F.mjs → chunk-JTSSM4NE.mjs} +32 -16
  4. package/dist/chunk-JTSSM4NE.mjs.map +1 -0
  5. package/dist/components/Charts.d.mts +29 -6
  6. package/dist/components/Charts.d.ts +29 -6
  7. package/dist/components/Charts.js +6 -6
  8. package/dist/components/Charts.mjs +1 -1
  9. package/dist/index.d.mts +1 -1
  10. package/dist/index.d.ts +1 -1
  11. package/dist/index.js +6 -6
  12. package/dist/index.mjs +1 -1
  13. package/dist/styles.css +1 -1
  14. package/package.json +1 -1
  15. package/dist/chunk-4K26DN5F.mjs.map +0 -1
  16. package/dist/chunk-5SYT7KZX.js.map +0 -1
package/dist/{chunk-5SYT7KZX.js → chunk-CP6DXFGZ.js} RENAMED
@@ -30,6 +30,13 @@ function valueAxisProps(valueFormatter, allowDecimals) {
30
30
  if (valueFormatter) props.tickFormatter = (v) => valueFormatter(Number(v));
31
31
  return props;
32
32
  }
33
+ var TOOLTIP_BASE_STYLE = { background: "var(--bg-surface)", border: "1px solid var(--border-default)", borderRadius: 8, fontSize: 12 };
34
+ function tooltipContentStyle(tooltip) {
35
+ return { ...TOOLTIP_BASE_STYLE, maxWidth: tooltip?.maxWidth ?? "min(220px, 90vw)", whiteSpace: "normal" };
36
+ }
37
+ function tooltipChrome(tooltip) {
38
+ return tooltip?.allowEscapeViewBox ? { allowEscapeViewBox: tooltip.allowEscapeViewBox } : {};
39
+ }
33
40
  function tooltipProps(valueFormatter, tooltipLabelFormatter, xTickFormatter) {
34
41
  const props = {};
35
42
  if (valueFormatter) props.formatter = (v) => valueFormatter(Number(v));
@@ -63,15 +70,17 @@ function LineChart({
63
70
  xTickAngle,
64
71
  valueFormatter,
65
72
  allowDecimals,
66
- tooltipLabelFormatter
73
+ tooltipLabelFormatter,
74
+ tooltip,
75
+ accessibilityLayer = true
67
76
  }) {
68
77
  const lineType = curve ?? (smooth ? "monotone" : "linear");
69
78
  const allowDec = allowDecimals ?? !allIntegerValues(data, series.map((s) => s.key));
70
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkPASF6T4H_js.cx("chart", className), role: "img", "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(R.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(R.LineChart, { data, margin: { top: 8, right: 16, bottom: 0, left: 0 }, children: [
79
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkPASF6T4H_js.cx("chart", className), role: "img", "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(R.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(R.LineChart, { data, accessibilityLayer, margin: { top: 8, right: 16, bottom: 0, left: 0 }, children: [
71
80
  showGrid && /* @__PURE__ */ jsxRuntime.jsx(R.CartesianGrid, { stroke: "var(--border-default)", strokeDasharray: "3 3", vertical: false }),
72
81
  /* @__PURE__ */ jsxRuntime.jsx(R.XAxis, { dataKey: categoryKey, stroke: "var(--fg-subtle)", fontSize: 12, tickLine: false, axisLine: false, ...categoryTickProps({ xTickFormatter, xTickInterval, xTickAngle }) }),
73
82
  /* @__PURE__ */ jsxRuntime.jsx(R.YAxis, { stroke: "var(--fg-subtle)", fontSize: 12, tickLine: false, axisLine: false, ...valueAxisProps(valueFormatter, allowDec) }),
74
- /* @__PURE__ */ jsxRuntime.jsx(R.Tooltip, { contentStyle: { background: "var(--bg-surface)", border: "1px solid var(--border-default)", borderRadius: 8, fontSize: 12 }, ...tooltipProps(valueFormatter, tooltipLabelFormatter, xTickFormatter) }),
83
+ /* @__PURE__ */ jsxRuntime.jsx(R.Tooltip, { contentStyle: tooltipContentStyle(tooltip), ...tooltipChrome(tooltip), ...tooltipProps(valueFormatter, tooltipLabelFormatter, xTickFormatter) }),
75
84
  showLegend && /* @__PURE__ */ jsxRuntime.jsx(R.Legend, { wrapperStyle: { fontSize: 12 } }),
76
85
  series.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(
77
86
  R.Line,
@@ -106,15 +115,17 @@ function AreaChart({
106
115
  xTickAngle,
107
116
  valueFormatter,
108
117
  allowDecimals,
109
- tooltipLabelFormatter
118
+ tooltipLabelFormatter,
119
+ tooltip,
120
+ accessibilityLayer = true
110
121
  }) {
111
122
  const lineType = curve ?? (smooth ? "monotone" : "linear");
112
123
  const allowDec = allowDecimals ?? !allIntegerValues(data, series.map((s) => s.key));
113
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkPASF6T4H_js.cx("chart", className), role: "img", "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(R.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(R.AreaChart, { data, margin: { top: 8, right: 16, bottom: 0, left: 0 }, children: [
124
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkPASF6T4H_js.cx("chart", className), role: "img", "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(R.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(R.AreaChart, { data, accessibilityLayer, margin: { top: 8, right: 16, bottom: 0, left: 0 }, children: [
114
125
  showGrid && /* @__PURE__ */ jsxRuntime.jsx(R.CartesianGrid, { stroke: "var(--border-default)", strokeDasharray: "3 3", vertical: false }),
115
126
  /* @__PURE__ */ jsxRuntime.jsx(R.XAxis, { dataKey: categoryKey, stroke: "var(--fg-subtle)", fontSize: 12, tickLine: false, axisLine: false, ...categoryTickProps({ xTickFormatter, xTickInterval, xTickAngle }) }),
116
127
  /* @__PURE__ */ jsxRuntime.jsx(R.YAxis, { stroke: "var(--fg-subtle)", fontSize: 12, tickLine: false, axisLine: false, ...valueAxisProps(valueFormatter, allowDec) }),
117
- /* @__PURE__ */ jsxRuntime.jsx(R.Tooltip, { contentStyle: { background: "var(--bg-surface)", border: "1px solid var(--border-default)", borderRadius: 8, fontSize: 12 }, ...tooltipProps(valueFormatter, tooltipLabelFormatter, xTickFormatter) }),
128
+ /* @__PURE__ */ jsxRuntime.jsx(R.Tooltip, { contentStyle: tooltipContentStyle(tooltip), ...tooltipChrome(tooltip), ...tooltipProps(valueFormatter, tooltipLabelFormatter, xTickFormatter) }),
118
129
  showLegend && /* @__PURE__ */ jsxRuntime.jsx(R.Legend, { wrapperStyle: { fontSize: 12 } }),
119
130
  series.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(
120
131
  R.Area,
@@ -150,7 +161,9 @@ function BarChart({
150
161
  xTickAngle,
151
162
  valueFormatter,
152
163
  allowDecimals,
153
- tooltipLabelFormatter
164
+ tooltipLabelFormatter,
165
+ tooltip,
166
+ accessibilityLayer = true
154
167
  }) {
155
168
  const isHorizontal = layout === "horizontal";
156
169
  const allowDec = allowDecimals ?? !allIntegerValues(data, series.map((s) => s.key));
@@ -158,7 +171,7 @@ function BarChart({
158
171
  const lastIdx = series.length - 1;
159
172
  const catTicks = categoryTickProps({ xTickFormatter, xTickInterval, xTickAngle });
160
173
  const catTicksNoRotate = categoryTickProps({ xTickFormatter, xTickInterval, xTickAngle }, false);
161
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkPASF6T4H_js.cx("chart", className), role: "img", "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(R.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(R.BarChart, { data, layout: isHorizontal ? "vertical" : "horizontal", margin: { top: 8, right: 16, bottom: 0, left: 0 }, children: [
174
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkPASF6T4H_js.cx("chart", className), role: "img", "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(R.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(R.BarChart, { data, accessibilityLayer, layout: isHorizontal ? "vertical" : "horizontal", margin: { top: 8, right: 16, bottom: 0, left: 0 }, children: [
162
175
  showGrid && /* @__PURE__ */ jsxRuntime.jsx(R.CartesianGrid, { stroke: "var(--border-default)", strokeDasharray: "3 3", vertical: isHorizontal, horizontal: !isHorizontal }),
163
176
  isHorizontal ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
164
177
  /* @__PURE__ */ jsxRuntime.jsx(R.XAxis, { type: "number", stroke: "var(--fg-subtle)", fontSize: 12, tickLine: false, axisLine: false, ...valueAxisProps(valueFormatter, allowDec) }),
@@ -167,7 +180,7 @@ function BarChart({
167
180
  /* @__PURE__ */ jsxRuntime.jsx(R.XAxis, { dataKey: categoryKey, stroke: "var(--fg-subtle)", fontSize: 12, tickLine: false, axisLine: false, ...catTicks }),
168
181
  /* @__PURE__ */ jsxRuntime.jsx(R.YAxis, { stroke: "var(--fg-subtle)", fontSize: 12, tickLine: false, axisLine: false, ...valueAxisProps(valueFormatter, allowDec) })
169
182
  ] }),
170
- /* @__PURE__ */ jsxRuntime.jsx(R.Tooltip, { contentStyle: { background: "var(--bg-surface)", border: "1px solid var(--border-default)", borderRadius: 8, fontSize: 12 }, cursor: { fill: "var(--bg-subtle)" }, ...tooltipProps(valueFormatter, tooltipLabelFormatter, xTickFormatter) }),
183
+ /* @__PURE__ */ jsxRuntime.jsx(R.Tooltip, { contentStyle: tooltipContentStyle(tooltip), ...tooltipChrome(tooltip), cursor: { fill: "var(--bg-subtle)" }, ...tooltipProps(valueFormatter, tooltipLabelFormatter, xTickFormatter) }),
171
184
  showLegend && /* @__PURE__ */ jsxRuntime.jsx(R.Legend, { wrapperStyle: { fontSize: 12 } }),
172
185
  series.map((s, i) => {
173
186
  const barRadius = stacked ? i === lastIdx ? endRadius : [0, 0, 0, 0] : endRadius;
@@ -197,13 +210,15 @@ function DonutChart({
197
210
  innerRadius = 60,
198
211
  outerRadius = 88,
199
212
  nameFormatter,
200
- valueFormatter
213
+ valueFormatter,
214
+ tooltip,
215
+ accessibilityLayer = true
201
216
  }) {
202
217
  const tooltipProps2 = nameFormatter || valueFormatter ? { formatter: (v, n) => [valueFormatter ? valueFormatter(Number(v)) : v, nameFormatter ? nameFormatter(String(n)) : n] } : {};
203
218
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkPASF6T4H_js.cx("chart chart--donut", className), role: "img", "aria-label": ariaLabel, children: [
204
219
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "chart__donut-area", style: { height }, children: [
205
- /* @__PURE__ */ jsxRuntime.jsx(R.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(R.PieChart, { children: [
206
- /* @__PURE__ */ jsxRuntime.jsx(R.Tooltip, { contentStyle: { background: "var(--bg-surface)", border: "1px solid var(--border-default)", borderRadius: 8, fontSize: 12 }, ...tooltipProps2 }),
220
+ /* @__PURE__ */ jsxRuntime.jsx(R.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(R.PieChart, { accessibilityLayer, children: [
221
+ /* @__PURE__ */ jsxRuntime.jsx(R.Tooltip, { contentStyle: tooltipContentStyle(tooltip), ...tooltipChrome(tooltip), ...tooltipProps2 }),
207
222
  /* @__PURE__ */ jsxRuntime.jsx(
208
223
  R.Pie,
209
224
  {
@@ -241,12 +256,13 @@ function Sparkline({
241
256
  color = "var(--color-primary)",
242
257
  fill = true,
243
258
  interactive = false,
259
+ tooltip,
244
260
  className,
245
261
  ariaLabel
246
262
  }) {
247
263
  const margin = interactive ? { top: 4, right: 4, bottom: 4, left: 4 } : { top: 2, right: 0, bottom: 2, left: 0 };
248
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkPASF6T4H_js.cx("sparkline", interactive && "sparkline--interactive", className), role: "img", "aria-label": ariaLabel, style: { width, height }, children: /* @__PURE__ */ jsxRuntime.jsx(R.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(R.AreaChart, { data, margin, children: [
249
- interactive && /* @__PURE__ */ jsxRuntime.jsx(R.Tooltip, { contentStyle: { background: "var(--bg-surface)", border: "1px solid var(--border-default)", borderRadius: 8, fontSize: 12 } }),
264
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkPASF6T4H_js.cx("sparkline", interactive && "sparkline--interactive", className), role: "img", "aria-label": ariaLabel, style: { width, height }, children: /* @__PURE__ */ jsxRuntime.jsx(R.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(R.AreaChart, { data, accessibilityLayer: interactive, margin, children: [
265
+ interactive && /* @__PURE__ */ jsxRuntime.jsx(R.Tooltip, { contentStyle: tooltipContentStyle(tooltip), ...tooltipChrome(tooltip) }),
250
266
  /* @__PURE__ */ jsxRuntime.jsx(
251
267
  R.Area,
252
268
  {
@@ -268,5 +284,5 @@ exports.BarChart = BarChart;
268
284
  exports.DonutChart = DonutChart;
269
285
  exports.LineChart = LineChart;
270
286
  exports.Sparkline = Sparkline;
271
- //# sourceMappingURL=chunk-5SYT7KZX.js.map
272
- //# sourceMappingURL=chunk-5SYT7KZX.js.map
287
+ //# sourceMappingURL=chunk-CP6DXFGZ.js.map
288
+ //# sourceMappingURL=chunk-CP6DXFGZ.js.map
package/dist/chunk-CP6DXFGZ.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Charts.tsx"],"names":["jsx","cx","jsxs","Fragment","tooltipProps"],"mappings":"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","file":"chunk-CP6DXFGZ.js","sourcesContent":["'use client';\nimport * as React from 'react';\nimport { cx } from '../utils/cx';\n\n/**\n * Lightweight chart wrappers. We do NOT bundle Recharts — the host app provides it\n * and passes the modules in via the `recharts` prop so consumers only pay for what they use.\n *\n * Recharts is treated as an implicit peer dependency: install it in the host\n * app if you use any chart component. Use **recharts ≥ 3** — earlier versions use\n * `defaultProps` on function components, which logs a deprecation warning under\n * React 19. recharts 3 removed them; these wrappers use default parameters, so on\n * recharts 3.8+ the console stays clean (verified).\n *\n * Usage in a Next.js client component:\n *\n * import * as Recharts from 'recharts';\n * import { LineChart } from '@misael703/elalba-ui';\n * <LineChart recharts={Recharts} data={...} dataKey=\"value\" categoryKey=\"month\" />\n */\n\n// Structural mirror of the Recharts public API. `any` is intentional here:\n// each Recharts component has a different prop shape, and typing them\n// exhaustively would mean depending on `recharts` types — which would force\n// consumers to install recharts even when they don't use any chart.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype RechartsComp = React.ComponentType<any>;\n\nexport type RechartsLike = {\n ResponsiveContainer: RechartsComp;\n LineChart: RechartsComp;\n AreaChart: RechartsComp;\n BarChart: RechartsComp;\n PieChart: RechartsComp;\n Line: RechartsComp;\n Area: RechartsComp;\n Bar: RechartsComp;\n Pie: RechartsComp;\n Cell: RechartsComp;\n CartesianGrid: RechartsComp;\n XAxis: RechartsComp;\n YAxis: RechartsComp;\n Tooltip: RechartsComp;\n Legend: RechartsComp;\n};\n\nconst PALETTE = [\n 'var(--color-primary)',\n 'var(--color-secondary)',\n 'var(--color-primary-900)',\n 'var(--color-success)',\n 'var(--color-warning)',\n 'var(--color-danger)',\n '#6b7e95',\n '#d4a574',\n];\n\n/** Tooltip chrome shared by every chart. */\nexport interface ChartTooltipConfig {\n /**\n * Cap the tooltip width so long content wraps instead of overflowing a narrow\n * (mobile) chart. Default `min(220px, 90vw)`. Number = px; or any CSS length.\n */\n maxWidth?: number | string;\n /** Let the tooltip escape the chart's plotting box. Default: recharts (stays inside). */\n allowEscapeViewBox?: { x?: boolean; y?: boolean };\n}\n\nexport interface BaseChartProps<D = any> {\n recharts: RechartsLike;\n data: D[];\n height?: number;\n className?: string;\n ariaLabel?: string;\n /** Tooltip sizing/positioning. By default the tooltip caps its width and wraps. */\n tooltip?: ChartTooltipConfig;\n /**\n * recharts' keyboard-navigation layer (puts `tabindex=0` on the svg + arrow-key\n * navigation). Default `true`. Set `false` for a non-actionable chart so it's\n * not a Tab stop / not focusable (no drill-down → nothing to navigate to).\n */\n accessibilityLayer?: boolean;\n}\n\n// Mirror of Recharts' AxisInterval. Controls how category ticks thin on\n// collision so dense series (e.g. daily points) don't crowd the axis.\nexport type AxisInterval =\n | number\n | 'preserveStart'\n | 'preserveEnd'\n | 'preserveStartEnd'\n | 'equidistantPreserveStart'\n | 'equidistantPreserveEnd';\n\n// Shared cartesian controls (Line/Area/Bar). DonutChart/Sparkline don't have a\n// category axis, so they keep BaseChartProps.\nexport interface CartesianChartProps<D = any> extends BaseChartProps<D> {\n categoryKey: keyof D & string;\n series: Array<{ key: keyof D & string; label?: string; color?: string }>;\n showGrid?: boolean;\n showLegend?: boolean;\n /** Format each category-axis tick label, e.g. shorten `2026-05-23`. → XAxis.tickFormatter */\n xTickFormatter?: (value: string) => string;\n /** Thin out category ticks on collision. → XAxis.interval. Default `preserveStartEnd`. */\n xTickInterval?: AxisInterval;\n /** Rotate category-axis labels N degrees (anchors end + reserves height so they don't clip). */\n xTickAngle?: number;\n /** Format numeric values (value-axis ticks + tooltip). */\n valueFormatter?: (value: number) => string;\n /**\n * Allow fractional value-axis ticks. Default: auto — `false` when every series\n * value is an integer (count data → no `0.25` ticks), `true` otherwise. Pass\n * explicitly to override the auto-detection.\n */\n allowDecimals?: boolean;\n /**\n * Format the category label in the tooltip. Defaults to `xTickFormatter` so the\n * tooltip matches the axis (e.g. both show `18 jun`, not the raw `2026-06-18`).\n */\n tooltipLabelFormatter?: (value: string) => string;\n}\n\nconst DEFAULT_X_INTERVAL: AxisInterval = 'preserveStartEnd';\n\n// Recharts XAxis/YAxis are `any`-typed (structural mirror), so tick controls go\n// in as a spread. `rotate` is off when the category axis is the Y axis\n// (horizontal bars: those labels are already horizontal).\nfunction categoryTickProps(\n opts: Pick<CartesianChartProps, 'xTickFormatter' | 'xTickInterval' | 'xTickAngle'>,\n rotate = true,\n): Record<string, unknown> {\n const props: Record<string, unknown> = { interval: opts.xTickInterval ?? DEFAULT_X_INTERVAL };\n if (opts.xTickFormatter) props.tickFormatter = opts.xTickFormatter;\n if (rotate && opts.xTickAngle) {\n props.angle = opts.xTickAngle;\n props.textAnchor = 'end';\n props.height = 56; // reserve room so the rotated label isn't clipped\n }\n return props;\n}\n\n// Value axis: `allowDecimals` (count data → integer-only ticks) + optional\n// numeric tick formatter.\nfunction valueAxisProps(valueFormatter: ((v: number) => string) | undefined, allowDecimals: boolean): Record<string, unknown> {\n const props: Record<string, unknown> = { allowDecimals };\n if (valueFormatter) props.tickFormatter = (v: number) => valueFormatter(Number(v));\n return props;\n}\n\n// Tooltip box style: the kit chrome + a width cap with wrapping so long content\n// (long labels / many series) doesn't overflow a narrow chart. `min(220px, 90vw)`\n// stays inside on mobile and caps to 220px on desktop.\nconst TOOLTIP_BASE_STYLE = { background: 'var(--bg-surface)', border: '1px solid var(--border-default)', borderRadius: 8, fontSize: 12 } as const;\n\nfunction tooltipContentStyle(tooltip?: ChartTooltipConfig): Record<string, unknown> {\n return { ...TOOLTIP_BASE_STYLE, maxWidth: tooltip?.maxWidth ?? 'min(220px, 90vw)', whiteSpace: 'normal' };\n}\n\nfunction tooltipChrome(tooltip?: ChartTooltipConfig): Record<string, unknown> {\n return tooltip?.allowEscapeViewBox ? { allowEscapeViewBox: tooltip.allowEscapeViewBox } : {};\n}\n\n// Tooltip: value formatter + a category-label formatter that defaults to the\n// axis tick formatter (so the hovered label matches the axis).\nfunction tooltipProps(\n valueFormatter: ((v: number) => string) | undefined,\n tooltipLabelFormatter: ((v: string) => string) | undefined,\n xTickFormatter: ((v: string) => string) | undefined,\n): Record<string, unknown> {\n const props: Record<string, unknown> = {};\n if (valueFormatter) props.formatter = (v: unknown) => valueFormatter(Number(v));\n const labelFormatter = tooltipLabelFormatter ?? xTickFormatter;\n if (labelFormatter) props.labelFormatter = (v: unknown) => labelFormatter(String(v));\n return props;\n}\n\n// True when every plotted value is an integer → drives the `allowDecimals` auto-\n// detection (count series shouldn't get `0.25`-style ticks).\nfunction allIntegerValues<D>(data: D[], keys: string[]): boolean {\n for (const row of data) {\n for (const k of keys) {\n const v = (row as Record<string, unknown>)[k];\n if (typeof v === 'number' && Number.isFinite(v) && !Number.isInteger(v)) return false;\n }\n }\n return true;\n}\n\n// ---------- LineChart ---------------------------------------------------\nexport interface LineChartProps<D = any> extends CartesianChartProps<D> {\n smooth?: boolean;\n /** Interpolation. `monotone` smooths (default, back-compat); `linear` draws honest\n * straight segments — recommended for counts/stepped series (no phantom humps over zeros). */\n curve?: 'linear' | 'monotone';\n}\n\nexport function LineChart<D = any>({\n recharts: R, data, categoryKey, series,\n height = 280, className, ariaLabel,\n showGrid = true, showLegend = true, smooth = true, curve,\n xTickFormatter, xTickInterval, xTickAngle, valueFormatter, allowDecimals, tooltipLabelFormatter, tooltip, accessibilityLayer = true,\n}: LineChartProps<D>) {\n const lineType = curve ?? (smooth ? 'monotone' : 'linear');\n const allowDec = allowDecimals ?? !allIntegerValues(data, series.map((s) => s.key));\n return (\n <div className={cx('chart', className)} role=\"img\" aria-label={ariaLabel}>\n <R.ResponsiveContainer width=\"100%\" height={height}>\n <R.LineChart data={data} accessibilityLayer={accessibilityLayer} margin={{ top: 8, right: 16, bottom: 0, left: 0 }}>\n {showGrid && <R.CartesianGrid stroke=\"var(--border-default)\" strokeDasharray=\"3 3\" vertical={false} />}\n <R.XAxis dataKey={categoryKey} stroke=\"var(--fg-subtle)\" fontSize={12} tickLine={false} axisLine={false} {...categoryTickProps({ xTickFormatter, xTickInterval, xTickAngle })} />\n <R.YAxis stroke=\"var(--fg-subtle)\" fontSize={12} tickLine={false} axisLine={false} {...valueAxisProps(valueFormatter, allowDec)} />\n <R.Tooltip contentStyle={tooltipContentStyle(tooltip)} {...tooltipChrome(tooltip)} {...tooltipProps(valueFormatter, tooltipLabelFormatter, xTickFormatter)} />\n {showLegend && <R.Legend wrapperStyle={{ fontSize: 12 }} />}\n {series.map((s, i) => (\n <R.Line\n key={s.key}\n type={lineType}\n dataKey={s.key}\n name={s.label ?? s.key}\n stroke={s.color ?? PALETTE[i % PALETTE.length]}\n strokeWidth={2}\n dot={false}\n activeDot={{ r: 4 }}\n />\n ))}\n </R.LineChart>\n </R.ResponsiveContainer>\n </div>\n );\n}\n\n// ---------- AreaChart ---------------------------------------------------\nexport interface AreaChartProps<D = any> extends LineChartProps<D> {\n stacked?: boolean;\n}\n\nexport function AreaChart<D = any>({\n recharts: R, data, categoryKey, series,\n height = 280, className, ariaLabel,\n showGrid = true, showLegend = true, smooth = true, curve, stacked,\n xTickFormatter, xTickInterval, xTickAngle, valueFormatter, allowDecimals, tooltipLabelFormatter, tooltip, accessibilityLayer = true,\n}: AreaChartProps<D>) {\n const lineType = curve ?? (smooth ? 'monotone' : 'linear');\n const allowDec = allowDecimals ?? !allIntegerValues(data, series.map((s) => s.key));\n return (\n <div className={cx('chart', className)} role=\"img\" aria-label={ariaLabel}>\n <R.ResponsiveContainer width=\"100%\" height={height}>\n <R.AreaChart data={data} accessibilityLayer={accessibilityLayer} margin={{ top: 8, right: 16, bottom: 0, left: 0 }}>\n {showGrid && <R.CartesianGrid stroke=\"var(--border-default)\" strokeDasharray=\"3 3\" vertical={false} />}\n <R.XAxis dataKey={categoryKey} stroke=\"var(--fg-subtle)\" fontSize={12} tickLine={false} axisLine={false} {...categoryTickProps({ xTickFormatter, xTickInterval, xTickAngle })} />\n <R.YAxis stroke=\"var(--fg-subtle)\" fontSize={12} tickLine={false} axisLine={false} {...valueAxisProps(valueFormatter, allowDec)} />\n <R.Tooltip contentStyle={tooltipContentStyle(tooltip)} {...tooltipChrome(tooltip)} {...tooltipProps(valueFormatter, tooltipLabelFormatter, xTickFormatter)} />\n {showLegend && <R.Legend wrapperStyle={{ fontSize: 12 }} />}\n {series.map((s, i) => (\n <R.Area\n key={s.key}\n type={lineType}\n dataKey={s.key}\n name={s.label ?? s.key}\n stackId={stacked ? '1' : undefined}\n stroke={s.color ?? PALETTE[i % PALETTE.length]}\n fill={s.color ?? PALETTE[i % PALETTE.length]}\n fillOpacity={0.18}\n strokeWidth={2}\n />\n ))}\n </R.AreaChart>\n </R.ResponsiveContainer>\n </div>\n );\n}\n\n// ---------- BarChart ----------------------------------------------------\nexport interface BarChartProps<D = any> extends CartesianChartProps<D> {\n layout?: 'vertical' | 'horizontal';\n stacked?: boolean;\n}\n\nconst BAR_RADIUS = 4;\n\nexport function BarChart<D = any>({\n recharts: R, data, categoryKey, series,\n height = 280, className, ariaLabel,\n layout = 'vertical', stacked, showGrid = true, showLegend = true,\n xTickFormatter, xTickInterval, xTickAngle, valueFormatter, allowDecimals, tooltipLabelFormatter, tooltip, accessibilityLayer = true,\n}: BarChartProps<D>) {\n const isHorizontal = layout === 'horizontal';\n const allowDec = allowDecimals ?? !allIntegerValues(data, series.map((s) => s.key));\n // Radius must round the VALUE end: top for columns ([tl,tr,br,bl] → [R,R,0,0]),\n // right for horizontal bars ([0,R,R,0]). The old hardcoded [4,4,0,0] left\n // horizontal bars rounded-top / pointed-bottom.\n const endRadius = isHorizontal ? [0, BAR_RADIUS, BAR_RADIUS, 0] : [BAR_RADIUS, BAR_RADIUS, 0, 0];\n const lastIdx = series.length - 1;\n const catTicks = categoryTickProps({ xTickFormatter, xTickInterval, xTickAngle });\n const catTicksNoRotate = categoryTickProps({ xTickFormatter, xTickInterval, xTickAngle }, false);\n return (\n <div className={cx('chart', className)} role=\"img\" aria-label={ariaLabel}>\n <R.ResponsiveContainer width=\"100%\" height={height}>\n <R.BarChart data={data} accessibilityLayer={accessibilityLayer} layout={isHorizontal ? 'vertical' : 'horizontal'} margin={{ top: 8, right: 16, bottom: 0, left: 0 }}>\n {showGrid && <R.CartesianGrid stroke=\"var(--border-default)\" strokeDasharray=\"3 3\" vertical={isHorizontal} horizontal={!isHorizontal} />}\n {isHorizontal ? (\n <>\n <R.XAxis type=\"number\" stroke=\"var(--fg-subtle)\" fontSize={12} tickLine={false} axisLine={false} {...valueAxisProps(valueFormatter, allowDec)} />\n <R.YAxis dataKey={categoryKey} type=\"category\" stroke=\"var(--fg-subtle)\" fontSize={12} tickLine={false} axisLine={false} width={96} {...catTicksNoRotate} />\n </>\n ) : (\n <>\n <R.XAxis dataKey={categoryKey} stroke=\"var(--fg-subtle)\" fontSize={12} tickLine={false} axisLine={false} {...catTicks} />\n <R.YAxis stroke=\"var(--fg-subtle)\" fontSize={12} tickLine={false} axisLine={false} {...valueAxisProps(valueFormatter, allowDec)} />\n </>\n )}\n <R.Tooltip contentStyle={tooltipContentStyle(tooltip)} {...tooltipChrome(tooltip)} cursor={{ fill: 'var(--bg-subtle)' }} {...tooltipProps(valueFormatter, tooltipLabelFormatter, xTickFormatter)} />\n {showLegend && <R.Legend wrapperStyle={{ fontSize: 12 }} />}\n {series.map((s, i) => {\n // Stacked: only the outermost (last) segment carries the end radius;\n // inner segments stay square so the stack reads as one bar.\n const barRadius = stacked ? (i === lastIdx ? endRadius : [0, 0, 0, 0]) : endRadius;\n return (\n <R.Bar\n key={s.key}\n dataKey={s.key}\n name={s.label ?? s.key}\n stackId={stacked ? '1' : undefined}\n fill={s.color ?? PALETTE[i % PALETTE.length]}\n radius={barRadius}\n maxBarSize={48}\n />\n );\n })}\n </R.BarChart>\n </R.ResponsiveContainer>\n </div>\n );\n}\n\n// ---------- DonutChart --------------------------------------------------\nexport interface DonutChartProps extends Omit<BaseChartProps, 'data'> {\n data: Array<{ name: string; value: number; color?: string }>;\n centerLabel?: React.ReactNode;\n showLegend?: boolean;\n innerRadius?: number;\n outerRadius?: number;\n /** Format slice names in tooltip + legend, e.g. `V_REGION` → `V Región` (no need to pre-map the data). */\n nameFormatter?: (name: string) => string;\n /** Format slice values in the tooltip. */\n valueFormatter?: (value: number) => string;\n}\n\nexport function DonutChart({\n recharts: R, data, height = 240, className, ariaLabel,\n centerLabel, showLegend = true, innerRadius = 60, outerRadius = 88,\n nameFormatter, valueFormatter, tooltip, accessibilityLayer = true,\n}: DonutChartProps) {\n // Recharts Tooltip formatter returns [formattedValue, formattedName].\n const tooltipProps = (nameFormatter || valueFormatter)\n ? { formatter: (v: unknown, n: unknown) => [valueFormatter ? valueFormatter(Number(v)) : v, nameFormatter ? nameFormatter(String(n)) : n] }\n : {};\n return (\n <div className={cx('chart chart--donut', className)} role=\"img\" aria-label={ariaLabel}>\n <div className=\"chart__donut-area\" style={{ height }}>\n <R.ResponsiveContainer width=\"100%\" height=\"100%\">\n <R.PieChart accessibilityLayer={accessibilityLayer}>\n <R.Tooltip contentStyle={tooltipContentStyle(tooltip)} {...tooltipChrome(tooltip)} {...tooltipProps} />\n <R.Pie\n data={data}\n dataKey=\"value\"\n nameKey=\"name\"\n innerRadius={innerRadius}\n outerRadius={outerRadius}\n paddingAngle={2}\n stroke=\"var(--bg-surface)\"\n >\n {data.map((d, i) => <R.Cell key={i} fill={d.color ?? PALETTE[i % PALETTE.length]} />)}\n </R.Pie>\n </R.PieChart>\n </R.ResponsiveContainer>\n {centerLabel && <div className=\"chart__center\">{centerLabel}</div>}\n </div>\n {showLegend && (\n <ul className=\"chart__legend\" aria-hidden=\"true\">\n {data.map((d, i) => (\n <li key={d.name} className=\"chart__legend-item\">\n <span\n className=\"chart__legend-swatch\"\n style={{ background: d.color ?? PALETTE[i % PALETTE.length] }}\n />\n <span className=\"chart__legend-label\">{nameFormatter ? nameFormatter(d.name) : d.name}</span>\n </li>\n ))}\n </ul>\n )}\n </div>\n );\n}\n\n// ---------- Sparkline ---------------------------------------------------\nexport interface SparklineProps<D = any> {\n recharts: RechartsLike;\n data: D[];\n dataKey: keyof D & string;\n width?: number;\n height?: number;\n color?: string;\n fill?: boolean;\n /**\n * Show a hover dot. Default `false` — a sparkline is glanceable/non-interactive\n * (the fine detail lives in the big LineChart). When off there's no active dot\n * to clip at the edges/base; when on, the margins are widened so it isn't cut.\n */\n interactive?: boolean;\n /** Tooltip sizing/positioning (only used when `interactive`). */\n tooltip?: ChartTooltipConfig;\n className?: string;\n ariaLabel?: string;\n}\n\nexport function Sparkline<D = any>({\n recharts: R, data, dataKey,\n width = 120, height = 32, color = 'var(--color-primary)',\n fill = true, interactive = false, tooltip, className, ariaLabel,\n}: SparklineProps<D>) {\n // No hover dot by default (it clips against the tiny margins at the first/last\n // point and the baseline). When interactive, leave room so it can't be cut off.\n const margin = interactive ? { top: 4, right: 4, bottom: 4, left: 4 } : { top: 2, right: 0, bottom: 2, left: 0 };\n return (\n <div className={cx('sparkline', interactive && 'sparkline--interactive', className)} role=\"img\" aria-label={ariaLabel} style={{ width, height }}>\n <R.ResponsiveContainer width=\"100%\" height=\"100%\">\n <R.AreaChart data={data} accessibilityLayer={interactive} margin={margin}>\n {interactive && <R.Tooltip contentStyle={tooltipContentStyle(tooltip)} {...tooltipChrome(tooltip)} />}\n <R.Area\n type=\"monotone\"\n dataKey={dataKey}\n stroke={color}\n strokeWidth={1.5}\n fill={fill ? color : 'none'}\n fillOpacity={fill ? 0.18 : 0}\n isAnimationActive={false}\n activeDot={interactive ? { r: 2.5, strokeWidth: 0, fill: color } : false}\n />\n </R.AreaChart>\n </R.ResponsiveContainer>\n </div>\n );\n}\n"]}
package/dist/{chunk-4K26DN5F.mjs → chunk-JTSSM4NE.mjs} RENAMED
@@ -28,6 +28,13 @@ function valueAxisProps(valueFormatter, allowDecimals) {
28
28
  if (valueFormatter) props.tickFormatter = (v) => valueFormatter(Number(v));
29
29
  return props;
30
30
  }
31
+ var TOOLTIP_BASE_STYLE = { background: "var(--bg-surface)", border: "1px solid var(--border-default)", borderRadius: 8, fontSize: 12 };
32
+ function tooltipContentStyle(tooltip) {
33
+ return { ...TOOLTIP_BASE_STYLE, maxWidth: tooltip?.maxWidth ?? "min(220px, 90vw)", whiteSpace: "normal" };
34
+ }
35
+ function tooltipChrome(tooltip) {
36
+ return tooltip?.allowEscapeViewBox ? { allowEscapeViewBox: tooltip.allowEscapeViewBox } : {};
37
+ }
31
38
  function tooltipProps(valueFormatter, tooltipLabelFormatter, xTickFormatter) {
32
39
  const props = {};
33
40
  if (valueFormatter) props.formatter = (v) => valueFormatter(Number(v));
@@ -61,15 +68,17 @@ function LineChart({
61
68
  xTickAngle,
62
69
  valueFormatter,
63
70
  allowDecimals,
64
- tooltipLabelFormatter
71
+ tooltipLabelFormatter,
72
+ tooltip,
73
+ accessibilityLayer = true
65
74
  }) {
66
75
  const lineType = curve ?? (smooth ? "monotone" : "linear");
67
76
  const allowDec = allowDecimals ?? !allIntegerValues(data, series.map((s) => s.key));
68
- return /* @__PURE__ */ jsx("div", { className: cx("chart", className), role: "img", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(R.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(R.LineChart, { data, margin: { top: 8, right: 16, bottom: 0, left: 0 }, children: [
77
+ return /* @__PURE__ */ jsx("div", { className: cx("chart", className), role: "img", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(R.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(R.LineChart, { data, accessibilityLayer, margin: { top: 8, right: 16, bottom: 0, left: 0 }, children: [
69
78
  showGrid && /* @__PURE__ */ jsx(R.CartesianGrid, { stroke: "var(--border-default)", strokeDasharray: "3 3", vertical: false }),
70
79
  /* @__PURE__ */ jsx(R.XAxis, { dataKey: categoryKey, stroke: "var(--fg-subtle)", fontSize: 12, tickLine: false, axisLine: false, ...categoryTickProps({ xTickFormatter, xTickInterval, xTickAngle }) }),
71
80
  /* @__PURE__ */ jsx(R.YAxis, { stroke: "var(--fg-subtle)", fontSize: 12, tickLine: false, axisLine: false, ...valueAxisProps(valueFormatter, allowDec) }),
72
- /* @__PURE__ */ jsx(R.Tooltip, { contentStyle: { background: "var(--bg-surface)", border: "1px solid var(--border-default)", borderRadius: 8, fontSize: 12 }, ...tooltipProps(valueFormatter, tooltipLabelFormatter, xTickFormatter) }),
81
+ /* @__PURE__ */ jsx(R.Tooltip, { contentStyle: tooltipContentStyle(tooltip), ...tooltipChrome(tooltip), ...tooltipProps(valueFormatter, tooltipLabelFormatter, xTickFormatter) }),
73
82
  showLegend && /* @__PURE__ */ jsx(R.Legend, { wrapperStyle: { fontSize: 12 } }),
74
83
  series.map((s, i) => /* @__PURE__ */ jsx(
75
84
  R.Line,
@@ -104,15 +113,17 @@ function AreaChart({
104
113
  xTickAngle,
105
114
  valueFormatter,
106
115
  allowDecimals,
107
- tooltipLabelFormatter
116
+ tooltipLabelFormatter,
117
+ tooltip,
118
+ accessibilityLayer = true
108
119
  }) {
109
120
  const lineType = curve ?? (smooth ? "monotone" : "linear");
110
121
  const allowDec = allowDecimals ?? !allIntegerValues(data, series.map((s) => s.key));
111
- return /* @__PURE__ */ jsx("div", { className: cx("chart", className), role: "img", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(R.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(R.AreaChart, { data, margin: { top: 8, right: 16, bottom: 0, left: 0 }, children: [
122
+ return /* @__PURE__ */ jsx("div", { className: cx("chart", className), role: "img", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(R.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(R.AreaChart, { data, accessibilityLayer, margin: { top: 8, right: 16, bottom: 0, left: 0 }, children: [
112
123
  showGrid && /* @__PURE__ */ jsx(R.CartesianGrid, { stroke: "var(--border-default)", strokeDasharray: "3 3", vertical: false }),
113
124
  /* @__PURE__ */ jsx(R.XAxis, { dataKey: categoryKey, stroke: "var(--fg-subtle)", fontSize: 12, tickLine: false, axisLine: false, ...categoryTickProps({ xTickFormatter, xTickInterval, xTickAngle }) }),
114
125
  /* @__PURE__ */ jsx(R.YAxis, { stroke: "var(--fg-subtle)", fontSize: 12, tickLine: false, axisLine: false, ...valueAxisProps(valueFormatter, allowDec) }),
115
- /* @__PURE__ */ jsx(R.Tooltip, { contentStyle: { background: "var(--bg-surface)", border: "1px solid var(--border-default)", borderRadius: 8, fontSize: 12 }, ...tooltipProps(valueFormatter, tooltipLabelFormatter, xTickFormatter) }),
126
+ /* @__PURE__ */ jsx(R.Tooltip, { contentStyle: tooltipContentStyle(tooltip), ...tooltipChrome(tooltip), ...tooltipProps(valueFormatter, tooltipLabelFormatter, xTickFormatter) }),
116
127
  showLegend && /* @__PURE__ */ jsx(R.Legend, { wrapperStyle: { fontSize: 12 } }),
117
128
  series.map((s, i) => /* @__PURE__ */ jsx(
118
129
  R.Area,
@@ -148,7 +159,9 @@ function BarChart({
148
159
  xTickAngle,
149
160
  valueFormatter,
150
161
  allowDecimals,
151
- tooltipLabelFormatter
162
+ tooltipLabelFormatter,
163
+ tooltip,
164
+ accessibilityLayer = true
152
165
  }) {
153
166
  const isHorizontal = layout === "horizontal";
154
167
  const allowDec = allowDecimals ?? !allIntegerValues(data, series.map((s) => s.key));
@@ -156,7 +169,7 @@ function BarChart({
156
169
  const lastIdx = series.length - 1;
157
170
  const catTicks = categoryTickProps({ xTickFormatter, xTickInterval, xTickAngle });
158
171
  const catTicksNoRotate = categoryTickProps({ xTickFormatter, xTickInterval, xTickAngle }, false);
159
- return /* @__PURE__ */ jsx("div", { className: cx("chart", className), role: "img", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(R.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(R.BarChart, { data, layout: isHorizontal ? "vertical" : "horizontal", margin: { top: 8, right: 16, bottom: 0, left: 0 }, children: [
172
+ return /* @__PURE__ */ jsx("div", { className: cx("chart", className), role: "img", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(R.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(R.BarChart, { data, accessibilityLayer, layout: isHorizontal ? "vertical" : "horizontal", margin: { top: 8, right: 16, bottom: 0, left: 0 }, children: [
160
173
  showGrid && /* @__PURE__ */ jsx(R.CartesianGrid, { stroke: "var(--border-default)", strokeDasharray: "3 3", vertical: isHorizontal, horizontal: !isHorizontal }),
161
174
  isHorizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [
162
175
  /* @__PURE__ */ jsx(R.XAxis, { type: "number", stroke: "var(--fg-subtle)", fontSize: 12, tickLine: false, axisLine: false, ...valueAxisProps(valueFormatter, allowDec) }),
@@ -165,7 +178,7 @@ function BarChart({
165
178
  /* @__PURE__ */ jsx(R.XAxis, { dataKey: categoryKey, stroke: "var(--fg-subtle)", fontSize: 12, tickLine: false, axisLine: false, ...catTicks }),
166
179
  /* @__PURE__ */ jsx(R.YAxis, { stroke: "var(--fg-subtle)", fontSize: 12, tickLine: false, axisLine: false, ...valueAxisProps(valueFormatter, allowDec) })
167
180
  ] }),
168
- /* @__PURE__ */ jsx(R.Tooltip, { contentStyle: { background: "var(--bg-surface)", border: "1px solid var(--border-default)", borderRadius: 8, fontSize: 12 }, cursor: { fill: "var(--bg-subtle)" }, ...tooltipProps(valueFormatter, tooltipLabelFormatter, xTickFormatter) }),
181
+ /* @__PURE__ */ jsx(R.Tooltip, { contentStyle: tooltipContentStyle(tooltip), ...tooltipChrome(tooltip), cursor: { fill: "var(--bg-subtle)" }, ...tooltipProps(valueFormatter, tooltipLabelFormatter, xTickFormatter) }),
169
182
  showLegend && /* @__PURE__ */ jsx(R.Legend, { wrapperStyle: { fontSize: 12 } }),
170
183
  series.map((s, i) => {
171
184
  const barRadius = stacked ? i === lastIdx ? endRadius : [0, 0, 0, 0] : endRadius;
@@ -195,13 +208,15 @@ function DonutChart({
195
208
  innerRadius = 60,
196
209
  outerRadius = 88,
197
210
  nameFormatter,
198
- valueFormatter
211
+ valueFormatter,
212
+ tooltip,
213
+ accessibilityLayer = true
199
214
  }) {
200
215
  const tooltipProps2 = nameFormatter || valueFormatter ? { formatter: (v, n) => [valueFormatter ? valueFormatter(Number(v)) : v, nameFormatter ? nameFormatter(String(n)) : n] } : {};
201
216
  return /* @__PURE__ */ jsxs("div", { className: cx("chart chart--donut", className), role: "img", "aria-label": ariaLabel, children: [
202
217
  /* @__PURE__ */ jsxs("div", { className: "chart__donut-area", style: { height }, children: [
203
- /* @__PURE__ */ jsx(R.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(R.PieChart, { children: [
204
- /* @__PURE__ */ jsx(R.Tooltip, { contentStyle: { background: "var(--bg-surface)", border: "1px solid var(--border-default)", borderRadius: 8, fontSize: 12 }, ...tooltipProps2 }),
218
+ /* @__PURE__ */ jsx(R.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(R.PieChart, { accessibilityLayer, children: [
219
+ /* @__PURE__ */ jsx(R.Tooltip, { contentStyle: tooltipContentStyle(tooltip), ...tooltipChrome(tooltip), ...tooltipProps2 }),
205
220
  /* @__PURE__ */ jsx(
206
221
  R.Pie,
207
222
  {
@@ -239,12 +254,13 @@ function Sparkline({
239
254
  color = "var(--color-primary)",
240
255
  fill = true,
241
256
  interactive = false,
257
+ tooltip,
242
258
  className,
243
259
  ariaLabel
244
260
  }) {
245
261
  const margin = interactive ? { top: 4, right: 4, bottom: 4, left: 4 } : { top: 2, right: 0, bottom: 2, left: 0 };
246
- return /* @__PURE__ */ jsx("div", { className: cx("sparkline", interactive && "sparkline--interactive", className), role: "img", "aria-label": ariaLabel, style: { width, height }, children: /* @__PURE__ */ jsx(R.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(R.AreaChart, { data, margin, children: [
247
- interactive && /* @__PURE__ */ jsx(R.Tooltip, { contentStyle: { background: "var(--bg-surface)", border: "1px solid var(--border-default)", borderRadius: 8, fontSize: 12 } }),
262
+ return /* @__PURE__ */ jsx("div", { className: cx("sparkline", interactive && "sparkline--interactive", className), role: "img", "aria-label": ariaLabel, style: { width, height }, children: /* @__PURE__ */ jsx(R.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(R.AreaChart, { data, accessibilityLayer: interactive, margin, children: [
263
+ interactive && /* @__PURE__ */ jsx(R.Tooltip, { contentStyle: tooltipContentStyle(tooltip), ...tooltipChrome(tooltip) }),
248
264
  /* @__PURE__ */ jsx(
249
265
  R.Area,
250
266
  {
@@ -262,5 +278,5 @@ function Sparkline({
262
278
  }
263
279
 
264
280
  export { AreaChart, BarChart, DonutChart, LineChart, Sparkline };
265
- //# sourceMappingURL=chunk-4K26DN5F.mjs.map
266
- //# sourceMappingURL=chunk-4K26DN5F.mjs.map
281
+ //# sourceMappingURL=chunk-JTSSM4NE.mjs.map
282
+ //# sourceMappingURL=chunk-JTSSM4NE.mjs.map
package/dist/chunk-JTSSM4NE.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Charts.tsx"],"names":["tooltipProps"],"mappings":"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","file":"chunk-JTSSM4NE.mjs","sourcesContent":["'use client';\nimport * as React from 'react';\nimport { cx } from '../utils/cx';\n\n/**\n * Lightweight chart wrappers. We do NOT bundle Recharts — the host app provides it\n * and passes the modules in via the `recharts` prop so consumers only pay for what they use.\n *\n * Recharts is treated as an implicit peer dependency: install it in the host\n * app if you use any chart component. Use **recharts ≥ 3** — earlier versions use\n * `defaultProps` on function components, which logs a deprecation warning under\n * React 19. recharts 3 removed them; these wrappers use default parameters, so on\n * recharts 3.8+ the console stays clean (verified).\n *\n * Usage in a Next.js client component:\n *\n * import * as Recharts from 'recharts';\n * import { LineChart } from '@misael703/elalba-ui';\n * <LineChart recharts={Recharts} data={...} dataKey=\"value\" categoryKey=\"month\" />\n */\n\n// Structural mirror of the Recharts public API. `any` is intentional here:\n// each Recharts component has a different prop shape, and typing them\n// exhaustively would mean depending on `recharts` types — which would force\n// consumers to install recharts even when they don't use any chart.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype RechartsComp = React.ComponentType<any>;\n\nexport type RechartsLike = {\n ResponsiveContainer: RechartsComp;\n LineChart: RechartsComp;\n AreaChart: RechartsComp;\n BarChart: RechartsComp;\n PieChart: RechartsComp;\n Line: RechartsComp;\n Area: RechartsComp;\n Bar: RechartsComp;\n Pie: RechartsComp;\n Cell: RechartsComp;\n CartesianGrid: RechartsComp;\n XAxis: RechartsComp;\n YAxis: RechartsComp;\n Tooltip: RechartsComp;\n Legend: RechartsComp;\n};\n\nconst PALETTE = [\n 'var(--color-primary)',\n 'var(--color-secondary)',\n 'var(--color-primary-900)',\n 'var(--color-success)',\n 'var(--color-warning)',\n 'var(--color-danger)',\n '#6b7e95',\n '#d4a574',\n];\n\n/** Tooltip chrome shared by every chart. */\nexport interface ChartTooltipConfig {\n /**\n * Cap the tooltip width so long content wraps instead of overflowing a narrow\n * (mobile) chart. Default `min(220px, 90vw)`. Number = px; or any CSS length.\n */\n maxWidth?: number | string;\n /** Let the tooltip escape the chart's plotting box. Default: recharts (stays inside). */\n allowEscapeViewBox?: { x?: boolean; y?: boolean };\n}\n\nexport interface BaseChartProps<D = any> {\n recharts: RechartsLike;\n data: D[];\n height?: number;\n className?: string;\n ariaLabel?: string;\n /** Tooltip sizing/positioning. By default the tooltip caps its width and wraps. */\n tooltip?: ChartTooltipConfig;\n /**\n * recharts' keyboard-navigation layer (puts `tabindex=0` on the svg + arrow-key\n * navigation). Default `true`. Set `false` for a non-actionable chart so it's\n * not a Tab stop / not focusable (no drill-down → nothing to navigate to).\n */\n accessibilityLayer?: boolean;\n}\n\n// Mirror of Recharts' AxisInterval. Controls how category ticks thin on\n// collision so dense series (e.g. daily points) don't crowd the axis.\nexport type AxisInterval =\n | number\n | 'preserveStart'\n | 'preserveEnd'\n | 'preserveStartEnd'\n | 'equidistantPreserveStart'\n | 'equidistantPreserveEnd';\n\n// Shared cartesian controls (Line/Area/Bar). DonutChart/Sparkline don't have a\n// category axis, so they keep BaseChartProps.\nexport interface CartesianChartProps<D = any> extends BaseChartProps<D> {\n categoryKey: keyof D & string;\n series: Array<{ key: keyof D & string; label?: string; color?: string }>;\n showGrid?: boolean;\n showLegend?: boolean;\n /** Format each category-axis tick label, e.g. shorten `2026-05-23`. → XAxis.tickFormatter */\n xTickFormatter?: (value: string) => string;\n /** Thin out category ticks on collision. → XAxis.interval. Default `preserveStartEnd`. */\n xTickInterval?: AxisInterval;\n /** Rotate category-axis labels N degrees (anchors end + reserves height so they don't clip). */\n xTickAngle?: number;\n /** Format numeric values (value-axis ticks + tooltip). */\n valueFormatter?: (value: number) => string;\n /**\n * Allow fractional value-axis ticks. Default: auto — `false` when every series\n * value is an integer (count data → no `0.25` ticks), `true` otherwise. Pass\n * explicitly to override the auto-detection.\n */\n allowDecimals?: boolean;\n /**\n * Format the category label in the tooltip. Defaults to `xTickFormatter` so the\n * tooltip matches the axis (e.g. both show `18 jun`, not the raw `2026-06-18`).\n */\n tooltipLabelFormatter?: (value: string) => string;\n}\n\nconst DEFAULT_X_INTERVAL: AxisInterval = 'preserveStartEnd';\n\n// Recharts XAxis/YAxis are `any`-typed (structural mirror), so tick controls go\n// in as a spread. `rotate` is off when the category axis is the Y axis\n// (horizontal bars: those labels are already horizontal).\nfunction categoryTickProps(\n opts: Pick<CartesianChartProps, 'xTickFormatter' | 'xTickInterval' | 'xTickAngle'>,\n rotate = true,\n): Record<string, unknown> {\n const props: Record<string, unknown> = { interval: opts.xTickInterval ?? DEFAULT_X_INTERVAL };\n if (opts.xTickFormatter) props.tickFormatter = opts.xTickFormatter;\n if (rotate && opts.xTickAngle) {\n props.angle = opts.xTickAngle;\n props.textAnchor = 'end';\n props.height = 56; // reserve room so the rotated label isn't clipped\n }\n return props;\n}\n\n// Value axis: `allowDecimals` (count data → integer-only ticks) + optional\n// numeric tick formatter.\nfunction valueAxisProps(valueFormatter: ((v: number) => string) | undefined, allowDecimals: boolean): Record<string, unknown> {\n const props: Record<string, unknown> = { allowDecimals };\n if (valueFormatter) props.tickFormatter = (v: number) => valueFormatter(Number(v));\n return props;\n}\n\n// Tooltip box style: the kit chrome + a width cap with wrapping so long content\n// (long labels / many series) doesn't overflow a narrow chart. `min(220px, 90vw)`\n// stays inside on mobile and caps to 220px on desktop.\nconst TOOLTIP_BASE_STYLE = { background: 'var(--bg-surface)', border: '1px solid var(--border-default)', borderRadius: 8, fontSize: 12 } as const;\n\nfunction tooltipContentStyle(tooltip?: ChartTooltipConfig): Record<string, unknown> {\n return { ...TOOLTIP_BASE_STYLE, maxWidth: tooltip?.maxWidth ?? 'min(220px, 90vw)', whiteSpace: 'normal' };\n}\n\nfunction tooltipChrome(tooltip?: ChartTooltipConfig): Record<string, unknown> {\n return tooltip?.allowEscapeViewBox ? { allowEscapeViewBox: tooltip.allowEscapeViewBox } : {};\n}\n\n// Tooltip: value formatter + a category-label formatter that defaults to the\n// axis tick formatter (so the hovered label matches the axis).\nfunction tooltipProps(\n valueFormatter: ((v: number) => string) | undefined,\n tooltipLabelFormatter: ((v: string) => string) | undefined,\n xTickFormatter: ((v: string) => string) | undefined,\n): Record<string, unknown> {\n const props: Record<string, unknown> = {};\n if (valueFormatter) props.formatter = (v: unknown) => valueFormatter(Number(v));\n const labelFormatter = tooltipLabelFormatter ?? xTickFormatter;\n if (labelFormatter) props.labelFormatter = (v: unknown) => labelFormatter(String(v));\n return props;\n}\n\n// True when every plotted value is an integer → drives the `allowDecimals` auto-\n// detection (count series shouldn't get `0.25`-style ticks).\nfunction allIntegerValues<D>(data: D[], keys: string[]): boolean {\n for (const row of data) {\n for (const k of keys) {\n const v = (row as Record<string, unknown>)[k];\n if (typeof v === 'number' && Number.isFinite(v) && !Number.isInteger(v)) return false;\n }\n }\n return true;\n}\n\n// ---------- LineChart ---------------------------------------------------\nexport interface LineChartProps<D = any> extends CartesianChartProps<D> {\n smooth?: boolean;\n /** Interpolation. `monotone` smooths (default, back-compat); `linear` draws honest\n * straight segments — recommended for counts/stepped series (no phantom humps over zeros). */\n curve?: 'linear' | 'monotone';\n}\n\nexport function LineChart<D = any>({\n recharts: R, data, categoryKey, series,\n height = 280, className, ariaLabel,\n showGrid = true, showLegend = true, smooth = true, curve,\n xTickFormatter, xTickInterval, xTickAngle, valueFormatter, allowDecimals, tooltipLabelFormatter, tooltip, accessibilityLayer = true,\n}: LineChartProps<D>) {\n const lineType = curve ?? (smooth ? 'monotone' : 'linear');\n const allowDec = allowDecimals ?? !allIntegerValues(data, series.map((s) => s.key));\n return (\n <div className={cx('chart', className)} role=\"img\" aria-label={ariaLabel}>\n <R.ResponsiveContainer width=\"100%\" height={height}>\n <R.LineChart data={data} accessibilityLayer={accessibilityLayer} margin={{ top: 8, right: 16, bottom: 0, left: 0 }}>\n {showGrid && <R.CartesianGrid stroke=\"var(--border-default)\" strokeDasharray=\"3 3\" vertical={false} />}\n <R.XAxis dataKey={categoryKey} stroke=\"var(--fg-subtle)\" fontSize={12} tickLine={false} axisLine={false} {...categoryTickProps({ xTickFormatter, xTickInterval, xTickAngle })} />\n <R.YAxis stroke=\"var(--fg-subtle)\" fontSize={12} tickLine={false} axisLine={false} {...valueAxisProps(valueFormatter, allowDec)} />\n <R.Tooltip contentStyle={tooltipContentStyle(tooltip)} {...tooltipChrome(tooltip)} {...tooltipProps(valueFormatter, tooltipLabelFormatter, xTickFormatter)} />\n {showLegend && <R.Legend wrapperStyle={{ fontSize: 12 }} />}\n {series.map((s, i) => (\n <R.Line\n key={s.key}\n type={lineType}\n dataKey={s.key}\n name={s.label ?? s.key}\n stroke={s.color ?? PALETTE[i % PALETTE.length]}\n strokeWidth={2}\n dot={false}\n activeDot={{ r: 4 }}\n />\n ))}\n </R.LineChart>\n </R.ResponsiveContainer>\n </div>\n );\n}\n\n// ---------- AreaChart ---------------------------------------------------\nexport interface AreaChartProps<D = any> extends LineChartProps<D> {\n stacked?: boolean;\n}\n\nexport function AreaChart<D = any>({\n recharts: R, data, categoryKey, series,\n height = 280, className, ariaLabel,\n showGrid = true, showLegend = true, smooth = true, curve, stacked,\n xTickFormatter, xTickInterval, xTickAngle, valueFormatter, allowDecimals, tooltipLabelFormatter, tooltip, accessibilityLayer = true,\n}: AreaChartProps<D>) {\n const lineType = curve ?? (smooth ? 'monotone' : 'linear');\n const allowDec = allowDecimals ?? !allIntegerValues(data, series.map((s) => s.key));\n return (\n <div className={cx('chart', className)} role=\"img\" aria-label={ariaLabel}>\n <R.ResponsiveContainer width=\"100%\" height={height}>\n <R.AreaChart data={data} accessibilityLayer={accessibilityLayer} margin={{ top: 8, right: 16, bottom: 0, left: 0 }}>\n {showGrid && <R.CartesianGrid stroke=\"var(--border-default)\" strokeDasharray=\"3 3\" vertical={false} />}\n <R.XAxis dataKey={categoryKey} stroke=\"var(--fg-subtle)\" fontSize={12} tickLine={false} axisLine={false} {...categoryTickProps({ xTickFormatter, xTickInterval, xTickAngle })} />\n <R.YAxis stroke=\"var(--fg-subtle)\" fontSize={12} tickLine={false} axisLine={false} {...valueAxisProps(valueFormatter, allowDec)} />\n <R.Tooltip contentStyle={tooltipContentStyle(tooltip)} {...tooltipChrome(tooltip)} {...tooltipProps(valueFormatter, tooltipLabelFormatter, xTickFormatter)} />\n {showLegend && <R.Legend wrapperStyle={{ fontSize: 12 }} />}\n {series.map((s, i) => (\n <R.Area\n key={s.key}\n type={lineType}\n dataKey={s.key}\n name={s.label ?? s.key}\n stackId={stacked ? '1' : undefined}\n stroke={s.color ?? PALETTE[i % PALETTE.length]}\n fill={s.color ?? PALETTE[i % PALETTE.length]}\n fillOpacity={0.18}\n strokeWidth={2}\n />\n ))}\n </R.AreaChart>\n </R.ResponsiveContainer>\n </div>\n );\n}\n\n// ---------- BarChart ----------------------------------------------------\nexport interface BarChartProps<D = any> extends CartesianChartProps<D> {\n layout?: 'vertical' | 'horizontal';\n stacked?: boolean;\n}\n\nconst BAR_RADIUS = 4;\n\nexport function BarChart<D = any>({\n recharts: R, data, categoryKey, series,\n height = 280, className, ariaLabel,\n layout = 'vertical', stacked, showGrid = true, showLegend = true,\n xTickFormatter, xTickInterval, xTickAngle, valueFormatter, allowDecimals, tooltipLabelFormatter, tooltip, accessibilityLayer = true,\n}: BarChartProps<D>) {\n const isHorizontal = layout === 'horizontal';\n const allowDec = allowDecimals ?? !allIntegerValues(data, series.map((s) => s.key));\n // Radius must round the VALUE end: top for columns ([tl,tr,br,bl] → [R,R,0,0]),\n // right for horizontal bars ([0,R,R,0]). The old hardcoded [4,4,0,0] left\n // horizontal bars rounded-top / pointed-bottom.\n const endRadius = isHorizontal ? [0, BAR_RADIUS, BAR_RADIUS, 0] : [BAR_RADIUS, BAR_RADIUS, 0, 0];\n const lastIdx = series.length - 1;\n const catTicks = categoryTickProps({ xTickFormatter, xTickInterval, xTickAngle });\n const catTicksNoRotate = categoryTickProps({ xTickFormatter, xTickInterval, xTickAngle }, false);\n return (\n <div className={cx('chart', className)} role=\"img\" aria-label={ariaLabel}>\n <R.ResponsiveContainer width=\"100%\" height={height}>\n <R.BarChart data={data} accessibilityLayer={accessibilityLayer} layout={isHorizontal ? 'vertical' : 'horizontal'} margin={{ top: 8, right: 16, bottom: 0, left: 0 }}>\n {showGrid && <R.CartesianGrid stroke=\"var(--border-default)\" strokeDasharray=\"3 3\" vertical={isHorizontal} horizontal={!isHorizontal} />}\n {isHorizontal ? (\n <>\n <R.XAxis type=\"number\" stroke=\"var(--fg-subtle)\" fontSize={12} tickLine={false} axisLine={false} {...valueAxisProps(valueFormatter, allowDec)} />\n <R.YAxis dataKey={categoryKey} type=\"category\" stroke=\"var(--fg-subtle)\" fontSize={12} tickLine={false} axisLine={false} width={96} {...catTicksNoRotate} />\n </>\n ) : (\n <>\n <R.XAxis dataKey={categoryKey} stroke=\"var(--fg-subtle)\" fontSize={12} tickLine={false} axisLine={false} {...catTicks} />\n <R.YAxis stroke=\"var(--fg-subtle)\" fontSize={12} tickLine={false} axisLine={false} {...valueAxisProps(valueFormatter, allowDec)} />\n </>\n )}\n <R.Tooltip contentStyle={tooltipContentStyle(tooltip)} {...tooltipChrome(tooltip)} cursor={{ fill: 'var(--bg-subtle)' }} {...tooltipProps(valueFormatter, tooltipLabelFormatter, xTickFormatter)} />\n {showLegend && <R.Legend wrapperStyle={{ fontSize: 12 }} />}\n {series.map((s, i) => {\n // Stacked: only the outermost (last) segment carries the end radius;\n // inner segments stay square so the stack reads as one bar.\n const barRadius = stacked ? (i === lastIdx ? endRadius : [0, 0, 0, 0]) : endRadius;\n return (\n <R.Bar\n key={s.key}\n dataKey={s.key}\n name={s.label ?? s.key}\n stackId={stacked ? '1' : undefined}\n fill={s.color ?? PALETTE[i % PALETTE.length]}\n radius={barRadius}\n maxBarSize={48}\n />\n );\n })}\n </R.BarChart>\n </R.ResponsiveContainer>\n </div>\n );\n}\n\n// ---------- DonutChart --------------------------------------------------\nexport interface DonutChartProps extends Omit<BaseChartProps, 'data'> {\n data: Array<{ name: string; value: number; color?: string }>;\n centerLabel?: React.ReactNode;\n showLegend?: boolean;\n innerRadius?: number;\n outerRadius?: number;\n /** Format slice names in tooltip + legend, e.g. `V_REGION` → `V Región` (no need to pre-map the data). */\n nameFormatter?: (name: string) => string;\n /** Format slice values in the tooltip. */\n valueFormatter?: (value: number) => string;\n}\n\nexport function DonutChart({\n recharts: R, data, height = 240, className, ariaLabel,\n centerLabel, showLegend = true, innerRadius = 60, outerRadius = 88,\n nameFormatter, valueFormatter, tooltip, accessibilityLayer = true,\n}: DonutChartProps) {\n // Recharts Tooltip formatter returns [formattedValue, formattedName].\n const tooltipProps = (nameFormatter || valueFormatter)\n ? { formatter: (v: unknown, n: unknown) => [valueFormatter ? valueFormatter(Number(v)) : v, nameFormatter ? nameFormatter(String(n)) : n] }\n : {};\n return (\n <div className={cx('chart chart--donut', className)} role=\"img\" aria-label={ariaLabel}>\n <div className=\"chart__donut-area\" style={{ height }}>\n <R.ResponsiveContainer width=\"100%\" height=\"100%\">\n <R.PieChart accessibilityLayer={accessibilityLayer}>\n <R.Tooltip contentStyle={tooltipContentStyle(tooltip)} {...tooltipChrome(tooltip)} {...tooltipProps} />\n <R.Pie\n data={data}\n dataKey=\"value\"\n nameKey=\"name\"\n innerRadius={innerRadius}\n outerRadius={outerRadius}\n paddingAngle={2}\n stroke=\"var(--bg-surface)\"\n >\n {data.map((d, i) => <R.Cell key={i} fill={d.color ?? PALETTE[i % PALETTE.length]} />)}\n </R.Pie>\n </R.PieChart>\n </R.ResponsiveContainer>\n {centerLabel && <div className=\"chart__center\">{centerLabel}</div>}\n </div>\n {showLegend && (\n <ul className=\"chart__legend\" aria-hidden=\"true\">\n {data.map((d, i) => (\n <li key={d.name} className=\"chart__legend-item\">\n <span\n className=\"chart__legend-swatch\"\n style={{ background: d.color ?? PALETTE[i % PALETTE.length] }}\n />\n <span className=\"chart__legend-label\">{nameFormatter ? nameFormatter(d.name) : d.name}</span>\n </li>\n ))}\n </ul>\n )}\n </div>\n );\n}\n\n// ---------- Sparkline ---------------------------------------------------\nexport interface SparklineProps<D = any> {\n recharts: RechartsLike;\n data: D[];\n dataKey: keyof D & string;\n width?: number;\n height?: number;\n color?: string;\n fill?: boolean;\n /**\n * Show a hover dot. Default `false` — a sparkline is glanceable/non-interactive\n * (the fine detail lives in the big LineChart). When off there's no active dot\n * to clip at the edges/base; when on, the margins are widened so it isn't cut.\n */\n interactive?: boolean;\n /** Tooltip sizing/positioning (only used when `interactive`). */\n tooltip?: ChartTooltipConfig;\n className?: string;\n ariaLabel?: string;\n}\n\nexport function Sparkline<D = any>({\n recharts: R, data, dataKey,\n width = 120, height = 32, color = 'var(--color-primary)',\n fill = true, interactive = false, tooltip, className, ariaLabel,\n}: SparklineProps<D>) {\n // No hover dot by default (it clips against the tiny margins at the first/last\n // point and the baseline). When interactive, leave room so it can't be cut off.\n const margin = interactive ? { top: 4, right: 4, bottom: 4, left: 4 } : { top: 2, right: 0, bottom: 2, left: 0 };\n return (\n <div className={cx('sparkline', interactive && 'sparkline--interactive', className)} role=\"img\" aria-label={ariaLabel} style={{ width, height }}>\n <R.ResponsiveContainer width=\"100%\" height=\"100%\">\n <R.AreaChart data={data} accessibilityLayer={interactive} margin={margin}>\n {interactive && <R.Tooltip contentStyle={tooltipContentStyle(tooltip)} {...tooltipChrome(tooltip)} />}\n <R.Area\n type=\"monotone\"\n dataKey={dataKey}\n stroke={color}\n strokeWidth={1.5}\n fill={fill ? color : 'none'}\n fillOpacity={fill ? 0.18 : 0}\n isAnimationActive={false}\n activeDot={interactive ? { r: 2.5, strokeWidth: 0, fill: color } : false}\n />\n </R.AreaChart>\n </R.ResponsiveContainer>\n </div>\n );\n}\n"]}
package/dist/components/Charts.d.mts CHANGED
@@ -35,12 +35,33 @@ type RechartsLike = {
35
35
  Tooltip: RechartsComp;
36
36
  Legend: RechartsComp;
37
37
  };
38
+ /** Tooltip chrome shared by every chart. */
39
+ interface ChartTooltipConfig {
40
+ /**
41
+ * Cap the tooltip width so long content wraps instead of overflowing a narrow
42
+ * (mobile) chart. Default `min(220px, 90vw)`. Number = px; or any CSS length.
43
+ */
44
+ maxWidth?: number | string;
45
+ /** Let the tooltip escape the chart's plotting box. Default: recharts (stays inside). */
46
+ allowEscapeViewBox?: {
47
+ x?: boolean;
48
+ y?: boolean;
49
+ };
50
+ }
38
51
  interface BaseChartProps<D = any> {
39
52
  recharts: RechartsLike;
40
53
  data: D[];
41
54
  height?: number;
42
55
  className?: string;
43
56
  ariaLabel?: string;
57
+ /** Tooltip sizing/positioning. By default the tooltip caps its width and wraps. */
58
+ tooltip?: ChartTooltipConfig;
59
+ /**
60
+ * recharts' keyboard-navigation layer (puts `tabindex=0` on the svg + arrow-key
61
+ * navigation). Default `true`. Set `false` for a non-actionable chart so it's
62
+ * not a Tab stop / not focusable (no drill-down → nothing to navigate to).
63
+ */
64
+ accessibilityLayer?: boolean;
44
65
  }
45
66
  type AxisInterval = number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd' | 'equidistantPreserveStart' | 'equidistantPreserveEnd';
46
67
  interface CartesianChartProps<D = any> extends BaseChartProps<D> {
@@ -78,16 +99,16 @@ interface LineChartProps<D = any> extends CartesianChartProps<D> {
78
99
  * straight segments — recommended for counts/stepped series (no phantom humps over zeros). */
79
100
  curve?: 'linear' | 'monotone';
80
101
  }
81
- declare function LineChart<D = any>({ recharts: R, data, categoryKey, series, height, className, ariaLabel, showGrid, showLegend, smooth, curve, xTickFormatter, xTickInterval, xTickAngle, valueFormatter, allowDecimals, tooltipLabelFormatter, }: LineChartProps<D>): react_jsx_runtime.JSX.Element;
102
+ declare function LineChart<D = any>({ recharts: R, data, categoryKey, series, height, className, ariaLabel, showGrid, showLegend, smooth, curve, xTickFormatter, xTickInterval, xTickAngle, valueFormatter, allowDecimals, tooltipLabelFormatter, tooltip, accessibilityLayer, }: LineChartProps<D>): react_jsx_runtime.JSX.Element;
82
103
  interface AreaChartProps<D = any> extends LineChartProps<D> {
83
104
  stacked?: boolean;
84
105
  }
85
- declare function AreaChart<D = any>({ recharts: R, data, categoryKey, series, height, className, ariaLabel, showGrid, showLegend, smooth, curve, stacked, xTickFormatter, xTickInterval, xTickAngle, valueFormatter, allowDecimals, tooltipLabelFormatter, }: AreaChartProps<D>): react_jsx_runtime.JSX.Element;
106
+ declare function AreaChart<D = any>({ recharts: R, data, categoryKey, series, height, className, ariaLabel, showGrid, showLegend, smooth, curve, stacked, xTickFormatter, xTickInterval, xTickAngle, valueFormatter, allowDecimals, tooltipLabelFormatter, tooltip, accessibilityLayer, }: AreaChartProps<D>): react_jsx_runtime.JSX.Element;
86
107
  interface BarChartProps<D = any> extends CartesianChartProps<D> {
87
108
  layout?: 'vertical' | 'horizontal';
88
109
  stacked?: boolean;
89
110
  }
90
- declare function BarChart<D = any>({ recharts: R, data, categoryKey, series, height, className, ariaLabel, layout, stacked, showGrid, showLegend, xTickFormatter, xTickInterval, xTickAngle, valueFormatter, allowDecimals, tooltipLabelFormatter, }: BarChartProps<D>): react_jsx_runtime.JSX.Element;
111
+ declare function BarChart<D = any>({ recharts: R, data, categoryKey, series, height, className, ariaLabel, layout, stacked, showGrid, showLegend, xTickFormatter, xTickInterval, xTickAngle, valueFormatter, allowDecimals, tooltipLabelFormatter, tooltip, accessibilityLayer, }: BarChartProps<D>): react_jsx_runtime.JSX.Element;
91
112
  interface DonutChartProps extends Omit<BaseChartProps, 'data'> {
92
113
  data: Array<{
93
114
  name: string;
@@ -103,7 +124,7 @@ interface DonutChartProps extends Omit<BaseChartProps, 'data'> {
103
124
  /** Format slice values in the tooltip. */
104
125
  valueFormatter?: (value: number) => string;
105
126
  }
106
- declare function DonutChart({ recharts: R, data, height, className, ariaLabel, centerLabel, showLegend, innerRadius, outerRadius, nameFormatter, valueFormatter, }: DonutChartProps): react_jsx_runtime.JSX.Element;
127
+ declare function DonutChart({ recharts: R, data, height, className, ariaLabel, centerLabel, showLegend, innerRadius, outerRadius, nameFormatter, valueFormatter, tooltip, accessibilityLayer, }: DonutChartProps): react_jsx_runtime.JSX.Element;
107
128
  interface SparklineProps<D = any> {
108
129
  recharts: RechartsLike;
109
130
  data: D[];
@@ -118,9 +139,11 @@ interface SparklineProps<D = any> {
118
139
  * to clip at the edges/base; when on, the margins are widened so it isn't cut.
119
140
  */
120
141
  interactive?: boolean;
142
+ /** Tooltip sizing/positioning (only used when `interactive`). */
143
+ tooltip?: ChartTooltipConfig;
121
144
  className?: string;
122
145
  ariaLabel?: string;
123
146
  }
124
- declare function Sparkline<D = any>({ recharts: R, data, dataKey, width, height, color, fill, interactive, className, ariaLabel, }: SparklineProps<D>): react_jsx_runtime.JSX.Element;
147
+ declare function Sparkline<D = any>({ recharts: R, data, dataKey, width, height, color, fill, interactive, tooltip, className, ariaLabel, }: SparklineProps<D>): react_jsx_runtime.JSX.Element;
125
148
 
126
- export { AreaChart, type AreaChartProps, type AxisInterval, BarChart, type BarChartProps, type BaseChartProps, type CartesianChartProps, DonutChart, type DonutChartProps, LineChart, type LineChartProps, type RechartsLike, Sparkline, type SparklineProps };
149
+ export { AreaChart, type AreaChartProps, type AxisInterval, BarChart, type BarChartProps, type BaseChartProps, type CartesianChartProps, type ChartTooltipConfig, DonutChart, type DonutChartProps, LineChart, type LineChartProps, type RechartsLike, Sparkline, type SparklineProps };
package/dist/components/Charts.d.ts CHANGED
@@ -35,12 +35,33 @@ type RechartsLike = {
35
35
  Tooltip: RechartsComp;
36
36
  Legend: RechartsComp;
37
37
  };
38
+ /** Tooltip chrome shared by every chart. */
39
+ interface ChartTooltipConfig {
40
+ /**
41
+ * Cap the tooltip width so long content wraps instead of overflowing a narrow
42
+ * (mobile) chart. Default `min(220px, 90vw)`. Number = px; or any CSS length.
43
+ */
44
+ maxWidth?: number | string;
45
+ /** Let the tooltip escape the chart's plotting box. Default: recharts (stays inside). */
46
+ allowEscapeViewBox?: {
47
+ x?: boolean;
48
+ y?: boolean;
49
+ };
50
+ }
38
51
  interface BaseChartProps<D = any> {
39
52
  recharts: RechartsLike;
40
53
  data: D[];
41
54
  height?: number;
42
55
  className?: string;
43
56
  ariaLabel?: string;
57
+ /** Tooltip sizing/positioning. By default the tooltip caps its width and wraps. */
58
+ tooltip?: ChartTooltipConfig;
59
+ /**
60
+ * recharts' keyboard-navigation layer (puts `tabindex=0` on the svg + arrow-key
61
+ * navigation). Default `true`. Set `false` for a non-actionable chart so it's
62
+ * not a Tab stop / not focusable (no drill-down → nothing to navigate to).
63
+ */
64
+ accessibilityLayer?: boolean;
44
65
  }
45
66
  type AxisInterval = number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd' | 'equidistantPreserveStart' | 'equidistantPreserveEnd';
46
67
  interface CartesianChartProps<D = any> extends BaseChartProps<D> {
@@ -78,16 +99,16 @@ interface LineChartProps<D = any> extends CartesianChartProps<D> {
78
99
  * straight segments — recommended for counts/stepped series (no phantom humps over zeros). */
79
100
  curve?: 'linear' | 'monotone';
80
101
  }
81
- declare function LineChart<D = any>({ recharts: R, data, categoryKey, series, height, className, ariaLabel, showGrid, showLegend, smooth, curve, xTickFormatter, xTickInterval, xTickAngle, valueFormatter, allowDecimals, tooltipLabelFormatter, }: LineChartProps<D>): react_jsx_runtime.JSX.Element;
102
+ declare function LineChart<D = any>({ recharts: R, data, categoryKey, series, height, className, ariaLabel, showGrid, showLegend, smooth, curve, xTickFormatter, xTickInterval, xTickAngle, valueFormatter, allowDecimals, tooltipLabelFormatter, tooltip, accessibilityLayer, }: LineChartProps<D>): react_jsx_runtime.JSX.Element;
82
103
  interface AreaChartProps<D = any> extends LineChartProps<D> {
83
104
  stacked?: boolean;
84
105
  }
85
- declare function AreaChart<D = any>({ recharts: R, data, categoryKey, series, height, className, ariaLabel, showGrid, showLegend, smooth, curve, stacked, xTickFormatter, xTickInterval, xTickAngle, valueFormatter, allowDecimals, tooltipLabelFormatter, }: AreaChartProps<D>): react_jsx_runtime.JSX.Element;
106
+ declare function AreaChart<D = any>({ recharts: R, data, categoryKey, series, height, className, ariaLabel, showGrid, showLegend, smooth, curve, stacked, xTickFormatter, xTickInterval, xTickAngle, valueFormatter, allowDecimals, tooltipLabelFormatter, tooltip, accessibilityLayer, }: AreaChartProps<D>): react_jsx_runtime.JSX.Element;
86
107
  interface BarChartProps<D = any> extends CartesianChartProps<D> {
87
108
  layout?: 'vertical' | 'horizontal';
88
109
  stacked?: boolean;
89
110
  }
90
- declare function BarChart<D = any>({ recharts: R, data, categoryKey, series, height, className, ariaLabel, layout, stacked, showGrid, showLegend, xTickFormatter, xTickInterval, xTickAngle, valueFormatter, allowDecimals, tooltipLabelFormatter, }: BarChartProps<D>): react_jsx_runtime.JSX.Element;
111
+ declare function BarChart<D = any>({ recharts: R, data, categoryKey, series, height, className, ariaLabel, layout, stacked, showGrid, showLegend, xTickFormatter, xTickInterval, xTickAngle, valueFormatter, allowDecimals, tooltipLabelFormatter, tooltip, accessibilityLayer, }: BarChartProps<D>): react_jsx_runtime.JSX.Element;
91
112
  interface DonutChartProps extends Omit<BaseChartProps, 'data'> {
92
113
  data: Array<{
93
114
  name: string;
@@ -103,7 +124,7 @@ interface DonutChartProps extends Omit<BaseChartProps, 'data'> {
103
124
  /** Format slice values in the tooltip. */
104
125
  valueFormatter?: (value: number) => string;
105
126
  }
106
- declare function DonutChart({ recharts: R, data, height, className, ariaLabel, centerLabel, showLegend, innerRadius, outerRadius, nameFormatter, valueFormatter, }: DonutChartProps): react_jsx_runtime.JSX.Element;
127
+ declare function DonutChart({ recharts: R, data, height, className, ariaLabel, centerLabel, showLegend, innerRadius, outerRadius, nameFormatter, valueFormatter, tooltip, accessibilityLayer, }: DonutChartProps): react_jsx_runtime.JSX.Element;
107
128
  interface SparklineProps<D = any> {
108
129
  recharts: RechartsLike;
109
130
  data: D[];
@@ -118,9 +139,11 @@ interface SparklineProps<D = any> {
118
139
  * to clip at the edges/base; when on, the margins are widened so it isn't cut.
119
140
  */
120
141
  interactive?: boolean;
142
+ /** Tooltip sizing/positioning (only used when `interactive`). */
143
+ tooltip?: ChartTooltipConfig;
121
144
  className?: string;
122
145
  ariaLabel?: string;
123
146
  }
124
- declare function Sparkline<D = any>({ recharts: R, data, dataKey, width, height, color, fill, interactive, className, ariaLabel, }: SparklineProps<D>): react_jsx_runtime.JSX.Element;
147
+ declare function Sparkline<D = any>({ recharts: R, data, dataKey, width, height, color, fill, interactive, tooltip, className, ariaLabel, }: SparklineProps<D>): react_jsx_runtime.JSX.Element;
125
148
 
126
- export { AreaChart, type AreaChartProps, type AxisInterval, BarChart, type BarChartProps, type BaseChartProps, type CartesianChartProps, DonutChart, type DonutChartProps, LineChart, type LineChartProps, type RechartsLike, Sparkline, type SparklineProps };
149
+ export { AreaChart, type AreaChartProps, type AxisInterval, BarChart, type BarChartProps, type BaseChartProps, type CartesianChartProps, type ChartTooltipConfig, DonutChart, type DonutChartProps, LineChart, type LineChartProps, type RechartsLike, Sparkline, type SparklineProps };