{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet",
  "title": "Sheet",
  "description": "A side sheet built on Base UI dialog primitives.",
  "dependencies": [
    "@base-ui/react@^1.4.1"
  ],
  "registryDependencies": [
    "button",
    "scroll-area",
    "utils"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/ui/sheet.tsx",
      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { isValidElement } from \"react\"\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\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\nimport { IconPlaceholder } from \"@/components/icon-placeholder\"\n\nexport const Sheet: typeof SheetPrimitive.Root = SheetPrimitive.Root\n\nexport const SheetPortal: typeof SheetPrimitive.Portal = SheetPrimitive.Portal\n\nexport function SheetTrigger({\n  asChild,\n  children,\n  render,\n  ...props\n}: SheetPrimitive.Trigger.Props & {\n  asChild?: boolean\n}): React.ReactElement {\n  return (\n    <SheetPrimitive.Trigger\n      data-slot=\"sheet-trigger\"\n      render={\n        render ??\n        (asChild && isValidElement(children)\n          ? (children as React.ReactElement<Record<string, unknown>>)\n          : undefined)\n      }\n      {...props}\n    >\n      {asChild && isValidElement(children) ? undefined : children}\n    </SheetPrimitive.Trigger>\n  )\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        \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\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      <SheetBackdrop />\n      <SheetViewport side={side} variant={variant}>\n        <SheetPrimitive.Popup\n          className={cn(\n            \"relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover text-popover-foreground shadow-lg/5 transition-[opacity,translate] duration-200 ease-in-out will-change-transform not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 max-sm:before:hidden dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            side === \"bottom\" &&\n              \"row-start-2 border-t data-ending-style:translate-y-8 data-starting-style:translate-y-8\",\n            side === \"top\" &&\n              \"border-b data-ending-style:-translate-y-8 data-starting-style:-translate-y-8\",\n            side === \"left\" &&\n              \"w-[calc(100%-(--spacing(12)))] max-w-md border-e data-ending-style:-translate-x-8 data-starting-style:-translate-x-8\",\n            side === \"right\" &&\n              \"col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s data-ending-style:translate-x-8 data-starting-style:translate-x-8\",\n            variant === \"inset\" &&\n              \"before:hidden sm:rounded-2xl sm:border sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=sheet-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n            className\n          )}\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              <IconPlaceholder\n                lucide=\"X\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n            </SheetPrimitive.Close>\n          )}\n        </SheetPrimitive.Popup>\n      </SheetViewport>\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        \"pt-4 pb-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pt-3\",\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 text-xl leading-none font-semibold\",\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-sm text-muted-foreground\", 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-footer]:not(.border-t))]:pb-1 in-[[data-slot=sheet-popup]:has([data-slot=sheet-header])]:pt-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",
      "type": "registry:ui",
      "target": "@ui/sheet.tsx"
    }
  ],
  "type": "registry:ui"
}