Base Drawer

1"use client";
2 
3import * as React from "react";
4import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
5import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
6import { mergeProps } from "@base-ui/react/merge-props";
7import { Radio as RadioPrimitive } from "@base-ui/react/radio";
8import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
9import { useRender } from "@base-ui/react/use-render";
10import { cn } from "@/lib/utils";
11import { Button } from "@/registry/default/button/button";
12import {
13  INNER_EDGE_FROM_ATTACH_SIDE,
14  elevatedSurface,
15  flushSurface,
16  type SurfaceLevel,
17} from "@/registry/default/lib/elevated";
18import { ScrollArea } from "@/registry/default/scroll-area/scroll-area";
19 
20import { HugeiconsIcon } from "@hugeicons/react";
21import { ArrowRight01Icon, Cancel01Icon } from "@hugeicons/core-free-icons";
22type DrawerPosition = "right" | "left" | "top" | "bottom";
23 
24const DrawerContext = React.createContext<{ position: DrawerPosition }>({
25  position: "bottom",
26});
27 
28const directionMap: Record<
29  DrawerPosition,
30  DrawerPrimitive.Root.Props["swipeDirection"]
31> = {
32  bottom: "down",
33  left: "left",
34  right: "right",
35  top: "up",
36};
37 
38const createBaseDrawerHandle: typeof DrawerPrimitive.createHandle =
39  DrawerPrimitive.createHandle;
40 
41function BaseDrawer({
42  swipeDirection,
43  position = "bottom",
44  ...props
45}: DrawerPrimitive.Root.Props & {
46  position?: DrawerPosition;
47}) {
48  return (
49    <DrawerContext.Provider value={{ position }}>
50      <DrawerPrimitive.Root
51        swipeDirection={swipeDirection ?? directionMap[position]}
52        {...props}
53      />
54    </DrawerContext.Provider>
55  );
56}
57 
58const BaseDrawerPortal: typeof DrawerPrimitive.Portal = DrawerPrimitive.Portal;
59 
60function BaseDrawerTrigger(
61  props: DrawerPrimitive.Trigger.Props,
62): React.ReactElement {
63  return <DrawerPrimitive.Trigger data-slot="base-drawer-trigger" {...props} />;
64}
65 
66function BaseDrawerClose(
67  props: DrawerPrimitive.Close.Props,
68): React.ReactElement {
69  return <DrawerPrimitive.Close data-slot="base-drawer-close" {...props} />;
70}
71 
72const BaseDrawerContent: typeof DrawerPrimitive.Content =
73  DrawerPrimitive.Content;
74 
75function BaseDrawerProvider({ ...props }: DrawerPrimitive.Provider.Props) {
76  return <DrawerPrimitive.Provider {...props} />;
77}
78 
79function BaseDrawerIndent({
80  className,
81  ...props
82}: DrawerPrimitive.Indent.Props) {
83  return (
84    <DrawerPrimitive.Indent
85      data-slot="base-drawer-indent"
86      className={cn(
87// … truncated