@kind-ui/charts 0.1.0

package/dist/tooltip.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, createElement, isValidElement, useCallback, useLayoutEffect, useState, } from "react";
+import { Tooltip as EngineTooltip, useChartHeight, useChartWidth, } from "recharts";
+import { useChart } from "./chart-context.js";
+import { useLineInteraction } from "./line-chart.js";
+import { TooltipContent } from "./tooltip-content.js";
+export function StaticTooltipFrame({ x, y, ref, style, frameProps, children }) {
+    return (_jsx("div", { ...frameProps, "data-kind-ui": "tooltip-frame", ref: ref, style: { ...style, ...frameProps?.style, transform: `translate(${x}px, ${y}px)` }, children: children }));
+}
+function PositionedContent({ consumerContent, itemKey, valueAnimation, maxWidth, frameProps, frameRef, Frame, ...tooltip }) {
+    const { pointer, seriesKeys } = useLineInteraction();
+    const { visibleSeries } = useChart();
+    // Exiting strokes can remain painted briefly; hidden series leave all tooltip content immediately.
+    const payload = visibleSeries === undefined
+        ? tooltip.payload
+        : tooltip.payload.filter((entry) => {
+            const key = itemKey?.(entry) ??
+                (entry.graphicalItemId ? seriesKeys.get(entry.graphicalItemId) : undefined) ??
+                String(entry.dataKey ?? entry.name);
+            return visibleSeries.includes(key);
+        });
+    const contentProps = { ...tooltip, payload };
+    const width = useChartWidth() ?? 0;
+    const height = useChartHeight() ?? 0;
+    const [node, setNode] = useState(null);
+    const attachRef = useCallback((element) => {
+        setNode(element);
+        if (typeof frameRef === "function")
+            return frameRef(element);
+        if (frameRef)
+            frameRef.current = element;
+    }, [frameRef]);
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    useLayoutEffect(() => {
+        if (!node)
+            return;
+        const measure = (entry) => {
+            const box = entry?.borderBoxSize[0];
+            const next = {
+                width: box?.inlineSize ?? node.offsetWidth,
+                height: box?.blockSize ?? node.offsetHeight,
+            };
+            setSize((old) => (old.width === next.width && old.height === next.height ? old : next));
+        };
+        measure();
+        const observer = new ResizeObserver(([entry]) => measure(entry));
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [node]);
+    const anchor = pointer ?? tooltip.coordinate ?? { x: 0, y: 0 };
+    const offset = tooltip.offset ?? 12;
+    const offsetX = typeof offset === "number" ? offset : offset.x;
+    const offsetY = typeof offset === "number" ? offset : offset.y;
+    const maxX = Math.max(0, width - size.width);
+    const maxY = Math.max(0, height - size.height);
+    const children = isValidElement(consumerContent) ? (cloneElement(consumerContent, contentProps)) : typeof consumerContent === "function" ? (createElement(consumerContent, contentProps)) : (_jsx(TooltipContent, { tooltip: contentProps, ...(itemKey ? { itemKey } : {}), ...(valueAnimation ? { valueAnimation } : {}) }));
+    return (_jsx(Frame, { x: Math.max(0, Math.min(anchor.x + offsetX, maxX)), y: Math.max(0, Math.min(anchor.y + offsetY, maxY)), maxX: maxX, maxY: maxY, ref: attachRef, style: {
+            width: "max-content",
+            maxWidth: Math.min(Math.max(0, maxWidth), width),
+            maxHeight: height,
+            overflow: "auto",
+            boxSizing: "border-box",
+        }, frameProps: frameProps, children: children }));
+}
+export function TooltipBase({ ref, content, frameProps, maxWidth = 180, itemKey, valueAnimation, Frame = StaticTooltipFrame, ...props }) {
+    useLineInteraction();
+    return (_jsx(EngineTooltip, { cursor: false, offset: 12, filterNull: false, ...props, position: { x: 0, y: 0 }, isAnimationActive: false, content: _jsx(PositionedContent, { active: false, payload: [], coordinate: undefined, activeIndex: undefined, accessibilityLayer: false, consumerContent: content, itemKey: itemKey, valueAnimation: valueAnimation, maxWidth: maxWidth, frameProps: frameProps, frameRef: ref, Frame: Frame }) }));
+}
+/** Measured and bounded content; the engine owns payload, selection and Escape dismissal. */
+export function Tooltip(props) {
+    return _jsx(TooltipBase, { ...props });
+}

package/dist/types.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps, ComponentType, ReactNode } from "react";
+import type { Symbols, TooltipValueType } from "recharts";
+export type SeriesConfig = Readonly<Record<string, {
+    label: string;
+    color: string;
+    /** Decorative glyph shared by built-in legend and tooltip content. */
+    icon?: ComponentType;
+    /** Explicit legend-only native symbol; reuse this value for ScatterSeries.shape. */
+    legendShape?: NonNullable<ComponentProps<typeof Symbols>["type"]>;
+    formatValue?: (value: TooltipValueType) => ReactNode;
+}>>;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/waterfall-data.d.ts

@@ -0,0 +1,24 @@
+export type WaterfallEntry = {
+    id: string;
+    label: string;
+} & ({
+    kind: "start" | "total" | "end" | "delta";
+    value: number | null;
+} | {
+    kind: "subtotal";
+    value?: never;
+});
+export type WaterfallDatum = {
+    id: string;
+    label: string;
+    kind: WaterfallEntry["kind"];
+    /** Original delta/checkpoint value; the computed balance for a subtotal. */
+    value: number | null;
+    /** Directed numeric endpoints. Unknown geometry stays null. */
+    start: number | null;
+    end: number | null;
+    balance: number | null;
+    range: [number, number] | null;
+};
+/** Pure, ordered arithmetic. A missing change poisons the balance until a known checkpoint. */
+export declare function computeWaterfallData(entries: readonly WaterfallEntry[], initialBalance?: number | null): WaterfallDatum[];

package/dist/waterfall-data.js

@@ -0,0 +1,45 @@
+/** Pure, ordered arithmetic. A missing change poisons the balance until a known checkpoint. */
+export function computeWaterfallData(entries, initialBalance = 0) {
+    const valid = (value) => value === null || (typeof value === "number" && Number.isFinite(value));
+    if (!valid(initialBalance))
+        throw new Error("Waterfall initialBalance must be finite or null");
+    let balance = initialBalance;
+    const ids = new Set();
+    return entries.map((entry) => {
+        if (!entry.id || ids.has(entry.id))
+            throw new Error("Waterfall requires unique nonempty ids");
+        ids.add(entry.id);
+        if (!["start", "total", "end", "delta", "subtotal"].includes(entry.kind))
+            throw new Error("Unknown Waterfall kind");
+        if (entry.kind === "subtotal" ? entry.value !== undefined : !valid(entry.value))
+            throw new Error("Waterfall values must be finite or null; subtotals have no supplied value");
+        let start;
+        let end;
+        if (entry.kind === "delta") {
+            start = balance;
+            end = balance === null || entry.value === null ? null : balance + entry.value;
+            if (end !== null && !Number.isFinite(end))
+                throw new Error("Waterfall balance overflow");
+            balance = end;
+        }
+        else if (entry.kind === "subtotal") {
+            start = balance === null ? null : 0;
+            end = balance;
+        }
+        else {
+            balance = entry.value;
+            start = balance === null ? null : 0;
+            end = balance;
+        }
+        return {
+            id: entry.id,
+            label: entry.label,
+            kind: entry.kind,
+            value: entry.kind === "subtotal" ? balance : entry.value,
+            start,
+            end,
+            balance,
+            range: start === null || end === null ? null : [Math.min(start, end), Math.max(start, end)],
+        };
+    });
+}

package/dist/waterfall-series.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { ReferenceLine } from "recharts";
+import { type BarSeriesProps } from "./bar-series.js";
+import type { WaterfallDatum } from "./waterfall-data.js";
+export type WaterfallSeriesProps = Omit<BarSeriesProps, "dataKey" | "data" | "stackId" | "minPointSize">;
+/** Native numeric range Bar. Children, shape, cells, labels, refs and events stay native. */
+export declare function WaterfallSeries(props: WaterfallSeriesProps): import("react").JSX.Element;
+export type WaterfallConnectorsProps = Omit<ComponentProps<typeof ReferenceLine>, "x" | "y" | "segment" | "children"> & {
+    data: readonly WaterfallDatum[];
+    /** Match the WaterfallSeries metadata key and native hide state. */
+    seriesKey?: string;
+    hide?: boolean;
+};
+/** Native axis-scaled connectors. Place before bars so the center endpoints sit underneath. */
+export declare function WaterfallConnectors({ data, seriesKey, hide, ...props }: WaterfallConnectorsProps): import("react").JSX.Element | null;

package/dist/waterfall-series.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { ReferenceLine, useChartLayout } from "recharts";
+import { BarSeries } from "./bar-series.js";
+import { useChart } from "./chart-context.js";
+/** Native numeric range Bar. Children, shape, cells, labels, refs and events stay native. */
+export function WaterfallSeries(props) {
+    for (const key of ["dataKey", "data", "stackId", "minPointSize"])
+        if (key in props)
+            throw new Error(`WaterfallSeries does not accept ${key}`);
+    return _jsx(BarSeries, { ...props, dataKey: "range", minPointSize: 0 });
+}
+/** Native axis-scaled connectors. Place before bars so the center endpoints sit underneath. */
+export function WaterfallConnectors({ data, seriesKey = "range", hide, ...props }) {
+    const { visibleSeries } = useChart();
+    const horizontal = useChartLayout() === "vertical";
+    if (hide || (visibleSeries !== undefined && !visibleSeries.includes(seriesKey)))
+        return null;
+    return (_jsx(_Fragment, { children: data.slice(1).map((next, index) => {
+            const previous = data[index];
+            const incoming = next.kind === "delta" ? next.start : next.balance;
+            if (!previous ||
+                previous.range === null ||
+                next.range === null ||
+                previous.balance === null ||
+                previous.balance !== incoming)
+                return null;
+            return (_jsx(ReferenceLine, { stroke: "currentColor", strokeDasharray: "3 3", ifOverflow: "discard", zIndex: 100, ...props, pointerEvents: "none", segment: [
+                    horizontal
+                        ? { x: previous.balance, y: previous.id }
+                        : { x: previous.id, y: previous.balance },
+                    horizontal ? { x: incoming, y: next.id } : { x: next.id, y: incoming },
+                ] }, JSON.stringify([previous.id, next.id])));
+        }) }));
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@kind-ui/charts",
+  "version": "0.1.0",
+  "description": "Composable React chart components built on Recharts and Motion.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bhaveshchow20/kind-ui.git",
+    "directory": "packages/charts"
+  },
+  "homepage": "https://github.com/bhaveshchow20/kind-ui/tree/main/packages/charts#readme",
+  "bugs": {
+    "url": "https://github.com/bhaveshchow20/kind-ui/issues"
+  },
+  "keywords": [
+    "react",
+    "charts",
+    "recharts",
+    "motion",
+    "typescript"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "prepack": "node ../../scripts/prepare-package.mjs"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "CHANGELOG.md",
+    "dist/**/*.js",
+    "dist/**/*.d.ts",
+    "dist/styles.css"
+  ],
+  "peerDependencies": {
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "recharts": "^3.10.1",
+    "motion": "^13.4.6"
+  }
+}