@misoto22/design 0.3.1 → 0.6.0

package/dist/charts/BulletChart/BulletChart.js

@@ -0,0 +1,162 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChartFigure } from "../lib/figure.js";
+import { ChartEmpty } from "../lib/empty.js";
+import { defaultTick } from "../lib/format.js";
+const BAND_WEIGHT = { heaviest: 1, lightest: 0.3 };
+const BAR_SHARE = 0.34;
+function position(value, [low, high]) {
+  const span = high - low;
+  if (span === 0) return 0;
+  return Math.min(1, Math.max(0, (value - low) / span));
+}
+function pct(share) {
+  return `${Number((share * 100).toFixed(4))}%`;
+}
+function bands(ranges, [low, high], formatValue) {
+  const bounds = [...new Set(ranges.filter(Number.isFinite))].sort((a, b) => a - b).filter((bound) => bound > low && bound < high);
+  const edges = [low, ...bounds, high];
+  const count = edges.length - 1;
+  const { heaviest, lightest } = BAND_WEIGHT;
+  const list = Array.from({ length: count }, (_, index) => ({
+    from: edges[index],
+    to: edges[index + 1],
+    // Heaviest at the low end, lightening as the scale rises — so the measure
+    // bar, which is solid, stands out most where performance is best.
+    weight: count === 1 ? lightest : heaviest - index / (count - 1) * (heaviest - lightest)
+  }));
+  return { list, label: bounds.map(formatValue).join(", ") };
+}
+function resolve(data, domain, ranges, formatValue) {
+  return data.map((measure) => {
+    const own = measure.ranges ?? ranges ?? [];
+    const high = Math.max(measure.value, measure.target ?? Number.NEGATIVE_INFINITY, ...own);
+    const scale = measure.domain ?? domain ?? [Math.min(0, measure.value), high || 1];
+    const built = bands(own, scale, formatValue);
+    return { ...measure, domain: scale, bands: built.list, rangeLabel: built.label };
+  });
+}
+function BulletChart({
+  title,
+  showTitle,
+  description,
+  data,
+  ranges,
+  domain,
+  formatValue = defaultTick,
+  showScale = false,
+  className,
+  hideDataTable = false,
+  empty
+}) {
+  const measures = resolve(data, domain, ranges, formatValue);
+  return /* @__PURE__ */ jsx(
+    ChartFigure,
+    {
+      title,
+      showTitle,
+      description,
+      className,
+      table: hideDataTable ? false : {
+        rows: measures,
+        rowKey: "name",
+        columns: [
+          { key: "value", label: "Value" },
+          { key: "target", label: "Target" },
+          { key: "rangeLabel", label: "Range bounds" }
+        ]
+      },
+      children: measures.length === 0 ? /* @__PURE__ */ jsx(ChartEmpty, { ...empty || {} }) : /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-4", children: measures.map((measure) => /* @__PURE__ */ jsx(
+        BulletRow,
+        {
+          measure,
+          formatValue,
+          showScale
+        },
+        measure.name
+      )) })
+    }
+  );
+}
+function BulletRow({
+  measure,
+  formatValue,
+  showScale
+}) {
+  const scale = measure.domain;
+  const barShare = position(measure.value, scale);
+  const targetShare = measure.target === void 0 ? null : position(measure.target, scale);
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("span", { className: "truncate text-sm text-(--ink)", children: [
+        measure.name,
+        measure.detail && /* @__PURE__ */ jsx("span", { className: "ms-2 mono-meta text-(--ink-3-aa)", children: measure.detail })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "shrink-0 font-mono text-xs tabular-nums text-(--ink)", children: [
+        formatValue(measure.value),
+        measure.target !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-(--ink-3-aa)", children: [
+          " / ",
+          formatValue(measure.target)
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-hidden": true,
+        "data-slot": "bullet-track",
+        className: "relative h-6 w-full overflow-hidden rounded-(--radius-sm)",
+        children: [
+          measure.bands.map((band) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "bullet-band",
+              className: "absolute inset-y-0 block",
+              style: {
+                insetInlineStart: pct(position(band.from, scale)),
+                inlineSize: pct(position(band.to, scale) - position(band.from, scale)),
+                // The one translucent-mark pair in the token layer, because it is
+                // the only one that holds a different number on each ground.
+                backgroundColor: `color-mix(in srgb, var(--series-1) calc(var(--chart-fill) * ${band.weight} * 100%), transparent)`
+              }
+            },
+            `${band.from}-${band.to}`
+          )),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "bullet-bar",
+              className: "absolute block bg-(--series-1)",
+              style: {
+                insetInlineStart: 0,
+                insetBlockStart: pct((1 - BAR_SHARE) / 2),
+                blockSize: pct(BAR_SHARE),
+                inlineSize: pct(barShare)
+              }
+            }
+          ),
+          targetShare !== null && // A rule ACROSS the bar rather than a second bar beside it: the two
+          // are different kinds of number, and the reader has to be able to
+          // tell at a glance which one was achieved and which was asked for.
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "bullet-target",
+              className: "absolute inset-y-1 block w-0.5 bg-(--ink)",
+              style: { insetInlineStart: pct(targetShare), marginInlineStart: "-1px" }
+            }
+          )
+        ]
+      }
+    ),
+    showScale && /* @__PURE__ */ jsxs("div", { className: "flex justify-between mono-meta text-(--chart-axis)", children: [
+      /* @__PURE__ */ jsx("span", { children: formatValue(scale[0]) }),
+      /* @__PURE__ */ jsx("span", { children: formatValue(scale[1]) })
+    ] })
+  ] });
+}
+var BulletChart_default = BulletChart;
+export {
+  BulletChart,
+  BulletChart_default as default
+};
+//# sourceMappingURL=BulletChart.js.map

package/dist/charts/BulletChart/BulletChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/BulletChart/BulletChart.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { ChartFigure } from '../lib/figure'\nimport { ChartEmpty, type ChartEmptyProps } from '../lib/empty'\nimport { defaultTick } from '../lib/format'\n\n/**\n * The heaviest and lightest a qualitative band may be, as multiples of\n * `--chart-fill`.\n *\n * Few's rule is no more than five bands in one hue, arranged so the low end of\n * the scale is the heaviest. The measure bar is solid ink on top of them, so\n * the ceiling has to stay well under it: bands that compete with the bar stop\n * being the ground it is read against.\n */\nconst BAND_WEIGHT = { heaviest: 1, lightest: 0.3 } as const\n\n/** How tall the measure bar is, as a share of the track. Few's is a third. */\nconst BAR_SHARE = 0.34\n\n/** One measure, its target, and the bands it is read against. */\nexport interface BulletMeasure {\n  /** What is being measured. Doubles as the row's key, so it must be unique. */\n  name: string\n  /** The number the row is about. */\n  value: number\n  /**\n   * The number the measure is being judged against — last year, the budget,\n   * the SLO. Drawn as a rule across the bar, not as a second bar.\n   */\n  target?: number\n  /**\n   * The qualitative bands, as ascending UPPER bounds. `[60, 80]` on a 0–100\n   * scale draws three bands: 0–60, 60–80, 80–100.\n   *\n   * Few's limit is five, and it is a real one: past that the shades stop being\n   * separable and the bands become a gradient nobody can read a boundary off.\n   */\n  ranges?: number[]\n  /** The scale, as `[min, max]`. Falls back to the chart's, then to the data. */\n  domain?: [number, number]\n  /** A second line under the name — the unit, the window, the owner. */\n  detail?: ReactNode\n}\n\n/** A measure with its scale and bands resolved. */\ninterface ResolvedMeasure extends BulletMeasure {\n  domain: [number, number]\n  bands: { from: number; to: number; weight: number }[]\n  /** Written out for the hidden table, which cannot print an array. */\n  rangeLabel: string\n}\n\n/** Where a value sits on the scale, 0 to 1, clamped to it. */\nfunction position(value: number, [low, high]: [number, number]): number {\n  const span = high - low\n  if (span === 0) return 0\n  return Math.min(1, Math.max(0, (value - low) / span))\n}\n\n/**\n * A share of the track, as a CSS percentage.\n *\n * Rounded, because binary floating point turns `0.8 - 0.5` into\n * `30.000000000000004%` — a number no layout engine cares about and every\n * reader of the DOM does. Four places is finer than a subpixel on any track\n * this chart will be given.\n */\nfunction pct(share: number): string {\n  return `${Number((share * 100).toFixed(4))}%`\n}\n\n/** The bands, from the ascending upper bounds, each with its own weight. */\nfunction bands(\n  ranges: number[],\n  [low, high]: [number, number],\n  formatValue: (value: number) => string,\n): { list: ResolvedMeasure['bands']; label: string } {\n  const bounds = [...new Set(ranges.filter(Number.isFinite))]\n    .sort((a, b) => a - b)\n    .filter((bound) => bound > low && bound < high)\n\n  const edges = [low, ...bounds, high]\n  const count = edges.length - 1\n  const { heaviest, lightest } = BAND_WEIGHT\n\n  const list = Array.from({ length: count }, (_, index) => ({\n    from: edges[index]!,\n    to: edges[index + 1]!,\n    // Heaviest at the low end, lightening as the scale rises — so the measure\n    // bar, which is solid, stands out most where performance is best.\n    weight: count === 1 ? lightest : heaviest - (index / (count - 1)) * (heaviest - lightest),\n  }))\n\n  // The label names the bounds the caller SET, not the band tops: the last\n  // band's top is the end of the scale, which is not a threshold anybody chose.\n  return { list, label: bounds.map(formatValue).join(', ') }\n}\n\n/** Every measure, with its scale and bands worked out. */\nfunction resolve(\n  data: BulletMeasure[],\n  domain: [number, number] | undefined,\n  ranges: number[] | undefined,\n  formatValue: (value: number) => string,\n): ResolvedMeasure[] {\n  return data.map((measure) => {\n    const own = measure.ranges ?? ranges ?? []\n    const high = Math.max(measure.value, measure.target ?? Number.NEGATIVE_INFINITY, ...own)\n    // Anchored at zero unless told otherwise: the measure is drawn as a BAR,\n    // and a bar read off a scale that does not start at zero overstates every\n    // difference on it.\n    const scale: [number, number] = measure.domain ?? domain ?? [Math.min(0, measure.value), high || 1]\n    const built = bands(own, scale, formatValue)\n\n    return { ...measure, domain: scale, bands: built.list, rangeLabel: built.label }\n  })\n}\n\nexport interface BulletChartProps {\n  /**\n   * What the chart shows, in a sentence a reader could act on. Required, and\n   * announced to a screen reader even when it is not printed.\n   */\n  title: string\n  /** Prints the title above the rows instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  /** One entry per measure. Order is the reading order; it is not sorted. */\n  data: BulletMeasure[]\n  /**\n   * The bands every measure falls back to, as ascending upper bounds.\n   *\n   * Shared bands only mean something when the measures share a scale. Where\n   * they do not — a latency beside a conversion rate — put `ranges` and\n   * `domain` on each measure instead.\n   */\n  ranges?: number[]\n  /** The scale every measure falls back to, as `[min, max]`. */\n  domain?: [number, number]\n  /** Formats every number the chart prints. */\n  formatValue?: (value: number) => string\n  /** Prints the scale's two ends under each track. */\n  showScale?: boolean\n  /** Merged onto the figure, last, so a call site can size or space it. */\n  className?: string\n  /** Drops the hidden table view. Only correct when the page prints the data itself. */\n  hideDataTable?: boolean\n  /** What the chart shows when it has nothing to draw. */\n  empty?: ChartEmptyProps\n}\n\n/**\n * A measure, its target, and the bands that say whether the number is any good\n * — one dense row per thing being tracked.\n *\n * Stephen Few designed this to replace the dashboard gauge, and the argument\n * has held: a speedometer spends a whole card saying one number badly, where a\n * bullet graph says the same number, its target, and the qualitative context\n * around it in the height of a line of text. Ten of them stack into a status\n * page a reader can scan in one pass.\n *\n * What it will not do is show change over time. A bullet graph is one instant,\n * and `target` is the only comparison it carries; when the question is\n * \"how did we get here\" it wants a `<LineChart>`, and when several measures\n * have to be compared against each OTHER rather than each against its own\n * target, a `<BarList>` ranks them and this does not.\n *\n * **The bands are the part to be careful with.** They are a judgement — someone\n * decided that 80 is \"good\" — drawn in the same ink as the measurement, and a\n * reader has no way to tell an agreed threshold from a number somebody typed.\n * They also compress: a value near the top of the scale sits in the same band\n * whether it cleared the boundary by a point or by thirty. The band answers\n * \"is this acceptable\", never \"by how much\".\n *\n * No rendering engine, deliberately — this is the one chart in the set with\n * nothing to compute. Each row is a single linear scale with no axis, no ticks\n * and no shared plot area, so it is laid out as HTML: the bands and the bar are\n * inline-axis offsets, which means the whole chart mirrors correctly in a\n * right-to-left document, where an SVG drawn in user space would not.\n *\n * @example\n * <BulletChart\n *   title=\"Service levels against target\"\n *   data={[{ name: 'Uptime', value: 99.4, target: 99.9, ranges: [98, 99.5] }]}\n *   domain={[95, 100]}\n * />\n */\nexport function BulletChart({\n  title,\n  showTitle,\n  description,\n  data,\n  ranges,\n  domain,\n  formatValue = defaultTick,\n  showScale = false,\n  className,\n  hideDataTable = false,\n  empty,\n}: BulletChartProps) {\n  const measures = resolve(data, domain, ranges, formatValue)\n\n  return (\n    <ChartFigure\n      title={title}\n      showTitle={showTitle}\n      description={description}\n      className={className}\n      table={\n        hideDataTable\n          ? false\n          : {\n              rows: measures as unknown as Record<string, unknown>[],\n              rowKey: 'name',\n              columns: [\n                { key: 'value', label: 'Value' },\n                { key: 'target', label: 'Target' },\n                { key: 'rangeLabel', label: 'Range bounds' },\n              ],\n            }\n      }\n    >\n      {measures.length === 0 ? (\n        <ChartEmpty {...(empty || {})} />\n      ) : (\n        <div className=\"flex w-full flex-col gap-4\">\n          {measures.map((measure) => (\n            <BulletRow\n              key={measure.name}\n              measure={measure}\n              formatValue={formatValue}\n              showScale={showScale}\n            />\n          ))}\n        </div>\n      )}\n    </ChartFigure>\n  )\n}\n\nfunction BulletRow({\n  measure,\n  formatValue,\n  showScale,\n}: {\n  measure: ResolvedMeasure\n  formatValue: (value: number) => string\n  showScale: boolean\n}) {\n  const scale = measure.domain\n  const barShare = position(measure.value, scale)\n  const targetShare = measure.target === undefined ? null : position(measure.target, scale)\n\n  return (\n    <div className=\"flex w-full flex-col gap-1.5\">\n      <div className=\"flex items-baseline justify-between gap-3\">\n        <span className=\"truncate text-sm text-(--ink)\">\n          {measure.name}\n          {measure.detail && (\n            <span className=\"ms-2 mono-meta text-(--ink-3-aa)\">{measure.detail}</span>\n          )}\n        </span>\n        <span className=\"shrink-0 font-mono text-xs tabular-nums text-(--ink)\">\n          {formatValue(measure.value)}\n          {measure.target !== undefined && (\n            <span className=\"text-(--ink-3-aa)\"> / {formatValue(measure.target)}</span>\n          )}\n        </span>\n      </div>\n\n      {/* The graphic repeats what the line above and the hidden table already\n          say, so it is out of the accessibility tree entirely rather than\n          announced a third time as a stack of empty boxes. */}\n      <div\n        aria-hidden\n        data-slot=\"bullet-track\"\n        className=\"relative h-6 w-full overflow-hidden rounded-(--radius-sm)\"\n      >\n        {measure.bands.map((band) => (\n          <span\n            key={`${band.from}-${band.to}`}\n            data-slot=\"bullet-band\"\n            className=\"absolute inset-y-0 block\"\n            style={{\n              insetInlineStart: pct(position(band.from, scale)),\n              inlineSize: pct(position(band.to, scale) - position(band.from, scale)),\n              // The one translucent-mark pair in the token layer, because it is\n              // the only one that holds a different number on each ground.\n              backgroundColor: `color-mix(in srgb, var(--series-1) calc(var(--chart-fill) * ${band.weight} * 100%), transparent)`,\n            }}\n          />\n        ))}\n\n        {/* Solid, and a third of the track's height. The measure is the one\n            thing here that is a measurement rather than a judgement, so it is\n            the only mark drawn at full weight. */}\n        <span\n          data-slot=\"bullet-bar\"\n          className=\"absolute block bg-(--series-1)\"\n          style={{\n            insetInlineStart: 0,\n            insetBlockStart: pct((1 - BAR_SHARE) / 2),\n            blockSize: pct(BAR_SHARE),\n            inlineSize: pct(barShare),\n          }}\n        />\n\n        {targetShare !== null && (\n          // A rule ACROSS the bar rather than a second bar beside it: the two\n          // are different kinds of number, and the reader has to be able to\n          // tell at a glance which one was achieved and which was asked for.\n          <span\n            data-slot=\"bullet-target\"\n            className=\"absolute inset-y-1 block w-0.5 bg-(--ink)\"\n            style={{ insetInlineStart: pct(targetShare), marginInlineStart: '-1px' }}\n          />\n        )}\n      </div>\n\n      {showScale && (\n        <div className=\"flex justify-between mono-meta text-(--chart-axis)\">\n          <span>{formatValue(scale[0])}</span>\n          <span>{formatValue(scale[1])}</span>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default BulletChart\n"],"mappings":"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","names":[]}

package/dist/charts/ComposedChart/ComposedChart.d.ts

@@ -0,0 +1,171 @@
+import { ChartCurveType, AreaStrokeVariant, ChartTooltipSlotProps, ChartLegendSlotProps } from '../AreaChart/AreaChart.js';
+import { BarVariant } from '../BarChart/BarChart.js';
+import * as react from 'react';
+import { ComponentProps, ReactNode, FC } from 'react';
+import { XAxis, YAxis, Bar, ComposedChart as ComposedChart$1, Line, CartesianGrid } from 'recharts';
+import { ChartConfig } from '../lib/chart.js';
+import { ChartEmptyProps } from '../lib/empty.js';
+import { ValuesProps } from '../lib/values.js';
+import { ChartBackgroundVariant } from '../lib/background.js';
+import { ChartDotVariant } from '../lib/dot.js';
+import { BrushProps } from '../lib/brush.js';
+import { ToolbarProps } from '../lib/toolbar.js';
+import { ChartRevealType } from '../lib/paint.js';
+import { ReferenceLine, ReferenceBand, Annotation } from '../lib/annotations.js';
+import '../lib/sonify-control.js';
+import '../lib/sonify.js';
+import '../lib/legend.js';
+import '../lib/tooltip.js';
+import 'recharts/types/component/DefaultTooltipContent';
+import '../lib/zoom.js';
+import '../lib/figure.js';
+
+/**
+ * The axis props, with `label` narrowed to a string.
+ *
+ * Recharts' own `label` accepts a render function and a config object, neither
+ * of which a call site should be reaching for to name an axis — and both of
+ * which would let a consumer opt out of the system's own axis type styling
+ * without noticing.
+ */
+type ChartXAxisProps = Omit<ComponentProps<typeof XAxis>, 'label'> & {
+    /** What this axis measures. Say the unit here or in the series label, once. */
+    label?: string;
+};
+type ChartYAxisProps = Omit<ComponentProps<typeof YAxis>, 'label'> & {
+    /** What this axis measures. Say the unit here or in the series label, once. */
+    label?: string;
+};
+
+type ValidateKeys<TData, TConfig> = {
+    [K in keyof TConfig]: K extends keyof TData ? ChartConfig[string] : never;
+};
+interface ComposedChartProps<TData extends Record<string, unknown>, TConfig extends Record<string, ChartConfig[string]>> {
+    config: TConfig & ValidateKeys<TData, TConfig>;
+    /** The rows the chart draws. One entry per point, bar or category. */
+    data: TData[];
+    /**
+     * What the chart shows, in a sentence a reader could act on. Required, and
+     * announced to a screen reader even when it is not printed.
+     */
+    title: string;
+    /** Prints the title above the plot instead of hiding it from sight. */
+    showTitle?: boolean;
+    /** A line under the title — the unit, the window, the caveat. */
+    description?: ReactNode;
+    /**
+     * The composed parts — axes, grid, tooltip, legend, and the marks
+     * themselves.
+     */
+    children: ReactNode;
+    /** Merged onto the figure, last, so a call site can size or space it. */
+    className?: string;
+    /** Escape hatch onto the raw Recharts chart element. */
+    chartProps?: ComponentProps<typeof ComposedChart$1>;
+    /**
+     * How the line between two points is interpolated. Every mark inherits it
+     * unless it says otherwise.
+     */
+    curveType?: ChartCurveType;
+    animationType?: ChartRevealType;
+    barGap?: number;
+    barCategoryGap?: number;
+    /** The series lit on first render. Selection dims every other series. */
+    defaultSelectedDataKey?: string | null;
+    /** Fires when the selection changes, and with null when it is cleared. */
+    onSelectionChange?: (selectedDataKey: string | null) => void;
+    /**
+     * Swaps the marks for an animated skeleton, keeping the measured height so
+     * the page does not jump when the data lands.
+     */
+    isLoading?: boolean;
+    /** How many bars the skeleton draws. */
+    loadingBars?: number;
+    /**
+     * The row field on the category axis. Needed by the brush and by the table
+     * view.
+     */
+    xDataKey?: keyof TData & string;
+    /**
+     * Drops the hidden table view. Only correct when the page prints the data
+     * itself.
+     */
+    hideDataTable?: boolean;
+    /**
+     * What the chart shows when it has nothing to draw.
+     *
+     * Rendered instead of the plot whenever `data` is empty and the chart is not
+     * loading — the state a real dashboard reaches within a week, and the one an
+     * empty pair of axes is indistinguishable from a failed load. `false` keeps
+     * the axes, for a chart whose emptiness is itself the reading.
+     */
+    empty?: ChartEmptyProps | false;
+}
+/**
+ * Bars and lines over one axis — the shape for "the volume, and the rate it
+ * moved at".
+ *
+ * One axis, always. Two measures at different scales belong in two charts or
+ * indexed to a common base; a second y-scale lets the author choose where the
+ * lines cross, which is the single most misleading thing a chart can do.
+ *
+ * @example
+ * <ComposedChart title="Revenue and profit" config={config} data={data}>
+ *   <ComposedChart.Grid />
+ *   <ComposedChart.XAxis dataKey="month" />
+ *   <ComposedChart.Tooltip />
+ *   <ComposedChart.Bar dataKey="revenue" variant="duotone" />
+ *   <ComposedChart.Line dataKey="profit" />
+ * </ComposedChart>
+ */
+declare function ComposedChart<TData extends Record<string, unknown>, TConfig extends Record<string, ChartConfig[string]>>({ config, data, title, showTitle, description, children, className, chartProps, curveType, animationType, barGap, barCategoryGap, defaultSelectedDataKey, onSelectionChange, isLoading, loadingBars, xDataKey, hideDataTable, empty, }: ComposedChartProps<TData, TConfig>): react.JSX.Element;
+declare namespace ComposedChart {
+    var Bar: ({ dataKey, variant, radius, glowing, animationType, isClickable, enableHoverHighlight, children, barProps, }: ComposedBarProps) => react.JSX.Element | null;
+    var Line: ({ dataKey, strokeVariant, curveType, animationType, connectNulls, glowing, isClickable, children, lineProps, }: ComposedLineProps) => react.JSX.Element | null;
+    var Dot: FC<DotProps>;
+    var ActiveDot: FC<DotProps>;
+    var XAxis: ({ tickLine, axisLine, tickMargin, minTickGap, label, ...rest }: ChartXAxisProps) => react.JSX.Element | null;
+    var YAxis: ({ tickLine, axisLine, tickMargin, minTickGap, width, tickFormatter, label, ...rest }: ChartYAxisProps) => react.JSX.Element | null;
+    var Grid: ({ vertical, strokeDasharray, ...rest }: ComponentProps<typeof CartesianGrid>) => react.JSX.Element;
+    var Tooltip: ({ variant, roundness, defaultIndex, cursor }: ChartTooltipSlotProps) => react.JSX.Element | null;
+    var Legend: ({ variant, align, verticalAlign, isClickable, }: ChartLegendSlotProps) => react.JSX.Element;
+    var Background: ({ variant }: {
+        variant: ChartBackgroundVariant;
+    }) => react.JSX.Element | null;
+    var ReferenceLine: typeof ReferenceLine;
+    var ReferenceBand: typeof ReferenceBand;
+    var Annotation: typeof Annotation;
+    var Values: FC<ValuesProps>;
+    var Brush: FC<BrushProps>;
+    var Toolbar: FC<ToolbarProps>;
+}
+interface ComposedBarProps {
+    dataKey: string;
+    variant?: BarVariant;
+    radius?: number;
+    /** A halo behind the bars. */
+    glowing?: boolean;
+    animationType?: ChartRevealType;
+    isClickable?: boolean;
+    /** Dims this series while another COLUMN is hovered. */
+    enableHoverHighlight?: boolean;
+    /** `<ComposedChart.Values>`. */
+    children?: ReactNode;
+    barProps?: ComponentProps<typeof Bar>;
+}
+interface ComposedLineProps {
+    dataKey: string;
+    strokeVariant?: AreaStrokeVariant;
+    curveType?: ChartCurveType;
+    animationType?: ChartRevealType;
+    connectNulls?: boolean;
+    glowing?: boolean;
+    isClickable?: boolean;
+    children?: ReactNode;
+    lineProps?: ComponentProps<typeof Line>;
+}
+interface DotProps {
+    variant?: ChartDotVariant;
+}
+
+export { type ChartXAxisProps, type ChartYAxisProps, type ComposedBarProps, ComposedChart, type ComposedChartProps, type ComposedLineProps, type DotProps, ComposedChart as default };