{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "bar-list-controlled-example",
  "title": "Bar List Controlled",
  "description": "bar-list-controlled-example",
  "registryDependencies": [
    "https://intentui.com/r/bar-list",
    "https://intentui.com/r/card"
  ],
  "files": [
    {
      "path": "src/components/examples/visualizations/bar-list/bar-list-controlled-example.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { BarList } from '@/components/ui/bar-list'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\n\nexport default function BarListControlledDemo() {\n  const [selectedItem, setSelectedItem] = useState('')\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Department budget usage</CardTitle>\n        <CardDescription>Select a department to inspect budget usage</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <BarList\n          data={[\n            { name: 'Marketing', value: 45000 },\n            { name: 'Research & Development', value: 38000 },\n            { name: 'Operations', value: 29000 },\n            { name: 'Customer Support', value: 17500 },\n            { name: 'IT & Infrastructure', value: 13200 },\n          ]}\n          onValueChange={(item) => setSelectedItem(JSON.stringify(item, null, 2))}\n          valueFormatter={(value) => `$${value.toLocaleString()}`}\n        />\n        {selectedItem && <pre className=\"font-mono text-xs\">{selectedItem}</pre>}\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/bar-list-controlled-example/page.tsx"
    }
  ],
  "type": "registry:page"
}