Sheet

1"use client";
2 
3import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
4import { X } from "@phosphor-icons/react/dist/ssr";
5import {
6  Children,
7  cloneElement,
8  createContext,
9  isValidElement,
10  useContext,
11} from "react";
12import type * as React from "react";
13import { cn } from "@/lib/utils";
14import {
15  coarseTarget,
16  overlayLayer,
17  selectionFocus,
18} from "@/lib/recipes";
19 
20export type SheetSide = "top" | "right" | "bottom" | "left";
21 
22const SIDE_TO_SWIPE: Record<SheetSide, "up" | "down" | "left" | "right"> = {
23  top: "up",
24  right: "right",
25  bottom: "down",
26  left: "left",
27};
28 
29/* --------------------------------- Root -------------------------------- */
30 
31export interface SheetProps {
32  open?: boolean;
33  onOpenChange?: (open: boolean) => void;
34  defaultOpen?: boolean;
35  /** Edge the drawer slides from. Default `right`. */
36  side?: SheetSide;
37  children: React.ReactNode;
38}
39 
40export function Sheet({
41  open,
42  onOpenChange,
43  defaultOpen = false,
44  side = "right",
45  children,
46}: SheetProps): React.ReactElement {
47  return (
48    <DrawerPrimitive.Root
49      open={open}
50      onOpenChange={onOpenChange ? (next) => onOpenChange(next) : undefined}
51      defaultOpen={defaultOpen}
52      swipeDirection={SIDE_TO_SWIPE[side]}
53    >
54      <SheetSideContext.Provider value={side}>
55        {children}
56      </SheetSideContext.Provider>
57    </DrawerPrimitive.Root>
58  );
59}
60 
61const SheetSideContext = createContext<SheetSide>("right");
62 
63/* ------------------------------- Trigger ------------------------------- */
64 
65export type SheetTriggerProps = React.ComponentProps<
66  typeof DrawerPrimitive.Trigger
67>;
68 
69export function SheetTrigger(props: SheetTriggerProps): React.ReactElement {
70  return <DrawerPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
71}
72 
73/* ------------------------------- Content ------------------------------- */
74 
75const SIDE_LAYOUT: Record<SheetSide, string> = {
76  right:
77    "top-0 bottom-0 right-0 w-[85vw] max-w-md border-l border-hairline rounded-l-[var(--radius-12)]",
78  left:
79    "top-0 bottom-0 left-0 w-[85vw] max-w-md border-r border-hairline rounded-r-[var(--radius-12)]",
80  top: "top-0 left-0 right-0 border-b border-hairline rounded-b-[var(--radius-12)]",
81  bottom:
82    "bottom-0 left-0 right-0 border-t border-hairline rounded-t-[var(--radius-12)]",
83};
84 
85const SIDE_ENTER: Record<SheetSide, string> = {
86  right:
87    "data-starting-style:translate-x-full data-ending-style:translate-x-full",
88  left:
89// … truncated