Drawer

1"use client";
2 
3import "./drawer.css";
4import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
5import React from "react";
6import { cn } from "tailwind-variants";
7 
8import { DrawerContext, useDrawerContext } from "./drawer.context";
9import { drawerVariants, type DrawerVariants } from "./drawer.variants";
10 
11export type DrawerProviderProps = React.ComponentProps<typeof BaseDrawer.Provider>;
12 
13export const DrawerProvider = (props: DrawerProviderProps) => {
14  return <BaseDrawer.Provider {...props} />;
15};
16 
17export type DrawerIndentBackgroundProps = React.ComponentProps<typeof BaseDrawer.IndentBackground>;
18 
19export const DrawerIndentBackground = (props: DrawerIndentBackgroundProps) => {
20  return <BaseDrawer.IndentBackground {...props} />;
21};
22 
23export type DrawerIndentProps = React.ComponentProps<typeof BaseDrawer.Indent>;
24 
25export const DrawerIndent = (props: DrawerIndentProps) => {
26  return <BaseDrawer.Indent {...props} />;
27};
28 
29const SIDE_TO_SWIPE_DIRECTION: Record<
30  NonNullable<DrawerVariants["side"]>,
31  React.ComponentProps<typeof BaseDrawer.Root>["swipeDirection"]
32> = {
33  bottom: "down",
34  top: "up",
35  left: "left",
36  right: "right",
37};
38 
39export type DrawerProps = DrawerVariants & React.ComponentProps<typeof BaseDrawer.Root>;
40 
41export const DrawerRoot = ({
42  children,
43  side = "bottom",
44  swipeDirection,
45  ...props
46}: DrawerProps) => {
47  const slots = drawerVariants({ side });
48  const resolvedSwipeDirection = swipeDirection ?? (side ? SIDE_TO_SWIPE_DIRECTION[side] : "down");
49 
50  return (
51    <DrawerContext.Provider value={{ slots }}>
52      <BaseDrawer.Root swipeDirection={resolvedSwipeDirection} {...props}>
53        {children}
54      </BaseDrawer.Root>
55    </DrawerContext.Provider>
56  );
57};
58 
59export type DrawerTriggerProps = React.ComponentProps<typeof BaseDrawer.Trigger> & {
60  render?: React.ReactElement;
61  asChild?: boolean;
62};
63 
64export const DrawerTrigger = ({
65  className,
66  children,
67  render,
68  asChild: _asChild,
69  ...props
70}: DrawerTriggerProps) => {
71  const { slots } = useDrawerContext();
72  const renderElement = render ?? (React.isValidElement(children) ? children : undefined);
73  return (
74    <BaseDrawer.Trigger
75      className={cn(slots.trigger(), className)}
76      {...props}
77      {...(renderElement ? { render: renderElement } : { children })}
78    />
79  );
80};
81 
82export type DrawerSwipeAreaProps = React.ComponentProps<typeof BaseDrawer.SwipeArea>;
83 
84export const DrawerSwipeArea = (props: DrawerSwipeAreaProps) => {
85  return <BaseDrawer.SwipeArea {...props} />;
86};
87 
88// … truncated