{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "css-sheet",
  "type": "registry:ui",
  "title": "Sheet",
  "dependencies": [
    "react-aria-components"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/css-dialog.json"
  ],
  "files": [
    {
      "path": "components/ui/Sheet.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport {Modal, ModalOverlay, type ModalOverlayProps, Heading} from 'react-aria-components/Modal';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {Dialog} from '@/registry/react-aria/ui/Dialog';\nimport './Sheet.css';\n\nexport function Sheet(props: ModalOverlayProps) {\n  return (\n    <ModalOverlay className=\"sheet-overlay\">\n      {composeRenderProps(props.children, children => (\n        <Modal className=\"sheet\">\n          <Dialog>{children}</Dialog>\n        </Modal>\n      ))}\n    </ModalOverlay>\n  );\n}\n\nexport {Heading};\n"
    },
    {
      "path": "components/ui/Sheet.css",
      "type": "registry:component",
      "content": ".sheet-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: var(--page-width);\n  height: var(--page-height);\n  background: rgba(0 0 0 / 0.3);\n  backdrop-filter: blur(10px);\n  z-index: 100;\n  overflow: clip;\n\n  &[data-entering] {\n    animation: sheet-blur 300ms;\n  }\n\n  &[data-exiting] {\n    animation: sheet-blur 300ms reverse ease-in;\n  }\n}\n\n.sheet {\n  position: sticky;\n  left: 0;\n  width: 300px;\n  /* Extra padding to account for iOS floating browser UI. */\n  top: -100px;\n  height: calc(100dvh + 200px);\n  padding: 100px 0;\n  margin-left: auto;\n  background: var(--overlay-background);\n  outline: none;\n  border-left: 1px solid var(--overlay-border);\n  box-shadow: -8px 0 20px rgba(0 0 0 / 0.1);\n  font-family: system-ui;\n  font-size: 0.875rem;\n\n  &[data-entering] {\n    animation: sheet-slide 300ms;\n  }\n\n  &[data-exiting] {\n    animation: sheet-slide 300ms reverse ease-in;\n  }\n}\n\n@keyframes sheet-blur {\n  from {\n    background: rgba(0 0 0 / 0);\n    backdrop-filter: blur(0);\n  }\n\n  to {\n    background: rgba(0 0 0 / 0.3);\n    backdrop-filter: blur(10px);\n  }\n}\n\n@keyframes sheet-slide {\n  from {\n    transform: translateX(100%);\n  }\n\n  to {\n    transform: translateX(0);\n  }\n}\n"
    }
  ]
}