@yamada-ui/charts 1.0.0

package/dist/index.js

@@ -0,0 +1,2725 @@
+"use client"
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AreaChart: () => AreaChart,
+  BarChart: () => BarChart,
+  LineChart: () => LineChart,
+  RadarChart: () => RadarChart
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/line-chart.tsx
+var import_core9 = require("@yamada-ui/core");
+var import_utils11 = require("@yamada-ui/utils");
+var import_react8 = require("react");
+var import_recharts = require("recharts");
+
+// src/chart-legend.tsx
+var import_core3 = require("@yamada-ui/core");
+var import_utils3 = require("@yamada-ui/utils");
+
+// src/use-chart.ts
+var import_core2 = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react = require("react");
+
+// src/chart-utils.ts
+var import_core = require("@yamada-ui/core");
+var import_utils = require("@yamada-ui/utils");
+var getClassName = (...styles) => (theme) => (0, import_utils.cx)(
+  ...styles.map(
+    (style) => (0, import_utils.isString)(style) ? style : (0, import_core.getCSS)(style)(theme)
+  )
+);
+var getComponentProps = ([obj, keys], ...props) => (theme, isContain) => {
+  const [pickedProps, omittedProps] = (0, import_utils.splitObject)(obj, keys);
+  const className = getClassName(...props, omittedProps)(theme);
+  return !isContain ? [pickedProps, className] : { ...pickedProps, className };
+};
+
+// src/rechart-properties.ts
+var areaChartProperties = [
+  "layout",
+  "syncId",
+  "syncMethod",
+  "width",
+  "height",
+  "data",
+  "margin",
+  "stackOffset",
+  "onClick",
+  "onMouseEnter",
+  "onMouseMove",
+  "onMouseLeave"
+];
+var barChartProperties = [
+  "layout",
+  "syncId",
+  "syncMethod",
+  "width",
+  "height",
+  "data",
+  "margin",
+  "barCategoryGap",
+  "barGap",
+  "barSize",
+  "maxBarSize",
+  "stackOffset",
+  "reverseStackOrder",
+  "onClick",
+  "onMouseEnter",
+  "onMouseMove",
+  "onMouseLeave"
+];
+var lineChartProperties = [
+  "layout",
+  "syncId",
+  "syncMethod",
+  "width",
+  "height",
+  "data",
+  "margin",
+  "onClick",
+  "onMouseEnter",
+  "onMouseMove",
+  "onMouseLeave"
+];
+var radarChartProperties = [
+  "width",
+  "height",
+  "data",
+  "cx",
+  "cy",
+  "startAngle",
+  "endAngle",
+  "innerRadius",
+  "outerRadius",
+  "margin",
+  "onMouseEnter",
+  "onClick"
+];
+var referenceLineProperties = [
+  "xAxisId",
+  "yAxisId",
+  "x",
+  "y",
+  "ifOverflow",
+  "viewBox",
+  "xAxis",
+  "yAxis",
+  "label",
+  "isFront",
+  "strokeWidth",
+  "segment"
+];
+var containerProperties = [
+  "aspect",
+  "width",
+  "height",
+  "minWidth",
+  "minHeight",
+  "debounce",
+  "onResize"
+];
+var gridProperties = [
+  "x",
+  "y",
+  "width",
+  "height",
+  "horizontal",
+  "vertical",
+  "horizontalPoints",
+  "horizontalCoordinatesGenerator",
+  "verticalPoints",
+  "verticalCoordinatesGenerator",
+  "fill",
+  "fillOpacity",
+  "strokeDasharray"
+];
+var xAxisProperties = [
+  "hide",
+  "dataKey",
+  "xAxisId",
+  "width",
+  "height",
+  "orientation",
+  "type",
+  "allowDecimals",
+  "allowDataOverflow",
+  "allowDuplicatedCategory",
+  "angle",
+  "tickCount",
+  "domain",
+  "includeHidden",
+  "interval",
+  "padding",
+  "minTickGap",
+  "axisLine",
+  "tickLine",
+  "tickSize",
+  "tickFormatter",
+  "ticks",
+  "tick",
+  "mirror",
+  "reversed",
+  "label",
+  "scale",
+  "unit",
+  "name",
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseMove",
+  "onMouseOver",
+  "onMouseOut",
+  "onMouseEnter",
+  "onMouseLeave",
+  "tickMargin"
+];
+var yAxisProperties = [
+  "hide",
+  "dataKey",
+  "yAxisId",
+  "width",
+  "height",
+  "orientation",
+  "type",
+  "tickCount",
+  "domain",
+  "includeHidden",
+  "interval",
+  "padding",
+  "minTickGap",
+  "allowDecimals",
+  "allowDataOverflow",
+  "allowDuplicatedCategory",
+  "axisLine",
+  "tickLine",
+  "tickSize",
+  "tickFormatter",
+  "ticks",
+  "tick",
+  "mirror",
+  "reversed",
+  "label",
+  "scale",
+  "unit",
+  "name",
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseMove",
+  "onMouseOver",
+  "onMouseOut",
+  "onMouseEnter",
+  "onMouseLeave",
+  "tickMargin"
+];
+var legendProperties = [
+  "width",
+  "height",
+  "layout",
+  "align",
+  "verticalAlign",
+  "iconSize",
+  "iconType",
+  "payload",
+  "chartWidth",
+  "chartHeight",
+  "margin",
+  "content",
+  "formatter",
+  "wrapperStyle",
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseMove",
+  "onMouseOver",
+  "onMouseOut",
+  "onMouseEnter",
+  "onMouseLeave"
+];
+var tooltipProperties = [
+  "offset",
+  "filterNull",
+  "itemStyle",
+  "wrapperStyle",
+  "contentStyle",
+  "labelStyle",
+  "cursor",
+  "viewBox",
+  "allowEscapeViewBox",
+  "active",
+  "position",
+  "coordinate",
+  "payload",
+  "label",
+  "content",
+  "formatter",
+  "labelFormatter",
+  "itemSorter",
+  "isAnimationActive",
+  "animationDuration",
+  "animationEasing"
+];
+var areaProperties = [
+  "type",
+  "dataKey",
+  "xAxisId",
+  "yAxisId",
+  "legendType",
+  "dot",
+  "activeDot",
+  "label",
+  "stroke",
+  "strokeWidth",
+  "layout",
+  "baseLine",
+  "points",
+  "stackId",
+  "connectNulls",
+  "unit",
+  "name",
+  "isAnimationActive",
+  "animationBegin",
+  "animationDuration",
+  "animationEasing",
+  "id",
+  "onAnimationStart",
+  "onAnimationEnd",
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseMove",
+  "onMouseOver",
+  "onMouseOut",
+  "onMouseEnter",
+  "onMouseLeave"
+];
+var barProperties = [
+  "layout",
+  "dataKey",
+  "xAxisId",
+  "yAxisId",
+  "legendType",
+  "label",
+  "data",
+  "barSize",
+  "maxBarSize",
+  "minPointSize",
+  "background",
+  "shape",
+  "activeBar",
+  "stackId",
+  "unit",
+  "name",
+  "isAnimationActive",
+  "animationBegin",
+  "animationDuration",
+  "animationEasing",
+  "id",
+  "onAnimationStart",
+  "onAnimationEnd",
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseMove",
+  "onMouseOver",
+  "onMouseOut",
+  "onMouseEnter",
+  "onMouseLeave",
+  "radius"
+];
+var radarProperties = [
+  "dataKey",
+  "points",
+  "shape",
+  "dot",
+  "activeDot",
+  "legendType",
+  "label",
+  "isAnimationActive",
+  "animationBegin",
+  "animationDuration",
+  "animationEasing",
+  "onAnimationStart",
+  "onAnimationEnd"
+];
+var lineProperties = [
+  "type",
+  "dataKey",
+  "xAxisId",
+  "yAxisId",
+  "legendType",
+  "dot",
+  "activeDot",
+  "label",
+  "hide",
+  "points",
+  "stroke",
+  "strokeWidth",
+  "layout",
+  "connectNulls",
+  "unit",
+  "name",
+  "isAnimationActive",
+  "animationBegin",
+  "animationDuration",
+  "animationEasing",
+  "id",
+  "onAnimationStart",
+  "onAnimationEnd",
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseMove",
+  "onMouseOver",
+  "onMouseOut",
+  "onMouseEnter",
+  "onMouseLeave",
+  "strokeDasharray"
+];
+var dotProperties = [
+  "cx",
+  "cy",
+  "r",
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseMove",
+  "onMouseOver",
+  "onMouseOut",
+  "onMouseEnter",
+  "onMouseLeave"
+];
+var polarGridProperties = [
+  "cx",
+  "cy",
+  "innerRadius",
+  "outerRadius",
+  "polarAngles",
+  "polarRadius",
+  "gridType"
+];
+var polarAngleAxisProperties = [
+  "dataKey",
+  "cx",
+  "cy",
+  "radius",
+  "axisLine",
+  "axisLineType",
+  "tickLine",
+  "tickSize",
+  "tick",
+  "ticks",
+  "orient",
+  "tickFormatter",
+  "type",
+  "allowDuplicatedCategory",
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseMove",
+  "onMouseOver",
+  "onMouseOut",
+  "onMouseEnter",
+  "onMouseLeave"
+];
+var polarRadiusAxisProperties = [
+  "angle",
+  "type",
+  "allowDuplicatedCategory",
+  "cx",
+  "cy",
+  "domain",
+  "reversed",
+  "label",
+  "orientation",
+  "axisLine",
+  "tick",
+  "tickSize",
+  "tickFormatter",
+  "tickCount",
+  "scale",
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseMove",
+  "onMouseOver",
+  "onMouseOut",
+  "onMouseEnter",
+  "onMouseLeave"
+];
+
+// src/use-chart.ts
+var [ChartProvider, useChartContext] = (0, import_utils2.createContext)({
+  name: "ChartContext",
+  errorMessage: `useChartContext returned is 'undefined'. Seems you forgot to wrap the components in "<LineChart />" or "<BarChart />" etc.`
+});
+var useChart = ({ containerProps = {} }) => {
+  const { theme } = (0, import_core2.useTheme)();
+  const [reChartsProps, propClassName] = getComponentProps([
+    containerProps,
+    containerProperties
+  ])(theme);
+  const getContainerProps = (0, import_react.useCallback)(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      className: (0, import_utils2.cx)("ui-chart__container", className, propClassName),
+      ...props,
+      ...reChartsProps
+    }),
+    [propClassName, reChartsProps]
+  );
+  return {
+    getContainerProps
+  };
+};
+var useLegend = ({} = {}) => {
+  const { styles } = useChartContext();
+  return {
+    styles
+  };
+};
+var useTooltip = ({} = {}) => {
+  const { styles } = useChartContext();
+  return {
+    styles
+  };
+};
+
+// src/chart-legend.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ChartLegend = (0, import_core3.forwardRef)(
+  ({ className, payload = [], onHighlight, ...rest }, ref) => {
+    const { styles } = useLegend();
+    const items = payload.map(({ dataKey, color }, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_core3.ui.div,
+      {
+        className: "ui-chart__legend-item",
+        onMouseEnter: () => onHighlight(dataKey),
+        onMouseLeave: () => onHighlight(null),
+        __css: styles.legendItem,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_core3.ui.div,
+            {
+              className: "ui-chart__legend-swatch",
+              background: color,
+              __css: styles.legendSwatch
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core3.ui.span, { className: "ui-chart__legend-label", children: dataKey })
+        ]
+      },
+      `legend-${index}`
+    ));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_core3.ui.div,
+      {
+        ref,
+        className: (0, import_utils3.cx)("ui-chart__legend", className),
+        __css: styles.legend,
+        ...rest,
+        children: items
+      }
+    );
+  }
+);
+
+// src/chart-tooltip.tsx
+var import_core4 = require("@yamada-ui/core");
+var import_utils4 = require("@yamada-ui/utils");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ChartTooltip = (0, import_core4.forwardRef)(
+  ({ label, className, payload = [], valueFormatter, unit, ...rest }, ref) => {
+    const { styles } = useTooltip();
+    const items = payload.map(
+      ({ color, name, value: valueProp } = {}, index) => {
+        var _a;
+        let value;
+        if ((0, import_utils4.isArray)(valueProp)) {
+          value = valueProp.map((value2) => {
+            var _a2;
+            return `${(_a2 = valueFormatter == null ? void 0 : valueFormatter(value2)) != null ? _a2 : value2}`;
+          }).join(" - ");
+        } else {
+          value = (_a = valueFormatter == null ? void 0 : valueFormatter(valueProp)) != null ? _a : valueProp;
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          import_core4.ui.div,
+          {
+            className: "ui-chart__tooltip-item",
+            __css: styles.tooltipItem,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_core4.ui.div,
+                {
+                  className: "ui-chart__tooltip-swatch",
+                  background: color,
+                  __css: styles.tooltipSwatch
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_core4.ui.span,
+                {
+                  className: "ui-chart__tooltip-label",
+                  __css: styles.tooltipLabel,
+                  children: name
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                import_core4.ui.span,
+                {
+                  className: "ui-chart__tooltip-value",
+                  __css: styles.tooltipValue,
+                  children: [
+                    value,
+                    unit ? unit : ""
+                  ]
+                }
+              )
+            ]
+          },
+          `tooltip-payload-${index}`
+        );
+      }
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_core4.ui.div,
+      {
+        ref,
+        className: (0, import_utils4.cx)("ui-chart__tooltip", className),
+        __css: styles.tooltip,
+        ...rest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core4.ui.p, { className: "ui-chart__tooltip-title", __css: styles.tooltipTitle, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core4.ui.div, { className: "ui-chart__tooltip-list", __css: styles.tooltipList, children: items })
+        ]
+      }
+    );
+  }
+);
+
+// src/use-chart-axis.ts
+var import_core5 = require("@yamada-ui/core");
+var import_utils5 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+var useChartAxis = ({
+  dataKey,
+  type,
+  layoutType = "horizontal",
+  tickLine = "y",
+  gridAxis = "x",
+  withXAxis = true,
+  withYAxis = true,
+  xAxisProps: _xAxisProps = {},
+  yAxisProps: _yAxisProps = {},
+  unit,
+  valueFormatter,
+  styles
+}) => {
+  const { theme } = (0, import_core5.useTheme)();
+  const xAxisKey = (0, import_react2.useMemo)(
+    () => layoutType === "vertical" ? { type: "number" } : { dataKey },
+    [dataKey, layoutType]
+  );
+  const yAxisKey = (0, import_react2.useMemo)(
+    () => layoutType === "vertical" ? { dataKey, type: "category" } : { type: "number" },
+    [dataKey, layoutType]
+  );
+  const withXTickLine = gridAxis !== "none" && (tickLine === "x" || tickLine === "xy");
+  const withYTickLine = gridAxis !== "none" && (tickLine === "y" || tickLine === "xy");
+  const getTickLine = (withTickLine) => withTickLine ? { stroke: "currentColor" } : false;
+  const xTickLine = getTickLine(withXTickLine);
+  const yTickLine = getTickLine(withYTickLine);
+  const yAxisTickFormatter = type === "percent" && layoutType !== "vertical" ? valueToPercent : valueFormatter;
+  const xAxisTickFormatter = type === "percent" && layoutType === "vertical" ? valueToPercent : valueFormatter;
+  const [xAxisReChartsProps, xAxisClassName] = getComponentProps(
+    [_xAxisProps, xAxisProperties],
+    styles.xAxis
+  )(theme);
+  const [yAxisReChartsProps, yAxisClassName] = getComponentProps(
+    [_yAxisProps, yAxisProperties],
+    styles.yAxis
+  )(theme);
+  const getXAxisProps = (0, import_react2.useCallback)(
+    ({ className, ...props } = {}) => ({
+      className: (0, import_utils5.cx)(className, xAxisClassName),
+      hide: !withXAxis,
+      ...xAxisKey,
+      tick: {
+        transform: "translate(0, 10)",
+        fill: "currentColor"
+      },
+      stroke: "",
+      interval: "preserveStartEnd",
+      tickLine: xTickLine,
+      minTickGap: 5,
+      tickFormatter: xAxisTickFormatter,
+      ...props,
+      ...xAxisReChartsProps
+    }),
+    [
+      xAxisClassName,
+      withXAxis,
+      xAxisKey,
+      xTickLine,
+      xAxisTickFormatter,
+      xAxisReChartsProps
+    ]
+  );
+  const getYAxisProps = (0, import_react2.useCallback)(
+    ({ className, ...props } = {}) => ({
+      className: (0, import_utils5.cx)(className, yAxisClassName),
+      hide: !withYAxis,
+      axisLine: false,
+      ...yAxisKey,
+      tickLine: yTickLine,
+      tick: {
+        transform: "translate(-10, 0)",
+        fill: "currentColor"
+      },
+      allowDecimals: true,
+      unit,
+      tickFormatter: yAxisTickFormatter,
+      ...props,
+      ...yAxisReChartsProps
+    }),
+    [
+      yAxisClassName,
+      withYAxis,
+      yAxisKey,
+      yTickLine,
+      unit,
+      yAxisTickFormatter,
+      yAxisReChartsProps
+    ]
+  );
+  return { getXAxisProps, getYAxisProps };
+};
+var valueToPercent = (value) => {
+  return `${(value * 100).toFixed(0)}%`;
+};
+
+// src/use-chart-grid.ts
+var import_core6 = require("@yamada-ui/core");
+var import_utils6 = require("@yamada-ui/utils");
+var import_react3 = require("react");
+var useChartGrid = ({
+  gridProps = {},
+  gridAxis = "x",
+  strokeDasharray = "5 5",
+  styles
+}) => {
+  const { theme } = (0, import_core6.useTheme)();
+  const [reChartsProps, propClassName] = getComponentProps(
+    [gridProps, gridProperties],
+    styles.grid
+  )(theme);
+  const getGridProps = (0, import_react3.useCallback)(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      className: (0, import_utils6.cx)("ui-chart__grid", className, propClassName),
+      strokeDasharray,
+      vertical: gridAxis === "y" || gridAxis === "xy",
+      horizontal: gridAxis === "x" || gridAxis === "xy",
+      ...props,
+      ...reChartsProps
+    }),
+    [propClassName, strokeDasharray, gridAxis, reChartsProps]
+  );
+  return { getGridProps };
+};
+
+// src/use-chart-legend.ts
+var import_utils7 = require("@yamada-ui/utils");
+var import_react4 = require("react");
+var useChartLegend = ({
+  legendProps: _legendProps = {}
+}) => {
+  const [rest, legendProps] = (0, import_utils7.splitObject)(
+    _legendProps,
+    legendProperties
+  );
+  const getLegendProps = (0, import_react4.useCallback)(
+    (props, ref = null) => {
+      return {
+        ref,
+        verticalAlign: "top",
+        ...props,
+        ...rest
+      };
+    },
+    [rest]
+  );
+  return { legendProps, getLegendProps };
+};
+
+// src/use-chart-reference-line.ts
+var import_core7 = require("@yamada-ui/core");
+var import_utils8 = require("@yamada-ui/utils");
+var import_react5 = require("react");
+var useChartReferenceLine = ({
+  referenceLineProps = [],
+  styles
+}) => {
+  const { theme } = (0, import_core7.useTheme)();
+  const styleClassName = (0, import_core7.getCSS)(styles.referenceLine)(theme);
+  const propList = (0, import_react5.useMemo)(
+    () => referenceLineProps.map((props, index) => {
+      const [{ label: labelProp, ...rest }, propClassName] = getComponentProps(
+        [props, referenceLineProperties],
+        styleClassName
+      )(theme);
+      const color = `var(--ui-reference-line-${index})`;
+      const label = {
+        value: labelProp,
+        fill: color,
+        position: "insideBottomLeft",
+        ...(0, import_utils8.isObject)(labelProp) ? labelProp : {}
+      };
+      return { propClassName, color, label, ...rest };
+    }),
+    [referenceLineProps, styleClassName, theme]
+  );
+  const getReferenceLineProps = (0, import_react5.useCallback)(
+    ({ index, className, ...props }, ref = null) => {
+      const { propClassName, color, label, ...rest } = propList[index];
+      return {
+        ref,
+        className: (0, import_utils8.cx)(className, propClassName),
+        stroke: color,
+        label,
+        ...props,
+        ...rest
+      };
+    },
+    [propList]
+  );
+  return { getReferenceLineProps };
+};
+
+// src/use-chart-tooltip.ts
+var import_utils9 = require("@yamada-ui/utils");
+var import_react6 = require("react");
+var useChartTooltip = ({
+  tooltipProps: _tooltipProps = {},
+  tooltipAnimationDuration = 0,
+  styles
+}) => {
+  const { cursor, ...rest } = _tooltipProps;
+  const resolvedCursor = (0, import_react6.useMemo)(
+    () => ({ ...styles.cursor, ...cursor }),
+    [cursor, styles]
+  );
+  const tooltipVars = (0, import_react6.useMemo)(
+    () => [
+      {
+        __prefix: "ui",
+        name: "cursor-fill",
+        token: "colors",
+        value: resolvedCursor.fill
+      },
+      {
+        __prefix: "ui",
+        name: "cursor-stroke",
+        token: "colors",
+        value: resolvedCursor.stroke
+      },
+      {
+        __prefix: "ui",
+        name: "cursor-stroke-width",
+        token: "colors",
+        value: resolvedCursor.strokeWidth
+      },
+      {
+        __prefix: "ui",
+        name: "cursor-stroke-dasharray",
+        token: "colors",
+        value: resolvedCursor.strokeDasharray
+      }
+    ],
+    [resolvedCursor]
+  );
+  const [tooltipProps, tooltipUIProps] = (0, import_utils9.splitObject)(
+    rest,
+    tooltipProperties
+  );
+  const getTooltipProps = (0, import_react6.useCallback)(
+    (props, ref = null) => ({
+      ref,
+      animationDuration: tooltipAnimationDuration,
+      isAnimationActive: (tooltipAnimationDuration || 0) > 0,
+      cursor: {
+        fill: "var(--ui-cursor-fill)",
+        stroke: "var(--ui-cursor-stroke)",
+        strokeWidth: "var(--ui-cursor-stroke-width)",
+        strokeDasharray: "var(--ui-cursor-stroke-dasharray)"
+      },
+      ...props,
+      ...tooltipProps
+    }),
+    [tooltipAnimationDuration, tooltipProps]
+  );
+  return { tooltipProps: tooltipUIProps, getTooltipProps, tooltipVars };
+};
+
+// src/use-line-chart.ts
+var import_core8 = require("@yamada-ui/core");
+var import_utils10 = require("@yamada-ui/utils");
+var import_react7 = require("react");
+var useLineChart = ({
+  data,
+  series,
+  layoutType = "horizontal",
+  withDots = true,
+  withActiveDots = true,
+  curveType = "monotone",
+  strokeWidth = 2,
+  connectNulls = true,
+  referenceLineProps,
+  fillOpacity = 1,
+  styles,
+  ...rest
+}) => {
+  var _a;
+  const { theme } = (0, import_core8.useTheme)();
+  const [highlightedArea, setHighlightedArea] = (0, import_react7.useState)(null);
+  const shouldHighlight = highlightedArea !== null;
+  const {
+    dot = {},
+    activeDot = {},
+    dimDot,
+    dimLine,
+    ...computedLineProps
+  } = (_a = rest.lineProps) != null ? _a : {};
+  const lineColors = (0, import_react7.useMemo)(
+    () => series.map(({ color }, index) => ({
+      __prefix: "ui",
+      name: `line-${index}`,
+      token: "colors",
+      value: color != null ? color : "transparent"
+    })),
+    [series]
+  );
+  const referenceLineColors = (0, import_react7.useMemo)(
+    () => referenceLineProps ? referenceLineProps.map(({ color }, index) => ({
+      __prefix: "ui",
+      name: `reference-line-${index}`,
+      token: "colors",
+      value: color != null ? color : "transparent"
+    })) : [],
+    [referenceLineProps]
+  );
+  const lineVars = (0, import_react7.useMemo)(
+    () => [
+      ...lineColors,
+      ...referenceLineColors,
+      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
+    ],
+    [fillOpacity, lineColors, referenceLineColors]
+  );
+  const [lineChartProps, lineChartClassName] = (0, import_react7.useMemo)(
+    () => {
+      var _a2;
+      return getComponentProps(
+        [(_a2 = rest.lineChartProps) != null ? _a2 : {}, lineChartProperties],
+        styles.chart
+      )(theme);
+    },
+    [rest.lineChartProps, styles.chart, theme]
+  );
+  const [lineProps, lineClassName] = (0, import_react7.useMemo)(() => {
+    const resolvedLineProps = {
+      fillOpacity: "var(--ui-fill-opacity)",
+      strokeOpacity: "var(--ui-fill-opacity)",
+      ...computedLineProps
+    };
+    return getComponentProps(
+      [resolvedLineProps, lineProperties],
+      styles.line
+    )(theme);
+  }, [computedLineProps, styles.line, theme]);
+  const [dimLineProps, dimLineClassName] = (0, import_react7.useMemo)(() => {
+    const resolvedDimLine = { fillOpacity: 0, strokeOpacity: 0.3, ...dimLine };
+    return getComponentProps([resolvedDimLine, lineProperties])(
+      theme
+    );
+  }, [dimLine, theme]);
+  const [dotProps, dotClassName] = (0, import_react7.useMemo)(() => {
+    const resolvedDot = { fillOpacity: 1, strokeOpacity: 1, ...dot };
+    return getComponentProps(
+      [resolvedDot, dotProperties],
+      styles.dot
+    )(theme);
+  }, [dot, styles.dot, theme]);
+  const [activeDotProps, activeDotClassName] = (0, import_react7.useMemo)(
+    () => getComponentProps(
+      [activeDot, dotProperties],
+      styles.activeDot
+    )(theme),
+    [activeDot, styles.activeDot, theme]
+  );
+  const [dimDotProps, dimDotClassName] = (0, import_react7.useMemo)(() => {
+    const resolvedDimDot = {
+      fillOpacity: 0,
+      strokeOpacity: 0,
+      ...dimDot
+    };
+    return getComponentProps([resolvedDimDot, dotProperties])(
+      theme
+    );
+  }, [dimDot, theme]);
+  const linePropList = (0, import_react7.useMemo)(
+    () => series.map((props, index) => {
+      const {
+        dataKey,
+        dot: dot2 = {},
+        activeDot: activeDot2 = {},
+        dimDot: dimDot2 = {},
+        dimLine: dimLine2 = {},
+        ...computedProps
+      } = props;
+      const color = `var(--ui-line-${index})`;
+      const dimmed = shouldHighlight && highlightedArea !== dataKey;
+      const computedDimLine = { ...dimLineProps, ...dimLine2 };
+      const resolvedProps = {
+        ...lineProps,
+        ...computedProps,
+        ...dimmed ? computedDimLine : {}
+      };
+      const rest2 = getComponentProps(
+        [resolvedProps, lineProperties],
+        lineClassName,
+        dimmed ? dimLineClassName : void 0
+      )(theme, true);
+      let resolvedActiveDot;
+      if (withActiveDots) {
+        const computedActiveDot = { ...activeDotProps, ...activeDot2 };
+        const [rest3, className] = getComponentProps(
+          [computedActiveDot, dotProperties],
+          activeDotClassName
+        )(theme);
+        resolvedActiveDot = {
+          className: (0, import_utils10.cx)("ui-line-chart__active-dot", className),
+          fill: color,
+          stroke: color,
+          r: 4,
+          ...rest3
+        };
+      } else {
+        resolvedActiveDot = false;
+      }
+      let resolvedDot;
+      if (withDots) {
+        const computedDimDot = { ...dimDotProps, ...dimDot2 };
+        const computedDot = {
+          ...dotProps,
+          ...dot2,
+          ...dimmed ? computedDimDot : {}
+        };
+        const [rest3, className] = getComponentProps(
+          [computedDot, dotProperties],
+          dotClassName,
+          dimmed ? dimDotClassName : void 0
+        )(theme);
+        resolvedDot = {
+          className: (0, import_utils10.cx)("ui-line-chart__dot", className),
+          fill: color,
+          ...rest3
+        };
+      } else {
+        resolvedDot = false;
+      }
+      return {
+        ...rest2,
+        color,
+        dataKey,
+        activeDot: resolvedActiveDot,
+        dot: resolvedDot
+      };
+    }),
+    [
+      series,
+      shouldHighlight,
+      highlightedArea,
+      dimLineProps,
+      lineProps,
+      lineClassName,
+      dimLineClassName,
+      theme,
+      withActiveDots,
+      withDots,
+      activeDotProps,
+      activeDotClassName,
+      dimDotProps,
+      dotProps,
+      dotClassName,
+      dimDotClassName
+    ]
+  );
+  const getLineChartProps = (0, import_react7.useCallback)(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      className: (0, import_utils10.cx)(className, lineChartClassName),
+      data,
+      layout: layoutType,
+      ...props,
+      ...lineChartProps
+    }),
+    [data, layoutType, lineChartClassName, lineChartProps]
+  );
+  const getLineProps = (0, import_react7.useCallback)(
+    ({ index, className: classNameProp, ...props }, ref = null) => {
+      const { color, className, dataKey, activeDot: activeDot2, dot: dot2, ...rest2 } = linePropList[index];
+      return {
+        ref,
+        className: (0, import_utils10.cx)(classNameProp, className),
+        activeDot: activeDot2,
+        dot: dot2,
+        name: dataKey,
+        type: curveType,
+        dataKey,
+        fill: color,
+        strokeWidth,
+        stroke: color,
+        isAnimationActive: false,
+        connectNulls,
+        ...props,
+        ...rest2
+      };
+    },
+    [connectNulls, curveType, linePropList, strokeWidth]
+  );
+  return {
+    getLineProps,
+    getLineChartProps,
+    lineVars,
+    setHighlightedArea
+  };
+};
+
+// src/line-chart.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var LineChart = (0, import_core9.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core9.useMultiComponentStyle)("LineChart", props);
+  const {
+    className,
+    containerProps,
+    gridProps,
+    gridAxis,
+    strokeDasharray,
+    dataKey,
+    type,
+    layoutType,
+    tickLine,
+    withXAxis,
+    withYAxis,
+    xAxisProps,
+    yAxisProps,
+    unit,
+    valueFormatter,
+    referenceLineProps,
+    tooltipProps,
+    tooltipAnimationDuration,
+    legendProps,
+    withLegend = false,
+    withTooltip = true,
+    series,
+    data,
+    lineChartProps,
+    lineProps,
+    withDots,
+    withActiveDots,
+    curveType,
+    strokeWidth,
+    connectNulls,
+    fillOpacity,
+    ...rest
+  } = (0, import_core9.omitThemeProps)(mergedProps);
+  const { getLineProps, getLineChartProps, lineVars, setHighlightedArea } = useLineChart({
+    layoutType,
+    series,
+    referenceLineProps,
+    data,
+    lineChartProps,
+    lineProps,
+    withDots,
+    withActiveDots,
+    curveType,
+    strokeWidth,
+    connectNulls,
+    fillOpacity,
+    styles
+  });
+  const { getContainerProps } = useChart({ containerProps });
+  const { getXAxisProps, getYAxisProps } = useChartAxis({
+    dataKey,
+    type,
+    layoutType,
+    tickLine,
+    gridAxis,
+    withXAxis,
+    withYAxis,
+    xAxisProps,
+    yAxisProps,
+    unit,
+    valueFormatter,
+    styles
+  });
+  const { getReferenceLineProps } = useChartReferenceLine({
+    referenceLineProps,
+    styles
+  });
+  const { getGridProps } = useChartGrid({
+    gridProps,
+    gridAxis,
+    strokeDasharray,
+    styles
+  });
+  const {
+    tooltipProps: computedTooltipProps,
+    getTooltipProps,
+    tooltipVars
+  } = useChartTooltip({
+    tooltipProps,
+    tooltipAnimationDuration,
+    styles
+  });
+  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
+    legendProps
+  });
+  const lines = (0, import_react8.useMemo)(
+    () => series.map(({ dataKey: dataKey2 }, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_recharts.Line,
+      {
+        ...getLineProps({ index, className: "ui-line-chart__line" })
+      },
+      `line-${dataKey2}`
+    )),
+    [getLineProps, series]
+  );
+  const referenceLinesItems = (0, import_react8.useMemo)(
+    () => referenceLineProps == null ? void 0 : referenceLineProps.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_recharts.ReferenceLine,
+      {
+        ...getReferenceLineProps({
+          index,
+          className: "ui-line-chart__reference-line"
+        })
+      },
+      `referenceLine-${index}`
+    )),
+    [getReferenceLineProps, referenceLineProps]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_core9.ui.div,
+    {
+      ref,
+      className: (0, import_utils11.cx)("ui-line-chart", className),
+      var: [...lineVars, ...tooltipVars],
+      __css: { maxW: "full", ...styles.container },
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_recharts.ResponsiveContainer,
+        {
+          ...getContainerProps({ className: "ui-line-chart__container" }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            import_recharts.LineChart,
+            {
+              ...getLineChartProps({ className: "ui-line-chart__chart" }),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_recharts.CartesianGrid,
+                  {
+                    ...getGridProps({ className: "ui-line-chart__grid" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts.XAxis, { ...getXAxisProps({ className: "ui-line-chart__x-axis" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts.YAxis, { ...getYAxisProps({ className: "ui-line-chart__y-axis" }) }),
+                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_recharts.Legend,
+                  {
+                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      ChartLegend,
+                      {
+                        className: "ui-line-chart__legend",
+                        payload,
+                        onHighlight: setHighlightedArea,
+                        ...computedLegendProps
+                      }
+                    ),
+                    ...getLegendProps()
+                  }
+                ) : null,
+                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_recharts.Tooltip,
+                  {
+                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      ChartTooltip,
+                      {
+                        className: "ui-line-chart__tooltip",
+                        label,
+                        payload,
+                        valueFormatter,
+                        unit,
+                        ...computedTooltipProps
+                      }
+                    ),
+                    ...getTooltipProps()
+                  }
+                ) : null,
+                lines,
+                referenceLinesItems
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+});
+
+// src/bar-chart.tsx
+var import_core11 = require("@yamada-ui/core");
+var import_utils13 = require("@yamada-ui/utils");
+var import_react10 = require("react");
+var import_recharts2 = require("recharts");
+
+// src/use-bar-chart.ts
+var import_core10 = require("@yamada-ui/core");
+var import_utils12 = require("@yamada-ui/utils");
+var import_react9 = require("react");
+var useBarChart = ({
+  data,
+  series,
+  type = "default",
+  layoutType = "horizontal",
+  referenceLineProps = [],
+  fillOpacity = 1,
+  styles,
+  ...rest
+}) => {
+  var _a;
+  const uuid = (0, import_react9.useId)();
+  const { theme } = (0, import_core10.useTheme)();
+  const [highlightedArea, setHighlightedArea] = (0, import_react9.useState)(null);
+  const stacked = type === "stacked" || type === "percent";
+  const shouldHighlight = highlightedArea !== null;
+  const {
+    activeBar = {},
+    background = {},
+    dimBar,
+    ...computedBarProps
+  } = (_a = rest.barProps) != null ? _a : {};
+  const barColors = (0, import_react9.useMemo)(
+    () => series.map(({ color }, index) => ({
+      __prefix: "ui",
+      name: `bar-${index}`,
+      token: "colors",
+      value: color != null ? color : "transparent"
+    })),
+    [series]
+  );
+  const referenceLineColors = (0, import_react9.useMemo)(
+    () => referenceLineProps.map(({ color }, index) => ({
+      __prefix: "ui",
+      name: `reference-line-${index}`,
+      token: "colors",
+      value: color != null ? color : "transparent"
+    })),
+    [referenceLineProps]
+  );
+  const barVars = (0, import_react9.useMemo)(() => {
+    return [
+      ...barColors,
+      ...referenceLineColors,
+      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
+    ];
+  }, [barColors, fillOpacity, referenceLineColors]);
+  const [barChartProps, barChartClassName] = (0, import_react9.useMemo)(() => {
+    const resolvedBarChartProps = { barGap: 8, ...rest.barChartProps };
+    return getComponentProps(
+      [resolvedBarChartProps, barChartProperties],
+      styles.chart
+    )(theme);
+  }, [rest.barChartProps, styles.chart, theme]);
+  const [barProps, barClassName] = (0, import_react9.useMemo)(() => {
+    const resolvedBarProps = {
+      fillOpacity: "var(--ui-fill-opacity)",
+      strokeOpacity: 1,
+      ...computedBarProps
+    };
+    return getComponentProps(
+      [resolvedBarProps, barProperties],
+      styles.bar
+    )(theme);
+  }, [computedBarProps, styles.bar, theme]);
+  const [dimBarProps, dimBarClassName] = (0, import_react9.useMemo)(() => {
+    const resolvedDimBar = { fillOpacity: 0.3, strokeOpacity: 0, ...dimBar };
+    return getComponentProps([resolvedDimBar, barProperties])(
+      theme
+    );
+  }, [dimBar, theme]);
+  const [activeBarProps, activeBarClassName] = (0, import_react9.useMemo)(
+    () => getComponentProps(
+      [activeBar, barProperties],
+      styles.activeBar
+    )(theme),
+    [activeBar, styles.activeBar, theme]
+  );
+  const [backgroundProps, backgroundClassName] = (0, import_react9.useMemo)(
+    () => getComponentProps(
+      [background, barProperties],
+      styles.background
+    )(theme),
+    [background, styles.background, theme]
+  );
+  const barPropsList = (0, import_react9.useMemo)(
+    () => series.map((props, index) => {
+      const {
+        dataKey,
+        activeBar: activeBar2 = {},
+        background: background2 = {},
+        dimBar: dimBar2 = {},
+        ...computedProps
+      } = props;
+      const id = `${uuid}-${dataKey}`;
+      const color = `var(--ui-bar-${index})`;
+      const dimmed = shouldHighlight && highlightedArea !== dataKey;
+      const computedDimBar = { ...dimBarProps, ...dimBar2 };
+      const resolvedProps = {
+        ...barProps,
+        ...computedProps,
+        ...dimmed ? computedDimBar : {}
+      };
+      const rest2 = getComponentProps(
+        [resolvedProps, barProperties],
+        barClassName,
+        dimmed ? dimBarClassName : void 0
+      )(theme, true);
+      const computedActiveBar = { ...activeBarProps, ...activeBar2 };
+      const resolvedActiveBar = getComponentProps(
+        [computedActiveBar, barProperties],
+        activeBarClassName
+      )(theme, true);
+      const computedBackground = { ...backgroundProps, ...background2 };
+      const resolvedBackground = getComponentProps(
+        [computedBackground, barProperties],
+        backgroundClassName
+      )(theme, true);
+      return {
+        ...rest2,
+        id,
+        activeBar: resolvedActiveBar,
+        background: resolvedBackground,
+        color,
+        dataKey
+      };
+    }),
+    [
+      activeBarClassName,
+      activeBarProps,
+      backgroundClassName,
+      backgroundProps,
+      barClassName,
+      barProps,
+      dimBarClassName,
+      dimBarProps,
+      highlightedArea,
+      series,
+      shouldHighlight,
+      theme,
+      uuid
+    ]
+  );
+  const getBarProps = (0, import_react9.useCallback)(
+    ({ index, className: classNameProp, ...props }, ref = null) => {
+      const { id, className, activeBar: activeBar2, background: background2, color, dataKey, ...rest2 } = barPropsList[index];
+      return {
+        ref,
+        className: (0, import_utils12.cx)(classNameProp, className),
+        activeBar: activeBar2,
+        background: background2,
+        id,
+        name: dataKey,
+        dataKey,
+        fill: color,
+        stroke: color,
+        isAnimationActive: false,
+        stackId: stacked ? "stack" : void 0,
+        ...props,
+        ...rest2
+      };
+    },
+    [barPropsList, stacked]
+  );
+  const getBarChartProps = (0, import_react9.useCallback)(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      className: (0, import_utils12.cx)(className, barChartClassName),
+      data,
+      stackOffset: type === "percent" ? "expand" : void 0,
+      layout: layoutType,
+      ...props,
+      ...barChartProps
+    }),
+    [barChartClassName, barChartProps, data, layoutType, type]
+  );
+  return {
+    barVars,
+    getBarProps,
+    getBarChartProps,
+    setHighlightedArea
+  };
+};
+
+// src/bar-chart.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var BarChart = (0, import_core11.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core11.useMultiComponentStyle)("BarChart", props);
+  const {
+    className,
+    series,
+    dataKey,
+    layoutType,
+    tickLine,
+    gridAxis,
+    withXAxis,
+    withYAxis,
+    barProps,
+    xAxisProps,
+    yAxisProps,
+    type = "default",
+    withTooltip = true,
+    withLegend = false,
+    containerProps,
+    unit,
+    valueFormatter,
+    tooltipProps,
+    tooltipAnimationDuration,
+    legendProps,
+    data,
+    referenceLineProps = [],
+    gridProps,
+    strokeDasharray,
+    fillOpacity,
+    barChartProps,
+    ...rest
+  } = (0, import_core11.omitThemeProps)(mergedProps);
+  const { getBarChartProps, getBarProps, barVars, setHighlightedArea } = useBarChart({
+    data,
+    series,
+    type,
+    layoutType,
+    barChartProps,
+    barProps,
+    referenceLineProps,
+    fillOpacity,
+    styles
+  });
+  const { getContainerProps } = useChart({ containerProps });
+  const { getXAxisProps, getYAxisProps } = useChartAxis({
+    dataKey,
+    type,
+    layoutType,
+    tickLine,
+    gridAxis,
+    withXAxis,
+    withYAxis,
+    xAxisProps,
+    yAxisProps,
+    unit,
+    valueFormatter,
+    styles
+  });
+  const { getReferenceLineProps } = useChartReferenceLine({
+    referenceLineProps,
+    styles
+  });
+  const { getGridProps } = useChartGrid({
+    gridProps,
+    gridAxis,
+    strokeDasharray,
+    styles
+  });
+  const {
+    tooltipProps: computedTooltipProps,
+    getTooltipProps,
+    tooltipVars
+  } = useChartTooltip({
+    tooltipProps,
+    tooltipAnimationDuration,
+    styles
+  });
+  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
+    legendProps
+  });
+  const bars = (0, import_react10.useMemo)(
+    () => series.map(({ dataKey: dataKey2 }, index) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_recharts2.Bar,
+        {
+          ...getBarProps({ index, className: "ui-bar-chart__bar" })
+        },
+        `bar-${dataKey2}`
+      );
+    }),
+    [getBarProps, series]
+  );
+  const referenceLinesItems = (0, import_react10.useMemo)(
+    () => referenceLineProps.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_recharts2.ReferenceLine,
+      {
+        ...getReferenceLineProps({
+          index,
+          className: "ui-bar-chart__reference-line"
+        })
+      },
+      `referenceLine-${index}`
+    )),
+    [getReferenceLineProps, referenceLineProps]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_core11.ui.div,
+    {
+      ref,
+      className: (0, import_utils13.cx)("ui-bar-chart", className),
+      var: [...barVars, ...tooltipVars],
+      __css: { maxW: "full", ...styles.container },
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_recharts2.ResponsiveContainer,
+        {
+          ...getContainerProps({ className: "ui-bar-chart__container" }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            import_recharts2.BarChart,
+            {
+              ...getBarChartProps({ className: "ui-bar-chart__chart" }),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  import_recharts2.CartesianGrid,
+                  {
+                    ...getGridProps({ className: "ui-area-chart__grid" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts2.XAxis, { ...getXAxisProps({ className: "ui-bar-chart__x-axis" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts2.YAxis, { ...getYAxisProps({ className: "ui-bar-chart__y-axis" }) }),
+                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  import_recharts2.Legend,
+                  {
+                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      ChartLegend,
+                      {
+                        className: "ui-bar-chart__legend",
+                        payload,
+                        onHighlight: setHighlightedArea,
+                        ...computedLegendProps
+                      }
+                    ),
+                    ...getLegendProps()
+                  }
+                ) : null,
+                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  import_recharts2.Tooltip,
+                  {
+                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      ChartTooltip,
+                      {
+                        className: "ui-bar-chart__tooltip",
+                        label,
+                        payload,
+                        valueFormatter,
+                        unit,
+                        ...computedTooltipProps
+                      }
+                    ),
+                    ...getTooltipProps()
+                  }
+                ) : null,
+                bars,
+                referenceLinesItems
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+});
+
+// src/area-chart.tsx
+var import_core13 = require("@yamada-ui/core");
+var import_utils15 = require("@yamada-ui/utils");
+var import_react12 = require("react");
+var import_recharts3 = require("recharts");
+
+// src/area-chart-gradient.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var AreaGradient = ({
+  color,
+  id,
+  withGradient,
+  fillOpacity
+}) => {
+  if (withGradient) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { offset: "0%", stopColor: color, stopOpacity: fillOpacity }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { offset: "100%", stopColor: color, stopOpacity: 0.01 })
+    ] });
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("stop", { stopColor: color, stopOpacity: fillOpacity }) });
+  }
+};
+
+// src/area-chart-split.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var AreaSplit = ({ offset, id, fillOpacity }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "stop",
+      {
+        offset,
+        stopColor: "var(--ui-area-split-0)",
+        stopOpacity: fillOpacity != null ? fillOpacity : 0.4
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "stop",
+      {
+        offset,
+        stopColor: "var(--ui-area-split-1)",
+        stopOpacity: fillOpacity != null ? fillOpacity : 0.4
+      }
+    )
+  ] });
+};
+
+// src/use-area-chart.ts
+var import_core12 = require("@yamada-ui/core");
+var import_utils14 = require("@yamada-ui/utils");
+var import_react11 = require("react");
+var useAreaChart = ({
+  data,
+  series,
+  type,
+  layoutType = "horizontal",
+  withGradient: withGradientProp,
+  withDots = true,
+  withActiveDots = true,
+  curveType = "monotone",
+  strokeWidth = 2,
+  connectNulls = true,
+  fillOpacity = 0.4,
+  splitColors = ["#ee6a5d", "#5fce7d"],
+  splitOffset,
+  referenceLineProps,
+  styles,
+  ...rest
+}) => {
+  var _a;
+  const uuid = (0, import_react11.useId)();
+  const { theme } = (0, import_core12.useTheme)();
+  const [highlightedArea, setHighlightedArea] = (0, import_react11.useState)(null);
+  const splitId = `${uuid}-split`;
+  const stacked = type === "stacked" || type === "percent";
+  const withGradient = typeof withGradientProp === "boolean" ? withGradientProp : type === "default";
+  const shouldHighlight = highlightedArea !== null;
+  const {
+    dot = {},
+    activeDot = {},
+    dimDot,
+    dimArea,
+    ...computedAreaProps
+  } = (_a = rest.areaProps) != null ? _a : {};
+  const areaColors = (0, import_react11.useMemo)(
+    () => series.map(({ color }, index) => ({
+      __prefix: "ui",
+      name: `area-${index}`,
+      token: "colors",
+      value: color != null ? color : "transparent"
+    })),
+    [series]
+  );
+  const areaSplitColors = (0, import_react11.useMemo)(
+    () => splitColors.map((color, index) => ({
+      __prefix: "ui",
+      name: `area-split-${index}`,
+      token: "colors",
+      value: color != null ? color : "transparent"
+    })),
+    [splitColors]
+  );
+  const referenceLineColors = (0, import_react11.useMemo)(
+    () => referenceLineProps ? referenceLineProps.map(({ color }, index) => ({
+      __prefix: "ui",
+      name: `reference-line-${index}`,
+      token: "colors",
+      value: color != null ? color : "transparent"
+    })) : [],
+    [referenceLineProps]
+  );
+  const areaVars = (0, import_react11.useMemo)(() => {
+    return [
+      ...areaColors,
+      ...areaSplitColors,
+      ...referenceLineColors,
+      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
+    ];
+  }, [areaColors, areaSplitColors, referenceLineColors, fillOpacity]);
+  const [areaChartProps, areaChartClassName] = (0, import_react11.useMemo)(
+    () => {
+      var _a2;
+      return getComponentProps(
+        [(_a2 = rest.areaChartProps) != null ? _a2 : {}, areaChartProperties],
+        styles.chart
+      )(theme);
+    },
+    [rest.areaChartProps, styles.chart, theme]
+  );
+  const [areaProps, areaClassName] = (0, import_react11.useMemo)(() => {
+    const resolvedAreaProps = {
+      fillOpacity: 1,
+      strokeOpacity: 1,
+      ...computedAreaProps
+    };
+    return getComponentProps(
+      [resolvedAreaProps, areaProperties],
+      styles.area
+    )(theme);
+  }, [computedAreaProps, styles.area, theme]);
+  const [dimAreaProps, dimAreaClassName] = (0, import_react11.useMemo)(() => {
+    const resolvedDimArea = {
+      fillOpacity: 0,
+      strokeOpacity: 0.3,
+      ...dimArea
+    };
+    return getComponentProps([resolvedDimArea, areaProperties])(
+      theme
+    );
+  }, [dimArea, theme]);
+  const [dotProps, dotClassName] = (0, import_react11.useMemo)(() => {
+    const resolvedDot = { fillOpacity: 1, strokeWidth: 2, ...dot };
+    return getComponentProps(
+      [resolvedDot, dotProperties],
+      styles.dot
+    )(theme);
+  }, [dot, styles.dot, theme]);
+  const [activeDotProps, activeDotClassName] = (0, import_react11.useMemo)(
+    () => getComponentProps(
+      [activeDot, dotProperties],
+      styles.activeDot
+    )(theme),
+    [activeDot, styles.activeDot, theme]
+  );
+  const [dimDotProps, dimDotClassName] = (0, import_react11.useMemo)(() => {
+    const resolvedDimDot = { fillOpacity: 0, strokeOpacity: 0, ...dimDot };
+    return getComponentProps([resolvedDimDot, dotProperties])(
+      theme
+    );
+  }, [dimDot, theme]);
+  const defaultSplitOffset = (0, import_react11.useMemo)(() => {
+    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);
+    }
+    return 0.5;
+  }, [data, series]);
+  const areaPropsList = (0, import_react11.useMemo)(
+    () => series.map((props, index) => {
+      const {
+        dataKey,
+        dot: dot2 = {},
+        activeDot: activeDot2 = {},
+        dimDot: dimDot2 = {},
+        dimArea: dimArea2 = {},
+        strokeDasharray,
+        ...computedProps
+      } = props;
+      const id = `${uuid}-${dataKey}`;
+      const color = `var(--ui-area-${index})`;
+      const dimmed = shouldHighlight && highlightedArea !== dataKey;
+      const computedDimArea = { ...dimAreaProps, ...dimArea2 };
+      const resolvedProps = {
+        ...areaProps,
+        ...computedProps,
+        ...dimmed ? computedDimArea : {}
+      };
+      const rest2 = getComponentProps(
+        [resolvedProps, areaProperties],
+        areaClassName,
+        dimmed ? dimAreaClassName : void 0
+      )(theme, true);
+      let resolvedActiveDot;
+      if (withActiveDots) {
+        const computedActiveDot = { ...activeDotProps, ...activeDot2 };
+        const [rest3, className] = getComponentProps(
+          [computedActiveDot, dotProperties],
+          activeDotClassName
+        )(theme);
+        resolvedActiveDot = {
+          className: (0, import_utils14.cx)("ui-area-chart__active-dot", className),
+          stroke: color,
+          r: 4,
+          ...rest3
+        };
+      } else {
+        resolvedActiveDot = false;
+      }
+      let resolvedDot;
+      if (withDots) {
+        const computedDimDot = { ...dimDotProps, ...dimDot2 };
+        const computedDot = {
+          ...dotProps,
+          ...dot2,
+          ...dimmed ? computedDimDot : {}
+        };
+        const [rest3, className] = getComponentProps(
+          [computedDot, dotProperties],
+          dotClassName,
+          dimmed ? dimDotClassName : void 0
+        )(theme);
+        resolvedDot = {
+          className: (0, import_utils14.cx)("ui-area-chart__dot", className),
+          fill: color,
+          r: 4,
+          ...rest3
+        };
+      } else {
+        resolvedDot = false;
+      }
+      return {
+        ...rest2,
+        id,
+        color,
+        strokeDasharray,
+        dataKey,
+        activeDot: resolvedActiveDot,
+        dot: resolvedDot
+      };
+    }),
+    [
+      series,
+      uuid,
+      shouldHighlight,
+      highlightedArea,
+      dimAreaProps,
+      dimDotProps,
+      areaProps,
+      areaClassName,
+      dimAreaClassName,
+      theme,
+      withActiveDots,
+      withDots,
+      activeDotProps,
+      activeDotClassName,
+      dotProps,
+      dotClassName,
+      dimDotClassName
+    ]
+  );
+  const getAreaChartProps = (0, import_react11.useCallback)(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      className: (0, import_utils14.cx)(className, areaChartClassName),
+      data,
+      stackOffset: type === "percent" ? "expand" : void 0,
+      layout: layoutType,
+      ...props,
+      ...areaChartProps
+    }),
+    [areaChartClassName, data, type, layoutType, areaChartProps]
+  );
+  const getAreaSplitProps = (0, import_react11.useCallback)(
+    (props = {}) => ({
+      id: splitId,
+      offset: splitOffset != null ? splitOffset : defaultSplitOffset,
+      fillOpacity: "var(--ui-fill-opacity)",
+      ...props
+    }),
+    [defaultSplitOffset, splitId, splitOffset]
+  );
+  const getAreaProps = (0, import_react11.useCallback)(
+    ({ index, className: classNameProp, ...props }, ref = null) => {
+      const {
+        id,
+        color,
+        className,
+        dataKey,
+        strokeDasharray,
+        activeDot: activeDot2,
+        dot: dot2,
+        ...rest2
+      } = areaPropsList[index];
+      return {
+        ref,
+        className: (0, import_utils14.cx)(classNameProp, className),
+        id,
+        activeDot: activeDot2,
+        dot: dot2,
+        name: dataKey,
+        type: curveType,
+        dataKey,
+        fill: type === "split" ? `url(#${splitId})` : `url(#${id})`,
+        strokeWidth,
+        stroke: color,
+        isAnimationActive: false,
+        connectNulls,
+        stackId: stacked ? "stack" : void 0,
+        strokeDasharray,
+        ...props,
+        ...rest2
+      };
+    },
+    [
+      areaPropsList,
+      connectNulls,
+      curveType,
+      splitId,
+      stacked,
+      strokeWidth,
+      type
+    ]
+  );
+  const getAreaGradientProps = (0, import_react11.useCallback)(
+    (props = {}) => ({
+      withGradient,
+      fillOpacity: "var(--ui-fill-opacity)",
+      ...props
+    }),
+    [withGradient]
+  );
+  return {
+    getAreaChartProps,
+    getAreaSplitProps,
+    getAreaProps,
+    getAreaGradientProps,
+    areaVars,
+    setHighlightedArea
+  };
+};
+
+// src/area-chart.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var AreaChart = (0, import_core13.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core13.useMultiComponentStyle)("AreaChart", props);
+  const {
+    className,
+    series,
+    dataKey,
+    layoutType,
+    tickLine,
+    gridAxis,
+    withXAxis,
+    withYAxis,
+    xAxisProps,
+    yAxisProps,
+    type = "default",
+    withTooltip = true,
+    withLegend = false,
+    referenceLineProps = [],
+    containerProps,
+    unit,
+    gridProps,
+    strokeDasharray,
+    valueFormatter,
+    tooltipProps,
+    tooltipAnimationDuration,
+    legendProps,
+    data,
+    areaChartProps,
+    areaProps,
+    withGradient,
+    withDots,
+    withActiveDots,
+    curveType,
+    strokeWidth,
+    connectNulls,
+    fillOpacity,
+    splitColors,
+    splitOffset,
+    ...rest
+  } = (0, import_core13.omitThemeProps)(mergedProps);
+  const {
+    getAreaChartProps,
+    getAreaSplitProps,
+    getAreaProps,
+    getAreaGradientProps,
+    areaVars,
+    setHighlightedArea
+  } = useAreaChart({
+    layoutType,
+    type,
+    series,
+    referenceLineProps,
+    data,
+    areaChartProps,
+    areaProps,
+    withGradient,
+    withDots,
+    withActiveDots,
+    curveType,
+    strokeWidth,
+    connectNulls,
+    fillOpacity,
+    splitColors,
+    splitOffset,
+    styles
+  });
+  const { getContainerProps } = useChart({ containerProps });
+  const { getXAxisProps, getYAxisProps } = useChartAxis({
+    dataKey,
+    type,
+    layoutType,
+    tickLine,
+    gridAxis,
+    withXAxis,
+    withYAxis,
+    xAxisProps,
+    yAxisProps,
+    unit,
+    valueFormatter,
+    styles
+  });
+  const { getReferenceLineProps } = useChartReferenceLine({
+    referenceLineProps,
+    styles
+  });
+  const { getGridProps } = useChartGrid({
+    gridProps,
+    gridAxis,
+    strokeDasharray,
+    styles
+  });
+  const {
+    tooltipProps: computedTooltipProps,
+    getTooltipProps,
+    tooltipVars
+  } = useChartTooltip({
+    tooltipProps,
+    tooltipAnimationDuration,
+    styles
+  });
+  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
+    legendProps
+  });
+  const areas = (0, import_react12.useMemo)(
+    () => series.map(({ dataKey: dataKey2 }, index) => {
+      const { id, stroke, ...rest2 } = getAreaProps({
+        index,
+        className: "ui-area-chart__area"
+      });
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react12.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AreaGradient, { ...getAreaGradientProps({ id, color: stroke }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts3.Area, { id, stroke, ...rest2 })
+      ] }, `area-${dataKey2}`);
+    }),
+    [getAreaGradientProps, getAreaProps, series]
+  );
+  const referenceLinesItems = (0, import_react12.useMemo)(
+    () => referenceLineProps.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_recharts3.ReferenceLine,
+      {
+        ...getReferenceLineProps({
+          index,
+          className: "ui-area-chart__reference-line"
+        })
+      },
+      `referenceLine-${index}`
+    )),
+    [getReferenceLineProps, referenceLineProps]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_core13.ui.div,
+    {
+      ref,
+      className: (0, import_utils15.cx)("ui-area-chart", className),
+      var: [...areaVars, ...tooltipVars],
+      __css: { maxW: "full", ...styles.container },
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_recharts3.ResponsiveContainer,
+        {
+          ...getContainerProps({ className: "ui-area-chart__container" }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            import_recharts3.AreaChart,
+            {
+              ...getAreaChartProps({ className: "ui-area-chart__chart" }),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_recharts3.CartesianGrid,
+                  {
+                    ...getGridProps({ className: "ui-area-chart__grid" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts3.XAxis, { ...getXAxisProps({ className: "ui-area-chart__x-axis" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts3.YAxis, { ...getYAxisProps({ className: "ui-area-chart__y-axis" }) }),
+                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_recharts3.Legend,
+                  {
+                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      ChartLegend,
+                      {
+                        className: "ui-area-chart__legend",
+                        payload,
+                        onHighlight: setHighlightedArea,
+                        ...computedLegendProps
+                      }
+                    ),
+                    ...getLegendProps()
+                  }
+                ) : null,
+                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_recharts3.Tooltip,
+                  {
+                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      ChartTooltip,
+                      {
+                        className: "ui-area-chart__tooltip",
+                        label,
+                        payload,
+                        valueFormatter,
+                        unit,
+                        ...computedTooltipProps
+                      }
+                    ),
+                    ...getTooltipProps()
+                  }
+                ) : null,
+                type === "split" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AreaSplit, { ...getAreaSplitProps() }) }) : null,
+                areas,
+                referenceLinesItems
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+});
+
+// src/radar-chart.tsx
+var import_core15 = require("@yamada-ui/core");
+var import_utils17 = require("@yamada-ui/utils");
+var import_react14 = require("react");
+var import_recharts4 = require("recharts");
+
+// src/use-radar-chart.ts
+var import_core14 = require("@yamada-ui/core");
+var import_utils16 = require("@yamada-ui/utils");
+var import_react13 = require("react");
+var useRadarChart = ({
+  data,
+  series,
+  dataKey,
+  withDots = false,
+  withActiveDots = false,
+  strokeWidth = 2,
+  fillOpacity = 0.4,
+  valueFormatter,
+  styles,
+  ...rest
+}) => {
+  var _a;
+  const { theme } = (0, import_core14.useTheme)();
+  const [highlightedArea, setHighlightedArea] = (0, import_react13.useState)(null);
+  const shouldHighlight = highlightedArea !== null;
+  const {
+    dot = {},
+    activeDot = {},
+    dimDot,
+    dimRadar,
+    ...computedRadarProps
+  } = (_a = rest.radarProps) != null ? _a : {};
+  const radarColors = (0, import_react13.useMemo)(
+    () => series.map(({ color }, index) => ({
+      __prefix: "ui",
+      name: `radar-${index}`,
+      token: "colors",
+      value: color != null ? color : "transparent"
+    })),
+    [series]
+  );
+  const radarVars = (0, import_react13.useMemo)(
+    () => [
+      ...radarColors,
+      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
+    ],
+    [fillOpacity, radarColors]
+  );
+  const [polarAngleAxisProps, polarAngleAxisStyles] = (0, import_react13.useMemo)(
+    () => {
+      var _a2;
+      return (0, import_utils16.splitObject)(
+        (_a2 = rest.polarAngleAxisProps) != null ? _a2 : {},
+        polarAngleAxisProperties
+      );
+    },
+    [rest.polarAngleAxisProps]
+  );
+  const [polarRadiusAxisProps, polarRadiusAxisStyles] = (0, import_react13.useMemo)(
+    () => {
+      var _a2;
+      return (0, import_utils16.splitObject)(
+        (_a2 = rest.polarRadiusAxisProps) != null ? _a2 : {},
+        polarRadiusAxisProperties
+      );
+    },
+    [rest.polarRadiusAxisProps]
+  );
+  const [radarChartProps, radarChartClassName] = (0, import_react13.useMemo)(() => {
+    const resolvedRadarChartProps = {
+      "& .recharts-polar-grid-concentric-polygon": { ...styles.polarGrid },
+      "& .recharts-polar-grid-concentric-circle": { ...styles.polarGrid },
+      "& .recharts-polar-angle-axis": {
+        ...styles.polarAngleAxis,
+        ...polarAngleAxisStyles
+      },
+      "& .recharts-polar-angle-axis-tick": { ...styles.polarAngleAxisTick },
+      "& .recharts-polar-radius-axis": {
+        ...styles.polarRadiusAxis,
+        ...polarRadiusAxisStyles
+      },
+      "& .recharts-polar-radius-axis-tick": { ...styles.polarRadiusAxisTick },
+      ...rest.radarChartProps
+    };
+    return getComponentProps(
+      [resolvedRadarChartProps, radarChartProperties],
+      styles.chart
+    )(theme);
+  }, [
+    polarAngleAxisStyles,
+    polarRadiusAxisStyles,
+    rest.radarChartProps,
+    styles.chart,
+    styles.polarAngleAxis,
+    styles.polarAngleAxisTick,
+    styles.polarGrid,
+    styles.polarRadiusAxis,
+    styles.polarRadiusAxisTick,
+    theme
+  ]);
+  const [polarGridProps, polarGridClassName] = (0, import_react13.useMemo)(
+    () => {
+      var _a2;
+      return getComponentProps(
+        [(_a2 = rest.polarGridProps) != null ? _a2 : {}, polarGridProperties],
+        styles.polarGrid
+      )(theme);
+    },
+    [rest.polarGridProps, styles.polarGrid, theme]
+  );
+  const [radarProps, radarClassName] = (0, import_react13.useMemo)(() => {
+    const resolvedRadarProps = {
+      fillOpacity: "var(--ui-fill-opacity)",
+      ...computedRadarProps
+    };
+    return getComponentProps(
+      [resolvedRadarProps, radarProperties],
+      styles.radar
+    )(theme);
+  }, [computedRadarProps, styles.radar, theme]);
+  const [dimRadarProps, dimRadarClassName] = (0, import_react13.useMemo)(() => {
+    const resolvedDimRadar = {
+      fillOpacity: 0.3,
+      strokeOpacity: 0.3,
+      ...dimRadar
+    };
+    return getComponentProps([resolvedDimRadar, radarProperties])(
+      theme
+    );
+  }, [dimRadar, theme]);
+  const [dotProps, dotClassName] = (0, import_react13.useMemo)(() => {
+    const resolvedDot = { fillOpacity: 1, strokeWidth: 2, ...dot };
+    return getComponentProps(
+      [resolvedDot, dotProperties],
+      styles.dot
+    )(theme);
+  }, [dot, styles.dot, theme]);
+  const [activeDotProps, activeDotClassName] = (0, import_react13.useMemo)(
+    () => getComponentProps(
+      [activeDot, dotProperties],
+      styles.activeDot
+    )(theme),
+    [activeDot, styles.activeDot, theme]
+  );
+  const [dimDotProps, dimDotClassName] = (0, import_react13.useMemo)(() => {
+    const resolvedDimDot = { fillOpacity: 0, strokeOpacity: 0, ...dimDot };
+    return getComponentProps([resolvedDimDot, dotProperties])(
+      theme
+    );
+  }, [dimDot, theme]);
+  const radarPropList = (0, import_react13.useMemo)(
+    () => series.map((props, index) => {
+      const {
+        dataKey: dataKey2,
+        dot: dot2 = {},
+        activeDot: activeDot2 = {},
+        dimDot: dimDot2 = {},
+        dimRadar: dimRadar2 = {},
+        ...computedProps
+      } = props;
+      const color = `var(--ui-radar-${index})`;
+      const dimmed = shouldHighlight && highlightedArea !== dataKey2;
+      const computedDimRadar = { ...dimRadarProps, ...dimRadar2 };
+      const resolvedProps = {
+        ...radarProps,
+        ...computedProps,
+        ...dimmed ? computedDimRadar : {}
+      };
+      const rest2 = getComponentProps(
+        [resolvedProps, radarProperties],
+        radarClassName,
+        dimmed ? dimRadarClassName : void 0
+      )(theme, true);
+      let resolvedActiveDot;
+      if (withActiveDots) {
+        const computedActiveDot = {
+          ...activeDotProps,
+          ...activeDot2
+        };
+        const [rest3, className] = getComponentProps(
+          [computedActiveDot, dotProperties],
+          activeDotClassName
+        )(theme);
+        resolvedActiveDot = {
+          className: (0, import_utils16.cx)("ui-radar-chart__active-dot", className),
+          fill: color,
+          stroke: color,
+          r: 4,
+          ...rest3
+        };
+      } else {
+        resolvedActiveDot = false;
+      }
+      let resolvedDot;
+      if (withDots) {
+        const computedDimDot = { ...dimDotProps, ...dimDot2 };
+        const computedDot = {
+          ...dotProps,
+          ...dot2,
+          ...dimmed ? computedDimDot : {}
+        };
+        const [rest3, className] = getComponentProps(
+          [computedDot, dotProperties],
+          dotClassName,
+          dimmed ? dimDotClassName : void 0
+        )(theme);
+        resolvedDot = {
+          // BUG: className is not applied.
+          className: (0, import_utils16.cx)("ui-radar-chart__dot", className),
+          fill: color,
+          r: 4,
+          ...rest3
+        };
+      } else {
+        resolvedDot = false;
+      }
+      return {
+        ...rest2,
+        color,
+        dataKey: dataKey2,
+        dot: resolvedDot,
+        activeDot: resolvedActiveDot
+      };
+    }),
+    [
+      activeDotClassName,
+      activeDotProps,
+      dimDotClassName,
+      dimDotProps,
+      dimRadarClassName,
+      dimRadarProps,
+      dotClassName,
+      dotProps,
+      highlightedArea,
+      radarClassName,
+      radarProps,
+      series,
+      shouldHighlight,
+      theme,
+      withActiveDots,
+      withDots
+    ]
+  );
+  const getRadarChartProps = (0, import_react13.useCallback)(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      className: (0, import_utils16.cx)(className, radarChartClassName),
+      data,
+      ...props,
+      ...radarChartProps
+    }),
+    [data, radarChartClassName, radarChartProps]
+  );
+  const getRadarProps = (0, import_react13.useCallback)(
+    ({ index, className: classNameProp, ...props }, ref = null) => {
+      const { color, className, dataKey: dataKey2, activeDot: activeDot2, dot: dot2, ...rest2 } = radarPropList[index];
+      return {
+        ref,
+        className: (0, import_utils16.cx)(classNameProp, className),
+        activeDot: activeDot2,
+        dot: dot2,
+        name: dataKey2,
+        dataKey: dataKey2,
+        fill: color,
+        strokeWidth,
+        stroke: color,
+        isAnimationActive: false,
+        ...props,
+        ...rest2
+      };
+    },
+    [radarPropList, strokeWidth]
+  );
+  const getPolarGridProps = (0, import_react13.useCallback)(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      // BUG: `.recharts-polar-grid-concentric-xxx` is not applied className.
+      className: (0, import_utils16.cx)(className, polarGridClassName),
+      ...props,
+      ...polarGridProps
+    }),
+    [polarGridClassName, polarGridProps]
+  );
+  const getPolarAngleAxisProps = (0, import_react13.useCallback)(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      // BUG: className is not applied.
+      // className: cx(className, polarAngleAxisClassName),
+      className,
+      dataKey,
+      tickFormatter: valueFormatter,
+      tickSize: 16,
+      ...props,
+      ...polarAngleAxisProps
+    }),
+    [
+      dataKey,
+      // polarAngleAxisClassName,
+      polarAngleAxisProps,
+      valueFormatter
+    ]
+  );
+  const getPolarRadiusAxisProps = (0, import_react13.useCallback)(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      // BUG: className is not applied.
+      // className: cx(className, polarRadiusAxisClassName),
+      className,
+      tickFormatter: valueFormatter,
+      ...props,
+      ...polarRadiusAxisProps
+    }),
+    [
+      // polarRadiusAxisClassName,
+      polarRadiusAxisProps,
+      valueFormatter
+    ]
+  );
+  return {
+    radarVars,
+    getRadarChartProps,
+    getRadarProps,
+    getPolarGridProps,
+    getPolarAngleAxisProps,
+    getPolarRadiusAxisProps,
+    setHighlightedArea
+  };
+};
+
+// src/radar-chart.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var RadarChart = (0, import_core15.forwardRef)((props, ref) => {
+  const [styles, mergedProps] = (0, import_core15.useMultiComponentStyle)("RadarChart", props);
+  const {
+    className,
+    data,
+    series,
+    dataKey,
+    radarProps,
+    radarChartProps,
+    polarGridProps,
+    polarAngleAxisProps,
+    polarRadiusAxisProps,
+    containerProps,
+    tooltipProps,
+    legendProps,
+    tooltipAnimationDuration,
+    unit,
+    valueFormatter,
+    withDots,
+    withActiveDots,
+    strokeWidth,
+    fillOpacity,
+    withTooltip = true,
+    withLegend = false,
+    withPolarGrid = true,
+    withPolarAngleAxis = true,
+    withPolarRadiusAxis = false,
+    ...rest
+  } = (0, import_core15.omitThemeProps)(mergedProps);
+  const {
+    getRadarProps,
+    getRadarChartProps,
+    getPolarGridProps,
+    getPolarAngleAxisProps,
+    getPolarRadiusAxisProps,
+    radarVars,
+    setHighlightedArea
+  } = useRadarChart({
+    data,
+    series,
+    dataKey,
+    radarProps,
+    radarChartProps,
+    polarGridProps,
+    polarAngleAxisProps,
+    polarRadiusAxisProps,
+    withDots,
+    withActiveDots,
+    strokeWidth,
+    fillOpacity,
+    valueFormatter,
+    styles
+  });
+  const { getContainerProps } = useChart({ containerProps });
+  const {
+    tooltipProps: computedTooltipProps,
+    getTooltipProps,
+    tooltipVars
+  } = useChartTooltip({
+    tooltipProps,
+    tooltipAnimationDuration,
+    styles
+  });
+  const { legendProps: computedLegendProps, getLegendProps } = useChartLegend({
+    legendProps
+  });
+  const radars = (0, import_react14.useMemo)(
+    () => series.map(({ dataKey: dataKey2 }, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_recharts4.Radar,
+      {
+        ...getRadarProps({ index, className: "ui-radar-chart__radar" })
+      },
+      `radar=${dataKey2}`
+    )),
+    [getRadarProps, series]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_core15.ui.div,
+    {
+      ref,
+      className: (0, import_utils17.cx)("ui-radar-chart", className),
+      var: [...radarVars, ...tooltipVars],
+      __css: { maxW: "full", ...styles.container },
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_recharts4.ResponsiveContainer,
+        {
+          ...getContainerProps({ className: "ui-radar-chart__container" }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            import_recharts4.RadarChart,
+            {
+              ...getRadarChartProps({ className: "ui-radar-chart__chart" }),
+              children: [
+                withPolarGrid ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  import_recharts4.PolarGrid,
+                  {
+                    ...getPolarGridProps({
+                      className: "ui-radar-chart__polar-grid"
+                    })
+                  }
+                ) : null,
+                withPolarAngleAxis ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  import_recharts4.PolarAngleAxis,
+                  {
+                    ...getPolarAngleAxisProps({
+                      className: "ui-radar-chart__polar-angle-axis"
+                    })
+                  }
+                ) : null,
+                withPolarRadiusAxis ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  import_recharts4.PolarRadiusAxis,
+                  {
+                    ...getPolarRadiusAxisProps({
+                      className: "ui-radar-chart__polar-radius-axis"
+                    })
+                  }
+                ) : null,
+                withLegend ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  import_recharts4.Legend,
+                  {
+                    content: ({ payload }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      ChartLegend,
+                      {
+                        className: "ui-area-chart__legend",
+                        payload,
+                        onHighlight: setHighlightedArea,
+                        ...computedLegendProps
+                      }
+                    ),
+                    ...getLegendProps()
+                  }
+                ) : null,
+                withTooltip ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  import_recharts4.Tooltip,
+                  {
+                    content: ({ label, payload }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      ChartTooltip,
+                      {
+                        className: "ui-line-chart__tooltip",
+                        label,
+                        payload,
+                        valueFormatter,
+                        unit,
+                        ...computedTooltipProps
+                      }
+                    ),
+                    ...getTooltipProps()
+                  }
+                ) : null,
+                radars
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AreaChart,
+  BarChart,
+  LineChart,
+  RadarChart
+});
+//# sourceMappingURL=index.js.map