@chakra-ui/charts 3.15.0

package/dist/types/chart/chart.d.ts

@@ -0,0 +1,44 @@
+import type { BoxProps } from "@chakra-ui/react";
+import * as React from "react";
+import type { LegendProps, TooltipProps } from "recharts";
+import type { Payload } from "recharts/types/component/DefaultTooltipContent";
+import type { ViewBox } from "recharts/types/util/types";
+import { type ChartColor, type UseChartReturn } from "../use-chart";
+export interface ChartRootProps extends BoxProps {
+    children: React.ReactElement;
+    chart: UseChartReturn<unknown>;
+}
+export declare const ChartRoot: React.ForwardRefExoticComponent<ChartRootProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChartGradientProps {
+    id: string;
+    fillOpacity?: number;
+    stops: {
+        color: ChartColor;
+        offset: string | number;
+        opacity?: number;
+    }[];
+}
+export declare const ChartGradient: React.ForwardRefExoticComponent<ChartGradientProps & React.RefAttributes<SVGLinearGradientElement>>;
+export interface ChartLegendProps extends LegendProps {
+    title?: React.ReactNode;
+    nameKey?: string;
+}
+export declare function ChartLegend(props: ChartLegendProps): import("react/jsx-runtime").JSX.Element | null;
+export interface ChartTooltipProps extends TooltipProps<string, string> {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    hideSeriesLabel?: boolean;
+    showTotal?: boolean;
+    fitContent?: boolean;
+    nameKey?: string;
+    indicator?: "line" | "dot" | "dashed";
+    render?: (item: Payload<string, string>) => React.ReactNode;
+}
+export declare function ChartTooltip(props: ChartTooltipProps): import("react/jsx-runtime").JSX.Element | null;
+export interface ChartRadialTextProps {
+    viewBox: ViewBox | undefined;
+    title: React.ReactNode;
+    description: React.ReactNode;
+    gap?: number;
+}
+export declare function ChartRadialText(props: ChartRadialTextProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/chart/index.d.ts

@@ -0,0 +1,3 @@
+export { ChartGradient, ChartLegend, ChartRadialText, ChartRoot, ChartTooltip, } from "./chart";
+export type { ChartRootProps, ChartGradientProps, ChartLegendProps, ChartTooltipProps, ChartRadialTextProps, } from "./chart";
+export * as Chart from "./namespace";

package/dist/types/chart/namespace.d.ts

@@ -0,0 +1,2 @@
+export { ChartGradient as Gradient, ChartLegend as Legend, ChartRadialText as RadialText, ChartRoot as Root, ChartTooltip as Tooltip, } from "./chart";
+export type { ChartRootProps as RootProps, ChartGradientProps as GradientProps, ChartLegendProps as LegendProps, ChartTooltipProps as TooltipProps, ChartRadialTextProps as RadialTextProps, } from "./chart";

package/dist/types/index.d.mts

@@ -0,0 +1,5 @@
+export { useChart } from "./use-chart";
+export type { UseChartProps, UseChartReturn } from "./use-chart";
+export * from "./chart";
+export * from "./bar-list";
+export * from "./bar-segment";

package/dist/types/index.d.ts

@@ -0,0 +1,5 @@
+export { useChart } from "./use-chart";
+export type { UseChartProps, UseChartReturn } from "./use-chart";
+export * from "./chart";
+export * from "./bar-list";
+export * from "./bar-segment";

package/dist/types/use-chart.d.ts

@@ -0,0 +1,54 @@
+import type { Tokens } from "@chakra-ui/react";
+import * as React from "react";
+export type ChartColor = Tokens["colors"] | React.CSSProperties["color"];
+export type ChartSize = Tokens["sizes"] | (string & {});
+export type ChartSpacing = Tokens["spacing"] | (string & {});
+type ItemDataKey<T> = T extends Array<infer U> ? keyof U : keyof T;
+interface SeriesItem<T> {
+    name?: ItemDataKey<T>;
+    color?: ChartColor;
+    icon?: React.ReactNode;
+    label?: React.ReactNode;
+    stackId?: string;
+    yAxisId?: string;
+    strokeDasharray?: string;
+    id?: string;
+}
+export interface UseChartProps<T> {
+    data: T[];
+    series?: SeriesItem<T>[];
+    sort?: {
+        by: keyof T;
+        direction: "asc" | "desc";
+    };
+}
+type ValueDomain = [number, number] | ((props: {
+    min: number;
+    max: number;
+}) => [number, number]);
+export declare function useChart<T>(props: UseChartProps<T>): {
+    id: string;
+    key: <K extends ItemDataKey<T>>(prop: K | undefined) => K;
+    data: T[];
+    series: SeriesItem<T>[];
+    getSeries: (item: unknown) => SeriesItem<T> | undefined;
+    color: (key: ChartColor | undefined) => any;
+    size: (key: ChartSize | undefined) => any;
+    spacing: (key: ChartSpacing | undefined) => any;
+    formatNumber: (options?: Intl.NumberFormatOptions) => (value: number) => string;
+    formatDate: (options?: Intl.DateTimeFormatOptions) => (value: string) => string;
+    selectedSeries: string | null;
+    setSelectedSeries: React.Dispatch<React.SetStateAction<string | null>>;
+    highlightedSeries: string | null;
+    setHighlightedSeries: React.Dispatch<React.SetStateAction<string | null>>;
+    getTotal: (key: keyof T) => number;
+    getMin: (key: keyof T) => number;
+    getMax: (key: keyof T) => number;
+    getPayloadTotal: <T_1 extends {
+        value?: string;
+    }>(payload: Array<T_1> | undefined) => number | undefined;
+    getValuePercent: (key: keyof T, value: number, domain?: ValueDomain) => number;
+};
+export type UseChartReturn<T> = ReturnType<typeof useChart<T>>;
+export declare function getProp<T = unknown>(item: unknown, key: string | undefined): T | undefined;
+export {};

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@chakra-ui/charts",
+  "version": "3.15.0",
+  "description": "Data visualization components for Chakra UI",
+  "type": "module",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Segun Adebayo <sage@adebayosegun.com>",
+  "license": "MIT",
+  "homepage": "https://chakra-ui.com/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chakra-ui/chakra-ui",
+    "directory": "packages/charts"
+  },
+  "keywords": [
+    "ui",
+    "charts",
+    "chart",
+    "react",
+    "recharts",
+    "chartjs"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "devDependencies": {
+    "recharts": "2.13.3",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "@chakra-ui/react": "3.15.0"
+  },
+  "peerDependencies": {
+    "@chakra-ui/react": ">=3",
+    "recharts": ">=2",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "scripts": {
+    "build:fast": "tsx ../../scripts/build/main.ts",
+    "build": "tsx ../../scripts/build/main.ts --dts",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit"
+  }
+}