@yamada-ui/react 2.0.10-dev-20260301101758 → 2.1.0-dev-20260302125757

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

@@ -0,0 +1 @@
+{"version":3,"file":"cartesian-chart.js","names":["props"],"sources":["../../../../src/components/chart/cartesian-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n  ActiveDotProps,\n  DotProps,\n  LabelListProps,\n  LabelProps,\n} from \"recharts\"\nimport type {\n  XAxisTickContentProps,\n  YAxisTickContentProps,\n} from \"recharts/types/util/types\"\nimport type {\n  CSSObject,\n  CSSProps,\n  GenericsComponent,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type { Dict, Merge } from \"../../utils\"\nimport type { CartesianChartStyle } from \"./cartesian-chart.style\"\nimport type {\n  ChartActiveDot,\n  ChartDot,\n  ChartLabel,\n  ChartLabelList,\n  ChartProps,\n  ChartTickLine,\n} from \"./chart\"\nimport type {\n  UseChartAreaProps,\n  UseChartBarProps,\n  UseChartGridProps,\n  UseChartLineProps,\n  UseChartReferenceLineProps,\n  UseChartXAxisProps,\n  UseChartYAxisProps,\n} from \"./use-cartesian-chart\"\nimport { cloneElement, isValidElement, useId, useMemo } from \"react\"\nimport {\n  Area,\n  Bar,\n  CartesianGrid,\n  Line,\n  ReferenceLine,\n  XAxis,\n  YAxis,\n} from \"recharts\"\nimport {\n  createShouldForwardProp,\n  createSlotComponent,\n  getCSS,\n  styled,\n  useSystem,\n  useTheme,\n  varAttr,\n} from \"../../core\"\nimport { cx, isFunction, isObject, splitObject } from \"../../utils\"\nimport { cartesianChartStyle } from \"./cartesian-chart.style\"\nimport { Chart, useChartComponentContext } from \"./chart\"\nimport {\n  useChartArea,\n  useChartBar,\n  useChartGrid,\n  useChartLine,\n  useChartReferenceLine,\n  useChartXAxis,\n  useChartYAxis,\n} from \"./use-cartesian-chart\"\n\nconst shouldForwardProp = createShouldForwardProp()\n\ninterface ComponentContext extends Pick<\n  CartesianChartProps,\n  | \"areaProps\"\n  | \"barProps\"\n  | \"gridProps\"\n  | \"lineProps\"\n  | \"referenceLineProps\"\n  | \"xAxisProps\"\n  | \"yAxisProps\"\n> {}\n\nexport interface CartesianChartProps<Y extends Dict = Dict>\n  extends ChartProps<Y>, ThemeProps<CartesianChartStyle> {\n  /**\n   * The fill color of the active dots.\n   */\n  activeDotFill?: CSSProps[\"fill\"]\n  /**\n   * The radius of the active dots.\n   */\n  activeDotRadius?: CSSProps[\"r\"]\n  /**\n   * The stroke color of the active dots.\n   */\n  activeDotStroke?: CSSProps[\"stroke\"]\n  /**\n   * The stroke width of the active dots.\n   */\n  activeDotStrokeWidth?: CSSProps[\"strokeWidth\"]\n  /**\n   * The fill opacity of the area.\n   */\n  areaFillOpacity?: CSSProps[\"fillOpacity\"]\n  /**\n   * The fill color of the dots.\n   */\n  dotFill?: CSSProps[\"fill\"]\n  /**\n   * The radius of the dots.\n   */\n  dotRadius?: CSSProps[\"r\"]\n  /**\n   * The stroke color of the dots.\n   */\n  dotStroke?: CSSProps[\"stroke\"]\n  /**\n   * The stroke width of the dots.\n   */\n  dotStrokeWidth?: CSSProps[\"strokeWidth\"]\n  /**\n   * The stroke color of the grid.\n   */\n  gridStroke?: CSSProps[\"stroke\"]\n  /**\n   * The opacity of the inactive lines.\n   */\n  inactiveLineOpacity?: CSSProps[\"opacity\"]\n  /**\n   * The color of the lines.\n   */\n  lineColor?: CSSProps[\"color\"]\n  /**\n   * The stroke color of the lines.\n   */\n  lineStroke?: CSSProps[\"stroke\"]\n  /**\n   * The stroke width of the lines.\n   */\n  lineStrokeWidth?: CSSProps[\"strokeWidth\"]\n  /**\n   * The color of the reference lines.\n   */\n  referenceLineColor?: CSSProps[\"color\"]\n  /**\n   * The stroke color of the reference lines.\n   */\n  referenceLineStroke?: CSSProps[\"stroke\"]\n  /**\n   * The stroke width of the reference lines.\n   */\n  referenceLineStrokeWidth?: CSSProps[\"strokeWidth\"]\n  /**\n   * The text color of the reference lines.\n   */\n  referenceLineTextColor?: CSSProps[\"color\"]\n  /**\n   * The text fill color of the reference lines.\n   */\n  referenceLineTextFill?: CSSProps[\"fill\"]\n  /**\n   * If `true`, grid is visible.\n   *\n   * @default true\n   */\n  withGrid?: boolean\n  /**\n   * If `true`, X axis is visible.\n   *\n   * @default true\n   */\n  withXAxis?: boolean\n  /**\n   * If `true`, Y axis is visible.\n   *\n   * @default false\n   */\n  withYAxis?: boolean\n  /**\n   * The stroke color of the x-axis lines.\n   */\n  xAxisLineStroke?: CSSProps[\"stroke\"]\n  /**\n   * The stroke width of the x-axis lines.\n   */\n  xAxisLineStrokeWidth?: CSSProps[\"strokeWidth\"]\n  /**\n   * The text color of the x-axis.\n   */\n  xAxisTextColor?: CSSProps[\"color\"]\n  /**\n   * The text fill color of the x-axis.\n   */\n  xAxisTextFill?: CSSProps[\"fill\"]\n  /**\n   * The stroke color of the y-axis lines.\n   */\n  yAxisLineStroke?: CSSProps[\"stroke\"]\n  /**\n   * The stroke width of the y-axis lines.\n   */\n  yAxisLineStrokeWidth?: CSSProps[\"strokeWidth\"]\n  /**\n   * The text color of the y-axis.\n   */\n  yAxisTextColor?: CSSProps[\"color\"]\n  /**\n   * The text fill color of the y-axis.\n   */\n  yAxisTextFill?: CSSProps[\"fill\"]\n  /**\n   * Props for the area component.\n   */\n  areaProps?: Omit<ChartAreaProps, \"data\" | \"dataKey\">\n  /**\n   * Props for the bar component.\n   */\n  barProps?: Omit<ChartBarProps, \"dataKey\">\n  /**\n   * Props for the grid component.\n   */\n  gridProps?: ChartGridProps\n  /**\n   * Props for the line component.\n   */\n  lineProps?: Omit<ChartLineProps, \"data\" | \"dataKey\">\n  /**\n   * Props for the reference line component.\n   */\n  referenceLineProps?: ChartReferenceLineProps\n  /**\n   * Props for the x axis component.\n   */\n  xAxisProps?: ChartXAxisProps\n  /**\n   * Props for the y axis component.\n   */\n  yAxisProps?: ChartYAxisProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: CartesianChartPropsContext,\n  useComponentContext,\n  usePropsContext: useCartesianChartPropsContext,\n  withContext,\n  withProvider,\n  useSlotComponentProps,\n} = createSlotComponent<\n  CartesianChartProps,\n  CartesianChartStyle,\n  ComponentContext\n>(\"cartesian-chart\", cartesianChartStyle)\n\nexport { CartesianChartPropsContext, useCartesianChartPropsContext }\n\nexport const CartesianChart = withProvider(\n  <Y extends Dict>({\n    components: componentsProp,\n    withGrid = true,\n    withXAxis = true,\n    withYAxis = false,\n    areaProps,\n    barProps,\n    gridProps,\n    lineProps,\n    referenceLineProps,\n    xAxisProps,\n    yAxisProps,\n    ...rest\n  }: CartesianChartProps<Y>) => {\n    const components = useMemo(\n      () => [\n        {\n          component: ChartGrid,\n          fallback: withGrid ? <ChartGrid /> : null,\n        },\n        {\n          component: ChartXAxis,\n          fallback: <ChartXAxis hide={!withXAxis} />,\n        },\n        {\n          component: ChartYAxis,\n          fallback: <ChartYAxis hide={!withYAxis} />,\n        },\n        ...componentsProp,\n      ],\n      [componentsProp, withGrid, withXAxis, withYAxis],\n    )\n    const componentContext = useMemo(\n      () => ({\n        areaProps,\n        barProps,\n        gridProps,\n        lineProps,\n        referenceLineProps,\n        xAxisProps,\n        yAxisProps,\n      }),\n      [\n        areaProps,\n        barProps,\n        gridProps,\n        lineProps,\n        referenceLineProps,\n        xAxisProps,\n        yAxisProps,\n      ],\n    )\n\n    return (\n      <ComponentContext value={componentContext}>\n        <Chart components={components} {...rest} />\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)(\n  undefined,\n  ({\n    activeDotFill,\n    activeDotRadius,\n    activeDotStroke,\n    activeDotStrokeWidth,\n    areaFillOpacity,\n    dotFill,\n    dotRadius,\n    dotStroke,\n    dotStrokeWidth,\n    gridStroke,\n    inactiveLineOpacity,\n    lineColor,\n    lineStroke,\n    lineStrokeWidth,\n    referenceLineColor,\n    referenceLineStroke,\n    referenceLineStrokeWidth,\n    referenceLineTextColor,\n    referenceLineTextFill,\n    xAxisLineStroke,\n    xAxisLineStrokeWidth,\n    xAxisTextColor,\n    xAxisTextFill,\n    yAxisLineStroke,\n    yAxisLineStrokeWidth,\n    yAxisTextColor,\n    yAxisTextFill,\n    ...rest\n  }) => ({\n    \"--active-dot-fill\": varAttr(activeDotFill, \"colors\"),\n    \"--active-dot-r\": activeDotRadius,\n    \"--active-dot-stroke\": varAttr(activeDotStroke, \"colors\"),\n    \"--active-dot-stroke-width\": activeDotStrokeWidth,\n    \"--area-fill-opacity\": areaFillOpacity,\n    \"--dot-fill\": varAttr(dotFill, \"colors\"),\n    \"--dot-r\": dotRadius,\n    \"--dot-stroke\": varAttr(dotStroke, \"colors\"),\n    \"--dot-stroke-width\": dotStrokeWidth,\n    \"--grid-stroke\": varAttr(gridStroke, \"colors\"),\n    \"--inactive-line-opacity\": inactiveLineOpacity,\n    \"--line-color\": varAttr(lineColor, \"colors\"),\n    \"--line-stroke\": varAttr(lineStroke, \"colors\"),\n    \"--line-stroke-width\": lineStrokeWidth,\n    \"--reference-line-color\": varAttr(referenceLineColor, \"colors\"),\n    \"--reference-line-stroke\": varAttr(referenceLineStroke, \"colors\"),\n    \"--reference-line-stroke-width\": referenceLineStrokeWidth,\n    \"--reference-line-text-color\": varAttr(referenceLineTextColor, \"colors\"),\n    \"--reference-line-text-fill\": varAttr(referenceLineTextFill, \"colors\"),\n    \"--x-axis-line-stroke\": varAttr(xAxisLineStroke, \"colors\"),\n    \"--x-axis-line-stroke-width\": xAxisLineStrokeWidth,\n    \"--x-axis-text-color\": varAttr(xAxisTextColor, \"colors\"),\n    \"--x-axis-text-fill\": varAttr(xAxisTextFill, \"colors\"),\n    \"--y-axis-line-stroke\": varAttr(yAxisLineStroke, \"colors\"),\n    \"--y-axis-line-stroke-width\": yAxisLineStrokeWidth,\n    \"--y-axis-text-color\": varAttr(yAxisTextColor, \"colors\"),\n    \"--y-axis-text-fill\": varAttr(yAxisTextFill, \"colors\"),\n    ...rest,\n  }),\n) as GenericsComponent<{\n  <Y extends Dict>(props: CartesianChartProps<Y>): ReactElement\n}>\n\nexport type ChartXAxisTick =\n  | ((props: XAxisTickContentProps) => ReactNode)\n  | boolean\n  | HTMLStyledProps<\"text\">\n  | ReactElement\n\nexport interface ChartXAxisProps extends Merge<\n  HTMLStyledProps<\"svg\">,\n  Omit<UseChartXAxisProps, \"label\" | \"tick\" | \"tickLine\">\n> {\n  /**\n   * The label to use for the axis.\n   *\n   * @default false\n   */\n  label?: ChartLabel\n  /**\n   * The tick to use for the axis.\n   *\n   * @default true\n   */\n  tick?: ChartXAxisTick\n  /**\n   * The tick line to use for the axis.\n   *\n   * @default false\n   */\n  tickLine?: ChartTickLine\n}\n\nexport const ChartXAxis = withContext<\"svg\", ChartXAxisProps>((props) => {\n  const { xAxisProps } = useComponentContext()\n  const {\n    children,\n    label: labelProp = false,\n    tick: tickProp = true,\n    tickLine: tickLineProp = false,\n    ...rest\n  } = { ...xAxisProps, ...props }\n  const system = useSystem()\n  const { theme } = useTheme()\n  const tickProps = useSlotComponentProps({}, \"xAxisTick\")\n  const labelProps = useSlotComponentProps({}, \"xAxisLabel\")\n  const tickLineProps = useSlotComponentProps({}, \"xAxisTickLine\")\n  const tick = useMemo<UseChartXAxisProps[\"tick\"]>(() => {\n    if (!tickProp) return tickProp\n\n    const css = getCSS(system, theme)\n    const className = cx(tickProps.className, css(tickProps.css))\n\n    if (isFunction(tickProp)) {\n      return (props) =>\n        tickProp({ ...props, className: cx(className, props.className) })\n    } else if (isValidElement(tickProp)) {\n      return cloneElement<any>(tickProp, { className })\n    } else if (isObject(tickProp)) {\n      const [omittedProps, styleProps] = splitObject<\n        HTMLProps<\"text\">,\n        CSSObject\n      >(tickProp, shouldForwardProp)\n\n      return {\n        ...omittedProps,\n        className: cx(className, omittedProps.className, css(styleProps)),\n      }\n    } else {\n      return { className }\n    }\n  }, [system, theme, tickProp, tickProps.className, tickProps.css])\n  const tickLine = useMemo<UseChartXAxisProps[\"tickLine\"]>(() => {\n    if (!tickLineProp) return tickLineProp\n\n    const css = getCSS(system, theme)\n    const className = cx(tickLineProps.className, css(tickLineProps.css))\n\n    if (isObject(tickLineProp)) {\n      const [omittedProps, styleProps] = splitObject<\n        HTMLProps<\"line\">,\n        CSSObject\n      >(tickLineProp, shouldForwardProp)\n\n      return {\n        ...omittedProps,\n        className: cx(className, omittedProps.className, css(styleProps)),\n      }\n    } else {\n      return { className }\n    }\n  }, [system, theme, tickLineProp, tickLineProps.className, tickLineProps.css])\n  const label = useMemo<UseChartXAxisProps[\"label\"]>(() => {\n    if (!labelProp) return labelProp\n\n    const css = getCSS(system, theme)\n    const className = cx(labelProps.className, css(labelProps.css))\n\n    if (isFunction(labelProp)) {\n      return (props) =>\n        labelProp({ ...props, className: cx(className, props.className) })\n    } else if (isValidElement(labelProp)) {\n      return cloneElement<any>(labelProp, { className })\n    } else if (isObject(labelProp)) {\n      const [omittedProps, styleProps] = splitObject<LabelProps, CSSObject>(\n        labelProp,\n        shouldForwardProp,\n      )\n\n      return {\n        ...omittedProps,\n        className: cx(className, omittedProps.className, css(styleProps)),\n      }\n    } else {\n      return { className, children: labelProp }\n    }\n  }, [system, theme, labelProp, labelProps.className, labelProps.css])\n  const { getRootProps, getXAxisProps } = useChartXAxis({\n    label,\n    tick,\n    tickLine,\n    ...rest,\n  })\n\n  return (\n    <styled.svg asChild {...getRootProps()}>\n      <XAxis {...getXAxisProps()}>{children}</XAxis>\n    </styled.svg>\n  )\n}, \"xAxis\")()\n\nexport type ChartYAxisTick =\n  | ((props: YAxisTickContentProps) => ReactNode)\n  | boolean\n  | HTMLStyledProps<\"text\">\n  | ReactElement\n\nexport interface ChartYAxisProps extends Merge<\n  HTMLStyledProps<\"svg\">,\n  Omit<UseChartYAxisProps, \"label\" | \"tick\" | \"tickLine\">\n> {\n  /**\n   * The label to use for the axis.\n   *\n   * @default false\n   */\n  label?: ChartLabel\n  /**\n   * The tick to use for the axis.\n   *\n   * @default true\n   */\n  tick?: ChartYAxisTick\n  /**\n   * The tick line to use for the axis.\n   *\n   * @default false\n   */\n  tickLine?: ChartTickLine\n}\n\nexport const ChartYAxis = withContext<\"svg\", ChartYAxisProps>((props) => {\n  const { yAxisProps } = useComponentContext()\n  const {\n    children,\n    label: labelProp = false,\n    tick: tickProp = true,\n    tickLine: tickLineProp = false,\n    ...rest\n  } = { ...yAxisProps, ...props }\n  const system = useSystem()\n  const { theme } = useTheme()\n  const tickProps = useSlotComponentProps({}, \"yAxisTick\")\n  const labelProps = useSlotComponentProps({}, \"yAxisLabel\")\n  const tickLineProps = useSlotComponentProps({}, \"yAxisTickLine\")\n  const tick = useMemo<UseChartYAxisProps[\"tick\"]>(() => {\n    if (!tickProp) return tickProp\n\n    const css = getCSS(system, theme)\n    const className = cx(tickProps.className, css(tickProps.css))\n\n    if (isFunction(tickProp)) {\n      return (props) =>\n        tickProp({ ...props, className: cx(className, props.className) })\n    } else if (isValidElement(tickProp)) {\n      return cloneElement<any>(tickProp, { className })\n    } else if (isObject(tickProp)) {\n      const [omittedProps, styleProps] = splitObject<\n        HTMLProps<\"text\">,\n        CSSObject\n      >(tickProp, shouldForwardProp)\n\n      return {\n        ...omittedProps,\n        className: cx(className, omittedProps.className, css(styleProps)),\n      }\n    } else {\n      return { className }\n    }\n  }, [system, theme, tickProp, tickProps.className, tickProps.css])\n  const tickLine = useMemo<UseChartXAxisProps[\"tickLine\"]>(() => {\n    if (!tickLineProp) return tickLineProp\n\n    const css = getCSS(system, theme)\n    const className = cx(tickLineProps.className, css(tickLineProps.css))\n\n    if (isObject(tickLineProp)) {\n      const [omittedProps, styleProps] = splitObject<\n        HTMLProps<\"line\">,\n        CSSObject\n      >(tickLineProp, shouldForwardProp)\n\n      return {\n        ...omittedProps,\n        className: cx(className, omittedProps.className, css(styleProps)),\n      }\n    } else {\n      return { className }\n    }\n  }, [system, theme, tickLineProp, tickLineProps.className, tickLineProps.css])\n  const label = useMemo<UseChartYAxisProps[\"label\"]>(() => {\n    if (!labelProp) return labelProp\n\n    const css = getCSS(system, theme)\n    const className = cx(labelProps.className, css(labelProps.css))\n\n    if (isFunction(labelProp)) {\n      return (props) =>\n        labelProp({ ...props, className: cx(className, props.className) })\n    } else if (isValidElement(labelProp)) {\n      return cloneElement<any>(labelProp, { className })\n    } else if (isObject(labelProp)) {\n      const [omittedProps, styleProps] = splitObject<LabelProps, CSSObject>(\n        labelProp,\n        shouldForwardProp,\n      )\n\n      return {\n        ...omittedProps,\n        className: cx(className, omittedProps.className, css(styleProps)),\n      }\n    } else {\n      return { className, children: labelProp }\n    }\n  }, [system, theme, labelProp, labelProps.className, labelProps.css])\n  const { getRootProps, getYAxisProps } = useChartYAxis({\n    label,\n    tick,\n    tickLine,\n    ...rest,\n  })\n\n  return (\n    <styled.svg asChild {...getRootProps()}>\n      <YAxis {...getYAxisProps()}>{children}</YAxis>\n    </styled.svg>\n  )\n}, \"yAxis\")()\n\nexport interface ChartGridProps extends Merge<\n  HTMLStyledProps<\"line\">,\n  UseChartGridProps\n> {}\n\nexport const ChartGrid = withContext<\"line\", ChartGridProps>((props) => {\n  const { gridProps } = useComponentContext()\n  const { getGridProps, getRootProps } = useChartGrid({\n    ...gridProps,\n    ...props,\n  })\n\n  return (\n    <styled.line asChild {...getRootProps()}>\n      <CartesianGrid {...getGridProps()} />\n    </styled.line>\n  )\n}, \"grid\")()\n\nexport interface ChartLineProps<Y extends Dict = Dict> extends Merge<\n  HTMLStyledProps<\"line\">,\n  Omit<UseChartLineProps, \"activeDot\" | \"data\" | \"dataKey\" | \"dot\" | \"label\">\n> {\n  /**\n   * The key of a group of data which should be unique in an chart.\n   */\n  dataKey: keyof Y\n  /**\n   * The active dot to use for the line.\n   *\n   * @default true\n   */\n  activeDot?: ChartActiveDot\n  /**\n   * The data to use for the line.\n   */\n  data?: Y[]\n  /**\n   * The dot to use for the line.\n   *\n   * @default false\n   */\n  dot?: ChartDot\n  /**\n   * The label list to use for the line.\n   *\n   * @default false\n   */\n  label?: ChartLabelList\n}\n\nexport const ChartLine = withContext<\"line\", ChartLineProps>((props) => {\n  const { lineProps } = useComponentContext()\n  const {\n    activeDot: activeDotProp = true,\n    children,\n    dataKey,\n    dot: dotProp = false,\n    label: labelProp = false,\n    ...rest\n  } = { ...lineProps, ...props }\n  const system = useSystem()\n  const { theme } = useTheme()\n  const { varMap } = useChartComponentContext()\n  const color = varMap[dataKey.toString()] ?? rest.stroke ?? rest.color\n  const dotProps = useSlotComponentProps({}, \"dot\")\n  const activeDotProps = useSlotComponentProps({}, \"activeDot\")\n  const labelProps = useSlotComponentProps({}, \"labelList\")\n  const dot = useMemo<UseChartLineProps[\"dot\"]>(() => {\n    if (!dotProp) return dotProp\n\n    const css = getCSS(system, theme)\n    const className = cx(\n      dotProps.className,\n      css(dotProps.css),\n      css({ fill: color, stroke: color }),\n    )\n\n    if (isFunction(dotProp)) {\n      return (props) =>\n        dotProp({ ...props, className: cx(className, props.className) })\n    } else if (isValidElement(dotProp)) {\n      return cloneElement<any>(dotProp, { className })\n    } else if (isObject(dotProp)) {\n      const [omittedProps, styleProps] = splitObject<DotProps, CSSObject>(\n        dotProp,\n        shouldForwardProp,\n      )\n\n      return {\n        ...omittedProps,\n        className: cx(className, omittedProps.className, css(styleProps)),\n      }\n    } else {\n      return { className }\n    }\n  }, [dotProp, system, theme, dotProps.className, dotProps.css, color])\n  const activeDot = useMemo<UseChartLineProps[\"activeDot\"]>(() => {\n    if (!activeDotProp) return activeDotProp\n\n    const css = getCSS(system, theme)\n    const className = cx(\n      activeDotProps.className,\n      css(activeDotProps.css),\n      css({ fill: color, stroke: color }),\n    )\n\n    if (isFunction(activeDotProp)) {\n      return (props) =>\n        activeDotProp({ ...props, className: cx(className, props.className) })\n    } else if (isValidElement(activeDotProp)) {\n      return cloneElement<any>(activeDotProp, { className })\n    } else if (isObject(activeDotProp)) {\n      const [omittedProps, styleProps] = splitObject<ActiveDotProps, CSSObject>(\n        activeDotProp,\n        shouldForwardProp,\n      )\n\n      return {\n        ...omittedProps,\n        className: cx(className, omittedProps.className, css(styleProps)),\n      }\n    } else {\n      return { className }\n    }\n  }, [\n    activeDotProp,\n    system,\n    theme,\n    activeDotProps.className,\n    activeDotProps.css,\n    color,\n  ])\n  const label = useMemo<UseChartLineProps[\"label\"]>(() => {\n    if (!labelProp) return labelProp\n\n    const css = getCSS(system, theme)\n    const className = cx(labelProps.className, css(labelProps.css))\n\n    if (isFunction(labelProp)) {\n      return (props) =>\n        labelProp({ ...props, className: cx(className, props.className) })\n    } else if (isValidElement(labelProp)) {\n      return cloneElement<any>(labelProp, { className })\n    } else if (isObject(labelProp)) {\n      const [omittedProps, styleProps] = splitObject<LabelListProps, CSSObject>(\n        labelProp,\n        shouldForwardProp,\n      )\n\n      return {\n        ...omittedProps,\n        className: cx(className, omittedProps.className, css(styleProps)),\n      }\n    } else {\n      return { className }\n    }\n  }, [system, theme, labelProp, labelProps.className, labelProps.css])\n  const { getLineProps, getRootProps } = useChartLine({\n    activeDot,\n    dataKey,\n    dot,\n    label,\n    stroke: color,\n    ...rest,\n  })\n\n  return (\n    <styled.line asChild {...getRootProps()}>\n      <Line {...getLineProps()}>{children}</Line>\n    </styled.line>\n  )\n}, \"line\")() as GenericsComponent<{\n  <Y extends Dict>(props: ChartLineProps<Y>): ReactElement\n}>\n\nexport interface ChartAreaProps<Y extends Dict = Dict> extends Merge<\n  HTMLStyledProps<\"line\">,\n  Omit<UseChartAreaProps, \"activeDot\" | \"data\" | \"dataKey\" | \"dot\" | \"label\">\n> {\n  /**\n   * The key of a group of data which should be unique in an chart.\n   */\n  dataKey: keyof Y\n  /**\n   * The active dot to use for the line.\n   *\n   * @default true\n   */\n  activeDot?: ChartActiveDot\n  /**\n   * The data to use for the area.\n   */\n  data?: Y[]\n  /**\n   * The dot to use for the line.\n   *\n   * @default false\n   */\n  dot?: ChartDot\n  /**\n   * The label list to use for the line.\n   *\n   * @default false\n   */\n  label?: ChartLabelList\n  /**\n   * Determines whether the chart area should be represented with a gradient instead of the solid color.\n   */\n  withGradient?: boolean\n}\n\nexport const ChartArea = withContext<\"line\", ChartAreaProps>((props) => {\n  const { areaProps } = useComponentContext()\n  const {\n    activeDot: activeDotProp = true,\n    children,\n    dataKey,\n    dot: dotProp = false,\n    label: labelProp = false,\n    withGradient,\n    ...rest\n  } = { ...areaProps, ...props }\n  const id = useId()\n  const system = useSystem()\n  const { theme } = useTheme()\n  const { varMap } = useChartComponentContext()\n  const color = varMap[dataKey.toString()] ?? rest.stroke ?? rest.color\n  const dotProps = useSlotComponentProps({}, \"dot\")\n  const activeDotProps = useSlotComponentProps({}, \"activeDot\")\n  const labelProps = useSlotComponentProps({}, \"labelList\")\n  const dot = useMemo<UseChartLineProps[\"dot\"]>(() => {\n    if (!dotProp) return dotProp\n\n    const css = getCSS(system, theme)\n    const className = cx(\n      dotProps.className,\n      css(dotProps.css),\n      css({ fill: color, stroke: color }),\n    )\n\n    if (isFunction(dotProp)) {\n      return (props) =>\n        dotProp({\n          ...props,\n          className: cx(className, props.className),\n        })\n    } else if (isValidElement(dotProp)) {\n      return cloneElement<any>(dotProp, {\n        className,\n      })\n    } else if (isObject(dotProp)) {\n      const [omittedProps, styleProps] = splitObject<DotProps, CSSObject>(\n        dotProp,\n        shouldForwardProp,\n      )\n\n      return {\n        ...omittedProps,\n        className: cx(className, omittedProps.className, css(styleProps)),\n      }\n    } else {\n      return { className }\n    }\n  }, [dotProp, system, theme, dotProps.className, dotProps.css, color])\n  const activeDot = useMemo<UseChartLineProps[\"activeDot\"]>(() => {\n    if (!activeDotProp) return activeDotProp\n\n    const css = getCSS(system, theme)\n    const className = cx(\n      activeDotProps.className,\n      css(activeDotProps.css),\n      css({ fill: color, stroke: color }),\n    )\n\n    if (isFunction(activeDotProp)) {\n      return (props) =>\n        activeDotProp({ ...props, className: cx(className, props.className) })\n    } else if (isValidElement(activeDotProp)) {\n      return cloneElement<any>(activeDotProp, { className })\n    } else if (isObject(activeDotProp)) {\n      const [omittedProps, styleProps] = splitObject<ActiveDotProps, CSSObject>(\n        activeDotProp,\n        shouldForwardProp,\n      )\n\n      return {\n        ...omittedProps,\n        className: cx(className, omittedProps.className, css(styleProps)),\n      }\n    } else {\n      return { className }\n    }\n  }, [\n    activeDotProp,\n    system,\n    theme,\n    activeDotProps.className,\n    activeDotProps.css,\n    color,\n  ])\n  const label = useMemo<UseChartLineProps[\"label\"]>(() => {\n    if (!labelProp) return labelProp\n\n    const css = getCSS(system, theme)\n    const className = cx(labelProps.className, css(labelProps.css))\n\n    if (isFunction(labelProp)) {\n      return (props) =>\n        labelProp({ ...props, className: cx(className, props.className) })\n    } else if (isValidElement(labelProp)) {\n      return cloneElement<any>(labelProp, { className })\n    } else if (isObject(labelProp)) {\n      const [omittedProps, styleProps] = splitObject<LabelListProps, CSSObject>(\n        labelProp,\n        shouldForwardProp,\n      )\n\n      return {\n        ...omittedProps,\n        className: cx(className, omittedProps.className, css(styleProps)),\n      }\n    } else {\n      return { className }\n    }\n  }, [system, theme, labelProp, labelProps.className, labelProps.css])\n  const { getAreaProps, getRootProps } = useChartArea({\n    activeDot,\n    dataKey,\n    dot,\n    fill: color ? `url(#${id})` : \"\",\n    label,\n    stroke: color,\n    ...rest,\n  })\n\n  return (\n    <>\n      <styled.line asChild {...getRootProps()}>\n        <Area {...getAreaProps()}>{children}</Area>\n      </styled.line>\n\n      <defs>\n        {withGradient ? (\n          <linearGradient id={id} x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n            <styled.stop asChild stopColor={color} stopOpacity={0.8}>\n              <stop offset=\"5%\" />\n            </styled.stop>\n            <styled.stop asChild stopColor={color} stopOpacity={0.1}>\n              <stop offset=\"95%\" />\n            </styled.stop>\n          </linearGradient>\n        ) : (\n          <linearGradient id={id} x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n            <styled.stop stopColor={color} stopOpacity={0.4} />\n          </linearGradient>\n        )}\n      </defs>\n    </>\n  )\n}, \"area\")() as GenericsComponent<{\n  <Y extends Dict>(props: ChartAreaProps<Y>): ReactElement\n}>\n\nexport interface ChartBarProps<Y extends Dict = Dict> extends Merge<\n  HTMLStyledProps<\"path\">,\n  Omit<UseChartBarProps, \"dataKey\" | \"label\">\n> {\n  /**\n   * The key of a group of data which should be unique in an chart.\n   */\n  dataKey: keyof Y\n  /**\n   * The label list to use for the bar.\n   *\n   * @default false\n   */\n  label?: ChartLabelList\n}\n\nexport const ChartBar = withContext<\"path\", ChartBarProps>((props) => {\n  const { barProps } = useComponentContext()\n  const {\n    children,\n    dataKey,\n    label: labelProp = false,\n    ...rest\n  } = { ...barProps, ...props }\n  const system = useSystem()\n  const { theme } = useTheme()\n  const { varMap } = useChartComponentContext()\n  const color = varMap[dataKey.toString()]\n  const labelProps = useSlotComponentProps({}, \"labelList\")\n  const label = useMemo<UseChartBarProps[\"label\"]>(() => {\n    if (!labelProp) return labelProp\n\n    const css = getCSS(system, theme)\n    const className = cx(labelProps.className, css(labelProps.css))\n\n    if (isFunction(labelProp)) {\n      return (props) =>\n        labelProp({ ...props, className: cx(className, props.className) })\n    } else if (isValidElement(labelProp)) {\n      return cloneElement<any>(labelProp, { className })\n    } else if (isObject(labelProp)) {\n      const [omittedProps, styleProps] = splitObject<LabelListProps, CSSObject>(\n        labelProp,\n        shouldForwardProp,\n      )\n\n      return {\n        ...omittedProps,\n        className: cx(className, omittedProps.className, css(styleProps)),\n      }\n    } else {\n      return { className }\n    }\n  }, [system, theme, labelProp, labelProps.className, labelProps.css])\n  const { getBarProps, getRootProps } = useChartBar({\n    dataKey,\n    fill: color,\n    label,\n    stroke: color,\n    ...rest,\n  })\n\n  return (\n    <styled.path asChild {...getRootProps()}>\n      <Bar {...getBarProps()}>{children}</Bar>\n    </styled.path>\n  )\n}, \"bar\")() as GenericsComponent<{\n  <Y extends Dict>(props: ChartBarProps<Y>): ReactElement\n}>\n\nexport interface ChartReferenceLineProps extends Omit<\n  Merge<HTMLStyledProps<\"line\">, UseChartReferenceLineProps>,\n  \"label\"\n> {\n  /**\n   * The label to use for the reference line.\n   *\n   * @default false\n   */\n  label?: ChartLabel\n}\n\nexport const ChartReferenceLine = withContext<\"line\", ChartReferenceLineProps>(\n  (props) => {\n    const { referenceLineProps } = useComponentContext()\n    const { label: labelProp = false, ...rest } = {\n      ...referenceLineProps,\n      ...props,\n    }\n    const system = useSystem()\n    const { theme } = useTheme()\n    const labelProps = useSlotComponentProps({}, \"referenceLineLabel\")\n    const label = useMemo<UseChartReferenceLineProps[\"label\"]>(() => {\n      if (!labelProp) return labelProp\n\n      const css = getCSS(system, theme)\n      const className = cx(labelProps.className, css(labelProps.css))\n\n      if (isFunction(labelProp)) {\n        return (props) =>\n          labelProp({ ...props, className: cx(className, props.className) })\n      } else if (isValidElement(labelProp)) {\n        return cloneElement<any>(labelProp, { className })\n      } else if (isObject(labelProp)) {\n        const [omittedProps, styleProps] = splitObject<LabelProps, CSSObject>(\n          labelProp,\n          shouldForwardProp,\n        )\n\n        return {\n          ...omittedProps,\n          className: cx(className, omittedProps.className, css(styleProps)),\n        }\n      } else {\n        return { className, children: labelProp }\n      }\n    }, [system, theme, labelProp, labelProps.className, labelProps.css])\n    const { getReferenceLineProps, getRootProps } = useChartReferenceLine({\n      label,\n      ...rest,\n    })\n\n    return (\n      <styled.line asChild {...getRootProps()}>\n        <ReferenceLine {...getReferenceLineProps()} />\n      </styled.line>\n    )\n  },\n  \"referenceLine\",\n)()\n"],"mappings":"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"}

package/dist/esm/components/chart/cartesian-chart.style.js

@@ -0,0 +1,123 @@
+import { defineComponentSlotStyle } from "../../core/system/config.js";
+import "../../core/index.js";
+import { chartStyle } from "./chart.style.js";
+
+//#region src/components/chart/cartesian-chart.style.ts
+const cartesianChartStyle = defineComponentSlotStyle({ base: {
+	activeDot: {
+		fill: "{active-dot-fill}",
+		r: "{active-dot-r}",
+		stroke: "{active-dot-stroke}",
+		strokeWidth: "{active-dot-stroke-width}"
+	},
+	area: {
+		"&:has(path[data-inactive])": { opacity: "{inactive-line-opacity}" },
+		color: "{line-color}",
+		fill: "{line-stroke}",
+		fillOpacity: "{area-fill-opacity}",
+		stroke: "{line-stroke}",
+		strokeWidth: "{line-stroke-width}"
+	},
+	bar: {
+		"&:has(path[data-inactive])": { opacity: "{inactive-line-opacity}" },
+		color: "{line-color}",
+		fill: "{line-stroke}",
+		stroke: "{line-stroke}",
+		strokeWidth: "{line-stroke-width}"
+	},
+	dot: {
+		fill: "{dot-fill}",
+		r: "{dot-r}",
+		stroke: "{dot-stroke}",
+		strokeWidth: "{dot-stroke-width}"
+	},
+	grid: { stroke: "{grid-stroke}" },
+	labelList: chartStyle.base?.labelList,
+	line: {
+		"&:has(> path[data-inactive])": { opacity: "{inactive-line-opacity}" },
+		color: "{line-color}",
+		stroke: "{line-stroke}",
+		strokeWidth: "{line-stroke-width}"
+	},
+	referenceLine: {
+		color: "{reference-line-color}",
+		stroke: "{reference-line-stroke}",
+		strokeWidth: "{reference-line-stroke-width}"
+	},
+	referenceLineLabel: {
+		color: "{reference-line-text-color}",
+		fill: "{reference-line-text-fill}",
+		fontSize: "xs",
+		fontWeight: "medium",
+		stroke: "none"
+	},
+	root: {
+		"--active-dot-fill": "{line-color}",
+		"--active-dot-r": "4",
+		"--active-dot-stroke": "{line-color}",
+		"--active-dot-stroke-width": "0",
+		"--area-fill-opacity": "0.4",
+		"--dot-fill": "{line-stroke}",
+		"--dot-r": "4",
+		"--dot-stroke": "{line-stroke}",
+		"--dot-stroke-width": "0",
+		"--grid-stroke": "colors.border",
+		"--inactive-line-opacity": "0.4",
+		"--line-color": "colorScheme.solid",
+		"--line-stroke": "currentColor",
+		"--line-stroke-width": "2",
+		"--reference-line-color": "colors.fg.error",
+		"--reference-line-stroke": "currentColor",
+		"--reference-line-stroke-width": "1",
+		"--reference-line-text-color": "colors.fg.error",
+		"--reference-line-text-fill": "currentColor",
+		"--x-axis-line-stroke": "currentColor",
+		"--x-axis-line-stroke-width": "1",
+		"--x-axis-text-color": "colors.fg.muted",
+		"--x-axis-text-fill": "currentColor",
+		"--y-axis-line-stroke": "currentColor",
+		"--y-axis-line-stroke-width": "1",
+		"--y-axis-text-color": "colors.fg.muted",
+		"--y-axis-text-fill": "currentColor"
+	},
+	xAxis: {},
+	xAxisLabel: {
+		color: "{x-axis-text-color}",
+		fill: "{x-axis-text-fill}",
+		fontSize: "xs",
+		fontWeight: "medium"
+	},
+	xAxisTick: {
+		color: "{x-axis-text-color}",
+		fill: "{x-axis-text-fill}",
+		fontSize: "xs",
+		fontWeight: "medium"
+	},
+	xAxisTickLine: {
+		color: "{x-axis-text-color}",
+		stroke: "{x-axis-line-stroke}",
+		strokeWidth: "{x-axis-line-stroke-width}"
+	},
+	yAxis: {},
+	yAxisLabel: {
+		color: "{y-axis-text-color}",
+		fill: "{y-axis-text-fill}",
+		fontSize: "xs",
+		fontWeight: "medium"
+	},
+	yAxisTick: {
+		color: "{y-axis-text-color}",
+		fill: "{y-axis-text-fill}",
+		fontSize: "xs",
+		fontWeight: "medium"
+	},
+	yAxisTickLine: {
+		color: "{x-axis-text-color}",
+		stroke: "{y-axis-line-stroke}",
+		strokeWidth: "{y-axis-line-stroke-width}"
+	}
+} });
+
+//#endregion
+export { cartesianChartStyle };
+//# sourceMappingURL=cartesian-chart.style.js.map

package/dist/esm/components/chart/cartesian-chart.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cartesian-chart.style.js","names":[],"sources":["../../../../src/components/chart/cartesian-chart.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { chartStyle } from \"./chart.style\"\n\nexport const cartesianChartStyle = defineComponentSlotStyle({\n  base: {\n    activeDot: {\n      fill: \"{active-dot-fill}\",\n      r: \"{active-dot-r}\",\n      stroke: \"{active-dot-stroke}\",\n      strokeWidth: \"{active-dot-stroke-width}\",\n    },\n    area: {\n      \"&:has(path[data-inactive])\": {\n        opacity: \"{inactive-line-opacity}\",\n      },\n      color: \"{line-color}\",\n      fill: \"{line-stroke}\",\n      fillOpacity: \"{area-fill-opacity}\",\n      stroke: \"{line-stroke}\",\n      strokeWidth: \"{line-stroke-width}\",\n    },\n    bar: {\n      \"&:has(path[data-inactive])\": {\n        opacity: \"{inactive-line-opacity}\",\n      },\n      color: \"{line-color}\",\n      fill: \"{line-stroke}\",\n      stroke: \"{line-stroke}\",\n      strokeWidth: \"{line-stroke-width}\",\n    },\n    dot: {\n      fill: \"{dot-fill}\",\n      r: \"{dot-r}\",\n      stroke: \"{dot-stroke}\",\n      strokeWidth: \"{dot-stroke-width}\",\n    },\n    grid: { stroke: \"{grid-stroke}\" },\n    labelList: chartStyle.base?.labelList,\n    line: {\n      \"&:has(> path[data-inactive])\": {\n        opacity: \"{inactive-line-opacity}\",\n      },\n      color: \"{line-color}\",\n      stroke: \"{line-stroke}\",\n      strokeWidth: \"{line-stroke-width}\",\n    },\n    referenceLine: {\n      color: \"{reference-line-color}\",\n      stroke: \"{reference-line-stroke}\",\n      strokeWidth: \"{reference-line-stroke-width}\",\n    },\n    referenceLineLabel: {\n      color: \"{reference-line-text-color}\",\n      fill: \"{reference-line-text-fill}\",\n      fontSize: \"xs\",\n      fontWeight: \"medium\",\n      stroke: \"none\",\n    },\n    root: {\n      \"--active-dot-fill\": \"{line-color}\",\n      \"--active-dot-r\": \"4\",\n      \"--active-dot-stroke\": \"{line-color}\",\n      \"--active-dot-stroke-width\": \"0\",\n      \"--area-fill-opacity\": \"0.4\",\n      \"--dot-fill\": \"{line-stroke}\",\n      \"--dot-r\": \"4\",\n      \"--dot-stroke\": \"{line-stroke}\",\n      \"--dot-stroke-width\": \"0\",\n      \"--grid-stroke\": \"colors.border\",\n      \"--inactive-line-opacity\": \"0.4\",\n      \"--line-color\": \"colorScheme.solid\",\n      \"--line-stroke\": \"currentColor\",\n      \"--line-stroke-width\": \"2\",\n      \"--reference-line-color\": \"colors.fg.error\",\n      \"--reference-line-stroke\": \"currentColor\",\n      \"--reference-line-stroke-width\": \"1\",\n      \"--reference-line-text-color\": \"colors.fg.error\",\n      \"--reference-line-text-fill\": \"currentColor\",\n      \"--x-axis-line-stroke\": \"currentColor\",\n      \"--x-axis-line-stroke-width\": \"1\",\n      \"--x-axis-text-color\": \"colors.fg.muted\",\n      \"--x-axis-text-fill\": \"currentColor\",\n      \"--y-axis-line-stroke\": \"currentColor\",\n      \"--y-axis-line-stroke-width\": \"1\",\n      \"--y-axis-text-color\": \"colors.fg.muted\",\n      \"--y-axis-text-fill\": \"currentColor\",\n    },\n    xAxis: {},\n    xAxisLabel: {\n      color: \"{x-axis-text-color}\",\n      fill: \"{x-axis-text-fill}\",\n      fontSize: \"xs\",\n      fontWeight: \"medium\",\n    },\n    xAxisTick: {\n      color: \"{x-axis-text-color}\",\n      fill: \"{x-axis-text-fill}\",\n      fontSize: \"xs\",\n      fontWeight: \"medium\",\n    },\n    xAxisTickLine: {\n      color: \"{x-axis-text-color}\",\n      stroke: \"{x-axis-line-stroke}\",\n      strokeWidth: \"{x-axis-line-stroke-width}\",\n    },\n    yAxis: {},\n    yAxisLabel: {\n      color: \"{y-axis-text-color}\",\n      fill: \"{y-axis-text-fill}\",\n      fontSize: \"xs\",\n      fontWeight: \"medium\",\n    },\n    yAxisTick: {\n      color: \"{y-axis-text-color}\",\n      fill: \"{y-axis-text-fill}\",\n      fontSize: \"xs\",\n      fontWeight: \"medium\",\n    },\n    yAxisTickLine: {\n      color: \"{x-axis-text-color}\",\n      stroke: \"{y-axis-line-stroke}\",\n      strokeWidth: \"{y-axis-line-stroke-width}\",\n    },\n  },\n})\n\nexport type CartesianChartStyle = typeof cartesianChartStyle\n"],"mappings":";;;;;AAGA,MAAa,sBAAsB,yBAAyB,EAC1D,MAAM;CACJ,WAAW;EACT,MAAM;EACN,GAAG;EACH,QAAQ;EACR,aAAa;EACd;CACD,MAAM;EACJ,8BAA8B,EAC5B,SAAS,2BACV;EACD,OAAO;EACP,MAAM;EACN,aAAa;EACb,QAAQ;EACR,aAAa;EACd;CACD,KAAK;EACH,8BAA8B,EAC5B,SAAS,2BACV;EACD,OAAO;EACP,MAAM;EACN,QAAQ;EACR,aAAa;EACd;CACD,KAAK;EACH,MAAM;EACN,GAAG;EACH,QAAQ;EACR,aAAa;EACd;CACD,MAAM,EAAE,QAAQ,iBAAiB;CACjC,WAAW,WAAW,MAAM;CAC5B,MAAM;EACJ,gCAAgC,EAC9B,SAAS,2BACV;EACD,OAAO;EACP,QAAQ;EACR,aAAa;EACd;CACD,eAAe;EACb,OAAO;EACP,QAAQ;EACR,aAAa;EACd;CACD,oBAAoB;EAClB,OAAO;EACP,MAAM;EACN,UAAU;EACV,YAAY;EACZ,QAAQ;EACT;CACD,MAAM;EACJ,qBAAqB;EACrB,kBAAkB;EAClB,uBAAuB;EACvB,6BAA6B;EAC7B,uBAAuB;EACvB,cAAc;EACd,WAAW;EACX,gBAAgB;EAChB,sBAAsB;EACtB,iBAAiB;EACjB,2BAA2B;EAC3B,gBAAgB;EAChB,iBAAiB;EACjB,uBAAuB;EACvB,0BAA0B;EAC1B,2BAA2B;EAC3B,iCAAiC;EACjC,+BAA+B;EAC/B,8BAA8B;EAC9B,wBAAwB;EACxB,8BAA8B;EAC9B,uBAAuB;EACvB,sBAAsB;EACtB,wBAAwB;EACxB,8BAA8B;EAC9B,uBAAuB;EACvB,sBAAsB;EACvB;CACD,OAAO,EAAE;CACT,YAAY;EACV,OAAO;EACP,MAAM;EACN,UAAU;EACV,YAAY;EACb;CACD,WAAW;EACT,OAAO;EACP,MAAM;EACN,UAAU;EACV,YAAY;EACb;CACD,eAAe;EACb,OAAO;EACP,QAAQ;EACR,aAAa;EACd;CACD,OAAO,EAAE;CACT,YAAY;EACV,OAAO;EACP,MAAM;EACN,UAAU;EACV,YAAY;EACb;CACD,WAAW;EACT,OAAO;EACP,MAAM;EACN,UAAU;EACV,YAAY;EACb;CACD,eAAe;EACb,OAAO;EACP,QAAQ;EACR,aAAa;EACd;CACF,EACF,CAAC"}

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

@@ -0,0 +1,222 @@
+"use client";
+
+import { useSplitChildren } from "../../utils/children.js";
+import { createContext as createContext$1 } from "../../utils/context.js";
+import { utils_exports } from "../../utils/index.js";
+import { varAttr } from "../../core/system/var.js";
+import { styled } from "../../core/system/factory.js";
+import { createSlotComponent } from "../../core/components/create-component.js";
+import "../../core/index.js";
+import { chartStyle } from "./chart.style.js";
+import { ChartContext, useChart, useChartLabel, useChartLabelList, useChartLegend, useChartTooltip } from "./use-chart.js";
+import { Fragment, isValidElement, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Label, LabelList, Legend, ResponsiveContainer, Tooltip } from "recharts";
+
+//#region src/components/chart/chart.tsx
+function mergeSeries(series, color = "mono", strategy = "invert") {
+	const colors = gradients(series.length, color, strategy);
+	return series.map((item, index) => ({
+		...item,
+		color: colors[index]
+	}));
+}
+function mergeData(data, color = "mono", strategy = "invert") {
+	const colors = gradients(data.length, color, strategy);
+	return data.map((item, index) => ({
+		...item,
+		fill: colors[index]
+	}));
+}
+function gradients(length, color = "mono", strategy = "invert") {
+	return Array.from({ length }, (_, index) => {
+		const percent = `${Math.floor(100 - 100 / length * index)}%`;
+		if (strategy === "invert") return [`tint(colors.${color}, ${percent})`, `shade(colors.${color}, ${percent})`];
+		else return `${strategy}(colors.${color}, ${percent})`;
+	});
+}
+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 { highlightedDataKey, onHighlight } = useChart();
+	const nameKeyRef = useRef(void 0);
+	const components = useMemo(() => [
+		...componentsProp,
+		{
+			component: ChartLegend,
+			fallback: withLegend ? /* @__PURE__ */ jsx(ChartLegend, {}) : null
+		},
+		{
+			component: ChartTooltip,
+			fallback: withTooltip ? /* @__PURE__ */ jsx(ChartTooltip, {}) : null
+		}
+	], [
+		componentsProp,
+		withLegend,
+		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,
+			onHighlight
+		}), [highlightedDataKey, onHighlight]),
+		children: /* @__PURE__ */ jsx(ComponentContext, {
+			value: useMemo(() => ({
+				nameKeyRef,
+				varMap,
+				legendProps,
+				tooltipProps
+			}), [
+				varMap,
+				legendProps,
+				tooltipProps
+			]),
+			children: /* @__PURE__ */ jsx(styled.div, {
+				...varProps,
+				...rest,
+				children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+					...responsiveContainerProps,
+					children: render({ children: /* @__PURE__ */ jsxs(Fragment$1, { children: [components.map(({ fallback }, index) => /* @__PURE__ */ jsx(Fragment, { children: customComponents[index] ?? fallback }, index)), omittedChildren] }) })
+				})
+			})
+		})
+	});
+}, "root")(void 0, ({ labelListColor, labelListFill, tooltipCursorFill, tooltipCursorFillOpacity, tooltipCursorStroke, ...rest }) => ({
+	"--label-list-color": varAttr(labelListColor, "colors"),
+	"--label-list-fill": varAttr(labelListFill, "colors"),
+	"--tooltip-cursor-fill": varAttr(tooltipCursorFill, "colors"),
+	"--tooltip-cursor-fill-opacity": tooltipCursorFillOpacity,
+	"--tooltip-cursor-stroke": varAttr(tooltipCursorStroke, "colors"),
+	...rest
+}));
+const [ChartLegendContext, useChartLegendContext] = createContext$1({ name: "ChartLegendContext" });
+const ChartLegend = withContext((props) => {
+	const { legendProps } = useChartComponentContext();
+	const { contentProps, ...rest } = {
+		...legendProps,
+		...props
+	};
+	const { getLegendContentProps, getLegendItemProps, getLegendProps, getRootProps } = useChartLegend({
+		content: ({ formatter, payload }) => /* @__PURE__ */ jsx(ChartLegendContent, {
+			formatter,
+			payload,
+			...getLegendContentProps(contentProps)
+		}),
+		...rest
+	});
+	return /* @__PURE__ */ jsx(ChartLegendContext, {
+		value: useMemo(() => ({ getLegendItemProps }), [getLegendItemProps]),
+		children: /* @__PURE__ */ jsx(styled.div, {
+			asChild: true,
+			...getRootProps(),
+			children: /* @__PURE__ */ jsx(Legend, { ...getLegendProps() })
+		})
+	});
+}, "legend")();
+const ChartLegendContent = withContext(({ formatter, payload, withSwatch = true, ...rest }) => {
+	const { nameKeyRef, varMap } = useChartComponentContext();
+	const { getLegendItemProps } = useChartLegendContext();
+	return /* @__PURE__ */ jsx(styled.div, {
+		...rest,
+		children: payload?.map((data, index) => {
+			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 formattedValue = formatter?.(value, data, index) ?? value;
+			return /* @__PURE__ */ jsxs(ChartLegendItem, {
+				...getLegendItemProps({ dataKey }),
+				children: [withSwatch ? /* @__PURE__ */ jsx(ChartLegendSwatch, { bg: color }) : null, /* @__PURE__ */ jsx(ChartLegendValue, { children: formattedValue })]
+			}, index);
+		})
+	});
+}, "legendContent")();
+const ChartLegendItem = withContext("div", "legendItem")();
+const ChartLegendSwatch = withContext("div", "legendSwatch")();
+const ChartLegendValue = withContext("span", "legendValue")();
+const ChartTooltip = (props) => {
+	const { tooltipProps } = useChartComponentContext();
+	const { cursor = false, contentProps, ...rest } = {
+		...tooltipProps,
+		...props
+	};
+	const { getContentProps, getRootProps } = useChartTooltip({
+		content: ({ formatter, label, labelFormatter, payload }) => /* @__PURE__ */ jsx(ChartTooltipContent, {
+			formatter,
+			label,
+			labelFormatter,
+			payload,
+			...getContentProps(contentProps)
+		}),
+		cursor: isValidElement(cursor) || !cursor ? cursor : /* @__PURE__ */ jsx(ChartTooltipCursor, { ...(0, utils_exports.isObject)(cursor) ? cursor : {} }),
+		...rest
+	});
+	return /* @__PURE__ */ jsx(Tooltip, { ...getRootProps() });
+};
+const ChartTooltipCursor = withContext("path", "tooltipCursor")(void 0, ({ bottom: _bottom, brushBottom: _brushBottom, fill, height, left: _left, payload: _payload, payloadIndex: _payloadIndex, points, right: _right, stroke, top: _top, width, x, y, ...rest }) => {
+	return {
+		asChild: true,
+		children: /* @__PURE__ */ jsx("path", {
+			d: !!points ? `M${points[0]?.x},${points[0]?.y}L${points[1]?.x},${points[1]?.y}` : `M ${x},${y} h ${width} v ${height} h -${width} Z`,
+			height,
+			width
+		}),
+		fill: fill === "#ccc" ? void 0 : fill,
+		stroke: stroke === "#ccc" ? void 0 : stroke,
+		...rest
+	};
+});
+const ChartTooltipContent = withContext(({ formatter, label: labelProp, labelFormatter, payload, withSwatch = true, ...rest }) => {
+	const { nameKeyRef, varMap } = 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 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: [
+				withSwatch ? /* @__PURE__ */ jsx(ChartTooltipSwatch, { bg: color }) : null,
+				/* @__PURE__ */ jsx(ChartTooltipName, { children: name }),
+				/* @__PURE__ */ jsx(ChartTooltipValue, { children: value })
+			] }, index);
+		}) })]
+	});
+}, "tooltipContent")();
+const ChartTooltipLabel = withContext("p", "tooltipLabel")();
+const ChartTooltipList = withContext("div", "tooltipList")();
+const ChartTooltipItem = withContext("div", "tooltipItem")();
+const ChartTooltipSwatch = withContext("div", "tooltipSwatch")();
+const ChartTooltipName = withContext("span", "tooltipName")();
+const ChartTooltipValue = withContext("span", "tooltipValue")();
+const ChartLabelList = withContext((props) => {
+	const { getLabelListProps, getRootProps } = useChartLabelList(props);
+	return /* @__PURE__ */ jsx(styled.text, {
+		asChild: true,
+		...getRootProps(),
+		children: /* @__PURE__ */ jsx(LabelList, { ...getLabelListProps() })
+	});
+}, "labelList")();
+const ChartLabel = withContext((props) => {
+	const { getLabelProps, getRootProps } = useChartLabel(props);
+	return /* @__PURE__ */ jsx(styled.text, {
+		asChild: true,
+		...getRootProps(),
+		children: /* @__PURE__ */ jsx(Label, { ...getLabelProps() })
+	});
+}, "label")();
+
+//#endregion
+export { Chart, ChartLabel, ChartLabelList, ChartLegend, ChartPropsContext, ChartTooltip, gradients, mergeData, mergeSeries, useChartComponentContext, useChartPropsContext };
+//# sourceMappingURL=chart.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,119 @@
+import { defineComponentSlotStyle } from "../../core/system/config.js";
+import "../../core/index.js";
+import { buttonStyle } from "../button/button.style.js";
+import "../button/index.js";
+import { tooltipStyle } from "../tooltip/tooltip.style.js";
+import "../tooltip/index.js";
+
+//#region src/components/chart/chart.style.ts
+const chartStyle = defineComponentSlotStyle({
+	base: {
+		label: {
+			fill: "currentColor",
+			fontSize: "xs",
+			fontWeight: "medium"
+		},
+		labelList: {
+			color: "{label-list-color}",
+			fill: "{label-list-fill}",
+			fontSize: "xs",
+			fontWeight: "medium",
+			stroke: "none"
+		},
+		legend: { mb: "md" },
+		legendContent: {
+			"&:is([data-align=center])": { justifyContent: "center" },
+			"&:is([data-align=left])": { justifyContent: "flex-start" },
+			"&:is([data-align=right])": { justifyContent: "flex-end" },
+			"&:is([data-vertical-align=bottom])": { mt: "md" },
+			"&:is([data-vertical-align=middle])": {
+				"&:is([data-align=left])": { me: "md" },
+				"&:is([data-align=right])": { ms: "md" }
+			},
+			"&:is([data-vertical-align=top])": { mb: "md" },
+			display: "flex",
+			flexWrap: "wrap",
+			_horizontal: {
+				alignItems: "center",
+				flexDirection: "row"
+			},
+			_vertical: {
+				alignItems: "stretch",
+				flexDirection: "column"
+			}
+		},
+		legendItem: {
+			...buttonStyle.base,
+			...buttonStyle.sizes?.xs,
+			...buttonStyle.variants?.ghost
+		},
+		legendSwatch: {
+			bg: "{legend-swatch-color}",
+			boxSize: "2",
+			rounded: "full"
+		},
+		legendValue: {
+			color: "fg.muted",
+			flex: "1",
+			fontSize: "sm"
+		},
+		root: {
+			"*": { outline: "none" },
+			"--label-list-color": "currentColor",
+			"--label-list-fill": "currentColor",
+			"--tooltip-cursor-fill": "colors.border",
+			"--tooltip-cursor-fill-opacity": "1",
+			"--tooltip-cursor-stroke": "colors.border",
+			w: "full"
+		},
+		tooltipContent: {
+			...tooltipStyle.base?.content,
+			display: "flex",
+			flexDirection: "column",
+			fontWeight: "medium",
+			gap: "0.5",
+			minW: "3xs",
+			zIndex: "recoome"
+		},
+		tooltipCursor: {
+			fill: "{tooltip-cursor-fill}",
+			fillOpacity: "{tooltip-cursor-fill-opacity}",
+			stroke: "{tooltip-cursor-stroke}",
+			strokeWidth: "1"
+		},
+		tooltipItem: {
+			alignItems: "center",
+			display: "flex",
+			gap: "sm"
+		},
+		tooltipLabel: {},
+		tooltipList: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "0"
+		},
+		tooltipName: { color: "fg.muted" },
+		tooltipSwatch: {
+			bg: "{tooltip-swatch-color}",
+			boxSize: "2",
+			rounded: "full"
+		},
+		tooltipValue: {
+			color: "fg.emphasized",
+			flex: "1",
+			textAlign: "end"
+		}
+	},
+	sizes: {
+		xs: { root: { h: "xs" } },
+		sm: { root: { h: "sm" } },
+		md: { root: { h: "md" } },
+		lg: { root: { h: "lg" } },
+		xl: { root: { h: "xl" } }
+	},
+	defaultProps: { size: "md" }
+});
+
+//#endregion
+export { chartStyle };
+//# sourceMappingURL=chart.style.js.map