{
  "name": "detail-drawer",
  "type": "registry:block",
  "title": "Detail Drawer",
  "description": "Inspect row details in a side panel without entering an edit workflow.",
  "registryDependencies": [
    "@siteplane/base",
    "@siteplane/drawer"
  ],
  "dependencies": [],
  "files": [
    {
      "path": "src/components/patterns/detail-drawer.tsx",
      "type": "registry:block",
      "target": "components/patterns/detail-drawer.tsx",
      "content": "\"use client\";\n\nimport type * as React from \"react\";\n\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerPopup,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/components/ui/drawer\";\nimport { cn } from \"@/lib/utils\";\n\nexport function DetailDrawer(\n  props: React.ComponentProps<typeof Drawer>,\n): React.ReactElement {\n  return <Drawer position=\"right\" {...props} />;\n}\n\nexport const DetailDrawerTrigger: typeof DrawerTrigger = DrawerTrigger;\nexport const DetailDrawerClose: typeof DrawerClose = DrawerClose;\n\nexport function DetailDrawerContent({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPopup>): React.ReactElement {\n  return (\n    <DrawerPopup\n      className={cn(\"max-w-xl\", className)}\n      data-pattern=\"detail-drawer-content\"\n      position=\"right\"\n      variant=\"straight\"\n      {...props}\n    >\n      {children}\n    </DrawerPopup>\n  );\n}\n\nexport function DetailDrawerHeader({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerHeader>): React.ReactElement {\n  return (\n    <DrawerHeader\n      className={cn(\"border-b\", className)}\n      data-pattern=\"detail-drawer-header\"\n      {...props}\n    />\n  );\n}\n\nexport const DetailDrawerTitle: typeof DrawerTitle = DrawerTitle;\nexport const DetailDrawerDescription: typeof DrawerDescription = DrawerDescription;\n\nexport function DetailDrawerBody({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPanel>): React.ReactElement {\n  return (\n    <DrawerPanel\n      className={cn(\"min-h-0 flex-1\", className)}\n      data-pattern=\"detail-drawer-body\"\n      {...props}\n    />\n  );\n}\n\nexport function DetailDrawerFooter({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerFooter>): React.ReactElement {\n  return (\n    <DrawerFooter\n      className={cn(\"border-t\", className)}\n      data-pattern=\"detail-drawer-footer\"\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "categories": [
    "patterns"
  ],
  "docs": "# Detail Drawer\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nDetail Drawer is a `registry:block` for inspecting contextual details about a row or entity in a right-side panel. It uses the native Drawer primitive; use Sheet for edit forms with a save-or-cancel contract.\n\n## Import\n\n```tsx\nimport {\n  DetailDrawer,\n  DetailDrawerBody,\n  DetailDrawerClose,\n  DetailDrawerContent,\n  DetailDrawerDescription,\n  DetailDrawerFooter,\n  DetailDrawerHeader,\n  DetailDrawerTitle,\n  DetailDrawerTrigger,\n} from \"@/components/patterns/detail-drawer\";\n```\n\n## Public API\n\n- Use Detail Drawer for inspection, history, related tasks and entity context, not irreversible decisions.\n- Keep title and description in the header, scannable details in the body, and secondary close or follow-up actions in the footer.\n- Triggers remain visible buttons or clearly focusable row actions.\n- Provide a close path through `showCloseButton`, `DetailDrawerClose` or both.\n- Use Sheet when the primary task is editing and saving a form.\n\n## Public Motion\n\n- Drawer swipe, edge position and dismissal motion remain native to the Drawer primitive.\n- Do not copy Sheet motion onto Detail Drawer. Global reduced motion remains active through the underlying primitive.\n\n## Public Accessibility\n\n- Keep the trigger visible in the row or entity context that opens the drawer.\n- Provide a descriptive title and, when useful, a description that identifies the inspected entity.\n- Provide an explicit close path through `showCloseButton`, `DetailDrawerClose` or both, and preserve the native Drawer focus and dismissal behavior.\n\n## Public Agent Guidance\n\n- Compose Detail Drawer from its named slots and keep product details in consumer content.\n- Use Alert Dialog for irreversible confirmation and Sheet for create or edit workflows.\n- Do not replace the Drawer portal, focus, swipe or dismissal behavior.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/patterns/detail-drawer)\n\n- [Registry source](https://ui.siteplane.io/r/detail-drawer.json)\n",
  "meta": {
    "siteplane:agentContractVersion": 1,
    "siteplane:docs": "https://ui.siteplane.io/docs/patterns/detail-drawer",
    "siteplane:releaseVersion": "0.1.1",
    "siteplane:sourceOwned": true
  },
  "devDependencies": []
}