{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drawer",
  "title": "Drawer",
  "description": "Drawer from the Get IT Done design system.",
  "dependencies": [
    "vaul@^1.1.2"
  ],
  "registryDependencies": [
    "https://zero-design.itdone.de/r/labels-context.json",
    "https://zero-design.itdone.de/r/modal-inert.json",
    "https://zero-design.itdone.de/r/return-focus.json",
    "https://zero-design.itdone.de/r/sticky-inset.json",
    "https://zero-design.itdone.de/r/utils.json",
    "https://zero-design.itdone.de/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/drawer.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Drawer as DrawerPrimitive } from 'vaul';\n\nimport { OpenerCapture, useReturnFocusFallback } from '@/lib/return-focus';\nimport { MODAL_OVERLAY_ATTRIBUTE, useModalInertRef } from '@/lib/modal-inert';\nimport { INSET_SCOPE_ATTRIBUTE, scrollInsetClasses, useStickyInset } from '@/lib/sticky-inset';\nimport { cn } from '@/lib/utils';\nimport { usePreset } from '@/components/ui/labels-context';\n\n// Remembers the modal flag so DrawerContent can make the page behind inert only for modal drawers.\nconst DrawerModalContext = React.createContext(true);\n\nconst Drawer = ({ shouldScaleBackground = true, modal = true, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (\n  <DrawerModalContext.Provider value={modal}>\n    <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} modal={modal} {...props} />\n  </DrawerModalContext.Provider>\n);\nDrawer.displayName = 'Drawer';\n\nconst DrawerTrigger = DrawerPrimitive.Trigger;\n\nconst DrawerPortal = DrawerPrimitive.Portal;\n\nconst DrawerClose = DrawerPrimitive.Close;\n\nconst DrawerOverlay = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DrawerPrimitive.Overlay ref={ref} {...{ [MODAL_OVERLAY_ATTRIBUTE]: '' }} className={cn('fixed inset-0 z-sheet bg-overlay', className)} {...props} />\n));\nDrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;\n\nconst DrawerContent = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>\n>(({ className, children, onCloseAutoFocus, ...props }, ref) => {\n  const zero = usePreset() === 'zero';\n  const returnFocus = useReturnFocusFallback(onCloseAutoFocus);\n  // A modal drawer makes everything outside its portal inert while it is open, see lib/modal-inert.\n  const inertRef = useModalInertRef<HTMLDivElement>(React.useContext(DrawerModalContext));\n  const setRefs = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      inertRef(node);\n      if (typeof ref === 'function') ref(node);\n      else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n    },\n    [inertRef, ref],\n  );\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        ref={setRefs}\n        {...{ [INSET_SCOPE_ATTRIBUTE]: '' }}\n        className={cn(\n          scrollInsetClasses,\n          'fixed inset-x-0 bottom-0 z-sheet mt-24 flex h-auto flex-col rounded-t-dialog border border-solid bg-background',\n          // Zero: default border role and the raised elevation, ui type role for the body.\n          zero ? 'typography-ui border-border-default shadow-elevation-raised' : 'border-hairline shadow-dialog',\n          className,\n        )}\n        onCloseAutoFocus={returnFocus.onCloseAutoFocus}\n        {...props}\n      >\n        <OpenerCapture onCapture={returnFocus.remember} />\n        <div className=\"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n});\nDrawerContent.displayName = 'DrawerContent';\n\nconst DrawerHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (\n  <div ref={useStickyInset<HTMLDivElement>('top', ref)} className={cn('grid gap-[6px] p-4 text-center sm:text-left', className)} {...props} />\n));\nDrawerHeader.displayName = 'DrawerHeader';\n\nconst DrawerFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (\n  <div ref={useStickyInset<HTMLDivElement>('bottom', ref, { docked: true })} className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />\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  const zero = usePreset() === 'zero';\n  return (\n    <DrawerPrimitive.Title\n      ref={ref}\n      className={cn(zero ? 'typography-ui-semibold' : 'text-base font-semibold leading-none tracking-[-0.01em]', className)}\n      {...props}\n    />\n  );\n});\nDrawerTitle.displayName = DrawerPrimitive.Title.displayName;\n\nconst DrawerDescription = React.forwardRef<\n  React.ElementRef<typeof DrawerPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(({ className, ...props }, ref) => {\n  const zero = usePreset() === 'zero';\n  return (\n    <DrawerPrimitive.Description\n      ref={ref}\n      className={cn(zero ? 'typography-ui-relaxed text-text-subtle' : 'text-sm text-muted-foreground', className)}\n      {...props}\n    />\n  );\n});\nDrawerDescription.displayName = DrawerPrimitive.Description.displayName;\n\nexport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerOverlay,\n  DrawerPortal,\n  DrawerTitle,\n  DrawerTrigger,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}