{
  "name": "sheet",
  "type": "registry:ui",
  "title": "Sheet",
  "description": "An edit form from the side in a dialog-based edge flyout for create, edit and save-or-cancel workflows.",
  "registryDependencies": [
    "@siteplane/base",
    "@siteplane/button",
    "@siteplane/scroll-area"
  ],
  "dependencies": [
    "@base-ui/react@1.5.0",
    "lucide-react@1.18.0"
  ],
  "files": [
    {
      "path": "src/components/ui/sheet.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { SiteplaneUIPortalScope } from \"@/components/ui/siteplane-provider\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\n\nexport const Sheet: typeof SheetPrimitive.Root = SheetPrimitive.Root;\n\nexport const SheetPortal: typeof SheetPrimitive.Portal = SheetPrimitive.Portal;\n\nexport function SheetTrigger(\n  props: SheetPrimitive.Trigger.Props,\n): React.ReactElement {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nexport function SheetClose(\n  props: SheetPrimitive.Close.Props,\n): React.ReactElement {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nexport function SheetBackdrop({\n  className,\n  ...props\n}: SheetPrimitive.Backdrop.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Backdrop\n      className={cn(\n        \"siteplane-sheet-backdrop-motion fixed inset-0 z-50 bg-black/32 backdrop-blur-sm\",\n        className,\n      )}\n      data-slot=\"sheet-backdrop\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetViewport({\n  className,\n  side,\n  variant = \"default\",\n  ...props\n}: SheetPrimitive.Viewport.Props & {\n  side?: \"right\" | \"left\" | \"top\" | \"bottom\";\n  variant?: \"default\" | \"inset\";\n}): React.ReactElement {\n  return (\n    <SheetPrimitive.Viewport\n      className={cn(\n        \"fixed inset-0 z-50 grid\",\n        side === \"bottom\" && \"grid grid-rows-[1fr_auto] pt-12\",\n        side === \"top\" && \"grid grid-rows-[auto_1fr] pb-12\",\n        side === \"left\" && \"flex justify-start\",\n        side === \"right\" && \"flex justify-end\",\n        variant === \"inset\" && \"sm:p-4\",\n        className,\n      )}\n      data-slot=\"sheet-viewport\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetPopup({\n  className,\n  children,\n  showCloseButton = true,\n  side = \"right\",\n  variant = \"default\",\n  closeProps,\n  portalProps,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  showCloseButton?: boolean;\n  side?: \"right\" | \"left\" | \"top\" | \"bottom\";\n  variant?: \"default\" | \"inset\";\n  closeProps?: SheetPrimitive.Close.Props;\n  portalProps?: SheetPrimitive.Portal.Props;\n}): React.ReactElement {\n  return (\n    <SheetPortal {...portalProps}>\n      <SiteplaneUIPortalScope>\n        <SheetBackdrop />\n        <SheetViewport side={side} variant={variant}>\n          <SheetPrimitive.Popup\n            className={cn(\n              \"siteplane-sheet-panel-motion relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] max-sm:before:hidden dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n              side === \"bottom\" &&\n                \"row-start-2 border-t\",\n              side === \"top\" &&\n                \"border-b\",\n              side === \"left\" &&\n                \"w-[calc(100%-(--spacing(12)))] max-w-md border-e\",\n              side === \"right\" &&\n                \"col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s\",\n              variant === \"inset\" &&\n                \"before:hidden sm:rounded-2xl sm:border sm:before:rounded-[inherit] sm:**:data-[slot=sheet-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n              className,\n            )}\n            data-side={side}\n            data-slot=\"sheet-popup\"\n            {...props}\n          >\n            {children}\n            {showCloseButton && (\n              <SheetPrimitive.Close\n                aria-label=\"Close\"\n                className=\"absolute end-2 top-2\"\n                render={<Button size=\"icon\" variant=\"ghost\" />}\n                {...closeProps}\n              >\n                <XIcon />\n              </SheetPrimitive.Close>\n            )}\n          </SheetPrimitive.Popup>\n        </SheetViewport>\n      </SiteplaneUIPortalScope>\n    </SheetPortal>\n  );\n}\n\nexport function SheetHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col gap-2 p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pb-3 max-sm:pb-4\",\n      className,\n    ),\n    \"data-slot\": \"sheet-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SheetFooter({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end\",\n      variant === \"default\" && \"border-t bg-muted/72 py-4\",\n      variant === \"bare\" &&\n        \"in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pt-3 pt-4 pb-6\",\n      className,\n    ),\n    \"data-slot\": \"sheet-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SheetTitle({\n  className,\n  ...props\n}: SheetPrimitive.Title.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Title\n      className={cn(\n        \"font-heading font-semibold text-xl leading-none\",\n        className,\n      )}\n      data-slot=\"sheet-title\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props): React.ReactElement {\n  return (\n    <SheetPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"sheet-description\"\n      {...props}\n    />\n  );\n}\n\nexport function SheetPanel({\n  className,\n  scrollFade = true,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & {\n  scrollFade?: boolean;\n}): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-header])]:pt-1 in-[[data-slot=sheet-popup]:has([data-slot=sheet-footer]:not(.border-t))]:pb-1\",\n      className,\n    ),\n    \"data-slot\": \"sheet-panel\",\n  };\n\n  return (\n    <ScrollArea scrollFade={scrollFade}>\n      {useRender({\n        defaultTagName: \"div\",\n        props: mergeProps<\"div\">(defaultProps, props),\n        render,\n      })}\n    </ScrollArea>\n  );\n}\n\nexport {\n  SheetPrimitive,\n  SheetBackdrop as SheetOverlay,\n  SheetPopup as SheetContent,\n};\n"
    }
  ],
  "categories": [
    "overlays"
  ],
  "docs": "# Sheet\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nUse Sheet for side or edge flyouts that contain edit, create and save/cancel workflows. Use Drawer for contextual inspection or gesture-driven panels.\n\n## Import\n\n```tsx\nimport {\n  Sheet,\n  SheetClose,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetPanel,\n  SheetPopup,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\";\n```\n\n## Public API\n\n- Compose `Sheet`, `SheetTrigger`, `SheetPopup`, `SheetHeader`, `SheetTitle`, `SheetDescription`, `SheetPanel`, `SheetFooter` and `SheetClose`.\n- `SheetPopup` accepts `side=\"right\" | \"left\" | \"top\" | \"bottom\"`, `variant=\"default\" | \"inset\"`, `showCloseButton`, `closeProps` and `portalProps`.\n- `closeProps` customizes the built-in close control without removing it; `showCloseButton={false}` removes that control when another explicit close path exists.\n- `SheetPanel` accepts `scrollFade`; set `scrollFade={false}` for a hard scroll edge. `SheetFooter` accepts `variant=\"default\" | \"bare\"`.\n\n## Public Motion\n\n- Backdrop and panel use the shared Sheet motion tokens, including side-aware translation and `--motion-sheet-x` or `--motion-sheet-y`.\n- Reduced motion removes transform-heavy movement while preserving open, close and focus behavior.\n\n## Public Accessibility\n\n- Provide `SheetTitle` and, where helpful, `SheetDescription`; preserve focus trapping, Escape and focus return.\n- Keep at least one explicit close path through the built-in button or `SheetClose`.\n- Use semantic form controls and visible labels inside edit flows.\n\n## Public Agent Guidance\n\n- Use Sheet for task-oriented forms and Drawer for contextual details or swipe interactions.\n- Customize the built-in close button through `closeProps` instead of adding a second overlapping control.\n- Keep scroll behavior in `SheetPanel` and do not add a competing nested vertical scroll container.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/components/overlays/sheet)\n\n- [Registry source](https://ui.siteplane.io/r/sheet.json)\n",
  "meta": {
    "siteplane:agentContractVersion": 1,
    "siteplane:docs": "https://ui.siteplane.io/docs/components/overlays/sheet",
    "siteplane:releaseVersion": "0.1.1",
    "siteplane:sourceOwned": true
  },
  "devDependencies": []
}