@yamada-ui/react 2.1.0 → 2.1.1-dev-20260303115332

package/dist/esm/components/chart/chart.js

@@ -35,8 +35,15 @@ function gradients(length, color = "mono", strategy = "invert") {
 		else return `${strategy}(colors.${color}, ${percent})`;
 	});
 }
+function parseJSON(value) {
+	try {
+		return JSON.parse(value);
+	} catch {
+		return value;
+	}
+}
 const { ComponentContext, PropsContext: ChartPropsContext, useComponentContext: useChartComponentContext, usePropsContext: useChartPropsContext, withContext, withProvider } = createSlotComponent("chart", chartStyle);
-const Chart = withProvider(({ children, components: componentsProp, render, series = [], withLegend = false, withTooltip = true, legendProps, responsiveContainerProps, tooltipProps, ...rest }) => {
+const Chart = withProvider(({ children, components: componentsProp, render, withLegend = false, withTooltip = true, legendProps, responsiveContainerProps, tooltipProps, ...rest }) => {
 	const { highlightedDataKey, onHighlight } = useChart();
 	const nameKeyRef = useRef(void 0);
 	const components = useMemo(() => [
@@ -55,16 +62,6 @@ const Chart = withProvider(({ children, components: componentsProp, render, seri
 		withTooltip
 	]);
 	const [omittedChildren, ...customComponents] = useSplitChildren(children, ...components.map(({ component }) => component));
-	const varProps = useMemo(() => series.reduce((acc, data) => {
-		const key = `--${data.dataKey.toString()}`;
-		if (data.color) acc[key] = varAttr(data.color, "colors");
-		return acc;
-	}, {}), [series]);
-	const varMap = useMemo(() => series.reduce((acc, data) => {
-		const key = data.dataKey.toString();
-		if (data.color) acc[key] = `var(--${key})`;
-		return acc;
-	}, {}), [series]);
 	return /* @__PURE__ */ jsx(ChartContext, {
 		value: useMemo(() => ({
 			highlightedDataKey,
@@ -73,16 +70,10 @@ const Chart = withProvider(({ children, components: componentsProp, render, seri
 		children: /* @__PURE__ */ jsx(ComponentContext, {
 			value: useMemo(() => ({
 				nameKeyRef,
-				varMap,
-				legendProps,
-				tooltipProps
-			}), [
-				varMap,
 				legendProps,
 				tooltipProps
-			]),
+			}), [legendProps, tooltipProps]),
 			children: /* @__PURE__ */ jsx(styled.div, {
-				...varProps,
 				...rest,
 				children: /* @__PURE__ */ jsx(ResponsiveContainer, {
 					...responsiveContainerProps,
@@ -124,7 +115,7 @@ const ChartLegend = withContext((props) => {
 	});
 }, "legend")();
 const ChartLegendContent = withContext(({ formatter, payload, withSwatch = true, ...rest }) => {
-	const { nameKeyRef, varMap } = useChartComponentContext();
+	const { nameKeyRef } = useChartComponentContext();
 	const { getLegendItemProps } = useChartLegendContext();
 	return /* @__PURE__ */ jsx(styled.div, {
 		...rest,
@@ -132,7 +123,7 @@ const ChartLegendContent = withContext(({ formatter, payload, withSwatch = true,
 			let value = data.value;
 			if (nameKeyRef.current) value = data.payload?.[nameKeyRef.current];
 			const dataKey = (0, utils_exports.isString)(data.dataKey) || (0, utils_exports.isNumber)(data.dataKey) ? data.dataKey : value;
-			const color = data.color || (dataKey ? varMap[dataKey] : void 0);
+			const color = parseJSON(data.color);
 			const formattedValue = formatter?.(value, data, index) ?? value;
 			return /* @__PURE__ */ jsxs(ChartLegendItem, {
 				...getLegendItemProps({ dataKey }),
@@ -177,13 +168,13 @@ const ChartTooltipCursor = withContext("path", "tooltipCursor")(void 0, ({ botto
 	};
 });
 const ChartTooltipContent = withContext(({ formatter, label: labelProp, labelFormatter, payload, withSwatch = true, ...rest }) => {
-	const { nameKeyRef, varMap } = useChartComponentContext();
+	const { nameKeyRef } = useChartComponentContext();
 	const label = labelFormatter ? labelFormatter(labelProp, payload) : labelProp;
 	return /* @__PURE__ */ jsxs(styled.div, {
 		...rest,
 		children: [!(0, utils_exports.isUndefined)(label) && !(0, utils_exports.isNull)(label) ? /* @__PURE__ */ jsx(ChartTooltipLabel, { children: label }) : null, /* @__PURE__ */ jsx(ChartTooltipList, { children: payload.map((data, index) => {
 			if (nameKeyRef.current) data.name = data.payload[nameKeyRef.current];
-			const color = data.payload.fill ?? varMap[data.dataKey.toString()];
+			const color = parseJSON(data.color) || data.payload.fill;
 			const result = formatter?.(data.value, data.name, data, index, payload) ?? ((0, utils_exports.isArray)(data.value) ? data.value.join(", ") : data.value);
 			const [value, name] = (0, utils_exports.isArray)(result) ? result : [result, data.name];
 			return /* @__PURE__ */ jsxs(ChartTooltipItem, { children: [

package/dist/esm/components/chart/chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart.js","names":["createContext"],"sources":["../../../../src/components/chart/chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n  JSXElementConstructor,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n  RefObject,\n} from \"react\"\nimport type {\n  ActiveDotProps,\n  DataKey,\n  DefaultLegendContentProps,\n  DotItemDotProps,\n  DotProps,\n  LabelProps,\n  RenderableText,\n  ResponsiveContainerProps,\n  TooltipContentProps,\n} from \"recharts\"\nimport type {\n  CSSProps,\n  GenericsComponent,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type { Dict, Merge } from \"../../utils\"\nimport type {\n  ChartAreaProps,\n  ChartBarProps,\n  ChartLineProps,\n} from \"./cartesian-chart\"\nimport type { ChartStyle } from \"./chart.style\"\nimport type {\n  ChartDonutProps,\n  ChartPieProps,\n  ChartRadarProps,\n  ChartRadialProps,\n} from \"./polar-chart\"\nimport type {\n  UseChartLabelListProps,\n  UseChartLabelProps,\n  UseChartLegendProps,\n  UseChartLegendReturn,\n  UseChartTooltipProps,\n} from \"./use-chart\"\nimport { Fragment, isValidElement, useMemo, useRef } from \"react\"\nimport {\n  Label,\n  LabelList,\n  Legend,\n  ResponsiveContainer,\n  Tooltip,\n} from \"recharts\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport {\n  createContext,\n  isArray,\n  isNull,\n  isNumber,\n  isObject,\n  isString,\n  isUndefined,\n  useSplitChildren,\n} from \"../../utils\"\nimport { chartStyle } from \"./chart.style\"\nimport {\n  ChartContext,\n  useChart,\n  useChartLabel,\n  useChartLabelList,\n  useChartLegend,\n  useChartTooltip,\n} from \"./use-chart\"\n\nexport type ChartDot =\n  | ((props: DotItemDotProps) => ReactNode)\n  | boolean\n  | Merge<Partial<DotProps>, HTMLStyledProps<\"circle\">>\n  | ReactElement\n\nexport type ChartActiveDot =\n  | ((props: ActiveDotProps) => ReactNode)\n  | boolean\n  | Merge<Partial<ActiveDotProps>, HTMLStyledProps<\"circle\">>\n  | ReactElement\n\nexport type ChartLabel =\n  | ((props: any) => ReactElement | RenderableText)\n  | boolean\n  | (Merge<\n      HTMLStyledProps<\"text\">,\n      Pick<\n        LabelProps,\n        | \"angle\"\n        | \"content\"\n        | \"formatter\"\n        | \"index\"\n        | \"labelRef\"\n        | \"offset\"\n        | \"parentViewBox\"\n        | \"position\"\n        | \"textBreakAll\"\n        | \"value\"\n        | \"viewBox\"\n        | \"zIndex\"\n      >\n    > & { dataKey?: DataKey<any> })\n  | number\n  | ReactElement\n  | string\n\nexport type ChartLabelList =\n  | ((props: LabelProps) => ReactElement | RenderableText)\n  | boolean\n  | ChartLabelListProps\n  | ReactElement\n\nexport type ChartTickLine = boolean | HTMLStyledProps<\"line\">\n\ntype GradientStrategy = \"invert\" | \"shade\" | \"tint\"\n\nexport function mergeSeries<Y>(\n  series: Y[],\n  color: CSSProps[\"color\"] = \"mono\",\n  strategy: GradientStrategy = \"invert\",\n): (Y & { color: CSSProps[\"fill\"] })[] {\n  const colors = gradients(series.length, color, strategy)\n\n  return series.map((item, index) => ({ ...item, color: colors[index] }))\n}\n\nexport function mergeData<Y>(\n  data: Y[],\n  color: CSSProps[\"fill\"] = \"mono\",\n  strategy: GradientStrategy = \"invert\",\n): (Y & { fill: CSSProps[\"fill\"] })[] {\n  const colors = gradients(data.length, color, strategy)\n\n  return data.map((item, index) => ({ ...item, fill: colors[index] }))\n}\n\nexport function gradients(\n  length: number,\n  color: CSSProps[\"color\"] = \"mono\",\n  strategy: GradientStrategy = \"invert\",\n): CSSProps[\"fill\"][] {\n  return Array.from({ length }, (_, index) => {\n    const value = Math.floor(100 - (100 / length) * index)\n    const percent = `${value}%`\n\n    if (strategy === \"invert\") {\n      return [\n        `tint(colors.${color}, ${percent})`,\n        `shade(colors.${color}, ${percent})`,\n      ]\n    } else {\n      return `${strategy}(colors.${color}, ${percent})`\n    }\n  })\n}\n\ninterface ComponentContext extends Pick<\n  ChartProps,\n  \"legendProps\" | \"tooltipProps\"\n> {\n  nameKeyRef: RefObject<string | undefined>\n  varMap: Dict<string>\n}\n\nexport interface ChartProps<Y extends Dict = Dict>\n  extends HTMLStyledProps, ThemeProps<ChartStyle> {\n  /**\n   * The components to render the chart components.\n   */\n  components: {\n    component: JSXElementConstructor<any>\n    fallback: ReactNode\n  }[]\n  /**\n   * The function to render the chart.\n   */\n  render: (props: PropsWithChildren) => ReactNode\n  /**\n   * The color of the label list.\n   */\n  labelListColor?: CSSProps[\"color\"]\n  /**\n   * The fill of the label list.\n   */\n  labelListFill?: CSSProps[\"fill\"]\n  /**\n   * If provided, generate shapes based on series.\n   */\n  series?:\n    | ChartAreaProps<Y>[]\n    | ChartBarProps<Y>[]\n    | ChartDonutProps<Y>[]\n    | ChartLineProps<Y>[]\n    | ChartPieProps<Y>[]\n    | ChartRadarProps<Y>[]\n    | ChartRadialProps<Y>[]\n  /**\n   * The fill of the tooltip cursor.\n   */\n  tooltipCursorFill?: CSSProps[\"fill\"]\n  /**\n   * The fill opacity of the tooltip cursor.\n   */\n  tooltipCursorFillOpacity?: CSSProps[\"fillOpacity\"]\n  /**\n   * The stroke of the tooltip cursor.\n   */\n  tooltipCursorStroke?: CSSProps[\"stroke\"]\n  /**\n   * If `true`, legend is visible.\n   *\n   * @default false\n   */\n  withLegend?: boolean\n  /**\n   * If `true`, tooltip is visible.\n   *\n   * @default true\n   */\n  withTooltip?: boolean\n  /**\n   * Props for the legend component.\n   */\n  legendProps?: ChartLegendProps\n  /**\n   * Props for the responsive container component.\n   */\n  responsiveContainerProps?: ResponsiveContainerProps\n  /**\n   * Props for the tooltip component.\n   */\n  tooltipProps?: ChartTooltipProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ChartPropsContext,\n  useComponentContext: useChartComponentContext,\n  usePropsContext: useChartPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ChartProps, ChartStyle, ComponentContext>(\n  \"chart\",\n  chartStyle,\n)\n\nexport { ChartPropsContext, useChartComponentContext, useChartPropsContext }\n\nexport const Chart = withProvider(\n  <Y extends Dict>({\n    children,\n    components: componentsProp,\n    render,\n    series = [],\n    withLegend = false,\n    withTooltip = true,\n    legendProps,\n    responsiveContainerProps,\n    tooltipProps,\n    ...rest\n  }: ChartProps<Y>) => {\n    const { highlightedDataKey, onHighlight } = useChart()\n    const nameKeyRef = useRef<string | undefined>(undefined)\n    const components = useMemo(\n      () => [\n        ...componentsProp,\n        {\n          component: ChartLegend,\n          fallback: withLegend ? <ChartLegend /> : null,\n        },\n        {\n          component: ChartTooltip,\n          fallback: withTooltip ? <ChartTooltip /> : null,\n        },\n      ],\n      [componentsProp, withLegend, withTooltip],\n    )\n    const [omittedChildren, ...customComponents] = useSplitChildren(\n      children,\n      ...components.map(({ component }) => component),\n    )\n    const varProps = useMemo(\n      () =>\n        series.reduce<Dict>((acc, data) => {\n          const key = `--${data.dataKey.toString()}`\n\n          if (data.color) acc[key] = varAttr(data.color, \"colors\")\n\n          return acc\n        }, {}),\n      [series],\n    )\n    const varMap = useMemo(\n      () =>\n        series.reduce<Dict>((acc, data) => {\n          const key = data.dataKey.toString()\n\n          if (data.color) acc[key] = `var(--${key})`\n\n          return acc\n        }, {}),\n      [series],\n    )\n    const context = useMemo(\n      () => ({\n        highlightedDataKey,\n        onHighlight,\n      }),\n      [highlightedDataKey, onHighlight],\n    )\n    const componentContext = useMemo(\n      () => ({\n        nameKeyRef,\n        varMap,\n        legendProps,\n        tooltipProps,\n      }),\n      [varMap, legendProps, tooltipProps],\n    )\n\n    return (\n      <ChartContext value={context}>\n        <ComponentContext value={componentContext}>\n          <styled.div {...varProps} {...rest}>\n            <ResponsiveContainer {...responsiveContainerProps}>\n              {render({\n                children: (\n                  <>\n                    {components.map(({ fallback }, index) => (\n                      <Fragment key={index}>\n                        {customComponents[index] ?? fallback}\n                      </Fragment>\n                    ))}\n\n                    {omittedChildren}\n                  </>\n                ),\n              })}\n            </ResponsiveContainer>\n          </styled.div>\n        </ComponentContext>\n      </ChartContext>\n    )\n  },\n  \"root\",\n)(\n  undefined,\n  ({\n    labelListColor,\n    labelListFill,\n    tooltipCursorFill,\n    tooltipCursorFillOpacity,\n    tooltipCursorStroke,\n    ...rest\n  }) => ({\n    \"--label-list-color\": varAttr(labelListColor, \"colors\"),\n    \"--label-list-fill\": varAttr(labelListFill, \"colors\"),\n    \"--tooltip-cursor-fill\": varAttr(tooltipCursorFill, \"colors\"),\n    \"--tooltip-cursor-fill-opacity\": tooltipCursorFillOpacity,\n    \"--tooltip-cursor-stroke\": varAttr(tooltipCursorStroke, \"colors\"),\n    ...rest,\n  }),\n) as GenericsComponent<{\n  <Y extends Dict>(props: ChartProps<Y>): ReactElement\n}>\n\ninterface ChartLegendContext extends Pick<\n  UseChartLegendReturn,\n  \"getLegendItemProps\"\n> {}\n\nconst [ChartLegendContext, useChartLegendContext] =\n  createContext<ChartLegendContext>({\n    name: \"ChartLegendContext\",\n  })\n\nexport interface ChartLegendProps extends Merge<\n  HTMLStyledProps,\n  UseChartLegendProps\n> {\n  /**\n   * Props for the content component.\n   */\n  contentProps?: Omit<ChartLegendContentProps, \"formatter\" | \"payload\">\n}\n\nexport const ChartLegend = withContext<\"div\", ChartLegendProps>((props) => {\n  const { legendProps } = useChartComponentContext()\n  const { contentProps, ...rest } = { ...legendProps, ...props }\n  const {\n    getLegendContentProps,\n    getLegendItemProps,\n    getLegendProps,\n    getRootProps,\n  } = useChartLegend({\n    content: ({ formatter, payload }) => (\n      <ChartLegendContent\n        formatter={formatter}\n        payload={payload}\n        {...getLegendContentProps(contentProps)}\n      />\n    ),\n    ...rest,\n  })\n  const context = useMemo(() => ({ getLegendItemProps }), [getLegendItemProps])\n\n  return (\n    <ChartLegendContext value={context}>\n      <styled.div asChild {...getRootProps()}>\n        <Legend {...getLegendProps()} />\n      </styled.div>\n    </ChartLegendContext>\n  )\n}, \"legend\")()\n\ninterface ChartLegendContentProps\n  extends\n    HTMLStyledProps,\n    Pick<DefaultLegendContentProps, \"formatter\" | \"payload\"> {\n  /**\n   * If `true`, swatch is visible.\n   */\n  withSwatch?: boolean\n}\n\nconst ChartLegendContent = withContext<\"div\", ChartLegendContentProps>(\n  ({ formatter, payload, withSwatch = true, ...rest }) => {\n    const { nameKeyRef, varMap } = useChartComponentContext()\n    const { getLegendItemProps } = useChartLegendContext()\n\n    return (\n      <styled.div {...rest}>\n        {payload?.map((data, index) => {\n          let value = data.value\n\n          if (nameKeyRef.current)\n            value = (data.payload as any)?.[nameKeyRef.current]\n\n          const dataKey =\n            isString(data.dataKey) || isNumber(data.dataKey)\n              ? data.dataKey\n              : value\n          const color = data.color || (dataKey ? varMap[dataKey] : undefined)\n          const formattedValue = formatter?.(value, data, index) ?? value\n\n          return (\n            <ChartLegendItem key={index} {...getLegendItemProps({ dataKey })}>\n              {withSwatch ? <ChartLegendSwatch bg={color} /> : null}\n              <ChartLegendValue>{formattedValue}</ChartLegendValue>\n            </ChartLegendItem>\n          )\n        })}\n      </styled.div>\n    )\n  },\n  \"legendContent\",\n)()\n\ninterface ChartLegendItemProps extends HTMLStyledProps {}\n\nconst ChartLegendItem = withContext<\"div\", ChartLegendItemProps>(\n  \"div\",\n  \"legendItem\",\n)()\n\ninterface ChartLegendSwatchProps extends HTMLStyledProps {}\n\nconst ChartLegendSwatch = withContext<\"div\", ChartLegendSwatchProps>(\n  \"div\",\n  \"legendSwatch\",\n)()\n\ninterface ChartLegendValueProps extends HTMLStyledProps<\"span\"> {}\n\nconst ChartLegendValue = withContext<\"span\", ChartLegendValueProps>(\n  \"span\",\n  \"legendValue\",\n)()\n\nexport interface ChartTooltipProps<\n  Y extends (number | string)[] | number | string = number,\n  M extends number | string = string,\n> extends Omit<Merge<HTMLStyledProps, UseChartTooltipProps<Y, M>>, \"cursor\"> {\n  /**\n   * Props for the cursor component.\n   */\n  cursor?: boolean | ChartTooltipCursorProps | ReactElement\n  /**\n   * Props for the content component.\n   */\n  contentProps?: Omit<\n    ChartTooltipContentProps,\n    \"formatter\" | \"label\" | \"labelFormatter\" | \"payload\"\n  >\n}\n\nexport const ChartTooltip = <\n  Y extends (number | string)[] | number | string,\n  M extends number | string,\n>(\n  props: ChartTooltipProps<Y, M>,\n) => {\n  const { tooltipProps } = useChartComponentContext()\n  const {\n    cursor = false,\n    contentProps,\n    ...rest\n  } = {\n    ...tooltipProps,\n    ...props,\n  } as ChartTooltipProps<Y, M>\n  const { getContentProps, getRootProps } = useChartTooltip({\n    content: ({ formatter, label, labelFormatter, payload }) => (\n      <ChartTooltipContent\n        formatter={formatter}\n        label={label}\n        labelFormatter={labelFormatter}\n        payload={payload}\n        {...getContentProps(contentProps)}\n      />\n    ),\n    cursor:\n      isValidElement(cursor) || !cursor ? (\n        cursor\n      ) : (\n        <ChartTooltipCursor {...(isObject(cursor) ? cursor : {})} />\n      ),\n    ...rest,\n  })\n\n  return <Tooltip {...getRootProps()} />\n}\n\ninterface ChartTooltipCursorProps extends Omit<\n  HTMLStyledProps<\"path\">,\n  \"height\" | \"points\" | \"width\"\n> {\n  brushBottom?: number\n  height?: number\n  payload?: Dict[]\n  payloadIndex?: number\n  points?: { x: number; y: number }[]\n  width?: number\n}\n\nconst ChartTooltipCursor = withContext<\"path\", ChartTooltipCursorProps>(\n  \"path\",\n  \"tooltipCursor\",\n)(\n  undefined,\n  ({\n    bottom: _bottom,\n    brushBottom: _brushBottom,\n    fill,\n    height,\n    left: _left,\n    payload: _payload,\n    payloadIndex: _payloadIndex,\n    points,\n    right: _right,\n    stroke,\n    top: _top,\n    width,\n    x,\n    y,\n    ...rest\n  }) => {\n    const d = !!points\n      ? `M${points[0]?.x},${points[0]?.y}L${points[1]?.x},${points[1]?.y}`\n      : `M ${x},${y} h ${width} v ${height} h -${width} Z`\n    return {\n      asChild: true,\n      children: <path d={d} height={height} width={width} />,\n      fill: fill === \"#ccc\" ? undefined : fill,\n      stroke: stroke === \"#ccc\" ? undefined : stroke,\n      ...rest,\n    }\n  },\n)\n\ninterface ChartTooltipContentProps\n  extends\n    HTMLStyledProps,\n    Pick<\n      TooltipContentProps<any, any>,\n      \"formatter\" | \"label\" | \"labelFormatter\" | \"payload\"\n    > {\n  /**\n   * If `true`, swatch is visible.\n   */\n  withSwatch?: boolean\n}\n\nconst ChartTooltipContent = withContext<\"div\", ChartTooltipContentProps>(\n  ({\n    formatter,\n    label: labelProp,\n    labelFormatter,\n    payload,\n    withSwatch = true,\n    ...rest\n  }) => {\n    const { nameKeyRef, varMap } = useChartComponentContext()\n    const label = labelFormatter\n      ? labelFormatter(labelProp, payload)\n      : labelProp\n\n    return (\n      <styled.div {...rest}>\n        {!isUndefined(label) && !isNull(label) ? (\n          <ChartTooltipLabel>{label}</ChartTooltipLabel>\n        ) : null}\n\n        <ChartTooltipList>\n          {payload.map((data, index) => {\n            if (nameKeyRef.current) data.name = data.payload[nameKeyRef.current]\n\n            const color = data.payload.fill ?? varMap[data.dataKey.toString()]\n            const result =\n              formatter?.(data.value, data.name, data, index, payload) ??\n              (isArray(data.value) ? data.value.join(\", \") : data.value)\n            const [value, name] = isArray(result) ? result : [result, data.name]\n\n            return (\n              <ChartTooltipItem key={index}>\n                {withSwatch ? <ChartTooltipSwatch bg={color} /> : null}\n                <ChartTooltipName>{name}</ChartTooltipName>\n                <ChartTooltipValue>{value}</ChartTooltipValue>\n              </ChartTooltipItem>\n            )\n          })}\n        </ChartTooltipList>\n      </styled.div>\n    )\n  },\n  \"tooltipContent\",\n)()\n\ninterface ChartTooltipLabel extends HTMLStyledProps<\"p\"> {}\n\nconst ChartTooltipLabel = withContext<\"p\", ChartTooltipLabel>(\n  \"p\",\n  \"tooltipLabel\",\n)()\n\ninterface ChartTooltipList extends HTMLStyledProps {}\n\nconst ChartTooltipList = withContext<\"div\", ChartTooltipList>(\n  \"div\",\n  \"tooltipList\",\n)()\n\ninterface ChartTooltipItem extends HTMLStyledProps {}\n\nconst ChartTooltipItem = withContext<\"div\", ChartTooltipItem>(\n  \"div\",\n  \"tooltipItem\",\n)()\n\ninterface ChartTooltipSwatch extends HTMLStyledProps {}\n\nconst ChartTooltipSwatch = withContext<\"div\", ChartTooltipSwatch>(\n  \"div\",\n  \"tooltipSwatch\",\n)()\n\ninterface ChartTooltipName extends HTMLStyledProps<\"span\"> {}\n\nconst ChartTooltipName = withContext<\"span\", ChartTooltipName>(\n  \"span\",\n  \"tooltipName\",\n)()\n\ninterface ChartTooltipValue extends HTMLStyledProps<\"span\"> {}\n\nconst ChartTooltipValue = withContext<\"span\", ChartTooltipValue>(\n  \"span\",\n  \"tooltipValue\",\n)()\n\nexport interface ChartLabelListProps extends Merge<\n  HTMLStyledProps<\"text\">,\n  UseChartLabelListProps\n> {}\n\nexport const ChartLabelList = withContext<\"text\", ChartLabelListProps>(\n  (props) => {\n    const { getLabelListProps, getRootProps } = useChartLabelList(props)\n\n    return (\n      <styled.text asChild {...getRootProps()}>\n        <LabelList {...getLabelListProps()} />\n      </styled.text>\n    )\n  },\n  \"labelList\",\n)()\n\nexport interface ChartLabelProps extends Merge<\n  HTMLStyledProps<\"text\">,\n  UseChartLabelProps\n> {}\n\nexport const ChartLabel = withContext<\"text\", ChartLabelProps>((props) => {\n  const { getLabelProps, getRootProps } = useChartLabel(props)\n\n  return (\n    <styled.text asChild {...getRootProps()}>\n      <Label {...getLabelProps()} />\n    </styled.text>\n  )\n}, \"label\")()\n"],"mappings":"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"}
+{"version":3,"file":"chart.js","names":["createContext"],"sources":["../../../../src/components/chart/chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n  JSXElementConstructor,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n  RefObject,\n} from \"react\"\nimport type {\n  ActiveDotProps,\n  DataKey,\n  DefaultLegendContentProps,\n  DotItemDotProps,\n  DotProps,\n  LabelProps,\n  RenderableText,\n  ResponsiveContainerProps,\n  TooltipContentProps,\n} from \"recharts\"\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Dict, Merge } from \"../../utils\"\nimport type { ChartStyle } from \"./chart.style\"\nimport type {\n  UseChartLabelListProps,\n  UseChartLabelProps,\n  UseChartLegendProps,\n  UseChartLegendReturn,\n  UseChartTooltipProps,\n} from \"./use-chart\"\nimport { Fragment, isValidElement, useMemo, useRef } from \"react\"\nimport {\n  Label,\n  LabelList,\n  Legend,\n  ResponsiveContainer,\n  Tooltip,\n} from \"recharts\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport {\n  createContext,\n  isArray,\n  isNull,\n  isNumber,\n  isObject,\n  isString,\n  isUndefined,\n  useSplitChildren,\n} from \"../../utils\"\nimport { chartStyle } from \"./chart.style\"\nimport {\n  ChartContext,\n  useChart,\n  useChartLabel,\n  useChartLabelList,\n  useChartLegend,\n  useChartTooltip,\n} from \"./use-chart\"\n\nexport type ChartDot =\n  | ((props: DotItemDotProps) => ReactNode)\n  | boolean\n  | Merge<Partial<DotProps>, HTMLStyledProps<\"circle\">>\n  | ReactElement\n\nexport type ChartActiveDot =\n  | ((props: ActiveDotProps) => ReactNode)\n  | boolean\n  | Merge<Partial<ActiveDotProps>, HTMLStyledProps<\"circle\">>\n  | ReactElement\n\nexport type ChartLabel =\n  | ((props: any) => ReactElement | RenderableText)\n  | boolean\n  | (Merge<\n      HTMLStyledProps<\"text\">,\n      Pick<\n        LabelProps,\n        | \"angle\"\n        | \"content\"\n        | \"formatter\"\n        | \"index\"\n        | \"labelRef\"\n        | \"offset\"\n        | \"parentViewBox\"\n        | \"position\"\n        | \"textBreakAll\"\n        | \"value\"\n        | \"viewBox\"\n        | \"zIndex\"\n      >\n    > & { dataKey?: DataKey<any> })\n  | number\n  | ReactElement\n  | string\n\nexport type ChartLabelList =\n  | ((props: LabelProps) => ReactElement | RenderableText)\n  | boolean\n  | ChartLabelListProps\n  | ReactElement\n\nexport type ChartTickLine = boolean | HTMLStyledProps<\"line\">\n\ntype GradientStrategy = \"invert\" | \"shade\" | \"tint\"\n\nexport function mergeSeries<Y>(\n  series: Y[],\n  color: CSSProps[\"color\"] = \"mono\",\n  strategy: GradientStrategy = \"invert\",\n): (Y & { color: CSSProps[\"fill\"] })[] {\n  const colors = gradients(series.length, color, strategy)\n\n  return series.map((item, index) => ({ ...item, color: colors[index] }))\n}\n\nexport function mergeData<Y>(\n  data: Y[],\n  color: CSSProps[\"fill\"] = \"mono\",\n  strategy: GradientStrategy = \"invert\",\n): (Y & { fill: CSSProps[\"fill\"] })[] {\n  const colors = gradients(data.length, color, strategy)\n\n  return data.map((item, index) => ({ ...item, fill: colors[index] }))\n}\n\nexport function gradients(\n  length: number,\n  color: CSSProps[\"color\"] = \"mono\",\n  strategy: GradientStrategy = \"invert\",\n): CSSProps[\"fill\"][] {\n  return Array.from({ length }, (_, index) => {\n    const value = Math.floor(100 - (100 / length) * index)\n    const percent = `${value}%`\n\n    if (strategy === \"invert\") {\n      return [\n        `tint(colors.${color}, ${percent})`,\n        `shade(colors.${color}, ${percent})`,\n      ]\n    } else {\n      return `${strategy}(colors.${color}, ${percent})`\n    }\n  })\n}\n\nfunction parseJSON(value: any) {\n  try {\n    return JSON.parse(value)\n  } catch {\n    return value\n  }\n}\n\ninterface ComponentContext extends Pick<\n  ChartProps,\n  \"legendProps\" | \"tooltipProps\"\n> {\n  nameKeyRef: RefObject<string | undefined>\n}\n\nexport interface ChartProps extends HTMLStyledProps, ThemeProps<ChartStyle> {\n  /**\n   * The components to render the chart components.\n   */\n  components: {\n    component: JSXElementConstructor<any>\n    fallback: ReactNode\n  }[]\n  /**\n   * The function to render the chart.\n   */\n  render: (props: PropsWithChildren) => ReactNode\n  /**\n   * The color of the label list.\n   */\n  labelListColor?: CSSProps[\"color\"]\n  /**\n   * The fill of the label list.\n   */\n  labelListFill?: CSSProps[\"fill\"]\n  /**\n   * The fill of the tooltip cursor.\n   */\n  tooltipCursorFill?: CSSProps[\"fill\"]\n  /**\n   * The fill opacity of the tooltip cursor.\n   */\n  tooltipCursorFillOpacity?: CSSProps[\"fillOpacity\"]\n  /**\n   * The stroke of the tooltip cursor.\n   */\n  tooltipCursorStroke?: CSSProps[\"stroke\"]\n  /**\n   * If `true`, legend is visible.\n   *\n   * @default false\n   */\n  withLegend?: boolean\n  /**\n   * If `true`, tooltip is visible.\n   *\n   * @default true\n   */\n  withTooltip?: boolean\n  /**\n   * Props for the legend component.\n   */\n  legendProps?: ChartLegendProps\n  /**\n   * Props for the responsive container component.\n   */\n  responsiveContainerProps?: ResponsiveContainerProps\n  /**\n   * Props for the tooltip component.\n   */\n  tooltipProps?: ChartTooltipProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ChartPropsContext,\n  useComponentContext: useChartComponentContext,\n  usePropsContext: useChartPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ChartProps, ChartStyle, ComponentContext>(\n  \"chart\",\n  chartStyle,\n)\n\nexport { ChartPropsContext, useChartComponentContext, useChartPropsContext }\n\nexport const Chart = withProvider(\n  ({\n    children,\n    components: componentsProp,\n    render,\n    withLegend = false,\n    withTooltip = true,\n    legendProps,\n    responsiveContainerProps,\n    tooltipProps,\n    ...rest\n  }: ChartProps) => {\n    const { highlightedDataKey, onHighlight } = useChart()\n    const nameKeyRef = useRef<string | undefined>(undefined)\n    const components = useMemo(\n      () => [\n        ...componentsProp,\n        {\n          component: ChartLegend,\n          fallback: withLegend ? <ChartLegend /> : null,\n        },\n        {\n          component: ChartTooltip,\n          fallback: withTooltip ? <ChartTooltip /> : null,\n        },\n      ],\n      [componentsProp, withLegend, withTooltip],\n    )\n    const [omittedChildren, ...customComponents] = useSplitChildren(\n      children,\n      ...components.map(({ component }) => component),\n    )\n    const context = useMemo(\n      () => ({\n        highlightedDataKey,\n        onHighlight,\n      }),\n      [highlightedDataKey, onHighlight],\n    )\n    const componentContext = useMemo(\n      () => ({\n        nameKeyRef,\n        legendProps,\n        tooltipProps,\n      }),\n      [legendProps, tooltipProps],\n    )\n\n    return (\n      <ChartContext value={context}>\n        <ComponentContext value={componentContext}>\n          <styled.div {...rest}>\n            <ResponsiveContainer {...responsiveContainerProps}>\n              {render({\n                children: (\n                  <>\n                    {components.map(({ fallback }, index) => (\n                      <Fragment key={index}>\n                        {customComponents[index] ?? fallback}\n                      </Fragment>\n                    ))}\n\n                    {omittedChildren}\n                  </>\n                ),\n              })}\n            </ResponsiveContainer>\n          </styled.div>\n        </ComponentContext>\n      </ChartContext>\n    )\n  },\n  \"root\",\n)(\n  undefined,\n  ({\n    labelListColor,\n    labelListFill,\n    tooltipCursorFill,\n    tooltipCursorFillOpacity,\n    tooltipCursorStroke,\n    ...rest\n  }) => ({\n    \"--label-list-color\": varAttr(labelListColor, \"colors\"),\n    \"--label-list-fill\": varAttr(labelListFill, \"colors\"),\n    \"--tooltip-cursor-fill\": varAttr(tooltipCursorFill, \"colors\"),\n    \"--tooltip-cursor-fill-opacity\": tooltipCursorFillOpacity,\n    \"--tooltip-cursor-stroke\": varAttr(tooltipCursorStroke, \"colors\"),\n    ...rest,\n  }),\n)\n\ninterface ChartLegendContext extends Pick<\n  UseChartLegendReturn,\n  \"getLegendItemProps\"\n> {}\n\nconst [ChartLegendContext, useChartLegendContext] =\n  createContext<ChartLegendContext>({\n    name: \"ChartLegendContext\",\n  })\n\nexport interface ChartLegendProps extends Merge<\n  HTMLStyledProps,\n  UseChartLegendProps\n> {\n  /**\n   * Props for the content component.\n   */\n  contentProps?: Omit<ChartLegendContentProps, \"formatter\" | \"payload\">\n}\n\nexport const ChartLegend = withContext<\"div\", ChartLegendProps>((props) => {\n  const { legendProps } = useChartComponentContext()\n  const { contentProps, ...rest } = { ...legendProps, ...props }\n  const {\n    getLegendContentProps,\n    getLegendItemProps,\n    getLegendProps,\n    getRootProps,\n  } = useChartLegend({\n    content: ({ formatter, payload }) => (\n      <ChartLegendContent\n        formatter={formatter}\n        payload={payload}\n        {...getLegendContentProps(contentProps)}\n      />\n    ),\n    ...rest,\n  })\n  const context = useMemo(() => ({ getLegendItemProps }), [getLegendItemProps])\n\n  return (\n    <ChartLegendContext value={context}>\n      <styled.div asChild {...getRootProps()}>\n        <Legend {...getLegendProps()} />\n      </styled.div>\n    </ChartLegendContext>\n  )\n}, \"legend\")()\n\ninterface ChartLegendContentProps\n  extends\n    HTMLStyledProps,\n    Pick<DefaultLegendContentProps, \"formatter\" | \"payload\"> {\n  /**\n   * If `true`, swatch is visible.\n   */\n  withSwatch?: boolean\n}\n\nconst ChartLegendContent = withContext<\"div\", ChartLegendContentProps>(\n  ({ formatter, payload, withSwatch = true, ...rest }) => {\n    const { nameKeyRef } = useChartComponentContext()\n    const { getLegendItemProps } = useChartLegendContext()\n\n    return (\n      <styled.div {...rest}>\n        {payload?.map((data, index) => {\n          let value = data.value\n\n          if (nameKeyRef.current)\n            value = (data.payload as any)?.[nameKeyRef.current]\n\n          const dataKey =\n            isString(data.dataKey) || isNumber(data.dataKey)\n              ? data.dataKey\n              : value\n          const color = parseJSON(data.color)\n          const formattedValue = formatter?.(value, data, index) ?? value\n\n          return (\n            <ChartLegendItem key={index} {...getLegendItemProps({ dataKey })}>\n              {withSwatch ? <ChartLegendSwatch bg={color} /> : null}\n              <ChartLegendValue>{formattedValue}</ChartLegendValue>\n            </ChartLegendItem>\n          )\n        })}\n      </styled.div>\n    )\n  },\n  \"legendContent\",\n)()\n\ninterface ChartLegendItemProps extends HTMLStyledProps {}\n\nconst ChartLegendItem = withContext<\"div\", ChartLegendItemProps>(\n  \"div\",\n  \"legendItem\",\n)()\n\ninterface ChartLegendSwatchProps extends HTMLStyledProps {}\n\nconst ChartLegendSwatch = withContext<\"div\", ChartLegendSwatchProps>(\n  \"div\",\n  \"legendSwatch\",\n)()\n\ninterface ChartLegendValueProps extends HTMLStyledProps<\"span\"> {}\n\nconst ChartLegendValue = withContext<\"span\", ChartLegendValueProps>(\n  \"span\",\n  \"legendValue\",\n)()\n\nexport interface ChartTooltipProps<\n  Y extends (number | string)[] | number | string = number,\n  M extends number | string = string,\n> extends Omit<Merge<HTMLStyledProps, UseChartTooltipProps<Y, M>>, \"cursor\"> {\n  /**\n   * Props for the cursor component.\n   */\n  cursor?: boolean | ChartTooltipCursorProps | ReactElement\n  /**\n   * Props for the content component.\n   */\n  contentProps?: Omit<\n    ChartTooltipContentProps,\n    \"formatter\" | \"label\" | \"labelFormatter\" | \"payload\"\n  >\n}\n\nexport const ChartTooltip = <\n  Y extends (number | string)[] | number | string,\n  M extends number | string,\n>(\n  props: ChartTooltipProps<Y, M>,\n) => {\n  const { tooltipProps } = useChartComponentContext()\n  const {\n    cursor = false,\n    contentProps,\n    ...rest\n  } = {\n    ...tooltipProps,\n    ...props,\n  } as ChartTooltipProps<Y, M>\n  const { getContentProps, getRootProps } = useChartTooltip({\n    content: ({ formatter, label, labelFormatter, payload }) => (\n      <ChartTooltipContent\n        formatter={formatter}\n        label={label}\n        labelFormatter={labelFormatter}\n        payload={payload}\n        {...getContentProps(contentProps)}\n      />\n    ),\n    cursor:\n      isValidElement(cursor) || !cursor ? (\n        cursor\n      ) : (\n        <ChartTooltipCursor {...(isObject(cursor) ? cursor : {})} />\n      ),\n    ...rest,\n  })\n\n  return <Tooltip {...getRootProps()} />\n}\n\ninterface ChartTooltipCursorProps extends Omit<\n  HTMLStyledProps<\"path\">,\n  \"height\" | \"points\" | \"width\"\n> {\n  brushBottom?: number\n  height?: number\n  payload?: Dict[]\n  payloadIndex?: number\n  points?: { x: number; y: number }[]\n  width?: number\n}\n\nconst ChartTooltipCursor = withContext<\"path\", ChartTooltipCursorProps>(\n  \"path\",\n  \"tooltipCursor\",\n)(\n  undefined,\n  ({\n    bottom: _bottom,\n    brushBottom: _brushBottom,\n    fill,\n    height,\n    left: _left,\n    payload: _payload,\n    payloadIndex: _payloadIndex,\n    points,\n    right: _right,\n    stroke,\n    top: _top,\n    width,\n    x,\n    y,\n    ...rest\n  }) => {\n    const d = !!points\n      ? `M${points[0]?.x},${points[0]?.y}L${points[1]?.x},${points[1]?.y}`\n      : `M ${x},${y} h ${width} v ${height} h -${width} Z`\n    return {\n      asChild: true,\n      children: <path d={d} height={height} width={width} />,\n      fill: fill === \"#ccc\" ? undefined : fill,\n      stroke: stroke === \"#ccc\" ? undefined : stroke,\n      ...rest,\n    }\n  },\n)\n\ninterface ChartTooltipContentProps\n  extends\n    HTMLStyledProps,\n    Pick<\n      TooltipContentProps<any, any>,\n      \"formatter\" | \"label\" | \"labelFormatter\" | \"payload\"\n    > {\n  /**\n   * If `true`, swatch is visible.\n   */\n  withSwatch?: boolean\n}\n\nconst ChartTooltipContent = withContext<\"div\", ChartTooltipContentProps>(\n  ({\n    formatter,\n    label: labelProp,\n    labelFormatter,\n    payload,\n    withSwatch = true,\n    ...rest\n  }) => {\n    const { nameKeyRef } = useChartComponentContext()\n    const label = labelFormatter\n      ? labelFormatter(labelProp, payload)\n      : labelProp\n\n    return (\n      <styled.div {...rest}>\n        {!isUndefined(label) && !isNull(label) ? (\n          <ChartTooltipLabel>{label}</ChartTooltipLabel>\n        ) : null}\n\n        <ChartTooltipList>\n          {payload.map((data, index) => {\n            if (nameKeyRef.current) data.name = data.payload[nameKeyRef.current]\n\n            const color = parseJSON(data.color) || data.payload.fill\n            const result =\n              formatter?.(data.value, data.name, data, index, payload) ??\n              (isArray(data.value) ? data.value.join(\", \") : data.value)\n            const [value, name] = isArray(result) ? result : [result, data.name]\n\n            return (\n              <ChartTooltipItem key={index}>\n                {withSwatch ? <ChartTooltipSwatch bg={color} /> : null}\n                <ChartTooltipName>{name}</ChartTooltipName>\n                <ChartTooltipValue>{value}</ChartTooltipValue>\n              </ChartTooltipItem>\n            )\n          })}\n        </ChartTooltipList>\n      </styled.div>\n    )\n  },\n  \"tooltipContent\",\n)()\n\ninterface ChartTooltipLabel extends HTMLStyledProps<\"p\"> {}\n\nconst ChartTooltipLabel = withContext<\"p\", ChartTooltipLabel>(\n  \"p\",\n  \"tooltipLabel\",\n)()\n\ninterface ChartTooltipList extends HTMLStyledProps {}\n\nconst ChartTooltipList = withContext<\"div\", ChartTooltipList>(\n  \"div\",\n  \"tooltipList\",\n)()\n\ninterface ChartTooltipItem extends HTMLStyledProps {}\n\nconst ChartTooltipItem = withContext<\"div\", ChartTooltipItem>(\n  \"div\",\n  \"tooltipItem\",\n)()\n\ninterface ChartTooltipSwatch extends HTMLStyledProps {}\n\nconst ChartTooltipSwatch = withContext<\"div\", ChartTooltipSwatch>(\n  \"div\",\n  \"tooltipSwatch\",\n)()\n\ninterface ChartTooltipName extends HTMLStyledProps<\"span\"> {}\n\nconst ChartTooltipName = withContext<\"span\", ChartTooltipName>(\n  \"span\",\n  \"tooltipName\",\n)()\n\ninterface ChartTooltipValue extends HTMLStyledProps<\"span\"> {}\n\nconst ChartTooltipValue = withContext<\"span\", ChartTooltipValue>(\n  \"span\",\n  \"tooltipValue\",\n)()\n\nexport interface ChartLabelListProps extends Merge<\n  HTMLStyledProps<\"text\">,\n  UseChartLabelListProps\n> {}\n\nexport const ChartLabelList = withContext<\"text\", ChartLabelListProps>(\n  (props) => {\n    const { getLabelListProps, getRootProps } = useChartLabelList(props)\n\n    return (\n      <styled.text asChild {...getRootProps()}>\n        <LabelList {...getLabelListProps()} />\n      </styled.text>\n    )\n  },\n  \"labelList\",\n)()\n\nexport interface ChartLabelProps extends Merge<\n  HTMLStyledProps<\"text\">,\n  UseChartLabelProps\n> {}\n\nexport const ChartLabel = withContext<\"text\", ChartLabelProps>((props) => {\n  const { getLabelProps, getRootProps } = useChartLabel(props)\n\n  return (\n    <styled.text asChild {...getRootProps()}>\n      <Label {...getLabelProps()} />\n    </styled.text>\n  )\n}, \"label\")()\n"],"mappings":"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"}

package/dist/esm/components/chart/donut-chart.js

@@ -27,7 +27,6 @@ const DonutChart = withContext(({ children, series = [], chartProps, tooltipProp
 			...props,
 			...chartProps
 		}) }),
-		series,
 		tooltipProps: {
 			labelFormatter: useCallback(() => null, []),
 			...tooltipProps

package/dist/esm/components/chart/donut-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"donut-chart.js","names":["OriginalPieChart"],"sources":["../../../../src/components/chart/donut-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { PolarChartProps as OriginalPolarChartProps } from \"recharts/types/util/types\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { ChartTooltipProps } from \"./chart\"\nimport type { DonutChartStyle } from \"./donut-chart.style\"\nimport type { ChartDonutProps, PolarChartProps } from \"./polar-chart\"\nimport type { UsePieChartProps } from \"./use-pie-chart\"\nimport { useCallback, useMemo } from \"react\"\nimport { PieChart as OriginalPieChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { donutChartStyle } from \"./donut-chart.style\"\nimport { ChartDonut, PolarChart } from \"./polar-chart\"\nimport { usePieChart } from \"./use-pie-chart\"\n\nexport interface DonutChartProps<Y extends Dict = Dict>\n  extends\n    Omit<\n      PolarChartProps<Y>,\n      | \"angleAxisProps\"\n      | \"components\"\n      | \"gridProps\"\n      | \"nameKey\"\n      | \"pieProps\"\n      | \"radarProps\"\n      | \"radialProps\"\n      | \"radiusAxisProps\"\n      | \"render\"\n      | \"series\"\n      | \"withAngleAxis\"\n      | \"withGrid\"\n      | \"withRadiusAxis\"\n    >,\n    UsePieChartProps<Y>,\n    ThemeProps<DonutChartStyle> {\n  /***\n   * If provided, generate lines based on series.\n   */\n  series?: ChartDonutProps<Y>[]\n  /**\n   * Props for the polar chart component.\n   */\n  chartProps?: Omit<OriginalPolarChartProps, \"data\">\n}\n\nconst {\n  PropsContext: DonutChartPropsContext,\n  usePropsContext: useDonutChartPropsContext,\n  withContext,\n} = createComponent<DonutChartProps, DonutChartStyle>(\n  \"donut-chart\",\n  donutChartStyle,\n)\n\nexport { DonutChartPropsContext, useDonutChartPropsContext }\n\n/**\n * `DonutChart` is a component for drawing donut charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/donut-chart\n */\nexport const DonutChart = withContext<\"div\", DonutChartProps>(\n  <Y extends Dict>({\n    children,\n    series = [],\n    chartProps,\n    tooltipProps,\n    ...rest\n  }: DonutChartProps<Y>) => {\n    const { getChartProps, getRootProps } = usePieChart(rest)\n    const components = useMemo(\n      () => [\n        {\n          component: ChartDonut,\n          fallback: series.map((props, index) => (\n            <ChartDonut key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n    const labelFormatter = useCallback<\n      NonNullable<ChartTooltipProps[\"labelFormatter\"]>\n    >(() => null, [])\n\n    return (\n      <PolarChart\n        components={components}\n        render={(props) => (\n          <OriginalPieChart {...getChartProps({ ...props, ...chartProps })} />\n        )}\n        series={series}\n        tooltipProps={{ labelFormatter, ...tooltipProps }}\n        {...getRootProps()}\n      >\n        {children}\n      </PolarChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: DonutChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;;;AA+CA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,gBACE,gBACF,eACA,gBACD;;;;;;AASD,MAAa,aAAa,aACP,EACf,UACA,SAAS,EAAE,EACX,YACA,cACA,GAAG,WACqB;CACxB,MAAM,EAAE,eAAe,iBAAiB,YAAY,KAAK;AAgBzD,QACE,oBAAC;EACC,YAjBe,cACX,CACJ;GACE,WAAW;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,cAAuB,GAAI,SAAX,MAAoB,CACrC;GACH,CACF,EACD,CAAC,OAAO,CACT;EAQG,SAAS,UACP,oBAACA,YAAiB,GAAI,cAAc;GAAE,GAAG;GAAO,GAAG;GAAY,CAAC,GAAI;EAE9D;EACR,cAAc;GAAE,gBAXG,kBAEf,MAAM,EAAE,CAAC;GASmB,GAAG;GAAc;EACjD,GAAI,cAAc;EAEjB;GACU;EAGlB,EAAE"}
+{"version":3,"file":"donut-chart.js","names":["OriginalPieChart"],"sources":["../../../../src/components/chart/donut-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { PolarChartProps as OriginalPolarChartProps } from \"recharts/types/util/types\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { ChartTooltipProps } from \"./chart\"\nimport type { DonutChartStyle } from \"./donut-chart.style\"\nimport type { ChartDonutProps, PolarChartProps } from \"./polar-chart\"\nimport type { UsePieChartProps } from \"./use-pie-chart\"\nimport { useCallback, useMemo } from \"react\"\nimport { PieChart as OriginalPieChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { donutChartStyle } from \"./donut-chart.style\"\nimport { ChartDonut, PolarChart } from \"./polar-chart\"\nimport { usePieChart } from \"./use-pie-chart\"\n\nexport interface DonutChartProps<Y extends Dict = Dict>\n  extends\n    Omit<\n      PolarChartProps<Y>,\n      | \"angleAxisProps\"\n      | \"components\"\n      | \"gridProps\"\n      | \"nameKey\"\n      | \"pieProps\"\n      | \"radarProps\"\n      | \"radialProps\"\n      | \"radiusAxisProps\"\n      | \"render\"\n      | \"series\"\n      | \"withAngleAxis\"\n      | \"withGrid\"\n      | \"withRadiusAxis\"\n    >,\n    UsePieChartProps<Y>,\n    ThemeProps<DonutChartStyle> {\n  /***\n   * If provided, generate lines based on series.\n   */\n  series?: ChartDonutProps<Y>[]\n  /**\n   * Props for the polar chart component.\n   */\n  chartProps?: Omit<OriginalPolarChartProps, \"data\">\n}\n\nconst {\n  PropsContext: DonutChartPropsContext,\n  usePropsContext: useDonutChartPropsContext,\n  withContext,\n} = createComponent<DonutChartProps, DonutChartStyle>(\n  \"donut-chart\",\n  donutChartStyle,\n)\n\nexport { DonutChartPropsContext, useDonutChartPropsContext }\n\n/**\n * `DonutChart` is a component for drawing donut charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/donut-chart\n */\nexport const DonutChart = withContext<\"div\", DonutChartProps>(\n  <Y extends Dict>({\n    children,\n    series = [],\n    chartProps,\n    tooltipProps,\n    ...rest\n  }: DonutChartProps<Y>) => {\n    const { getChartProps, getRootProps } = usePieChart(rest)\n    const components = useMemo(\n      () => [\n        {\n          component: ChartDonut,\n          fallback: series.map((props, index) => (\n            <ChartDonut key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n    const labelFormatter = useCallback<\n      NonNullable<ChartTooltipProps[\"labelFormatter\"]>\n    >(() => null, [])\n\n    return (\n      <PolarChart\n        components={components}\n        render={(props) => (\n          <OriginalPieChart {...getChartProps({ ...props, ...chartProps })} />\n        )}\n        tooltipProps={{ labelFormatter, ...tooltipProps }}\n        {...getRootProps()}\n      >\n        {children}\n      </PolarChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: DonutChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;;;AA+CA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,gBACE,gBACF,eACA,gBACD;;;;;;AASD,MAAa,aAAa,aACP,EACf,UACA,SAAS,EAAE,EACX,YACA,cACA,GAAG,WACqB;CACxB,MAAM,EAAE,eAAe,iBAAiB,YAAY,KAAK;AAgBzD,QACE,oBAAC;EACC,YAjBe,cACX,CACJ;GACE,WAAW;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,cAAuB,GAAI,SAAX,MAAoB,CACrC;GACH,CACF,EACD,CAAC,OAAO,CACT;EAQG,SAAS,UACP,oBAACA,YAAiB,GAAI,cAAc;GAAE,GAAG;GAAO,GAAG;GAAY,CAAC,GAAI;EAEtE,cAAc;GAAE,gBAVG,kBAEf,MAAM,EAAE,CAAC;GAQmB,GAAG;GAAc;EACjD,GAAI,cAAc;EAEjB;GACU;EAGlB,EAAE"}

package/dist/esm/components/chart/line-chart.js

@@ -27,7 +27,6 @@ const LineChart$1 = withContext(({ children, series = [], chartProps, ...rest })
 			...props,
 			...chartProps
 		}) }),
-		series,
 		...getRootProps(),
 		children
 	});

package/dist/esm/components/chart/line-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"line-chart.js","names":["LineChart","OriginalLineChart"],"sources":["../../../../src/components/chart/line-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CartesianChartProps as OriginalCartesianChartProps } from \"recharts/types/util/types\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { CartesianChartProps, ChartLineProps } from \"./cartesian-chart\"\nimport type { LineChartStyle } from \"./line-chart.style\"\nimport type { UseLineChartProps } from \"./use-line-chart\"\nimport { useMemo } from \"react\"\nimport { LineChart as OriginalLineChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { CartesianChart, ChartLine } from \"./cartesian-chart\"\nimport { lineChartStyle } from \"./line-chart.style\"\nimport { useLineChart } from \"./use-line-chart\"\n\nexport interface LineChartProps<Y extends Dict = Dict>\n  extends\n    Omit<\n      CartesianChartProps<Y>,\n      | \"areaFillOpacity\"\n      | \"areaProps\"\n      | \"barProps\"\n      | \"components\"\n      | \"render\"\n      | \"series\"\n    >,\n    UseLineChartProps<Y>,\n    ThemeProps<LineChartStyle> {\n  /**\n   * If provided, generate lines based on series.\n   */\n  series?: ChartLineProps<Y>[]\n  /**\n   * Props for the line chart component.\n   */\n  chartProps?: Omit<OriginalCartesianChartProps, \"data\">\n}\n\nconst {\n  PropsContext: LineChartPropsContext,\n  usePropsContext: useLineChartPropsContext,\n  withContext,\n} = createComponent<LineChartProps, LineChartStyle>(\n  \"line-chart\",\n  lineChartStyle,\n)\n\nexport { LineChartPropsContext, useLineChartPropsContext }\n\n/**\n * `LineChart` is a component for drawing line charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/line-chart\n */\nexport const LineChart = withContext<\"div\", LineChartProps>(\n  <Y extends Dict>({\n    children,\n    series = [],\n    chartProps,\n    ...rest\n  }: LineChartProps<Y>) => {\n    const { getChartProps, getRootProps } = useLineChart(rest)\n    const components = useMemo(\n      () => [\n        {\n          component: ChartLine,\n          fallback: series.map((props, index) => (\n            <ChartLine key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n\n    return (\n      <CartesianChart\n        components={components}\n        render={(props) => (\n          <OriginalLineChart {...getChartProps({ ...props, ...chartProps })} />\n        )}\n        series={series}\n        {...getRootProps()}\n      >\n        {children}\n      </CartesianChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: LineChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;;;AAuCA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,gBACE,gBACF,cACA,eACD;;;;;;AASD,MAAaA,cAAY,aACN,EACf,UACA,SAAS,EAAE,EACX,YACA,GAAG,WACoB;CACvB,MAAM,EAAE,eAAe,iBAAiB,aAAa,KAAK;AAa1D,QACE,oBAAC;EACC,YAde,cACX,CACJ;GACE,WAAW;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,aAAsB,GAAI,SAAX,MAAoB,CACpC;GACH,CACF,EACD,CAAC,OAAO,CACT;EAKG,SAAS,UACP,oBAACC,aAAkB,GAAI,cAAc;GAAE,GAAG;GAAO,GAAG;GAAY,CAAC,GAAI;EAE/D;EACR,GAAI,cAAc;EAEjB;GACc;EAGtB,EAAE"}
+{"version":3,"file":"line-chart.js","names":["LineChart","OriginalLineChart"],"sources":["../../../../src/components/chart/line-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CartesianChartProps as OriginalCartesianChartProps } from \"recharts/types/util/types\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { CartesianChartProps, ChartLineProps } from \"./cartesian-chart\"\nimport type { LineChartStyle } from \"./line-chart.style\"\nimport type { UseLineChartProps } from \"./use-line-chart\"\nimport { useMemo } from \"react\"\nimport { LineChart as OriginalLineChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { CartesianChart, ChartLine } from \"./cartesian-chart\"\nimport { lineChartStyle } from \"./line-chart.style\"\nimport { useLineChart } from \"./use-line-chart\"\n\nexport interface LineChartProps<Y extends Dict = Dict>\n  extends\n    Omit<\n      CartesianChartProps,\n      | \"areaFillOpacity\"\n      | \"areaProps\"\n      | \"barProps\"\n      | \"components\"\n      | \"render\"\n      | \"series\"\n    >,\n    UseLineChartProps<Y>,\n    ThemeProps<LineChartStyle> {\n  /**\n   * If provided, generate lines based on series.\n   */\n  series?: ChartLineProps<Y>[]\n  /**\n   * Props for the line chart component.\n   */\n  chartProps?: Omit<OriginalCartesianChartProps, \"data\">\n}\n\nconst {\n  PropsContext: LineChartPropsContext,\n  usePropsContext: useLineChartPropsContext,\n  withContext,\n} = createComponent<LineChartProps, LineChartStyle>(\n  \"line-chart\",\n  lineChartStyle,\n)\n\nexport { LineChartPropsContext, useLineChartPropsContext }\n\n/**\n * `LineChart` is a component for drawing line charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/line-chart\n */\nexport const LineChart = withContext<\"div\", LineChartProps>(\n  <Y extends Dict>({\n    children,\n    series = [],\n    chartProps,\n    ...rest\n  }: LineChartProps<Y>) => {\n    const { getChartProps, getRootProps } = useLineChart(rest)\n    const components = useMemo(\n      () => [\n        {\n          component: ChartLine,\n          fallback: series.map((props, index) => (\n            <ChartLine key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n\n    return (\n      <CartesianChart\n        components={components}\n        render={(props) => (\n          <OriginalLineChart {...getChartProps({ ...props, ...chartProps })} />\n        )}\n        {...getRootProps()}\n      >\n        {children}\n      </CartesianChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: LineChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;;;AAuCA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,gBACE,gBACF,cACA,eACD;;;;;;AASD,MAAaA,cAAY,aACN,EACf,UACA,SAAS,EAAE,EACX,YACA,GAAG,WACoB;CACvB,MAAM,EAAE,eAAe,iBAAiB,aAAa,KAAK;AAa1D,QACE,oBAAC;EACC,YAde,cACX,CACJ;GACE,WAAW;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,aAAsB,GAAI,SAAX,MAAoB,CACpC;GACH,CACF,EACD,CAAC,OAAO,CACT;EAKG,SAAS,UACP,oBAACC,aAAkB,GAAI,cAAc;GAAE,GAAG;GAAO,GAAG;GAAY,CAAC,GAAI;EAEvE,GAAI,cAAc;EAEjB;GACc;EAGtB,EAAE"}

package/dist/esm/components/chart/pie-chart.js

@@ -27,7 +27,6 @@ const PieChart$1 = withContext(({ children, series = [], chartProps, tooltipProp
 			...props,
 			...chartProps
 		}) }),
-		series,
 		tooltipProps: {
 			labelFormatter: useCallback(() => null, []),
 			...tooltipProps

package/dist/esm/components/chart/pie-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"pie-chart.js","names":["PieChart","OriginalPieChart"],"sources":["../../../../src/components/chart/pie-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { PolarChartProps as OriginalPolarChartProps } from \"recharts/types/util/types\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { ChartTooltipProps } from \"./chart\"\nimport type { PieChartStyle } from \"./pie-chart.style\"\nimport type { ChartPieProps, PolarChartProps } from \"./polar-chart\"\nimport type { UsePieChartProps } from \"./use-pie-chart\"\nimport { useCallback, useMemo } from \"react\"\nimport { PieChart as OriginalPieChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { pieChartStyle } from \"./pie-chart.style\"\nimport { ChartPie, PolarChart } from \"./polar-chart\"\nimport { usePieChart } from \"./use-pie-chart\"\n\nexport interface PieChartProps<Y extends Dict = Dict>\n  extends\n    Omit<\n      PolarChartProps<Y>,\n      | \"angleAxisProps\"\n      | \"components\"\n      | \"donutProps\"\n      | \"gridProps\"\n      | \"nameKey\"\n      | \"radarProps\"\n      | \"radialProps\"\n      | \"radiusAxisProps\"\n      | \"render\"\n      | \"series\"\n      | \"withAngleAxis\"\n      | \"withGrid\"\n      | \"withRadiusAxis\"\n    >,\n    UsePieChartProps<Y>,\n    ThemeProps<PieChartStyle> {\n  /***\n   * If provided, generate lines based on series.\n   */\n  series?: ChartPieProps<Y>[]\n  /**\n   * Props for the polar chart component.\n   */\n  chartProps?: Omit<OriginalPolarChartProps, \"data\">\n}\n\nconst {\n  PropsContext: PieChartPropsContext,\n  usePropsContext: usePieChartPropsContext,\n  withContext,\n} = createComponent<PieChartProps, PieChartStyle>(\"pie-chart\", pieChartStyle)\n\nexport { PieChartPropsContext, usePieChartPropsContext }\n\n/**\n * `PieChart` is a component for drawing pie charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/pie-chart\n */\nexport const PieChart = withContext<\"div\", PieChartProps>(\n  <Y extends Dict>({\n    children,\n    series = [],\n    chartProps,\n    tooltipProps,\n    ...rest\n  }: PieChartProps<Y>) => {\n    const { getChartProps, getRootProps } = usePieChart(rest)\n    const components = useMemo(\n      () => [\n        {\n          component: ChartPie,\n          fallback: series.map((props, index) => (\n            <ChartPie key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n    const labelFormatter = useCallback<\n      NonNullable<ChartTooltipProps[\"labelFormatter\"]>\n    >(() => null, [])\n\n    return (\n      <PolarChart\n        components={components}\n        render={(props) => (\n          <OriginalPieChart {...getChartProps({ ...props, ...chartProps })} />\n        )}\n        series={series}\n        tooltipProps={{ labelFormatter, ...tooltipProps }}\n        {...getRootProps()}\n      >\n        {children}\n      </PolarChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: PieChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;;;AA+CA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACE,gBAA8C,aAAa,cAAc;;;;;;AAS7E,MAAaA,aAAW,aACL,EACf,UACA,SAAS,EAAE,EACX,YACA,cACA,GAAG,WACmB;CACtB,MAAM,EAAE,eAAe,iBAAiB,YAAY,KAAK;AAgBzD,QACE,oBAAC;EACC,YAjBe,cACX,CACJ;GACE,WAAW;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,YAAqB,GAAI,SAAX,MAAoB,CACnC;GACH,CACF,EACD,CAAC,OAAO,CACT;EAQG,SAAS,UACP,oBAACC,YAAiB,GAAI,cAAc;GAAE,GAAG;GAAO,GAAG;GAAY,CAAC,GAAI;EAE9D;EACR,cAAc;GAAE,gBAXG,kBAEf,MAAM,EAAE,CAAC;GASmB,GAAG;GAAc;EACjD,GAAI,cAAc;EAEjB;GACU;EAGlB,EAAE"}
+{"version":3,"file":"pie-chart.js","names":["PieChart","OriginalPieChart"],"sources":["../../../../src/components/chart/pie-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { PolarChartProps as OriginalPolarChartProps } from \"recharts/types/util/types\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { ChartTooltipProps } from \"./chart\"\nimport type { PieChartStyle } from \"./pie-chart.style\"\nimport type { ChartPieProps, PolarChartProps } from \"./polar-chart\"\nimport type { UsePieChartProps } from \"./use-pie-chart\"\nimport { useCallback, useMemo } from \"react\"\nimport { PieChart as OriginalPieChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { pieChartStyle } from \"./pie-chart.style\"\nimport { ChartPie, PolarChart } from \"./polar-chart\"\nimport { usePieChart } from \"./use-pie-chart\"\n\nexport interface PieChartProps<Y extends Dict = Dict>\n  extends\n    Omit<\n      PolarChartProps<Y>,\n      | \"angleAxisProps\"\n      | \"components\"\n      | \"donutProps\"\n      | \"gridProps\"\n      | \"nameKey\"\n      | \"radarProps\"\n      | \"radialProps\"\n      | \"radiusAxisProps\"\n      | \"render\"\n      | \"series\"\n      | \"withAngleAxis\"\n      | \"withGrid\"\n      | \"withRadiusAxis\"\n    >,\n    UsePieChartProps<Y>,\n    ThemeProps<PieChartStyle> {\n  /***\n   * If provided, generate lines based on series.\n   */\n  series?: ChartPieProps<Y>[]\n  /**\n   * Props for the polar chart component.\n   */\n  chartProps?: Omit<OriginalPolarChartProps, \"data\">\n}\n\nconst {\n  PropsContext: PieChartPropsContext,\n  usePropsContext: usePieChartPropsContext,\n  withContext,\n} = createComponent<PieChartProps, PieChartStyle>(\"pie-chart\", pieChartStyle)\n\nexport { PieChartPropsContext, usePieChartPropsContext }\n\n/**\n * `PieChart` is a component for drawing pie charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/pie-chart\n */\nexport const PieChart = withContext<\"div\", PieChartProps>(\n  <Y extends Dict>({\n    children,\n    series = [],\n    chartProps,\n    tooltipProps,\n    ...rest\n  }: PieChartProps<Y>) => {\n    const { getChartProps, getRootProps } = usePieChart(rest)\n    const components = useMemo(\n      () => [\n        {\n          component: ChartPie,\n          fallback: series.map((props, index) => (\n            <ChartPie key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n    const labelFormatter = useCallback<\n      NonNullable<ChartTooltipProps[\"labelFormatter\"]>\n    >(() => null, [])\n\n    return (\n      <PolarChart\n        components={components}\n        render={(props) => (\n          <OriginalPieChart {...getChartProps({ ...props, ...chartProps })} />\n        )}\n        tooltipProps={{ labelFormatter, ...tooltipProps }}\n        {...getRootProps()}\n      >\n        {children}\n      </PolarChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: PieChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;;;AA+CA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACE,gBAA8C,aAAa,cAAc;;;;;;AAS7E,MAAaA,aAAW,aACL,EACf,UACA,SAAS,EAAE,EACX,YACA,cACA,GAAG,WACmB;CACtB,MAAM,EAAE,eAAe,iBAAiB,YAAY,KAAK;AAgBzD,QACE,oBAAC;EACC,YAjBe,cACX,CACJ;GACE,WAAW;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,YAAqB,GAAI,SAAX,MAAoB,CACnC;GACH,CACF,EACD,CAAC,OAAO,CACT;EAQG,SAAS,UACP,oBAACC,YAAiB,GAAI,cAAc;GAAE,GAAG;GAAO,GAAG;GAAY,CAAC,GAAI;EAEtE,cAAc;GAAE,gBAVG,kBAEf,MAAM,EAAE,CAAC;GAQmB,GAAG;GAAc;EACjD,GAAI,cAAc;EAEjB;GACU;EAGlB,EAAE"}

package/dist/esm/components/chart/polar-chart.js

@@ -108,27 +108,18 @@ const PolarChart = withProvider(({ components: componentsProp, nameKey, withAngl
 }));
 const ChartPie = withContext((props) => {
 	const { pieProps } = useComponentContext();
-	const { activeIndex, children, dataKey, label: labelProp, labelLine: labelLineProp = false, labelList = false, nameKey, sectorProps, ...rest } = {
+	const { activeIndex, children, label: labelProp, labelLine: labelLineProp = false, labelList = false, nameKey, sectorProps, ...rest } = {
 		...pieProps,
 		...props
 	};
-	const { varMap } = useChartComponentContext();
 	const shape = useCallback((props$1, index) => {
 		if ((0, utils_exports.isNumber)(activeIndex)) props$1.isActive = index === activeIndex;
-		const color = varMap[`${dataKey.toString()}-${props$1.name}`];
 		return /* @__PURE__ */ jsx(ChartSector, {
-			color,
 			...props$1,
 			...(0, utils_exports.runIfFn)(sectorProps, props$1, index)
 		});
-	}, [
-		activeIndex,
-		dataKey,
-		sectorProps,
-		varMap
-	]);
+	}, [activeIndex, sectorProps]);
 	const { getPieProps, getRootProps } = useChartPie({
-		dataKey,
 		label: useMemo(() => {
 			if (!labelProp) return labelProp;
 			const Component = (props$1) => /* @__PURE__ */ jsx(ChartPieLabel, {
@@ -201,21 +192,21 @@ const ChartDonut = component(ChartPie, "donut")(void 0, (props) => {
 }));
 const ChartRadar = withContext((props) => {
 	const { radarProps } = useComponentContext();
-	const { activeDot: activeDotProp = true, children, dataKey, dot: dotProp = false, label: labelProp = false, ...rest } = {
+	const { activeDot: activeDotProp = true, children, dataKey, dot: dotProp = false, label: labelProp = false, stroke: strokeProp, ...rest } = {
 		...radarProps,
 		...props
 	};
 	const id = useId();
 	const system = useSystem();
 	const { theme } = useTheme();
-	const { varMap } = useChartComponentContext();
-	const color = varMap[dataKey.toString()] ?? rest.stroke ?? rest.color;
+	const color = strokeProp ?? rest.fill ?? rest.color;
+	const stroke = JSON.stringify(color);
 	const dotProps = useSlotComponentProps({}, "dot");
 	const activeDotProps = useSlotComponentProps({}, "activeDot");
 	const labelProps = useSlotComponentProps({}, "labelList");
+	const css = useMemo(() => getCSS(system, theme), [system, theme]);
 	const dot = useMemo(() => {
 		if (!dotProp) return dotProp;
-		const css = getCSS(system, theme);
 		const className = (0, utils_exports.cx)(dotProps.className, css(dotProps.css), css({
 			fill: color,
 			stroke: color
@@ -234,15 +225,13 @@ const ChartRadar = withContext((props) => {
 		} else return { className };
 	}, [
 		dotProp,
-		system,
-		theme,
 		dotProps.className,
 		dotProps.css,
+		css,
 		color
 	]);
 	const activeDot = useMemo(() => {
 		if (!activeDotProp) return activeDotProp;
-		const css = getCSS(system, theme);
 		const className = (0, utils_exports.cx)(activeDotProps.className, css(activeDotProps.css), css({
 			fill: color,
 			stroke: color
@@ -261,15 +250,13 @@ const ChartRadar = withContext((props) => {
 		} else return { className };
 	}, [
 		activeDotProp,
-		system,
-		theme,
 		activeDotProps.className,
 		activeDotProps.css,
+		css,
 		color
 	]);
 	const label = useMemo(() => {
 		if (!labelProp) return labelProp;
-		const css = getCSS(system, theme);
 		const className = (0, utils_exports.cx)(labelProps.className, css(labelProps.css));
 		if ((0, utils_exports.isFunction)(labelProp)) return (props$1) => labelProp({
 			...props$1,
@@ -284,11 +271,10 @@ const ChartRadar = withContext((props) => {
 			};
 		} else return { className };
 	}, [
-		system,
-		theme,
 		labelProp,
 		labelProps.className,
-		labelProps.css
+		labelProps.css,
+		css
 	]);
 	const { getRadarProps, getRootProps } = useChartRadar({
 		activeDot,
@@ -296,7 +282,7 @@ const ChartRadar = withContext((props) => {
 		dot,
 		fill: color ? `url(#${id})` : "",
 		label,
-		stroke: color,
+		stroke,
 		...rest
 	});
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(styled.path, {
@@ -330,9 +316,9 @@ const ChartAngleAxis = withContext((props) => {
 	const labelProps = useSlotComponentProps({}, "angleAxisLabel");
 	const tickLineProps = useSlotComponentProps({}, "angleAxisTickLine");
 	const axisLineProps = useSlotComponentProps({}, "angleAxisLine");
+	const css = useMemo(() => getCSS(system, theme), [system, theme]);
 	const tick = useMemo(() => {
 		if (!tickProp) return tickProp;
-		const css = getCSS(system, theme);
 		const className = (0, utils_exports.cx)(tickProps.className, css(tickProps.css));
 		if ((0, utils_exports.isFunction)(tickProp)) return (props$1) => tickProp({
 			...props$1,
@@ -347,15 +333,13 @@ const ChartAngleAxis = withContext((props) => {
 			};
 		} else return { className };
 	}, [
-		system,
-		theme,
 		tickProp,
 		tickProps.className,
-		tickProps.css
+		tickProps.css,
+		css
 	]);
 	const tickLine = useMemo(() => {
 		if (!tickLineProp) return tickLineProp;
-		const css = getCSS(system, theme);
 		const className = (0, utils_exports.cx)(tickLineProps.className, css(tickLineProps.css));
 		if ((0, utils_exports.isObject)(tickLineProp)) {
 			const [omittedProps, styleProps] = (0, utils_exports.splitObject)(tickLineProp, shouldForwardProp);
@@ -365,16 +349,14 @@ const ChartAngleAxis = withContext((props) => {
 			};
 		} else return { className };
 	}, [
-		system,
-		theme,
 		tickLineProp,
 		tickLineProps.className,
-		tickLineProps.css
+		tickLineProps.css,
+		css
 	]);
 	const { getAngleAxisProps, getRootProps } = useAngleAxis({
 		axisLine: useMemo(() => {
 			if (!axisLineProp) return axisLineProp;
-			const css = getCSS(system, theme);
 			const className = (0, utils_exports.cx)(axisLineProps.className, css(axisLineProps.css));
 			if ((0, utils_exports.isObject)(axisLineProp)) {
 				const [omittedProps, styleProps] = (0, utils_exports.splitObject)(axisLineProp, shouldForwardProp);
@@ -384,16 +366,14 @@ const ChartAngleAxis = withContext((props) => {
 				};
 			} else return { className };
 		}, [
-			system,
-			theme,
 			axisLineProp,
 			axisLineProps.className,
-			axisLineProps.css
+			axisLineProps.css,
+			css
 		]),
 		dataKey: nameKey,
 		label: useMemo(() => {
 			if (!labelProp) return labelProp;
-			const css = getCSS(system, theme);
 			const className = (0, utils_exports.cx)(labelProps.className, css(labelProps.css));
 			if ((0, utils_exports.isFunction)(labelProp)) return (props$1) => labelProp({
 				...props$1,
@@ -411,11 +391,10 @@ const ChartAngleAxis = withContext((props) => {
 				children: labelProp
 			};
 		}, [
-			system,
-			theme,
 			labelProp,
 			labelProps.className,
-			labelProps.css
+			labelProps.css,
+			css
 		]),
 		tick,
 		tickLine,
@@ -442,9 +421,9 @@ const ChartRadiusAxis = withContext((props) => {
 	const labelProps = useSlotComponentProps({}, "radiusAxisLabel");
 	const tickLineProps = useSlotComponentProps({}, "radiusAxisTickLine");
 	const axisLineProps = useSlotComponentProps({}, "radiusAxisLine");
+	const css = useMemo(() => getCSS(system, theme), [system, theme]);
 	const tick = useMemo(() => {
 		if (!tickProp) return tickProp;
-		const css = getCSS(system, theme);
 		const className = (0, utils_exports.cx)(tickProps.className, css(tickProps.css));
 		if ((0, utils_exports.isFunction)(tickProp)) return (props$1) => tickProp({
 			...props$1,
@@ -459,15 +438,13 @@ const ChartRadiusAxis = withContext((props) => {
 			};
 		} else return { className };
 	}, [
-		system,
-		theme,
 		tickProp,
 		tickProps.className,
-		tickProps.css
+		tickProps.css,
+		css
 	]);
 	const tickLine = useMemo(() => {
 		if (!tickLineProp) return tickLineProp;
-		const css = getCSS(system, theme);
 		const className = (0, utils_exports.cx)(tickLineProps.className, css(tickLineProps.css));
 		if ((0, utils_exports.isObject)(tickLineProp)) {
 			const [omittedProps, styleProps] = (0, utils_exports.splitObject)(tickLineProp, shouldForwardProp);
@@ -477,16 +454,14 @@ const ChartRadiusAxis = withContext((props) => {
 			};
 		} else return { className };
 	}, [
-		system,
-		theme,
 		tickLineProp,
 		tickLineProps.className,
-		tickLineProps.css
+		tickLineProps.css,
+		css
 	]);
 	const { getRadiusAxisProps, getRootProps } = useRadiusAxis({
 		axisLine: useMemo(() => {
 			if (!axisLineProp) return axisLineProp;
-			const css = getCSS(system, theme);
 			const className = (0, utils_exports.cx)(axisLineProps.className, css(axisLineProps.css));
 			if ((0, utils_exports.isObject)(axisLineProp)) {
 				const [omittedProps, styleProps] = (0, utils_exports.splitObject)(axisLineProp, shouldForwardProp);
@@ -496,15 +471,13 @@ const ChartRadiusAxis = withContext((props) => {
 				};
 			} else return { className };
 		}, [
-			system,
-			theme,
 			axisLineProp,
 			axisLineProps.className,
-			axisLineProps.css
+			axisLineProps.css,
+			css
 		]),
 		label: useMemo(() => {
 			if (!labelProp) return labelProp;
-			const css = getCSS(system, theme);
 			const className = (0, utils_exports.cx)(labelProps.className, css(labelProps.css));
 			if ((0, utils_exports.isFunction)(labelProp)) return (props$1) => labelProp({
 				...props$1,
@@ -522,11 +495,10 @@ const ChartRadiusAxis = withContext((props) => {
 				children: labelProp
 			};
 		}, [
-			system,
-			theme,
 			labelProp,
 			labelProps.className,
-			labelProps.css
+			labelProps.css,
+			css
 		]),
 		tick,
 		tickLine,
@@ -561,25 +533,23 @@ const ChartRadial = withContext((props) => {
 	};
 	const system = useSystem();
 	const { theme } = useTheme();
-	const { nameKeyRef, varMap } = useChartComponentContext();
+	const { nameKeyRef } = useChartComponentContext();
 	const labelProps = useSlotComponentProps({}, "labelList");
 	const backgroundProps = useSlotComponentProps({}, "radialBackground");
+	const css = useMemo(() => getCSS(system, theme), [system, theme]);
 	const shape = useCallback((props$1) => {
 		return /* @__PURE__ */ jsx(ChartSector, {
-			color: varMap[`${dataKey.toString()}-${props$1.name}`] ?? rest.fill ?? rest.color,
+			color: rest.fill ?? rest.color,
 			...props$1,
 			...(0, utils_exports.runIfFn)(sectorProps, props$1)
 		});
 	}, [
-		dataKey,
 		rest.fill,
 		rest.color,
-		sectorProps,
-		varMap
+		sectorProps
 	]);
 	const label = useMemo(() => {
 		if (!labelProp) return labelProp;
-		const css = getCSS(system, theme);
 		const className = (0, utils_exports.cx)(labelProps.className, css(labelProps.css));
 		if ((0, utils_exports.isFunction)(labelProp)) return (props$1) => labelProp({
 			...props$1,
@@ -594,16 +564,14 @@ const ChartRadial = withContext((props) => {
 			};
 		} else return { className };
 	}, [
-		system,
-		theme,
 		labelProp,
 		labelProps.className,
-		labelProps.css
+		labelProps.css,
+		css
 	]);
 	const { getRadialProps, getRootProps } = useChartRadial({
 		background: useMemo(() => {
 			if (!backgroundProp) return backgroundProp;
-			const css = getCSS(system, theme);
 			const className = (0, utils_exports.cx)(backgroundProps.className, css(backgroundProps.css));
 			if ((0, utils_exports.isFunction)(backgroundProp)) return (props$1) => backgroundProp({
 				...props$1,
@@ -618,11 +586,10 @@ const ChartRadial = withContext((props) => {
 				};
 			} else return { className };
 		}, [
-			system,
-			theme,
 			backgroundProp,
 			backgroundProps.className,
-			backgroundProps.css
+			backgroundProps.css,
+			css
 		]),
 		dataKey,
 		label,