{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drawer",
  "type": "registry:component",
  "title": "Drawer",
  "author": "Toby Belhome",
  "description": "A panel that slides out from the edge of the screen.",
  "dependencies": [
    "lucide-react",
    "recharts"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "examples/components/drawer/01/page.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Minus, Plus } from \"lucide-react\";\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger\n} from \"@/components/ui/drawer\";\n\nconst data = [\n  {\n    goal: 400\n  },\n  {\n    goal: 300\n  },\n  {\n    goal: 200\n  },\n  {\n    goal: 300\n  },\n  {\n    goal: 200\n  },\n  {\n    goal: 278\n  },\n  {\n    goal: 189\n  },\n  {\n    goal: 239\n  },\n  {\n    goal: 300\n  },\n  {\n    goal: 200\n  },\n  {\n    goal: 278\n  },\n  {\n    goal: 189\n  },\n  {\n    goal: 349\n  }\n];\n\nexport default function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350);\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)));\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}>\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">{goal}</div>\n                <div className=\"text-muted-foreground text-[0.70rem] uppercase\">Calories/day</div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}>\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/drawer.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}