{
  "$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 of the screen, for filters, settings, details or mobile navigation.",
  "dependencies": [
    "lucide-react@^1.48.0",
    "radix-ui@^1.6.7"
  ],
  "registryDependencies": [
    "https://blank.vageshwar.dev/r/theme.json",
    "https://blank.vageshwar.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "ui/sheet.tsx",
      "type": "registry:ui",
      "content": "// BlankUI: sheet. Managed by BlankUI. Read sheet.md before editing. The title is a prop on SheetContent, on purpose.\nimport type { ComponentProps, ReactNode } from \"react\"\nimport { Dialog as SheetPrimitive, VisuallyHidden } from \"radix-ui\"\nimport { X } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * A panel that slides in from the edge of the screen. Same API as Dialog, plus `side`.\n *\n * @example\n * <Sheet>\n *   <SheetTrigger asChild>\n *     <Button variant=\"outline\">Filters</Button>\n *   </SheetTrigger>\n *   <SheetContent side=\"right\" title=\"Filters\">\n *     <Stack gap={4}>...</Stack>\n *   </SheetContent>\n * </Sheet>\n */\nexport function Sheet(props: ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\n/** Opens the sheet. Use `asChild` with a Button. */\nexport function SheetTrigger(props: ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\n/** Closes the sheet. Use `asChild` with a Button. */\nexport function SheetClose(props: ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nconst sideClass = {\n  right:\n    \"inset-y-0 right-0 h-full w-3/4 max-w-sm border-l motion-safe:data-[state=open]:animate-slide-in-right\",\n  left: \"inset-y-0 left-0 h-full w-3/4 max-w-sm border-r motion-safe:data-[state=open]:animate-slide-in-left\",\n  top: \"inset-x-0 top-0 max-h-9/10 border-b motion-safe:data-[state=open]:animate-slide-in-top\",\n  bottom:\n    \"inset-x-0 bottom-0 max-h-9/10 border-t motion-safe:data-[state=open]:animate-slide-in-bottom\",\n} as const\n\nexport interface SheetContentProps extends Omit<\n  ComponentProps<typeof SheetPrimitive.Content>,\n  \"title\"\n> {\n  /** Required. The sheet heading, also used as its accessible name. */\n  title: ReactNode\n  /** Short text under the title. */\n  description?: ReactNode\n  /** Hide the title visually but keep it for screen readers. */\n  hideTitle?: boolean\n  /** Edge the sheet slides in from. Defaults to `right`. */\n  side?: keyof typeof sideClass\n  /** Show the X button in the corner. Defaults to `true`. */\n  showCloseButton?: boolean\n}\n\n/** The sliding panel. Renders the title and description for you. */\nexport function SheetContent({\n  title,\n  description,\n  hideTitle = false,\n  side = \"right\",\n  showCloseButton = true,\n  className,\n  children,\n  ...props\n}: SheetContentProps) {\n  const heading = (\n    <SheetPrimitive.Title className=\"font-heading text-lg leading-tight font-semibold\">\n      {title}\n    </SheetPrimitive.Title>\n  )\n  return (\n    <SheetPrimitive.Portal>\n      <SheetPrimitive.Overlay\n        data-slot=\"sheet-overlay\"\n        className=\"fixed inset-0 z-50 bg-overlay motion-safe:data-[state=open]:animate-fade-in\"\n      />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        {...(description ? {} : { \"aria-describedby\": undefined })}\n        className={cn(\n          \"fixed z-50 flex flex-col gap-4 overflow-y-auto bg-surface-raised p-6 text-foreground shadow-lg\",\n          sideClass[side],\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex flex-col gap-1.5 pr-6\">\n          {hideTitle ? <VisuallyHidden.Root>{heading}</VisuallyHidden.Root> : heading}\n          {description && (\n            <SheetPrimitive.Description className=\"text-sm text-muted-foreground\">\n              {description}\n            </SheetPrimitive.Description>\n          )}\n        </div>\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            className=\"absolute top-4 right-4 cursor-pointer rounded-sm p-1 text-muted-foreground hover:bg-surface-hover hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring\"\n            aria-label=\"Close\"\n          >\n            <X className=\"size-4\" aria-hidden=\"true\" />\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPrimitive.Portal>\n  )\n}\n\n/** Actions pinned to the bottom of the sheet. */\nexport function SheetFooter({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n"
    },
    {
      "path": "ui/sheet.md",
      "type": "registry:ui",
      "content": "---\nname: sheet\ntitle: Sheet\ndescription: A panel that slides in from an edge of the screen, for filters, settings, details or mobile navigation.\ncategory: overlay\nwhenToUse:\n  - Filters or settings next to a list the user still wants to see.\n  - Details of a selected row or item.\n  - Navigation menus on small screens.\nwhenNotToUse:\n  - when: A short focused task in the middle of the screen.\n    use: dialog\n  - when: Confirming a destructive action.\n    use: alert-dialog\n  - when: A few controls next to a button.\n    use: popover\nrelated: [dialog, popover]\nrequiredParts: [Sheet, SheetTrigger, SheetContent, SheetFooter, SheetClose]\nantiPatterns:\n  - avoid: \"<SheetHeader><SheetTitle>...</SheetTitle></SheetHeader> (shadcn style)\"\n    instead: '<SheetContent title=\"...\">'\n  - avoid: \"A fixed-position div with a slide animation\"\n    instead: \"<Sheet> handles focus, Escape and scroll lock\"\n---\n\n# Sheet\n\nSame API as Dialog, plus `side`. The title is a prop on `SheetContent`.\n\n## Import\n\n```tsx\nimport { Sheet, SheetClose, SheetContent, SheetFooter, SheetTrigger } from \"@/components/ui/sheet\"\n```\n\n## Example\n\n```tsx\n<Sheet>\n  <SheetTrigger asChild>\n    <Button variant=\"outline\">Filters</Button>\n  </SheetTrigger>\n  <SheetContent side=\"right\" title=\"Filters\" description=\"Narrow down the list.\">\n    <Stack gap={4}>\n      <Field label=\"Status\">\n        <Select defaultValue=\"open\">...</Select>\n      </Field>\n    </Stack>\n    <SheetFooter>\n      <SheetClose asChild>\n        <Button>Apply</Button>\n      </SheetClose>\n    </SheetFooter>\n  </SheetContent>\n</Sheet>\n```\n\n`side`: `right` (default), `left`, `top`, `bottom`.\n"
    }
  ],
  "docs": "Read components/ui/sheet.md before using Sheet. Docs: https://blank.vageshwar.dev/docs/sheet",
  "meta": {
    "category": "overlay",
    "requiredParts": [
      "Sheet",
      "SheetTrigger",
      "SheetContent",
      "SheetFooter",
      "SheetClose"
    ],
    "related": [
      "dialog",
      "popover"
    ]
  }
}