{
"name": "drawer",
"type": "registry:ui",
"title": "Drawer",
"description": "Drawer provides swipeable edge panels for mobile menus, contextual details, and gesture-driven flows.",
"registryDependencies": [
"@siteplane/base",
"@siteplane/button",
"@siteplane/scroll-area"
],
"dependencies": [
"@base-ui/react@1.5.0",
"lucide-react@1.18.0"
],
"files": [
{
"path": "src/components/ui/drawer.tsx",
"type": "registry:ui",
"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 \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { SiteplaneUIPortalScope } from \"@/components/ui/siteplane-provider\";\nimport { CheckIcon } from \"@/components/ui/icons\";\nimport { ScrollArea } from \"@/components/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 \n {children}\n {showCloseButton && (\n }\n >\n \n \n )}\n {showBar && }\n \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-pointer 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 {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 {children}\n \n );\n}\n\nexport { DrawerPrimitive };\n"
},
{
"path": "src/components/ui/icons.tsx",
"type": "registry:ui",
"content": "import type React from \"react\";\n\n// Siteplane-UI-Haken-Glyphe (bewusst andere Geometrie als lucide `Check`).\n// Einzige Quelle fuer den statischen Selected-Marker in Select, Combobox, Menu,\n// ContextMenu und Drawer. (Die Checkbox nutzt eine eigene, ueber\n// `siteplane-checkbox-check` animierte Variante und bleibt davon unberuehrt.)\nexport function CheckIcon(props: React.ComponentProps<\"svg\">): React.ReactElement {\n return (\n \n \n \n );\n}\n"
}
],
"categories": [
"overlays"
],
"docs": "# Drawer\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nDrawer provides swipeable edge panels for mobile menus, contextual details, and\ngesture-driven flows. Use Sheet for dialog-style form and save/cancel flows.\n\n## Import\n\n`import { Drawer, DrawerCreateHandle, DrawerPanel, DrawerPopup, DrawerSwipeArea, DrawerTrigger } from \"@/components/ui/drawer\";`\n\n## Public API\n\n- `position` places the Drawer at an edge. `swipeDirection` normally follows\n that position but may override the gesture direction.\n- `DrawerSwipeArea position` creates a fixed edge target that can open the\n Drawer with a swipe.\n- `DrawerCreateHandle` supports detached triggers and imperative opening.\n- `DrawerPanel scrollable={false}` removes the ScrollArea wrapper;\n `scrollFade={false}` keeps scroll edges hard instead of faded.\n- `allowSelection` on Header, Footer, and Panel chooses selectable content\n behavior instead of a drag surface.\n- Drawer menu items, checkbox items, and radio items accept `disabled`.\n- `variant=\"straight\"` and inset variants define the native surface shape; do\n not recreate them with local classes.\n\n## Public Motion\n\n- Popup, backdrop, stacking, snap points, and swipe progress are native Drawer\n behavior.\n- Do not copy Sheet motion onto Drawer or wrap the popup in another transform.\n- Interactive triggers and menu items use a pointer cursor. Drag and selectable\n content surfaces keep their appropriate default or text cursor.\n\n## Public Accessibility\n\n- Give every Drawer a `DrawerTitle` and `DrawerDescription`, visually hidden\n when the visible design already supplies equivalent context.\n- Preserve Escape, focus restoration, and modal behavior where configured.\n- Disabled menu items must be unavailable and visibly distinct.\n- Keep text selection enabled for content users may need to copy.\n\n## Public Agent Guidance\n\n- Use Drawer for edge and gesture flows; use Sheet for form-oriented flyouts.\n- Choose position, swipe area, scroll, selection, and disabled props through the\n public API instead of local overrides.\n- Preserve native gesture, stack, focus, cursor, and motion behavior.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/components/overlays/drawer)\n\n- [Registry source](https://ui.siteplane.io/r/drawer.json)\n",
"meta": {
"siteplane:agentContractVersion": 1,
"siteplane:docs": "https://ui.siteplane.io/docs/components/overlays/drawer",
"siteplane:releaseVersion": "0.1.1",
"siteplane:sourceOwned": true
},
"devDependencies": []
}