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:T1ee0,"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"; /** * Dialog. * * Scales 0.97 → 1 with a fade over 320ms while the scrim fades in. It scales * from the centre because it belongs to the whole page, not to the control that * opened it — a dropdown grows from its trigger, a modal doesn't. * * WHAT RADIX HANDLES SO YOU DON'T HAVE TO * · Escape closes * · focus moves into the panel on open, is trapped while open, and returns to * the trigger on close * · the page behind stops scrolling, and doesn't jump sideways when the * scrollbar disappears * · everything outside the panel is `aria-hidden`, so a screen reader can't * wander into the page behind it — the one thing the hand-rolled version * never did, and the reason this moved * · the panel is portalled to the body, so an `overflow: hidden` ancestor * can no longer clip it * * TWO WAYS TO USE IT * The `` form below is the short one, and is what most * screens want. For anything with a custom header, a scrolling body or a form * wrapping the whole panel, use the composition parts (`DialogRoot`, * `DialogTrigger`, `DialogContent`, …) — same primitive underneath, and the * same names shadcn uses, so shadcn call sites port across unchanged. */ /* ------------------------------------------------------------ composition */ export const DialogRoot = DialogPrimitive.Root; export const DialogTrigger = DialogPrimitive.Trigger; export const DialogPortal = DialogPrimitive.Portal; export const DialogClose = DialogPrimitive.Close; export function DialogOverlay({ className, ...props }: ComponentProps) { return ( ); } const SIZE_CLASS = { sm: "max-w-[380px]", md: "max-w-[460px]", lg: "max-w-[640px]", } as const; export function DialogContent({ className, children, size = "md", showClose = true, showCloseButton, ...props }: ComponentProps & { size?: keyof typeof SIZE_CLASS; showClose?: boolean; /** shadcn's spelling of `showClose`. Both are honoured. */ showCloseButton?: boolean; }) { const withClose = showCloseButton ?? showClose; return ( {children} {withClose && ( )} ); } export function DialogHeader({ className, ...props }: ComponentProps<"div">) { return

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

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

); } /* --------------------------------------------------------------- shorthand */ export type DialogProps = { open: boolean; onClose: () => void; /** The accessible name. Rendered as the heading unless `hideTitle`. */ title: string; /** Announced with the title. Use for a one-line consequence of the action. */ description?: string; hideTitle?: boolean; children?: ReactNode; /** The action row. Primary action last — it sits closest to the thumb. */ footer?: ReactNode; size?: keyof typeof SIZE_CLASS; /** * Turn off scrim-click-to-close for a destructive confirmation, where a * stray click shouldn't be able to dismiss the question. */ dismissible?: boolean; className?: string; }; export function Dialog({ open, onClose, title, description, hideTitle = false, children, footer, size = "md", dismissible = true, className, }: DialogProps) { return ( !next && onClose()}> event.preventDefault()} onEscapeKeyDown={dismissible ? undefined : (event) => event.preventDefault()} > {title} {description && {description}} {children && {children}} {footer && {footer}} ); } /** * The confirmation dialog, pre-wired. * * Exists because the destructive-confirm is the one dialog every product builds * and the one it is easiest to get subtly wrong: the danger button is the * confirm (not the cancel), Cancel is the safe default, and scrim-dismiss is * off so a stray click can't answer the question for you. */ export function ConfirmDialog({ open, onClose, onConfirm, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", destructive = false, loading = false, }: { open: boolean; onClose: () => void; onConfirm: () => void; title: string; description: string; confirmLabel?: string; cancelLabel?: string; destructive?: boolean; loading?: boolean; }) { return ( } /> ); } 24:Tfbb6,

"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";

/**
 * Dialog.
 *
 * Scales 0.97 → 1 with a fade over 320ms while the scrim fades in. It scales
 * from the centre because it belongs to the whole page, not to the control that
 * opened it — a dropdown grows from its trigger, a modal doesn't.
 *
 * WHAT RADIX HANDLES SO YOU DON'T HAVE TO
 *   · Escape closes
 *   · focus moves into the panel on open, is trapped while open, and returns to
 *     the trigger on close
 *   · the page behind stops scrolling, and doesn't jump sideways when the
 *     scrollbar disappears
 *   · everything outside the panel is `aria-hidden`, so a screen reader can't
 *     wander into the page behind it — the one thing the hand-rolled version
 *     never did, and the reason this moved
 *   · the panel is portalled to the body, so an `overflow: hidden` ancestor
 *     can no longer clip it
 *
 * TWO WAYS TO USE IT
 *   The `<Dialog open title=… />` form below is the short one, and is what most
 *   screens want. For anything with a custom header, a scrolling body or a form
 *   wrapping the whole panel, use the composition parts (`DialogRoot`,
 *   `DialogTrigger`, `DialogContent`, …) — same primitive underneath, and the
 *   same names shadcn uses, so shadcn call sites port across unchanged.
 */

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

export const DialogRoot = DialogPrimitive.Root;
export const DialogTrigger = DialogPrimitive.Trigger;
export const DialogPortal = DialogPrimitive.Portal;
export const DialogClose = DialogPrimitive.Close;

export function DialogOverlay({
  className,
  ...props
}: ComponentProps<typeof DialogPrimitive.Overlay>) {
  return (
    <DialogPrimitive.Overlay
      data-slot="dialog-overlay"
      className={cn("fixed inset-0 z-modal animate-woohl-fade bg-[var(--scrim-overlay)]", className)}
      {...props}
    />
  );
}

const SIZE_CLASS = {
  sm: "max-w-[380px]",
  md: "max-w-[460px]",
  lg: "max-w-[640px]",
} as const;

export function DialogContent({
  className,
  children,
  size = "md",
  showClose = true,
  showCloseButton,
  ...props
}: ComponentProps<typeof DialogPrimitive.Content> & {
  size?: keyof typeof SIZE_CLASS;
  showClose?: boolean;
  /** shadcn's spelling of `showClose`. Both are honoured. */
  showCloseButton?: boolean;
}) {
  const withClose = showCloseButton ?? showClose;
  return (
    <DialogPortal>
      <DialogOverlay />
      <DialogPrimitive.Content
        data-slot="dialog-content"
        className={cn(
          "fixed top-1/2 left-1/2 z-modal w-[calc(100%-2.5rem)] -translate-x-1/2 -translate-y-1/2",
          "animate-woohl-scale-in rounded-2xl bg-surface-raised font-ui shadow-e3 outline-none",
          SIZE_CLASS[size],
          className,
        )}
        {...props}
      >
        {children}
        {withClose && (
          <DialogPrimitive.Close asChild>
            <Button
              variant="ghost"
              size="icon-sm"
              aria-label="Close dialog"
              className="absolute top-5 right-5"
            >
              <CloseGlyph size={18} />
            </Button>
          </DialogPrimitive.Close>
        )}
      </DialogPrimitive.Content>
    </DialogPortal>
  );
}

export function DialogHeader({ className, ...props }: ComponentProps<"div">) {
  return <div data-slot="dialog-header" className={cn("p-6 pb-0 pr-14", className)} {...props} />;
}

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

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

export function DialogFooter({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="dialog-footer"
      className={cn(
        "flex items-center justify-end gap-2.5 border-t border-border-subtle p-4 px-6",
        className,
      )}
      {...props}
    />
  );
}

export function DialogBody({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="dialog-body"
      className={cn("px-6 py-4 font-ui text-body leading-[1.6] text-text-secondary", className)}
      {...props}
    />
  );
}

/* --------------------------------------------------------------- shorthand */

export type DialogProps = {
  open: boolean;
  onClose: () => void;
  /** The accessible name. Rendered as the heading unless `hideTitle`. */
  title: string;
  /** Announced with the title. Use for a one-line consequence of the action. */
  description?: string;
  hideTitle?: boolean;
  children?: ReactNode;
  /** The action row. Primary action last — it sits closest to the thumb. */
  footer?: ReactNode;
  size?: keyof typeof SIZE_CLASS;
  /**
   * Turn off scrim-click-to-close for a destructive confirmation, where a
   * stray click shouldn't be able to dismiss the question.
   */
  dismissible?: boolean;
  className?: string;
};

export function Dialog({
  open,
  onClose,
  title,
  description,
  hideTitle = false,
  children,
  footer,
  size = "md",
  dismissible = true,
  className,
}: DialogProps) {
  return (
    <DialogRoot open={open} onOpenChange={(next) => !next && onClose()}>
      <DialogContent
        size={size}
        showCloseButton={dismissible}
        className={className}
        /* Both of these fire the same close path Radix would; blocking them is
           how `dismissible={false}` keeps a destructive question on screen. */
        onPointerDownOutside={dismissible ? undefined : (event) => event.preventDefault()}
        onEscapeKeyDown={dismissible ? undefined : (event) => event.preventDefault()}
      >
        <DialogHeader>
          <DialogTitle className={hideTitle ? "sr-only" : undefined}>{title}</DialogTitle>
          {description && <DialogDescription>{description}</DialogDescription>}
        </DialogHeader>
        {children && <DialogBody>{children}</DialogBody>}
        {footer && <DialogFooter>{footer}</DialogFooter>}
      </DialogContent>
    </DialogRoot>
  );
}

/**
 * The confirmation dialog, pre-wired.
 *
 * Exists because the destructive-confirm is the one dialog every product builds
 * and the one it is easiest to get subtly wrong: the danger button is the
 * confirm (not the cancel), Cancel is the safe default, and scrim-dismiss is
 * off so a stray click can't answer the question for you.
 */
export function ConfirmDialog({
  open,
  onClose,
  onConfirm,
  title,
  description,
  confirmLabel = "Confirm",
  cancelLabel = "Cancel",
  destructive = false,
  loading = false,
}: {
  open: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  description: string;
  confirmLabel?: string;
  cancelLabel?: string;
  destructive?: boolean;
  loading?: boolean;
}) {
  return (
    <Dialog
      open={open}
      onClose={onClose}
      title={title}
      description={description}
      size="sm"
      dismissible={!destructive}
      footer={
        <>
          <Button variant="secondary" onClick={onClose} disabled={loading}>
            {cancelLabel}
          </Button>
          <Button variant={destructive ? "danger" : "primary"} onClick={onConfirm} loading={loading}>
            {confirmLabel}
          </Button>
        </>
      }
    />
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Composites"}],["$","$L1e",null,{"children":"Dialog"}],["$","$L1f",null,{"children":"Modal with focus trap, scroll lock and the rest of the page hidden from screen readers. Prop-driven and composition APIs both."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"dialog"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/dialog","source":"$23","highlighted":"$24","npm":["@radix-ui/react-dialog"],"registry":["@woohl/button","@woohl/glyphs","@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]