{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"drawer","title":"Drawer","description":"Swipe-aware modal panel anchored to a viewport edge.","dependencies":["@base-ui/react@1.7.0","lucide-react@1.18.0"],"registryDependencies":["@siteplane/base","@siteplane/button","@siteplane/checkbox","@siteplane/menu","@siteplane/radio-group","@siteplane/scroll-area","@siteplane/switch"],"files":[{"path":"packages/ui/src/components/drawer/drawer.tsx","content":"\"use client\";\n\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\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, type WithStringClassName } from \"../../system/utils/cn\";\nimport { slotClass } from \"../../system/utils/slot-class\";\nimport { surfaceClassNames } from \"../../system/styles/surface\";\nimport { KitButton } from \"../button/button-internal\";\nimport {\n menuGroupLabelClassName,\n menuSeparatorClassName,\n} from \"./drawer-menu-shared\";\nimport { type CheckboxProps } from \"../checkbox\";\nimport { KitCheckbox } from \"../checkbox/checkbox-internal\";\nimport { type RadioGroupProps, type RadioProps } from \"../radio-group\";\nimport { KitRadioGroup, KitRadio } from \"../radio-group/radio-group-internal\";\nimport { ScrollArea } from \"../scroll-area\";\nimport { type SwitchProps } from \"../switch\";\nimport { KitSwitch } from \"../switch/switch-internal\";\nimport {\n type SiteplaneControlSize,\n SiteplaneUIPortalScope,\n useResolvedControlSize,\n} from \"../../system/provider/siteplane-ui-provider\";\n\nimport \"./drawer.css\";\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\n// Base UI's own Portal type, with className narrowed to a string.\nexport const DrawerPortal: (\n props: WithStringClassName> &\n React.RefAttributes,\n) => React.JSX.Element | null = DrawerPrimitive.Portal;\n\nexport function DrawerTrigger(\n props: WithStringClassName,\n): React.ReactElement {\n return (\n \n );\n}\n\nexport function DrawerClose(\n props: WithStringClassName,\n): React.ReactElement {\n return (\n \n );\n}\n\nexport function DrawerSwipeArea({\n className,\n position: positionProp,\n ...props\n}: WithStringClassName & {\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}: WithStringClassName): React.ReactElement {\n return (\n \n );\n}\n\nexport function DrawerViewport({\n className,\n position,\n variant = \"default\",\n ...props\n}: WithStringClassName & {\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 elevation = \"default\",\n showCloseButton = false,\n position: positionProp,\n variant = \"default\",\n width,\n showBar = false,\n closeProps,\n portalProps,\n ...props\n}: WithStringClassName & {\n elevation?: \"default\" | \"none\";\n showCloseButton?: boolean;\n position?: DrawerPosition;\n variant?: \"default\" | \"straight\" | \"inset\";\n /**\n * Width of a bottom or top panel on a wide screen. `readable` caps it at\n * `max-w-lg` (512 px) and centres it; `full` spans the whole edge. A `straight` panel stays attached along the whole edge, so it is\n * `full` unless you ask for `readable`. Left and right panels keep their own\n * width.\n */\n width?: \"readable\" | \"full\";\n showBar?: boolean;\n closeProps?: WithStringClassName;\n portalProps?: WithStringClassName;\n}): React.ReactElement {\n const { position: contextPosition } = useContext(DrawerContext);\n const position = positionProp ?? contextPosition;\n const resolvedElevation = variant === \"straight\" ? \"none\" : elevation;\n const resolvedWidth = width ?? (variant === \"straight\" ? \"full\" : \"readable\");\n\n return (\n \n \n \n \n \n {children}\n {/* The grab strip spans its whole edge; the close button comes\n after it, so it paints and takes clicks above the strip. */}\n {showBar && }\n {showCloseButton && (\n \n }\n {...closeProps}\n >\n \n \n )}\n \n \n \n \n );\n}\n\n// Base UI's bare content part: in it a pointer selects text instead of\n// swiping the drawer. The header, footer and panel take it with\n// allowSelection.\nconst SelectableContent = DrawerPrimitive.Content;\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 slotClass(\"drawer-header\", props, render),\n \"flex flex-col\",\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 allowSelection = true,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n allowSelection?: boolean;\n}): React.ReactElement {\n const defaultProps = {\n className: cn(\n // Actions that do not fit wrap onto another row with the same gap instead\n // of overflowing a narrow panel.\n slotClass(\"drawer-footer\", props, render),\n \"flex flex-wrap\",\n !allowSelection && \"cursor-default\",\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}: WithStringClassName): React.ReactElement {\n return (\n \n );\n}\n\nexport function DrawerDescription({\n className,\n ...props\n}: WithStringClassName): 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 slotClass(\"drawer-panel\", props, render),\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 slotClass(\"drawer-bar\", props, render),\n \"absolute flex cursor-grab touch-none items-center justify-center p-3 active:cursor-grabbing before:rounded-full\",\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 function DrawerMenu({\n className,\n render,\n size,\n ...props\n}: useRender.ComponentProps<\"nav\"> & {\n /**\n * The row size; it follows the provider's control size. `xl` is the touch\n * size for navigation and sheets that are tapped: 48px rows with 16px text\n * and 20px icons. The other sizes keep the compact menu rows, which a touch\n * screen turns into 48px rows as well.\n */\n size?: SiteplaneControlSize;\n}): React.ReactElement {\n const resolvedSize = useResolvedControlSize(size);\n const defaultProps = {\n className: cn(\n slotClass(\"drawer-menu\", props, render),\n \"-m-2 flex flex-col\",\n className,\n ),\n \"data-size\": resolvedSize,\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 return (\n \n );\n}\n\nexport function DrawerMenuSeparator({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n slotClass(\"drawer-menu-separator\", props, render),\n menuSeparatorClassName,\n className,\n ),\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(\n slotClass(\"drawer-menu-group\", props, render),\n \"flex flex-col\",\n className,\n ),\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 slotClass(\"drawer-menu-group-label\", props, render),\n menuGroupLabelClassName,\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}: Omit<\n WithStringClassName,\n \"render\"\n>): React.ReactElement {\n return (\n \n }\n {...props}\n >\n {children}\n \n \n );\n}\n\nexport function DrawerMenuCheckboxItem({\n variant = \"default\",\n ...props\n}: Omit & {\n variant?: \"default\" | \"switch\";\n}): React.ReactElement {\n if (variant === \"switch\") {\n return (\n \n );\n }\n\n return (\n \n );\n}\n\nexport function DrawerMenuRadioGroup({\n className,\n ...props\n}: Omit): React.ReactElement {\n return (\n \n );\n}\n\nexport function DrawerMenuRadioItem({\n indicatorPosition = \"start\",\n ...props\n}: Omit & {\n value: string;\n /**\n * Where the row shows its check: in the leading slot (`start`), or at the\n * end of the row (`end`) for identity rows that lead with a logo or an\n * avatar, such as the workspaces of a switcher.\n */\n indicatorPosition?: \"start\" | \"end\" | undefined;\n}): React.ReactElement {\n return (\n \n );\n}\n\n// DrawerContent is the shadcn name of DrawerPopup, as DialogContent is of\n// DialogPopup. Base UI's bare content part is DrawerPrimitive.Content.\nexport { DrawerPrimitive, DrawerPopup as DrawerContent };\n","type":"registry:ui","target":"~/src/siteplane/components/drawer/drawer.tsx"},{"path":"packages/ui/src/components/drawer/drawer.css","content":"@layer theme, base, components, siteplane, utilities;\n\n@layer siteplane {\n /* The panel slides from its edge and the backdrop fades with it, on the\n * panel time and curve that Sheet shares (rulebook M1). A panel that is let\n * go after a swipe settles within the release time, scaled by the swipe's\n * strength; the backdrop follows the finger without a transition. A bottom\n * panel at rest also eases its margin and padding as its snap point\n * changes. Zero specificity, so the reduced-motion rules below and a\n * consumer's transition utility both win. */\n :where(.sp-drawer-popup) {\n transition-property: transform, box-shadow, height, background-color;\n transition-duration: var(--motion-duration-panel);\n transition-timing-function: var(--motion-ease-panel);\n }\n\n :where(\n .sp-drawer-popup[data-position=\"bottom\"]:not(\n [data-starting-style],\n [data-ending-style]\n )\n ) {\n transition-property:\n transform, box-shadow, height, background-color, margin, padding;\n }\n\n :where(.sp-drawer-backdrop) {\n transition-property: opacity;\n transition-duration: var(--motion-duration-panel);\n transition-timing-function: var(--motion-ease-panel);\n }\n\n :where(:is(.sp-drawer-popup, .sp-drawer-backdrop)[data-ending-style]) {\n transition-duration: calc(\n var(--drawer-swipe-strength) * var(--motion-duration-panel-release)\n );\n }\n\n :where(.sp-drawer-backdrop[data-swiping]) {\n transition-duration: 0ms;\n }\n\n /* Reduced motion opens and closes the panel and its backdrop at once (M5):\n * the document mode, the provider preset and the system setting. */\n html[data-motion-reduce=\"true\"] .sp-drawer-popup,\n html[data-motion-reduce=\"true\"] .sp-drawer-backdrop,\n [data-sp-motion=\"reduced\"] .sp-drawer-popup,\n [data-sp-motion=\"reduced\"] .sp-drawer-backdrop {\n transition-duration: 1ms;\n }\n\n @media (prefers-reduced-motion: reduce) {\n :root .sp-drawer-popup,\n :root .sp-drawer-backdrop {\n transition-duration: 1ms;\n }\n }\n\n /* DrawerMenu touch size (size=\"xl\").\n *\n * The shared menu-row recipe in design-rework.css is the compact one: 32px rows\n * with 14px text and 16px icons, which only a coarse pointer turns into 48px\n * rows. Navigation and sheets that are tapped ask for the touch size whatever\n * the pointer: 48px rows, 16px text and a 20px icon slot, as the Sidebar rows at\n * size xl.\n *\n * Every row kind takes the slot through the same two tokens, so the labels of\n * icon, check, radio, switch and submenu rows still start at the same x\n * (rulebook I8): the icon width is the width of the check and radio column and\n * of the slot a switch row keeps, and the Button content gap is the gap of all\n * of them. The row padding stays 8px, which the menu's negative margin\n * offsets.\n *\n * The extra `[data-slot]` ranks the row rule above the menu-row profile of the\n * Button, so the two files can load in any order. */\n :root .sp-drawer-menu[data-size=\"xl\"] {\n --sp-rw-menu-row-icon: var(--sp-rw-control-icon-xl);\n --sp-rw-button-content-gap: var(--sp-rw-space-2-5);\n }\n\n :root .sp-drawer-menu[data-size=\"xl\"] [data-slot].sp-drawer-menu-item,\n :root\n .sp-drawer-menu[data-size=\"xl\"]\n [data-slot].sp-drawer-menu-checkbox-item,\n :root .sp-drawer-menu[data-size=\"xl\"] [data-slot].sp-drawer-menu-radio-item,\n :root .sp-drawer-menu[data-size=\"xl\"] [data-slot].sp-drawer-menu-trigger {\n min-height: var(--sp-rw-control-xl);\n border-radius: var(--sp-rw-radius-surface);\n padding-block: var(--sp-rw-space-3);\n font-size: var(--sp-rw-font-16);\n line-height: var(--sp-rw-line-24);\n }\n\n :root .sp-drawer-menu[data-size=\"xl\"] .sp-drawer-menu-group-label {\n padding-block: var(--sp-rw-space-2);\n font-size: var(--sp-rw-font-13);\n line-height: var(--sp-rw-line-18);\n }\n\n :root .sp-drawer-menu[data-size=\"xl\"] .sp-drawer-menu-separator {\n margin-block: var(--sp-rw-space-2);\n }\n\n /* The current page of a navigation. The row keeps the persistent fill the\n * Sidebar gives its active row (the pressed glow) and the full foreground, also\n * under the pointer, so the hover never hides where you are (rulebook T5). */\n :root\n .sp-drawer-menu-item[data-chassis][data-variant=\"text\"][aria-current=\"page\"]:not(\n :disabled,\n [aria-disabled=\"true\"]\n ) {\n background: var(--sp-rw-glow-pressed);\n color: var(--sp-rw-fg-primary);\n }\n\n :root\n .sp-drawer-menu-item[aria-current=\"page\"]:not(\n :disabled,\n [aria-disabled=\"true\"]\n )\n svg {\n color: var(--sp-rw-fg-primary);\n }\n}\n","type":"registry:ui","target":"~/src/siteplane/components/drawer/drawer.css"},{"path":"packages/ui/src/components/drawer/drawer-menu-shared.tsx","content":"export {\n menuGroupLabelClassName,\n menuItemClassName,\n menuPopupClassName,\n menuPopupWidthClassNames,\n menuSeparatorClassName,\n menuShortcutClassName,\n menuSubTriggerClassName,\n type MenuPopupWidth,\n} from \"../menu/menu-shared\";\n","type":"registry:ui","target":"~/src/siteplane/components/drawer/drawer-menu-shared.tsx"},{"path":"packages/ui/src/components/drawer/index.ts","content":"export * from \"./drawer\";\n","type":"registry:ui","target":"~/src/siteplane/components/drawer/index.ts"}],"type":"registry:ui","docs":"https://ui.siteplane.io/docs-markdown/components/drawer.md","categories":["Overlays & disclosure"],"meta":{"avoidWhen":["Avoid when swipe dismissal is not wanted; use Sheet.","Avoid for a centered task; use Dialog."],"description":"Swipe-aware modal panel anchored to a viewport edge.","knownLimitations":["Swipe is not the only way to close: keep a visible close action."],"providerNotes":[],"releaseStatus":"stable","searchTerms":["drawer"],"useWhen":["Use for a panel that slides in from a viewport edge and closes with a swipe, such as a mobile menu or a list of actions."]}}