@mbao01/common 0.0.44 → 0.0.45

package/dist/types/components/Chart/stories/args/labelListArgs.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from '@storybook/react';
+export declare const labelListArgs: ArgTypes;

package/dist/types/components/Chart/stories/args/legendArgs.d.ts

@@ -0,0 +1,3 @@
+import { ArgTypes } from '@storybook/react';
+export declare const legendType: ArgTypes[0];
+export declare const legendArgs: ArgTypes;

package/dist/types/components/Chart/stories/args/lineArgs.d.ts

@@ -0,0 +1,2 @@
+import { Args } from '@storybook/react';
+export declare const lineArgs: Args;

package/dist/types/components/Chart/stories/args/lineChartArgs.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from '@storybook/react';
+export declare const lineChartArgs: ArgTypes;

package/dist/types/components/Chart/stories/args/pieArgs.d.ts

@@ -0,0 +1,2 @@
+import { Args } from '@storybook/react';
+export declare const pieArgs: Args;

package/dist/types/components/Chart/stories/args/pieChartArgs.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from '@storybook/react';
+export declare const pieChartArgs: ArgTypes;

package/dist/types/components/Chart/stories/args/polarChartArgs.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from '@storybook/react';
+export declare const polarChartArgs: ArgTypes;

package/dist/types/components/Chart/stories/args/polarSharedArgs.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from '@storybook/react';
+export declare const polarSharedArgs: ArgTypes;

package/dist/types/components/Chart/stories/args/radarArgs.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from '@storybook/react';
+export declare const radarArgs: ArgTypes;

package/dist/types/components/Chart/stories/args/radarChartArgs.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from '@storybook/react';
+export declare const radarChartArgs: ArgTypes;

package/dist/types/components/Chart/stories/args/radialBarArgs.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from '@storybook/react';
+export declare const radialBarArgs: ArgTypes;

package/dist/types/components/Chart/stories/args/radialBarChartArgs.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from '@storybook/react';
+export declare const radialBarChartArgs: ArgTypes;

package/dist/types/components/Chart/stories/args/rectangleArgs.d.ts

@@ -0,0 +1,9 @@
+import { ArgTypes } from '@storybook/react';
+export declare const radius: ArgTypes[0];
+export declare const isUpdateAnimationActive: ArgTypes[0];
+/**
+ * Caveat: If any prop is added here, it would falsely be add to the documentation of the component
+ * where this group is used. If the group is to be extended, then only single props should be imported
+ * by each component that does not use all of them.
+ * */
+export declare const rectangleArgs: ArgTypes;

package/dist/types/components/Chart/stories/args/referenceSharedArgs.d.ts

@@ -0,0 +1,4 @@
+import { ArgTypes } from '@storybook/react';
+export declare const referenceStyleArgs: ArgTypes;
+export declare const referenceGeneralArgs: ArgTypes;
+export declare const referenceInternalArgs: ArgTypes;

package/dist/types/components/Chart/stories/args/sectorArgs.d.ts

@@ -0,0 +1,7 @@
+import { ArgTypes } from '@storybook/react';
+/**
+ * Caveat: If any prop is added here, it would falsely be add to the documentation of the component
+ * where this group is used. If the group is to be extended, then only single props should be imported
+ * by each component that does not use all of them.
+ * */
+export declare const sectorArgs: ArgTypes;

package/dist/types/components/Chart/stories/args/sharedAxisArgs.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from '@storybook/react';
+export declare const sharedAxisArgs: ArgTypes;

package/dist/types/components/Chart/stories/args/stylesArgs.d.ts

@@ -0,0 +1,6 @@
+import { Args, ArgTypes } from '@storybook/react';
+export declare const hide: ArgTypes[0];
+export declare const generalStyleArgs: ArgTypes;
+export declare const labelDescription = "If false set, labels will not be drawn. If true set, labels will be drawn which have\nthe props calculated internally. If object set, labels will be drawn which have the props merged\nby the internal calculated props and the option. If ReactElement set, the option can be the custom\nlabel element. If set a function, the function will be called to render customized label.";
+export declare const labelSummary = "boolean | Object | ReactElement | Function";
+export declare const radialBarStyleArgs: Args;

package/dist/types/components/Chart/stories/args/textArgs.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from '@storybook/react';
+export declare const textArgs: ArgTypes;

package/dist/types/components/Chart/stories/args/tooltipArgs.d.ts

@@ -0,0 +1,4 @@
+import { ArgTypes } from '@storybook/react';
+export declare const tooltipType: ArgTypes[0];
+export declare const activeDot: ArgTypes[0];
+export declare const tooltipArgs: ArgTypes;

package/dist/types/components/Chart/stories/args/types.d.ts

@@ -0,0 +1,13 @@
+import { SVGProps } from 'react';
+type SVGKeys = Exclude<keyof SVGProps<SVGElement>, "type" | "fill" | "fillOpacity" | "stroke" | "strokeWidth" | "className">;
+export type OmitSVGElement<T> = Omit<T, SVGKeys>;
+export type Flatten<T> = NonNullable<{
+    [K in keyof T]: T[K] extends never ? never : {
+        [P in keyof T[K]]: T[K][P] extends never ? {
+            [Q in `${Exclude<K, symbol>} ${Exclude<P, symbol>}`]: never;
+        } : {
+            [Q in `${Exclude<K, symbol>} ${Exclude<P, symbol>}`]: T[K][P];
+        };
+    }[keyof T[K]];
+}[keyof T]>;
+export {};

package/dist/types/components/Chart/stories/args/xAxisArgs.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from '@storybook/react';
+export declare const xAxisArgs: ArgTypes;

package/dist/types/components/Chart/stories/args/yAxisArgs.d.ts

@@ -0,0 +1,2 @@
+import { ArgTypes } from '@storybook/react';
+export declare const yAxisArgs: ArgTypes;

package/dist/types/components/Chart/stories/examples/AreaChart.d.ts

@@ -0,0 +1,16 @@
+import { AreaChartProps } from '../args';
+/**
+ * ## Parent
+ *
+ * The AreaChart can be used within: `<Chart />`
+ *
+ * ## Children
+ *
+ * The AreaChart can be used with the following child components: `<XAxis />`, `<YAxis />`, `<ReferenceArea />`, `<ReferenceDot />`, `<ReferenceArea />`,
+ * `<Brush />`, `<CartesianGrid />`, `<ChartLegend />`, `<ChartTooltip />`, `<Area />`, `<Customized />` or valid svg elements.
+ */
+export declare const AreaChartExample: (props: Partial<AreaChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const StackedAreaChartExample: (props: Partial<AreaChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const StackedExpandedAreaChartExample: (props: Partial<AreaChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const LabeledAreaChartExample: (props: Partial<AreaChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const WithLegendAreaChartExample: (props: Partial<AreaChartProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Chart/stories/examples/BarChart.d.ts

@@ -0,0 +1,20 @@
+import { BarChartProps } from '../args';
+/**
+ * ## Parent
+ *
+ * The BarChart can be used within: `<Chart />`
+ *
+ * ## Children
+ *
+ * The BarChart can be used with the following child components: `<XAxis />`, `<YAxis />`, `<ReferenceArea />`, `<ReferenceDot />`, `<ReferenceLine />`,
+ * `<Brush />`, `<CartesianGrid />`, `<ChartLegend />`, `<ChartTooltip />`, `<Bar />`, `<Customized />` or valid svg elements.
+ */
+export declare const BarChartExample: (props: Partial<BarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const MultipleBarChartExample: (props: Partial<BarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const HorizontalBarChartExample: (props: Partial<BarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const LabelBarChartExample: (props: Partial<BarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const CustomLabelBarChartExample: (props: Partial<BarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const MixedBarChartExample: (props: Partial<BarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const StackedBarChartExample: (props: Partial<BarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const ActiveBarChartExample: (props: Partial<BarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const NegativeBarChartExample: (props: Partial<BarChartProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Chart/stories/examples/LineChart.d.ts

@@ -0,0 +1,16 @@
+import { LineChartProps } from '../args';
+/**
+ * ## Parent
+ *
+ * The LineChart can be used within: `<Chart />`
+ *
+ * ## Children
+ *
+ * The LineChart can be used with the following child components: `<XAxis />`, `<YAxis />`, `<ReferenceArea />`, `<ReferenceDot />`, `<ReferenceLine />`,
+ * `<Brush />`, `<CartesianGrid />`, `<ChartLegend />`, `<ChartTooltip />`, `<Line />`, `<Customized />` or valid svg elements.
+ */
+export declare const LineChartExample: (props: LineChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StackedLineChartExample: (props: LineChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CustomDotLineChartExample: (props: LineChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LabeledLineChartExample: (props: LineChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WithLegendLineChartExample: (props: LineChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Chart/stories/examples/PieChart.d.ts

@@ -0,0 +1,19 @@
+import { PieChartProps } from '../args';
+/**
+ * ## Parent
+ *
+ * The PieChart can be used within: `<Chart />`
+ *
+ * ## Children
+ *
+ * The PieChart can be used with the following child components: `<PolarAngleAxis />`, `<PolarRadiusAxis />`,
+ * `<PolarGrid />`, `<ChartLegend />`, `<ChartTooltip />`, `<Pie />`, `<Customized />`
+ */
+export declare const PieChartExample: (props: Partial<PieChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const LabeledPieChartExample: (props: Partial<PieChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const CustomLabeledPieChartExample: (props: Partial<PieChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const LabelListPieChartExample: (props: Partial<PieChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const WithLegendPieChartExample: (props: Partial<PieChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const DonutPieChartExample: (props: Partial<PieChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const ActiveDonutPieChartExample: (props: Partial<PieChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const StackedPieChartExample: (props: Partial<PieChartProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Chart/stories/examples/RadarChart.d.ts

@@ -0,0 +1,24 @@
+import { RadarChartProps } from '../args';
+/**
+ * ## Parent
+ *
+ * The RadarChart can be used within: `<Chart />`
+ *
+ * ## Children
+ *
+ * The RadarChart can be used with the following child components: `<PolarAngleAxis />`, `<PolarRadiusAxis />`,
+ * `<PolarGrid />`, `<ChartLegend />`, `<ChartTooltip />`, `<Radar />`, `<Customized />`
+ */
+export declare const RadarChartExample: (props: Partial<RadarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const DotRadarChartExample: (props: Partial<RadarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const MultipleRadarChartExample: (props: Partial<RadarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const LinesRadarChartExample: (props: Partial<RadarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const CustomLabeledRadarChartExample: (props: Partial<RadarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const RadiusAxisRadarChartExample: (props: Partial<RadarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const GridCustomRadarChartExample: (props: Partial<RadarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const GridFilledRadarChartExample: (props: Partial<RadarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const NoGridRadarChartExample: (props: Partial<RadarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const GridCircleRadarChartExample: (props: Partial<RadarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const NoLinesGridCircleRadarChartExample: (props: Partial<RadarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const GridCircleFilledRadarChartExample: (props: Partial<RadarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const LegendRadarChartExample: (props: Partial<RadarChartProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Chart/stories/examples/RadialChart.d.ts

@@ -0,0 +1,17 @@
+import { RadialBarChartProps } from '../args';
+/**
+ * ## Parent
+ *
+ * The RadialBarChart can be used within: `<Chart />`
+ *
+ * ## Children
+ *
+ * The RadialBarChart can be used with the following child components: `<PolarAngleAxis />`, `<PolarRadiusAxis />`,
+ * `<PolarGrid />`, `<ChartLegend />`, `<ChartTooltip />`, `<RadialBar />`, `<Customized />`
+ */
+export declare const RadialChartExample: (props: Partial<RadialBarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const LabeledRadialChartExample: (props: Partial<RadialBarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const GridRadialChartExample: (props: Partial<RadialBarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const TextRadialChartExample: (props: Partial<RadialBarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const ShapeRadialChartExample: (props: Partial<RadialBarChartProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const StackedRadialChartExample: (props: Partial<RadialBarChartProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Chart/stories/examples/Tooltip.d.ts

@@ -0,0 +1,15 @@
+import { ChartTooltipContentProps } from '../../types';
+export declare const tooltipChartConfig: {
+    activities: {
+        label: string;
+    };
+    running: {
+        label: string;
+        color: string;
+    };
+    swimming: {
+        label: string;
+        color: string;
+    };
+};
+export declare const BarChartExample: (props: ChartTooltipContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Chart/stories/helpers/index.d.ts

@@ -0,0 +1,9 @@
+import { ArgTypes, StoryContext, StoryFn } from '@storybook/react';
+import { ElementType } from 'react';
+export declare const categorizeArgs: (args: ArgTypes, category: string) => ArgTypes<import('@storybook/react').Args>;
+export declare const withArgs: <T extends object>(Component: StoryFn, context: StoryContext<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const getArgsFromArgTypes: <T extends ArgTypes>(argsTypes: T) => Record<keyof T, unknown>;
+export declare const renderer: <T extends ElementType>(Component: T) => {
+    <G>(props: G): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/types/components/Chart/types.d.ts

@@ -0,0 +1,37 @@
+import { ComponentProps, ComponentType, ReactNode } from 'react';
+import { LegendProps, ResponsiveContainer, Tooltip } from 'recharts';
+import { Theme } from '../../utilities';
+export type ChartConfig = {
+    [k in string]: {
+        label?: ReactNode;
+        icon?: ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<Theme, string>;
+    });
+};
+export type ChartContextProps = {
+    config: ChartConfig;
+};
+export type ChartProps = ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: ComponentProps<typeof ResponsiveContainer>["children"];
+};
+export type ChartStyleProps = {
+    id: string;
+    config: ChartConfig;
+};
+export type ChartTooltipContentProps = ComponentProps<typeof Tooltip> & ComponentProps<"div"> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+};
+export type ChartLegendContentProps = ComponentProps<"div"> & Pick<LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.44",
+  "version": "0.0.45",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -53,7 +53,7 @@
     "dev": "storybook dev -p 6006",
     "build": "tsc && vite build",
     "build-storybook": "storybook build -o ../../docs/storybook/common",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 30",
     "prettier": "prettier --check \"**/*.{ts,tsx}\"",
     "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
     "preview": "vite preview",
@@ -102,6 +102,7 @@
     "react-dropzone": "^14.2.3",
     "react-international-phone": "^4.3.0",
     "react-otp-input": "^3.1.1",
+    "recharts": "^2.12.7",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
@@ -116,6 +117,7 @@
     "@storybook/addon-interactions": "^8.3.4",
     "@storybook/addon-links": "^8.3.4",
     "@storybook/addon-onboarding": "^8.3.4",
+    "@storybook/addon-storysource": "^8.3.4",
     "@storybook/addon-themes": "^8.3.4",
     "@storybook/addon-viewport": "^8.3.4",
     "@storybook/blocks": "^8.3.4",
@@ -165,5 +167,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "8e4871acb249c39327ba4a5b8bdb92770d649b4e"
+  "gitHead": "097691180db90aaf22c9557d1f2f919246b167c1"
 }

package/src/components/Chart/Chart.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { forwardRef, useId } from "react";
+import { ResponsiveContainer } from "recharts";
+import { cn } from "../../utilities";
+import { ChartContext } from "./ChartContext";
+import { ChartStyle } from "./components";
+import { getChartClasses } from "./constants";
+import { type ChartProps } from "./types";
+
+export const Chart = forwardRef<HTMLDivElement, ChartProps>(
+  ({ id, className, children, config, ...props }, ref) => {
+    const uniqueId = useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+    return (
+      <ChartContext.Provider value={{ config }}>
+        <div ref={ref} data-chart={chartId} className={cn(getChartClasses(), className)} {...props}>
+          <ChartStyle id={chartId} config={config} />
+          <ResponsiveContainer>{children}</ResponsiveContainer>
+        </div>
+      </ChartContext.Provider>
+    );
+  }
+);
+Chart.displayName = "Chart";

package/src/components/Chart/ChartContext.tsx

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+import { type ChartContextProps } from "./types";
+
+export const ChartContext = createContext<ChartContextProps | null>(null);

package/src/components/Chart/components/ChartLegend.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { forwardRef } from "react";
+import { Legend } from "recharts";
+import type { ChartLegendContentProps } from "../types";
+import { cn } from "../../../utilities";
+import {
+  getChartLegendContainerClasses,
+  getChartLegendItemClasses,
+  getChartLegendMarkerClasses,
+} from "../constants";
+import { getPayloadConfigFromPayload } from "../helpers";
+import { useChart } from "../hooks";
+
+export const ChartLegend = Legend;
+ChartLegend.displayName = "ChartLegend";
+
+export const ChartLegendContent = forwardRef<HTMLDivElement, ChartLegendContentProps>(
+  ({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+      return null;
+    }
+
+    return (
+      <div ref={ref} className={cn(getChartLegendContainerClasses({ verticalAlign }), className)}>
+        {payload.map((item) => {
+          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            <div key={item.value} className={getChartLegendItemClasses()}>
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  style={{ backgroundColor: item.color }}
+                  className={getChartLegendMarkerClasses()}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+);
+ChartLegendContent.displayName = "ChartLegendContent";

package/src/components/Chart/components/ChartStyle.tsx

@@ -0,0 +1,32 @@
+import { type Theme } from "../../../utilities";
+import { THEMES } from "../constants";
+import { type ChartStyleProps } from "../types";
+
+export const ChartStyle = ({ id, config }: ChartStyleProps) => {
+  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color = itemConfig.theme?.[theme as Theme] || itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};

package/src/components/Chart/components/ChartTooltip.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { forwardRef, useMemo } from "react";
+import { Tooltip } from "recharts";
+import type { ChartTooltipContentProps } from "../types";
+import { cn } from "../../../utilities";
+import {
+  getChartTooltipContainerClasses,
+  getChartTooltipItemClasses,
+  getChartTooltipItemIndicatorClasses,
+  getChartTooltipItemLabelClasses,
+  getChartTooltipItemValueClasses,
+} from "../constants";
+import { getPayloadConfigFromPayload } from "../helpers";
+import { useChart } from "../hooks";
+
+export const ChartTooltip = Tooltip;
+ChartTooltip.displayName = "ChartTooltip";
+
+export const ChartTooltipContent = forwardRef<HTMLDivElement, ChartTooltipContentProps>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>
+        );
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+      <div ref={ref} className={cn(getChartTooltipContainerClasses(), className)}>
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor =
+              color ||
+              (item.payload as { fill: string }).fill ||
+              item.color ||
+              (item as { fill: string }).fill;
+
+            return (
+              <div key={item.dataKey} className={getChartTooltipItemClasses({ indicator })}>
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={getChartTooltipItemIndicatorClasses({ indicator, nestLabel })}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div className={getChartTooltipItemLabelClasses({ nestLabel })}>
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span>{itemConfig?.label || item.name}</span>
+                      </div>
+                      {item.value && (
+                        <span className={getChartTooltipItemValueClasses()}>
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+);
+ChartTooltipContent.displayName = "ChartTooltipContent";

package/src/components/Chart/components/index.ts

@@ -0,0 +1,3 @@
+export { ChartLegend, ChartLegendContent } from "./ChartLegend";
+export { ChartStyle } from "./ChartStyle";
+export { ChartTooltip, ChartTooltipContent } from "./ChartTooltip";