@yamada-ui/charts 1.5.4-next-20241005220055 → 1.5.4

package/dist/chunk-TU6MKMMV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-pie-chart.ts"],"sourcesContent":["import type {\n  CSSUIObject,\n  CSSUIProps,\n  PropGetter,\n  RequiredPropGetter,\n} from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type { ComponentPropsWithoutRef } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport type { CellProps, PieChartProps, PieProps } from \"./chart.types\"\nimport { getVar, useTheme } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport { getClassName, getComponentProps } from \"./chart-utils\"\nimport { pieChartLabel, pieChartLabelLine } from \"./pie-chart-label\"\nimport { pieChartProperties, pieProperties } from \"./rechart-properties\"\n\nexport interface UsePieChartOptions {\n  /**\n   * Chart data.\n   */\n  data: CellProps[]\n  /**\n   * Controls angle at which chart ends.\n   *\n   * @default -270\n   */\n  endAngle?: number\n  /**\n   * Controls fill opacity of all pies.\n   *\n   * @default 1\n   */\n  fillOpacity?: [number, number] | number\n  /**\n   * Controls innerRadius of the chart segments.\n   * If it is a number, it is the width of the radius.\n   * For example, `60` means the radius is `60px` and the diameter is `120px`.\n   *\n   * @default '0%'\n   */\n  innerRadius?: number | string\n  /**\n   * Determines whether labels should be displayed as percentages.\n   *\n   * @default false\n   */\n  isPercent?: boolean\n  /**\n   * A function to format labels.\n   */\n  labelFormatter?: (value: number) => string\n  /**\n   * Distance between chart and label.\n   */\n  labelOffset?: number\n  /**\n   * Controls thickness of the chart segments. If it is a number, it is calculated as px.\n   * If it is a number, it is the width of the radius.\n   * For example, `60` means the radius is `60px` and the diameter is `120px`.\n   *\n   * @default '80%'\n   */\n  outerRadius?: number | string\n  /**\n   * Controls padding between segments.\n   *\n   * @default 0\n   */\n  paddingAngle?: number\n  /**\n   * Controls angle at which chart starts.\n   *\n   * @default 90\n   */\n  startAngle?: number\n  /**\n   * Stroke width for the chart pies.\n   *\n   * @default 1\n   */\n  strokeWidth?: number\n  /**\n   * Determines whether segments labels should have lines that connect the segment with the label.\n   *\n   * @default false\n   */\n  withLabelLines?: boolean\n  /**\n   * Determines whether each segment should have associated label.\n   *\n   * @default false\n   */\n  withLabels?: boolean\n  /**\n   * Props for the cell.\n   */\n  cellProps?: Partial<CellProps>\n  /**\n   * Props passed down to recharts `PieChart` component.\n   */\n  chartProps?: PieChartProps\n  /**\n   * Props for the pie.\n   */\n  pieProps?: Partial<PieProps>\n}\n\ninterface UsePieChartProps extends UsePieChartOptions {\n  styles: Dict<CSSUIObject | undefined>\n}\n\nexport const usePieChart = ({\n  data,\n  endAngle = -270,\n  fillOpacity = 1,\n  innerRadius = \"0%\",\n  isPercent = false,\n  labelFormatter,\n  labelOffset,\n  withLabels = false,\n  outerRadius = withLabels ? \"80%\" : \"100%\",\n  paddingAngle = 0,\n  startAngle = 90,\n  strokeWidth = 1,\n  styles,\n  withLabelLines = false,\n  ...rest\n}: UsePieChartProps) => {\n  const { theme } = useTheme()\n  const [highlightedArea, setHighlightedArea] = useState<null | string>(null)\n  const shouldHighlight = highlightedArea !== null\n  const { dimCell, ...computedCellProps } = rest.cellProps ?? {}\n  const {\n    activeShape = {},\n    inactiveShape = {},\n    label: labelProps,\n    labelLine: labelLineProps,\n    ...computedPieProps\n  } = rest.pieProps ?? {}\n\n  const cellColors: CSSUIProps[\"vars\"] = useMemo(\n    () =>\n      data.map(({ color }, index) => ({\n        name: `cell-${index}`,\n        token: \"colors\",\n        value: color ?? \"transparent\",\n      })),\n    [data],\n  )\n\n  const pieVars: CSSUIProps[\"vars\"] = useMemo(\n    () =>\n      [\n        ...cellColors,\n        { name: \"fill-opacity\", value: fillOpacity },\n      ] as Required<CSSUIProps>[\"vars\"],\n    [fillOpacity, cellColors],\n  )\n\n  const [chartProps, chartClassName] = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [rest.chartProps ?? {}, pieChartProperties],\n        styles.chart,\n      )(theme),\n    [rest.chartProps, styles.chart, theme],\n  )\n\n  const [pieProps, pieClassName] = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [computedPieProps, pieProperties],\n        styles.pie,\n      )(theme),\n    [computedPieProps, styles.pie, theme],\n  )\n\n  const cellClassName = useMemo(() => {\n    const resolvedCellProps = {\n      fillOpacity: \"$fill-opacity\",\n      ...styles.cell,\n      ...computedCellProps,\n    }\n\n    return getClassName(resolvedCellProps)(theme)\n  }, [computedCellProps, styles.cell, theme])\n\n  const dimCellClassName = useMemo(() => {\n    const resolvedDimCell = { fillOpacity: 0.3, strokeOpacity: 0, ...dimCell }\n\n    return getClassName(resolvedDimCell)(theme)\n  }, [dimCell, theme])\n\n  const activeShapeProps = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [{ _focus: { outline: \"none\" }, ...activeShape }, pieProperties],\n        styles.activeShape,\n      )(theme, true),\n    [activeShape, styles.activeShape, theme],\n  )\n\n  const inactiveShapeProps = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [inactiveShape, pieProperties],\n        styles.inactiveShape,\n      )(theme, true),\n    [inactiveShape, styles.inactiveShape, theme],\n  )\n\n  const label: Recharts.PieLabel = useCallback(\n    (props: any) =>\n      pieChartLabel({\n        isPercent,\n        labelFormatter,\n        labelOffset,\n        styles: styles.label,\n        labelProps,\n        ...props,\n      }),\n    [isPercent, labelOffset, labelProps, styles.label, labelFormatter],\n  )\n\n  const labelLine = useCallback(\n    (props: any) => {\n      return pieChartLabelLine({\n        labelOffset,\n        styles: styles.labelLine,\n        labelLineProps,\n        ...props,\n      })\n    },\n    [labelLineProps, labelOffset, styles.labelLine],\n  )\n\n  const cellPropList = useMemo(\n    () =>\n      data.map((props, index) => {\n        const { name, dimCell = {}, ...computedProps } = props\n        const color = getVar(`cell-${index}`)(theme)\n        const dimmed = shouldHighlight && highlightedArea !== name\n        const resolvedProps = {\n          ...computedProps,\n          ...(dimmed ? dimCell : {}),\n        }\n\n        const className = getClassName(\n          {\n            cellClassName,\n            ...resolvedProps,\n          },\n          dimmed ? dimCellClassName : undefined,\n        )(theme)\n\n        return {\n          className,\n          color,\n        }\n      }),\n    [\n      cellClassName,\n      data,\n      dimCellClassName,\n      highlightedArea,\n      shouldHighlight,\n      theme,\n    ],\n  )\n\n  const getPieChartProps: PropGetter<\n    ComponentPropsWithoutRef<typeof Recharts.PieChart>,\n    ComponentPropsWithoutRef<typeof Recharts.PieChart>\n  > = useCallback(\n    ({ className, ...props } = {}, ref = null) => ({\n      ref,\n      className: cx(className, chartClassName),\n      ...props,\n      ...chartProps,\n    }),\n    [chartProps, chartClassName],\n  )\n\n  const getPieProps: RequiredPropGetter<\n    Partial<Recharts.PieProps>,\n    Omit<Recharts.PieProps, \"ref\">\n  > = useCallback(\n    ({ className, ...props }, ref = null) => ({\n      ref,\n      className: cx(className, pieClassName),\n      activeShape: activeShapeProps,\n      data,\n      dataKey: \"value\",\n      endAngle,\n      inactiveShape: inactiveShapeProps,\n      innerRadius,\n      isAnimationActive: false,\n      label: withLabels ? label : false,\n      labelLine: withLabelLines ? labelLine : false,\n      outerRadius,\n      paddingAngle,\n      rootTabIndex: -1,\n      startAngle,\n      ...(props as Omit<Recharts.PieProps, \"dataKey\">),\n      ...pieProps,\n    }),\n    [\n      pieClassName,\n      data,\n      outerRadius,\n      innerRadius,\n      paddingAngle,\n      startAngle,\n      endAngle,\n      withLabels,\n      label,\n      withLabelLines,\n      labelLine,\n      activeShapeProps,\n      inactiveShapeProps,\n      pieProps,\n    ],\n  )\n\n  const getCellProps: RequiredPropGetter<\n    { index: number } & Omit<Recharts.CellProps, \"ref\">,\n    Recharts.CellProps\n  > = useCallback(\n    ({ className: classNameProp, index, ...props }, ref = null) => {\n      const { className, color } = cellPropList[index] ?? {}\n\n      return {\n        ref,\n        className: cx(classNameProp, className),\n        fill: color,\n        stroke: color,\n        strokeWidth,\n        ...(props as Recharts.CellProps),\n      }\n    },\n    [cellPropList, strokeWidth],\n  )\n\n  return {\n    pieVars,\n    setHighlightedArea,\n    getCellProps,\n    getPieChartProps,\n    getPieProps,\n  }\n}\n\nexport type UsePieChartReturn = ReturnType<typeof usePieChart>\n"],"mappings":"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","names":["_a","dimCell"]}

package/dist/{chunk-QL3DB7OJ.mjs → chunk-TXNC7GLT.mjs}

@@ -18,4 +18,4 @@ export {
   getClassName,
   getComponentProps
 };
-//# sourceMappingURL=chunk-QL3DB7OJ.mjs.map
+//# sourceMappingURL=chunk-TXNC7GLT.mjs.map

package/dist/{chunk-QL3DB7OJ.mjs.map → chunk-TXNC7GLT.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/chart-utils.ts"],"sourcesContent":["import type { StyledTheme } from \"@yamada-ui/core\"\nimport { getCSS } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport { cx, isString, splitObject } from \"@yamada-ui/utils\"\n\nexport const getClassName =\n  (...styles: (Dict | string | undefined)[]) =>\n  (theme: StyledTheme) =>\n    cx(\n      ...styles.map((style) =>\n        isString(style) ? style : getCSS(style)(theme),\n      ),\n    )\n\nexport const getComponentProps =\n  <T extends Dict, K extends keyof T>(\n    [obj, keys]: [T, K[]],\n    ...props: (Dict | string | undefined)[]\n  ) =>\n  <P extends boolean = false>(theme: StyledTheme, isContain?: P) => {\n    const [pickedProps, omittedProps] = splitObject<T, K>(obj, keys)\n    const className = getClassName(...props, omittedProps)(theme)\n\n    return (\n      !isContain ? [pickedProps, className] : { ...pickedProps, className }\n    ) as P extends false\n      ? [{ [P in K]: T[P] }, string]\n      : { [P in K]: T[P] } & { className: string }\n  }\n"],"mappings":";;;AACA,SAAS,cAAc;AAEvB,SAAS,IAAI,UAAU,mBAAmB;AAEnC,IAAM,eACX,IAAI,WACJ,CAAC,UACC;AAAA,EACE,GAAG,OAAO;AAAA,IAAI,CAAC,UACb,SAAS,KAAK,IAAI,QAAQ,OAAO,KAAK,EAAE,KAAK;AAAA,EAC/C;AACF;AAEG,IAAM,oBACX,CACE,CAAC,KAAK,IAAI,MACP,UAEL,CAA4B,OAAoB,cAAkB;AAChE,QAAM,CAAC,aAAa,YAAY,IAAI,YAAkB,KAAK,IAAI;AAC/D,QAAM,YAAY,aAAa,GAAG,OAAO,YAAY,EAAE,KAAK;AAE5D,SACE,CAAC,YAAY,CAAC,aAAa,SAAS,IAAI,EAAE,GAAG,aAAa,UAAU;AAIxE;","names":[]}
+{"version":3,"sources":["../src/chart-utils.ts"],"sourcesContent":["import type { StyledTheme } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport { getCSS } from \"@yamada-ui/core\"\nimport { cx, isString, splitObject } from \"@yamada-ui/utils\"\n\nexport const getClassName =\n  (...styles: (Dict | string | undefined)[]) =>\n  (theme: StyledTheme) =>\n    cx(\n      ...styles.map((style) =>\n        isString(style) ? style : getCSS(style)(theme),\n      ),\n    )\n\nexport const getComponentProps =\n  <T extends Dict, K extends keyof T>(\n    [obj, keys]: [T, K[]],\n    ...props: (Dict | string | undefined)[]\n  ) =>\n  <P extends boolean = false>(theme: StyledTheme, isContain?: P) => {\n    const [pickedProps, omittedProps] = splitObject<T, K>(obj, keys)\n    const className = getClassName(...props, omittedProps)(theme)\n\n    return (\n      !isContain ? [pickedProps, className] : { ...pickedProps, className }\n    ) as P extends false\n      ? [{ [P in K]: T[P] }, string]\n      : { [P in K]: T[P] } & { className: string }\n  }\n"],"mappings":";;;AAEA,SAAS,cAAc;AACvB,SAAS,IAAI,UAAU,mBAAmB;AAEnC,IAAM,eACX,IAAI,WACJ,CAAC,UACC;AAAA,EACE,GAAG,OAAO;AAAA,IAAI,CAAC,UACb,SAAS,KAAK,IAAI,QAAQ,OAAO,KAAK,EAAE,KAAK;AAAA,EAC/C;AACF;AAEG,IAAM,oBACX,CACE,CAAC,KAAK,IAAI,MACP,UAEL,CAA4B,OAAoB,cAAkB;AAChE,QAAM,CAAC,aAAa,YAAY,IAAI,YAAkB,KAAK,IAAI;AAC/D,QAAM,YAAY,aAAa,GAAG,OAAO,YAAY,EAAE,KAAK;AAE5D,SACE,CAAC,YAAY,CAAC,aAAa,SAAS,IAAI,EAAE,GAAG,aAAa,UAAU;AAIxE;","names":[]}

package/dist/{chunk-NHHJ5XFF.mjs → chunk-U325CYNR.mjs}

@@ -3,22 +3,24 @@
 // src/area-chart-gradient.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var AreaGradient = ({
-  color,
   id,
-  withGradient,
-  fillOpacity
+  color,
+  fillOpacity,
+  withGradient
 }) => {
   if (withGradient) {
-    return /* @__PURE__ */ jsxs("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+    return /* @__PURE__ */ jsxs("linearGradient", { id, x1: "0", x2: "0", y1: "0", y2: "1", children: [
       /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: fillOpacity }),
       /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.01 })
     ] });
   } else {
-    return /* @__PURE__ */ jsx("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: /* @__PURE__ */ jsx("stop", { stopColor: color, stopOpacity: fillOpacity }) });
+    return /* @__PURE__ */ jsx("linearGradient", { id, x1: "0", x2: "0", y1: "0", y2: "1", children: /* @__PURE__ */ jsx("stop", { stopColor: color, stopOpacity: fillOpacity }) });
   }
 };
+AreaGradient.displayName = "AreaGradient";
+AreaGradient.__ui__ = "AreaGradient";
 
 export {
   AreaGradient
 };
-//# sourceMappingURL=chunk-NHHJ5XFF.mjs.map
+//# sourceMappingURL=chunk-U325CYNR.mjs.map

package/dist/chunk-U325CYNR.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/area-chart-gradient.tsx"],"sourcesContent":["import type { FC } from \"@yamada-ui/core\"\n\nexport interface AreaGradientProps {\n  fillOpacity: number | string\n  id?: string\n  color?: string\n  withGradient?: boolean\n}\n\nexport const AreaGradient: FC<AreaGradientProps> = ({\n  id,\n  color,\n  fillOpacity,\n  withGradient,\n}) => {\n  if (withGradient) {\n    return (\n      <linearGradient id={id} x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n        <stop offset=\"0%\" stopColor={color} stopOpacity={fillOpacity} />\n        <stop offset=\"100%\" stopColor={color} stopOpacity={0.01} />\n      </linearGradient>\n    )\n  } else {\n    return (\n      <linearGradient id={id} x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n        <stop stopColor={color} stopOpacity={fillOpacity} />\n      </linearGradient>\n    )\n  }\n}\n\nAreaGradient.displayName = \"AreaGradient\"\nAreaGradient.__ui__ = \"AreaGradient\"\n"],"mappings":";;;AAiBM,SACE,KADF;AARC,IAAM,eAAsC,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,MAAI,cAAc;AAChB,WACE,qBAAC,oBAAe,IAAQ,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,KAC9C;AAAA,0BAAC,UAAK,QAAO,MAAK,WAAW,OAAO,aAAa,aAAa;AAAA,MAC9D,oBAAC,UAAK,QAAO,QAAO,WAAW,OAAO,aAAa,MAAM;AAAA,OAC3D;AAAA,EAEJ,OAAO;AACL,WACE,oBAAC,oBAAe,IAAQ,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,KAC9C,8BAAC,UAAK,WAAW,OAAO,aAAa,aAAa,GACpD;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;AAC3B,aAAa,SAAS;","names":[]}

package/dist/{chunk-OPPMMNGP.mjs → chunk-UER5GW4M.mjs}

@@ -5,26 +5,26 @@ import {
 } from "./chunk-6YUJLLGN.mjs";
 import {
   getComponentProps
-} from "./chunk-QL3DB7OJ.mjs";
+} from "./chunk-TXNC7GLT.mjs";
 
 // src/use-bar-chart.tsx
 import { getVar, useTheme } from "@yamada-ui/core";
 import { cx, runIfFunc } from "@yamada-ui/utils";
-import { useCallback, useState, useId, useMemo } from "react";
+import { useCallback, useId, useMemo, useState } from "react";
 import { Bar, Cell } from "recharts";
 import { jsx } from "react/jsx-runtime";
 var useBarChart = ({
-  data,
-  series,
   type = "default",
-  layoutType = "horizontal",
-  referenceLineProps = [],
+  cell = defaultBarCell,
+  data,
   fillOpacity = 1,
+  layoutType = "horizontal",
+  series,
+  styles,
   syncId,
   xAxisLabel,
   yAxisLabel,
-  styles,
-  cell = defaultBarCell,
+  referenceLineProps = [],
   ...rest
 }) => {
   var _a;
@@ -103,9 +103,9 @@ var useBarChart = ({
   const barPropsList = useMemo(
     () => series.map((props, index) => {
       const {
-        dataKey,
         activeBar: activeBar2 = {},
         background: background2 = {},
+        dataKey,
         dimBar: dimBar2 = {},
         ...computedProps
       } = props;
@@ -159,20 +159,29 @@ var useBarChart = ({
     ]
   );
   const getBarProps = useCallback(
-    ({ index, className: classNameProp, ...props }, ref = null) => {
-      const { id, className, activeBar: activeBar2, background: background2, color, dataKey, ...rest2 } = barPropsList[index];
+    ({ className: classNameProp, index, ...props }, ref = null) => {
+      var _a2;
+      const {
+        id,
+        className,
+        activeBar: activeBar2,
+        background: background2,
+        color,
+        dataKey = "",
+        ...rest2
+      } = (_a2 = barPropsList[index]) != null ? _a2 : {};
       return {
+        id,
         ref,
+        name: dataKey,
         className: cx(classNameProp, className),
         activeBar: activeBar2,
         background: background2,
-        id,
-        name: dataKey,
         dataKey,
         fill: color,
-        stroke: color,
         isAnimationActive: false,
         stackId: stacked ? "stack" : void 0,
+        stroke: color,
         ...props,
         ...rest2
       };
@@ -186,9 +195,9 @@ var useBarChart = ({
       return /* @__PURE__ */ jsx(
         Bar,
         {
-          ...getBarProps({ index, className: "ui-bar-chart__bar" }),
+          ...getBarProps({ className: "ui-bar-chart__bar", index }),
           children: data.map(
-            (data2, index2) => runIfFunc(cell, { series: series2, data: data2, index: index2, hasStack })
+            (data2, index2) => runIfFunc(cell, { data: data2, hasStack, index: index2, series: series2 })
           )
         },
         `bar-${dataKey}`
@@ -200,14 +209,14 @@ var useBarChart = ({
       ref,
       className: cx(className, barChartClassName),
       data,
-      stackOffset: type === "percent" ? "expand" : void 0,
       layout: layoutType,
-      syncId,
       margin: {
         bottom: xAxisLabel ? 30 : void 0,
         left: yAxisLabel ? 10 : void 0,
         right: yAxisLabel ? 5 : void 0
       },
+      stackOffset: type === "percent" ? "expand" : void 0,
+      syncId,
       ...props,
       ...chartProps
     }),
@@ -225,16 +234,16 @@ var useBarChart = ({
   return {
     bars,
     barVars,
-    getBarProps,
+    setHighlightedArea,
     getBarChartProps,
-    setHighlightedArea
+    getBarProps
   };
 };
 var defaultBarCell = ({
-  hasStack,
-  series,
   data,
-  index
+  hasStack,
+  index,
+  series
 }) => {
   const { dataKey } = series;
   const key = `cell-${dataKey}-${index}`;
@@ -250,4 +259,4 @@ var defaultBarCell = ({
 export {
   useBarChart
 };
-//# sourceMappingURL=chunk-OPPMMNGP.mjs.map
+//# sourceMappingURL=chunk-UER5GW4M.mjs.map

package/dist/chunk-UER5GW4M.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-bar-chart.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  CSSUIProps,\n  PropGetter,\n  RequiredPropGetter,\n} from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type { ComponentPropsWithoutRef, FC, ReactNode } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport type {\n  BarChartProps,\n  BarChartType,\n  BarProps,\n  ChartLayoutType,\n  ReferenceLineProps,\n} from \"./chart.types\"\nimport { getVar, useTheme } from \"@yamada-ui/core\"\nimport { cx, runIfFunc } from \"@yamada-ui/utils\"\nimport { useCallback, useId, useMemo, useState } from \"react\"\nimport { Bar, Cell } from \"recharts\"\nimport { getComponentProps } from \"./chart-utils\"\nimport { barChartProperties, barProperties } from \"./rechart-properties\"\n\nexport interface UseBarChartOptions {\n  /**\n   * Chart data.\n   */\n  data: Dict[]\n  /**\n   * An array of objects with `name` and `color` keys. Determines which data should be consumed from the `data` array.\n   */\n  series: BarProps[]\n  /**\n   * Controls how chart bars are positioned relative to each other.\n   *\n   * @default `default`\n   */\n  type?: BarChartType\n  /**\n   * A function that returns a component that renders the bar cells.\n   */\n  cell?: FC<BarCellProps> | ReactNode\n  /**\n   * Controls fill opacity of all bars.\n   *\n   * @default 1\n   */\n  fillOpacity?: [number, number] | number\n  /**\n   * Chart orientation.\n   *\n   * @default 'horizontal'\n   */\n  layoutType?: ChartLayoutType\n  /**\n   * If any two categorical charts have the same syncId,\n   * these two charts can sync the position tooltip, and the startIndex, endIndex of Brush.\n   */\n  syncId?: number | string\n  /**\n   * A label to display below the X axis.\n   */\n  xAxisLabel?: string\n  /**\n   * A label to display below the Y axis.\n   */\n  yAxisLabel?: string\n  /**\n   * Props for the bars.\n   */\n  barProps?: Partial<BarProps>\n  /**\n   * Props passed down to recharts `BarChart` component.\n   */\n  chartProps?: BarChartProps\n  /**\n   * Reference lines that should be displayed on the chart.\n   */\n  referenceLineProps?: ReferenceLineProps[]\n}\n\nexport interface UseBarChartProps extends UseBarChartOptions {\n  styles: Dict<CSSUIObject | undefined>\n}\n\nexport const useBarChart = ({\n  type = \"default\",\n  cell = defaultBarCell,\n  data,\n  fillOpacity = 1,\n  layoutType = \"horizontal\",\n  series,\n  styles,\n  syncId,\n  xAxisLabel,\n  yAxisLabel,\n  referenceLineProps = [],\n  ...rest\n}: UseBarChartProps) => {\n  const uuid = useId()\n  const { theme } = useTheme()\n  const [highlightedArea, setHighlightedArea] = useState<null | string>(null)\n  const stacked = type === \"stacked\" || type === \"percent\"\n  const shouldHighlight = highlightedArea !== null\n  const {\n    activeBar = {},\n    background = {},\n    dimBar,\n    ...computedBarProps\n  } = rest.barProps ?? {}\n\n  const barColors: CSSUIProps[\"vars\"] = useMemo(\n    () =>\n      series.map(({ color }, index) => ({\n        name: `bar-${index}`,\n        token: \"colors\",\n        value: color ?? \"transparent\",\n      })),\n    [series],\n  )\n\n  const referenceLineColors: CSSUIProps[\"vars\"] = useMemo(\n    () =>\n      referenceLineProps.map(({ color }, index) => ({\n        name: `reference-line-${index}`,\n        token: \"colors\",\n        value: color ?? \"transparent\",\n      })),\n    [referenceLineProps],\n  )\n\n  const barVars: CSSUIProps[\"vars\"] = useMemo(() => {\n    return [\n      ...barColors,\n      ...referenceLineColors,\n      { name: \"fill-opacity\", value: fillOpacity },\n    ]\n  }, [barColors, fillOpacity, referenceLineColors])\n\n  const [chartProps, barChartClassName] = useMemo(() => {\n    const resolvedBarChartProps = { barGap: 8, ...rest.chartProps }\n\n    return getComponentProps<Dict, string>(\n      [resolvedBarChartProps, barChartProperties],\n      styles.chart,\n    )(theme)\n  }, [rest.chartProps, styles.chart, theme])\n\n  const [barProps, barClassName] = useMemo(() => {\n    const resolvedBarProps = {\n      fillOpacity: \"$fill-opacity\",\n      strokeOpacity: 1,\n      ...computedBarProps,\n    }\n\n    return getComponentProps<Dict, string>(\n      [resolvedBarProps, barProperties],\n      styles.bar,\n    )(theme)\n  }, [computedBarProps, styles.bar, theme])\n\n  const [dimBarProps, dimBarClassName] = useMemo(() => {\n    const resolvedDimBar = { fillOpacity: 0.3, strokeOpacity: 0, ...dimBar }\n\n    return getComponentProps<Dict, string>([resolvedDimBar, barProperties])(\n      theme,\n    )\n  }, [dimBar, theme])\n\n  const [activeBarProps, activeBarClassName] = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [activeBar, barProperties],\n        styles.activeBar,\n      )(theme),\n    [activeBar, styles.activeBar, theme],\n  )\n\n  const [backgroundProps, backgroundClassName] = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [background, barProperties],\n        styles.background,\n      )(theme),\n    [background, styles.background, theme],\n  )\n\n  const barPropsList = useMemo(\n    () =>\n      series.map((props, index) => {\n        const {\n          activeBar = {},\n          background = {},\n          dataKey,\n          dimBar = {},\n          ...computedProps\n        } = props\n        const id = `${uuid}-${dataKey}`\n        const color = getVar(`bar-${index}`)(theme)\n        const dimmed = shouldHighlight && highlightedArea !== dataKey\n        const computedDimBar = { ...dimBarProps, ...dimBar }\n        const resolvedProps = {\n          ...barProps,\n          ...computedProps,\n          ...(dimmed ? computedDimBar : {}),\n        }\n\n        const rest = getComponentProps<Dict, string>(\n          [resolvedProps, barProperties],\n          barClassName,\n          dimmed ? dimBarClassName : undefined,\n        )(theme, true)\n\n        const computedActiveBar = { ...activeBarProps, ...activeBar }\n\n        const resolvedActiveBar = getComponentProps<Dict, string>(\n          [computedActiveBar, barProperties],\n          activeBarClassName,\n        )(theme, true)\n\n        const computedBackground = { ...backgroundProps, ...background }\n\n        const resolvedBackground = getComponentProps<Dict, string>(\n          [computedBackground, barProperties],\n          backgroundClassName,\n        )(theme, true)\n\n        return {\n          ...rest,\n          id,\n          activeBar: resolvedActiveBar,\n          background: resolvedBackground,\n          color,\n          dataKey,\n        }\n      }),\n    [\n      activeBarClassName,\n      activeBarProps,\n      backgroundClassName,\n      backgroundProps,\n      barClassName,\n      barProps,\n      dimBarClassName,\n      dimBarProps,\n      highlightedArea,\n      series,\n      shouldHighlight,\n      theme,\n      uuid,\n    ],\n  )\n\n  const getBarProps: RequiredPropGetter<\n    { index: number } & Partial<Recharts.BarProps>,\n    Omit<Recharts.BarProps, \"ref\">\n  > = useCallback(\n    ({ className: classNameProp, index, ...props }, ref = null) => {\n      const {\n        id,\n        className,\n        activeBar,\n        background,\n        color,\n        dataKey = \"\",\n        ...rest\n      } = barPropsList[index] ?? {}\n\n      return {\n        id,\n        ref,\n        name: dataKey,\n        className: cx(classNameProp, className),\n        activeBar,\n        background,\n        dataKey,\n        fill: color,\n        isAnimationActive: false,\n        stackId: stacked ? \"stack\" : undefined,\n        stroke: color,\n        ...(props as Omit<Recharts.BarProps, \"dataKey\">),\n        ...rest,\n      } as Recharts.BarProps\n    },\n    [barPropsList, stacked],\n  )\n\n  const bars = useMemo(() => {\n    const hasStack = series.some((entry) => entry.stackId)\n\n    return series.map((series, index) => {\n      const { dataKey } = series\n\n      return (\n        <Bar\n          key={`bar-${dataKey}`}\n          {...getBarProps({ className: \"ui-bar-chart__bar\", index })}\n        >\n          {data.map((data, index) =>\n            runIfFunc(cell, { data, hasStack, index, series }),\n          )}\n        </Bar>\n      )\n    })\n  }, [series, getBarProps, cell, data])\n\n  const getBarChartProps: PropGetter<\n    ComponentPropsWithoutRef<typeof Recharts.BarChart>,\n    ComponentPropsWithoutRef<typeof Recharts.BarChart>\n  > = useCallback(\n    ({ className, ...props } = {}, ref = null) => ({\n      ref,\n      className: cx(className, barChartClassName),\n      data,\n      layout: layoutType,\n      margin: {\n        bottom: xAxisLabel ? 30 : undefined,\n        left: yAxisLabel ? 10 : undefined,\n        right: yAxisLabel ? 5 : undefined,\n      },\n      stackOffset: type === \"percent\" ? \"expand\" : undefined,\n      syncId,\n      ...props,\n      ...chartProps,\n    }),\n    [\n      barChartClassName,\n      data,\n      type,\n      layoutType,\n      syncId,\n      xAxisLabel,\n      yAxisLabel,\n      chartProps,\n    ],\n  )\n\n  return {\n    bars,\n    barVars,\n    setHighlightedArea,\n    getBarChartProps,\n    getBarProps,\n  }\n}\n\nexport type UseBarChartReturn = ReturnType<typeof useBarChart>\n\nexport interface BarCellProps {\n  data: Dict\n  hasStack: boolean\n  index: number\n  series: BarProps\n}\n\nconst defaultBarCell: FC<BarCellProps> = ({\n  data,\n  hasStack,\n  index,\n  series,\n}) => {\n  const { dataKey } = series\n  const key = `cell-${dataKey}-${index}`\n\n  if (!hasStack) return <Cell key={key} />\n\n  const keys = Object.keys(data)\n  const values = Object.values(data)\n\n  const currentIndex = keys.findIndex((key) => key === dataKey)\n  const lastIndex = values.findLastIndex((value) => value !== 0)\n\n  if (currentIndex === lastIndex) return <Cell key={key} />\n\n  return <Cell key={key} radius={0} />\n}\n"],"mappings":"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","names":["activeBar","background","dimBar","rest","_a","series","data","index","key"]}

package/dist/{chunk-FYAC4RRZ.mjs → chunk-UTD4XZDM.mjs}

@@ -4,15 +4,15 @@ import {
 } from "./chunk-6YUJLLGN.mjs";
 import {
   getComponentProps
-} from "./chunk-QL3DB7OJ.mjs";
+} from "./chunk-TXNC7GLT.mjs";
 
 // src/use-chart-reference-line.ts
 import { getCSS, getVar, useTheme } from "@yamada-ui/core";
-import { isObject, cx } from "@yamada-ui/utils";
+import { cx, isObject } from "@yamada-ui/utils";
 import { useCallback, useMemo } from "react";
 var useChartReferenceLine = ({
-  referenceLineProps = [],
-  styles
+  styles,
+  referenceLineProps = []
 }) => {
   const { theme } = useTheme();
   const styleClassName = getCSS(styles.referenceLine)(theme);
@@ -24,23 +24,24 @@ var useChartReferenceLine = ({
       )(theme);
       const color = getVar(`reference-line-${index}`)(theme);
       const label = {
-        value: labelProp,
         fill: color,
         position: "insideBottomLeft",
+        value: labelProp,
         ...isObject(labelProp) ? labelProp : {}
       };
-      return { propClassName, color, label, ...rest };
+      return { color, label, propClassName, ...rest };
     }),
     [referenceLineProps, styleClassName, theme]
   );
   const getReferenceLineProps = useCallback(
-    ({ index, className, ...props }, ref = null) => {
-      const { propClassName, color, label, ...rest } = propList[index];
+    ({ className, index, ...props }, ref = null) => {
+      var _a;
+      const { color, label, propClassName, ...rest } = (_a = propList[index]) != null ? _a : {};
       return {
         ref,
         className: cx(className, propClassName),
-        stroke: color,
         label,
+        stroke: color,
         ...props,
         ...rest
       };
@@ -53,4 +54,4 @@ var useChartReferenceLine = ({
 export {
   useChartReferenceLine
 };
-//# sourceMappingURL=chunk-FYAC4RRZ.mjs.map
+//# sourceMappingURL=chunk-UTD4XZDM.mjs.map

package/dist/chunk-UTD4XZDM.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-chart-reference-line.ts"],"sourcesContent":["import type { CSSUIObject, RequiredPropGetter } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type * as Recharts from \"recharts\"\nimport type { ReferenceLineProps } from \"./chart.types\"\nimport { getCSS, getVar, useTheme } from \"@yamada-ui/core\"\nimport { cx, isObject } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\nimport { getComponentProps } from \"./chart-utils\"\nimport { referenceLineProperties } from \"./rechart-properties\"\n\nexport interface UseChartReferenceLineOptions {\n  /**\n   * Reference lines that should be displayed on the chart.\n   */\n  referenceLineProps?: ReferenceLineProps[]\n}\n\ninterface UseChartReferenceLineProps extends UseChartReferenceLineOptions {\n  styles: Dict<CSSUIObject | undefined>\n}\n\nexport const useChartReferenceLine = ({\n  styles,\n  referenceLineProps = [],\n}: UseChartReferenceLineProps) => {\n  const { theme } = useTheme()\n  const styleClassName = getCSS(styles.referenceLine)(theme)\n  const propList = useMemo(\n    () =>\n      referenceLineProps.map((props, index) => {\n        const [{ label: labelProp, ...rest }, propClassName] =\n          getComponentProps(\n            [props, referenceLineProperties],\n            styleClassName,\n          )(theme)\n\n        const color = getVar(`reference-line-${index}`)(theme)\n        const label: Recharts.ReferenceLineProps[\"label\"] = {\n          fill: color,\n          position: \"insideBottomLeft\",\n          value: labelProp as string,\n          ...(isObject(labelProp) ? labelProp : {}),\n        }\n\n        return { color, label, propClassName, ...rest }\n      }),\n    [referenceLineProps, styleClassName, theme],\n  )\n\n  const getReferenceLineProps: RequiredPropGetter<\n    { index: number } & Partial<Recharts.ReferenceLineProps>,\n    Omit<Recharts.ReferenceLineProps, \"ref\">\n  > = useCallback(\n    ({ className, index, ...props }, ref = null) => {\n      const { color, label, propClassName, ...rest } = propList[index] ?? {}\n\n      return {\n        ref,\n        className: cx(className, propClassName),\n        label,\n        stroke: color,\n        ...(props as Recharts.ReferenceLineProps),\n        ...rest,\n      }\n    },\n    [propList],\n  )\n\n  return { getReferenceLineProps }\n}\n"],"mappings":";;;;;;;;;AAIA,SAAS,QAAQ,QAAQ,gBAAgB;AACzC,SAAS,IAAI,gBAAgB;AAC7B,SAAS,aAAa,eAAe;AAe9B,IAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA,qBAAqB,CAAC;AACxB,MAAkC;AAChC,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,iBAAiB,OAAO,OAAO,aAAa,EAAE,KAAK;AACzD,QAAM,WAAW;AAAA,IACf,MACE,mBAAmB,IAAI,CAAC,OAAO,UAAU;AACvC,YAAM,CAAC,EAAE,OAAO,WAAW,GAAG,KAAK,GAAG,aAAa,IACjD;AAAA,QACE,CAAC,OAAO,uBAAuB;AAAA,QAC/B;AAAA,MACF,EAAE,KAAK;AAET,YAAM,QAAQ,OAAO,kBAAkB,KAAK,EAAE,EAAE,KAAK;AACrD,YAAM,QAA8C;AAAA,QAClD,MAAM;AAAA,QACN,UAAU;AAAA,QACV,OAAO;AAAA,QACP,GAAI,SAAS,SAAS,IAAI,YAAY,CAAC;AAAA,MACzC;AAEA,aAAO,EAAE,OAAO,OAAO,eAAe,GAAG,KAAK;AAAA,IAChD,CAAC;AAAA,IACH,CAAC,oBAAoB,gBAAgB,KAAK;AAAA,EAC5C;AAEA,QAAM,wBAGF;AAAA,IACF,CAAC,EAAE,WAAW,OAAO,GAAG,MAAM,GAAG,MAAM,SAAS;AArDpD;AAsDM,YAAM,EAAE,OAAO,OAAO,eAAe,GAAG,KAAK,KAAI,cAAS,KAAK,MAAd,YAAmB,CAAC;AAErE,aAAO;AAAA,QACL;AAAA,QACA,WAAW,GAAG,WAAW,aAAa;AAAA,QACtC;AAAA,QACA,QAAQ;AAAA,QACR,GAAI;AAAA,QACJ,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SAAO,EAAE,sBAAsB;AACjC;","names":[]}

package/dist/{chunk-A3IWA366.mjs → chunk-VK65X6Q2.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-6YUJLLGN.mjs";
 import {
   getComponentProps
-} from "./chunk-QL3DB7OJ.mjs";
+} from "./chunk-TXNC7GLT.mjs";
 
 // src/use-chart.ts
 import { useTheme } from "@yamada-ui/core";
@@ -33,13 +33,13 @@ var useChart = ({ containerProps = {} }) => {
     getContainerProps
   };
 };
-var useLegend = ({} = {}) => {
+var useLegend = () => {
   const { styles } = useChartContext();
   return {
     styles
   };
 };
-var useTooltip = ({} = {}) => {
+var useTooltip = () => {
   const { styles } = useChartContext();
   return {
     styles
@@ -53,4 +53,4 @@ export {
   useLegend,
   useTooltip
 };
-//# sourceMappingURL=chunk-A3IWA366.mjs.map
+//# sourceMappingURL=chunk-VK65X6Q2.mjs.map

package/dist/chunk-VK65X6Q2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-chart.ts"],"sourcesContent":["import type { CSSUIObject, PropGetter } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type * as Recharts from \"recharts\"\nimport type { ResponsiveContainerProps } from \"./chart.types\"\nimport { useTheme } from \"@yamada-ui/core\"\nimport { createContext, cx } from \"@yamada-ui/utils\"\nimport { useCallback } from \"react\"\nimport { getComponentProps } from \"./chart-utils\"\nimport { containerProperties } from \"./rechart-properties\"\n\ninterface ChartContext {\n  styles: { [key: string]: CSSUIObject | undefined }\n}\n\nexport const [ChartProvider, useChartContext] = createContext<ChartContext>({\n  name: \"ChartContext\",\n  errorMessage: `useChartContext returned is 'undefined'. Seems you forgot to wrap the components in \"<LineChart />\" or \"<BarChart />\" etc.`,\n})\n\nexport interface UseChartProps {\n  /**\n   * Props passed down to recharts `ResponsiveContainer` component.\n   */\n  containerProps?: ResponsiveContainerProps\n}\n\nexport const useChart = ({ containerProps = {} }: UseChartProps) => {\n  const { theme } = useTheme()\n  const [reChartsProps, propClassName] = getComponentProps<Dict, string>([\n    containerProps,\n    containerProperties,\n  ])(theme)\n\n  const getContainerProps: PropGetter<\n    Partial<Omit<Recharts.ResponsiveContainerProps, \"children\">>,\n    Omit<Recharts.ResponsiveContainerProps, \"children\">\n  > = useCallback(\n    ({ className, ...props } = {}, ref = null) => ({\n      ref,\n      className: cx(\"ui-chart__container\", className as string, propClassName),\n      ...props,\n      ...reChartsProps,\n    }),\n    [propClassName, reChartsProps],\n  )\n\n  return {\n    getContainerProps,\n  }\n}\n\nexport type UseChartReturn = ReturnType<typeof useChart>\n\nexport const useLegend = () => {\n  const { styles } = useChartContext()\n\n  return {\n    styles,\n  }\n}\n\nexport type UseLegendReturn = ReturnType<typeof useLegend>\n\nexport const useTooltip = () => {\n  const { styles } = useChartContext()\n\n  return {\n    styles,\n  }\n}\n\nexport type UseTooltipReturn = ReturnType<typeof useTooltip>\n"],"mappings":";;;;;;;;;AAIA,SAAS,gBAAgB;AACzB,SAAS,eAAe,UAAU;AAClC,SAAS,mBAAmB;AAQrB,IAAM,CAAC,eAAe,eAAe,IAAI,cAA4B;AAAA,EAC1E,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AASM,IAAM,WAAW,CAAC,EAAE,iBAAiB,CAAC,EAAE,MAAqB;AAClE,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,CAAC,eAAe,aAAa,IAAI,kBAAgC;AAAA,IACrE;AAAA,IACA;AAAA,EACF,CAAC,EAAE,KAAK;AAER,QAAM,oBAGF;AAAA,IACF,CAAC,EAAE,WAAW,GAAG,MAAM,IAAI,CAAC,GAAG,MAAM,UAAU;AAAA,MAC7C;AAAA,MACA,WAAW,GAAG,uBAAuB,WAAqB,aAAa;AAAA,MACvE,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,eAAe,aAAa;AAAA,EAC/B;AAEA,SAAO;AAAA,IACL;AAAA,EACF;AACF;AAIO,IAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,OAAO,IAAI,gBAAgB;AAEnC,SAAO;AAAA,IACL;AAAA,EACF;AACF;AAIO,IAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,OAAO,IAAI,gBAAgB;AAEnC,SAAO;AAAA,IACL;AAAA,EACF;AACF;","names":[]}

package/dist/{chunk-OJ2MLZZ7.mjs → chunk-X6PIY2M3.mjs}

@@ -4,16 +4,16 @@ import {
 } from "./chunk-6YUJLLGN.mjs";
 import {
   getClassName
-} from "./chunk-QL3DB7OJ.mjs";
+} from "./chunk-TXNC7GLT.mjs";
 
 // src/use-chart-tooltip.ts
 import { useTheme } from "@yamada-ui/core";
-import { splitObject, cx } from "@yamada-ui/utils";
+import { cx, splitObject } from "@yamada-ui/utils";
 import { useCallback, useMemo } from "react";
 var useChartTooltip = ({
-  tooltipProps: _tooltipProps = {},
+  styles,
   tooltipAnimationDuration = 0,
-  styles
+  tooltipProps: _tooltipProps = {}
 }) => {
   const { theme } = useTheme();
   const { cursor, ...rest } = _tooltipProps;
@@ -29,19 +29,19 @@ var useChartTooltip = ({
     (props, ref = null) => ({
       ref,
       animationDuration: tooltipAnimationDuration,
-      isAnimationActive: (tooltipAnimationDuration || 0) > 0,
       cursor: {
         className: cx("ui-chart__cursor", cursorClassName)
       },
+      isAnimationActive: (tooltipAnimationDuration || 0) > 0,
       ...props,
       ...tooltipProps
     }),
     [cursorClassName, tooltipAnimationDuration, tooltipProps]
   );
-  return { tooltipProps: tooltipUIProps, getTooltipProps };
+  return { getTooltipProps, tooltipProps: tooltipUIProps };
 };
 
 export {
   useChartTooltip
 };
-//# sourceMappingURL=chunk-OJ2MLZZ7.mjs.map
+//# sourceMappingURL=chunk-X6PIY2M3.mjs.map

package/dist/chunk-X6PIY2M3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-chart-tooltip.ts"],"sourcesContent":["import type { CSSUIObject, PropGetter } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type * as Recharts from \"recharts\"\nimport type { TooltipProps } from \"./chart.types\"\nimport { useTheme } from \"@yamada-ui/core\"\nimport { cx, splitObject } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\nimport { getClassName } from \"./chart-utils\"\nimport { tooltipProperties } from \"./rechart-properties\"\n\nexport interface UseChartTooltipOptions {\n  /**\n   * A function to format labels on inside the tooltip.\n   */\n  labelFormatter?: (label: string) => string\n  /**\n   * Specifies the duration of animation, the unit of this option is ms.\n   *\n   * @default 0\n   */\n  tooltipAnimationDuration?: number\n  /**\n   * A function to format values on inside the tooltip.\n   */\n  valueFormatter?: (value: any) => string\n  /**\n   * Props passed down to recharts 'Tooltip' component.\n   */\n  tooltipProps?: TooltipProps\n}\n\ninterface UseChartTooltipProps extends UseChartTooltipOptions {\n  styles: Dict<CSSUIObject | undefined>\n}\n\nexport const useChartTooltip = ({\n  styles,\n  tooltipAnimationDuration = 0,\n  tooltipProps: _tooltipProps = {},\n}: UseChartTooltipProps) => {\n  const { theme } = useTheme()\n  const { cursor, ...rest } = _tooltipProps\n  const cursorClassName = useMemo(\n    () => getClassName({ ...styles.cursor, ...cursor })(theme),\n    [cursor, styles.cursor, theme],\n  )\n\n  const [tooltipProps, tooltipUIProps] = splitObject<Dict, string>(\n    rest,\n    tooltipProperties,\n  )\n\n  const getTooltipProps: PropGetter<\n    Partial<Recharts.TooltipProps<any, any>>,\n    Recharts.TooltipProps<any, any>\n  > = useCallback(\n    (props, ref = null) => ({\n      ref,\n      animationDuration: tooltipAnimationDuration,\n      cursor: {\n        className: cx(\"ui-chart__cursor\", cursorClassName),\n      },\n      isAnimationActive: (tooltipAnimationDuration || 0) > 0,\n      ...props,\n      ...tooltipProps,\n    }),\n    [cursorClassName, tooltipAnimationDuration, tooltipProps],\n  )\n\n  return { getTooltipProps, tooltipProps: tooltipUIProps }\n}\n"],"mappings":";;;;;;;;;AAIA,SAAS,gBAAgB;AACzB,SAAS,IAAI,mBAAmB;AAChC,SAAS,aAAa,eAAe;AA6B9B,IAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,2BAA2B;AAAA,EAC3B,cAAc,gBAAgB,CAAC;AACjC,MAA4B;AAC1B,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,EAAE,QAAQ,GAAG,KAAK,IAAI;AAC5B,QAAM,kBAAkB;AAAA,IACtB,MAAM,aAAa,EAAE,GAAG,OAAO,QAAQ,GAAG,OAAO,CAAC,EAAE,KAAK;AAAA,IACzD,CAAC,QAAQ,OAAO,QAAQ,KAAK;AAAA,EAC/B;AAEA,QAAM,CAAC,cAAc,cAAc,IAAI;AAAA,IACrC;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAGF;AAAA,IACF,CAAC,OAAO,MAAM,UAAU;AAAA,MACtB;AAAA,MACA,mBAAmB;AAAA,MACnB,QAAQ;AAAA,QACN,WAAW,GAAG,oBAAoB,eAAe;AAAA,MACnD;AAAA,MACA,oBAAoB,4BAA4B,KAAK;AAAA,MACrD,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,iBAAiB,0BAA0B,YAAY;AAAA,EAC1D;AAEA,SAAO,EAAE,iBAAiB,cAAc,eAAe;AACzD;","names":[]}

package/dist/{chunk-MSG3WFBO.mjs → chunk-YIAK5DIM.mjs}

@@ -4,15 +4,15 @@ import {
 } from "./chunk-6YUJLLGN.mjs";
 import {
   getComponentProps
-} from "./chunk-QL3DB7OJ.mjs";
+} from "./chunk-TXNC7GLT.mjs";
 
 // src/use-chart-label-list.ts
 import { getCSS, useTheme } from "@yamada-ui/core";
 import { cx } from "@yamada-ui/utils";
 import { useCallback, useMemo } from "react";
 var useChartLabelList = ({
-  labelListProps = [],
-  styles
+  styles,
+  labelListProps = []
 }) => {
   const { theme } = useTheme();
   const styleClassName = getCSS(styles.labelList)(theme);
@@ -26,8 +26,9 @@ var useChartLabelList = ({
     [labelListProps, styleClassName, theme]
   );
   const getLabelLineProps = useCallback(
-    ({ index, className, ...props }, ref = null) => {
-      const { className: propClassName, ...rest } = propList[index];
+    ({ className, index, ...props }, ref = null) => {
+      var _a;
+      const { className: propClassName, ...rest } = (_a = propList[index]) != null ? _a : {};
       return {
         ref,
         className: cx(className, propClassName),
@@ -43,4 +44,4 @@ var useChartLabelList = ({
 export {
   useChartLabelList
 };
-//# sourceMappingURL=chunk-MSG3WFBO.mjs.map
+//# sourceMappingURL=chunk-YIAK5DIM.mjs.map

package/dist/chunk-YIAK5DIM.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-chart-label-list.ts"],"sourcesContent":["import type { CSSUIObject, RequiredPropGetter } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type * as Recharts from \"recharts\"\nimport type { LabelListProps } from \"./chart.types\"\nimport { getCSS, useTheme } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\nimport { getComponentProps } from \"./chart-utils\"\nimport { labelListProperties } from \"./rechart-properties\"\n\nexport interface UseChartLabelListOptions {\n  /**\n   * Props passed down to recharts `LabelList` components.\n   */\n  labelListProps?: LabelListProps[]\n}\n\ninterface UseChartLabelListProps extends UseChartLabelListOptions {\n  styles: Dict<CSSUIObject | undefined>\n}\n\nexport const useChartLabelList = ({\n  styles,\n  labelListProps = [],\n}: UseChartLabelListProps) => {\n  const { theme } = useTheme()\n  const styleClassName = getCSS(styles.labelList)(theme)\n\n  const propList = useMemo(\n    () =>\n      labelListProps.map((props) =>\n        getComponentProps<Dict, string>(\n          [props, labelListProperties],\n          styleClassName,\n        )(theme, true),\n      ),\n    [labelListProps, styleClassName, theme],\n  )\n\n  const getLabelLineProps: RequiredPropGetter<\n    { index: number } & Partial<Recharts.LabelListProps<Dict>>,\n    Omit<Recharts.LabelListProps<Dict>, \"ref\">\n  > = useCallback(\n    ({ className, index, ...props }, ref = null) => {\n      const { className: propClassName, ...rest } = propList[index] ?? {}\n\n      return {\n        ref,\n        className: cx(className, propClassName),\n        ...(props as Recharts.LabelListProps<Dict>),\n        ...rest,\n      }\n    },\n    [propList],\n  )\n\n  return { getLabelLineProps }\n}\n"],"mappings":";;;;;;;;;AAIA,SAAS,QAAQ,gBAAgB;AACjC,SAAS,UAAU;AACnB,SAAS,aAAa,eAAe;AAe9B,IAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA,iBAAiB,CAAC;AACpB,MAA8B;AAC5B,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,iBAAiB,OAAO,OAAO,SAAS,EAAE,KAAK;AAErD,QAAM,WAAW;AAAA,IACf,MACE,eAAe;AAAA,MAAI,CAAC,UAClB;AAAA,QACE,CAAC,OAAO,mBAAmB;AAAA,QAC3B;AAAA,MACF,EAAE,OAAO,IAAI;AAAA,IACf;AAAA,IACF,CAAC,gBAAgB,gBAAgB,KAAK;AAAA,EACxC;AAEA,QAAM,oBAGF;AAAA,IACF,CAAC,EAAE,WAAW,OAAO,GAAG,MAAM,GAAG,MAAM,SAAS;AA3CpD;AA4CM,YAAM,EAAE,WAAW,eAAe,GAAG,KAAK,KAAI,cAAS,KAAK,MAAd,YAAmB,CAAC;AAElE,aAAO;AAAA,QACL;AAAA,QACA,WAAW,GAAG,WAAW,aAAa;AAAA,QACtC,GAAI;AAAA,QACJ,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SAAO,EAAE,kBAAkB;AAC7B;","names":[]}

package/dist/{chunk-ZXBE4ERW.mjs → chunk-YTUEG4IY.mjs}

@@ -1,26 +1,26 @@
 "use client"
 import {
   useChartLabel
-} from "./chunk-MVRWZTQ5.mjs";
+} from "./chunk-NLXYCM5J.mjs";
 import {
   usePieChart
-} from "./chunk-O3LMKYXK.mjs";
+} from "./chunk-TU6MKMMV.mjs";
 import {
   useChartTooltip
-} from "./chunk-OJ2MLZZ7.mjs";
+} from "./chunk-X6PIY2M3.mjs";
 import {
   useChartLegend
-} from "./chunk-IJRYXT4V.mjs";
+} from "./chunk-R2LOTDR3.mjs";
 import {
   ChartLegend
-} from "./chunk-LLOU2WIV.mjs";
+} from "./chunk-OUIKA4AX.mjs";
 import {
   ChartTooltip
-} from "./chunk-UANITMH7.mjs";
+} from "./chunk-5VLSGWQD.mjs";
 import {
   ChartProvider,
   useChart
-} from "./chunk-A3IWA366.mjs";
+} from "./chunk-VK65X6Q2.mjs";
 
 // src/donut-chart.tsx
 import {
@@ -46,71 +46,71 @@ var DonutChart = forwardRef((props, ref) => {
   const {
     className,
     data,
-    pieProps,
-    chartProps,
-    cellProps,
-    containerProps,
-    withTooltip = true,
-    withLegend = false,
-    tooltipProps,
-    tooltipAnimationDuration,
-    tooltipDataSource = "all",
-    valueFormatter,
-    labelFormatter,
-    unit,
-    paddingAngle,
-    startAngle,
     endAngle,
     withLabels,
-    withLabelLines,
-    labelOffset,
-    isPercent,
     innerRadius = withLabels ? "60%" : "80%",
+    isPercent,
+    labelFormatter,
+    labelOffset,
     outerRadius,
+    paddingAngle,
+    startAngle,
     strokeWidth,
-    legendProps,
+    tooltipAnimationDuration,
+    tooltipDataSource = "all",
+    unit,
+    valueFormatter,
+    withLabelLines,
+    withLegend = false,
+    withTooltip = true,
+    cellProps,
+    chartProps,
+    containerProps,
     labelProps,
+    legendProps,
+    pieProps,
+    tooltipProps,
     ...rest
   } = omitThemeProps(mergedProps);
   const {
     pieVars,
-    getPieProps,
-    getPieChartProps,
+    setHighlightedArea,
     getCellProps,
-    setHighlightedArea
+    getPieChartProps,
+    getPieProps
   } = usePieChart({
     data,
-    pieProps,
-    chartProps,
-    cellProps,
+    endAngle,
     innerRadius,
+    isPercent,
+    labelFormatter,
+    labelOffset,
     outerRadius,
     paddingAngle,
     startAngle,
-    endAngle,
     strokeWidth,
-    withLabels,
+    styles,
     withLabelLines,
-    labelOffset,
-    isPercent,
-    labelFormatter,
-    styles
+    withLabels,
+    cellProps,
+    chartProps,
+    pieProps
   });
   const { getContainerProps } = useChart({ containerProps });
-  const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
-    tooltipProps,
+  const { getTooltipProps, tooltipProps: computedTooltipProps } = useChartTooltip({
+    styles,
     tooltipAnimationDuration,
-    styles
+    tooltipProps
   });
-  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
+  const { getLegendProps, legendProps: computedLegendProps } = useChartLegend({
     legendProps
   });
-  const { getLabelProps } = useChartLabel({ labelProps, styles });
+  const { getLabelProps } = useChartLabel({ styles, labelProps });
   const cells = useMemo(
     () => data.map(({ name }, index) => /* @__PURE__ */ jsx(
       Cell,
       {
-        ...getCellProps({ index, className: "ui-donut-chart__cell" })
+        ...getCellProps({ className: "ui-donut-chart__cell", index })
       },
       `donut-cell-${name}`
     )),
@@ -173,8 +173,8 @@ var DonutChart = forwardRef((props, ref) => {
                         className: "ui-donut-chart__tooltip",
                         label,
                         payload: tooltipDataSource === "segment" ? payload : data,
-                        valueFormatter,
                         unit,
+                        valueFormatter,
                         ...computedTooltipProps
                       }
                     ),
@@ -189,8 +189,10 @@ var DonutChart = forwardRef((props, ref) => {
     }
   ) });
 });
+DonutChart.displayName = "DonutChart";
+DonutChart.__ui__ = "DonutChart";
 
 export {
   DonutChart
 };
-//# sourceMappingURL=chunk-ZXBE4ERW.mjs.map
+//# sourceMappingURL=chunk-YTUEG4IY.mjs.map

package/dist/chunk-YTUEG4IY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/donut-chart.tsx"],"sourcesContent":["import type { PieChartProps } from \"./pie-chart\"\nimport type { UseChartLabelOptions } from \"./use-chart-label\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport {\n  Cell,\n  Label,\n  Legend,\n  Pie,\n  PieChart as RechartsPieChart,\n  ResponsiveContainer,\n  Tooltip,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport { useChartLabel } from \"./use-chart-label\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\nimport { usePieChart } from \"./use-pie-chart\"\n\ninterface DonutChartOptions {\n  /**\n   * Controls innerRadius of the chart segments.\n   * If it is a number, it is the width of the radius.\n   * For example, `60` means the radius is `60px` and the diameter is `120px`.\n   *\n   * @default '60%'\n   */\n  innerRadius?: number | string\n}\n\nexport interface DonutChartProps\n  extends PieChartProps,\n    DonutChartOptions,\n    UseChartLabelOptions {}\n\n/**\n * `DonutChart` is a component for drawing donut charts to compare multiple sets of data.\n *\n * @see Docs https://yamada-ui.com/components/data-display/donut-chart\n */\nexport const DonutChart = forwardRef<DonutChartProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useComponentMultiStyle(\"DonutChart\", props)\n  const {\n    className,\n    data,\n    endAngle,\n    withLabels,\n    innerRadius = withLabels ? \"60%\" : \"80%\",\n    isPercent,\n    labelFormatter,\n    labelOffset,\n    outerRadius,\n    paddingAngle,\n    startAngle,\n    strokeWidth,\n    tooltipAnimationDuration,\n    tooltipDataSource = \"all\",\n    unit,\n    valueFormatter,\n    withLabelLines,\n    withLegend = false,\n    withTooltip = true,\n    cellProps,\n    chartProps,\n    containerProps,\n    labelProps,\n    legendProps,\n    pieProps,\n    tooltipProps,\n    ...rest\n  } = omitThemeProps(mergedProps)\n\n  const {\n    pieVars,\n    setHighlightedArea,\n    getCellProps,\n    getPieChartProps,\n    getPieProps,\n  } = usePieChart({\n    data,\n    endAngle,\n    innerRadius,\n    isPercent,\n    labelFormatter,\n    labelOffset,\n    outerRadius,\n    paddingAngle,\n    startAngle,\n    strokeWidth,\n    styles,\n    withLabelLines,\n    withLabels,\n    cellProps,\n    chartProps,\n    pieProps,\n  })\n  const { getContainerProps } = useChart({ containerProps })\n  const { getTooltipProps, tooltipProps: computedTooltipProps } =\n    useChartTooltip({\n      styles,\n      tooltipAnimationDuration,\n      tooltipProps,\n    })\n  const { getLegendProps, legendProps: computedLegendProps } = useChartLegend({\n    legendProps,\n  })\n  const { getLabelProps } = useChartLabel({ styles, labelProps })\n\n  const cells = useMemo(\n    () =>\n      data.map(({ name }, index) => (\n        <Cell\n          key={`donut-cell-${name}`}\n          {...getCellProps({ className: \"ui-donut-chart__cell\", index })}\n        />\n      )),\n    [data, getCellProps],\n  )\n\n  return (\n    <ChartProvider value={{ styles }}>\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-donut-chart\", className)}\n        __css={{ maxW: \"full\", vars: pieVars, ...styles.container }}\n        {...rest}\n      >\n        <ResponsiveContainer\n          {...getContainerProps({ className: \"ui-donut-chart__container\" })}\n        >\n          <RechartsPieChart\n            {...getPieChartProps({ className: \"ui-donut-chart__chart\" })}\n          >\n            <Pie\n              {...getPieProps({\n                className: \"ui-donut-chart__donut\",\n              })}\n            >\n              {cells}\n              <Label\n                {...getLabelProps({ className: \"ui-donut-chart__label\" })}\n              />\n            </Pie>\n\n            {withLegend ? (\n              <Legend\n                content={({ payload }) => (\n                  <ChartLegend\n                    className=\"ui-donut-chart__legend\"\n                    payload={payload}\n                    onHighlight={setHighlightedArea}\n                    {...computedLegendProps}\n                  />\n                )}\n                {...getLegendProps()}\n              />\n            ) : null}\n\n            {withTooltip ? (\n              <Tooltip\n                content={({ label, payload }) => (\n                  <ChartTooltip\n                    className=\"ui-donut-chart__tooltip\"\n                    label={label}\n                    payload={tooltipDataSource === \"segment\" ? payload : data}\n                    unit={unit}\n                    valueFormatter={valueFormatter}\n                    {...computedTooltipProps}\n                  />\n                )}\n                {...getTooltipProps()}\n              />\n            ) : null}\n          </RechartsPieChart>\n        </ResponsiveContainer>\n      </ui.div>\n    </ChartProvider>\n  )\n})\n\nDonutChart.displayName = \"DonutChart\"\nDonutChart.__ui__ = \"DonutChart\"\n"],"mappings":"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","names":[]}