@yamada-ui/react 2.1.1-dev-20260303170810 → 2.1.1-dev-20260303175135

package/dist/esm/components/chart/composed-chart.js

@@ -0,0 +1,63 @@
+"use client";
+
+import { createComponent } from "../../core/components/create-component.js";
+import "../../core/index.js";
+import { composedChartStyle } from "./composed-chart.style.js";
+import { gradients } from "./chart.js";
+import { CartesianChart, ChartArea, ChartBar, ChartLine } from "./cartesian-chart.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { ComposedChart } from "recharts";
+
+//#region src/components/chart/composed-chart.tsx
+function isLine(props) {
+	return props[0] === "line";
+}
+function isArea(props) {
+	return props[0] === "area";
+}
+function isBar(props) {
+	return props[0] === "bar";
+}
+function mergeSeries(series, color = "mono", strategy = "invert") {
+	const colors = gradients(series.length, color, strategy);
+	return series.map(([type, props], index) => [type, {
+		...props,
+		color: colors[index]
+	}]);
+}
+const { PropsContext: ComposedChartPropsContext, usePropsContext: useComposedChartPropsContext, withContext } = createComponent("composed-chart", composedChartStyle);
+/**
+* `ComposedChart` is a component for drawing composed charts to compare multiple sets of data.
+*
+* @see https://yamada-ui.com/docs/components/composed-chart
+*/
+const ComposedChart$1 = withContext(({ children, series = [], barProps, ...rest }) => {
+	return /* @__PURE__ */ jsx(CartesianChart, {
+		components: useMemo(() => [
+			{
+				component: ChartLine,
+				fallback: series.filter(isLine).map(([, props], index) => /* @__PURE__ */ jsx(ChartLine, { ...props }, index))
+			},
+			{
+				component: ChartArea,
+				fallback: series.filter(isArea).map(([, props], index) => /* @__PURE__ */ jsx(ChartArea, { ...props }, index))
+			},
+			{
+				component: ChartBar,
+				fallback: series.filter(isBar).map(([, props], index) => /* @__PURE__ */ jsx(ChartBar, { ...props }, index))
+			}
+		], [series]),
+		render: (props) => /* @__PURE__ */ jsx(ComposedChart, { ...props }),
+		barProps: {
+			barSize: 40,
+			...barProps
+		},
+		...rest,
+		children
+	});
+})();
+
+//#endregion
+export { ComposedChart$1 as ComposedChart, ComposedChartPropsContext, mergeSeries, useComposedChartPropsContext };
+//# sourceMappingURL=composed-chart.js.map

package/dist/esm/components/chart/composed-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composed-chart.js","names":["ComposedChart","OriginalComposedChart"],"sources":["../../../../src/components/chart/composed-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CSSProps, GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type {\n  CartesianChartProps,\n  ChartAreaProps,\n  ChartBarProps,\n  ChartLineProps,\n} from \"./cartesian-chart\"\nimport type { GradientStrategy } from \"./chart\"\nimport type { ComposedChartStyle } from \"./composed-chart.style\"\nimport type { LineChartStyle } from \"./line-chart.style\"\nimport { useMemo } from \"react\"\nimport { ComposedChart as OriginalComposedChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport {\n  CartesianChart,\n  ChartArea,\n  ChartBar,\n  ChartLine,\n} from \"./cartesian-chart\"\nimport { gradients } from \"./chart\"\nimport { composedChartStyle } from \"./composed-chart.style\"\n\nexport type ComposedType = \"area\" | \"bar\" | \"line\"\n\nexport type ComposedProps<Y extends Dict = Dict> =\n  | readonly [\"area\", ChartAreaProps<Y>]\n  | readonly [\"bar\", ChartBarProps<Y>]\n  | readonly [\"line\", ChartLineProps<Y>]\n\nfunction isLine<Y extends Dict>(\n  props: ComposedProps<Y>,\n): props is [\"line\", ChartLineProps<Y>] {\n  return props[0] === \"line\"\n}\n\nfunction isArea<Y extends Dict>(\n  props: ComposedProps<Y>,\n): props is [\"area\", ChartAreaProps<Y>] {\n  return props[0] === \"area\"\n}\n\nfunction isBar<Y extends Dict>(\n  props: ComposedProps<Y>,\n): props is [\"bar\", ChartBarProps<Y>] {\n  return props[0] === \"bar\"\n}\n\nexport function mergeSeries<Y extends Dict = Dict>(\n  series: ComposedProps<Y>[],\n  color: CSSProps[\"color\"] = \"mono\",\n  strategy: GradientStrategy = \"invert\",\n): ComposedProps<Y>[] {\n  const colors = gradients(series.length, color, strategy)\n\n  return series.map(\n    ([type, props], index) =>\n      [type, { ...props, color: colors[index] }] as ComposedProps<Y>,\n  )\n}\n\nexport interface ComposedChartProps<Y extends Dict = Dict>\n  extends\n    Omit<CartesianChartProps<Y>, \"components\" | \"render\">,\n    ThemeProps<LineChartStyle> {\n  /**\n   * If provided, generate lines based on series.\n   */\n  series?: ComposedProps<Y>[]\n}\n\nconst {\n  PropsContext: ComposedChartPropsContext,\n  usePropsContext: useComposedChartPropsContext,\n  withContext,\n} = createComponent<ComposedChartProps, ComposedChartStyle>(\n  \"composed-chart\",\n  composedChartStyle,\n)\n\nexport { ComposedChartPropsContext, useComposedChartPropsContext }\n\n/**\n * `ComposedChart` is a component for drawing composed charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/composed-chart\n */\nexport const ComposedChart = withContext<\"div\", ComposedChartProps>(\n  <Y extends Dict>({\n    children,\n    series = [],\n    barProps,\n    ...rest\n  }: ComposedChartProps<Y>) => {\n    const components = useMemo(\n      () => [\n        {\n          component: ChartLine,\n          fallback: series\n            .filter(isLine)\n            .map(([, props], index) => <ChartLine key={index} {...props} />),\n        },\n        {\n          component: ChartArea,\n          fallback: series\n            .filter(isArea)\n            .map(([, props], index) => <ChartArea key={index} {...props} />),\n        },\n        {\n          component: ChartBar,\n          fallback: series\n            .filter(isBar)\n            .map(([, props], index) => <ChartBar key={index} {...props} />),\n        },\n      ],\n      [series],\n    )\n\n    return (\n      <CartesianChart\n        components={components}\n        render={(props) => <OriginalComposedChart {...props} />}\n        barProps={{ barSize: 40, ...barProps }}\n        {...rest}\n      >\n        {children}\n      </CartesianChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: ComposedChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;;;AAiCA,SAAS,OACP,OACsC;AACtC,QAAO,MAAM,OAAO;;AAGtB,SAAS,OACP,OACsC;AACtC,QAAO,MAAM,OAAO;;AAGtB,SAAS,MACP,OACoC;AACpC,QAAO,MAAM,OAAO;;AAGtB,SAAgB,YACd,QACA,QAA2B,QAC3B,WAA6B,UACT;CACpB,MAAM,SAAS,UAAU,OAAO,QAAQ,OAAO,SAAS;AAExD,QAAO,OAAO,KACX,CAAC,MAAM,QAAQ,UACd,CAAC,MAAM;EAAE,GAAG;EAAO,OAAO,OAAO;EAAQ,CAAC,CAC7C;;AAaH,MAAM,EACJ,cAAc,2BACd,iBAAiB,8BACjB,gBACE,gBACF,kBACA,mBACD;;;;;;AASD,MAAaA,kBAAgB,aACV,EACf,UACA,SAAS,EAAE,EACX,UACA,GAAG,WACwB;AAyB3B,QACE,oBAAC;EACC,YA1Be,cACX;GACJ;IACE,WAAW;IACX,UAAU,OACP,OAAO,OAAO,CACd,KAAK,GAAG,QAAQ,UAAU,oBAAC,aAAsB,GAAI,SAAX,MAAoB,CAAC;IACnE;GACD;IACE,WAAW;IACX,UAAU,OACP,OAAO,OAAO,CACd,KAAK,GAAG,QAAQ,UAAU,oBAAC,aAAsB,GAAI,SAAX,MAAoB,CAAC;IACnE;GACD;IACE,WAAW;IACX,UAAU,OACP,OAAO,MAAM,CACb,KAAK,GAAG,QAAQ,UAAU,oBAAC,YAAqB,GAAI,SAAX,MAAoB,CAAC;IAClE;GACF,EACD,CAAC,OAAO,CACT;EAKG,SAAS,UAAU,oBAACC,iBAAsB,GAAI,QAAS;EACvD,UAAU;GAAE,SAAS;GAAI,GAAG;GAAU;EACtC,GAAI;EAEH;GACc;EAGtB,EAAE"}

package/dist/esm/components/chart/composed-chart.namespace.js

@@ -0,0 +1,27 @@
+import { __exportAll } from "../../_virtual/rolldown_runtime.js";
+import { ChartLabel, ChartLabelList, ChartLegend, ChartTooltip } from "./chart.js";
+import { ChartArea, ChartBar, ChartGrid, ChartLine, ChartReferenceLine, ChartXAxis, ChartYAxis } from "./cartesian-chart.js";
+import { ComposedChart, ComposedChartPropsContext, mergeSeries, useComposedChartPropsContext } from "./composed-chart.js";
+
+//#region src/components/chart/composed-chart.namespace.ts
+var composed_chart_namespace_exports = /* @__PURE__ */ __exportAll({
+	Area: () => ChartArea,
+	Bar: () => ChartBar,
+	Grid: () => ChartGrid,
+	Label: () => ChartLabel,
+	LabelList: () => ChartLabelList,
+	Legend: () => ChartLegend,
+	Line: () => ChartLine,
+	PropsContext: () => ComposedChartPropsContext,
+	ReferenceLine: () => ChartReferenceLine,
+	Root: () => ComposedChart,
+	Tooltip: () => ChartTooltip,
+	XAxis: () => ChartXAxis,
+	YAxis: () => ChartYAxis,
+	mergeSeries: () => mergeSeries,
+	usePropsContext: () => useComposedChartPropsContext
+});
+
+//#endregion
+export { composed_chart_namespace_exports };
+//# sourceMappingURL=composed-chart.namespace.js.map

package/dist/esm/components/chart/composed-chart.namespace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composed-chart.namespace.js","names":[],"sources":["../../../../src/components/chart/composed-chart.namespace.ts"],"sourcesContent":["export type {\n  ChartAreaProps as AreaProps,\n  ChartBarProps as BarProps,\n  ChartGridProps as GridProps,\n  ChartLineProps as LineProps,\n  ChartReferenceLineProps as ReferenceLineProps,\n  ChartXAxisProps as XAxisProps,\n  ChartXAxisTick as XAxisTick,\n  ChartYAxisProps as YAxisProps,\n  ChartYAxisTick as YAxisTick,\n} from \"./cartesian-chart\"\nexport {\n  ChartArea as Area,\n  ChartBar as Bar,\n  ChartGrid as Grid,\n  ChartLine as Line,\n  ChartReferenceLine as ReferenceLine,\n  ChartXAxis as XAxis,\n  ChartYAxis as YAxis,\n} from \"./cartesian-chart\"\nexport type {\n  ChartActiveDot as ActiveDot,\n  ChartLabel as ComposedLabel,\n  ChartLabelList as ComposedLabelList,\n  ChartDot as Dot,\n  ChartLabelListProps as LabelListProps,\n  ChartLabelProps as LabelProps,\n  ChartLegendProps as LegendProps,\n  ChartTickLine as TickLine,\n  ChartTooltipProps as TooltipProps,\n} from \"./chart\"\nexport {\n  ChartLabel as Label,\n  ChartLabelList as LabelList,\n  ChartLegend as Legend,\n  ChartTooltip as Tooltip,\n} from \"./chart\"\nexport type {\n  ComposedProps,\n  ComposedChartProps as RootProps,\n} from \"./composed-chart\"\nexport {\n  mergeSeries,\n  ComposedChartPropsContext as PropsContext,\n  ComposedChart as Root,\n  useComposedChartPropsContext as usePropsContext,\n} from \"./composed-chart\"\n"],"mappings":""}

package/dist/esm/components/chart/composed-chart.style.js

@@ -0,0 +1,14 @@
+import { defineComponentStyle } from "../../core/system/config.js";
+import "../../core/index.js";
+import { lineChartStyle } from "./line-chart.style.js";
+
+//#region src/components/chart/composed-chart.style.ts
+const composedChartStyle = defineComponentStyle({ base: {
+	...lineChartStyle.base,
+	"--bar-fill-opacity": "0.6",
+	"--bar-stroke": "none"
+} });
+
+//#endregion
+export { composedChartStyle };
+//# sourceMappingURL=composed-chart.style.js.map

package/dist/esm/components/chart/composed-chart.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composed-chart.style.js","names":[],"sources":["../../../../src/components/chart/composed-chart.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\nimport { lineChartStyle } from \"./line-chart.style\"\n\nexport const composedChartStyle = defineComponentStyle({\n  base: {\n    ...lineChartStyle.base,\n    \"--bar-fill-opacity\": \"0.6\",\n    \"--bar-stroke\": \"none\",\n  },\n})\n\nexport type ComposedChartStyle = typeof composedChartStyle\n"],"mappings":";;;;;AAGA,MAAa,qBAAqB,qBAAqB,EACrD,MAAM;CACJ,GAAG,eAAe;CAClB,sBAAsB;CACtB,gBAAgB;CACjB,EACF,CAAC"}

package/dist/esm/components/chart/donut-chart.js

@@ -4,7 +4,6 @@ import { createComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { donutChartStyle } from "./donut-chart.style.js";
 import { ChartDonut, PolarChart } from "./polar-chart.js";
-import { usePieChart } from "./use-pie-chart.js";
 import { useCallback, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { PieChart } from "recharts";
@@ -16,22 +15,18 @@ const { PropsContext: DonutChartPropsContext, usePropsContext: useDonutChartProp
 *
 * @see https://yamada-ui.com/docs/components/donut-chart
 */
-const DonutChart = withContext(({ children, series = [], chartProps, tooltipProps, ...rest }) => {
-	const { getChartProps, getRootProps } = usePieChart(rest);
+const DonutChart = withContext(({ children, series = [], tooltipProps, ...rest }) => {
 	return /* @__PURE__ */ jsx(PolarChart, {
 		components: useMemo(() => [{
 			component: ChartDonut,
 			fallback: series.map((props, index) => /* @__PURE__ */ jsx(ChartDonut, { ...props }, index))
 		}], [series]),
-		render: (props) => /* @__PURE__ */ jsx(PieChart, { ...getChartProps({
-			...props,
-			...chartProps
-		}) }),
+		render: (props) => /* @__PURE__ */ jsx(PieChart, { ...props }),
 		tooltipProps: {
 			labelFormatter: useCallback(() => null, []),
 			...tooltipProps
 		},
-		...getRootProps(),
+		...rest,
 		children
 	});
 })();

package/dist/esm/components/chart/donut-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"donut-chart.js","names":["OriginalPieChart"],"sources":["../../../../src/components/chart/donut-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { PolarChartProps as OriginalPolarChartProps } from \"recharts/types/util/types\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { ChartTooltipProps } from \"./chart\"\nimport type { DonutChartStyle } from \"./donut-chart.style\"\nimport type { ChartDonutProps, PolarChartProps } from \"./polar-chart\"\nimport type { UsePieChartProps } from \"./use-pie-chart\"\nimport { useCallback, useMemo } from \"react\"\nimport { PieChart as OriginalPieChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { donutChartStyle } from \"./donut-chart.style\"\nimport { ChartDonut, PolarChart } from \"./polar-chart\"\nimport { usePieChart } from \"./use-pie-chart\"\n\nexport interface DonutChartProps<Y extends Dict = Dict>\n  extends\n    Omit<\n      PolarChartProps<Y>,\n      | \"angleAxisProps\"\n      | \"components\"\n      | \"gridProps\"\n      | \"nameKey\"\n      | \"pieProps\"\n      | \"radarProps\"\n      | \"radialProps\"\n      | \"radiusAxisProps\"\n      | \"render\"\n      | \"series\"\n      | \"withAngleAxis\"\n      | \"withGrid\"\n      | \"withRadiusAxis\"\n    >,\n    UsePieChartProps<Y>,\n    ThemeProps<DonutChartStyle> {\n  /***\n   * If provided, generate lines based on series.\n   */\n  series?: ChartDonutProps<Y>[]\n  /**\n   * Props for the polar chart component.\n   */\n  chartProps?: Omit<OriginalPolarChartProps, \"data\">\n}\n\nconst {\n  PropsContext: DonutChartPropsContext,\n  usePropsContext: useDonutChartPropsContext,\n  withContext,\n} = createComponent<DonutChartProps, DonutChartStyle>(\n  \"donut-chart\",\n  donutChartStyle,\n)\n\nexport { DonutChartPropsContext, useDonutChartPropsContext }\n\n/**\n * `DonutChart` is a component for drawing donut charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/donut-chart\n */\nexport const DonutChart = withContext<\"div\", DonutChartProps>(\n  <Y extends Dict>({\n    children,\n    series = [],\n    chartProps,\n    tooltipProps,\n    ...rest\n  }: DonutChartProps<Y>) => {\n    const { getChartProps, getRootProps } = usePieChart(rest)\n    const components = useMemo(\n      () => [\n        {\n          component: ChartDonut,\n          fallback: series.map((props, index) => (\n            <ChartDonut key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n    const labelFormatter = useCallback<\n      NonNullable<ChartTooltipProps[\"labelFormatter\"]>\n    >(() => null, [])\n\n    return (\n      <PolarChart\n        components={components}\n        render={(props) => (\n          <OriginalPieChart {...getChartProps({ ...props, ...chartProps })} />\n        )}\n        tooltipProps={{ labelFormatter, ...tooltipProps }}\n        {...getRootProps()}\n      >\n        {children}\n      </PolarChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: DonutChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;;;AA+CA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,gBACE,gBACF,eACA,gBACD;;;;;;AASD,MAAa,aAAa,aACP,EACf,UACA,SAAS,EAAE,EACX,YACA,cACA,GAAG,WACqB;CACxB,MAAM,EAAE,eAAe,iBAAiB,YAAY,KAAK;AAgBzD,QACE,oBAAC;EACC,YAjBe,cACX,CACJ;GACE,WAAW;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,cAAuB,GAAI,SAAX,MAAoB,CACrC;GACH,CACF,EACD,CAAC,OAAO,CACT;EAQG,SAAS,UACP,oBAACA,YAAiB,GAAI,cAAc;GAAE,GAAG;GAAO,GAAG;GAAY,CAAC,GAAI;EAEtE,cAAc;GAAE,gBAVG,kBAEf,MAAM,EAAE,CAAC;GAQmB,GAAG;GAAc;EACjD,GAAI,cAAc;EAEjB;GACU;EAGlB,EAAE"}
+{"version":3,"file":"donut-chart.js","names":["OriginalPieChart"],"sources":["../../../../src/components/chart/donut-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { ChartTooltipProps } from \"./chart\"\nimport type { DonutChartStyle } from \"./donut-chart.style\"\nimport type { ChartDonutProps, PolarChartProps } from \"./polar-chart\"\nimport { useCallback, useMemo } from \"react\"\nimport { PieChart as OriginalPieChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { donutChartStyle } from \"./donut-chart.style\"\nimport { ChartDonut, PolarChart } from \"./polar-chart\"\n\nexport interface DonutChartProps<Y extends Dict = Dict>\n  extends\n    Omit<PolarChartProps<Y>, \"components\" | \"nameKey\" | \"render\">,\n    ThemeProps<DonutChartStyle> {\n  /***\n   * If provided, generate lines based on series.\n   */\n  series?: ChartDonutProps<Y>[]\n}\n\nconst {\n  PropsContext: DonutChartPropsContext,\n  usePropsContext: useDonutChartPropsContext,\n  withContext,\n} = createComponent<DonutChartProps, DonutChartStyle>(\n  \"donut-chart\",\n  donutChartStyle,\n)\n\nexport { DonutChartPropsContext, useDonutChartPropsContext }\n\n/**\n * `DonutChart` is a component for drawing donut charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/donut-chart\n */\nexport const DonutChart = withContext<\"div\", DonutChartProps>(\n  <Y extends Dict>({\n    children,\n    series = [],\n    tooltipProps,\n    ...rest\n  }: DonutChartProps<Y>) => {\n    const components = useMemo(\n      () => [\n        {\n          component: ChartDonut,\n          fallback: series.map((props, index) => (\n            <ChartDonut key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n    const labelFormatter = useCallback<\n      NonNullable<ChartTooltipProps[\"labelFormatter\"]>\n    >(() => null, [])\n\n    return (\n      <PolarChart\n        components={components}\n        render={(props) => <OriginalPieChart {...props} />}\n        tooltipProps={{ labelFormatter, ...tooltipProps }}\n        {...rest}\n      >\n        {children}\n      </PolarChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: DonutChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;;AAwBA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,gBACE,gBACF,eACA,gBACD;;;;;;AASD,MAAa,aAAa,aACP,EACf,UACA,SAAS,EAAE,EACX,cACA,GAAG,WACqB;AAgBxB,QACE,oBAAC;EACC,YAjBe,cACX,CACJ;GACE,WAAW;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,cAAuB,GAAI,SAAX,MAAoB,CACrC;GACH,CACF,EACD,CAAC,OAAO,CACT;EAQG,SAAS,UAAU,oBAACA,YAAiB,GAAI,QAAS;EAClD,cAAc;GAAE,gBARG,kBAEf,MAAM,EAAE,CAAC;GAMmB,GAAG;GAAc;EACjD,GAAI;EAEH;GACU;EAGlB,EAAE"}

package/dist/esm/components/chart/index.js

@@ -1,31 +1,27 @@
+import { lineChartStyle } from "./line-chart.style.js";
 import { areaChartStyle } from "./area-chart.style.js";
 import { barChartStyle } from "./bar-chart.style.js";
 import { chartStyle } from "./chart.style.js";
 import { cartesianChartStyle } from "./cartesian-chart.style.js";
+import { composedChartStyle } from "./composed-chart.style.js";
 import { pieChartStyle } from "./pie-chart.style.js";
 import { donutChartStyle } from "./donut-chart.style.js";
-import { lineChartStyle } from "./line-chart.style.js";
 import { polarChartStyle } from "./polar-chart.style.js";
 import { radarChartStyle } from "./radar-chart.style.js";
 import { radialChartStyle } from "./radial-chart.style.js";
 import { ChartContext, useChart, useChartContext, useChartLabel, useChartLabelList, useChartLegend, useChartTooltip } from "./use-chart.js";
 import { Chart, ChartLabel, ChartLabelList, ChartLegend, ChartPropsContext, ChartTooltip, useChartPropsContext } from "./chart.js";
-import { useChartArea, useChartBar, useChartGrid, useChartLine, useChartReferenceLine, useChartXAxis, useChartYAxis } from "./use-cartesian-chart.js";
+import { useCartesianChart, useChartArea, useChartBar, useChartGrid, useChartLine, useChartReferenceLine, useChartXAxis, useChartYAxis } from "./use-cartesian-chart.js";
 import { CartesianChart, ChartArea, ChartBar, ChartGrid, ChartLine, ChartReferenceLine, ChartXAxis, ChartYAxis } from "./cartesian-chart.js";
-import { useAreaChart } from "./use-area-chart.js";
 import { area_chart_namespace_exports } from "./area-chart.namespace.js";
-import { useBarChart } from "./use-bar-chart.js";
 import { bar_chart_namespace_exports } from "./bar-chart.namespace.js";
-import { useAngleAxis, useChartPie, useChartPieLabel, useChartPieLabelLine, useChartRadar, useChartRadial, useChartSector, usePolarGrid, useRadiusAxis } from "./use-polar-chart.js";
+import { composed_chart_namespace_exports } from "./composed-chart.namespace.js";
+import { useAngleAxis, useChartPie, useChartPieLabel, useChartPieLabelLine, useChartRadar, useChartRadial, useChartSector, usePolarChart, usePolarGrid, useRadiusAxis } from "./use-polar-chart.js";
 import { ChartAngleAxis, ChartDonut, ChartPie, ChartPolarGrid, ChartRadar, ChartRadial, ChartRadiusAxis, PolarChart } from "./polar-chart.js";
-import { usePieChart } from "./use-pie-chart.js";
 import { donut_chart_namespace_exports } from "./donut-chart.namespace.js";
-import { useLineChart } from "./use-line-chart.js";
 import { line_chart_namespace_exports } from "./line-chart.namespace.js";
 import { pie_chart_namespace_exports } from "./pie-chart.namespace.js";
-import { useRadarChart } from "./use-radar-chart.js";
 import { radar_chart_namespace_exports } from "./radar-chart.namespace.js";
-import { useRadialChart } from "./use-radial-chart.js";
 import { radial_chart_namespace_exports } from "./radial-chart.namespace.js";
 
-export { area_chart_namespace_exports as AreaChart, bar_chart_namespace_exports as BarChart, CartesianChart, Chart, ChartAngleAxis, ChartArea, ChartBar, ChartContext, ChartDonut, ChartGrid, ChartLabel, ChartLabelList, ChartLegend, ChartLine, ChartPie, ChartPolarGrid, ChartPropsContext, ChartRadar, ChartRadial, ChartRadiusAxis, ChartReferenceLine, ChartTooltip, ChartXAxis, ChartYAxis, donut_chart_namespace_exports as DonutChart, line_chart_namespace_exports as LineChart, pie_chart_namespace_exports as PieChart, PolarChart, radar_chart_namespace_exports as RadarChart, radial_chart_namespace_exports as RadialChart, areaChartStyle, barChartStyle, cartesianChartStyle, chartStyle, donutChartStyle, lineChartStyle, pieChartStyle, polarChartStyle, radarChartStyle, radialChartStyle, useAngleAxis, useAreaChart, useBarChart, useChart, useChartArea, useChartBar, useChartContext, useChartGrid, useChartLabel, useChartLabelList, useChartLegend, useChartLine, useChartPie, useChartPieLabel, useChartPieLabelLine, useChartPropsContext, useChartRadar, useChartRadial, useChartReferenceLine, useChartSector, useChartTooltip, useChartXAxis, useChartYAxis, useLineChart, usePieChart, usePolarGrid, useRadarChart, useRadialChart, useRadiusAxis };
+export { area_chart_namespace_exports as AreaChart, bar_chart_namespace_exports as BarChart, CartesianChart, Chart, ChartAngleAxis, ChartArea, ChartBar, ChartContext, ChartDonut, ChartGrid, ChartLabel, ChartLabelList, ChartLegend, ChartLine, ChartPie, ChartPolarGrid, ChartPropsContext, ChartRadar, ChartRadial, ChartRadiusAxis, ChartReferenceLine, ChartTooltip, ChartXAxis, ChartYAxis, composed_chart_namespace_exports as ComposedChart, donut_chart_namespace_exports as DonutChart, line_chart_namespace_exports as LineChart, pie_chart_namespace_exports as PieChart, PolarChart, radar_chart_namespace_exports as RadarChart, radial_chart_namespace_exports as RadialChart, areaChartStyle, barChartStyle, cartesianChartStyle, chartStyle, composedChartStyle, donutChartStyle, lineChartStyle, pieChartStyle, polarChartStyle, radarChartStyle, radialChartStyle, useAngleAxis, useCartesianChart, useChart, useChartArea, useChartBar, useChartContext, useChartGrid, useChartLabel, useChartLabelList, useChartLegend, useChartLine, useChartPie, useChartPieLabel, useChartPieLabelLine, useChartPropsContext, useChartRadar, useChartRadial, useChartReferenceLine, useChartSector, useChartTooltip, useChartXAxis, useChartYAxis, usePolarChart, usePolarGrid, useRadiusAxis };

package/dist/esm/components/chart/line-chart.js

@@ -4,7 +4,6 @@ import { createComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { lineChartStyle } from "./line-chart.style.js";
 import { CartesianChart, ChartLine } from "./cartesian-chart.js";
-import { useLineChart } from "./use-line-chart.js";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { LineChart } from "recharts";
@@ -16,18 +15,14 @@ const { PropsContext: LineChartPropsContext, usePropsContext: useLineChartPropsC
 *
 * @see https://yamada-ui.com/docs/components/line-chart
 */
-const LineChart$1 = withContext(({ children, series = [], chartProps, ...rest }) => {
-	const { getChartProps, getRootProps } = useLineChart(rest);
+const LineChart$1 = withContext(({ children, series = [], ...rest }) => {
 	return /* @__PURE__ */ jsx(CartesianChart, {
 		components: useMemo(() => [{
 			component: ChartLine,
 			fallback: series.map((props, index) => /* @__PURE__ */ jsx(ChartLine, { ...props }, index))
 		}], [series]),
-		render: (props) => /* @__PURE__ */ jsx(LineChart, { ...getChartProps({
-			...props,
-			...chartProps
-		}) }),
-		...getRootProps(),
+		render: (props) => /* @__PURE__ */ jsx(LineChart, { ...props }),
+		...rest,
 		children
 	});
 })();

package/dist/esm/components/chart/line-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"line-chart.js","names":["LineChart","OriginalLineChart"],"sources":["../../../../src/components/chart/line-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CartesianChartProps as OriginalCartesianChartProps } from \"recharts/types/util/types\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { CartesianChartProps, ChartLineProps } from \"./cartesian-chart\"\nimport type { LineChartStyle } from \"./line-chart.style\"\nimport type { UseLineChartProps } from \"./use-line-chart\"\nimport { useMemo } from \"react\"\nimport { LineChart as OriginalLineChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { CartesianChart, ChartLine } from \"./cartesian-chart\"\nimport { lineChartStyle } from \"./line-chart.style\"\nimport { useLineChart } from \"./use-line-chart\"\n\nexport interface LineChartProps<Y extends Dict = Dict>\n  extends\n    Omit<\n      CartesianChartProps,\n      | \"areaFillOpacity\"\n      | \"areaProps\"\n      | \"barProps\"\n      | \"components\"\n      | \"render\"\n      | \"series\"\n    >,\n    UseLineChartProps<Y>,\n    ThemeProps<LineChartStyle> {\n  /**\n   * If provided, generate lines based on series.\n   */\n  series?: ChartLineProps<Y>[]\n  /**\n   * Props for the line chart component.\n   */\n  chartProps?: Omit<OriginalCartesianChartProps, \"data\">\n}\n\nconst {\n  PropsContext: LineChartPropsContext,\n  usePropsContext: useLineChartPropsContext,\n  withContext,\n} = createComponent<LineChartProps, LineChartStyle>(\n  \"line-chart\",\n  lineChartStyle,\n)\n\nexport { LineChartPropsContext, useLineChartPropsContext }\n\n/**\n * `LineChart` is a component for drawing line charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/line-chart\n */\nexport const LineChart = withContext<\"div\", LineChartProps>(\n  <Y extends Dict>({\n    children,\n    series = [],\n    chartProps,\n    ...rest\n  }: LineChartProps<Y>) => {\n    const { getChartProps, getRootProps } = useLineChart(rest)\n    const components = useMemo(\n      () => [\n        {\n          component: ChartLine,\n          fallback: series.map((props, index) => (\n            <ChartLine key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n\n    return (\n      <CartesianChart\n        components={components}\n        render={(props) => (\n          <OriginalLineChart {...getChartProps({ ...props, ...chartProps })} />\n        )}\n        {...getRootProps()}\n      >\n        {children}\n      </CartesianChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: LineChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;;;AAuCA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,gBACE,gBACF,cACA,eACD;;;;;;AASD,MAAaA,cAAY,aACN,EACf,UACA,SAAS,EAAE,EACX,YACA,GAAG,WACoB;CACvB,MAAM,EAAE,eAAe,iBAAiB,aAAa,KAAK;AAa1D,QACE,oBAAC;EACC,YAde,cACX,CACJ;GACE,WAAW;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,aAAsB,GAAI,SAAX,MAAoB,CACpC;GACH,CACF,EACD,CAAC,OAAO,CACT;EAKG,SAAS,UACP,oBAACC,aAAkB,GAAI,cAAc;GAAE,GAAG;GAAO,GAAG;GAAY,CAAC,GAAI;EAEvE,GAAI,cAAc;EAEjB;GACc;EAGtB,EAAE"}
+{"version":3,"file":"line-chart.js","names":["LineChart","OriginalLineChart"],"sources":["../../../../src/components/chart/line-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { CartesianChartProps, ChartLineProps } from \"./cartesian-chart\"\nimport type { LineChartStyle } from \"./line-chart.style\"\nimport { useMemo } from \"react\"\nimport { LineChart as OriginalLineChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { CartesianChart, ChartLine } from \"./cartesian-chart\"\nimport { lineChartStyle } from \"./line-chart.style\"\n\nexport interface LineChartProps<Y extends Dict = Dict>\n  extends\n    Omit<CartesianChartProps<Y>, \"components\" | \"render\">,\n    ThemeProps<LineChartStyle> {\n  /**\n   * If provided, generate lines based on series.\n   */\n  series?: ChartLineProps<Y>[]\n}\n\nconst {\n  PropsContext: LineChartPropsContext,\n  usePropsContext: useLineChartPropsContext,\n  withContext,\n} = createComponent<LineChartProps, LineChartStyle>(\n  \"line-chart\",\n  lineChartStyle,\n)\n\nexport { LineChartPropsContext, useLineChartPropsContext }\n\n/**\n * `LineChart` is a component for drawing line charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/line-chart\n */\nexport const LineChart = withContext<\"div\", LineChartProps>(\n  <Y extends Dict>({ children, series = [], ...rest }: LineChartProps<Y>) => {\n    const components = useMemo(\n      () => [\n        {\n          component: ChartLine,\n          fallback: series.map((props, index) => (\n            <ChartLine key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n\n    return (\n      <CartesianChart\n        components={components}\n        render={(props) => <OriginalLineChart {...props} />}\n        {...rest}\n      >\n        {children}\n      </CartesianChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: LineChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;;AAuBA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,gBACE,gBACF,cACA,eACD;;;;;;AASD,MAAaA,cAAY,aACN,EAAE,UAAU,SAAS,EAAE,EAAE,GAAG,WAA8B;AAazE,QACE,oBAAC;EACC,YAde,cACX,CACJ;GACE,WAAW;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,aAAsB,GAAI,SAAX,MAAoB,CACpC;GACH,CACF,EACD,CAAC,OAAO,CACT;EAKG,SAAS,UAAU,oBAACC,aAAkB,GAAI,QAAS;EACnD,GAAI;EAEH;GACc;EAGtB,EAAE"}

package/dist/esm/components/chart/pie-chart.js

@@ -4,7 +4,6 @@ import { createComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { pieChartStyle } from "./pie-chart.style.js";
 import { ChartPie, PolarChart } from "./polar-chart.js";
-import { usePieChart } from "./use-pie-chart.js";
 import { useCallback, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { PieChart } from "recharts";
@@ -16,22 +15,18 @@ const { PropsContext: PieChartPropsContext, usePropsContext: usePieChartPropsCon
 *
 * @see https://yamada-ui.com/docs/components/pie-chart
 */
-const PieChart$1 = withContext(({ children, series = [], chartProps, tooltipProps, ...rest }) => {
-	const { getChartProps, getRootProps } = usePieChart(rest);
+const PieChart$1 = withContext(({ children, series = [], tooltipProps, ...rest }) => {
 	return /* @__PURE__ */ jsx(PolarChart, {
 		components: useMemo(() => [{
 			component: ChartPie,
 			fallback: series.map((props, index) => /* @__PURE__ */ jsx(ChartPie, { ...props }, index))
 		}], [series]),
-		render: (props) => /* @__PURE__ */ jsx(PieChart, { ...getChartProps({
-			...props,
-			...chartProps
-		}) }),
+		render: (props) => /* @__PURE__ */ jsx(PieChart, { ...props }),
 		tooltipProps: {
 			labelFormatter: useCallback(() => null, []),
 			...tooltipProps
 		},
-		...getRootProps(),
+		...rest,
 		children
 	});
 })();

package/dist/esm/components/chart/pie-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"pie-chart.js","names":["PieChart","OriginalPieChart"],"sources":["../../../../src/components/chart/pie-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { PolarChartProps as OriginalPolarChartProps } from \"recharts/types/util/types\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { ChartTooltipProps } from \"./chart\"\nimport type { PieChartStyle } from \"./pie-chart.style\"\nimport type { ChartPieProps, PolarChartProps } from \"./polar-chart\"\nimport type { UsePieChartProps } from \"./use-pie-chart\"\nimport { useCallback, useMemo } from \"react\"\nimport { PieChart as OriginalPieChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { pieChartStyle } from \"./pie-chart.style\"\nimport { ChartPie, PolarChart } from \"./polar-chart\"\nimport { usePieChart } from \"./use-pie-chart\"\n\nexport interface PieChartProps<Y extends Dict = Dict>\n  extends\n    Omit<\n      PolarChartProps<Y>,\n      | \"angleAxisProps\"\n      | \"components\"\n      | \"donutProps\"\n      | \"gridProps\"\n      | \"nameKey\"\n      | \"radarProps\"\n      | \"radialProps\"\n      | \"radiusAxisProps\"\n      | \"render\"\n      | \"series\"\n      | \"withAngleAxis\"\n      | \"withGrid\"\n      | \"withRadiusAxis\"\n    >,\n    UsePieChartProps<Y>,\n    ThemeProps<PieChartStyle> {\n  /***\n   * If provided, generate lines based on series.\n   */\n  series?: ChartPieProps<Y>[]\n  /**\n   * Props for the polar chart component.\n   */\n  chartProps?: Omit<OriginalPolarChartProps, \"data\">\n}\n\nconst {\n  PropsContext: PieChartPropsContext,\n  usePropsContext: usePieChartPropsContext,\n  withContext,\n} = createComponent<PieChartProps, PieChartStyle>(\"pie-chart\", pieChartStyle)\n\nexport { PieChartPropsContext, usePieChartPropsContext }\n\n/**\n * `PieChart` is a component for drawing pie charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/pie-chart\n */\nexport const PieChart = withContext<\"div\", PieChartProps>(\n  <Y extends Dict>({\n    children,\n    series = [],\n    chartProps,\n    tooltipProps,\n    ...rest\n  }: PieChartProps<Y>) => {\n    const { getChartProps, getRootProps } = usePieChart(rest)\n    const components = useMemo(\n      () => [\n        {\n          component: ChartPie,\n          fallback: series.map((props, index) => (\n            <ChartPie key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n    const labelFormatter = useCallback<\n      NonNullable<ChartTooltipProps[\"labelFormatter\"]>\n    >(() => null, [])\n\n    return (\n      <PolarChart\n        components={components}\n        render={(props) => (\n          <OriginalPieChart {...getChartProps({ ...props, ...chartProps })} />\n        )}\n        tooltipProps={{ labelFormatter, ...tooltipProps }}\n        {...getRootProps()}\n      >\n        {children}\n      </PolarChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: PieChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;;;AA+CA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACE,gBAA8C,aAAa,cAAc;;;;;;AAS7E,MAAaA,aAAW,aACL,EACf,UACA,SAAS,EAAE,EACX,YACA,cACA,GAAG,WACmB;CACtB,MAAM,EAAE,eAAe,iBAAiB,YAAY,KAAK;AAgBzD,QACE,oBAAC;EACC,YAjBe,cACX,CACJ;GACE,WAAW;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,YAAqB,GAAI,SAAX,MAAoB,CACnC;GACH,CACF,EACD,CAAC,OAAO,CACT;EAQG,SAAS,UACP,oBAACC,YAAiB,GAAI,cAAc;GAAE,GAAG;GAAO,GAAG;GAAY,CAAC,GAAI;EAEtE,cAAc;GAAE,gBAVG,kBAEf,MAAM,EAAE,CAAC;GAQmB,GAAG;GAAc;EACjD,GAAI,cAAc;EAEjB;GACU;EAGlB,EAAE"}
+{"version":3,"file":"pie-chart.js","names":["PieChart","OriginalPieChart"],"sources":["../../../../src/components/chart/pie-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { ChartTooltipProps } from \"./chart\"\nimport type { PieChartStyle } from \"./pie-chart.style\"\nimport type { ChartPieProps, PolarChartProps } from \"./polar-chart\"\nimport { useCallback, useMemo } from \"react\"\nimport { PieChart as OriginalPieChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { pieChartStyle } from \"./pie-chart.style\"\nimport { ChartPie, PolarChart } from \"./polar-chart\"\n\nexport interface PieChartProps<Y extends Dict = Dict>\n  extends\n    Omit<PolarChartProps<Y>, \"components\" | \"nameKey\" | \"render\">,\n    ThemeProps<PieChartStyle> {\n  /***\n   * If provided, generate lines based on series.\n   */\n  series?: ChartPieProps<Y>[]\n}\n\nconst {\n  PropsContext: PieChartPropsContext,\n  usePropsContext: usePieChartPropsContext,\n  withContext,\n} = createComponent<PieChartProps, PieChartStyle>(\"pie-chart\", pieChartStyle)\n\nexport { PieChartPropsContext, usePieChartPropsContext }\n\n/**\n * `PieChart` is a component for drawing pie charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/pie-chart\n */\nexport const PieChart = withContext<\"div\", PieChartProps>(\n  <Y extends Dict>({\n    children,\n    series = [],\n    tooltipProps,\n    ...rest\n  }: PieChartProps<Y>) => {\n    const components = useMemo(\n      () => [\n        {\n          component: ChartPie,\n          fallback: series.map((props, index) => (\n            <ChartPie key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n    const labelFormatter = useCallback<\n      NonNullable<ChartTooltipProps[\"labelFormatter\"]>\n    >(() => null, [])\n\n    return (\n      <PolarChart\n        components={components}\n        render={(props) => <OriginalPieChart {...props} />}\n        tooltipProps={{ labelFormatter, ...tooltipProps }}\n        {...rest}\n      >\n        {children}\n      </PolarChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: PieChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;;AAwBA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACE,gBAA8C,aAAa,cAAc;;;;;;AAS7E,MAAaA,aAAW,aACL,EACf,UACA,SAAS,EAAE,EACX,cACA,GAAG,WACmB;AAgBtB,QACE,oBAAC;EACC,YAjBe,cACX,CACJ;GACE,WAAW;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,YAAqB,GAAI,SAAX,MAAoB,CACnC;GACH,CACF,EACD,CAAC,OAAO,CACT;EAQG,SAAS,UAAU,oBAACC,YAAiB,GAAI,QAAS;EAClD,cAAc;GAAE,gBARG,kBAEf,MAAM,EAAE,CAAC;GAMmB,GAAG;GAAc;EACjD,GAAI;EAEH;GACU;EAGlB,EAAE"}

package/dist/esm/components/chart/polar-chart.js

@@ -12,7 +12,7 @@ import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { polarChartStyle } from "./polar-chart.style.js";
 import { Chart, ChartLabelList, useChartComponentContext } from "./chart.js";
-import { useAngleAxis, useChartPie, useChartPieLabel, useChartPieLabelLine, useChartRadar, useChartRadial, useChartSector, usePolarGrid, useRadiusAxis } from "./use-polar-chart.js";
+import { useAngleAxis, useChartPie, useChartPieLabel, useChartPieLabelLine, useChartRadar, useChartRadial, useChartSector, usePolarChart, usePolarGrid, useRadiusAxis } from "./use-polar-chart.js";
 import { cloneElement, isValidElement, useCallback, useId, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Curve, Pie, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadialBar, Sector, Text } from "recharts";
@@ -20,7 +20,8 @@ import { Curve, Pie, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadialBa
 //#region src/components/chart/polar-chart.tsx
 const shouldForwardProp = createShouldForwardProp();
 const { component, ComponentContext, PropsContext: PolarChartPropsContext, useComponentContext, usePropsContext: usePolarChartPropsContext, withContext, withProvider, useSlotComponentProps } = createSlotComponent("polar-chart", polarChartStyle);
-const PolarChart = withProvider(({ components: componentsProp, nameKey, withAngleAxis = false, withGrid = false, withRadiusAxis = false, angleAxisProps, donutProps, gridProps, pieProps = donutProps, radarProps, radialProps, radiusAxisProps, sectorProps, ...rest }) => {
+const PolarChart = withProvider(({ components: componentsProp, nameKey, render, withAngleAxis = false, withGrid = false, withRadiusAxis = false, angleAxisProps, chartProps, donutProps, gridProps, pieProps = donutProps, radarProps, radialProps, radiusAxisProps, sectorProps, ...rest }) => {
+	const { getChartProps, getRootProps } = usePolarChart(rest);
 	const components = useMemo(() => [
 		{
 			component: ChartPolarGrid,
@@ -63,7 +64,11 @@ const PolarChart = withProvider(({ components: componentsProp, nameKey, withAngl
 		]),
 		children: /* @__PURE__ */ jsx(Chart, {
 			components,
-			...rest
+			render: (props) => render(getChartProps({
+				...props,
+				...chartProps
+			})),
+			...getRootProps()
 		})
 	});
 }, "root")(void 0, ({ activeDotFill, activeDotRadius, activeDotStroke, activeDotStrokeWidth, angleAxisLineStroke, angleAxisLineStrokeWidth, angleAxisTextColor, angleAxisTextFill, dotFill, dotRadius, dotStroke, dotStrokeWidth, gridStroke, inactiveLabelLineOpacity, inactiveLabelOpacity, inactiveRadarOpacity, inactiveSectorOpacity, labelColor, labelFill, labelLineStroke, labelLineStrokeWidth, radarColor, radarFillOpacity, radarStroke, radarStrokeWidth, radialBackgroundColor, radialBackgroundFill, radialBackgroundStroke, radialBackgroundStrokeWidth, radiusAxisLineStroke, radiusAxisLineStrokeWidth, radiusAxisTextColor, radiusAxisTextFill, sectorColor, sectorFill, sectorStroke, sectorStrokeWidth, ...rest }) => ({