{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "drawer",
"dependencies": [
"@base-ui/react"
],
"registryDependencies": [
"@coss/button",
"@coss/scroll-area"
],
"files": [
{
"path": "registry/default/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 { ChevronRightIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { createContext, useContext } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\ntype DrawerPosition = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nconst DrawerContext: React.Context<{ position: DrawerPosition }> =\n createContext<{ position: DrawerPosition }>({\n position: \"bottom\",\n });\n\nconst directionMap: Record<\n DrawerPosition,\n DrawerPrimitive.Root.Props[\"swipeDirection\"]\n> = {\n bottom: \"down\",\n left: \"left\",\n right: \"right\",\n top: \"up\",\n};\n\nexport const DrawerCreateHandle: typeof DrawerPrimitive.createHandle =\n DrawerPrimitive.createHandle;\n\nexport function Drawer({\n swipeDirection,\n position = \"bottom\",\n ...props\n}: DrawerPrimitive.Root.Props & {\n position?: DrawerPosition;\n}): React.ReactElement {\n return (\n \n \n \n );\n}\n\nexport const DrawerPortal: typeof DrawerPrimitive.Portal =\n DrawerPrimitive.Portal;\n\nexport function DrawerTrigger(\n props: DrawerPrimitive.Trigger.Props,\n): React.ReactElement {\n return ;\n}\n\nexport function DrawerClose(\n props: DrawerPrimitive.Close.Props,\n): React.ReactElement {\n return ;\n}\n\nexport function DrawerSwipeArea({\n className,\n position: positionProp,\n ...props\n}: DrawerPrimitive.SwipeArea.Props & {\n position?: DrawerPosition;\n}): React.ReactElement {\n const { position: contextPosition } = useContext(DrawerContext);\n const position = positionProp ?? contextPosition;\n\n return (\n \n );\n}\n\nexport function DrawerBackdrop({\n className,\n ...props\n}: DrawerPrimitive.Backdrop.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function DrawerViewport({\n className,\n position,\n variant = \"default\",\n ...props\n}: DrawerPrimitive.Viewport.Props & {\n position?: DrawerPosition;\n variant?: \"default\" | \"straight\" | \"inset\";\n}): React.ReactElement {\n return (\n \n );\n}\n\nexport function DrawerPopup({\n className,\n children,\n showCloseButton = false,\n position: positionProp,\n variant = \"default\",\n showBar = false,\n portalProps,\n ...props\n}: DrawerPrimitive.Popup.Props & {\n showCloseButton?: boolean;\n position?: DrawerPosition;\n variant?: \"default\" | \"straight\" | \"inset\";\n showBar?: boolean;\n portalProps?: DrawerPrimitive.Portal.Props;\n}): React.ReactElement {\n const { position: contextPosition } = useContext(DrawerContext);\n const position = positionProp ?? contextPosition;\n\n return (\n \n \n \n \n {children}\n {showCloseButton && (\n }\n >\n \n \n )}\n {showBar && }\n \n \n \n );\n}\n\nexport function DrawerHeader({\n className,\n allowSelection = false,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n allowSelection?: boolean;\n}): React.ReactElement {\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\nexport function DrawerFooter({\n className,\n variant = \"default\",\n allowSelection = true,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n variant?: \"default\" | \"bare\";\n allowSelection?: boolean;\n}): React.ReactElement {\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 \"border-t bg-muted/72 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(4))]\",\n variant === \"bare\" &&\n \"in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pt-3 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(6))]\",\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\nexport function DrawerTitle({\n className,\n ...props\n}: DrawerPrimitive.Title.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function DrawerDescription({\n className,\n ...props\n}: DrawerPrimitive.Description.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function DrawerPanel({\n className,\n scrollFade = true,\n scrollable = true,\n allowSelection = true,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n scrollFade?: boolean;\n scrollable?: boolean;\n allowSelection?: boolean;\n}): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-header])]:pt-1 in-[[data-slot=drawer-popup]:has([data-slot=drawer-footer]:not(.border-t))]:pb-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 return (\n \n {content}\n \n );\n }\n\n return content;\n}\n\nexport function DrawerBar({\n className,\n position: positionProp,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n position?: DrawerPosition;\n}): React.ReactElement {\n const { position: contextPosition } = useContext(DrawerContext);\n const position = positionProp ?? contextPosition;\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\nexport const DrawerContent: typeof DrawerPrimitive.Content =\n DrawerPrimitive.Content;\n\nexport function DrawerMenu({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"nav\">): React.ReactElement {\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\nexport function DrawerMenuItem({\n className,\n variant = \"default\",\n render,\n disabled,\n ...props\n}: useRender.ComponentProps<\"button\"> & {\n variant?: \"default\" | \"destructive\";\n}): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-64 data-[variant=destructive]:text-destructive-foreground sm:min-h-8 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\",\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\nexport function DrawerMenuSeparator({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\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\nexport function DrawerMenuGroup({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\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\nexport function DrawerMenuGroupLabel({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\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\nexport function DrawerMenuTrigger({\n className,\n children,\n ...props\n}: DrawerPrimitive.Trigger.Props): React.ReactElement {\n return (\n \n {children}\n \n \n );\n}\n\nexport function 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}): React.ReactElement {\n return (\n \n {variant === \"switch\" ? (\n <>\n {children}\n \n \n \n \n ) : (\n <>\n \n \n \n \n \n {children}\n \n )}\n \n );\n}\n\nexport function DrawerMenuRadioGroup({\n className,\n ...props\n}: RadioGroupPrimitive.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function 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}): React.ReactElement {\n return (\n \n \n \n \n \n \n {children}\n \n );\n}\n\nexport { DrawerPrimitive };\n",
"type": "registry:ui"
}
],
"type": "registry:ui"
}