{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drawer",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": ["vaul", "lucide-react"],
  "devDependencies": [],
  "files": [
    {
      "path": "drawer.tsx",
      "content": "\"use client\";\n\nimport { X } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Drawer as DrawerPrimitive } from \"vaul\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst controlCornerClassName =\n  \"rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]\";\n\nconst surfaceCornerClassName =\n  \"rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[12px]\";\n\nconst drawerThemeClassName =\n  \"[--drw-surface:var(--popover,#ffffff)] [--drw-foreground:var(--popover-foreground,#111111)] [--drw-border:var(--border,#e3e7ec)] [--drw-ring:var(--ring,rgba(17,17,17,0.16))] [--drw-muted-foreground:var(--muted-foreground,#6d7480)] [--drw-muted:var(--muted,#f5f7fa)] [--drw-destructive:var(--destructive,#dc2626)] [--drw-destructive-foreground:var(--destructive-foreground,#ffffff)] [--color-accent:var(--drw-muted)] [--color-accent-foreground:var(--drw-foreground)] dark:[--drw-surface:var(--popover,#0a0a0a)] dark:[--drw-foreground:var(--popover-foreground,#f6f3ec)] dark:[--drw-border:var(--border,#2b2a25)] dark:[--drw-ring:var(--ring,rgba(246,243,236,0.18))] dark:[--drw-muted-foreground:var(--muted-foreground,#9a958a)] dark:[--drw-muted:var(--muted,#1a1a18)] dark:[--drw-destructive:var(--destructive,#f87171)] dark:[--drw-destructive-foreground:var(--destructive-foreground,#111111)]\";\n\nconst drawerContentSizeClassNames = {\n  sm: cn(\n    \"data-[vaul-drawer-direction=bottom]:max-h-[60vh]\",\n    \"data-[vaul-drawer-direction=top]:max-h-[60vh]\",\n    \"data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n    \"data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm\"\n  ),\n  default: cn(\n    \"data-[vaul-drawer-direction=bottom]:max-h-[min(80svh,calc(100svh-env(safe-area-inset-top,0px)-env(safe-area-inset-bottom,0px)-2rem))]\",\n    \"data-[vaul-drawer-direction=top]:max-h-[min(80svh,calc(100svh-env(safe-area-inset-top,0px)-env(safe-area-inset-bottom,0px)-2rem))]\",\n    \"data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-md\",\n    \"data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-md\"\n  ),\n  lg: cn(\n    \"data-[vaul-drawer-direction=bottom]:max-h-[min(90svh,calc(100svh-env(safe-area-inset-top,0px)-env(safe-area-inset-bottom,0px)-2rem))]\",\n    \"data-[vaul-drawer-direction=top]:max-h-[min(90svh,calc(100svh-env(safe-area-inset-top,0px)-env(safe-area-inset-bottom,0px)-2rem))]\",\n    \"data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-lg\",\n    \"data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-lg\"\n  ),\n  full: cn(\n    \"data-[vaul-drawer-direction=bottom]:max-h-[min(90svh,calc(100svh-env(safe-area-inset-top,0px)-env(safe-area-inset-bottom,0px)-2rem))]\",\n    \"data-[vaul-drawer-direction=top]:max-h-[min(90svh,calc(100svh-env(safe-area-inset-top,0px)-env(safe-area-inset-bottom,0px)-2rem))]\",\n    \"data-[vaul-drawer-direction=right]:w-full data-[vaul-drawer-direction=right]:max-w-none data-[vaul-drawer-direction=right]:sm:max-w-none\",\n    \"data-[vaul-drawer-direction=left]:w-full data-[vaul-drawer-direction=left]:max-w-none data-[vaul-drawer-direction=left]:sm:max-w-none\"\n  ),\n} as const;\n\ntype DrawerContentSize = keyof typeof drawerContentSizeClassNames;\n\nconst drawerCloseClassName = cn(\n  controlCornerClassName,\n  \"absolute top-4 right-4 z-10 grid size-9 shrink-0 place-items-center text-[color:var(--drw-muted-foreground)] transition-colors hover:bg-accent/60 hover:text-[color:var(--drw-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_oklch,var(--drw-ring),transparent_50%)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--drw-surface)] active:bg-accent/80 [&_svg]:block [&_svg]:size-4 [&_svg]:shrink-0\"\n);\n\nconst drawerTriggerClassName = cn(\n  controlCornerClassName,\n  \"inline-flex min-h-11 items-center justify-center bg-[color:var(--drw-foreground)] px-4 py-2.5 font-medium text-[14px] text-[color:var(--drw-surface)] tracking-[-0.01em] transition-[transform,background-color] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] hover:-translate-y-px hover:bg-[color:color-mix(in_oklch,var(--drw-foreground),transparent_10%)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_oklch,var(--drw-ring),transparent_50%)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--drw-surface)] active:translate-y-0 active:bg-[color:color-mix(in_oklch,var(--drw-foreground),transparent_20%)] disabled:pointer-events-none disabled:opacity-50\"\n);\n\nconst drawerTriggerSmClassName = cn(\n  controlCornerClassName,\n  \"inline-flex h-8 min-h-8 translate-y-px items-center bg-[color:var(--drw-foreground)] px-3 py-0 font-medium text-[13px] text-[color:var(--drw-surface)] tracking-[-0.01em] transition-[transform,background-color] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] hover:-translate-y-px hover:bg-[color:color-mix(in_oklch,var(--drw-foreground),transparent_10%)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_oklch,var(--drw-ring),transparent_50%)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--drw-surface)] active:translate-y-0 active:bg-[color:color-mix(in_oklch,var(--drw-foreground),transparent_20%)] disabled:pointer-events-none disabled:opacity-50\"\n);\n\nconst drawerCancelClassName = cn(\n  controlCornerClassName,\n  \"inline-flex min-h-11 items-center justify-center bg-[color:color-mix(in_oklch,var(--drw-muted),transparent_45%)] px-4 py-2.5 font-medium text-[14px] text-[color:var(--drw-muted-foreground)] tracking-[-0.01em] transition-colors duration-150 hover:bg-accent/60 hover:text-[color:var(--drw-foreground)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_oklch,var(--drw-ring),transparent_50%)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--drw-surface)] active:bg-accent/80 disabled:pointer-events-none disabled:opacity-50\"\n);\n\nconst drawerActionClassName = cn(\n  controlCornerClassName,\n  \"inline-flex min-h-11 items-center justify-center bg-[color:var(--drw-foreground)] px-4 py-2.5 font-medium text-[14px] text-[color:var(--drw-surface)] tracking-[-0.01em] transition-[transform,background-color] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] hover:-translate-y-px hover:bg-[color:color-mix(in_oklch,var(--drw-foreground),transparent_10%)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_oklch,var(--drw-ring),transparent_50%)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--drw-surface)] active:translate-y-0 active:bg-[color:color-mix(in_oklch,var(--drw-foreground),transparent_20%)] disabled:pointer-events-none disabled:opacity-50\"\n);\n\nconst drawerDestructiveActionClassName = cn(\n  controlCornerClassName,\n  \"inline-flex min-h-11 items-center justify-center bg-[color:var(--drw-destructive)] px-4 py-2.5 font-medium text-[14px] text-[color:var(--drw-destructive-foreground)] tracking-[-0.01em] transition-[transform,filter] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] hover:-translate-y-px hover:brightness-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_oklch,var(--drw-destructive),transparent_30%)] focus-visible:ring-offset-2 active:translate-y-0 active:brightness-90 disabled:pointer-events-none disabled:opacity-50\"\n);\n\nconst drawerContentBaseClassName = cn(\n  surfaceCornerClassName,\n  \"group/drawer-content fixed z-50 flex h-auto min-h-0 flex-col overflow-hidden border border-[color:color-mix(in_oklch,var(--drw-border),transparent_25%)] bg-[color:color-mix(in_oklch,var(--drw-surface),transparent_4%)] text-[14px] text-[color:var(--drw-foreground)] shadow-[0_32px_120px_rgba(15,23,42,0.18)] outline-none supports-[backdrop-filter]:bg-[color:color-mix(in_oklch,var(--drw-surface),transparent_8%)]\",\n  \"[--initial-transform:calc(100%+16px)] [animation-duration:520ms] [animation-timing-function:cubic-bezier(0.32,0.72,0,1)] [transition-timing-function:cubic-bezier(0.32,0.72,0,1)] motion-reduce:animate-none motion-reduce:transition-none data-[state=closed]:[animation-duration:320ms]\"\n);\n\nconst drawerDirectionClassNames = cn(\n  \"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=bottom]:pb-[max(1rem,env(safe-area-inset-bottom,0px))]\",\n  \"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=top]:pt-[max(1rem,env(safe-area-inset-top,0px))]\",\n  \"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:h-full data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:pr-[max(1rem,env(safe-area-inset-right,0px))]\",\n  \"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:h-full data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:pl-[max(1rem,env(safe-area-inset-left,0px))]\"\n);\n\ntype DrawerRootProps = React.ComponentProps<typeof DrawerPrimitive.Root>;\ntype DrawerNestedProps = React.ComponentProps<\n  typeof DrawerPrimitive.NestedRoot\n>;\n\nfunction Drawer({ ...props }: DrawerRootProps) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />;\n}\n\nfunction DrawerNested({ ...props }: DrawerNestedProps) {\n  return <DrawerPrimitive.NestedRoot data-slot=\"drawer-nested\" {...props} />;\n}\n\nconst DrawerTrigger = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Trigger>\n>(({ asChild, className, ...props }, ref) => (\n  <DrawerPrimitive.Trigger\n    asChild={asChild}\n    className={cn(!asChild && drawerTriggerClassName, className)}\n    data-slot=\"drawer-trigger\"\n    ref={ref}\n    {...props}\n  />\n));\nDrawerTrigger.displayName = \"DrawerTrigger\";\n\nfunction DrawerPortal(\n  props: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Portal>\n) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\n\nconst DrawerClose = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Close>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Close>\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Close\n    className={className}\n    data-slot=\"drawer-close\"\n    ref={ref}\n    {...props}\n  />\n));\nDrawerClose.displayName = \"DrawerClose\";\n\nconst DrawerOverlay = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Overlay\n    className={cn(\n      \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/45 data-[state=closed]:animate-out data-[state=open]:animate-in supports-backdrop-filter:backdrop-blur-sm motion-reduce:animate-none dark:bg-black/55\",\n      \"[animation-duration:420ms] [animation-timing-function:cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:[animation-duration:260ms]\",\n      className\n    )}\n    data-slot=\"drawer-overlay\"\n    ref={ref}\n    {...props}\n  />\n));\nDrawerOverlay.displayName = \"DrawerOverlay\";\n\ntype DrawerContentProps = React.ComponentPropsWithoutRef<\n  typeof DrawerPrimitive.Content\n> & {\n  overlayClassName?: string;\n  showCloseButton?: boolean;\n  showOverlay?: boolean;\n  size?: DrawerContentSize;\n};\n\nconst DrawerContent = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Content>,\n  DrawerContentProps\n>(\n  (\n    {\n      children,\n      className,\n      overlayClassName,\n      showCloseButton = false,\n      showOverlay = true,\n      size = \"default\",\n      ...props\n    },\n    ref\n  ) => (\n    <DrawerPortal>\n      {showOverlay ? <DrawerOverlay className={overlayClassName} /> : null}\n      <DrawerPrimitive.Content\n        className={cn(\n          drawerThemeClassName,\n          drawerContentBaseClassName,\n          drawerDirectionClassNames,\n          drawerContentSizeClassNames[size],\n          className\n        )}\n        data-slot=\"drawer-content\"\n        ref={ref}\n        {...props}\n      >\n        {children}\n        {showCloseButton ? (\n          <DrawerClose className={drawerCloseClassName} type=\"button\">\n            <X aria-hidden=\"true\" className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </DrawerClose>\n        ) : null}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n);\nDrawerContent.displayName = \"DrawerContent\";\n\nconst DrawerHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      \"flex shrink-0 flex-col gap-2 p-4 pr-10 text-left group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:group-data-[vaul-drawer-direction=bottom]/drawer-content:text-left md:group-data-[vaul-drawer-direction=top]/drawer-content:text-left\",\n      className\n    )}\n    data-slot=\"drawer-header\"\n    ref={ref}\n    {...props}\n  />\n));\nDrawerHeader.displayName = \"DrawerHeader\";\n\nconst DrawerBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      \"min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 [-webkit-overflow-scrolling:touch]\",\n      className\n    )}\n    data-slot=\"drawer-body\"\n    data-vaul-no-drag=\"\"\n    ref={ref}\n    {...props}\n  />\n));\nDrawerBody.displayName = \"DrawerBody\";\n\nconst DrawerMedia = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      \"grid size-11 shrink-0 place-items-center rounded-full bg-[color:color-mix(in_oklch,var(--drw-foreground),transparent_90%)] text-[color:var(--drw-foreground)] [&_svg]:block [&_svg]:size-5 [&_svg]:shrink-0\",\n      className\n    )}\n    data-slot=\"drawer-media\"\n    ref={ref}\n    {...props}\n  />\n));\nDrawerMedia.displayName = \"DrawerMedia\";\n\nconst DrawerFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      \"mt-auto flex shrink-0 flex-col-reverse gap-2 border-[color:color-mix(in_oklch,var(--drw-border),transparent_25%)] border-t p-4 sm:flex-row sm:justify-end\",\n      className\n    )}\n    data-slot=\"drawer-footer\"\n    ref={ref}\n    {...props}\n  />\n));\nDrawerFooter.displayName = \"DrawerFooter\";\n\nconst DrawerTitle = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Title\n    className={cn(\n      \"font-semibold text-[1.15rem] text-[color:var(--drw-foreground)] leading-tight tracking-[-0.03em]\",\n      className\n    )}\n    data-slot=\"drawer-title\"\n    ref={ref}\n    {...props}\n  />\n));\nDrawerTitle.displayName = \"DrawerTitle\";\n\nconst DrawerDescription = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Description\n    className={cn(\n      \"mx-auto max-w-[46ch] text-[14px] text-[color:var(--drw-muted-foreground)] leading-6 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:group-data-[vaul-drawer-direction=bottom]/drawer-content:mx-0 md:group-data-[vaul-drawer-direction=top]/drawer-content:mx-0 md:group-data-[vaul-drawer-direction=bottom]/drawer-content:text-left md:group-data-[vaul-drawer-direction=top]/drawer-content:text-left\",\n      className\n    )}\n    data-slot=\"drawer-description\"\n    ref={ref}\n    {...props}\n  />\n));\nDrawerDescription.displayName = \"DrawerDescription\";\n\ntype DrawerButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  asChild?: boolean;\n  closeOnClick?: boolean;\n};\n\ntype DrawerActionVariant = \"default\" | \"destructive\";\n\ninterface DrawerActionProps extends DrawerButtonProps {\n  variant?: DrawerActionVariant;\n}\n\nfunction handleDrawerButtonClick(\n  event: React.MouseEvent<HTMLButtonElement>,\n  closeOnClick: boolean,\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n) {\n  onClick?.(event);\n\n  if (!closeOnClick) {\n    event.preventDefault();\n  }\n}\n\nconst DrawerCancel = React.forwardRef<HTMLElement, DrawerButtonProps>(\n  (\n    {\n      asChild,\n      children,\n      className,\n      closeOnClick = true,\n      onClick,\n      type = \"button\",\n      ...props\n    },\n    ref\n  ) => (\n    <DrawerPrimitive.Close\n      {...props}\n      asChild={asChild}\n      className={asChild ? className : cn(drawerCancelClassName, className)}\n      onClick={(event) => handleDrawerButtonClick(event, closeOnClick, onClick)}\n      ref={ref as React.Ref<HTMLButtonElement>}\n      type={asChild ? undefined : type}\n    >\n      {children}\n    </DrawerPrimitive.Close>\n  )\n);\nDrawerCancel.displayName = \"DrawerCancel\";\n\nconst DrawerAction = React.forwardRef<HTMLElement, DrawerActionProps>(\n  (\n    {\n      asChild,\n      children,\n      className,\n      closeOnClick = true,\n      onClick,\n      type = \"button\",\n      variant = \"default\",\n      ...props\n    },\n    ref\n  ) => {\n    const actionClassName =\n      variant === \"destructive\"\n        ? drawerDestructiveActionClassName\n        : drawerActionClassName;\n\n    return (\n      <DrawerPrimitive.Close\n        {...props}\n        asChild={asChild}\n        className={asChild ? className : cn(actionClassName, className)}\n        onClick={(event) =>\n          handleDrawerButtonClick(event, closeOnClick, onClick)\n        }\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type={asChild ? undefined : type}\n      >\n        {children}\n      </DrawerPrimitive.Close>\n    );\n  }\n);\nDrawerAction.displayName = \"DrawerAction\";\n\nexport {\n  Drawer,\n  DrawerNested,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerBody,\n  DrawerMedia,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n  DrawerAction,\n  DrawerCancel,\n  drawerActionClassName,\n  drawerCancelClassName,\n  drawerDestructiveActionClassName,\n  drawerThemeClassName,\n  drawerTriggerClassName,\n  drawerTriggerSmClassName,\n};\n\nexport type { DrawerContentSize, DrawerRootProps };\n",
      "type": "registry:ui"
    }
  ],
  "title": "Drawer",
  "description": "Compound Vaul drawer with direction-aware layout, drag gestures, snap points, size variants, styled footer actions, optional close button, and safe-area-aware panel geometry."
}