{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet-3",
  "type": "registry:component",
  "title": "Sheet 3",
  "description": "Sheet 3. A panel that slides in from the edge of the screen to display additional content, forms, or actions without navigating away.",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "scroll-area",
    "sheet"
  ],
  "files": [
    {
      "path": "components/watermelon/sheet-3.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { Button } from '@/components/base-ui/button';\nimport { ScrollArea } from '@/components/base-ui/scroll-area';\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/components/base-ui/sheet';\n\nconst Sheet3 = () => {\n  const sections = Array.from({ length: 6 }, (_, i) => ({\n    title: `Module ${i + 1}`,\n    content:\n      'This section outlines key system behaviors including performance handling, scalability patterns, and secure data flow. It highlights how different layers interact and maintain efficiency under load.',\n  }));\n\n  return (\n    <Sheet>\n      <SheetTrigger asChild>\n        <Button variant=\"outline\">Open Documentation</Button>\n      </SheetTrigger>\n\n      <SheetContent className=\" p-0 sm:max-w-[540px]\">\n        <ScrollArea className=\"h-full\">\n          <div className=\"space-y-6 px-6 pb-6\">\n            <SheetHeader>\n              <SheetTitle className=\"text-lg\">System Overview</SheetTitle>\n              <SheetDescription>\n                Key architectural insights and module breakdown.\n              </SheetDescription>\n            </SheetHeader>\n\n            <div className=\"space-y-5\">\n              {sections.map((section, index) => (\n                <div\n                  key={index}\n                  className=\"bg-muted/40 space-y-3 rounded-lg border p-4\"\n                >\n                  <h3 className=\"text-base font-semibold\">{section.title}</h3>\n\n                  <p className=\"text-muted-foreground text-sm leading-relaxed\">\n                    {section.content}\n                  </p>\n\n                  <div className=\"bg-muted rounded-md px-3 py-2 font-mono text-xs\">\n                    REF-{index + 1} • ACTIVE\n                  </div>\n                </div>\n              ))}\n            </div>\n\n            <SheetFooter className=\"flex flex-col gap-2 p-0 \">\n              <SheetClose asChild>\n                <Button className=\"w-full\">Export</Button>\n              </SheetClose>\n              <SheetClose asChild>\n                <Button variant=\"outline\" className=\"w-full\">\n                  Close\n                </Button>\n              </SheetClose>\n            </SheetFooter>\n          </div>\n        </ScrollArea>\n      </SheetContent>\n    </Sheet>\n  );\n};\n\nexport default Sheet3;\n"
    }
  ]
}