@yamada-ui/charts 1.0.2 → 1.0.3-dev-20240404224651

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/dist/area-chart.js +15 -49
  2. package/dist/area-chart.js.map +1 -1
  3. package/dist/area-chart.mjs +2 -2
  4. package/dist/bar-chart.js +15 -49
  5. package/dist/bar-chart.js.map +1 -1
  6. package/dist/bar-chart.mjs +2 -2
  7. package/dist/chunk-BPTDTAE2.mjs +47 -0
  8. package/dist/chunk-BPTDTAE2.mjs.map +1 -0
  9. package/dist/{chunk-PZVPN27X.mjs → chunk-EPHYS7B2.mjs} +4 -8
  10. package/dist/chunk-EPHYS7B2.mjs.map +1 -0
  11. package/dist/{chunk-ZYBONO6H.mjs → chunk-OTUDFLXM.mjs} +12 -10
  12. package/dist/chunk-OTUDFLXM.mjs.map +1 -0
  13. package/dist/{chunk-R6I3PAL2.mjs → chunk-SFU65XA7.mjs} +4 -8
  14. package/dist/chunk-SFU65XA7.mjs.map +1 -0
  15. package/dist/{chunk-TCR5VIHU.mjs → chunk-YTC66YJR.mjs} +4 -8
  16. package/dist/chunk-YTC66YJR.mjs.map +1 -0
  17. package/dist/{chunk-ILL6HXIY.mjs → chunk-Z74O4FHB.mjs} +64 -61
  18. package/dist/chunk-Z74O4FHB.mjs.map +1 -0
  19. package/dist/index.js +112 -150
  20. package/dist/index.js.map +1 -1
  21. package/dist/index.mjs +6 -6
  22. package/dist/line-chart.js +17 -51
  23. package/dist/line-chart.js.map +1 -1
  24. package/dist/line-chart.mjs +2 -2
  25. package/dist/radar-chart.js +85 -111
  26. package/dist/radar-chart.js.map +1 -1
  27. package/dist/radar-chart.mjs +3 -3
  28. package/dist/use-area-chart.d.mts +1 -1
  29. package/dist/use-area-chart.d.ts +1 -1
  30. package/dist/use-bar-chart.d.mts +1 -1
  31. package/dist/use-bar-chart.d.ts +1 -1
  32. package/dist/use-chart-tooltip.d.mts +0 -8
  33. package/dist/use-chart-tooltip.d.ts +0 -8
  34. package/dist/use-chart-tooltip.js +19 -40
  35. package/dist/use-chart-tooltip.js.map +1 -1
  36. package/dist/use-chart-tooltip.mjs +2 -1
  37. package/dist/use-line-chart.d.mts +1 -1
  38. package/dist/use-line-chart.d.ts +1 -1
  39. package/dist/use-radar-chart.d.mts +15 -3
  40. package/dist/use-radar-chart.d.ts +15 -3
  41. package/dist/use-radar-chart.js +61 -59
  42. package/dist/use-radar-chart.js.map +1 -1
  43. package/dist/use-radar-chart.mjs +1 -1
  44. package/package.json +4 -4
  45. package/dist/chunk-ILL6HXIY.mjs.map +0 -1
  46. package/dist/chunk-PZVPN27X.mjs.map +0 -1
  47. package/dist/chunk-R6I3PAL2.mjs.map +0 -1
  48. package/dist/chunk-TCR5VIHU.mjs.map +0 -1
  49. package/dist/chunk-WF3BD34Y.mjs +0 -74
  50. package/dist/chunk-WF3BD34Y.mjs.map +0 -1
  51. package/dist/chunk-ZYBONO6H.mjs.map +0 -1
package/dist/index.js CHANGED
@@ -29,7 +29,7 @@ __export(src_exports, {
29
29
  module.exports = __toCommonJS(src_exports);
30
30
 
31
31
  // src/line-chart.tsx
32
- var import_core9 = require("@yamada-ui/core");
32
+ var import_core10 = require("@yamada-ui/core");
33
33
  var import_utils11 = require("@yamada-ui/utils");
34
34
  var import_react8 = require("react");
35
35
  var import_recharts = require("recharts");
@@ -821,6 +821,7 @@ var useChartReferenceLine = ({
821
821
  };
822
822
 
823
823
  // src/use-chart-tooltip.ts
824
+ var import_core8 = require("@yamada-ui/core");
824
825
  var import_utils9 = require("@yamada-ui/utils");
825
826
  var import_react6 = require("react");
826
827
  var useChartTooltip = ({
@@ -828,39 +829,11 @@ var useChartTooltip = ({
828
829
  tooltipAnimationDuration = 0,
829
830
  styles
830
831
  }) => {
832
+ const { theme } = (0, import_core8.useTheme)();
831
833
  const { cursor, ...rest } = _tooltipProps;
832
- const resolvedCursor = (0, import_react6.useMemo)(
833
- () => ({ ...styles.cursor, ...cursor }),
834
- [cursor, styles]
835
- );
836
- const tooltipVars = (0, import_react6.useMemo)(
837
- () => [
838
- {
839
- __prefix: "ui",
840
- name: "cursor-fill",
841
- token: "colors",
842
- value: resolvedCursor.fill
843
- },
844
- {
845
- __prefix: "ui",
846
- name: "cursor-stroke",
847
- token: "colors",
848
- value: resolvedCursor.stroke
849
- },
850
- {
851
- __prefix: "ui",
852
- name: "cursor-stroke-width",
853
- token: "colors",
854
- value: resolvedCursor.strokeWidth
855
- },
856
- {
857
- __prefix: "ui",
858
- name: "cursor-stroke-dasharray",
859
- token: "colors",
860
- value: resolvedCursor.strokeDasharray
861
- }
862
- ],
863
- [resolvedCursor]
834
+ const cursorClassName = (0, import_react6.useMemo)(
835
+ () => getClassName({ ...styles.cursor, ...cursor })(theme),
836
+ [cursor, styles.cursor, theme]
864
837
  );
865
838
  const [tooltipProps, tooltipUIProps] = (0, import_utils9.splitObject)(
866
839
  rest,
@@ -872,21 +845,18 @@ var useChartTooltip = ({
872
845
  animationDuration: tooltipAnimationDuration,
873
846
  isAnimationActive: (tooltipAnimationDuration || 0) > 0,
874
847
  cursor: {
875
- fill: "var(--ui-cursor-fill)",
876
- stroke: "var(--ui-cursor-stroke)",
877
- strokeWidth: "var(--ui-cursor-stroke-width)",
878
- strokeDasharray: "var(--ui-cursor-stroke-dasharray)"
848
+ className: cursorClassName
879
849
  },
880
850
  ...props,
881
851
  ...tooltipProps
882
852
  }),
883
- [tooltipAnimationDuration, tooltipProps]
853
+ [cursorClassName, tooltipAnimationDuration, tooltipProps]
884
854
  );
885
- return { tooltipProps: tooltipUIProps, getTooltipProps, tooltipVars };
855
+ return { tooltipProps: tooltipUIProps, getTooltipProps };
886
856
  };
887
857
 
888
858
  // src/use-line-chart.ts
889
- var import_core8 = require("@yamada-ui/core");
859
+ var import_core9 = require("@yamada-ui/core");
890
860
  var import_utils10 = require("@yamada-ui/utils");
891
861
  var import_react7 = require("react");
892
862
  var useLineChart = ({
@@ -905,7 +875,7 @@ var useLineChart = ({
905
875
  ...rest
906
876
  }) => {
907
877
  var _a;
908
- const { theme } = (0, import_core8.useTheme)();
878
+ const { theme } = (0, import_core9.useTheme)();
909
879
  const [highlightedArea, setHighlightedArea] = (0, import_react7.useState)(null);
910
880
  const shouldHighlight = highlightedArea !== null;
911
881
  const {
@@ -1124,8 +1094,8 @@ var useLineChart = ({
1124
1094
 
1125
1095
  // src/line-chart.tsx
1126
1096
  var import_jsx_runtime3 = require("react/jsx-runtime");
1127
- var LineChart = (0, import_core9.forwardRef)((props, ref) => {
1128
- const [styles, mergedProps] = (0, import_core9.useMultiComponentStyle)("LineChart", props);
1097
+ var LineChart = (0, import_core10.forwardRef)((props, ref) => {
1098
+ const [styles, mergedProps] = (0, import_core10.useMultiComponentStyle)("LineChart", props);
1129
1099
  const {
1130
1100
  className,
1131
1101
  containerProps,
@@ -1160,7 +1130,7 @@ var LineChart = (0, import_core9.forwardRef)((props, ref) => {
1160
1130
  fillOpacity,
1161
1131
  syncId,
1162
1132
  ...rest
1163
- } = (0, import_core9.omitThemeProps)(mergedProps);
1133
+ } = (0, import_core10.omitThemeProps)(mergedProps);
1164
1134
  const { getLineProps, getLineChartProps, lineVars, setHighlightedArea } = useLineChart({
1165
1135
  layoutType,
1166
1136
  series,
@@ -1202,11 +1172,7 @@ var LineChart = (0, import_core9.forwardRef)((props, ref) => {
1202
1172
  strokeDasharray,
1203
1173
  styles
1204
1174
  });
1205
- const {
1206
- tooltipProps: computedTooltipProps,
1207
- getTooltipProps,
1208
- tooltipVars
1209
- } = useChartTooltip({
1175
+ const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
1210
1176
  tooltipProps,
1211
1177
  tooltipAnimationDuration,
1212
1178
  styles
@@ -1238,11 +1204,11 @@ var LineChart = (0, import_core9.forwardRef)((props, ref) => {
1238
1204
  [getReferenceLineProps, referenceLineProps]
1239
1205
  );
1240
1206
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
1241
- import_core9.ui.div,
1207
+ import_core10.ui.div,
1242
1208
  {
1243
1209
  ref,
1244
1210
  className: (0, import_utils11.cx)("ui-line-chart", className),
1245
- var: [...lineVars, ...tooltipVars],
1211
+ var: lineVars,
1246
1212
  __css: { maxW: "full", ...styles.container },
1247
1213
  ...rest,
1248
1214
  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -1306,13 +1272,13 @@ var LineChart = (0, import_core9.forwardRef)((props, ref) => {
1306
1272
  });
1307
1273
 
1308
1274
  // src/bar-chart.tsx
1309
- var import_core11 = require("@yamada-ui/core");
1275
+ var import_core12 = require("@yamada-ui/core");
1310
1276
  var import_utils13 = require("@yamada-ui/utils");
1311
1277
  var import_react10 = require("react");
1312
1278
  var import_recharts2 = require("recharts");
1313
1279
 
1314
1280
  // src/use-bar-chart.ts
1315
- var import_core10 = require("@yamada-ui/core");
1281
+ var import_core11 = require("@yamada-ui/core");
1316
1282
  var import_utils12 = require("@yamada-ui/utils");
1317
1283
  var import_react9 = require("react");
1318
1284
  var useBarChart = ({
@@ -1328,7 +1294,7 @@ var useBarChart = ({
1328
1294
  }) => {
1329
1295
  var _a;
1330
1296
  const uuid = (0, import_react9.useId)();
1331
- const { theme } = (0, import_core10.useTheme)();
1297
+ const { theme } = (0, import_core11.useTheme)();
1332
1298
  const [highlightedArea, setHighlightedArea] = (0, import_react9.useState)(null);
1333
1299
  const stacked = type === "stacked" || type === "percent";
1334
1300
  const shouldHighlight = highlightedArea !== null;
@@ -1503,8 +1469,8 @@ var useBarChart = ({
1503
1469
 
1504
1470
  // src/bar-chart.tsx
1505
1471
  var import_jsx_runtime4 = require("react/jsx-runtime");
1506
- var BarChart = (0, import_core11.forwardRef)((props, ref) => {
1507
- const [styles, mergedProps] = (0, import_core11.useMultiComponentStyle)("BarChart", props);
1472
+ var BarChart = (0, import_core12.forwardRef)((props, ref) => {
1473
+ const [styles, mergedProps] = (0, import_core12.useMultiComponentStyle)("BarChart", props);
1508
1474
  const {
1509
1475
  className,
1510
1476
  series,
@@ -1534,7 +1500,7 @@ var BarChart = (0, import_core11.forwardRef)((props, ref) => {
1534
1500
  chartProps,
1535
1501
  syncId,
1536
1502
  ...rest
1537
- } = (0, import_core11.omitThemeProps)(mergedProps);
1503
+ } = (0, import_core12.omitThemeProps)(mergedProps);
1538
1504
  const { getBarChartProps, getBarProps, barVars, setHighlightedArea } = useBarChart({
1539
1505
  data,
1540
1506
  series,
@@ -1572,11 +1538,7 @@ var BarChart = (0, import_core11.forwardRef)((props, ref) => {
1572
1538
  strokeDasharray,
1573
1539
  styles
1574
1540
  });
1575
- const {
1576
- tooltipProps: computedTooltipProps,
1577
- getTooltipProps,
1578
- tooltipVars
1579
- } = useChartTooltip({
1541
+ const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
1580
1542
  tooltipProps,
1581
1543
  tooltipAnimationDuration,
1582
1544
  styles
@@ -1610,11 +1572,11 @@ var BarChart = (0, import_core11.forwardRef)((props, ref) => {
1610
1572
  [getReferenceLineProps, referenceLineProps]
1611
1573
  );
1612
1574
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
1613
- import_core11.ui.div,
1575
+ import_core12.ui.div,
1614
1576
  {
1615
1577
  ref,
1616
1578
  className: (0, import_utils13.cx)("ui-bar-chart", className),
1617
- var: [...barVars, ...tooltipVars],
1579
+ var: barVars,
1618
1580
  __css: { maxW: "full", ...styles.container },
1619
1581
  ...rest,
1620
1582
  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -1678,7 +1640,7 @@ var BarChart = (0, import_core11.forwardRef)((props, ref) => {
1678
1640
  });
1679
1641
 
1680
1642
  // src/area-chart.tsx
1681
- var import_core13 = require("@yamada-ui/core");
1643
+ var import_core14 = require("@yamada-ui/core");
1682
1644
  var import_utils15 = require("@yamada-ui/utils");
1683
1645
  var import_react12 = require("react");
1684
1646
  var import_recharts3 = require("recharts");
@@ -1725,7 +1687,7 @@ var AreaSplit = ({ offset, id, fillOpacity }) => {
1725
1687
  };
1726
1688
 
1727
1689
  // src/use-area-chart.ts
1728
- var import_core12 = require("@yamada-ui/core");
1690
+ var import_core13 = require("@yamada-ui/core");
1729
1691
  var import_utils14 = require("@yamada-ui/utils");
1730
1692
  var import_react11 = require("react");
1731
1693
  var useAreaChart = ({
@@ -1749,7 +1711,7 @@ var useAreaChart = ({
1749
1711
  }) => {
1750
1712
  var _a;
1751
1713
  const uuid = (0, import_react11.useId)();
1752
- const { theme } = (0, import_core12.useTheme)();
1714
+ const { theme } = (0, import_core13.useTheme)();
1753
1715
  const [highlightedArea, setHighlightedArea] = (0, import_react11.useState)(null);
1754
1716
  const splitId = `${uuid}-split`;
1755
1717
  const stacked = type === "stacked" || type === "percent";
@@ -2038,8 +2000,8 @@ var useAreaChart = ({
2038
2000
 
2039
2001
  // src/area-chart.tsx
2040
2002
  var import_jsx_runtime7 = require("react/jsx-runtime");
2041
- var AreaChart = (0, import_core13.forwardRef)((props, ref) => {
2042
- const [styles, mergedProps] = (0, import_core13.useMultiComponentStyle)("AreaChart", props);
2003
+ var AreaChart = (0, import_core14.forwardRef)((props, ref) => {
2004
+ const [styles, mergedProps] = (0, import_core14.useMultiComponentStyle)("AreaChart", props);
2043
2005
  const {
2044
2006
  className,
2045
2007
  series,
@@ -2077,7 +2039,7 @@ var AreaChart = (0, import_core13.forwardRef)((props, ref) => {
2077
2039
  splitOffset,
2078
2040
  syncId,
2079
2041
  ...rest
2080
- } = (0, import_core13.omitThemeProps)(mergedProps);
2042
+ } = (0, import_core14.omitThemeProps)(mergedProps);
2081
2043
  const {
2082
2044
  getAreaChartProps,
2083
2045
  getAreaSplitProps,
@@ -2130,11 +2092,7 @@ var AreaChart = (0, import_core13.forwardRef)((props, ref) => {
2130
2092
  strokeDasharray,
2131
2093
  styles
2132
2094
  });
2133
- const {
2134
- tooltipProps: computedTooltipProps,
2135
- getTooltipProps,
2136
- tooltipVars
2137
- } = useChartTooltip({
2095
+ const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
2138
2096
  tooltipProps,
2139
2097
  tooltipAnimationDuration,
2140
2098
  styles
@@ -2169,11 +2127,11 @@ var AreaChart = (0, import_core13.forwardRef)((props, ref) => {
2169
2127
  [getReferenceLineProps, referenceLineProps]
2170
2128
  );
2171
2129
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
2172
- import_core13.ui.div,
2130
+ import_core14.ui.div,
2173
2131
  {
2174
2132
  ref,
2175
2133
  className: (0, import_utils15.cx)("ui-area-chart", className),
2176
- var: [...areaVars, ...tooltipVars],
2134
+ var: areaVars,
2177
2135
  __css: { maxW: "full", ...styles.container },
2178
2136
  ...rest,
2179
2137
  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -2238,13 +2196,13 @@ var AreaChart = (0, import_core13.forwardRef)((props, ref) => {
2238
2196
  });
2239
2197
 
2240
2198
  // src/radar-chart.tsx
2241
- var import_core15 = require("@yamada-ui/core");
2199
+ var import_core16 = require("@yamada-ui/core");
2242
2200
  var import_utils17 = require("@yamada-ui/utils");
2243
2201
  var import_react14 = require("react");
2244
2202
  var import_recharts4 = require("recharts");
2245
2203
 
2246
2204
  // src/use-radar-chart.ts
2247
- var import_core14 = require("@yamada-ui/core");
2205
+ var import_core15 = require("@yamada-ui/core");
2248
2206
  var import_utils16 = require("@yamada-ui/utils");
2249
2207
  var import_react13 = require("react");
2250
2208
  var useRadarChart = ({
@@ -2256,11 +2214,12 @@ var useRadarChart = ({
2256
2214
  strokeWidth = 2,
2257
2215
  fillOpacity = 0.4,
2258
2216
  valueFormatter,
2217
+ strokeDasharray,
2259
2218
  styles,
2260
2219
  ...rest
2261
2220
  }) => {
2262
2221
  var _a;
2263
- const { theme } = (0, import_core14.useTheme)();
2222
+ const { theme } = (0, import_core15.useTheme)();
2264
2223
  const [highlightedArea, setHighlightedArea] = (0, import_react13.useState)(null);
2265
2224
  const shouldHighlight = highlightedArea !== null;
2266
2225
  const {
@@ -2286,58 +2245,16 @@ var useRadarChart = ({
2286
2245
  ],
2287
2246
  [fillOpacity, radarColors]
2288
2247
  );
2289
- const [polarAngleAxisProps, polarAngleAxisStyles] = (0, import_react13.useMemo)(
2290
- () => {
2291
- var _a2;
2292
- return (0, import_utils16.splitObject)(
2293
- (_a2 = rest.polarAngleAxisProps) != null ? _a2 : {},
2294
- polarAngleAxisProperties
2295
- );
2296
- },
2297
- [rest.polarAngleAxisProps]
2298
- );
2299
- const [polarRadiusAxisProps, polarRadiusAxisStyles] = (0, import_react13.useMemo)(
2248
+ const [chartProps, radarChartClassName] = (0, import_react13.useMemo)(
2300
2249
  () => {
2301
2250
  var _a2;
2302
- return (0, import_utils16.splitObject)(
2303
- (_a2 = rest.polarRadiusAxisProps) != null ? _a2 : {},
2304
- polarRadiusAxisProperties
2305
- );
2251
+ return getComponentProps(
2252
+ [(_a2 = rest.chartProps) != null ? _a2 : {}, radarChartProperties],
2253
+ styles.chart
2254
+ )(theme);
2306
2255
  },
2307
- [rest.polarRadiusAxisProps]
2256
+ [rest.chartProps, styles.chart, theme]
2308
2257
  );
2309
- const [chartProps, radarChartClassName] = (0, import_react13.useMemo)(() => {
2310
- const resolvedRadarChartProps = {
2311
- "& .recharts-polar-grid-concentric-polygon": { ...styles.polarGrid },
2312
- "& .recharts-polar-grid-concentric-circle": { ...styles.polarGrid },
2313
- "& .recharts-polar-angle-axis": {
2314
- ...styles.polarAngleAxis,
2315
- ...polarAngleAxisStyles
2316
- },
2317
- "& .recharts-polar-angle-axis-tick": { ...styles.polarAngleAxisTick },
2318
- "& .recharts-polar-radius-axis": {
2319
- ...styles.polarRadiusAxis,
2320
- ...polarRadiusAxisStyles
2321
- },
2322
- "& .recharts-polar-radius-axis-tick": { ...styles.polarRadiusAxisTick },
2323
- ...rest.chartProps
2324
- };
2325
- return getComponentProps(
2326
- [resolvedRadarChartProps, radarChartProperties],
2327
- styles.chart
2328
- )(theme);
2329
- }, [
2330
- polarAngleAxisStyles,
2331
- polarRadiusAxisStyles,
2332
- rest.chartProps,
2333
- styles.chart,
2334
- styles.polarAngleAxis,
2335
- styles.polarAngleAxisTick,
2336
- styles.polarGrid,
2337
- styles.polarRadiusAxis,
2338
- styles.polarRadiusAxisTick,
2339
- theme
2340
- ]);
2341
2258
  const [polarGridProps, polarGridClassName] = (0, import_react13.useMemo)(
2342
2259
  () => {
2343
2260
  var _a2;
@@ -2348,6 +2265,40 @@ var useRadarChart = ({
2348
2265
  },
2349
2266
  [rest.polarGridProps, styles.polarGrid, theme]
2350
2267
  );
2268
+ const [polarAngleAxisProps, polarAngleAxisClassName] = (0, import_react13.useMemo)(
2269
+ () => {
2270
+ var _a2;
2271
+ return getComponentProps(
2272
+ [(_a2 = rest.polarAngleAxisProps) != null ? _a2 : {}, polarAngleAxisProperties],
2273
+ styles.polarAngleAxis
2274
+ )(theme);
2275
+ },
2276
+ [rest.polarAngleAxisProps, styles.polarAngleAxis, theme]
2277
+ );
2278
+ const polarAngleAxisTickClassName = (0, import_react13.useMemo)(
2279
+ () => getClassName({
2280
+ ...styles.polarAngleAxisTick,
2281
+ ...rest.polarAngleAxisTickProps
2282
+ })(theme),
2283
+ [rest.polarAngleAxisTickProps, styles.polarAngleAxisTick, theme]
2284
+ );
2285
+ const [polarRadiusAxisProps, polarRadiusAxisClassName] = (0, import_react13.useMemo)(
2286
+ () => {
2287
+ var _a2;
2288
+ return getComponentProps(
2289
+ [(_a2 = rest.polarRadiusAxisProps) != null ? _a2 : {}, polarRadiusAxisProperties],
2290
+ styles.polarRadiusAxis
2291
+ )(theme);
2292
+ },
2293
+ [rest.polarRadiusAxisProps, styles.polarRadiusAxis, theme]
2294
+ );
2295
+ const polarRadiusAxisTickClassName = (0, import_react13.useMemo)(
2296
+ () => getClassName({
2297
+ ...styles.polarRadiusAxisTick,
2298
+ ...rest.polarRadiusAxisTickProps
2299
+ })(theme),
2300
+ [rest.polarRadiusAxisTickProps, styles.polarRadiusAxisTick, theme]
2301
+ );
2351
2302
  const [radarProps, radarClassName] = (0, import_react13.useMemo)(() => {
2352
2303
  const resolvedRadarProps = {
2353
2304
  fillOpacity: "var(--ui-fill-opacity)",
@@ -2445,7 +2396,6 @@ var useRadarChart = ({
2445
2396
  dimmed ? dimDotClassName : void 0
2446
2397
  )(theme);
2447
2398
  resolvedDot = {
2448
- // BUG: className is not applied.
2449
2399
  className: (0, import_utils16.cx)("ui-radar-chart__dot", className),
2450
2400
  fill: color,
2451
2401
  r: 4,
@@ -2514,20 +2464,24 @@ var useRadarChart = ({
2514
2464
  const getPolarGridProps = (0, import_react13.useCallback)(
2515
2465
  ({ className, ...props } = {}, ref = null) => ({
2516
2466
  ref,
2517
- // BUG: `.recharts-polar-grid-concentric-xxx` is not applied className.
2518
2467
  className: (0, import_utils16.cx)(className, polarGridClassName),
2468
+ strokeDasharray,
2519
2469
  ...props,
2520
2470
  ...polarGridProps
2521
2471
  }),
2522
- [polarGridClassName, polarGridProps]
2472
+ [polarGridClassName, polarGridProps, strokeDasharray]
2523
2473
  );
2524
2474
  const getPolarAngleAxisProps = (0, import_react13.useCallback)(
2525
2475
  ({ className, ...props } = {}, ref = null) => ({
2526
2476
  ref,
2527
- // BUG: className is not applied.
2528
- // className: cx(className, polarAngleAxisClassName),
2529
- className,
2477
+ className: (0, import_utils16.cx)(className, polarAngleAxisClassName),
2530
2478
  dataKey,
2479
+ tick: {
2480
+ className: (0, import_utils16.cx)(
2481
+ "ui-radar-chart__polar-angle-axis-tick",
2482
+ polarAngleAxisTickClassName
2483
+ )
2484
+ },
2531
2485
  tickFormatter: valueFormatter,
2532
2486
  tickSize: 16,
2533
2487
  ...props,
@@ -2535,24 +2489,30 @@ var useRadarChart = ({
2535
2489
  }),
2536
2490
  [
2537
2491
  dataKey,
2538
- // polarAngleAxisClassName,
2492
+ polarAngleAxisClassName,
2539
2493
  polarAngleAxisProps,
2494
+ polarAngleAxisTickClassName,
2540
2495
  valueFormatter
2541
2496
  ]
2542
2497
  );
2543
2498
  const getPolarRadiusAxisProps = (0, import_react13.useCallback)(
2544
2499
  ({ className, ...props } = {}, ref = null) => ({
2545
2500
  ref,
2546
- // BUG: className is not applied.
2547
- // className: cx(className, polarRadiusAxisClassName),
2548
- className,
2501
+ className: (0, import_utils16.cx)(className, polarRadiusAxisClassName),
2502
+ tick: {
2503
+ className: (0, import_utils16.cx)(
2504
+ "ui-radar-chart__polar-radius-axis-tick",
2505
+ polarRadiusAxisTickClassName
2506
+ )
2507
+ },
2549
2508
  tickFormatter: valueFormatter,
2550
2509
  ...props,
2551
2510
  ...polarRadiusAxisProps
2552
2511
  }),
2553
2512
  [
2554
- // polarRadiusAxisClassName,
2513
+ polarRadiusAxisClassName,
2555
2514
  polarRadiusAxisProps,
2515
+ polarRadiusAxisTickClassName,
2556
2516
  valueFormatter
2557
2517
  ]
2558
2518
  );
@@ -2569,8 +2529,8 @@ var useRadarChart = ({
2569
2529
 
2570
2530
  // src/radar-chart.tsx
2571
2531
  var import_jsx_runtime8 = require("react/jsx-runtime");
2572
- var RadarChart = (0, import_core15.forwardRef)((props, ref) => {
2573
- const [styles, mergedProps] = (0, import_core15.useMultiComponentStyle)("RadarChart", props);
2532
+ var RadarChart = (0, import_core16.forwardRef)((props, ref) => {
2533
+ const [styles, mergedProps] = (0, import_core16.useMultiComponentStyle)("RadarChart", props);
2574
2534
  const {
2575
2535
  className,
2576
2536
  data,
@@ -2580,13 +2540,16 @@ var RadarChart = (0, import_core15.forwardRef)((props, ref) => {
2580
2540
  chartProps,
2581
2541
  polarGridProps,
2582
2542
  polarAngleAxisProps,
2543
+ polarAngleAxisTickProps,
2583
2544
  polarRadiusAxisProps,
2545
+ polarRadiusAxisTickProps,
2584
2546
  containerProps,
2585
2547
  tooltipProps,
2586
2548
  legendProps,
2587
2549
  tooltipAnimationDuration,
2588
2550
  unit,
2589
2551
  valueFormatter,
2552
+ strokeDasharray,
2590
2553
  withDots,
2591
2554
  withActiveDots,
2592
2555
  strokeWidth,
@@ -2597,7 +2560,7 @@ var RadarChart = (0, import_core15.forwardRef)((props, ref) => {
2597
2560
  withPolarAngleAxis = true,
2598
2561
  withPolarRadiusAxis = false,
2599
2562
  ...rest
2600
- } = (0, import_core15.omitThemeProps)(mergedProps);
2563
+ } = (0, import_core16.omitThemeProps)(mergedProps);
2601
2564
  const {
2602
2565
  getRadarProps,
2603
2566
  getRadarChartProps,
@@ -2614,20 +2577,19 @@ var RadarChart = (0, import_core15.forwardRef)((props, ref) => {
2614
2577
  chartProps,
2615
2578
  polarGridProps,
2616
2579
  polarAngleAxisProps,
2580
+ polarAngleAxisTickProps,
2617
2581
  polarRadiusAxisProps,
2582
+ polarRadiusAxisTickProps,
2618
2583
  withDots,
2619
2584
  withActiveDots,
2620
2585
  strokeWidth,
2621
2586
  fillOpacity,
2622
2587
  valueFormatter,
2588
+ strokeDasharray,
2623
2589
  styles
2624
2590
  });
2625
2591
  const { getContainerProps } = useChart({ containerProps });
2626
- const {
2627
- tooltipProps: computedTooltipProps,
2628
- getTooltipProps,
2629
- tooltipVars
2630
- } = useChartTooltip({
2592
+ const { tooltipProps: computedTooltipProps, getTooltipProps } = useChartTooltip({
2631
2593
  tooltipProps,
2632
2594
  tooltipAnimationDuration,
2633
2595
  styles
@@ -2641,16 +2603,16 @@ var RadarChart = (0, import_core15.forwardRef)((props, ref) => {
2641
2603
  {
2642
2604
  ...getRadarProps({ index, className: "ui-radar-chart__radar" })
2643
2605
  },
2644
- `radar=${dataKey2}`
2606
+ `radar-${dataKey2}`
2645
2607
  )),
2646
2608
  [getRadarProps, series]
2647
2609
  );
2648
2610
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChartProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
2649
- import_core15.ui.div,
2611
+ import_core16.ui.div,
2650
2612
  {
2651
2613
  ref,
2652
2614
  className: (0, import_utils17.cx)("ui-radar-chart", className),
2653
- var: [...radarVars, ...tooltipVars],
2615
+ var: radarVars,
2654
2616
  __css: { maxW: "full", ...styles.container },
2655
2617
  ...rest,
2656
2618
  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(