{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-drawer-8",
  "description": "Nested right drawers with inset variant",
  "registryDependencies": [
    "@coss/button",
    "@coss/drawer",
    "@coss/field",
    "@coss/input"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-drawer-8.tsx",
      "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerPopup,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Input } from \"@/registry/default/ui/input\";\n\nexport default function Particle() {\n  return (\n    <Drawer position=\"right\">\n      <DrawerTrigger render={<Button variant=\"outline\" />}>\n        Nested inset drawers\n      </DrawerTrigger>\n      <DrawerPopup variant=\"inset\">\n        <DrawerHeader>\n          <DrawerTitle>Manage team member</DrawerTitle>\n          <DrawerDescription>\n            View and manage a user in your team.\n          </DrawerDescription>\n        </DrawerHeader>\n        <DrawerPanel className=\"grid gap-4\">\n          <div className=\"grid gap-1\">\n            <p className=\"text-muted-foreground text-sm\">Name</p>\n            <p className=\"font-medium text-sm\">Bora Baloglu</p>\n          </div>\n          <div className=\"grid gap-1\">\n            <p className=\"text-muted-foreground text-sm\">Email</p>\n            <p className=\"font-medium text-sm\">bora@example.com</p>\n          </div>\n        </DrawerPanel>\n        <DrawerFooter>\n          <Drawer position=\"right\">\n            <DrawerTrigger render={<Button variant=\"outline\" />}>\n              Edit details\n            </DrawerTrigger>\n            <DrawerPopup variant=\"inset\">\n              <DrawerHeader>\n                <DrawerTitle>Edit details</DrawerTitle>\n                <DrawerDescription>\n                  Make changes to the member&apos;s information.\n                </DrawerDescription>\n              </DrawerHeader>\n              <DrawerPanel className=\"grid gap-4\">\n                <Field>\n                  <FieldLabel>Name</FieldLabel>\n                  <Input defaultValue=\"Bora Baloglu\" type=\"text\" />\n                </Field>\n                <Field>\n                  <FieldLabel>Email</FieldLabel>\n                  <Input defaultValue=\"bora@example.com\" type=\"email\" />\n                </Field>\n              </DrawerPanel>\n              <DrawerFooter>\n                <DrawerClose render={<Button variant=\"ghost\" />}>\n                  Cancel\n                </DrawerClose>\n                <Button type=\"submit\">Save changes</Button>\n              </DrawerFooter>\n            </DrawerPopup>\n          </Drawer>\n        </DrawerFooter>\n      </DrawerPopup>\n    </Drawer>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "categories": [
    "drawer"
  ],
  "type": "registry:block"
}