{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "line-chart-custom-tooltip-example",
  "title": "Line Chart Custom Tooltip",
  "description": "line-chart-custom-tooltip-example",
  "dependencies": [
    "@heroicons/react",
    "recharts"
  ],
  "registryDependencies": [
    "https://intentui.com/r/card",
    "https://intentui.com/r/line-chart",
    "https://intentui.com/r/use-mobile"
  ],
  "files": [
    {
      "path": "src/components/examples/visualizations/line-chart/line-chart-custom-tooltip-example.tsx",
      "content": "'use client'\n\nimport { ChatBubbleLeftEllipsisIcon, HeartIcon, ShareIcon } from '@heroicons/react/24/outline'\nimport { useMemo } from 'react'\nimport type { TooltipProps as RechartsTooltipProps } from 'recharts'\nimport type { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { LineChart } from '@/components/ui/line-chart'\nimport { useIsMobile } from '@/hooks/use-mobile'\n\ninterface CustomTooltipProps extends Partial<RechartsTooltipProps<ValueType, NameType>> {\n  active?: boolean\n  payload?: {\n    name?: string\n    value?: number\n    dataKey?: string\n    color?: string\n  }[]\n  label?: string\n}\n\nfunction CustomTooltip({ active, payload, label }: CustomTooltipProps) {\n  if (!active || !payload?.length) return null\n\n  return (\n    <div className=\"inset-ring inset-ring-fg/20 rounded-2xl bg-bg/10 p-3 text-xs backdrop-blur-2xl\">\n      <div className=\"mb-2 font-medium text-muted-fg\">{label}</div>\n      <div className=\"space-y-1\">\n        {payload.map((entry) => (\n          <div key={entry.dataKey} className=\"flex items-center justify-between gap-3\">\n            <div className=\"flex items-center gap-2 text-muted-fg capitalize\">\n              {entry.dataKey === 'likes' && <HeartIcon style={{ color: entry.color }} />}\n              {entry.dataKey === 'comments' && (\n                <ChatBubbleLeftEllipsisIcon style={{ color: entry.color }} />\n              )}\n              {entry.dataKey === 'shares' && <ShareIcon style={{ color: entry.color }} />}\n              <span>{entry.name}</span>\n            </div>\n            <span className=\"font-mono text-fg tabular-nums\">{entry.value}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default function LineChartCustomTooltipDemo() {\n  const isMobile = useIsMobile()\n  const data = useMemo(\n    () =>\n      Array.from({ length: 7 }, (_, i) => ({\n        day: `Day ${i + 1}`,\n        likes: Math.floor(100 + Math.random() * 300),\n        comments: Math.floor(20 + Math.random() * 80),\n        shares: Math.floor(10 + Math.random() * 50),\n      })),\n    []\n  )\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Engagement last 7d</CardTitle>\n        <CardDescription>Likes, comments, and shares for the recent week.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <LineChart\n          containerHeight={isMobile ? 200 : 300}\n          data={data}\n          dataKey=\"day\"\n          xAxisProps={{ interval: 0 }}\n          tooltip={<CustomTooltip />}\n          config={{\n            likes: { label: 'Likes' },\n            comments: { label: 'Comments' },\n            shares: { label: 'Shares' },\n          }}\n        />\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/line-chart-custom-tooltip-example/page.tsx"
    }
  ],
  "type": "registry:page"
}