1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:T1889,"use client"; import type { ComponentProps, ReactNode } from "react"; import * as DialogPrimitive from "@radix-ui/react-dialog"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; import { Button } from "@/registry/tier-3-components/button"; import { CloseGlyph } from "@/registry/tier-2-primitives/glyphs"; /** * Drawer. * * A dialog that arrives from an edge — Radix Dialog underneath, so it inherits * exactly the same contract as `Dialog` (Escape, focus trap and return, scroll * lock, the rest of the page hidden from screen readers) and differs only in * motion: a drawer translates in from ITS OWN edge over 320ms, so where it came * from is never in question. * * WHEN A DRAWER RATHER THAN A DIALOG * A drawer is for a place you can stay: the bag, a filter panel, a detail * view you'll edit and come back from. A dialog is for a question you must * answer before continuing. If the content has its own scroll, it's a drawer. * * On mobile, `bottom` is usually right — a right-hand drawer on a 390px screen * is a full-screen panel that slid in sideways for no reason. */ export type DrawerProps = { open: boolean; onClose: () => void; title: string; side?: "right" | "left" | "bottom"; children?: ReactNode; /** Pinned to the bottom of the panel, outside the scroll area. */ footer?: ReactNode; size?: "sm" | "md" | "lg"; dismissible?: boolean; className?: string; }; const PANEL_CLASS = { right: "inset-y-0 right-0 h-full animate-[woohl-slide-in-right_var(--duration-slow)_var(--ease-out-woohl)] rounded-l-2xl", left: "inset-y-0 left-0 h-full animate-[woohl-slide-in-left_var(--duration-slow)_var(--ease-out-woohl)] rounded-r-2xl", bottom: "inset-x-0 bottom-0 w-full animate-[woohl-slide-in-bottom_var(--duration-slow)_var(--ease-out-woohl)] rounded-t-2xl", } as const; const SIZE_CLASS = { right: { sm: "w-full max-w-[320px]", md: "w-full max-w-[420px]", lg: "w-full max-w-[560px]" }, left: { sm: "w-full max-w-[320px]", md: "w-full max-w-[420px]", lg: "w-full max-w-[560px]" }, bottom: { sm: "max-h-[40vh]", md: "max-h-[65vh]", lg: "max-h-[88vh]" }, } as const; export function Drawer({ open, onClose, title, side = "right", children, footer, size = "md", dismissible = true, className, }: DrawerProps) { return ( !next && onClose()}> event.preventDefault()} onEscapeKeyDown={dismissible ? undefined : (event) => event.preventDefault()} className={cn( "fixed z-modal flex flex-col bg-surface-raised font-ui shadow-e3 outline-none", PANEL_CLASS[side], SIZE_CLASS[side][size], className, )} >

{title} {dismissible && ( )}

{/* The only scrolling region. Header and footer stay put, which is the whole reason to use a drawer over a dialog. */}

{children}

{footer &&

{footer}

} ); } /* ------------------------------------------------------------ composition */ export const DrawerRoot = DialogPrimitive.Root; export const DrawerTrigger = DialogPrimitive.Trigger; export const DrawerClose = DialogPrimitive.Close; /** shadcn calls this shape a Sheet. Same primitive, same names. */ export const Sheet = DialogPrimitive.Root; export const SheetTrigger = DialogPrimitive.Trigger; export const SheetClose = DialogPrimitive.Close; export function SheetContent({ className, side = "right", size = "md", ...props }: ComponentProps & { side?: keyof typeof PANEL_CLASS; size?: "sm" | "md" | "lg"; }) { return ( ); } export function SheetHeader({ className, ...props }: ComponentProps<"div">) { return (

); } export function SheetFooter({ className, ...props }: ComponentProps<"div">) { return (

); } export function SheetTitle({ className, ...props }: ComponentProps) { return ( ); } export function SheetDescription({ className, ...props }: ComponentProps) { return ( ); } 24:Tbf7d,

"use client";

import type { ComponentProps, ReactNode } from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { cn } from "@/registry/tier-2-primitives/lib/cn";
import { Button } from "@/registry/tier-3-components/button";
import { CloseGlyph } from "@/registry/tier-2-primitives/glyphs";

/**
 * Drawer.
 *
 * A dialog that arrives from an edge — Radix Dialog underneath, so it inherits
 * exactly the same contract as `Dialog` (Escape, focus trap and return, scroll
 * lock, the rest of the page hidden from screen readers) and differs only in
 * motion: a drawer translates in from ITS OWN edge over 320ms, so where it came
 * from is never in question.
 *
 * WHEN A DRAWER RATHER THAN A DIALOG
 *   A drawer is for a place you can stay: the bag, a filter panel, a detail
 *   view you'll edit and come back from. A dialog is for a question you must
 *   answer before continuing. If the content has its own scroll, it's a drawer.
 *
 * On mobile, `bottom` is usually right — a right-hand drawer on a 390px screen
 * is a full-screen panel that slid in sideways for no reason.
 */
export type DrawerProps = {
  open: boolean;
  onClose: () => void;
  title: string;
  side?: "right" | "left" | "bottom";
  children?: ReactNode;
  /** Pinned to the bottom of the panel, outside the scroll area. */
  footer?: ReactNode;
  size?: "sm" | "md" | "lg";
  dismissible?: boolean;
  className?: string;
};

const PANEL_CLASS = {
  right: "inset-y-0 right-0 h-full animate-[woohl-slide-in-right_var(--duration-slow)_var(--ease-out-woohl)] rounded-l-2xl",
  left: "inset-y-0 left-0 h-full animate-[woohl-slide-in-left_var(--duration-slow)_var(--ease-out-woohl)] rounded-r-2xl",
  bottom:
    "inset-x-0 bottom-0 w-full animate-[woohl-slide-in-bottom_var(--duration-slow)_var(--ease-out-woohl)] rounded-t-2xl",
} as const;

const SIZE_CLASS = {
  right: { sm: "w-full max-w-[320px]", md: "w-full max-w-[420px]", lg: "w-full max-w-[560px]" },
  left: { sm: "w-full max-w-[320px]", md: "w-full max-w-[420px]", lg: "w-full max-w-[560px]" },
  bottom: { sm: "max-h-[40vh]", md: "max-h-[65vh]", lg: "max-h-[88vh]" },
} as const;

export function Drawer({
  open,
  onClose,
  title,
  side = "right",
  children,
  footer,
  size = "md",
  dismissible = true,
  className,
}: DrawerProps) {
  return (
    <DialogPrimitive.Root open={open} onOpenChange={(next) => !next && onClose()}>
      <DialogPrimitive.Portal>
        <DialogPrimitive.Overlay
          data-slot="drawer-overlay"
          className="fixed inset-0 z-modal animate-woohl-fade bg-[var(--scrim-overlay)]"
        />
        <DialogPrimitive.Content
          data-slot="drawer"
          onPointerDownOutside={dismissible ? undefined : (event) => event.preventDefault()}
          onEscapeKeyDown={dismissible ? undefined : (event) => event.preventDefault()}
          className={cn(
            "fixed z-modal flex flex-col bg-surface-raised font-ui shadow-e3 outline-none",
            PANEL_CLASS[side],
            SIZE_CLASS[side][size],
            className,
          )}
        >
        <div className="flex items-center justify-between gap-4 border-b border-border-subtle px-6 py-4">
          <DialogPrimitive.Title className="text-h3 text-text-primary">
            {title}
          </DialogPrimitive.Title>
          {dismissible && (
            <DialogPrimitive.Close asChild>
              <Button variant="ghost" size="icon-sm" aria-label="Close panel">
                <CloseGlyph size={18} />
              </Button>
            </DialogPrimitive.Close>
          )}
        </div>

        {/* The only scrolling region. Header and footer stay put, which is the
            whole reason to use a drawer over a dialog. */}
        <div className="min-h-0 flex-1 overflow-y-auto px-6 py-5 text-body leading-[1.6] text-text-secondary">
          {children}
        </div>

        {footer && <div className="border-t border-border-subtle px-6 py-4">{footer}</div>}
        </DialogPrimitive.Content>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  );
}

/* ------------------------------------------------------------ composition */

export const DrawerRoot = DialogPrimitive.Root;
export const DrawerTrigger = DialogPrimitive.Trigger;
export const DrawerClose = DialogPrimitive.Close;

/** shadcn calls this shape a Sheet. Same primitive, same names. */
export const Sheet = DialogPrimitive.Root;
export const SheetTrigger = DialogPrimitive.Trigger;
export const SheetClose = DialogPrimitive.Close;

export function SheetContent({
  className,
  side = "right",
  size = "md",
  ...props
}: ComponentProps<typeof DialogPrimitive.Content> & {
  side?: keyof typeof PANEL_CLASS;
  size?: "sm" | "md" | "lg";
}) {
  return (
    <DialogPrimitive.Portal>
      <DialogPrimitive.Overlay className="fixed inset-0 z-modal animate-woohl-fade bg-[var(--scrim-overlay)]" />
      <DialogPrimitive.Content
        data-slot="sheet-content"
        className={cn(
          "fixed z-modal flex flex-col bg-surface-raised font-ui shadow-e3 outline-none",
          PANEL_CLASS[side],
          SIZE_CLASS[side][size],
          className,
        )}
        {...props}
      />
    </DialogPrimitive.Portal>
  );
}

export function SheetHeader({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="sheet-header"
      className={cn("border-b border-border-subtle px-6 py-4", className)}
      {...props}
    />
  );
}

export function SheetFooter({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="sheet-footer"
      className={cn("mt-auto border-t border-border-subtle px-6 py-4", className)}
      {...props}
    />
  );
}

export function SheetTitle({
  className,
  ...props
}: ComponentProps<typeof DialogPrimitive.Title>) {
  return (
    <DialogPrimitive.Title
      data-slot="sheet-title"
      className={cn("text-h3 text-text-primary", className)}
      {...props}
    />
  );
}

export function SheetDescription({
  className,
  ...props
}: ComponentProps<typeof DialogPrimitive.Description>) {
  return (
    <DialogPrimitive.Description
      data-slot="sheet-description"
      className={cn("mt-1 text-body leading-[1.6] text-text-secondary", className)}
      {...props}
    />
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Composites"}],["$","$L1e",null,{"children":"Drawer & Sheet"}],["$","$L1f",null,{"children":"A dialog that arrives from an edge, for a place you can stay rather than a question you must answer."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"drawer"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/drawer","source":"$23","highlighted":"$24","npm":["@radix-ui/react-dialog"],"registry":["@woohl/button","@woohl/glyphs","@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]