Dialog

1"use client";2​3import * as React from "react";4import { Dialog as DialogPrimitive } from "radix-ui";5import { XIcon } from "@phosphor-icons/react/ssr";6​7import { usePortalContainer } from "@/lib/surface";8import { cn } from "@/lib/utils";9​10// The console's dialog (Create Agent Identity, @test-agent is ready!): a white panel with 16px corners on the page11// behind it, which takes the ink at 12 percent over a light blur. A 68px head holds the 20px regular title 24px in from12// the left and a faint 20px close glyph 24px from the right; the body keeps the same 24px sides. It stays centered and13// opens from 96 percent with a fade (250ms, the strong ease-out); it closes faster than it opens.14function Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>) {15  return <DialogPrimitive.Root data-slot="dialog" {...props} />;16}17​18function DialogTrigger(props: React.ComponentProps<typeof DialogPrimitive.Trigger>) {19  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;20}21​22function DialogPortal(props: React.ComponentProps<typeof DialogPrimitive.Portal>) {23  const container = usePortalContainer();24  return <DialogPrimitive.Portal data-slot="dialog-portal" container={container} {...props} />;25}26​27function DialogClose(props: React.ComponentProps<typeof DialogPrimitive.Close>) {28  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;29}30​31function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {32  return (33    <DialogPrimitive.Overlay34      data-slot="dialog-overlay"35      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)}36      {...props}37    />38  );39}40​41function DialogContent({ className, children, showClose = true, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & { showClose?: boolean }) {42  return (43    <DialogPortal>44      <DialogOverlay />45      <DialogPrimitive.Content46        data-slot="dialog-content"47        className={cn(48          "fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-133.5 -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-dialog bg-surface text-fg outline-none data-[state=closed]:animate-dialog-out data-[state=open]:animate-dialog-in",49          className,50        )}51        {...props}52      >53        {children}54        {showClose && (55          <DialogPrimitive.Close56            data-slot="dialog-close"57            className="absolute top-5 right-5 inline-flex size-7 items-center justify-center rounded-control text-fg-faint outline-none transition-colors duration-150 ease-out hover:text-fg-muted focus-visible:outline-2 focus-visible:outline-focus-ring motion-reduce:transition-none"58          >59            <XIcon className="size-5.5" weight="bold" />60            <span className="sr-only">Close</span>61          </DialogPrimitive.Close>62        )}63      </DialogPrimitive.Content>64    </DialogPortal>65  );66}67​68function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {69  return <div data-slot="dialog-header" className={cn("flex min-h-17 shrink-0 flex-col justify-center gap-1 py-5 pr-14 pl-6", className)} {...props} />;70}71​72/** The scrolling middle of a dialog, with the head's 24px sides. */73function DialogBody({ className, ...props }: React.ComponentProps<"div">) {74  return <div data-slot="dialog-body" className={cn("min-h-0 flex-1 overflow-y-auto px-6 pb-6", className)} {...props} />;75}76​77function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {78  return <div data-slot="dialog-footer" className={cn("flex shrink-0 flex-col-reverse gap-3 px-6 pb-6 sm:flex-row sm:justify-end", className)} {...props} />;79}80​81function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {82  return <DialogPrimitive.Title data-slot="dialog-title" className={cn("font-sans text-h3 leading-heading font-normal text-fg", className)} {...props} />;83}84​85function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {86  return <DialogPrimitive.Description data-slot="dialog-description" className={cn("text-body leading-body text-fg-secondary", className)} {...props} />;87}88​89export { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };