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

package/dist/{chunk-C3ZYUDXE.mjs → chunk-QPMW56KA.mjs}

@@ -6,31 +6,31 @@ import {
 } from "./chunk-6YUJLLGN.mjs";
 import {
   getComponentProps
-} from "./chunk-QL3DB7OJ.mjs";
+} from "./chunk-TXNC7GLT.mjs";
 
 // src/use-area-chart.ts
 import { getVar, useTheme } from "@yamada-ui/core";
 import { cx } from "@yamada-ui/utils";
 import { useCallback, useId, useMemo, useState } from "react";
 var useAreaChart = ({
-  data,
-  series,
   type,
-  layoutType = "horizontal",
-  withGradient: withGradientProp,
-  withDots = true,
-  withActiveDots = true,
-  curveType = "monotone",
-  strokeWidth = 2,
   connectNulls = true,
+  curveType = "monotone",
+  data,
   fillOpacity = 0.4,
+  layoutType = "horizontal",
+  series,
   splitColors = ["#ee6a5d", "#5fce7d"],
   splitOffset,
-  referenceLineProps,
+  strokeWidth = 2,
+  styles,
   syncId,
+  withActiveDots = true,
+  withDots = true,
+  withGradient: withGradientProp,
   xAxisLabel,
   yAxisLabel,
-  styles,
+  referenceLineProps,
   ...rest
 }) => {
   var _a;
@@ -42,10 +42,10 @@ var useAreaChart = ({
   const withGradient = typeof withGradientProp === "boolean" ? withGradientProp : type === "default";
   const shouldHighlight = highlightedArea !== null;
   const {
-    dot = {},
     activeDot = {},
-    dimDot,
     dimArea,
+    dimDot,
+    dot = {},
     ...computedAreaProps
   } = (_a = rest.areaProps) != null ? _a : {};
   const areaColors = useMemo(
@@ -60,7 +60,7 @@ var useAreaChart = ({
     () => splitColors.map((color, index) => ({
       name: `area-split-${index}`,
       token: "colors",
-      value: color != null ? color : "transparent"
+      value: color || "transparent"
     })),
     [splitColors]
   );
@@ -133,24 +133,27 @@ var useAreaChart = ({
     );
   }, [dimDot, theme]);
   const defaultSplitOffset = useMemo(() => {
+    var _a2;
     if (series.length === 1) {
-      const dataKey = series[0].dataKey;
-      const dataMax = Math.max(...data.map((item) => item[dataKey]));
-      const dataMin = Math.min(...data.map((item) => item[dataKey]));
-      if (dataMax <= 0) return 0;
-      if (dataMin >= 0) return 1;
-      return dataMax / (dataMax - dataMin);
+      const dataKey = (_a2 = series[0]) == null ? void 0 : _a2.dataKey;
+      if (dataKey) {
+        const dataMax = Math.max(...data.map((item) => item[dataKey]));
+        const dataMin = Math.min(...data.map((item) => item[dataKey]));
+        if (dataMax <= 0) return 0;
+        if (dataMin >= 0) return 1;
+        return dataMax / (dataMax - dataMin);
+      }
     }
     return 0.5;
   }, [data, series]);
   const areaPropsList = useMemo(
     () => series.map((props, index) => {
       const {
-        dataKey,
-        dot: dot2 = {},
         activeDot: activeDot2 = {},
-        dimDot: dimDot2 = {},
+        dataKey,
         dimArea: dimArea2 = {},
+        dimDot: dimDot2 = {},
+        dot: dot2 = {},
         strokeDasharray,
         ...computedProps
       } = props;
@@ -177,8 +180,8 @@ var useAreaChart = ({
         )(theme);
         resolvedActiveDot = {
           className: cx("ui-area-chart__active-dot", className),
-          stroke: color,
           r: 4,
+          stroke: color,
           ...rest3
         };
       } else {
@@ -209,11 +212,11 @@ var useAreaChart = ({
       return {
         ...rest2,
         id,
+        activeDot: resolvedActiveDot,
         color,
-        strokeDasharray,
         dataKey,
-        activeDot: resolvedActiveDot,
-        dot: resolvedDot
+        dot: resolvedDot,
+        strokeDasharray
       };
     }),
     [
@@ -241,14 +244,14 @@ var useAreaChart = ({
       ref,
       className: cx(className, areaChartClassName),
       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
     }),
@@ -266,40 +269,41 @@ var useAreaChart = ({
   const getAreaSplitProps = useCallback(
     (props = {}) => ({
       id: splitId,
-      offset: splitOffset != null ? splitOffset : defaultSplitOffset,
       fillOpacity: fillOpacityVar,
+      offset: splitOffset != null ? splitOffset : defaultSplitOffset,
       ...props
     }),
     [defaultSplitOffset, splitId, splitOffset, fillOpacityVar]
   );
   const getAreaProps = useCallback(
-    ({ index, className: classNameProp, ...props }, ref = null) => {
+    ({ className: classNameProp, index, ...props }, ref = null) => {
+      var _a2;
       const {
         id,
-        color,
         className,
-        dataKey,
-        strokeDasharray,
         activeDot: activeDot2,
+        color,
+        dataKey = "",
         dot: dot2,
+        strokeDasharray,
         ...rest2
-      } = areaPropsList[index];
+      } = (_a2 = areaPropsList[index]) != null ? _a2 : {};
       return {
+        id,
         ref,
+        type: curveType,
+        name: dataKey,
         className: cx(classNameProp, className),
-        id,
         activeDot: activeDot2,
-        dot: dot2,
-        name: dataKey,
-        type: curveType,
+        connectNulls,
         dataKey,
+        dot: dot2,
         fill: type === "split" ? `url(#${splitId})` : `url(#${id})`,
-        strokeWidth,
-        stroke: color,
         isAnimationActive: false,
-        connectNulls,
         stackId: stacked ? "stack" : void 0,
+        stroke: color,
         strokeDasharray,
+        strokeWidth,
         ...props,
         ...rest2
       };
@@ -316,23 +320,23 @@ var useAreaChart = ({
   );
   const getAreaGradientProps = useCallback(
     (props = {}) => ({
-      withGradient,
       fillOpacity: fillOpacityVar,
+      withGradient,
       ...props
     }),
     [withGradient, fillOpacityVar]
   );
   return {
+    areaVars,
+    setHighlightedArea,
     getAreaChartProps,
-    getAreaSplitProps,
-    getAreaProps,
     getAreaGradientProps,
-    areaVars,
-    setHighlightedArea
+    getAreaProps,
+    getAreaSplitProps
   };
 };
 
 export {
   useAreaChart
 };
-//# sourceMappingURL=chunk-C3ZYUDXE.mjs.map
+//# sourceMappingURL=chunk-QPMW56KA.mjs.map

package/dist/chunk-QPMW56KA.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-area-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 { AreaGradientProps } from \"./area-chart-gradient\"\nimport type { AreaSplitProps } from \"./area-chart-split\"\nimport type {\n  AreaChartProps,\n  AreaChartType,\n  AreaProps,\n  ChartCurveType,\n  ChartLayoutType,\n  ReferenceLineProps,\n} from \"./chart.types\"\nimport { getVar, useTheme } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCallback, useId, useMemo, useState } from \"react\"\nimport { getComponentProps } from \"./chart-utils\"\nimport {\n  areaChartProperties,\n  areaProperties,\n  dotProperties,\n} from \"./rechart-properties\"\n\nexport interface UseAreaChartOptions {\n  /**\n   * Chart data.\n   */\n  data: Dict[]\n  /**\n   * An array of objects with `dataKey` and `color` keys. Determines which data should be consumed from the `data` array.\n   */\n  series: AreaProps[]\n  /**\n   * Controls how chart areas are positioned relative to each other.\n   *\n   * @default `default`\n   */\n  type?: AreaChartType\n  /**\n   * Determines whether points with `null` values should be connected.\n   *\n   * @default true\n   */\n  connectNulls?: boolean\n  /**\n   * Type of the curve.\n   *\n   * @default `monotone`\n   */\n  curveType?: ChartCurveType\n  /**\n   * Controls fill opacity of all areas.\n   *\n   * @default 0.4\n   */\n  fillOpacity?: [number, number] | number\n  /**\n   * Chart orientation.\n   *\n   * @default 'horizontal'\n   */\n  layoutType?: ChartLayoutType\n  /**\n   * A tuple of colors used when `type=\"split\"` is set, ignored in all other cases.\n   *\n   * @default '[\"red.400\", \"green.400\"]'\n   */\n  splitColors?: [string, string]\n  /**\n   * Offset for the split gradient. By default, value is inferred from `data` and `series` if possible.\n   * Must be generated from the data array with `getSplitOffset` function.\n   */\n  splitOffset?: number\n  /**\n   * Stroke width for the chart areas.\n   *\n   * @default 2\n   */\n  strokeWidth?: number\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   * Determines whether activeDots should be displayed.\n   *\n   * @default true\n   */\n  withActiveDots?: boolean\n  /**\n   * Determines whether dots should be displayed.\n   *\n   * @default true\n   */\n  withDots?: boolean\n  /**\n   * Determines whether the chart area should be represented with a gradient instead of the solid color.\n   */\n  withGradient?: boolean\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 areas.\n   */\n  areaProps?: Partial<AreaProps>\n  /**\n   * Props passed down to recharts `AreaChart` component.\n   */\n  chartProps?: AreaChartProps\n  /**\n   * Reference lines that should be displayed on the chart.\n   */\n  referenceLineProps?: ReferenceLineProps[]\n}\n\ninterface UseAreaChartProps extends UseAreaChartOptions {\n  styles: Dict<CSSUIObject | undefined>\n}\n\nexport const useAreaChart = ({\n  type,\n  connectNulls = true,\n  curveType = \"monotone\",\n  data,\n  fillOpacity = 0.4,\n  layoutType = \"horizontal\",\n  series,\n  splitColors = [\"#ee6a5d\", \"#5fce7d\"],\n  splitOffset,\n  strokeWidth = 2,\n  styles,\n  syncId,\n  withActiveDots = true,\n  withDots = true,\n  withGradient: withGradientProp,\n  xAxisLabel,\n  yAxisLabel,\n  referenceLineProps,\n  ...rest\n}: UseAreaChartProps) => {\n  const uuid = useId()\n  const { theme } = useTheme()\n  const [highlightedArea, setHighlightedArea] = useState<null | string>(null)\n  const splitId = `${uuid}-split`\n  const stacked = type === \"stacked\" || type === \"percent\"\n  const withGradient =\n    typeof withGradientProp === \"boolean\"\n      ? withGradientProp\n      : type === \"default\"\n  const shouldHighlight = highlightedArea !== null\n  const {\n    activeDot = {},\n    dimArea,\n    dimDot,\n    dot = {},\n    ...computedAreaProps\n  } = rest.areaProps ?? {}\n\n  const areaColors: CSSUIProps[\"vars\"] = useMemo(\n    () =>\n      series.map(({ color }, index) => ({\n        name: `area-${index}`,\n        token: \"colors\",\n        value: color ?? \"transparent\",\n      })),\n    [series],\n  )\n\n  const areaSplitColors: CSSUIProps[\"vars\"] = useMemo(\n    () =>\n      splitColors.map((color, index) => ({\n        name: `area-split-${index}`,\n        token: \"colors\",\n        value: color || \"transparent\",\n      })),\n    [splitColors],\n  )\n\n  const referenceLineColors: CSSUIProps[\"vars\"] = useMemo(\n    () =>\n      referenceLineProps\n        ? referenceLineProps.map(({ color }, index) => ({\n            name: `reference-line-${index}`,\n            token: \"colors\",\n            value: color ?? \"transparent\",\n          }))\n        : [],\n    [referenceLineProps],\n  )\n\n  const areaVars: CSSUIProps[\"vars\"] = useMemo(() => {\n    return [\n      ...areaColors,\n      ...areaSplitColors,\n      ...referenceLineColors,\n      { name: \"fill-opacity\", value: fillOpacity },\n    ]\n  }, [areaColors, areaSplitColors, referenceLineColors, fillOpacity])\n  const fillOpacityVar = useMemo(() => getVar(\"fill-opacity\")(theme), [theme])\n\n  const [chartProps, areaChartClassName] = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [rest.chartProps ?? {}, areaChartProperties],\n        styles.chart,\n      )(theme),\n    [rest.chartProps, styles.chart, theme],\n  )\n\n  const [areaProps, areaClassName] = useMemo(() => {\n    const resolvedAreaProps = {\n      fillOpacity: 1,\n      strokeOpacity: 1,\n      ...computedAreaProps,\n    }\n\n    return getComponentProps<Dict, string>(\n      [resolvedAreaProps, areaProperties],\n      styles.area,\n    )(theme)\n  }, [computedAreaProps, styles.area, theme])\n\n  const [dimAreaProps, dimAreaClassName] = useMemo(() => {\n    const resolvedDimArea = {\n      fillOpacity: 0,\n      strokeOpacity: 0.3,\n      ...dimArea,\n    }\n\n    return getComponentProps<Dict, string>([resolvedDimArea, areaProperties])(\n      theme,\n    )\n  }, [dimArea, theme])\n\n  const [dotProps, dotClassName] = useMemo(() => {\n    const resolvedDot = { fillOpacity: 1, strokeWidth: 2, ...dot }\n\n    return getComponentProps<Dict, string>(\n      [resolvedDot, dotProperties],\n      styles.dot,\n    )(theme)\n  }, [dot, styles.dot, theme])\n\n  const [activeDotProps, activeDotClassName] = useMemo(\n    () =>\n      getComponentProps<Dict, string>(\n        [activeDot, dotProperties],\n        styles.activeDot,\n      )(theme),\n    [activeDot, styles.activeDot, theme],\n  )\n\n  const [dimDotProps, dimDotClassName] = useMemo(() => {\n    const resolvedDimDot = { fillOpacity: 0, strokeOpacity: 0, ...dimDot }\n    return getComponentProps<Dict, string>([resolvedDimDot, dotProperties])(\n      theme,\n    )\n  }, [dimDot, theme])\n\n  const defaultSplitOffset = useMemo(() => {\n    if (series.length === 1) {\n      const dataKey = series[0]?.dataKey as string\n\n      if (dataKey) {\n        const dataMax = Math.max(...data.map((item) => item[dataKey]))\n        const dataMin = Math.min(...data.map((item) => item[dataKey]))\n\n        if (dataMax <= 0) return 0\n        if (dataMin >= 0) return 1\n\n        return dataMax / (dataMax - dataMin)\n      }\n    }\n\n    return 0.5\n  }, [data, series])\n\n  const areaPropsList = useMemo(\n    () =>\n      series.map((props, index) => {\n        const {\n          activeDot = {},\n          dataKey,\n          dimArea = {},\n          dimDot = {},\n          dot = {},\n          strokeDasharray,\n          ...computedProps\n        } = props\n        const id = `${uuid}-${dataKey}`\n        const color = getVar(`area-${index}`)(theme)\n        const dimmed = shouldHighlight && highlightedArea !== dataKey\n        const computedDimArea = { ...dimAreaProps, ...dimArea }\n\n        const resolvedProps = {\n          ...areaProps,\n          ...computedProps,\n          ...(dimmed ? computedDimArea : {}),\n        }\n        const rest = getComponentProps<Dict, string>(\n          [resolvedProps, areaProperties],\n          areaClassName,\n          dimmed ? dimAreaClassName : undefined,\n        )(theme, true)\n\n        let resolvedActiveDot: boolean | Recharts.DotProps\n\n        if (withActiveDots) {\n          const computedActiveDot = { ...activeDotProps, ...activeDot }\n\n          const [rest, className] = getComponentProps(\n            [computedActiveDot, dotProperties],\n            activeDotClassName,\n          )(theme)\n\n          resolvedActiveDot = {\n            className: cx(\"ui-area-chart__active-dot\", className),\n            r: 4,\n            stroke: color,\n            ...rest,\n          } as Recharts.DotProps\n        } else {\n          resolvedActiveDot = false\n        }\n\n        let resolvedDot: boolean | Recharts.DotProps\n\n        if (withDots) {\n          const computedDimDot = { ...dimDotProps, ...dimDot }\n          const computedDot = {\n            ...dotProps,\n            ...dot,\n            ...(dimmed ? computedDimDot : {}),\n          }\n\n          const [rest, className] = getComponentProps(\n            [computedDot, dotProperties],\n            dotClassName,\n            dimmed ? dimDotClassName : undefined,\n          )(theme)\n\n          resolvedDot = {\n            className: cx(\"ui-area-chart__dot\", className),\n            fill: color,\n            r: 4,\n            ...rest,\n          } as Recharts.DotProps\n        } else {\n          resolvedDot = false\n        }\n\n        return {\n          ...rest,\n          id,\n          activeDot: resolvedActiveDot,\n          color,\n          dataKey,\n          dot: resolvedDot,\n          strokeDasharray,\n        }\n      }),\n    [\n      series,\n      uuid,\n      shouldHighlight,\n      highlightedArea,\n      dimAreaProps,\n      dimDotProps,\n      areaProps,\n      areaClassName,\n      dimAreaClassName,\n      theme,\n      withActiveDots,\n      withDots,\n      activeDotProps,\n      activeDotClassName,\n      dotProps,\n      dotClassName,\n      dimDotClassName,\n    ],\n  )\n\n  const getAreaChartProps: RequiredPropGetter<\n    ComponentPropsWithoutRef<typeof Recharts.AreaChart>,\n    ComponentPropsWithoutRef<typeof Recharts.AreaChart>\n  > = useCallback(\n    ({ className, ...props } = {}, ref = null) => ({\n      ref,\n      className: cx(className, areaChartClassName),\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      areaChartClassName,\n      data,\n      type,\n      layoutType,\n      syncId,\n      xAxisLabel,\n      yAxisLabel,\n      chartProps,\n    ],\n  )\n\n  const getAreaSplitProps: PropGetter<\n    Partial<AreaSplitProps>,\n    AreaSplitProps\n  > = useCallback(\n    (props = {}) => ({\n      id: splitId,\n      fillOpacity: fillOpacityVar,\n      offset: splitOffset ?? defaultSplitOffset,\n      ...props,\n    }),\n    [defaultSplitOffset, splitId, splitOffset, fillOpacityVar],\n  )\n\n  const getAreaProps: RequiredPropGetter<\n    { index: number } & Partial<Recharts.AreaProps>,\n    Omit<Recharts.AreaProps, \"ref\">\n  > = useCallback(\n    ({ className: classNameProp, index, ...props }, ref = null) => {\n      const {\n        id,\n        className,\n        activeDot,\n        color,\n        dataKey = \"\",\n        dot,\n        strokeDasharray,\n        ...rest\n      } = areaPropsList[index] ?? {}\n\n      return {\n        id,\n        ref,\n        type: curveType,\n        name: dataKey as string,\n        className: cx(classNameProp, className),\n        activeDot,\n        connectNulls,\n        dataKey,\n        dot,\n        fill: type === \"split\" ? `url(#${splitId})` : `url(#${id})`,\n        isAnimationActive: false,\n        stackId: stacked ? \"stack\" : undefined,\n        stroke: color,\n        strokeDasharray,\n        strokeWidth,\n        ...(props as Omit<Recharts.AreaProps, \"dataKey\">),\n        ...rest,\n      }\n    },\n    [\n      areaPropsList,\n      connectNulls,\n      curveType,\n      splitId,\n      stacked,\n      strokeWidth,\n      type,\n    ],\n  )\n\n  const getAreaGradientProps: PropGetter<\n    Partial<AreaGradientProps>,\n    AreaGradientProps\n  > = useCallback(\n    (props = {}) => ({\n      fillOpacity: fillOpacityVar,\n      withGradient,\n      ...props,\n    }),\n    [withGradient, fillOpacityVar],\n  )\n\n  return {\n    areaVars,\n    setHighlightedArea,\n    getAreaChartProps,\n    getAreaGradientProps,\n    getAreaProps,\n    getAreaSplitProps,\n  }\n}\n\nexport type UseAreaChartReturn = ReturnType<typeof useAreaChart>\n"],"mappings":"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","names":["_a","activeDot","dimArea","dimDot","dot","rest"]}

package/dist/{chunk-IJRYXT4V.mjs → chunk-R2LOTDR3.mjs}

@@ -24,10 +24,10 @@ var useChartLegend = ({
     },
     [rest]
   );
-  return { legendProps, getLegendProps };
+  return { getLegendProps, legendProps };
 };
 
 export {
   useChartLegend
 };
-//# sourceMappingURL=chunk-IJRYXT4V.mjs.map
+//# sourceMappingURL=chunk-R2LOTDR3.mjs.map

package/dist/{chunk-IJRYXT4V.mjs.map → chunk-R2LOTDR3.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/use-chart-legend.ts"],"sourcesContent":["import type { PropGetter } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport { splitObject } from \"@yamada-ui/utils\"\nimport { useCallback } from \"react\"\nimport type * as Recharts from \"recharts\"\nimport type { LegendProps } from \"./chart.types\"\nimport { legendProperties } from \"./rechart-properties\"\n\nexport interface UseChartLegendProps {\n  /**\n   * Props passed down to recharts 'Legend' component.\n   */\n  legendProps?: LegendProps\n}\n\nexport const useChartLegend = ({\n  legendProps: _legendProps = {},\n}: UseChartLegendProps) => {\n  const [rest, legendProps] = splitObject<Dict, string>(\n    _legendProps,\n    legendProperties,\n  )\n\n  const getLegendProps: PropGetter<\n    Partial<Recharts.LegendProps>,\n    Omit<Recharts.LegendProps, \"ref\">\n  > = useCallback(\n    (props, ref = null) => {\n      return {\n        ref,\n        verticalAlign: \"top\",\n        ...props,\n        ...rest,\n      }\n    },\n    [rest],\n  )\n\n  return { legendProps, getLegendProps }\n}\n"],"mappings":";;;;;;AAEA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAYrB,IAAM,iBAAiB,CAAC;AAAA,EAC7B,aAAa,eAAe,CAAC;AAC/B,MAA2B;AACzB,QAAM,CAAC,MAAM,WAAW,IAAI;AAAA,IAC1B;AAAA,IACA;AAAA,EACF;AAEA,QAAM,iBAGF;AAAA,IACF,CAAC,OAAO,MAAM,SAAS;AACrB,aAAO;AAAA,QACL;AAAA,QACA,eAAe;AAAA,QACf,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AAEA,SAAO,EAAE,aAAa,eAAe;AACvC;","names":[]}
+{"version":3,"sources":["../src/use-chart-legend.ts"],"sourcesContent":["import type { PropGetter } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type * as Recharts from \"recharts\"\nimport type { LegendProps } from \"./chart.types\"\nimport { splitObject } from \"@yamada-ui/utils\"\nimport { useCallback } from \"react\"\nimport { legendProperties } from \"./rechart-properties\"\n\nexport interface UseChartLegendProps {\n  /**\n   * Props passed down to recharts 'Legend' component.\n   */\n  legendProps?: LegendProps\n}\n\nexport const useChartLegend = ({\n  legendProps: _legendProps = {},\n}: UseChartLegendProps) => {\n  const [rest, legendProps] = splitObject<Dict, string>(\n    _legendProps,\n    legendProperties,\n  )\n\n  const getLegendProps: PropGetter<\n    Partial<Recharts.LegendProps>,\n    Omit<Recharts.LegendProps, \"ref\">\n  > = useCallback(\n    (props, ref = null) => {\n      return {\n        ref,\n        verticalAlign: \"top\",\n        ...props,\n        ...rest,\n      }\n    },\n    [rest],\n  )\n\n  return { getLegendProps, legendProps }\n}\n"],"mappings":";;;;;;AAIA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAUrB,IAAM,iBAAiB,CAAC;AAAA,EAC7B,aAAa,eAAe,CAAC;AAC/B,MAA2B;AACzB,QAAM,CAAC,MAAM,WAAW,IAAI;AAAA,IAC1B;AAAA,IACA;AAAA,EACF;AAEA,QAAM,iBAGF;AAAA,IACF,CAAC,OAAO,MAAM,SAAS;AACrB,aAAO;AAAA,QACL;AAAA,QACA,eAAe;AAAA,QACf,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AAEA,SAAO,EAAE,gBAAgB,YAAY;AACvC;","names":[]}

package/dist/{chunk-LSCPL7PM.mjs → chunk-SCY5V45W.mjs}

@@ -1,45 +1,45 @@
 "use client"
 import {
   useRadarChart
-} from "./chunk-6O5G3WYP.mjs";
+} from "./chunk-EZG52466.mjs";
 import {
   usePolarGrid
-} from "./chunk-XYUYAHJX.mjs";
+} from "./chunk-6JRMEI6J.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/radar-chart.tsx
 import {
-  ui,
   forwardRef,
-  useComponentMultiStyle,
-  omitThemeProps
+  omitThemeProps,
+  ui,
+  useComponentMultiStyle
 } from "@yamada-ui/core";
 import { cx } from "@yamada-ui/utils";
 import { useMemo } from "react";
 import {
-  ResponsiveContainer,
-  RadarChart as ReChartsRadarChart,
-  PolarGrid,
+  Legend,
   PolarAngleAxis,
+  PolarGrid,
   PolarRadiusAxis,
   Radar,
-  Tooltip,
-  Legend
+  RadarChart as ReChartsRadarChart,
+  ResponsiveContainer,
+  Tooltip
 } from "recharts";
 import { jsx, jsxs } from "react/jsx-runtime";
 var RadarChart = forwardRef((props, ref) => {
@@ -47,79 +47,79 @@ var RadarChart = forwardRef((props, ref) => {
   const {
     className,
     data,
-    series,
     dataKey,
-    radarProps,
-    chartProps,
-    polarGridProps,
-    polarAngleAxisProps,
-    polarAngleAxisTickProps,
-    polarRadiusAxisProps,
-    polarRadiusAxisTickProps,
-    containerProps,
-    tooltipProps,
-    legendProps,
-    tooltipAnimationDuration,
-    unit,
-    valueFormatter,
+    fillOpacity,
     polarAngleAxisTickFormatter,
     polarRadiusAxisTickFormatter,
+    series,
     strokeDasharray,
-    withDots,
-    withActiveDots,
     strokeWidth,
-    fillOpacity,
-    withTooltip = true,
+    tooltipAnimationDuration,
+    unit,
+    valueFormatter,
+    withActiveDots,
+    withDots,
     withLegend = false,
-    withPolarGrid = true,
     withPolarAngleAxis = true,
+    withPolarGrid = true,
     withPolarRadiusAxis = false,
+    withTooltip = true,
+    chartProps,
+    containerProps,
+    legendProps,
+    polarAngleAxisProps,
+    polarAngleAxisTickProps,
+    polarGridProps,
+    polarRadiusAxisProps,
+    polarRadiusAxisTickProps,
+    radarProps,
+    tooltipProps,
     ...rest
   } = omitThemeProps(mergedProps);
   const {
-    getRadarProps,
-    getRadarChartProps,
+    radarVars,
+    setHighlightedArea,
     getPolarAngleAxisProps,
     getPolarRadiusAxisProps,
-    radarVars,
-    setHighlightedArea
+    getRadarChartProps,
+    getRadarProps
   } = useRadarChart({
     data,
-    series,
     dataKey,
-    radarProps,
+    fillOpacity,
+    polarAngleAxisTickFormatter,
+    polarRadiusAxisTickFormatter,
+    series,
+    strokeWidth,
+    styles,
+    withActiveDots,
+    withDots,
     chartProps,
     polarAngleAxisProps,
     polarAngleAxisTickProps,
     polarRadiusAxisProps,
     polarRadiusAxisTickProps,
-    withDots,
-    withActiveDots,
-    strokeWidth,
-    fillOpacity,
-    polarAngleAxisTickFormatter,
-    polarRadiusAxisTickFormatter,
-    styles
+    radarProps
   });
   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 { getPolarGridProps } = usePolarGrid({
-    polarGridProps,
     strokeDasharray,
-    styles
+    styles,
+    polarGridProps
   });
   const radars = useMemo(
     () => series.map(({ dataKey: dataKey2 }, index) => /* @__PURE__ */ jsx(
       Radar,
       {
-        ...getRadarProps({ index, className: "ui-radar-chart__radar" })
+        ...getRadarProps({ className: "ui-radar-chart__radar", index })
       },
       `radar-${dataKey2}`
     )),
@@ -189,8 +189,8 @@ var RadarChart = forwardRef((props, ref) => {
                         className: "ui-line-chart__tooltip",
                         label,
                         payload,
-                        valueFormatter,
                         unit,
+                        valueFormatter,
                         ...computedTooltipProps
                       }
                     ),
@@ -206,8 +206,10 @@ var RadarChart = forwardRef((props, ref) => {
     }
   ) });
 });
+RadarChart.displayName = "RadarChart";
+RadarChart.__ui__ = "RadarChart";
 
 export {
   RadarChart
 };
-//# sourceMappingURL=chunk-LSCPL7PM.mjs.map
+//# sourceMappingURL=chunk-SCY5V45W.mjs.map

package/dist/chunk-SCY5V45W.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/radar-chart.tsx"],"sourcesContent":["import type { HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { UseChartProps } from \"./use-chart\"\nimport type { UseChartLegendProps } from \"./use-chart-legend\"\nimport type { UseChartTooltipOptions } from \"./use-chart-tooltip\"\nimport type { UsePolarGridOptions } from \"./use-polar-grid\"\nimport type { UseRadarChartOptions } from \"./use-radar-chart\"\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  Legend,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart as ReChartsRadarChart,\n  ResponsiveContainer,\n  Tooltip,\n} from \"recharts\"\nimport { ChartLegend } from \"./chart-legend\"\nimport { ChartTooltip } from \"./chart-tooltip\"\nimport { ChartProvider, useChart } from \"./use-chart\"\nimport { useChartLegend } from \"./use-chart-legend\"\nimport { useChartTooltip } from \"./use-chart-tooltip\"\nimport { usePolarGrid } from \"./use-polar-grid\"\nimport { useRadarChart } from \"./use-radar-chart\"\n\ninterface RadarChartOptions {\n  /**\n   * Unit displayed next to each tick in y-axis.\n   */\n  unit?: string\n  /**\n   * If `true`, legend is visible.\n   *\n   * @default false\n   */\n  withLegend?: boolean\n  /**\n   * Determines whether polarAngleAxis should be displayed.\n   *\n   * @default true\n   */\n  withPolarAngleAxis?: boolean\n  /**\n   * Determines whether polarGrid should be displayed.\n   *\n   * @default true\n   */\n  withPolarGrid?: boolean\n  /**\n   * Determines whether polarRadiusAxis should be displayed.\n   *\n   * @default false\n   */\n  withPolarRadiusAxis?: boolean\n  /**\n   * If `true`, tooltip is visible.\n   *\n   * @default true\n   */\n  withTooltip?: boolean\n}\n\nexport interface RadarChartProps\n  extends Omit<HTMLUIProps, \"fillOpacity\" | \"strokeDasharray\" | \"strokeWidth\">,\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/data-display/radar-chart\n */\nexport const RadarChart = forwardRef<RadarChartProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useComponentMultiStyle(\"RadarChart\", props)\n  const {\n    className,\n    data,\n    dataKey,\n    fillOpacity,\n    polarAngleAxisTickFormatter,\n    polarRadiusAxisTickFormatter,\n    series,\n    strokeDasharray,\n    strokeWidth,\n    tooltipAnimationDuration,\n    unit,\n    valueFormatter,\n    withActiveDots,\n    withDots,\n    withLegend = false,\n    withPolarAngleAxis = true,\n    withPolarGrid = true,\n    withPolarRadiusAxis = false,\n    withTooltip = true,\n    chartProps,\n    containerProps,\n    legendProps,\n    polarAngleAxisProps,\n    polarAngleAxisTickProps,\n    polarGridProps,\n    polarRadiusAxisProps,\n    polarRadiusAxisTickProps,\n    radarProps,\n    tooltipProps,\n    ...rest\n  } = omitThemeProps(mergedProps)\n\n  const {\n    radarVars,\n    setHighlightedArea,\n    getPolarAngleAxisProps,\n    getPolarRadiusAxisProps,\n    getRadarChartProps,\n    getRadarProps,\n  } = useRadarChart({\n    data,\n    dataKey,\n    fillOpacity,\n    polarAngleAxisTickFormatter,\n    polarRadiusAxisTickFormatter,\n    series,\n    strokeWidth,\n    styles,\n    withActiveDots,\n    withDots,\n    chartProps,\n    polarAngleAxisProps,\n    polarAngleAxisTickProps,\n    polarRadiusAxisProps,\n    polarRadiusAxisTickProps,\n    radarProps,\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 { getPolarGridProps } = usePolarGrid({\n    strokeDasharray,\n    styles,\n    polarGridProps,\n  })\n\n  const radars = useMemo(\n    () =>\n      series.map(({ dataKey }, index) => (\n        <Radar\n          key={`radar-${dataKey}`}\n          {...getRadarProps({ className: \"ui-radar-chart__radar\", index })}\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        __css={{ maxW: \"full\", vars: radarVars, ...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                    unit={unit}\n                    valueFormatter={valueFormatter}\n                    {...computedTooltipProps}\n                  />\n                )}\n                {...getTooltipProps()}\n              />\n            ) : null}\n\n            {radars}\n          </ReChartsRadarChart>\n        </ResponsiveContainer>\n      </ui.div>\n    </ChartProvider>\n  )\n})\n\nRadarChart.displayName = \"RadarChart\"\nRadarChart.__ui__ = \"RadarChart\"\n"],"mappings":"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","names":["dataKey"]}