{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "bar-chart-controlled-example",
  "title": "Bar Chart Controlled",
  "description": "bar-chart-controlled-example",
  "dependencies": [
    "react-aria-components"
  ],
  "registryDependencies": [
    "https://intentui.com/r/bar-chart",
    "https://intentui.com/r/card",
    "https://intentui.com/r/toggle-group",
    "https://intentui.com/r/use-mobile"
  ],
  "files": [
    {
      "path": "src/components/examples/visualizations/bar-chart/bar-chart-controlled-example.tsx",
      "content": "'use client'\n\nimport { useMemo, useState } from 'react'\nimport type { Key } from 'react-aria-components/Breadcrumbs'\nimport { BarChart } from '@/components/ui/bar-chart'\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card'\nimport { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'\nimport { useIsMobile } from '@/hooks/use-mobile'\n\nexport default function BarChartControlledSmart() {\n  const isMobile = useIsMobile()\n  const [selected, setSelected] = useState<Set<Key>>(new Set(['7d']))\n  const selectedKey = Array.from(selected)[0] as string | undefined\n\n  const engagementData = useMemo(() => {\n    if (selectedKey === '1m') {\n      return Array.from({ length: 4 }, (_, i) => ({\n        label: `Week ${i + 1}`,\n        likes: Math.floor(400 + Math.random() * 300),\n        comments: Math.floor(100 + Math.random() * 100),\n        shares: Math.floor(50 + Math.random() * 50),\n      }))\n    }\n\n    if (selectedKey === '2w') {\n      return Array.from({ length: 2 }, (_, i) => ({\n        label: `Week ${i + 1}`,\n        likes: Math.floor(800 + Math.random() * 400),\n        comments: Math.floor(200 + Math.random() * 150),\n        shares: Math.floor(100 + Math.random() * 80),\n      }))\n    }\n\n    const lengthMap: Record<string, number> = { '3d': 3, '7d': 7 }\n    const length = lengthMap[selectedKey ?? '7d'] ?? 7\n\n    return Array.from({ length }, (_, i) => ({\n      label: `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  }, [selectedKey])\n\n  const showAllTicks = selectedKey === '3d' || selectedKey === '7d'\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Engagement</CardTitle>\n        <CardDescription>Likes, comments, and shares over a dynamic time range.</CardDescription>\n        <CardAction>\n          <ToggleGroup\n            size=\"sm\"\n            selectionMode=\"single\"\n            selectedKeys={selected}\n            onSelectionChange={setSelected}\n          >\n            <ToggleGroupItem id=\"3d\">3d</ToggleGroupItem>\n            <ToggleGroupItem id=\"7d\">7d</ToggleGroupItem>\n            <ToggleGroupItem id=\"2w\">2w</ToggleGroupItem>\n            <ToggleGroupItem id=\"1m\">1m</ToggleGroupItem>\n          </ToggleGroup>\n        </CardAction>\n      </CardHeader>\n      <CardContent>\n        <BarChart\n          containerHeight={isMobile ? 200 : 300}\n          data={engagementData}\n          dataKey=\"label\"\n          xAxisProps={{ interval: showAllTicks ? 0 : undefined }}\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/bar-chart-controlled-example/page.tsx"
    }
  ],
  "type": "registry:page"
}