@yamada-ui/charts 1.5.0-dev-20240825095648 → 1.5.0-dev-20240825115929

package/dist/chunk-EL6SJYI5.mjs

@@ -0,0 +1,200 @@
+"use client"
+import {
+  useRadialChart
+} from "./chunk-NUAKNL26.mjs";
+import {
+  useChartLabelList
+} from "./chunk-D5IRVU4W.mjs";
+import {
+  usePolarGrid
+} from "./chunk-3HQ2UC3I.mjs";
+import {
+  useChartTooltip
+} from "./chunk-VMBRDEM2.mjs";
+import {
+  useChartLegend
+} from "./chunk-TCSYDMC7.mjs";
+import {
+  ChartLegend
+} from "./chunk-EL2VTGFB.mjs";
+import {
+  ChartTooltip
+} from "./chunk-T5DNDBW6.mjs";
+import {
+  ChartProvider,
+  useChart
+} from "./chunk-3AOICU4Q.mjs";
+
+// src/radial-chart.tsx
+import {
+  forwardRef,
+  omitThemeProps,
+  ui,
+  useMultiComponentStyle
+} from "@yamada-ui/core";
+import { cx } from "@yamada-ui/utils";
+import { useMemo } from "react";
+import {
+  ResponsiveContainer,
+  RadialBarChart as RechartsRadialChart,
+  Legend,
+  Tooltip,
+  RadialBar,
+  LabelList,
+  PolarGrid
+} from "recharts";
+import { jsx, jsxs } from "react/jsx-runtime";
+var RadialChart = forwardRef((props, ref) => {
+  const [styles, mergedProps] = useMultiComponentStyle("RadialChart", props);
+  const {
+    className,
+    data,
+    dataKey,
+    chartProps,
+    radialBarProps,
+    containerProps,
+    withPolarGrid = false,
+    withTooltip = true,
+    withLegend = false,
+    tooltipProps,
+    tooltipAnimationDuration,
+    tooltipDataSource = "all",
+    valueFormatter,
+    unit,
+    legendProps,
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle,
+    fillOpacity,
+    labelListProps = [],
+    polarGridProps,
+    strokeDasharray,
+    ...rest
+  } = omitThemeProps(mergedProps);
+  const {
+    getRadialChartProps,
+    getRadialBarProps,
+    radialVars,
+    setHighlightedArea
+  } = useRadialChart({
+    data,
+    dataKey,
+    styles,
+    chartProps,
+    radialBarProps,
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle,
+    fillOpacity
+  });
+  const { getContainerProps } = useChart({ containerProps });
+  const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
+    tooltipProps,
+    tooltipAnimationDuration,
+    styles
+  });
+  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
+    legendProps
+  });
+  const { getLabelLineProps } = useChartLabelList({ labelListProps, styles });
+  const { getPolarGridProps } = usePolarGrid({
+    polarGridProps,
+    strokeDasharray,
+    styles
+  });
+  const labelLists = useMemo(
+    () => labelListProps.map((_, index) => /* @__PURE__ */ jsx(
+      LabelList,
+      {
+        ...getLabelLineProps({
+          index,
+          className: "ui-radial-chart__label-list"
+        })
+      },
+      `labelList-${index}`
+    )),
+    [getLabelLineProps, labelListProps]
+  );
+  return /* @__PURE__ */ jsx(ChartProvider, { value: { styles }, children: /* @__PURE__ */ jsx(
+    ui.div,
+    {
+      ref,
+      className: cx("ui-radial-chart", className),
+      var: radialVars,
+      __css: { maxW: "full", ...styles.container },
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        ResponsiveContainer,
+        {
+          ...getContainerProps({ className: "ui-radial-chart__container" }),
+          children: /* @__PURE__ */ jsxs(
+            RechartsRadialChart,
+            {
+              ...getRadialChartProps({
+                className: "ui-radial-chart__chart"
+              }),
+              children: [
+                withPolarGrid ? /* @__PURE__ */ jsx(
+                  PolarGrid,
+                  {
+                    ...getPolarGridProps({
+                      className: "ui-radial-chart__polar-grid"
+                    })
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  RadialBar,
+                  {
+                    ...getRadialBarProps({
+                      className: "ui-radial-chart__radial-bar"
+                    }),
+                    children: labelLists
+                  }
+                ),
+                withLegend ? /* @__PURE__ */ jsx(
+                  Legend,
+                  {
+                    content: ({ payload }) => /* @__PURE__ */ jsx(
+                      ChartLegend,
+                      {
+                        className: "ui-radial-chart__legend",
+                        payload,
+                        onHighlight: setHighlightedArea,
+                        ...computedLegendProps
+                      }
+                    ),
+                    ...getLegendProps()
+                  }
+                ) : null,
+                withTooltip ? /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    content: ({ payload }) => /* @__PURE__ */ jsx(
+                      ChartTooltip,
+                      {
+                        className: "ui-radial-chart__tooltip",
+                        isRadialChart: tooltipDataSource === "segment" ? true : false,
+                        payload: tooltipDataSource === "segment" ? payload : data,
+                        valueFormatter,
+                        unit,
+                        ...computedTooltipProps
+                      }
+                    ),
+                    ...getTooltipProps()
+                  }
+                ) : null
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+});
+
+export {
+  RadialChart
+};
+//# sourceMappingURL=chunk-EL6SJYI5.mjs.map

package/dist/chunk-EL6SJYI5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/radial-chart.tsx"],"sourcesContent":["import {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useMultiComponentStyle,\n  type HTMLUIProps,\n  type ThemeProps,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport {\n  ResponsiveContainer,\n  RadialBarChart as RechartsRadialChart,\n  Legend,\n  Tooltip,\n  RadialBar,\n  LabelList,\n  PolarGrid,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport type { TooltipDataSourceType } from \"./chart.types\"\nimport type { UseChartProps } from \"./use-chart\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport {\n  useChartLabelList,\n  type UseChartLabelListOptions,\n} from \"./use-chart-label-list\"\nimport { useChartLegend, type UseChartLegendProps } from \"./use-chart-legend\"\nimport {\n  useChartTooltip,\n  type UseChartTooltipOptions,\n} from \"./use-chart-tooltip\"\nimport type { UsePolarGridOptions } from \"./use-polar-grid\"\nimport { usePolarGrid } from \"./use-polar-grid\"\nimport { useRadialChart, type UseRadialChartOptions } from \"./use-radial-chart\"\n\ntype RadialChartOptions = {\n  /**\n   * If `true`, tooltip is visible.\n   *\n   * @default true\n   */\n  withTooltip?: boolean\n  /**\n   * If `true`, legend is visible.\n   *\n   * @default false\n   */\n  withLegend?: boolean\n  /**\n   * Determines whether polarGrid should be displayed.\n   *\n   * @default false\n   */\n  withPolarGrid?: boolean\n  /**\n   * Determines which data is displayed in the tooltip.\n   *\n   * @default 'all'\n   */\n  tooltipDataSource?: TooltipDataSourceType\n  /**\n   * Unit displayed next to each value in tooltip.\n   */\n  unit?: string\n}\n\nexport type RadialChartProps = HTMLUIProps<\"div\"> &\n  ThemeProps<\"radialChart\"> &\n  RadialChartOptions &\n  UseRadialChartOptions &\n  UseChartTooltipOptions &\n  UseChartLegendProps &\n  UseChartLabelListOptions &\n  UsePolarGridOptions &\n  UseChartProps\n\n/**\n * `RadialChart` is a component for drawing radial charts to compare multiple sets of data.\n *\n * @see Docs https://yamada-ui.com/components/feedback/radial-chart\n */\nexport const RadialChart = forwardRef<RadialChartProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useMultiComponentStyle(\"RadialChart\", props)\n  const {\n    className,\n    data,\n    dataKey,\n    chartProps,\n    radialBarProps,\n    containerProps,\n    withPolarGrid = false,\n    withTooltip = true,\n    withLegend = false,\n    tooltipProps,\n    tooltipAnimationDuration,\n    tooltipDataSource = \"all\",\n    valueFormatter,\n    unit,\n    legendProps,\n    innerRadius,\n    outerRadius,\n    startAngle,\n    endAngle,\n    fillOpacity,\n    labelListProps = [],\n    polarGridProps,\n    strokeDasharray,\n    ...rest\n  } = omitThemeProps(mergedProps)\n\n  const {\n    getRadialChartProps,\n    getRadialBarProps,\n    radialVars,\n    setHighlightedArea,\n  } = useRadialChart({\n    data,\n    dataKey,\n    styles,\n    chartProps,\n    radialBarProps,\n    innerRadius,\n    outerRadius,\n    startAngle,\n    endAngle,\n    fillOpacity,\n  })\n  const { getContainerProps } = useChart({ containerProps })\n  const { tooltipProps: computedTooltipProps, getTooltipProps } =\n    useChartTooltip({\n      tooltipProps,\n      tooltipAnimationDuration,\n      styles,\n    })\n  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({\n    legendProps,\n  })\n  const { getLabelLineProps } = useChartLabelList({ labelListProps, styles })\n  const { getPolarGridProps } = usePolarGrid({\n    polarGridProps,\n    strokeDasharray,\n    styles,\n  })\n\n  const labelLists = useMemo(\n    () =>\n      labelListProps.map((_, index) => (\n        <LabelList\n          key={`labelList-${index}`}\n          {...getLabelLineProps({\n            index,\n            className: \"ui-radial-chart__label-list\",\n          })}\n        />\n      )),\n    [getLabelLineProps, labelListProps],\n  )\n\n  return (\n    <ChartProvider value={{ styles }}>\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-radial-chart\", className)}\n        var={radialVars}\n        __css={{ maxW: \"full\", ...styles.container }}\n        {...rest}\n      >\n        <ResponsiveContainer\n          {...getContainerProps({ className: \"ui-radial-chart__container\" })}\n        >\n          <RechartsRadialChart\n            {...getRadialChartProps({\n              className: \"ui-radial-chart__chart\",\n            })}\n          >\n            {withPolarGrid ? (\n              <PolarGrid\n                {...getPolarGridProps({\n                  className: \"ui-radial-chart__polar-grid\",\n                })}\n              />\n            ) : null}\n\n            <RadialBar\n              {...getRadialBarProps({\n                className: \"ui-radial-chart__radial-bar\",\n              })}\n            >\n              {labelLists}\n            </RadialBar>\n\n            {withLegend ? (\n              <Legend\n                content={({ payload }) => (\n                  <ChartLegend\n                    className=\"ui-radial-chart__legend\"\n                    payload={payload}\n                    onHighlight={setHighlightedArea}\n                    {...computedLegendProps}\n                  />\n                )}\n                {...getLegendProps()}\n              />\n            ) : null}\n\n            {withTooltip ? (\n              <Tooltip\n                content={({ payload }) => (\n                  <ChartTooltip\n                    className=\"ui-radial-chart__tooltip\"\n                    isRadialChart={\n                      tooltipDataSource === \"segment\" ? true : false\n                    }\n                    payload={tooltipDataSource === \"segment\" ? payload : data}\n                    valueFormatter={valueFormatter}\n                    unit={unit}\n                    {...computedTooltipProps}\n                  />\n                )}\n                {...getTooltipProps()}\n              />\n            ) : null}\n          </RechartsRadialChart>\n        </ResponsiveContainer>\n      </ui.div>\n    </ChartProvider>\n  )\n})\n"],"mappings":"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","names":[]}

package/dist/{chunk-LF3ENX7Z.mjs → chunk-FQTDUZK2.mjs}

@@ -1,23 +1,26 @@
 "use client"
 import {
   useRadarChart
-} from "./chunk-LHW3WK3C.mjs";
+} from "./chunk-AJYZ7MDC.mjs";
 import {
-  useChartLegend
-} from "./chunk-5Q6O726L.mjs";
+  usePolarGrid
+} from "./chunk-3HQ2UC3I.mjs";
 import {
   useChartTooltip
-} from "./chunk-AOGTJ4EN.mjs";
+} from "./chunk-VMBRDEM2.mjs";
+import {
+  useChartLegend
+} from "./chunk-TCSYDMC7.mjs";
 import {
   ChartLegend
-} from "./chunk-DGOXJ373.mjs";
+} from "./chunk-EL2VTGFB.mjs";
 import {
   ChartTooltip
-} from "./chunk-MT5JI4OR.mjs";
+} from "./chunk-T5DNDBW6.mjs";
 import {
   ChartProvider,
   useChart
-} from "./chunk-STBYN5JW.mjs";
+} from "./chunk-3AOICU4Q.mjs";
 
 // src/radar-chart.tsx
 import {
@@ -76,7 +79,6 @@ var RadarChart = forwardRef((props, ref) => {
   const {
     getRadarProps,
     getRadarChartProps,
-    getPolarGridProps,
     getPolarAngleAxisProps,
     getPolarRadiusAxisProps,
     radarVars,
@@ -87,7 +89,6 @@ var RadarChart = forwardRef((props, ref) => {
     dataKey,
     radarProps,
     chartProps,
-    polarGridProps,
     polarAngleAxisProps,
     polarAngleAxisTickProps,
     polarRadiusAxisProps,
@@ -98,7 +99,6 @@ var RadarChart = forwardRef((props, ref) => {
     fillOpacity,
     polarAngleAxisTickFormatter,
     polarRadiusAxisTickFormatter,
-    strokeDasharray,
     styles
   });
   const { getContainerProps } = useChart({ containerProps });
@@ -110,6 +110,11 @@ var RadarChart = forwardRef((props, ref) => {
   const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
     legendProps
   });
+  const { getPolarGridProps } = usePolarGrid({
+    polarGridProps,
+    strokeDasharray,
+    styles
+  });
   const radars = useMemo(
     () => series.map(({ dataKey: dataKey2 }, index) => /* @__PURE__ */ jsx(
       Radar,
@@ -206,4 +211,4 @@ var RadarChart = forwardRef((props, ref) => {
 export {
   RadarChart
 };
-//# sourceMappingURL=chunk-LF3ENX7Z.mjs.map
+//# sourceMappingURL=chunk-FQTDUZK2.mjs.map

package/dist/chunk-FQTDUZK2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/radar-chart.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\nimport {\n  ResponsiveContainer,\n  RadarChart as ReChartsRadarChart,\n  PolarGrid,\n  PolarAngleAxis,\n  PolarRadiusAxis,\n  Radar,\n  Tooltip,\n  Legend,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport type { UseChartProps } from \"./use-chart\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport type { UseChartLegendProps } from \"./use-chart-legend\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport type { UseChartTooltipOptions } from \"./use-chart-tooltip\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\nimport { usePolarGrid, type UsePolarGridOptions } from \"./use-polar-grid\"\nimport type { UseRadarChartOptions } from \"./use-radar-chart\"\nimport { useRadarChart } from \"./use-radar-chart\"\n\ntype RadarChartOptions = {\n  /**\n   * If `true`, tooltip is visible.\n   *\n   * @default true\n   */\n  withTooltip?: boolean\n  /**\n   * If `true`, legend is visible.\n   *\n   * @default false\n   */\n  withLegend?: boolean\n  /**\n   * Determines whether polarGrid should be displayed.\n   *\n   * @default true\n   */\n  withPolarGrid?: boolean\n  /**\n   * Determines whether polarAngleAxis should be displayed.\n   *\n   * @default true\n   */\n  withPolarAngleAxis?: boolean\n  /**\n   * Determines whether polarRadiusAxis should be displayed.\n   *\n   * @default false\n   */\n  withPolarRadiusAxis?: boolean\n  /**\n   * Unit displayed next to each tick in y-axis.\n   */\n  unit?: string\n}\n\nexport type RadarChartProps = HTMLUIProps<\"div\"> &\n  ThemeProps<\"RadarChart\"> &\n  RadarChartOptions &\n  UseChartProps &\n  Omit<UseChartTooltipOptions, \"labelFormatter\"> &\n  UseChartLegendProps &\n  UsePolarGridOptions &\n  UseRadarChartOptions\n\n/**\n * `RadarChart` is a component for drawing radar charts to compare multiple sets of data.\n *\n * @see Docs https://yamada-ui.com/components/feedback/radar-chart\n */\nexport const RadarChart = forwardRef<RadarChartProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useMultiComponentStyle(\"RadarChart\", props)\n  const {\n    className,\n    data,\n    series,\n    dataKey,\n    radarProps,\n    chartProps,\n    polarGridProps,\n    polarAngleAxisProps,\n    polarAngleAxisTickProps,\n    polarRadiusAxisProps,\n    polarRadiusAxisTickProps,\n    containerProps,\n    tooltipProps,\n    legendProps,\n    tooltipAnimationDuration,\n    unit,\n    valueFormatter,\n    polarAngleAxisTickFormatter,\n    polarRadiusAxisTickFormatter,\n    strokeDasharray,\n    withDots,\n    withActiveDots,\n    strokeWidth,\n    fillOpacity,\n    withTooltip = true,\n    withLegend = false,\n    withPolarGrid = true,\n    withPolarAngleAxis = true,\n    withPolarRadiusAxis = false,\n    ...rest\n  } = omitThemeProps(mergedProps)\n\n  const {\n    getRadarProps,\n    getRadarChartProps,\n    getPolarAngleAxisProps,\n    getPolarRadiusAxisProps,\n    radarVars,\n    setHighlightedArea,\n  } = useRadarChart({\n    data,\n    series,\n    dataKey,\n    radarProps,\n    chartProps,\n    polarAngleAxisProps,\n    polarAngleAxisTickProps,\n    polarRadiusAxisProps,\n    polarRadiusAxisTickProps,\n    withDots,\n    withActiveDots,\n    strokeWidth,\n    fillOpacity,\n    polarAngleAxisTickFormatter,\n    polarRadiusAxisTickFormatter,\n    styles,\n  })\n  const { getContainerProps } = useChart({ containerProps })\n  const { tooltipProps: computedTooltipProps, getTooltipProps } =\n    useChartTooltip({\n      tooltipProps,\n      tooltipAnimationDuration,\n      styles,\n    })\n  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({\n    legendProps,\n  })\n  const { getPolarGridProps } = usePolarGrid({\n    polarGridProps,\n    strokeDasharray,\n    styles,\n  })\n\n  const radars = useMemo(\n    () =>\n      series.map(({ dataKey }, index) => (\n        <Radar\n          key={`radar-${dataKey}`}\n          {...getRadarProps({ index, className: \"ui-radar-chart__radar\" })}\n        />\n      )),\n    [getRadarProps, series],\n  )\n\n  return (\n    <ChartProvider value={{ styles }}>\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-radar-chart\", className)}\n        var={radarVars}\n        __css={{ maxW: \"full\", ...styles.container }}\n        {...rest}\n      >\n        <ResponsiveContainer\n          {...getContainerProps({ className: \"ui-radar-chart__container\" })}\n        >\n          <ReChartsRadarChart\n            {...getRadarChartProps({ className: \"ui-radar-chart__chart\" })}\n          >\n            {withPolarGrid ? (\n              <PolarGrid\n                {...getPolarGridProps({\n                  className: \"ui-radar-chart__polar-grid\",\n                })}\n              />\n            ) : null}\n            {withPolarAngleAxis ? (\n              <PolarAngleAxis\n                {...getPolarAngleAxisProps({\n                  className: \"ui-radar-chart__polar-angle-axis\",\n                })}\n              />\n            ) : null}\n            {withPolarRadiusAxis ? (\n              <PolarRadiusAxis\n                {...getPolarRadiusAxisProps({\n                  className: \"ui-radar-chart__polar-radius-axis\",\n                })}\n              />\n            ) : null}\n\n            {withLegend ? (\n              <Legend\n                content={({ payload }) => (\n                  <ChartLegend\n                    className=\"ui-area-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-line-chart__tooltip\"\n                    label={label}\n                    payload={payload}\n                    valueFormatter={valueFormatter}\n                    unit={unit}\n                    {...computedTooltipProps}\n                  />\n                )}\n                {...getTooltipProps()}\n              />\n            ) : null}\n\n            {radars}\n          </ReChartsRadarChart>\n        </ResponsiveContainer>\n      </ui.div>\n    </ChartProvider>\n  )\n})\n"],"mappings":"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","names":["dataKey"]}

package/dist/{chunk-Q7CCSKX3.mjs → chunk-JTQ5QCML.mjs}

@@ -1,13 +1,13 @@
 "use client"
 import {
   referenceLineProperties
-} from "./chunk-F34FV5DY.mjs";
+} from "./chunk-6YUJLLGN.mjs";
 import {
   getComponentProps
 } from "./chunk-QL3DB7OJ.mjs";
 
 // src/use-chart-reference-line.ts
-import { getCSS, useTheme } from "@yamada-ui/core";
+import { getCSS, getVar, useTheme } from "@yamada-ui/core";
 import { isObject, cx } from "@yamada-ui/utils";
 import { useCallback, useMemo } from "react";
 var useChartReferenceLine = ({
@@ -22,7 +22,7 @@ var useChartReferenceLine = ({
         [props, referenceLineProperties],
         styleClassName
       )(theme);
-      const color = `var(--ui-reference-line-${index})`;
+      const color = getVar(`reference-line-${index}`)(theme);
       const label = {
         value: labelProp,
         fill: color,
@@ -53,4 +53,4 @@ var useChartReferenceLine = ({
 export {
   useChartReferenceLine
 };
-//# sourceMappingURL=chunk-Q7CCSKX3.mjs.map
+//# sourceMappingURL=chunk-JTQ5QCML.mjs.map

package/dist/chunk-JTQ5QCML.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-chart-reference-line.ts"],"sourcesContent":["import { getCSS, getVar, useTheme } from \"@yamada-ui/core\"\nimport type { CSSUIObject } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport { isObject, cx } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport { getComponentProps } from \"./chart-utils\"\nimport type { ReferenceLineProps, RequiredChartPropGetter } from \"./chart.types\"\nimport { referenceLineProperties } from \"./rechart-properties\"\n\nexport type UseChartReferenceLineOptions = {\n  /**\n   * Reference lines that should be displayed on the chart.\n   */\n  referenceLineProps?: ReferenceLineProps[]\n}\n\ntype UseChartReferenceLineProps = UseChartReferenceLineOptions & {\n  styles: Dict<CSSUIObject>\n}\n\nexport const useChartReferenceLine = ({\n  referenceLineProps = [],\n  styles,\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          value: labelProp as string,\n          fill: color,\n          position: \"insideBottomLeft\",\n          ...(isObject(labelProp) ? labelProp : {}),\n        }\n\n        return { propClassName, color, label, ...rest }\n      }),\n    [referenceLineProps, styleClassName, theme],\n  )\n\n  const getReferenceLineProps: RequiredChartPropGetter<\n    \"div\",\n    {\n      index: number\n    },\n    Omit<Recharts.ReferenceLineProps, \"ref\">\n  > = useCallback(\n    ({ index, className, ...props }, ref = null) => {\n      const { propClassName, color, label, ...rest } = propList[index]\n\n      return {\n        ref,\n        className: cx(className, propClassName),\n        stroke: color,\n        label,\n        ...(props as Recharts.ReferenceLineProps),\n        ...rest,\n      }\n    },\n    [propList],\n  )\n\n  return { getReferenceLineProps }\n}\n"],"mappings":";;;;;;;;;AAAA,SAAS,QAAQ,QAAQ,gBAAgB;AAGzC,SAAS,UAAU,UAAU;AAC7B,SAAS,aAAa,eAAe;AAiB9B,IAAM,wBAAwB,CAAC;AAAA,EACpC,qBAAqB,CAAC;AAAA,EACtB;AACF,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,OAAO;AAAA,QACP,MAAM;AAAA,QACN,UAAU;AAAA,QACV,GAAI,SAAS,SAAS,IAAI,YAAY,CAAC;AAAA,MACzC;AAEA,aAAO,EAAE,eAAe,OAAO,OAAO,GAAG,KAAK;AAAA,IAChD,CAAC;AAAA,IACH,CAAC,oBAAoB,gBAAgB,KAAK;AAAA,EAC5C;AAEA,QAAM,wBAMF;AAAA,IACF,CAAC,EAAE,OAAO,WAAW,GAAG,MAAM,GAAG,MAAM,SAAS;AAC9C,YAAM,EAAE,eAAe,OAAO,OAAO,GAAG,KAAK,IAAI,SAAS,KAAK;AAE/D,aAAO;AAAA,QACL;AAAA,QACA,WAAW,GAAG,WAAW,aAAa;AAAA,QACtC,QAAQ;AAAA,QACR;AAAA,QACA,GAAI;AAAA,QACJ,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SAAO,EAAE,sBAAsB;AACjC;","names":[]}

package/dist/{chunk-7HKRIEAT.mjs → chunk-KBZKJSZJ.mjs}

@@ -1,26 +1,26 @@
 "use client"
 import {
   useChartLabel
-} from "./chunk-5XSML5U3.mjs";
+} from "./chunk-KVE6VXTJ.mjs";
 import {
   usePieChart
-} from "./chunk-IF4O4CBA.mjs";
-import {
-  useChartLegend
-} from "./chunk-5Q6O726L.mjs";
+} from "./chunk-PSPBUPC7.mjs";
 import {
   useChartTooltip
-} from "./chunk-AOGTJ4EN.mjs";
+} from "./chunk-VMBRDEM2.mjs";
+import {
+  useChartLegend
+} from "./chunk-TCSYDMC7.mjs";
 import {
   ChartLegend
-} from "./chunk-DGOXJ373.mjs";
+} from "./chunk-EL2VTGFB.mjs";
 import {
   ChartTooltip
-} from "./chunk-MT5JI4OR.mjs";
+} from "./chunk-T5DNDBW6.mjs";
 import {
   ChartProvider,
   useChart
-} from "./chunk-STBYN5JW.mjs";
+} from "./chunk-3AOICU4Q.mjs";
 
 // src/donut-chart.tsx
 import {
@@ -194,4 +194,4 @@ var DonutChart = forwardRef((props, ref) => {
 export {
   DonutChart
 };
-//# sourceMappingURL=chunk-7HKRIEAT.mjs.map
+//# sourceMappingURL=chunk-KBZKJSZJ.mjs.map

package/dist/{chunk-5XSML5U3.mjs → chunk-KVE6VXTJ.mjs}

@@ -1,7 +1,7 @@
 "use client"
 import {
   labelProperties
-} from "./chunk-F34FV5DY.mjs";
+} from "./chunk-6YUJLLGN.mjs";
 import {
   getComponentProps
 } from "./chunk-QL3DB7OJ.mjs";
@@ -34,4 +34,4 @@ var useChartLabel = ({ styles, ...rest }) => {
 export {
   useChartLabel
 };
-//# sourceMappingURL=chunk-5XSML5U3.mjs.map
+//# sourceMappingURL=chunk-KVE6VXTJ.mjs.map

package/dist/{chunk-PNE3JG54.mjs → chunk-MGTMKKSH.mjs}

@@ -1,14 +1,16 @@
 "use client"
 
 // src/area-chart-split.tsx
+import { getVar, useTheme } from "@yamada-ui/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var AreaSplit = ({ offset, id, fillOpacity }) => {
+  const { theme } = useTheme();
   return /* @__PURE__ */ jsxs("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
     /* @__PURE__ */ jsx(
       "stop",
       {
         offset,
-        stopColor: "var(--ui-area-split-0)",
+        stopColor: getVar(`area-split-0`)(theme),
         stopOpacity: fillOpacity != null ? fillOpacity : 0.4
       }
     ),
@@ -16,7 +18,7 @@ var AreaSplit = ({ offset, id, fillOpacity }) => {
       "stop",
       {
         offset,
-        stopColor: "var(--ui-area-split-1)",
+        stopColor: getVar(`area-split-1`)(theme),
         stopOpacity: fillOpacity != null ? fillOpacity : 0.4
       }
     )
@@ -26,4 +28,4 @@ var AreaSplit = ({ offset, id, fillOpacity }) => {
 export {
   AreaSplit
 };
-//# sourceMappingURL=chunk-PNE3JG54.mjs.map
+//# sourceMappingURL=chunk-MGTMKKSH.mjs.map

package/dist/chunk-MGTMKKSH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/area-chart-split.tsx"],"sourcesContent":["import { getVar, useTheme } from \"@yamada-ui/core\"\n\nexport type AreaSplitProps = {\n  offset: number\n  id?: string\n  fillOpacity: number | string | undefined\n}\n\nexport const AreaSplit = ({ offset, id, fillOpacity }: AreaSplitProps) => {\n  const { theme } = useTheme()\n\n  return (\n    <linearGradient id={id} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n      <stop\n        offset={offset}\n        stopColor={getVar(`area-split-0`)(theme)}\n        stopOpacity={fillOpacity ?? 0.4}\n      />\n      <stop\n        offset={offset}\n        stopColor={getVar(`area-split-1`)(theme)}\n        stopOpacity={fillOpacity ?? 0.4}\n      />\n    </linearGradient>\n  )\n}\n"],"mappings":";;;AAAA,SAAS,QAAQ,gBAAgB;AAY7B,SACE,KADF;AAJG,IAAM,YAAY,CAAC,EAAE,QAAQ,IAAI,YAAY,MAAsB;AACxE,QAAM,EAAE,MAAM,IAAI,SAAS;AAE3B,SACE,qBAAC,oBAAe,IAAQ,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,KAC9C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,OAAO,cAAc,EAAE,KAAK;AAAA,QACvC,aAAa,oCAAe;AAAA;AAAA,IAC9B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,OAAO,cAAc,EAAE,KAAK;AAAA,QACvC,aAAa,oCAAe;AAAA;AAAA,IAC9B;AAAA,KACF;AAEJ;","names":[]}

package/dist/chunk-NUAKNL26.mjs

@@ -0,0 +1,155 @@
+"use client"
+import {
+  radialBarProperties,
+  radialChartProperties
+} from "./chunk-6YUJLLGN.mjs";
+import {
+  getClassName,
+  getComponentProps
+} from "./chunk-QL3DB7OJ.mjs";
+
+// src/use-radial-chart.ts
+import { getVar, useTheme } from "@yamada-ui/core";
+import { cx } from "@yamada-ui/utils";
+import { useCallback, useMemo, useState } from "react";
+var useRadialChart = ({
+  data: dataProp,
+  dataKey = "value",
+  innerRadius = "10%",
+  outerRadius = "80%",
+  startAngle = 180,
+  endAngle = 0,
+  fillOpacity = 1,
+  styles,
+  ...rest
+}) => {
+  var _a;
+  const { theme } = useTheme();
+  const [highlightedArea, setHighlightedArea] = useState(null);
+  const shouldHighlight = highlightedArea !== null;
+  const {
+    background: backgroundProps = {},
+    dimRadialBar: dimRadialBarProps = {},
+    ...computedRadialBarProps
+  } = (_a = rest.radialBarProps) != null ? _a : {};
+  const radialVars = useMemo(
+    () => dataProp.map(({ color }, index) => ({
+      name: `radial-bar-${index}`,
+      token: "colors",
+      value: color != null ? color : "transparent"
+    })),
+    [dataProp]
+  );
+  const dimRadialBarClassName = useMemo(() => {
+    const resolvedDimRadialBar = {
+      fillOpacity: 0.3,
+      strokeOpacity: 0,
+      ...dimRadialBarProps
+    };
+    return getClassName(resolvedDimRadialBar)(theme);
+  }, [dimRadialBarProps, theme]);
+  const [chartProps, chartClassName] = useMemo(
+    () => {
+      var _a2;
+      return getComponentProps(
+        [(_a2 = rest.chartProps) != null ? _a2 : {}, radialChartProperties],
+        styles.chart
+      )(theme);
+    },
+    [rest.chartProps, styles.chart, theme]
+  );
+  const background = useMemo(
+    () => getComponentProps(
+      [backgroundProps, radialBarProperties],
+      styles.background
+    )(theme, true),
+    [backgroundProps, styles.background, theme]
+  );
+  const [radialBarProps, radialBarClassName] = useMemo(
+    () => getComponentProps(
+      [computedRadialBarProps != null ? computedRadialBarProps : {}, radialBarProperties],
+      styles.radialBar
+    )(theme),
+    [computedRadialBarProps, styles.radialBar, theme]
+  );
+  const data = useMemo(
+    () => dataProp.map((props, index) => {
+      const {
+        name,
+        value,
+        color,
+        dimRadialBar = {},
+        ...computedProps
+      } = props;
+      const dimmed = shouldHighlight && highlightedArea !== name;
+      const resolvedProps = {
+        ...computedProps,
+        ...dimmed ? dimRadialBar : { fillOpacity }
+      };
+      const className = getClassName(
+        resolvedProps,
+        dimmed ? dimRadialBarClassName : void 0
+      )(theme);
+      return {
+        className,
+        fill: getVar(`radial-bar-${index}`)(theme),
+        name,
+        value,
+        color
+      };
+    }),
+    [
+      dataProp,
+      dimRadialBarClassName,
+      fillOpacity,
+      highlightedArea,
+      shouldHighlight,
+      theme
+    ]
+  );
+  const getRadialChartProps = useCallback(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      className: cx(className, chartClassName),
+      data,
+      innerRadius,
+      outerRadius,
+      startAngle,
+      endAngle,
+      ...props,
+      ...chartProps
+    }),
+    [
+      chartClassName,
+      chartProps,
+      data,
+      endAngle,
+      innerRadius,
+      outerRadius,
+      startAngle
+    ]
+  );
+  const getRadialBarProps = useCallback(
+    ({ className, ...props }, ref = null) => ({
+      ref,
+      className: cx(className, radialBarClassName),
+      dataKey,
+      isAnimationActive: false,
+      background,
+      ...props,
+      ...radialBarProps
+    }),
+    [background, dataKey, radialBarClassName, radialBarProps]
+  );
+  return {
+    radialVars,
+    setHighlightedArea,
+    getRadialChartProps,
+    getRadialBarProps
+  };
+};
+
+export {
+  useRadialChart
+};
+//# sourceMappingURL=chunk-NUAKNL26.mjs.map

package/dist/chunk-NUAKNL26.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-radial-chart.ts"],"sourcesContent":["import type { CSSUIProps, CSSUIObject } from \"@yamada-ui/core\"\nimport { getVar, useTheme } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport type { ComponentPropsWithoutRef } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport { getClassName, getComponentProps } from \"./chart-utils\"\nimport type {\n  ChartPropGetter,\n  RadialBarProps,\n  RadialChartProps,\n  RequiredChartPropGetter,\n} from \"./chart.types\"\nimport {\n  radialBarProperties,\n  radialChartProperties,\n} from \"./rechart-properties\"\n\nexport type UseRadialChartOptions = {\n  /**\n   * Chart data.\n   */\n  data: Dict[]\n  /**\n   * The key of a group of data which should be unique in an chart.\n   *\n   * @default 'value'\n   */\n  dataKey?: string\n  /**\n   * Props passed down to recharts `RadialBarChart` component.\n   */\n  chartProps?: RadialChartProps\n  /**\n   * Props for the radialBar.\n   */\n  radialBarProps?: Partial<RadialBarProps>\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 '10%'\n   */\n  innerRadius?: number | string\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 angle at which chart starts.\n   *\n   * @default 180\n   */\n  startAngle?: number\n  /**\n   * Controls angle at which chart ends.\n   *\n   * @default 0\n   */\n  endAngle?: number\n  /**\n   * Controls fill opacity of all pies.\n   *\n   * @default 1\n   */\n  fillOpacity?: number | [number, number]\n}\n\ntype UseRadialChartProps = UseRadialChartOptions & {\n  styles: Dict<CSSUIObject>\n}\n\nexport const useRadialChart = ({\n  data: dataProp,\n  dataKey = \"value\",\n  innerRadius = \"10%\",\n  outerRadius = \"80%\",\n  startAngle = 180,\n  endAngle = 0,\n  fillOpacity = 1,\n  styles,\n  ...rest\n}: UseRadialChartProps) => {\n  const { theme } = useTheme()\n  const [highlightedArea, setHighlightedArea] = useState<string | null>(null)\n  const shouldHighlight = highlightedArea !== null\n  const {\n    background: backgroundProps = {},\n    dimRadialBar: dimRadialBarProps = {},\n    ...computedRadialBarProps\n  } = rest.radialBarProps ?? {}\n\n  const radialVars: CSSUIProps[\"var\"] = useMemo(\n    () =>\n      dataProp.map(({ color }, index) => ({\n        name: `radial-bar-${index}`,\n        token: \"colors\",\n        value: color ?? \"transparent\",\n      })),\n    [dataProp],\n  )\n\n  const dimRadialBarClassName = useMemo(() => {\n    const resolvedDimRadialBar = {\n      fillOpacity: 0.3,\n      strokeOpacity: 0,\n      ...dimRadialBarProps,\n    }\n\n    return getClassName(resolvedDimRadialBar)(theme)\n  }, [dimRadialBarProps, theme])\n\n  const [chartProps, chartClassName] = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [rest.chartProps ?? {}, radialChartProperties],\n        styles.chart,\n      )(theme),\n    [rest.chartProps, styles.chart, theme],\n  )\n\n  const background = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [backgroundProps, radialBarProperties],\n        styles.background,\n      )(theme, true),\n    [backgroundProps, styles.background, theme],\n  )\n\n  const [radialBarProps, radialBarClassName] = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [computedRadialBarProps ?? {}, radialBarProperties],\n        styles.radialBar,\n      )(theme),\n    [computedRadialBarProps, styles.radialBar, theme],\n  )\n\n  const data = useMemo(\n    () =>\n      dataProp.map((props, index) => {\n        const {\n          name,\n          value,\n          color,\n          dimRadialBar = {},\n          ...computedProps\n        } = props\n        const dimmed = shouldHighlight && highlightedArea !== name\n        const resolvedProps = {\n          ...computedProps,\n          ...(dimmed ? dimRadialBar : { fillOpacity }),\n        }\n\n        const className = getClassName(\n          resolvedProps,\n          dimmed ? dimRadialBarClassName : undefined,\n        )(theme)\n\n        return {\n          className,\n          fill: getVar(`radial-bar-${index}`)(theme),\n          name,\n          value,\n          color,\n        }\n      }),\n    [\n      dataProp,\n      dimRadialBarClassName,\n      fillOpacity,\n      highlightedArea,\n      shouldHighlight,\n      theme,\n    ],\n  )\n\n  const getRadialChartProps: ChartPropGetter<\n    \"div\",\n    ComponentPropsWithoutRef<typeof Recharts.RadialBarChart>,\n    ComponentPropsWithoutRef<typeof Recharts.RadialBarChart>\n  > = useCallback(\n    ({ className, ...props } = {}, ref = null) => ({\n      ref,\n      className: cx(className, chartClassName),\n      data,\n      innerRadius,\n      outerRadius,\n      startAngle,\n      endAngle,\n      ...props,\n      ...chartProps,\n    }),\n    [\n      chartClassName,\n      chartProps,\n      data,\n      endAngle,\n      innerRadius,\n      outerRadius,\n      startAngle,\n    ],\n  )\n\n  const getRadialBarProps: RequiredChartPropGetter<\n    \"div\",\n    Partial<Recharts.RadialBarProps>,\n    Omit<Recharts.RadialBarProps, \"ref\">\n  > = useCallback(\n    ({ className, ...props }, ref = null) => ({\n      ref,\n      className: cx(className, radialBarClassName),\n      dataKey,\n      isAnimationActive: false,\n      background,\n      ...props,\n      ...radialBarProps,\n    }),\n    [background, dataKey, radialBarClassName, radialBarProps],\n  )\n\n  return {\n    radialVars,\n    setHighlightedArea,\n    getRadialChartProps,\n    getRadialBarProps,\n  }\n}\n\nexport type UseRadialChartReturn = ReturnType<typeof useRadialChart>\n"],"mappings":"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","names":["_a"]}