{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet",
  "type": "registry:ui",
  "title": "Sheet",
  "description": "A panel that slides in from an edge (right or bottom) on the surface spring, follows a drag one to one, and leaves on release, sooner for a harder flick.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/sheet/sheet.tsx",
      "type": "registry:ui",
      "target": "components/metalui/sheet/sheet.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Drawer as BaseDrawer } from '@base-ui/react/drawer';\nimport { Surface } from '../surface/surface';\n\n/* ─────────────────────────────────────────────────────────\n * SHEET, a panel that slides in from an edge, on Base UI Drawer\n *\n *   open      the scrim fades; the sheet slides its whole size in from its edge on the surface\n *             spring (no stop, no overshoot); focus moves into it\n *   drag      it follows the finger one to one (right: sideways; bottom: down)\n *   let go    past the threshold it leaves on the release spring, a harder flick sooner;\n *             short of it, it settles home on the settle spring\n *   close     Esc, the scrim, or a Close part: it leaves on the release spring; focus returns\n * Reduce Motion: it fades, with no slide.\n * The plate and scrim are the dialog's; the sheet recipe adds the edge, the grip and the motion.\n * Slots: Sheet.Root, Sheet.Trigger, Sheet.Popup, Sheet.Title, Sheet.Description, Sheet.Close.\n * ───────────────────────────────────────────────────────── */\n\ntype Side = 'right' | 'bottom';\nconst SideCtx = React.createContext<Side>('right');\n\nconst SCRIM = 'mu-sheet-scrim fixed inset-0 z-dialog-scrim-z bg-dialog-scrim-color backdrop-dialog-scrim-blur reduce-transparency:bg-dialog-scrim-opaque reduce-transparency:backdrop-blur-none transition-opacity ease-surface duration-surface data-starting-style:opacity-0 data-ending-style:opacity-0 data-ending-style:ease-release data-ending-style:duration-release';\nconst VIEWPORT = 'mu-sheet-viewport fixed inset-0 z-dialog-scrim-z pointer-events-none';\nconst POPUP = {\n  right: 'mu-sheet pointer-events-auto fixed top-0 right-0 bottom-0 box-border flex flex-col gap-sheet-gap sheet-width p-sheet-pad rounded-l-sheet-radius outline-none overflow-y-auto sheet-motion',\n  bottom: 'mu-sheet pointer-events-auto fixed inset-x-0 bottom-0 box-border flex flex-col gap-sheet-gap sheet-max-height p-sheet-pad pt-0 rounded-t-sheet-radius outline-none overflow-y-auto sheet-motion',\n};\nconst GRIP = 'mu-sheet-grip self-center mt-sheet-grip-gap w-sheet-grip-width h-sheet-grip-height rounded-pill recipe-switch';\n\nexport interface SheetRootProps extends Omit<BaseDrawer.Root.Props, 'swipeDirection'> {\n  /** The edge it comes from: right (an inspector, the default) or bottom (a phone sheet). */\n  side?: Side;\n}\n\nfunction Root({ side = 'right', children, ...props }: SheetRootProps) {\n  return (\n    <SideCtx.Provider value={side}>\n      <BaseDrawer.Root swipeDirection={side === 'right' ? 'right' : 'down'} {...props}>{children}</BaseDrawer.Root>\n    </SideCtx.Provider>\n  );\n}\n\nfunction Trigger(props: BaseDrawer.Trigger.Props) {\n  return <BaseDrawer.Trigger {...props} />;\n}\n\n/** The sheet itself, with its scrim: title, description and content inside. */\nfunction Popup({ className, children, ...props }: BaseDrawer.Popup.Props & { className?: string }) {\n  const side = React.useContext(SideCtx);\n  const own = POPUP[side];\n  return (\n    <BaseDrawer.Portal>\n      <BaseDrawer.Backdrop className={SCRIM} />\n      <BaseDrawer.Viewport className={VIEWPORT}>\n        <BaseDrawer.Popup data-side={side} {...props} className={className ? `${own} ${className}` : own} render={<Surface material=\"plate\" />}>\n          {side === 'bottom' && <span aria-hidden className={GRIP} />}\n          {children}\n        </BaseDrawer.Popup>\n      </BaseDrawer.Viewport>\n    </BaseDrawer.Portal>\n  );\n}\n\nfunction Title({ className, ...props }: BaseDrawer.Title.Props & { className?: string }) {\n  return <BaseDrawer.Title className={className ? `mu-sheet-title m-0 type-title text-ink ${className}` : 'mu-sheet-title m-0 type-title text-ink'} {...props} />;\n}\n\nfunction Description({ className, ...props }: BaseDrawer.Description.Props & { className?: string }) {\n  return <BaseDrawer.Description className={className ? `mu-sheet-description m-0 type-body text-ink2 ${className}` : 'mu-sheet-description m-0 type-body text-ink2'} {...props} />;\n}\n\nfunction Close(props: BaseDrawer.Close.Props) {\n  return <BaseDrawer.Close {...props} />;\n}\n\nexport const Sheet = Object.assign(Root, { Trigger, Popup, Title, Description, Close, Root });\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/sheet.md. SwiftUI: MetalSheet in the MetalUI Swift package."
}