{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart",
  "title": "Chart",
  "description": "Polaris-styled Chart component.",
  "dependencies": [
    "recharts"
  ],
  "devDependencies": [
    "@shopify/polaris-types"
  ],
  "registryDependencies": [
    "@polaris-shadcn/theme",
    "@polaris-shadcn/utils"
  ],
  "files": [
    {
      "path": "registry/templates/components/ui/chart.tsx",
      "content": "import * as React from \"react\";\nimport { Legend, ResponsiveContainer, Tooltip } from \"recharts\";\nimport { cn } from \"../../lib/utils\";\n\nexport interface ChartConfigTheme {\n  light?: string;\n  dark?: string;\n}\n\nexport interface ChartConfigEntry {\n  label?: React.ReactNode;\n  icon?: React.ComponentType<{\n    className?: string;\n    style?: React.CSSProperties;\n  }>;\n  color?: string;\n  theme?: ChartConfigTheme;\n}\n\nexport type ChartConfig = Record<string, ChartConfigEntry>;\n\nexport type ChartDataRow = Record<string, string | number | undefined>;\n\ninterface ChartContextValue {\n  config: ChartConfig | undefined;\n}\n\nconst ChartContext = React.createContext<ChartContextValue | null>(null);\n\nfunction useChart() {\n  const context = React.useContext(ChartContext);\n  if (!context) {\n    throw new Error(\"Chart components must be used within <ChartContainer />\");\n  }\n  return context;\n}\n\ninterface ChartStyleProps {\n  id: string;\n  config: ChartConfig | undefined;\n}\n\nfunction ChartStyle({ id, config }: ChartStyleProps) {\n  const entries = Object.entries(config ?? {});\n  const colorEntries = entries.filter(([, value]) => value?.color || value?.theme);\n\n  if (!colorEntries.length) return null;\n\n  const lightVariables = colorEntries\n    .map(([key, value]) => {\n      if (value?.color) return `--color-${key}: ${value.color}`;\n      if (value?.theme?.light) return `--color-${key}: ${value.theme.light}`;\n      return null;\n    })\n    .filter(Boolean)\n    .join(\";\");\n\n  const darkVariables = colorEntries\n    .map(([key, value]) => {\n      if (value?.theme?.dark) return `--color-${key}: ${value.theme.dark}`;\n      return null;\n    })\n    .filter(Boolean)\n    .join(\";\");\n\n  const css = [\n    `[data-chart=${id}] { ${lightVariables}; }`,\n    darkVariables ? `.dark [data-chart=${id}] { ${darkVariables}; }` : null,\n  ]\n    .filter(Boolean)\n    .join(\"\\n\");\n\n  return <style dangerouslySetInnerHTML={{ __html: css }} />;\n}\n\nexport interface ChartContainerProps\n  extends React.ComponentPropsWithoutRef<\"div\"> {\n  config?: ChartConfig;\n}\n\nconst ChartContainer = React.forwardRef<HTMLDivElement, ChartContainerProps>(\n  ({ id, className, children, config, ...props }, ref) => {\n    const chartId = React.useId().replace(/:/g, \"\");\n    const resolvedId = id ?? `chart-${chartId}`;\n\n    return (\n      <ChartContext.Provider value={{ config }}>\n        <div\n          ref={ref}\n          data-chart={resolvedId}\n          className={cn(\n            \"flex h-full w-full flex-col text-xs\",\n            \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground\",\n            \"[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/40\",\n            \"[&_.recharts-curve.recharts-area-area]:stroke-transparent\",\n            \"[&_.recharts-layer]:outline-none\",\n            \"[&_.recharts-sector]:outline-none\",\n            \"[&_.recharts-surface]:outline-none\",\n            className,\n          )}\n          {...props}\n        >\n          <ChartStyle id={resolvedId} config={config} />\n          <ResponsiveContainer>{children}</ResponsiveContainer>\n        </div>\n      </ChartContext.Provider>\n    );\n  },\n);\nChartContainer.displayName = \"ChartContainer\";\n\nconst ChartTooltip = Tooltip;\nconst ChartLegend = Legend;\n\nexport interface ChartTooltipItem {\n  dataKey?: string | number;\n  name?: string | number;\n  value?: string | number | ReadonlyArray<string | number>;\n  color?: string;\n  stroke?: string;\n  fill?: string;\n  payload?: ChartDataRow;\n}\n\nexport type ChartTooltipIndicator = \"dot\" | \"line\" | \"dashed\";\n\nexport type ChartTooltipLabelFormatter = (\n  label: React.ReactNode,\n  payload: ReadonlyArray<ChartTooltipItem>,\n) => React.ReactNode;\n\nexport type ChartTooltipFormatter = (\n  value: string | number | ReadonlyArray<string | number> | undefined,\n  name: React.ReactNode,\n  item: ChartTooltipItem,\n  index: number,\n  payload: ChartDataRow | undefined,\n) => React.ReactNode | [React.ReactNode, React.ReactNode];\n\nexport interface ChartTooltipContentProps {\n  active?: boolean;\n  payload?: ReadonlyArray<ChartTooltipItem>;\n  label?: React.ReactNode;\n  className?: string;\n  indicator?: ChartTooltipIndicator;\n  hideLabel?: boolean;\n  hideIndicator?: boolean;\n  nameKey?: string;\n  labelKey?: string;\n  labelFormatter?: ChartTooltipLabelFormatter;\n  formatter?: ChartTooltipFormatter;\n}\n\nconst ChartTooltipContent = React.forwardRef<\n  HTMLDivElement,\n  ChartTooltipContentProps\n>(\n  (\n    {\n      active,\n      payload,\n      label,\n      className,\n      indicator = \"dot\",\n      hideLabel = false,\n      hideIndicator = false,\n      nameKey,\n      labelKey,\n      labelFormatter,\n      formatter,\n    },\n    ref,\n  ) => {\n    const { config } = useChart();\n\n    if (!active || !payload?.length) return null;\n\n    const labelValue = labelKey ? payload[0]?.payload?.[labelKey] : label;\n    const labelText = labelFormatter ? labelFormatter(labelValue, payload) : labelValue;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"grid min-w-[8rem] gap-1.5 rounded-lg border bg-background px-2.5 py-2 text-xs shadow-sm\",\n          className,\n        )}\n      >\n        {!hideLabel && labelText != null ? (\n          <div className=\"font-medium text-foreground\">{labelText}</div>\n        ) : null}\n        <div className=\"grid gap-1.5\">\n          {payload.map((item, index) => {\n            const key = nameKey\n              ? item.payload?.[nameKey]\n              : item.dataKey ?? item.name ?? `item-${index}`;\n            const itemConfig = key ? config?.[key] : undefined;\n            const Icon = itemConfig?.icon;\n            const defaultLabel = item.name ?? key;\n            const itemLabel = itemConfig?.label ?? defaultLabel;\n            const rawValue = item.value;\n            const formatted = formatter\n              ? formatter(rawValue, itemLabel, item, index, item.payload)\n              : rawValue;\n            const [value, labelOverride] = Array.isArray(formatted)\n              ? (formatted as [React.ReactNode, React.ReactNode])\n              : [formatted, itemLabel];\n            const indicatorColor =\n              item.color ?? item.stroke ?? item.fill ?? (key ? `var(--color-${key})` : undefined);\n            const indicatorStyles =\n              indicator === \"dashed\"\n                ? { borderColor: indicatorColor }\n                : { backgroundColor: indicatorColor };\n\n            return (\n              <div key={`${key}-${index}`} className=\"flex items-center gap-2\">\n                {!hideIndicator ? (\n                  Icon ? (\n                    <Icon\n                      className=\"h-3 w-3 shrink-0\"\n                      style={indicatorColor ? { color: indicatorColor } : undefined}\n                    />\n                  ) : (\n                    <span\n                      className={cn(\n                        \"inline-flex h-2.5 w-2.5 shrink-0 rounded-[2px]\",\n                        indicator === \"line\" && \"h-0.5 w-3 rounded-full\",\n                        indicator === \"dashed\" && \"h-0.5 w-3 rounded-full border border-dashed\",\n                      )}\n                      style={indicatorColor ? indicatorStyles : undefined}\n                    />\n                  )\n                ) : null}\n                <div className=\"flex flex-1 items-center justify-between gap-2\">\n                  <span className=\"text-muted-foreground\">{labelOverride}</span>\n                  <span className=\"font-medium text-foreground\">{value}</span>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  },\n);\nChartTooltipContent.displayName = \"ChartTooltipContent\";\n\nexport interface ChartLegendItem {\n  dataKey?: string | number;\n  value?: string | number;\n  color?: string;\n  fill?: string;\n  stroke?: string;\n  payload?: ChartDataRow;\n}\n\nexport type ChartLegendVerticalAlign = \"top\" | \"bottom\" | \"middle\";\n\nexport interface ChartLegendContentProps {\n  className?: string;\n  payload?: ReadonlyArray<ChartLegendItem>;\n  verticalAlign?: ChartLegendVerticalAlign;\n  nameKey?: string;\n}\n\nconst ChartLegendContent = React.forwardRef<\n  HTMLDivElement,\n  ChartLegendContentProps\n>(({ className, payload, verticalAlign = \"bottom\", nameKey }, ref) => {\n  const { config } = useChart();\n  if (!payload?.length) return null;\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex flex-wrap items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-4\" : \"pt-4\",\n        className,\n      )}\n    >\n      {payload.map((item, index) => {\n        const key = nameKey\n          ? item.payload?.[nameKey]\n          : item.dataKey ?? item.value ?? `item-${index}`;\n        const itemConfig = key ? config?.[key] : undefined;\n        const Icon = itemConfig?.icon;\n        const label = itemConfig?.label ?? item.value ?? key;\n        const color = item.color ?? item.fill ?? item.stroke ?? (key ? `var(--color-${key})` : undefined);\n\n        return (\n          <div key={`${key}-${index}`} className=\"flex items-center gap-1.5\">\n            {Icon ? (\n              <Icon className=\"h-3 w-3\" style={color ? { color } : undefined} />\n            ) : (\n              <span\n                className=\"h-2 w-2 rounded-[2px]\"\n                style={color ? { backgroundColor: color } : undefined}\n              />\n            )}\n            <span className=\"text-muted-foreground\">{label}</span>\n          </div>\n        );\n      })}\n    </div>\n  );\n});\nChartLegendContent.displayName = \"ChartLegendContent\";\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}