@yamada-ui/charts 1.0.0

package/dist/chart.types.d.mts

@@ -0,0 +1,65 @@
+import { As, HTMLUIProps, CSSUIProps } from '@yamada-ui/core';
+import { Merge } from '@yamada-ui/utils';
+import { ComponentPropsWithoutRef, SVGProps, ReactElement, ReactNode } from 'react';
+import * as Recharts from 'recharts';
+
+type ChartPropGetter<Y extends As = "div", M = undefined, D = undefined> = (props?: Merge<HTMLUIProps<Y>, M>, ref?: React.Ref<any>) => D;
+type RequiredChartPropGetter<Y extends As = "div", M = undefined, D = undefined> = (props: Merge<HTMLUIProps<Y>, M>, ref?: React.Ref<any>) => D;
+type ChartLayoutType = "horizontal" | "vertical";
+type AreaChartType = "default" | "stacked" | "percent" | "split";
+type BarChartType = Exclude<AreaChartType, "split">;
+type ChartAxisType = "x" | "y" | "xy" | "none";
+type ChartCurveType = "bump" | "linear" | "natural" | "monotone" | "step" | "stepBefore" | "stepAfter";
+type AreaChartProps = Merge<CSSUIProps, ComponentPropsWithoutRef<typeof Recharts.AreaChart>>;
+type BarChartProps = Merge<CSSUIProps, ComponentPropsWithoutRef<typeof Recharts.BarChart>>;
+type LineChartProps = Merge<CSSUIProps, ComponentPropsWithoutRef<typeof Recharts.LineChart>>;
+type RadarChartProps = Merge<CSSUIProps, ComponentPropsWithoutRef<typeof Recharts.RadarChart>>;
+type ReferenceLineProps = Merge<CSSUIProps, Recharts.ReferenceLineProps>;
+type ResponsiveContainerProps = Merge<CSSUIProps, Omit<Recharts.ResponsiveContainerProps, "children">>;
+type AreaProps = Merge<Merge<CSSUIProps, Recharts.AreaProps>, {
+    color: CSSUIProps["color"];
+    dot?: DotProps;
+    activeDot?: DotProps;
+    dimDot?: DotProps;
+    dimArea?: Partial<AreaProps>;
+}>;
+type LineProps = Merge<Merge<CSSUIProps, Recharts.LineProps>, {
+    color: CSSUIProps["color"];
+    activeDot?: DotProps;
+    dot?: DotProps;
+    dimDot?: DotProps;
+    dimLine?: Partial<LineProps>;
+}>;
+type BarProps = Merge<Merge<CSSUIProps, Recharts.BarProps>, {
+    color: CSSUIProps["color"];
+    activeBar?: Merge<SVGProps<SVGPathElement>, CSSUIProps>;
+    background?: Merge<SVGProps<SVGPathElement>, CSSUIProps>;
+    dimBar?: Partial<BarProps>;
+}>;
+type RadarProps = Merge<Merge<CSSUIProps, Recharts.RadarProps>, {
+    color: CSSUIProps["color"];
+    dot?: DotProps;
+    activeDot?: DotProps;
+    dimDot?: DotProps;
+    dimRadar?: Partial<RadarProps>;
+}>;
+type DotProps = Merge<Omit<Recharts.DotProps, "ref">, CSSUIProps>;
+type XAxisProps = Merge<Merge<CSSUIProps, Recharts.XAxisProps>, {
+    color?: CSSUIProps["color"];
+    stroke?: CSSUIProps["color"];
+    fill?: CSSUIProps["color"];
+}>;
+type YAxisProps = Merge<Merge<CSSUIProps, Recharts.YAxisProps>, {
+    color?: CSSUIProps["color"];
+}>;
+type LegendProps = Merge<CSSUIProps, Omit<Recharts.LegendProps, "ref">>;
+type TooltipProps = Merge<Merge<CSSUIProps, Omit<Recharts.TooltipProps<any, any>, "ref">>, {
+    cursor?: CSSUIProps;
+}>;
+type GridProps = Merge<CSSUIProps, Recharts.CartesianGridProps>;
+type PolarGridProps = Merge<CSSUIProps, Recharts.PolarGridProps>;
+type PolarAngleAxisProps = Merge<Recharts.PolarAngleAxisProps, CSSUIProps>;
+type PolarRadiusAxisProps = Merge<CSSUIProps, Recharts.PolarRadiusAxisProps>;
+type ChartTooltip = ReactElement | ((props: Recharts.TooltipProps<number | string | Array<number | string>, number | string>) => ReactNode);
+
+export type { AreaChartProps, AreaChartType, AreaProps, BarChartProps, BarChartType, BarProps, ChartAxisType, ChartCurveType, ChartLayoutType, ChartPropGetter, ChartTooltip, DotProps, GridProps, LegendProps, LineChartProps, LineProps, PolarAngleAxisProps, PolarGridProps, PolarRadiusAxisProps, RadarChartProps, RadarProps, ReferenceLineProps, RequiredChartPropGetter, ResponsiveContainerProps, TooltipProps, XAxisProps, YAxisProps };

package/dist/chart.types.d.ts

@@ -0,0 +1,65 @@
+import { As, HTMLUIProps, CSSUIProps } from '@yamada-ui/core';
+import { Merge } from '@yamada-ui/utils';
+import { ComponentPropsWithoutRef, SVGProps, ReactElement, ReactNode } from 'react';
+import * as Recharts from 'recharts';
+
+type ChartPropGetter<Y extends As = "div", M = undefined, D = undefined> = (props?: Merge<HTMLUIProps<Y>, M>, ref?: React.Ref<any>) => D;
+type RequiredChartPropGetter<Y extends As = "div", M = undefined, D = undefined> = (props: Merge<HTMLUIProps<Y>, M>, ref?: React.Ref<any>) => D;
+type ChartLayoutType = "horizontal" | "vertical";
+type AreaChartType = "default" | "stacked" | "percent" | "split";
+type BarChartType = Exclude<AreaChartType, "split">;
+type ChartAxisType = "x" | "y" | "xy" | "none";
+type ChartCurveType = "bump" | "linear" | "natural" | "monotone" | "step" | "stepBefore" | "stepAfter";
+type AreaChartProps = Merge<CSSUIProps, ComponentPropsWithoutRef<typeof Recharts.AreaChart>>;
+type BarChartProps = Merge<CSSUIProps, ComponentPropsWithoutRef<typeof Recharts.BarChart>>;
+type LineChartProps = Merge<CSSUIProps, ComponentPropsWithoutRef<typeof Recharts.LineChart>>;
+type RadarChartProps = Merge<CSSUIProps, ComponentPropsWithoutRef<typeof Recharts.RadarChart>>;
+type ReferenceLineProps = Merge<CSSUIProps, Recharts.ReferenceLineProps>;
+type ResponsiveContainerProps = Merge<CSSUIProps, Omit<Recharts.ResponsiveContainerProps, "children">>;
+type AreaProps = Merge<Merge<CSSUIProps, Recharts.AreaProps>, {
+    color: CSSUIProps["color"];
+    dot?: DotProps;
+    activeDot?: DotProps;
+    dimDot?: DotProps;
+    dimArea?: Partial<AreaProps>;
+}>;
+type LineProps = Merge<Merge<CSSUIProps, Recharts.LineProps>, {
+    color: CSSUIProps["color"];
+    activeDot?: DotProps;
+    dot?: DotProps;
+    dimDot?: DotProps;
+    dimLine?: Partial<LineProps>;
+}>;
+type BarProps = Merge<Merge<CSSUIProps, Recharts.BarProps>, {
+    color: CSSUIProps["color"];
+    activeBar?: Merge<SVGProps<SVGPathElement>, CSSUIProps>;
+    background?: Merge<SVGProps<SVGPathElement>, CSSUIProps>;
+    dimBar?: Partial<BarProps>;
+}>;
+type RadarProps = Merge<Merge<CSSUIProps, Recharts.RadarProps>, {
+    color: CSSUIProps["color"];
+    dot?: DotProps;
+    activeDot?: DotProps;
+    dimDot?: DotProps;
+    dimRadar?: Partial<RadarProps>;
+}>;
+type DotProps = Merge<Omit<Recharts.DotProps, "ref">, CSSUIProps>;
+type XAxisProps = Merge<Merge<CSSUIProps, Recharts.XAxisProps>, {
+    color?: CSSUIProps["color"];
+    stroke?: CSSUIProps["color"];
+    fill?: CSSUIProps["color"];
+}>;
+type YAxisProps = Merge<Merge<CSSUIProps, Recharts.YAxisProps>, {
+    color?: CSSUIProps["color"];
+}>;
+type LegendProps = Merge<CSSUIProps, Omit<Recharts.LegendProps, "ref">>;
+type TooltipProps = Merge<Merge<CSSUIProps, Omit<Recharts.TooltipProps<any, any>, "ref">>, {
+    cursor?: CSSUIProps;
+}>;
+type GridProps = Merge<CSSUIProps, Recharts.CartesianGridProps>;
+type PolarGridProps = Merge<CSSUIProps, Recharts.PolarGridProps>;
+type PolarAngleAxisProps = Merge<Recharts.PolarAngleAxisProps, CSSUIProps>;
+type PolarRadiusAxisProps = Merge<CSSUIProps, Recharts.PolarRadiusAxisProps>;
+type ChartTooltip = ReactElement | ((props: Recharts.TooltipProps<number | string | Array<number | string>, number | string>) => ReactNode);
+
+export type { AreaChartProps, AreaChartType, AreaProps, BarChartProps, BarChartType, BarProps, ChartAxisType, ChartCurveType, ChartLayoutType, ChartPropGetter, ChartTooltip, DotProps, GridProps, LegendProps, LineChartProps, LineProps, PolarAngleAxisProps, PolarGridProps, PolarRadiusAxisProps, RadarChartProps, RadarProps, ReferenceLineProps, RequiredChartPropGetter, ResponsiveContainerProps, TooltipProps, XAxisProps, YAxisProps };

package/dist/chart.types.js

@@ -0,0 +1,20 @@
+"use client"
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/chart.types.ts
+var chart_types_exports = {};
+module.exports = __toCommonJS(chart_types_exports);
+//# sourceMappingURL=chart.types.js.map

package/dist/chart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/chart.types.ts"],"sourcesContent":["import type { As, CSSUIProps, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { Merge } from \"@yamada-ui/utils\"\nimport type {\n  ComponentPropsWithoutRef,\n  ReactElement,\n  ReactNode,\n  SVGProps,\n} from \"react\"\nimport type * as Recharts from \"recharts\"\n\nexport type ChartPropGetter<\n  Y extends As = \"div\",\n  M = undefined,\n  D = undefined,\n> = (props?: Merge<HTMLUIProps<Y>, M>, ref?: React.Ref<any>) => D\n\nexport type RequiredChartPropGetter<\n  Y extends As = \"div\",\n  M = undefined,\n  D = undefined,\n> = (props: Merge<HTMLUIProps<Y>, M>, ref?: React.Ref<any>) => D\n\nexport type ChartLayoutType = \"horizontal\" | \"vertical\"\nexport type AreaChartType = \"default\" | \"stacked\" | \"percent\" | \"split\"\nexport type BarChartType = Exclude<AreaChartType, \"split\">\nexport type ChartAxisType = \"x\" | \"y\" | \"xy\" | \"none\"\nexport type ChartCurveType =\n  | \"bump\"\n  | \"linear\"\n  | \"natural\"\n  | \"monotone\"\n  | \"step\"\n  | \"stepBefore\"\n  | \"stepAfter\"\n\nexport type AreaChartProps = Merge<\n  CSSUIProps,\n  ComponentPropsWithoutRef<typeof Recharts.AreaChart>\n>\nexport type BarChartProps = Merge<\n  CSSUIProps,\n  ComponentPropsWithoutRef<typeof Recharts.BarChart>\n>\nexport type LineChartProps = Merge<\n  CSSUIProps,\n  ComponentPropsWithoutRef<typeof Recharts.LineChart>\n>\nexport type RadarChartProps = Merge<\n  CSSUIProps,\n  ComponentPropsWithoutRef<typeof Recharts.RadarChart>\n>\nexport type ReferenceLineProps = Merge<CSSUIProps, Recharts.ReferenceLineProps>\nexport type ResponsiveContainerProps = Merge<\n  CSSUIProps,\n  Omit<Recharts.ResponsiveContainerProps, \"children\">\n>\nexport type AreaProps = Merge<\n  Merge<CSSUIProps, Recharts.AreaProps>,\n  {\n    color: CSSUIProps[\"color\"]\n    dot?: DotProps\n    activeDot?: DotProps\n    dimDot?: DotProps\n    dimArea?: Partial<AreaProps>\n  }\n>\nexport type LineProps = Merge<\n  Merge<CSSUIProps, Recharts.LineProps>,\n  {\n    color: CSSUIProps[\"color\"]\n    activeDot?: DotProps\n    dot?: DotProps\n    dimDot?: DotProps\n    dimLine?: Partial<LineProps>\n  }\n>\nexport type BarProps = Merge<\n  Merge<CSSUIProps, Recharts.BarProps>,\n  {\n    color: CSSUIProps[\"color\"]\n    activeBar?: Merge<SVGProps<SVGPathElement>, CSSUIProps>\n    background?: Merge<SVGProps<SVGPathElement>, CSSUIProps>\n    dimBar?: Partial<BarProps>\n  }\n>\nexport type RadarProps = Merge<\n  Merge<CSSUIProps, Recharts.RadarProps>,\n  {\n    color: CSSUIProps[\"color\"]\n    dot?: DotProps\n    activeDot?: DotProps\n    dimDot?: DotProps\n    dimRadar?: Partial<RadarProps>\n  }\n>\nexport type DotProps = Merge<Omit<Recharts.DotProps, \"ref\">, CSSUIProps>\nexport type XAxisProps = Merge<\n  Merge<CSSUIProps, Recharts.XAxisProps>,\n  {\n    color?: CSSUIProps[\"color\"]\n    stroke?: CSSUIProps[\"color\"]\n    fill?: CSSUIProps[\"color\"]\n  }\n>\nexport type YAxisProps = Merge<\n  Merge<CSSUIProps, Recharts.YAxisProps>,\n  { color?: CSSUIProps[\"color\"] }\n>\nexport type LegendProps = Merge<CSSUIProps, Omit<Recharts.LegendProps, \"ref\">>\nexport type TooltipProps = Merge<\n  Merge<CSSUIProps, Omit<Recharts.TooltipProps<any, any>, \"ref\">>,\n  { cursor?: CSSUIProps }\n>\nexport type GridProps = Merge<CSSUIProps, Recharts.CartesianGridProps>\nexport type PolarGridProps = Merge<CSSUIProps, Recharts.PolarGridProps>\nexport type PolarAngleAxisProps = Merge<\n  Recharts.PolarAngleAxisProps,\n  CSSUIProps\n>\nexport type PolarRadiusAxisProps = Merge<\n  CSSUIProps,\n  Recharts.PolarRadiusAxisProps\n>\n\nexport type ChartTooltip =\n  | ReactElement\n  | ((\n      props: Recharts.TooltipProps<\n        number | string | Array<number | string>,\n        number | string\n      >,\n    ) => ReactNode)\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/dist/chart.types.mjs

@@ -0,0 +1,2 @@
+"use client"
+//# sourceMappingURL=chart.types.mjs.map

package/dist/chart.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-32BO2QEP.mjs

@@ -0,0 +1,83 @@
+"use client"
+import {
+  useTooltip
+} from "./chunk-RXWD2EJ2.mjs";
+
+// src/chart-tooltip.tsx
+import { forwardRef, ui } from "@yamada-ui/core";
+import { cx, isArray } from "@yamada-ui/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChartTooltip = 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 (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__ */ jsxs(
+          ui.div,
+          {
+            className: "ui-chart__tooltip-item",
+            __css: styles.tooltipItem,
+            children: [
+              /* @__PURE__ */ jsx(
+                ui.div,
+                {
+                  className: "ui-chart__tooltip-swatch",
+                  background: color,
+                  __css: styles.tooltipSwatch
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ui.span,
+                {
+                  className: "ui-chart__tooltip-label",
+                  __css: styles.tooltipLabel,
+                  children: name
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                ui.span,
+                {
+                  className: "ui-chart__tooltip-value",
+                  __css: styles.tooltipValue,
+                  children: [
+                    value,
+                    unit ? unit : ""
+                  ]
+                }
+              )
+            ]
+          },
+          `tooltip-payload-${index}`
+        );
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      ui.div,
+      {
+        ref,
+        className: cx("ui-chart__tooltip", className),
+        __css: styles.tooltip,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(ui.p, { className: "ui-chart__tooltip-title", __css: styles.tooltipTitle, children: label }),
+          /* @__PURE__ */ jsx(ui.div, { className: "ui-chart__tooltip-list", __css: styles.tooltipList, children: items })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  ChartTooltip
+};
+//# sourceMappingURL=chunk-32BO2QEP.mjs.map

package/dist/chunk-32BO2QEP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/chart-tooltip.tsx"],"sourcesContent":["import { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx, isArray, type Dict } from \"@yamada-ui/utils\"\nimport { useTooltip } from \"./use-chart\"\n\nexport type ChartTooltipProps = {\n  label: string\n  payload: Dict[] | undefined\n  valueFormatter?: (value: number) => string\n  unit?: string\n}\n\nexport const ChartTooltip = forwardRef<ChartTooltipProps, \"div\">(\n  ({ label, className, payload = [], valueFormatter, unit, ...rest }, ref) => {\n    const { styles } = useTooltip()\n\n    const items = payload.map(\n      ({ color, name, value: valueProp } = {}, index) => {\n        let value: string\n\n        if (isArray(valueProp)) {\n          value = valueProp\n            .map((value) => {\n              return `${valueFormatter?.(value) ?? value}`\n            })\n            .join(\" - \")\n        } else {\n          value = valueFormatter?.(valueProp) ?? valueProp\n        }\n\n        return (\n          <ui.div\n            className=\"ui-chart__tooltip-item\"\n            key={`tooltip-payload-${index}`}\n            __css={styles.tooltipItem}\n          >\n            <ui.div\n              className=\"ui-chart__tooltip-swatch\"\n              background={color}\n              __css={styles.tooltipSwatch}\n            />\n\n            <ui.span\n              className=\"ui-chart__tooltip-label\"\n              __css={styles.tooltipLabel}\n            >\n              {name}\n            </ui.span>\n\n            <ui.span\n              className=\"ui-chart__tooltip-value\"\n              __css={styles.tooltipValue}\n            >\n              {value}\n              {unit ? unit : \"\"}\n            </ui.span>\n          </ui.div>\n        )\n      },\n    )\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-chart__tooltip\", className)}\n        __css={styles.tooltip}\n        {...rest}\n      >\n        <ui.p className=\"ui-chart__tooltip-title\" __css={styles.tooltipTitle}>\n          {label}\n        </ui.p>\n\n        <ui.div className=\"ui-chart__tooltip-list\" __css={styles.tooltipList}>\n          {items}\n        </ui.div>\n      </ui.div>\n    )\n  },\n)\n"],"mappings":";;;;;;AAAA,SAAS,YAAY,UAAU;AAC/B,SAAS,IAAI,eAA0B;AAkC3B,cAaA,YAbA;AAxBL,IAAM,eAAe;AAAA,EAC1B,CAAC,EAAE,OAAO,WAAW,UAAU,CAAC,GAAG,gBAAgB,MAAM,GAAG,KAAK,GAAG,QAAQ;AAC1E,UAAM,EAAE,OAAO,IAAI,WAAW;AAE9B,UAAM,QAAQ,QAAQ;AAAA,MACpB,CAAC,EAAE,OAAO,MAAM,OAAO,UAAU,IAAI,CAAC,GAAG,UAAU;AAhBzD;AAiBQ,YAAI;AAEJ,YAAI,QAAQ,SAAS,GAAG;AACtB,kBAAQ,UACL,IAAI,CAACA,WAAU;AArB5B,gBAAAC;AAsBc,mBAAO,IAAGA,MAAA,iDAAiBD,YAAjB,OAAAC,MAA2BD,MAAK;AAAA,UAC5C,CAAC,EACA,KAAK,KAAK;AAAA,QACf,OAAO;AACL,mBAAQ,sDAAiB,eAAjB,YAA+B;AAAA,QACzC;AAEA,eACE;AAAA,UAAC,GAAG;AAAA,UAAH;AAAA,YACC,WAAU;AAAA,YAEV,OAAO,OAAO;AAAA,YAEd;AAAA;AAAA,gBAAC,GAAG;AAAA,gBAAH;AAAA,kBACC,WAAU;AAAA,kBACV,YAAY;AAAA,kBACZ,OAAO,OAAO;AAAA;AAAA,cAChB;AAAA,cAEA;AAAA,gBAAC,GAAG;AAAA,gBAAH;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,OAAO;AAAA,kBAEb;AAAA;AAAA,cACH;AAAA,cAEA;AAAA,gBAAC,GAAG;AAAA,gBAAH;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,OAAO;AAAA,kBAEb;AAAA;AAAA,oBACA,OAAO,OAAO;AAAA;AAAA;AAAA,cACjB;AAAA;AAAA;AAAA,UAtBK,mBAAmB,KAAK;AAAA,QAuB/B;AAAA,MAEJ;AAAA,IACF;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,qBAAqB,SAAS;AAAA,QAC5C,OAAO,OAAO;AAAA,QACb,GAAG;AAAA,QAEJ;AAAA,8BAAC,GAAG,GAAH,EAAK,WAAU,2BAA0B,OAAO,OAAO,cACrD,iBACH;AAAA,UAEA,oBAAC,GAAG,KAAH,EAAO,WAAU,0BAAyB,OAAO,OAAO,aACtD,iBACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":["value","_a"]}

package/dist/chunk-3CY3IFRN.mjs

@@ -0,0 +1,42 @@
+"use client"
+import {
+  gridProperties
+} from "./chunk-5QCKM3B3.mjs";
+import {
+  getComponentProps
+} from "./chunk-QL3DB7OJ.mjs";
+
+// src/use-chart-grid.ts
+import { useTheme } from "@yamada-ui/core";
+import { cx } from "@yamada-ui/utils";
+import { useCallback } from "react";
+var useChartGrid = ({
+  gridProps = {},
+  gridAxis = "x",
+  strokeDasharray = "5 5",
+  styles
+}) => {
+  const { theme } = useTheme();
+  const [reChartsProps, propClassName] = getComponentProps(
+    [gridProps, gridProperties],
+    styles.grid
+  )(theme);
+  const getGridProps = useCallback(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      className: 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 };
+};
+
+export {
+  useChartGrid
+};
+//# sourceMappingURL=chunk-3CY3IFRN.mjs.map

package/dist/chunk-3CY3IFRN.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-chart-grid.ts"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { useTheme } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useCallback } from \"react\"\nimport type { CartesianGridProps } from \"recharts\"\nimport { getComponentProps } from \"./chart-utils\"\nimport type { ChartAxisType, ChartPropGetter, GridProps } from \"./chart.types\"\nimport { gridProperties } from \"./rechart-properties\"\n\nexport type UseChartGridOptions = {\n  /**\n   * Props passed down to recharts 'CartesianGrid' component.\n   */\n  gridProps?: GridProps\n  /**\n   * Specifies which lines should be displayed in the grid.\n   *\n   * @default 'x'\n   */\n  gridAxis?: ChartAxisType\n  /**\n   * Dash array for the grid lines and cursor. The first number is the length of the solid line section and the second number is the length of the interval.\n   *\n   * @default '5 5'\n   */\n  strokeDasharray?: string | number\n}\n\ntype UseChartGridProps = UseChartGridOptions & {\n  styles: Dict<CSSUIObject>\n}\n\nexport const useChartGrid = ({\n  gridProps = {},\n  gridAxis = \"x\",\n  strokeDasharray = \"5 5\",\n  styles,\n}: UseChartGridProps) => {\n  const { theme } = useTheme()\n  const [reChartsProps, propClassName] = getComponentProps(\n    [gridProps, gridProperties],\n    styles.grid,\n  )(theme)\n\n  const getGridProps: ChartPropGetter<\n    \"div\",\n    Partial<CartesianGridProps>,\n    CartesianGridProps\n  > = useCallback(\n    ({ className, ...props } = {}, ref = null) => ({\n      ref,\n      className: cx(\"ui-chart__grid\", className, propClassName),\n      strokeDasharray: strokeDasharray,\n      vertical: gridAxis === \"y\" || gridAxis === \"xy\",\n      horizontal: gridAxis === \"x\" || gridAxis === \"xy\",\n      ...props,\n      ...reChartsProps,\n    }),\n    [propClassName, strokeDasharray, gridAxis, reChartsProps],\n  )\n\n  return { getGridProps }\n}\n"],"mappings":";;;;;;;;;AACA,SAAS,gBAAgB;AAEzB,SAAS,UAAU;AACnB,SAAS,mBAAmB;AA6BrB,IAAM,eAAe,CAAC;AAAA,EAC3B,YAAY,CAAC;AAAA,EACb,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB;AACF,MAAyB;AACvB,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,CAAC,eAAe,aAAa,IAAI;AAAA,IACrC,CAAC,WAAW,cAAc;AAAA,IAC1B,OAAO;AAAA,EACT,EAAE,KAAK;AAEP,QAAM,eAIF;AAAA,IACF,CAAC,EAAE,WAAW,GAAG,MAAM,IAAI,CAAC,GAAG,MAAM,UAAU;AAAA,MAC7C;AAAA,MACA,WAAW,GAAG,kBAAkB,WAAW,aAAa;AAAA,MACxD;AAAA,MACA,UAAU,aAAa,OAAO,aAAa;AAAA,MAC3C,YAAY,aAAa,OAAO,aAAa;AAAA,MAC7C,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,CAAC,eAAe,iBAAiB,UAAU,aAAa;AAAA,EAC1D;AAEA,SAAO,EAAE,aAAa;AACxB;","names":[]}

package/dist/chunk-3IBGJT6F.mjs

@@ -0,0 +1,341 @@
+"use client"
+import {
+  dotProperties,
+  polarAngleAxisProperties,
+  polarGridProperties,
+  polarRadiusAxisProperties,
+  radarChartProperties,
+  radarProperties
+} from "./chunk-5QCKM3B3.mjs";
+import {
+  getComponentProps
+} from "./chunk-QL3DB7OJ.mjs";
+
+// src/use-radar-chart.ts
+import { useTheme } from "@yamada-ui/core";
+import { cx, splitObject } from "@yamada-ui/utils";
+import { useCallback, useMemo, useState } from "react";
+var useRadarChart = ({
+  data,
+  series,
+  dataKey,
+  withDots = false,
+  withActiveDots = false,
+  strokeWidth = 2,
+  fillOpacity = 0.4,
+  valueFormatter,
+  styles,
+  ...rest
+}) => {
+  var _a;
+  const { theme } = useTheme();
+  const [highlightedArea, setHighlightedArea] = useState(null);
+  const shouldHighlight = highlightedArea !== null;
+  const {
+    dot = {},
+    activeDot = {},
+    dimDot,
+    dimRadar,
+    ...computedRadarProps
+  } = (_a = rest.radarProps) != null ? _a : {};
+  const radarColors = useMemo(
+    () => series.map(({ color }, index) => ({
+      __prefix: "ui",
+      name: `radar-${index}`,
+      token: "colors",
+      value: color != null ? color : "transparent"
+    })),
+    [series]
+  );
+  const radarVars = useMemo(
+    () => [
+      ...radarColors,
+      { __prefix: "ui", name: "fill-opacity", value: fillOpacity }
+    ],
+    [fillOpacity, radarColors]
+  );
+  const [polarAngleAxisProps, polarAngleAxisStyles] = useMemo(
+    () => {
+      var _a2;
+      return splitObject(
+        (_a2 = rest.polarAngleAxisProps) != null ? _a2 : {},
+        polarAngleAxisProperties
+      );
+    },
+    [rest.polarAngleAxisProps]
+  );
+  const [polarRadiusAxisProps, polarRadiusAxisStyles] = useMemo(
+    () => {
+      var _a2;
+      return splitObject(
+        (_a2 = rest.polarRadiusAxisProps) != null ? _a2 : {},
+        polarRadiusAxisProperties
+      );
+    },
+    [rest.polarRadiusAxisProps]
+  );
+  const [radarChartProps, radarChartClassName] = 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] = useMemo(
+    () => {
+      var _a2;
+      return getComponentProps(
+        [(_a2 = rest.polarGridProps) != null ? _a2 : {}, polarGridProperties],
+        styles.polarGrid
+      )(theme);
+    },
+    [rest.polarGridProps, styles.polarGrid, theme]
+  );
+  const [radarProps, radarClassName] = useMemo(() => {
+    const resolvedRadarProps = {
+      fillOpacity: "var(--ui-fill-opacity)",
+      ...computedRadarProps
+    };
+    return getComponentProps(
+      [resolvedRadarProps, radarProperties],
+      styles.radar
+    )(theme);
+  }, [computedRadarProps, styles.radar, theme]);
+  const [dimRadarProps, dimRadarClassName] = useMemo(() => {
+    const resolvedDimRadar = {
+      fillOpacity: 0.3,
+      strokeOpacity: 0.3,
+      ...dimRadar
+    };
+    return getComponentProps([resolvedDimRadar, radarProperties])(
+      theme
+    );
+  }, [dimRadar, theme]);
+  const [dotProps, dotClassName] = useMemo(() => {
+    const resolvedDot = { fillOpacity: 1, strokeWidth: 2, ...dot };
+    return getComponentProps(
+      [resolvedDot, dotProperties],
+      styles.dot
+    )(theme);
+  }, [dot, styles.dot, theme]);
+  const [activeDotProps, activeDotClassName] = useMemo(
+    () => getComponentProps(
+      [activeDot, dotProperties],
+      styles.activeDot
+    )(theme),
+    [activeDot, styles.activeDot, theme]
+  );
+  const [dimDotProps, dimDotClassName] = useMemo(() => {
+    const resolvedDimDot = { fillOpacity: 0, strokeOpacity: 0, ...dimDot };
+    return getComponentProps([resolvedDimDot, dotProperties])(
+      theme
+    );
+  }, [dimDot, theme]);
+  const radarPropList = 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: 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: 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 = useCallback(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      className: cx(className, radarChartClassName),
+      data,
+      ...props,
+      ...radarChartProps
+    }),
+    [data, radarChartClassName, radarChartProps]
+  );
+  const getRadarProps = useCallback(
+    ({ index, className: classNameProp, ...props }, ref = null) => {
+      const { color, className, dataKey: dataKey2, activeDot: activeDot2, dot: dot2, ...rest2 } = radarPropList[index];
+      return {
+        ref,
+        className: cx(classNameProp, className),
+        activeDot: activeDot2,
+        dot: dot2,
+        name: dataKey2,
+        dataKey: dataKey2,
+        fill: color,
+        strokeWidth,
+        stroke: color,
+        isAnimationActive: false,
+        ...props,
+        ...rest2
+      };
+    },
+    [radarPropList, strokeWidth]
+  );
+  const getPolarGridProps = useCallback(
+    ({ className, ...props } = {}, ref = null) => ({
+      ref,
+      // BUG: `.recharts-polar-grid-concentric-xxx` is not applied className.
+      className: cx(className, polarGridClassName),
+      ...props,
+      ...polarGridProps
+    }),
+    [polarGridClassName, polarGridProps]
+  );
+  const getPolarAngleAxisProps = 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 = 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
+  };
+};
+
+export {
+  useRadarChart
+};
+//# sourceMappingURL=chunk-3IBGJT6F.mjs.map