Drawer

1"use client";2​3import * as React from "react";4import { Dialog as DrawerPrimitive } from "radix-ui";5​6import { usePortalContainer } from "@/lib/surface";7import { cn } from "@/lib/utils";8​9// A drawer, drawn as the console's dialog (Figma 427:2715: Create Agent Identity) and pulled from an edge: white over10// the blurred, ink-tinted page, 16px corners on its inner edge, a 40 by 4px handle in the field-edge lilac, a 20px11// regular title and 24px sides. It slides in on the drawer curve and can be dragged away: a flick (faster than 0.11px12// per ms) or a pull past a third of its size closes it, a shorter pull springs back on the same curve, and pulling the13// other way meets growing resistance instead of a wall. The drag follows the pointer even off the panel (pointer14// capture) and ignores a second finger.15type Direction = "bottom" | "top" | "left" | "right";16​17const DrawerContext = React.createContext<{ direction: Direction; setOpen: (open: boolean) => void }>({ direction: "bottom", setOpen: () => {} });18​19function Drawer({ open: openProp, defaultOpen = false, onOpenChange, direction = "bottom", ...props }: React.ComponentProps<typeof DrawerPrimitive.Root> & { direction?: Direction }) {20  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen);21  const open = openProp ?? uncontrolled;22  const setOpen = React.useCallback(23    (next: boolean) => {24      if (openProp === undefined) setUncontrolled(next);25      onOpenChange?.(next);26    },27    [openProp, onOpenChange],28  );29  return (30    <DrawerContext.Provider value={{ direction, setOpen }}>31      <DrawerPrimitive.Root data-slot="drawer" open={open} onOpenChange={setOpen} {...props} />32    </DrawerContext.Provider>33  );34}35​36function DrawerTrigger(props: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {37  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;38}39​40function DrawerPortal(props: React.ComponentProps<typeof DrawerPrimitive.Portal>) {41  const container = usePortalContainer();42  return <DrawerPrimitive.Portal data-slot="drawer-portal" container={container} {...props} />;43}44​45function DrawerClose(props: React.ComponentProps<typeof DrawerPrimitive.Close>) {46  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;47}48​49function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {50  return (51    <DrawerPrimitive.Overlay52      data-slot="drawer-overlay"53      className={cn("fixed inset-0 z-50 bg-scrim backdrop-blur-[var(--ds-blur-scrim)] data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in", className)}54      {...props}55    />56  );57}58​59const PLACE: Record<Direction, string> = {60  bottom: "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-dialog data-[state=closed]:animate-sheet-out-bottom data-[state=open]:animate-sheet-in-bottom",61  top: "inset-x-0 top-0 max-h-[85dvh] flex-col-reverse rounded-b-dialog data-[state=closed]:animate-sheet-out-top data-[state=open]:animate-sheet-in-top",62  right: "inset-y-0 right-0 w-3/4 flex-row-reverse rounded-l-dialog sm:max-w-96 data-[state=closed]:animate-sheet-out-right data-[state=open]:animate-sheet-in-right",63  left: "inset-y-0 left-0 w-3/4 flex-row rounded-r-dialog sm:max-w-96 data-[state=closed]:animate-sheet-out-left data-[state=open]:animate-sheet-in-left",64};65​66// Where a pull closes the drawer: toward its own edge (positive for bottom and right).67const AXIS: Record<Direction, { axis: "x" | "y"; sign: 1 | -1 }> = { bottom: { axis: "y", sign: 1 }, top: { axis: "y", sign: -1 }, right: { axis: "x", sign: 1 }, left: { axis: "x", sign: -1 } };68const VELOCITY = 0.11;69const SKIP = "button, a, input, textarea, select, [role=slider], [contenteditable=true], [data-drawer-no-drag]";70​71function useDrag(direction: Direction, close: () => void) {72  const panel = React.useRef<HTMLDivElement>(null);73  const drag = React.useRef<{ id: number; start: number; at: number; time: number } | null>(null);74  const { axis, sign } = AXIS[direction];75  const translate = (px: number) => (axis === "y" ? `translateY(${px}px)` : `translateX(${px}px)`);76​77  const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {78    if (drag.current || event.button !== 0) return; // one pointer only79    if ((event.target as Element).closest(SKIP)) return;80    if (window.getSelection()?.toString()) return;81    const start = axis === "y" ? event.clientY : event.clientX;82    drag.current = { id: event.pointerId, start, at: 0, time: performance.now() };83    event.currentTarget.setPointerCapture(event.pointerId);84    if (panel.current) panel.current.style.transition = "none";85  };86​87  const onPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {88    const d = drag.current;89    if (!d || d.id !== event.pointerId || !panel.current) return;90    const raw = (axis === "y" ? event.clientY : event.clientX) - d.start;91    const toward = raw * sign;92    // Toward the edge it follows the pointer; away from it, resistance grows with distance.93    const moved = toward >= 0 ? toward : -Math.sqrt(-toward) * 2;94    d.at = moved;95    panel.current.style.transform = translate(moved * sign);96  };97​98  const end = (event: React.PointerEvent<HTMLDivElement>) => {99    const d = drag.current;100    if (!d || d.id !== event.pointerId || !panel.current) return;101    drag.current = null;102    const el = panel.current;103    const size = axis === "y" ? el.offsetHeight : el.offsetWidth;104    const velocity = Math.abs(d.at) / Math.max(1, performance.now() - d.time);105    if (d.at > 0 && (d.at > size / 3 || velocity > VELOCITY)) {106      el.style.transition = "";107      close();108      return;109    }110    el.style.transition = "transform 500ms var(--ds-easing-drawer)";111    el.style.transform = "";112    const reset = () => {113      el.style.transition = "";114      el.removeEventListener("transitionend", reset);115    };116    el.addEventListener("transitionend", reset);117  };118​119  return { panel, handlers: { onPointerDown, onPointerMove, onPointerUp: end, onPointerCancel: end } };120}121​122function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>) {123  const { direction, setOpen } = React.useContext(DrawerContext);124  const { panel, handlers } = useDrag(direction, () => setOpen(false));125  const vertical = direction === "bottom" || direction === "top";126  return (127    <DrawerPortal>128      <DrawerOverlay />129      <DrawerPrimitive.Content130        ref={panel}131        data-slot="drawer-content"132        data-direction={direction}133        className={cn("group/drawer fixed z-50 flex touch-none bg-surface text-fg shadow-dialog outline-none", vertical ? "flex-col" : "", PLACE[direction], className)}134        {...handlers}135        {...props}136      >137        <div aria-hidden data-slot="drawer-handle" className={cn("shrink-0 rounded-pill bg-line-field", vertical ? "mx-auto my-3 h-1 w-10" : "my-auto mx-3 h-10 w-1")} />138        <div className="flex min-h-0 min-w-0 flex-1 touch-auto flex-col overflow-auto">{children}</div>139      </DrawerPrimitive.Content>140    </DrawerPortal>141  );142}143​144function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {145  return <div data-slot="drawer-header" className={cn("flex flex-col gap-1 px-6 pt-2 pb-4 group-data-[direction=bottom]/drawer:text-center group-data-[direction=top]/drawer:text-center md:text-left md:group-data-[direction=bottom]/drawer:text-left", className)} {...props} />;146}147​148function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {149  return <div data-slot="drawer-footer" className={cn("mt-auto flex flex-col gap-3 p-6", className)} {...props} />;150}151​152function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {153  return <DrawerPrimitive.Title data-slot="drawer-title" className={cn("font-sans text-h3 leading-heading font-normal text-fg", className)} {...props} />;154}155​156function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>) {157  return <DrawerPrimitive.Description data-slot="drawer-description" className={cn("text-body leading-body text-fg-secondary", className)} {...props} />;158}159​160export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };