{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "recharts-area-chart",
  "description": "Deprecated: Recharts area chart. Use area-chart instead.",
  "dependencies": [
    "recharts",
    "cn@^0.2.4"
  ],
  "registryDependencies": [
    "https://ui-three-mu.vercel.app/r/recharts-chart.json"
  ],
  "files": [
    {
      "path": "registry/preskok/ui/preskok-ui/recharts-area-chart.tsx",
      "content": "\"use client\"\n\nimport { Fragment, useId, type ComponentProps } from \"react\"\nimport { twMerge } from \"cn\"\nimport { Area, AreaChart as AreaChartPrimitive } from \"recharts\"\nimport type {\n  NameType,\n  ValueType,\n} from \"recharts/types/component/DefaultTooltipContent\"\nimport type { CurveType } from \"recharts/types/shape/Curve\"\n\nimport {\n  CartesianGrid,\n  Chart,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  constructCategoryColors,\n  DEFAULT_COLORS,\n  getColorValue,\n  valueToPercent,\n  XAxis,\n  YAxis,\n  type BaseChartProps,\n} from \"./recharts-chart\"\n\ninterface RechartsAreaChartProps<\n  TValue extends ValueType,\n  TName extends NameType,\n> extends BaseChartProps<TValue, TName> {\n  chartProps?: Omit<\n    ComponentProps<typeof AreaChartPrimitive>,\n    \"data\" | \"stackOffset\"\n  >\n  areaProps?: Partial<ComponentProps<typeof Area>>\n  connectNulls?: boolean\n  fillType?: \"gradient\" | \"solid\" | \"none\"\n  lineType?: CurveType\n}\n\n/**\n * @deprecated Use `AreaChart` from `@preskok/area-chart`, built on TanStack Charts.\n */\nexport const RechartsAreaChart = <\n  TValue extends ValueType,\n  TName extends NameType,\n>({\n  data = [],\n  dataKey,\n  colors = DEFAULT_COLORS,\n  connectNulls = false,\n  type = \"default\",\n  className,\n\n  fillType = \"gradient\",\n  config,\n  children,\n\n  areaProps,\n\n  // Components\n  tooltip = true,\n  tooltipProps,\n\n  cartesianGridProps,\n\n  legend = true,\n  legendProps,\n\n  intervalType = \"equidistantPreserveStart\",\n\n  valueFormatter = (value: number) => value.toString(),\n\n  // XAxis\n  displayEdgeLabelsOnly = false,\n  hideXAxis = false,\n  xAxisProps,\n\n  // YAxis\n  hideYAxis = false,\n  yAxisProps,\n\n  hideGridLines = false,\n  lineType = \"linear\",\n  chartProps,\n  ...props\n}: RechartsAreaChartProps<TValue, TName>) => {\n  const categoryColors = constructCategoryColors(Object.keys(config), colors)\n  const stacked = type === \"stacked\" || type === \"percent\"\n  const areaId = useId()\n  const getFillContent = ({\n    fillType,\n    activeLegend,\n    category,\n  }: {\n    fillType: RechartsAreaChartProps<TValue, TName>[\"fillType\"]\n    activeLegend: string | null\n    category: string\n  }) => {\n    const stopOpacity = activeLegend && activeLegend !== category ? 0.1 : 0.5\n\n    switch (fillType) {\n      case \"none\":\n        return <stop stopColor=\"currentColor\" stopOpacity={0} />\n      case \"gradient\":\n        return (\n          <>\n            <stop\n              offset=\"5%\"\n              stopColor=\"currentColor\"\n              stopOpacity={stopOpacity}\n            />\n            <stop offset=\"95%\" stopColor=\"currentColor\" stopOpacity={0} />\n          </>\n        )\n      default:\n        return <stop stopColor=\"currentColor\" stopOpacity={stopOpacity} />\n    }\n  }\n\n  return (\n    <Chart\n      className={twMerge(\"h-56 w-full\", className)}\n      config={config}\n      data={data}\n      dataKey={dataKey}\n      {...props}\n    >\n      {({ onLegendSelect, selectedLegend }) => (\n        <AreaChartPrimitive\n          onClick={() => {\n            onLegendSelect(null)\n          }}\n          data={data}\n          margin={{\n            bottom: 0,\n            left: 0,\n            right: 0,\n            top: 5,\n          }}\n          stackOffset={type === \"percent\" ? \"expand\" : undefined}\n          {...chartProps}\n        >\n          {!hideGridLines && (\n            <CartesianGrid {...cartesianGridProps} strokeDasharray=\"3 3\" />\n          )}\n          <XAxis\n            className=\"**:[text]:fill-muted-foreground\"\n            hide={hideXAxis}\n            displayEdgeLabelsOnly={displayEdgeLabelsOnly}\n            intervalType={intervalType}\n            {...xAxisProps}\n          />\n          <YAxis\n            className=\"**:[text]:fill-muted-foreground\"\n            hide={hideYAxis}\n            tickFormatter={type === \"percent\" ? valueToPercent : valueFormatter}\n            {...yAxisProps}\n          />\n\n          {legend && (\n            <ChartLegend\n              content={\n                typeof legend === \"boolean\" ? <ChartLegendContent /> : legend\n              }\n              {...legendProps}\n            />\n          )}\n\n          {tooltip && (\n            <ChartTooltip\n              content={\n                typeof tooltip === \"boolean\" ? (\n                  <ChartTooltipContent accessibilityLayer />\n                ) : (\n                  tooltip\n                )\n              }\n              {...tooltipProps}\n            />\n          )}\n\n          {!children\n            ? Object.entries(config).map(([category, values]) => {\n                const categoryId = `${areaId}-${category.replace(/[^a-zA-Z0-9]/g, \"\")}`\n\n                const strokeOpacity =\n                  selectedLegend && selectedLegend !== category ? 0.1 : 1\n\n                return (\n                  <Fragment key={categoryId}>\n                    <defs>\n                      <linearGradient\n                        style={{\n                          color: getColorValue(\n                            values.color || categoryColors.get(category)\n                          ),\n                        }}\n                        id={categoryId}\n                        x1=\"0\"\n                        y1=\"0\"\n                        x2=\"0\"\n                        y2=\"1\"\n                      >\n                        {getFillContent({\n                          fillType,\n                          activeLegend: selectedLegend,\n                          category: category,\n                        })}\n                      </linearGradient>\n                    </defs>\n                    <Area\n                      dot={false}\n                      name={category}\n                      type={lineType}\n                      dataKey={category}\n                      stroke={getColorValue(\n                        values.color || categoryColors.get(category)\n                      )}\n                      style={{\n                        strokeWidth: 2,\n                        strokeOpacity,\n                      }}\n                      strokeLinejoin=\"round\"\n                      strokeLinecap=\"round\"\n                      isAnimationActive={true}\n                      connectNulls={connectNulls}\n                      stackId={stacked ? \"stack\" : undefined}\n                      fill={`url(#${categoryId})`}\n                      {...areaProps}\n                    />\n                  </Fragment>\n                )\n              })\n            : children}\n        </AreaChartPrimitive>\n      )}\n    </Chart>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}