{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "drawer",
"title": "Drawer",
"description": "A swipeable panel that slides in from an edge of the screen, built on Base UI.",
"dependencies": [
"@base-ui/react",
"lucide-react"
],
"registryDependencies": [
"utils",
"https://ui.persian-labs.ir/r/scroll-area.json"
],
"files": [
{
"path": "registry/base/ui/drawer.tsx",
"content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { CheckIcon, ChevronRightIcon, XIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\nimport { cn } from \"@/lib/utils\"\n\nconst DrawerCreateHandle: typeof DrawerPrimitive.createHandle =\n DrawerPrimitive.createHandle\n\ntype DrawerPosition = \"right\" | \"left\" | \"top\" | \"bottom\" | \"start\" | \"end\"\ntype PhysicalDrawerPosition = \"right\" | \"left\" | \"top\" | \"bottom\"\n\n/**\n * DrawerPopup renders through a Portal, so it doesn't inherit `dir` from a\n * nearby wrapper (only from document.documentElement). DrawerTrigger\n * measures the ambient direction where it's actually rendered and pushes it\n * here so a logical position=\"start\"/\"end\" resolves to the correct physical\n * edge, and so the portaled content picks up the right text direction.\n */\nconst DrawerDirContext = React.createContext<{\n dir: \"ltr\" | \"rtl\"\n setDir: (dir: \"ltr\" | \"rtl\") => void\n}>({ dir: \"ltr\", setDir: () => {} })\n\nconst DrawerPositionContext = React.createContext<{ position: DrawerPosition }>(\n { position: \"bottom\" }\n)\nconst DrawerPopupVariantContext = React.createContext<\n \"default\" | \"straight\" | \"inset\"\n>(\"default\")\n\nfunction resolvePosition(\n position: DrawerPosition,\n dir: \"ltr\" | \"rtl\"\n): PhysicalDrawerPosition {\n if (position === \"start\") return dir === \"rtl\" ? \"right\" : \"left\"\n if (position === \"end\") return dir === \"rtl\" ? \"left\" : \"right\"\n return position\n}\n\nfunction useResolvedDrawerPosition(\n positionProp?: DrawerPosition\n): PhysicalDrawerPosition {\n const { position: contextPosition } = React.useContext(DrawerPositionContext)\n const { dir } = React.useContext(DrawerDirContext)\n return resolvePosition(positionProp ?? contextPosition, dir)\n}\n\nconst directionMap: Record<\n PhysicalDrawerPosition,\n DrawerPrimitive.Root.Props[\"swipeDirection\"]\n> = {\n bottom: \"down\",\n left: \"left\",\n right: \"right\",\n top: \"up\",\n}\n\nfunction now(): number {\n return typeof performance !== \"undefined\" ? performance.now() : Date.now()\n}\n\nfunction Drawer({\n swipeDirection,\n position = \"bottom\",\n onOpenChange,\n open,\n ...props\n}: DrawerPrimitive.Root.Props & {\n position?: DrawerPosition\n}) {\n const [dir, setDir] = React.useState<\"ltr\" | \"rtl\">(\"ltr\")\n const dirContextValue = React.useMemo(() => ({ dir, setDir }), [dir])\n const positionContextValue = React.useMemo(() => ({ position }), [position])\n const resolvedPosition = resolvePosition(position, dir)\n\n // Guard against a spurious \"open then instantly dismiss\" that appears as the\n // drawer flashing with no animation. In re-render-heavy apps, the\n // interaction that opens the drawer can produce a follow-up click that Base\n // UI catches as an outside-press and closes it in the same tick. Detected\n // by timing: a real outside-press happens well after opening, so any\n // outside-press within a short window of opening is treated as the bogus\n // self-close and cancelled. Later outside-presses still dismiss normally.\n const openedAtRef = React.useRef(0)\n React.useEffect(() => {\n if (open) openedAtRef.current = now()\n }, [open])\n\n return (\n \n \n {\n if (open) {\n openedAtRef.current = now()\n } else if (details?.reason === \"outside-press\") {\n if (now() - openedAtRef.current < 200) {\n details.cancel?.()\n return\n }\n }\n onOpenChange?.(open, details)\n }}\n {...props}\n />\n \n \n )\n}\n\nconst DrawerPortal = DrawerPrimitive.Portal\n\nfunction DrawerTrigger({ className, ...props }: DrawerPrimitive.Trigger.Props) {\n const ref = React.useRef(null)\n const { setDir } = React.useContext(DrawerDirContext)\n\n React.useEffect(() => {\n function update() {\n if (!ref.current) return\n setDir(getComputedStyle(ref.current).direction === \"rtl\" ? \"rtl\" : \"ltr\")\n }\n\n update()\n\n const observer = new MutationObserver(update)\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: [\"dir\"],\n subtree: true,\n })\n\n return () => observer.disconnect()\n }, [setDir])\n\n return (\n \n )\n}\n\nfunction DrawerClose(props: DrawerPrimitive.Close.Props) {\n return \n}\n\nfunction DrawerSwipeArea({\n className,\n position: positionProp,\n ...props\n}: DrawerPrimitive.SwipeArea.Props & {\n position?: DrawerPosition\n}) {\n const position = useResolvedDrawerPosition(positionProp)\n\n return (\n \n )\n}\n\nfunction DrawerBackdrop({\n className,\n ...props\n}: DrawerPrimitive.Backdrop.Props) {\n return (\n \n )\n}\n\nfunction DrawerViewport({\n className,\n position: positionProp,\n variant = \"default\",\n ...props\n}: DrawerPrimitive.Viewport.Props & {\n position?: DrawerPosition\n variant?: \"default\" | \"straight\" | \"inset\"\n}) {\n const { dir } = React.useContext(DrawerDirContext)\n const position = useResolvedDrawerPosition(positionProp)\n\n return (\n \n )\n}\n\nfunction DrawerPopup({\n className,\n children,\n position: positionProp,\n variant = \"default\",\n showCloseButton = false,\n showBar = false,\n portalProps,\n ...props\n}: DrawerPrimitive.Popup.Props & {\n position?: DrawerPosition\n variant?: \"default\" | \"straight\" | \"inset\"\n showCloseButton?: boolean\n showBar?: boolean\n portalProps?: DrawerPrimitive.Portal.Props\n}) {\n const position = useResolvedDrawerPosition(positionProp)\n\n return (\n \n \n \n \n \n {children}\n {showCloseButton && (\n }\n >\n \n \n )}\n {showBar && }\n \n \n \n \n )\n}\n\nfunction DrawerHeader({\n className,\n allowSelection = false,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n allowSelection?: boolean\n}) {\n const defaultProps = {\n className: cn(\n \"flex flex-col gap-2 p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pb-3 max-sm:pb-4\",\n !allowSelection && \"cursor-default\",\n className\n ),\n \"data-slot\": \"drawer-header\",\n }\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render: allowSelection ? : render,\n })\n}\n\nfunction DrawerFooter({\n className,\n variant = \"default\",\n allowSelection = true,\n position: positionProp,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n variant?: \"default\" | \"bare\"\n allowSelection?: boolean\n position?: DrawerPosition\n}) {\n const position = useResolvedDrawerPosition(positionProp)\n const popupVariant = React.useContext(DrawerPopupVariantContext)\n\n const defaultProps = {\n className: cn(\n \"flex flex-col-reverse gap-2 px-6 pb-(--safe-area-inset-bottom,0px) sm:flex-row sm:justify-end\",\n !allowSelection && \"cursor-default\",\n variant === \"default\" &&\n // The footer is always the last item in the popup's column, so\n // dragging/overscrolling exposes the area past its bottom edge.\n // That area is otherwise filled by DrawerPopup's own bleed\n // (bg-popover), which doesn't match the footer's muted background —\n // paint a matching bleed here so the footer's color and border\n // appear to continue instead of cutting to a different shade.\n //\n // after:z-10 is load-bearing: DrawerPopup has its own after: bleed\n // (bg-popover) covering the same region, and since that bleed is\n // *generated content of the popup itself* — which has a transform\n // and so establishes its own stacking context — it paints as if it\n // were the popup's last child, i.e. after and on top of this\n // footer (an earlier child) and this pseudo-element, even though\n // this is declared later in the DOM. Without an explicit z-index\n // this fix is invisible: the popup's own solid bleed just paints\n // over it.\n \"relative border-t border-border bg-muted/72 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(4))] after:pointer-events-none after:absolute after:z-10 after:bg-muted/72\",\n // Bottom and top drawers leave space below the footer, so their bleed\n // continues downward.\n variant === \"default\" &&\n position !== \"right\" &&\n position !== \"left\" &&\n \"after:inset-x-0 after:top-full after:h-[200px]\",\n // Side drawers stretch sideways. Continue the footer into the gap on\n // the outer edge, including its top border, so the muted footer color\n // does not cut back to the popup color while dragging. Offset by the\n // footer border so the bleed's border-box matches its rendered height\n // as the footer content changes.\n variant === \"default\" &&\n position === \"right\" &&\n popupVariant === \"default\" &&\n \"after:-top-px after:bottom-0 after:left-full after:w-[200px] after:border-t after:border-border\",\n variant === \"default\" &&\n position === \"left\" &&\n popupVariant === \"default\" &&\n \"after:-top-px after:right-full after:bottom-0 after:w-[200px] after:border-t after:border-border\",\n variant === \"bare\" &&\n \"pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(6))] in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pt-3\",\n // DrawerPopup reserves space for the drag bar via padding on itself\n // (e.g. pr-2 for a left drawer), which insets every child equally —\n // including the footer's own background. Cancel that inset here with\n // a matching negative margin, only when a bar sibling is actually\n // present, so the footer's background still reaches the handle edge.\n position === \"left\" && \"has-[~[data-slot=drawer-bar]]:-mr-2\",\n position === \"right\" && \"has-[~[data-slot=drawer-bar]]:-ml-2\",\n position === \"top\" && \"has-[~[data-slot=drawer-bar]]:-mb-2\",\n className\n ),\n \"data-slot\": \"drawer-footer\",\n }\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render: allowSelection ? : render,\n })\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {\n return (\n \n )\n}\n\nfunction DrawerDescription({\n className,\n ...props\n}: DrawerPrimitive.Description.Props) {\n return (\n \n )\n}\n\nfunction DrawerPanel({\n className,\n scrollable = true,\n allowSelection = true,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n scrollable?: boolean\n allowSelection?: boolean\n}) {\n const defaultProps = {\n className: cn(\n \"p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-footer]:not(.border-t))]:pb-1 in-[[data-slot=drawer-popup]:has([data-slot=drawer-header])]:pt-1\",\n !allowSelection && \"cursor-default\",\n className\n ),\n \"data-slot\": \"drawer-panel\",\n }\n\n const content = useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render: allowSelection ? : render,\n })\n\n if (scrollable) {\n // ScrollArea's own root has no intrinsic height — as a flex item inside\n // DrawerPopup's column it needs min-h-0 too, not just flex-1, or it\n // refuses to shrink below its content's natural height (the default\n // `min-height: auto` on flex items) and the popup grows to fit\n // everything instead of scrolling internally.\n return (\n {content}\n )\n }\n\n return content\n}\n\nfunction DrawerBar({\n className,\n position: positionProp,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n position?: DrawerPosition\n}) {\n const position = useResolvedDrawerPosition(positionProp)\n const horizontal = position === \"left\" || position === \"right\"\n const defaultProps = {\n \"aria-hidden\": true as const,\n className: cn(\n \"absolute flex touch-none items-center justify-center p-3 before:rounded-full before:bg-input\",\n horizontal\n ? \"inset-y-0 before:h-12 before:w-1\"\n : \"inset-x-0 before:h-1 before:w-12\",\n position === \"top\" && \"bottom-0\",\n position === \"bottom\" && \"top-0\",\n position === \"left\" && \"right-0\",\n position === \"right\" && \"left-0\",\n className\n ),\n \"data-slot\": \"drawer-bar\",\n }\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n })\n}\n\nconst DrawerContent = DrawerPrimitive.Content\n\nfunction DrawerMenu({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"nav\">) {\n const defaultProps = {\n className: cn(\"-m-2 flex flex-col\", className),\n \"data-slot\": \"drawer-menu\",\n }\n\n return useRender({\n defaultTagName: \"nav\",\n props: mergeProps<\"nav\">(defaultProps, props),\n render,\n })\n}\n\nfunction DrawerMenuItem({\n className,\n variant = \"default\",\n render,\n disabled,\n ...props\n}: useRender.ComponentProps<\"button\"> & {\n variant?: \"default\" | \"destructive\"\n}) {\n const defaultProps = {\n className: cn(\n \"flex min-h-9 w-full cursor-default items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none select-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[variant=destructive]:text-destructive sm:min-h-8 sm:text-sm [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4\",\n className\n ),\n \"data-slot\": \"drawer-menu-item\",\n \"data-variant\": variant,\n disabled,\n type: \"button\" as const,\n }\n\n return useRender({\n defaultTagName: \"button\",\n props: mergeProps<\"button\">(defaultProps, props),\n render,\n })\n}\n\nfunction DrawerMenuSeparator({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">) {\n const defaultProps = {\n className: cn(\"mx-2 my-1 h-px bg-border\", className),\n \"data-slot\": \"drawer-menu-separator\",\n }\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n })\n}\n\nfunction DrawerMenuGroup({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">) {\n const defaultProps = {\n className: cn(\"flex flex-col\", className),\n \"data-slot\": \"drawer-menu-group\",\n }\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n })\n}\n\nfunction DrawerMenuGroupLabel({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">) {\n const defaultProps = {\n className: cn(\n \"px-2 py-1.5 text-xs font-medium text-muted-foreground\",\n className\n ),\n \"data-slot\": \"drawer-menu-group-label\",\n }\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n })\n}\n\nfunction DrawerMenuTrigger({\n className,\n children,\n ...props\n}: DrawerPrimitive.Trigger.Props) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction DrawerMenuCheckboxItem({\n className,\n children,\n checked,\n defaultChecked,\n onCheckedChange,\n variant = \"default\",\n disabled,\n render,\n ...props\n}: CheckboxPrimitive.Root.Props & {\n variant?: \"default\" | \"switch\"\n render?: React.ReactElement\n}) {\n return (\n \n {variant === \"switch\" ? (\n <>\n {children}\n \n \n \n \n ) : (\n <>\n \n \n \n {children}\n \n )}\n \n )\n}\n\nfunction DrawerMenuRadioGroup({\n className,\n ...props\n}: RadioGroupPrimitive.Props) {\n return (\n \n )\n}\n\nfunction DrawerMenuRadioItem({\n className,\n children,\n value,\n disabled,\n render,\n ...props\n}: RadioPrimitive.Root.Props & {\n value: string\n render?: React.ReactElement\n}) {\n return (\n \n \n \n \n {children}\n \n )\n}\n\nexport {\n Drawer,\n DrawerBackdrop,\n DrawerBar,\n DrawerClose,\n DrawerContent,\n DrawerCreateHandle,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerMenu,\n DrawerMenuCheckboxItem,\n DrawerMenuGroup,\n DrawerMenuGroupLabel,\n DrawerMenuItem,\n DrawerMenuRadioGroup,\n DrawerMenuRadioItem,\n DrawerMenuSeparator,\n DrawerMenuTrigger,\n DrawerPanel,\n DrawerPopup,\n DrawerPortal,\n DrawerSwipeArea,\n DrawerTitle,\n DrawerTrigger,\n DrawerViewport,\n}\n",
"type": "registry:ui"
}
],
"type": "registry:ui"
}