{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart",
  "title": "Chart",
  "description": "Responsive chart surfaces with exact-data disclosure and styled tooltips. Compose Recharts directly.",
  "dependencies": [
    "recharts@3.10.1",
    "react-is@19.2.8"
  ],
  "registryDependencies": [
    "@neumorphism-ui/utils"
  ],
  "files": [
    {
      "path": "src/components/ui/chart.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ResponsiveContainer, Tooltip } from \"recharts\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface ChartContainerProps extends Omit<React.ComponentProps<\"section\">, \"title\" | \"children\"> {\n  title: string;\n  description: string;\n  summary?: React.ReactNode;\n  actions?: React.ReactNode;\n  children: React.ReactElement;\n  table: React.ReactNode;\n  tableLabel: string;\n  empty?: boolean;\n  emptyLabel?: string;\n}\n\n/** Owns the surface, responsive dimensions and exact-data disclosure only.\n * Compose ordinary Recharts series and axes; no private chart configuration DSL.\n */\nexport function ChartContainer({\n  title, description, summary, actions, children, table, tableLabel,\n  empty = false, emptyLabel = \"No observations.\", className, ...props\n}: ChartContainerProps) {\n  const id = React.useId();\n  return (\n    <section\n      data-slot=\"chart\"\n      aria-labelledby={`${id}-title`}\n      className={cn(\"grid min-w-0 gap-5 rounded-[var(--neu-radius-surface)] border border-[var(--neu-edge)] bg-[var(--neu-surface)] p-5 text-[var(--foreground)] [box-shadow:var(--neu-shadow-raised-sm)]\", className)}\n      {...props}\n    >\n      <header className=\"flex flex-wrap items-start justify-between gap-4\">\n        <div className=\"grid min-w-0 gap-1.5\">\n          <h3 id={`${id}-title`} className=\"text-base font-semibold tracking-tight\">{title}</h3>\n          <p id={`${id}-description`} className=\"max-w-prose text-sm leading-relaxed text-[var(--muted-foreground)]\">{description}</p>\n        </div>\n        {actions}\n      </header>\n      {summary != null && <p className=\"text-sm font-medium tabular-nums\">{summary}</p>}\n      {empty ? (\n        <div role=\"status\" className=\"grid h-64 place-items-center rounded-[var(--neu-radius-surface)] border border-dashed border-[var(--border)] p-6 text-center text-sm text-[var(--muted-foreground)]\">{emptyLabel}</div>\n      ) : (\n        <div\n          role=\"group\" aria-label={title} aria-describedby={`${id}-description`}\n          data-slot=\"chart-plot\"\n          className=\"h-64 min-w-0 text-xs [&_.recharts-surface:focus-visible]:outline-2 [&_.recharts-surface:focus-visible]:outline-offset-2 [&_.recharts-surface:focus-visible]:outline-[var(--ring)]\"\n        >\n          <ResponsiveContainer width=\"100%\" height=\"100%\" minWidth={0} initialDimension={{ width: 480, height: 256 }}>\n            {children}\n          </ResponsiveContainer>\n        </div>\n      )}\n      <details className=\"min-w-0 border-t border-[var(--border)] pt-4\">\n        <summary className=\"cursor-pointer rounded text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]\">{tableLabel}</summary>\n        <div\n          role=\"region\" aria-label={tableLabel} tabIndex={0}\n          className=\"mt-4 max-h-80 overflow-auto rounded outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] [&_table]:w-full [&_table]:border-collapse [&_table]:text-left [&_table]:text-xs [&_td]:border-b [&_td]:border-[var(--border)] [&_td]:px-3 [&_td]:py-2.5 [&_td]:tabular-nums [&_th]:whitespace-nowrap [&_th]:border-b [&_th]:border-[var(--border)] [&_th]:px-3 [&_th]:py-2.5 [&_th]:font-semibold\"\n        >{table}</div>\n      </details>\n    </section>\n  );\n}\n\nexport function ChartTooltip(props: React.ComponentProps<typeof Tooltip>) {\n  return <Tooltip\n    isAnimationActive={false}\n    contentStyle={{ background: \"var(--popover)\", color: \"var(--popover-foreground)\", border: \"1px solid var(--border)\", borderRadius: \"var(--neu-radius-control)\", boxShadow: \"var(--neu-shadow-floating)\", fontSize: 12 }}\n    labelStyle={{ color: \"var(--popover-foreground)\", fontWeight: 600 }}\n    itemStyle={{ color: \"var(--popover-foreground)\" }}\n    {...props}\n  />;\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}