{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "base-drawer",
"title": "Base Drawer",
"description": "A base-drawer component.",
"dependencies": [
"@hugeicons/react",
"@hugeicons/core-free-icons"
],
"registryDependencies": [
"@cubby-ui/button",
"@cubby-ui/scroll-area",
"@cubby-ui/switch",
"@cubby-ui/elevated"
],
"files": [
{
"path": "registry/default/base-drawer/base-drawer.tsx",
"content": "\"use client\";\n\nimport * as React from \"react\";\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 { cn } from \"@/lib/utils\";\nimport { Button } from \"@/registry/default/button/button\";\nimport {\n INNER_EDGE_FROM_ATTACH_SIDE,\n elevatedSurface,\n flushSurface,\n type SurfaceLevel,\n} from \"@/registry/default/lib/elevated\";\nimport { ScrollArea } from \"@/registry/default/scroll-area/scroll-area\";\nimport {\n SwitchVisual,\n type SwitchVisualProps,\n} from \"@/registry/default/switch/switch\";\n\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport {\n Cancel01Icon,\n CheckIcon,\n ChevronRightIcon,\n} from \"@hugeicons/core-free-icons\";\n\n// The check draws itself in. `pathLength` restates the path as 1 unit\n// long, so the dash values are fractions of the stroke and survive a HugeIcons\n// reshape. Deriving the icon array is the only way to reach the path.\nconst checkIcon = CheckIcon.map(([tag, attrs]) => [\n tag,\n { ...attrs, pathLength: 1 },\n]) as typeof CheckIcon;\n\nconst checkmarkClasses =\n \"[&_path]:ease-out-expo [&_path]:transition-[stroke-dashoffset] [&_path]:duration-150 [&_path]:[stroke-dasharray:1] in-data-checked:[&_path]:[stroke-dashoffset:0] in-data-unchecked:[&_path]:[stroke-dashoffset:1] motion-reduce:[&_path]:transition-none\" +\n // Fade the unchecked mark out to hide the round-cap dot an undrawn dash leaves.\n \" transition-opacity duration-150 ease-out in-data-unchecked:opacity-0 motion-reduce:transition-none\";\n\ntype DrawerPosition = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nconst DrawerContext = React.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\nconst createBaseDrawerHandle: typeof DrawerPrimitive.createHandle =\n DrawerPrimitive.createHandle;\n\nfunction BaseDrawer({\n swipeDirection,\n position = \"bottom\",\n ...props\n}: DrawerPrimitive.Root.Props & {\n position?: DrawerPosition;\n}) {\n return (\n \n \n \n );\n}\n\nconst BaseDrawerPortal: typeof DrawerPrimitive.Portal = DrawerPrimitive.Portal;\n\nfunction BaseDrawerTrigger(\n props: DrawerPrimitive.Trigger.Props,\n): React.ReactElement {\n return ;\n}\n\nfunction BaseDrawerClose(\n props: DrawerPrimitive.Close.Props,\n): React.ReactElement {\n return ;\n}\n\nconst BaseDrawerContent: typeof DrawerPrimitive.Content =\n DrawerPrimitive.Content;\n\nfunction BaseDrawerProvider({ ...props }: DrawerPrimitive.Provider.Props) {\n return ;\n}\n\nfunction BaseDrawerIndent({\n className,\n ...props\n}: DrawerPrimitive.Indent.Props) {\n return (\n \n );\n}\n\nfunction BaseDrawerIndentBackground({\n className,\n ...props\n}: DrawerPrimitive.IndentBackground.Props) {\n return (\n \n );\n}\n\nfunction BaseDrawerSwipeArea({\n className,\n position: positionProp,\n ...props\n}: DrawerPrimitive.SwipeArea.Props & {\n position?: DrawerPosition;\n}) {\n const { position: contextPosition } = React.useContext(DrawerContext);\n const position = positionProp ?? contextPosition;\n\n return (\n \n );\n}\n\nfunction BaseDrawerBackdrop({\n className,\n ...props\n}: DrawerPrimitive.Backdrop.Props) {\n return (\n \n );\n}\n\nfunction BaseDrawerViewport({\n className,\n position,\n variant = \"default\",\n ...props\n}: DrawerPrimitive.Viewport.Props & {\n position?: DrawerPosition;\n variant?: \"default\" | \"floating\";\n}) {\n return (\n \n );\n}\n\nfunction BaseDrawerPopup({\n className,\n children,\n showCloseButton = false,\n position: positionProp,\n variant = \"default\",\n showBar = false,\n level = 5,\n shadowLevel = 5,\n ...props\n}: DrawerPrimitive.Popup.Props & {\n showCloseButton?: boolean;\n position?: DrawerPosition;\n variant?: \"default\" | \"floating\";\n showBar?: boolean;\n /** Surface elevation level (1-8). Defaults to 5 — the dialog/sheet/drawer tier. */\n level?: SurfaceLevel;\n /** Shadow weight (1-8). Pinned to 5 by default. */\n shadowLevel?: SurfaceLevel;\n}) {\n const { position: contextPosition } = React.useContext(DrawerContext);\n const position = positionProp ?? contextPosition;\n\n const portal = (\n \n \n \n \n {children}\n {showCloseButton && (\n }\n >\n \n \n )}\n {showBar && }\n \n \n \n );\n\n // Bottom sheets scroll focused fields clear of the software keyboard and\n // expose --drawer-keyboard-inset while it's open.\n if (position !== \"bottom\") return portal;\n\n return (\n \n {portal}\n \n );\n}\n\nfunction BaseDrawerHeader({\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=base-drawer-popup]:has([data-slot=base-drawer-panel])]:pb-3 max-sm:pb-4\",\n !allowSelection && \"cursor-default\",\n className,\n ),\n \"data-slot\": \"base-drawer-header\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render: allowSelection ? : render,\n });\n}\n\nfunction BaseDrawerFooter({\n className,\n variant = \"default\",\n allowSelection = true,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n variant?: \"default\" | \"inset\";\n allowSelection?: boolean;\n}) {\n const defaultProps = {\n className: cn(\n \"mt-auto flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end\",\n // Bottom inset under the footer content. While a field in the footer has\n // the software keyboard open, it becomes the keyboard inset: the\n // (auto-height) popup grows so the footer sits above the keyboard, and\n // the panel scrolls once the popup hits max height.\n \"[--footer-bottom:var(--safe-bottom,0px)]\",\n \"focus-within:[--footer-bottom:max(var(--safe-bottom,0px),var(--drawer-keyboard-inset,0px))]\",\n \"transition-[padding] duration-260 ease-[cubic-bezier(.32,.72,0,1)] motion-reduce:transition-none\",\n !allowSelection && \"cursor-default\",\n variant === \"default\" &&\n \"in-[[data-slot=base-drawer-popup]:has([data-slot=base-drawer-panel])]:pt-3 pt-4 pb-[calc(var(--footer-bottom)+1.5rem)]\",\n variant === \"inset\" &&\n \"border-t bg-muted pt-4 pb-[calc(var(--footer-bottom)+1rem)]\",\n className,\n ),\n \"data-slot\": \"base-drawer-footer\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render: allowSelection ? : render,\n });\n}\n\nfunction BaseDrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {\n return (\n \n );\n}\n\nfunction BaseDrawerDescription({\n className,\n ...props\n}: DrawerPrimitive.Description.Props) {\n return (\n \n );\n}\n\nfunction BaseDrawerPanel({\n className,\n scrollFade = false,\n scrollable = true,\n allowSelection = true,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n scrollFade?: boolean;\n scrollable?: boolean;\n allowSelection?: boolean;\n}) {\n const defaultProps = {\n className: cn(\n \"p-6 in-[[data-slot=base-drawer-popup]:has([data-slot=base-drawer-header])]:pt-1 in-[[data-slot=base-drawer-popup]:has([data-slot=base-drawer-footer]:not(.border-t))]:pb-1\",\n !allowSelection && \"cursor-default\",\n className,\n ),\n \"data-slot\": \"base-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\nfunction BaseDrawerBar({\n className,\n position: positionProp,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n position?: DrawerPosition;\n}) {\n const { position: contextPosition } = React.useContext(DrawerContext);\n const position = positionProp ?? contextPosition;\n const horizontal = position === \"left\" || position === \"right\";\n\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-muted-foreground/30\",\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\": \"base-drawer-bar\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nfunction BaseDrawerMenu({\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\": \"base-drawer-menu\",\n };\n\n return useRender({\n defaultTagName: \"nav\",\n props: mergeProps<\"nav\">(defaultProps, props),\n render,\n });\n}\n\nfunction BaseDrawerMenuItem({\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 select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none focus-visible:outline-ring/50 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-solid hover:bg-surface-hover hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-60 data-[variant=destructive]:text-destructive-foreground sm:not-pointer-coarse:min-h-8 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:not-pointer-coarse:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\",\n className,\n ),\n \"data-slot\": \"base-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 BaseDrawerMenuSeparator({\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\": \"base-drawer-menu-separator\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nfunction BaseDrawerMenuGroup({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">) {\n const defaultProps = {\n className: cn(\"flex flex-col\", className),\n \"data-slot\": \"base-drawer-menu-group\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nfunction BaseDrawerMenuGroupLabel({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">) {\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\": \"base-drawer-menu-group-label\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nfunction BaseDrawerMenuTrigger({\n className,\n children,\n ...props\n}: DrawerPrimitive.Trigger.Props) {\n return (\n \n {children}\n \n \n );\n}\n\nfunction BaseDrawerMenuCheckboxItem({\n className,\n children,\n checked,\n defaultChecked,\n onCheckedChange,\n indicator = \"check\",\n switchColor = \"primary\",\n switchShape = \"circle\",\n switchSize = \"sm\",\n switchMotion = \"default\",\n disabled,\n render,\n ...props\n}: CheckboxPrimitive.Root.Props & {\n /** Which indicator sits in the right-hand column. `\"switch\"` is visual only. */\n indicator?: \"check\" | \"switch\";\n /** Checked track colour, when `indicator=\"switch\"`. */\n switchColor?: SwitchVisualProps[\"color\"];\n /** Thumb silhouette, when `indicator=\"switch\"`. */\n switchShape?: SwitchVisualProps[\"shape\"];\n /** Thumb size, when `indicator=\"switch\"`. Defaults to `sm` for the drawer's taller touch rows. */\n switchSize?: SwitchVisualProps[\"size\"];\n /** How the thumb travels, when `indicator=\"switch\"`. */\n switchMotion?: SwitchVisualProps[\"motion\"];\n render?: React.ReactElement;\n}) {\n return (\n \n \n {children}\n \n {indicator === \"switch\" ? (\n }\n />\n ) : (\n \n \n \n )}\n \n );\n}\n\nfunction BaseDrawerMenuRadioGroup({\n className,\n ...props\n}: RadioGroupPrimitive.Props) {\n return (\n \n );\n}\n\nfunction BaseDrawerMenuRadioItem({\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 {children}\n \n {/* Radio.Indicator, like Checkbox.Indicator, leaves aria-hidden to us. */}\n \n \n \n \n );\n}\n\nexport {\n BaseDrawer,\n BaseDrawerBackdrop,\n BaseDrawerBar,\n BaseDrawerClose,\n BaseDrawerContent,\n BaseDrawerDescription,\n BaseDrawerFooter,\n BaseDrawerHeader,\n BaseDrawerIndent,\n BaseDrawerIndentBackground,\n BaseDrawerMenu,\n BaseDrawerMenuCheckboxItem,\n BaseDrawerMenuItem,\n BaseDrawerMenuGroup,\n BaseDrawerMenuGroupLabel,\n BaseDrawerMenuRadioGroup,\n BaseDrawerMenuRadioItem,\n BaseDrawerMenuSeparator,\n BaseDrawerMenuTrigger,\n BaseDrawerPanel,\n BaseDrawerPopup,\n BaseDrawerPortal,\n BaseDrawerProvider,\n BaseDrawerSwipeArea,\n BaseDrawerTitle,\n BaseDrawerTrigger,\n BaseDrawerViewport,\n createBaseDrawerHandle,\n DrawerPrimitive,\n};\n\nexport type { DrawerPosition };\n",
"type": "registry:ui",
"target": "components/ui/cubby-ui/base-drawer.tsx"
}
],
"type": "registry:ui"
}