@ngrok/mantle 0.82.1 → 0.83.1

package/dist/dialog-B6h1BCDL.d.ts

@@ -0,0 +1,895 @@
+import { t as ButtonIntent } from "./button-DdSKSj1c.js";
+import { n as IconButtonProps, r as IconButtonAppearance } from "./button-DJ7AAgII.js";
+import { a as Root, i as Overlay$1, n as Content$1, o as Title$1, r as Description$1, s as Trigger$1, t as Close$1 } from "./dialog-BM4wPCft.js";
+import { ComponentProps } from "react";
+//#region src/components/dialog/dialog.d.ts
+/**
+ * A button that opens the dialog.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/dialog#dialogtrigger
+ *
+ * @example
+ * ```tsx
+ * <Dialog.Root>
+ *   <Dialog.Trigger asChild>
+ *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+ *   </Dialog.Trigger>
+ *   <Dialog.Content>
+ *     <Dialog.Header>
+ *       <Dialog.Title>Dialog Title</Dialog.Title>
+ *       <Dialog.Description>This is an optional description.</Dialog.Description>
+ *       <Dialog.CloseIconButton />
+ *     </Dialog.Header>
+ *     <Dialog.Body>
+ *       <p>This is the dialog content.</p>
+ *     </Dialog.Body>
+ *     <Dialog.Footer>
+ *       <Dialog.Close asChild>
+ *         <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+ *       </Dialog.Close>
+ *       <Button type="button" appearance="filled" intent="neutral">Save</Button>
+ *     </Dialog.Footer>
+ *   </Dialog.Content>
+ * </Dialog.Root>
+ * ```
+ */
+declare const Trigger: (props: ComponentProps<typeof Trigger$1>) => import("react").JSX.Element;
+/**
+ * A button that closes the dialog when clicked. Wrap an interactive element
+ * with `asChild` to delegate the close behavior to your own button.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/dialog#dialogclose
+ *
+ * @example
+ * ```tsx
+ * <Dialog.Root>
+ *   <Dialog.Trigger asChild>
+ *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+ *   </Dialog.Trigger>
+ *   <Dialog.Content>
+ *     <Dialog.Header>
+ *       <Dialog.Title>Dialog Title</Dialog.Title>
+ *       <Dialog.Description>This is an optional description.</Dialog.Description>
+ *       <Dialog.CloseIconButton />
+ *     </Dialog.Header>
+ *     <Dialog.Body>
+ *       <p>This is the dialog content.</p>
+ *     </Dialog.Body>
+ *     <Dialog.Footer>
+ *       <Dialog.Close asChild>
+ *         <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+ *       </Dialog.Close>
+ *       <Button type="button" appearance="filled" intent="neutral">Save</Button>
+ *     </Dialog.Footer>
+ *   </Dialog.Content>
+ * </Dialog.Root>
+ * ```
+ */
+declare const Close: (props: ComponentProps<typeof Close$1>) => import("react").JSX.Element;
+/**
+ * The backdrop overlay for the dialog. Sits between the page and the dialog
+ * content and applies a blur and dim effect.
+ *
+ * Most consumers should not need to use this directly — `Dialog.Content`
+ * renders an overlay automatically. Use this only when composing a custom
+ * `Dialog.Portal` tree.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/dialog#api-reference
+ *
+ * @example
+ * ```tsx
+ * <Dialog.Root>
+ *   <Dialog.Trigger asChild>
+ *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+ *   </Dialog.Trigger>
+ *   <Dialog.Portal>
+ *     <Dialog.Overlay />
+ *     <Dialog.Content>
+ *       <Dialog.Header>
+ *         <Dialog.Title>Dialog Title</Dialog.Title>
+ *         <Dialog.Description>This is an optional description.</Dialog.Description>
+ *         <Dialog.CloseIconButton />
+ *       </Dialog.Header>
+ *       <Dialog.Body>
+ *         <p>This is the dialog content.</p>
+ *       </Dialog.Body>
+ *       <Dialog.Footer>
+ *         <Dialog.Close asChild>
+ *           <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+ *         </Dialog.Close>
+ *         <Button type="button" appearance="filled" intent="neutral">Save</Button>
+ *       </Dialog.Footer>
+ *     </Dialog.Content>
+ *   </Dialog.Portal>
+ * </Dialog.Root>
+ * ```
+ */
+declare const Overlay: ({ className, ref, ...props }: ComponentProps<typeof Overlay$1>) => import("react").JSX.Element;
+type ContentProps = ComponentProps<typeof Content$1> & ({
+  /**
+   * How much of the viewport the dialog claims. `"centered"` is a card
+   * capped at `preferredWidth`; `"full-page"` fills the 16px-inset box
+   * `Dialog.Content` already positions itself in; `"full-bleed"` fills the
+   * viewport edge to edge, square and unbordered.
+   *
+   * Reflected as `data-appearance`.
+   *
+   * @default "centered"
+   */
+  appearance?: "centered";
+  /**
+   * The maximum width of a `"centered"` dialog, as a Tailwind `max-w-`
+   * class. The dialog stays responsive below it.
+   *
+   * @default "max-w-lg"
+   */
+  preferredWidth?: `max-w-${string}`;
+} | {
+  /**
+   * How much of the viewport the dialog claims. `"full-page"` fills the
+   * 16px-inset box `Dialog.Content` already positions itself in;
+   * `"full-bleed"` fills the whole viewport, square and unbordered.
+   *
+   * Reflected as `data-appearance`.
+   */
+  appearance: "full-page" | "full-bleed";
+  /**
+   * Never set here. A `"full-page"` or `"full-bleed"` dialog fills its box,
+   * so it has no width to cap — pass `appearance="centered"` to cap it.
+   */
+  preferredWidth?: never;
+});
+/**
+ * The container for the dialog content.
+ * Renders on top of the overlay and is centered in the viewport.
+ *
+ * `Dialog.Content` renders its floating layer at Tailwind `z-50`, Mantle's
+ * shared floating z-index. When multiple shared layers are open, the most
+ * recently mounted layer renders on top.
+ *
+ * `appearance` decides how much of the viewport the dialog claims. `"centered"`
+ * caps it at `preferredWidth`, `"full-page"` fills the 16px-inset box, and
+ * `"full-bleed"` fills the whole viewport.
+ *
+ * | Data Attribute    | Value                                            | Description                                                          |
+ * | ----------------- | ------------------------------------------------ | -------------------------------------------------------------------- |
+ * | `data-appearance` | `"centered"` \| `"full-page"` \| `"full-bleed"`   | Reflects the resolved `appearance`.                                  |
+ * | `data-state`      | `"open"` \| `"closed"`                           | Stamped by Radix; drives the open and close animation.               |
+ *
+ * @see https://mantle.ngrok.com/components/overlays/dialog#dialogcontent
+ *
+ * @example
+ * ```tsx
+ * <Dialog.Root>
+ *   <Dialog.Trigger asChild>
+ *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+ *   </Dialog.Trigger>
+ *   <Dialog.Content>
+ *     <Dialog.Header>
+ *       <Dialog.Title>Dialog Title</Dialog.Title>
+ *       <Dialog.Description>This is an optional description.</Dialog.Description>
+ *       <Dialog.CloseIconButton />
+ *     </Dialog.Header>
+ *     <Dialog.Body>
+ *       <p>This is the dialog content.</p>
+ *     </Dialog.Body>
+ *     <Dialog.Footer>
+ *       <Dialog.Close asChild>
+ *         <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+ *       </Dialog.Close>
+ *       <Button type="button" appearance="filled" intent="neutral">Save</Button>
+ *     </Dialog.Footer>
+ *   </Dialog.Content>
+ * </Dialog.Root>
+ * ```
+ *
+ * @example
+ * Full bleed, for content that needs the whole viewport:
+ * ```tsx
+ * <Dialog.Root>
+ *   <Dialog.Trigger asChild>
+ *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+ *   </Dialog.Trigger>
+ *   <Dialog.Content appearance="full-bleed">
+ *     <Dialog.Header>
+ *       <Dialog.Title>Request log</Dialog.Title>
+ *       <Dialog.CloseIconButton />
+ *     </Dialog.Header>
+ *     <Dialog.Body>
+ *       <p>This is the dialog content.</p>
+ *     </Dialog.Body>
+ *     <Dialog.Footer>
+ *       <Dialog.Close asChild>
+ *         <Button type="button" appearance="outlined" intent="neutral">Close</Button>
+ *       </Dialog.Close>
+ *     </Dialog.Footer>
+ *   </Dialog.Content>
+ * </Dialog.Root>
+ * ```
+ */
+declare const Content: ({ appearance, children, className, preferredWidth, ref, ...props }: ContentProps) => import("react").JSX.Element;
+/**
+ * Contains the header content of the dialog, including the title and close button.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/dialog#dialogheader
+ *
+ * @example
+ * ```tsx
+ * <Dialog.Root>
+ *   <Dialog.Trigger asChild>
+ *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+ *   </Dialog.Trigger>
+ *   <Dialog.Content>
+ *     <Dialog.Header>
+ *       <Dialog.Title>Dialog Title</Dialog.Title>
+ *       <Dialog.Description>This is an optional description.</Dialog.Description>
+ *       <Dialog.CloseIconButton />
+ *     </Dialog.Header>
+ *     <Dialog.Body>
+ *       <p>This is the dialog content.</p>
+ *     </Dialog.Body>
+ *     <Dialog.Footer>
+ *       <Dialog.Close asChild>
+ *         <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+ *       </Dialog.Close>
+ *       <Button type="button" appearance="filled" intent="neutral">Save</Button>
+ *     </Dialog.Footer>
+ *   </Dialog.Content>
+ * </Dialog.Root>
+ * ```
+ */
+declare const Header: ({ className, children, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+type CloseIconButtonProps = Partial<Omit<IconButtonProps, "appearance" | "icon" | "intent">> & {
+  /**
+   * The visual style of the close icon button. Optional here —
+   * `Dialog.CloseIconButton` defaults to `"ghost"` so the close affordance
+   * stays visually quiet in the dialog header.
+   *
+   * @default "ghost"
+   */
+  appearance?: IconButtonAppearance;
+  /**
+   * The tone of the close icon button. Optional here —
+   * `Dialog.CloseIconButton` defaults to `"neutral"`, the workhorse tone for
+   * routine actions like dismissing a dialog.
+   *
+   * @default "neutral"
+   */
+  intent?: ButtonIntent;
+};
+/**
+ * An icon button that closes the dialog when clicked.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/dialog#dialogcloseiconbutton
+ *
+ * @example
+ * ```tsx
+ * <Dialog.Root>
+ *   <Dialog.Trigger asChild>
+ *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+ *   </Dialog.Trigger>
+ *   <Dialog.Content>
+ *     <Dialog.Header>
+ *       <Dialog.Title>Dialog Title</Dialog.Title>
+ *       <Dialog.Description>This is an optional description.</Dialog.Description>
+ *       <Dialog.CloseIconButton />
+ *     </Dialog.Header>
+ *     <Dialog.Body>
+ *       <p>This is the dialog content.</p>
+ *     </Dialog.Body>
+ *     <Dialog.Footer>
+ *       <Dialog.Close asChild>
+ *         <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+ *       </Dialog.Close>
+ *       <Button type="button" appearance="filled" intent="neutral">Save</Button>
+ *     </Dialog.Footer>
+ *   </Dialog.Content>
+ * </Dialog.Root>
+ * ```
+ */
+declare const CloseIconButton: ({ size, type, label, appearance, intent, ...props }: CloseIconButtonProps) => import("react").JSX.Element;
+/**
+ * Contains the main content of the dialog.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/dialog#dialogbody
+ *
+ * @example
+ * ```tsx
+ * <Dialog.Root>
+ *   <Dialog.Trigger asChild>
+ *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+ *   </Dialog.Trigger>
+ *   <Dialog.Content>
+ *     <Dialog.Header>
+ *       <Dialog.Title>Dialog Title</Dialog.Title>
+ *       <Dialog.Description>This is an optional description.</Dialog.Description>
+ *       <Dialog.CloseIconButton />
+ *     </Dialog.Header>
+ *     <Dialog.Body>
+ *       <p>This is the dialog content.</p>
+ *     </Dialog.Body>
+ *     <Dialog.Footer>
+ *       <Dialog.Close asChild>
+ *         <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+ *       </Dialog.Close>
+ *       <Button type="button" appearance="filled" intent="neutral">Save</Button>
+ *     </Dialog.Footer>
+ *   </Dialog.Content>
+ * </Dialog.Root>
+ * ```
+ */
+declare const Body: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+/**
+ * Contains the footer content of the dialog, including action buttons.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/dialog#dialogfooter
+ *
+ * @example
+ * ```tsx
+ * <Dialog.Root>
+ *   <Dialog.Trigger asChild>
+ *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+ *   </Dialog.Trigger>
+ *   <Dialog.Content>
+ *     <Dialog.Header>
+ *       <Dialog.Title>Dialog Title</Dialog.Title>
+ *       <Dialog.Description>This is an optional description.</Dialog.Description>
+ *       <Dialog.CloseIconButton />
+ *     </Dialog.Header>
+ *     <Dialog.Body>
+ *       <p>This is the dialog content.</p>
+ *     </Dialog.Body>
+ *     <Dialog.Footer>
+ *       <Dialog.Close asChild>
+ *         <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+ *       </Dialog.Close>
+ *       <Button type="button" appearance="filled" intent="neutral">Save</Button>
+ *     </Dialog.Footer>
+ *   </Dialog.Content>
+ * </Dialog.Root>
+ * ```
+ */
+declare const Footer: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+/**
+ * An accessible name to be announced when the dialog is opened.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/dialog#dialogtitle
+ *
+ * @example
+ * ```tsx
+ * <Dialog.Root>
+ *   <Dialog.Trigger asChild>
+ *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+ *   </Dialog.Trigger>
+ *   <Dialog.Content>
+ *     <Dialog.Header>
+ *       <Dialog.Title>Dialog Title</Dialog.Title>
+ *       <Dialog.Description>This is an optional description.</Dialog.Description>
+ *       <Dialog.CloseIconButton />
+ *     </Dialog.Header>
+ *     <Dialog.Body>
+ *       <p>This is the dialog content.</p>
+ *     </Dialog.Body>
+ *     <Dialog.Footer>
+ *       <Dialog.Close asChild>
+ *         <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+ *       </Dialog.Close>
+ *       <Button type="button" appearance="filled" intent="neutral">Save</Button>
+ *     </Dialog.Footer>
+ *   </Dialog.Content>
+ * </Dialog.Root>
+ * ```
+ */
+declare const Title: ({ className, ref, ...props }: ComponentProps<typeof Title$1>) => import("react").JSX.Element;
+/**
+ * An accessible description to be announced when the dialog is opened.
+ * Renders as a `div` by default, but can be changed to any other element using
+ * the `asChild` prop.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/dialog#dialogdescription
+ *
+ * @example
+ * ```tsx
+ * <Dialog.Root>
+ *   <Dialog.Trigger asChild>
+ *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+ *   </Dialog.Trigger>
+ *   <Dialog.Content>
+ *     <Dialog.Header>
+ *       <Dialog.Title>Dialog Title</Dialog.Title>
+ *       <Dialog.Description>This is an optional description.</Dialog.Description>
+ *       <Dialog.CloseIconButton />
+ *     </Dialog.Header>
+ *     <Dialog.Body>
+ *       <p>This is the dialog content.</p>
+ *     </Dialog.Body>
+ *     <Dialog.Footer>
+ *       <Dialog.Close asChild>
+ *         <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+ *       </Dialog.Close>
+ *       <Button type="button" appearance="filled" intent="neutral">Save</Button>
+ *     </Dialog.Footer>
+ *   </Dialog.Content>
+ * </Dialog.Root>
+ * ```
+ */
+declare const Description: ({ className, ref, ...props }: ComponentProps<typeof Description$1>) => import("react").JSX.Element;
+/**
+ * A window overlaid on either the primary window or another dialog window. Use
+ * Dialog for a focused modal that interrupts the user to gather input or
+ * confirm a non-destructive choice. For destructive or irreversible
+ * confirmations (delete, sign out, leave without saving), prefer `AlertDialog`.
+ * For side-panel content that slides in from an edge (filter panels, detail
+ * views, navigation drawers), prefer `Sheet`.
+ *
+ * `Dialog` renders its floating layer at Tailwind `z-50`, Mantle's shared
+ * floating z-index. When multiple shared layers are open, the most recently
+ * mounted layer renders on top.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/dialog
+ *
+ * @example
+ * Composition:
+ * ```
+ * Dialog.Root
+ * ├── Dialog.Trigger
+ * └── Dialog.Content
+ *     ├── Dialog.Header
+ *     │   ├── Dialog.Title
+ *     │   ├── Dialog.Description
+ *     │   └── Dialog.CloseIconButton
+ *     ├── Dialog.Body
+ *     └── Dialog.Footer
+ *         └── Dialog.Close
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Dialog.Root>
+ *   <Dialog.Trigger asChild>
+ *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+ *   </Dialog.Trigger>
+ *   <Dialog.Content>
+ *     <Dialog.Header>
+ *       <Dialog.Title>Dialog Title</Dialog.Title>
+ *       <Dialog.Description>This is an optional description.</Dialog.Description>
+ *       <Dialog.CloseIconButton />
+ *     </Dialog.Header>
+ *     <Dialog.Body>
+ *       <p>This is the dialog content.</p>
+ *     </Dialog.Body>
+ *     <Dialog.Footer>
+ *       <Dialog.Close asChild>
+ *         <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+ *       </Dialog.Close>
+ *       <Button type="button" appearance="filled" intent="neutral">Save</Button>
+ *     </Dialog.Footer>
+ *   </Dialog.Content>
+ * </Dialog.Root>
+ * ```
+ */
+declare const Dialog: {
+  /**
+   * A window overlaid on either the primary window or another dialog window.
+   * The root stateful component for the Dialog.
+   *
+   * `Dialog` renders its floating layer at Tailwind `z-50`, Mantle's shared
+   * floating z-index. When multiple shared layers are open, the most recently
+   * mounted layer renders on top.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/dialog#dialogroot
+   *
+   * @example
+   * ```tsx
+   * <Dialog.Root>
+   *   <Dialog.Trigger asChild>
+   *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+   *   </Dialog.Trigger>
+   *   <Dialog.Content>
+   *     <Dialog.Header>
+   *       <Dialog.Title>Dialog Title</Dialog.Title>
+   *       <Dialog.Description>This is an optional description.</Dialog.Description>
+   *       <Dialog.CloseIconButton />
+   *     </Dialog.Header>
+   *     <Dialog.Body>
+   *       <p>This is the dialog content.</p>
+   *     </Dialog.Body>
+   *     <Dialog.Footer>
+   *       <Dialog.Close asChild>
+   *         <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+   *       </Dialog.Close>
+   *       <Button type="button" appearance="filled" intent="neutral">Save</Button>
+   *     </Dialog.Footer>
+   *   </Dialog.Content>
+   * </Dialog.Root>
+   * ```
+   */
+  readonly Root: typeof Root;
+  /**
+   * Contains the main content of the dialog.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/dialog#dialogbody
+   *
+   * @example
+   * ```tsx
+   * <Dialog.Root>
+   *   <Dialog.Trigger asChild>
+   *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+   *   </Dialog.Trigger>
+   *   <Dialog.Content>
+   *     <Dialog.Header>
+   *       <Dialog.Title>Dialog Title</Dialog.Title>
+   *       <Dialog.Description>This is an optional description.</Dialog.Description>
+   *       <Dialog.CloseIconButton />
+   *     </Dialog.Header>
+   *     <Dialog.Body>
+   *       <p>This is the dialog content.</p>
+   *     </Dialog.Body>
+   *     <Dialog.Footer>
+   *       <Dialog.Close asChild>
+   *         <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+   *       </Dialog.Close>
+   *       <Button type="button" appearance="filled" intent="neutral">Save</Button>
+   *     </Dialog.Footer>
+   *   </Dialog.Content>
+   * </Dialog.Root>
+   * ```
+   */
+  readonly Body: typeof Body;
+  /**
+   * A button that closes the dialog when clicked.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/dialog#dialogclose
+   *
+   * @example
+   * ```tsx
+   * <Dialog.Root>
+   *   <Dialog.Trigger asChild>
+   *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+   *   </Dialog.Trigger>
+   *   <Dialog.Content>
+   *     <Dialog.Header>
+   *       <Dialog.Title>Dialog Title</Dialog.Title>
+   *       <Dialog.Description>This is an optional description.</Dialog.Description>
+   *       <Dialog.CloseIconButton />
+   *     </Dialog.Header>
+   *     <Dialog.Body>
+   *       <p>This is the dialog content.</p>
+   *     </Dialog.Body>
+   *     <Dialog.Footer>
+   *       <Dialog.Close asChild>
+   *         <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+   *       </Dialog.Close>
+   *       <Button type="button" appearance="filled" intent="neutral">Save</Button>
+   *     </Dialog.Footer>
+   *   </Dialog.Content>
+   * </Dialog.Root>
+   * ```
+   */
+  readonly Close: typeof Close;
+  /**
+   * An icon button that closes the dialog when clicked.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/dialog#dialogcloseiconbutton
+   *
+   * @example
+   * ```tsx
+   * <Dialog.Root>
+   *   <Dialog.Trigger asChild>
+   *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+   *   </Dialog.Trigger>
+   *   <Dialog.Content>
+   *     <Dialog.Header>
+   *       <Dialog.Title>Dialog Title</Dialog.Title>
+   *       <Dialog.Description>This is an optional description.</Dialog.Description>
+   *       <Dialog.CloseIconButton />
+   *     </Dialog.Header>
+   *     <Dialog.Body>
+   *       <p>This is the dialog content.</p>
+   *     </Dialog.Body>
+   *     <Dialog.Footer>
+   *       <Dialog.Close asChild>
+   *         <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+   *       </Dialog.Close>
+   *       <Button type="button" appearance="filled" intent="neutral">Save</Button>
+   *     </Dialog.Footer>
+   *   </Dialog.Content>
+   * </Dialog.Root>
+   * ```
+   */
+  readonly CloseIconButton: typeof CloseIconButton;
+  /**
+   * The container for the dialog content.
+   * Renders on top of the overlay and is centered in the viewport.
+   *
+   * `Dialog.Content` renders its floating layer at Tailwind `z-50`, Mantle's
+   * shared floating z-index. When multiple shared layers are open, the most
+   * recently mounted layer renders on top.
+   *
+   * `appearance` decides how much of the viewport the dialog claims. `"centered"`
+   * caps it at `preferredWidth`, `"full-page"` fills the 16px-inset box, and
+   * `"full-bleed"` fills the whole viewport.
+   *
+   * | Data Attribute    | Value                                            | Description                                                          |
+   * | ----------------- | ------------------------------------------------ | -------------------------------------------------------------------- |
+   * | `data-appearance` | `"centered"` \| `"full-page"` \| `"full-bleed"`   | Reflects the resolved `appearance`.                                  |
+   * | `data-state`      | `"open"` \| `"closed"`                           | Stamped by Radix; drives the open and close animation.               |
+   *
+   * @see https://mantle.ngrok.com/components/overlays/dialog#dialogcontent
+   *
+   * @example
+   * ```tsx
+   * <Dialog.Root>
+   *   <Dialog.Trigger asChild>
+   *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+   *   </Dialog.Trigger>
+   *   <Dialog.Content>
+   *     <Dialog.Header>
+   *       <Dialog.Title>Dialog Title</Dialog.Title>
+   *       <Dialog.Description>This is an optional description.</Dialog.Description>
+   *       <Dialog.CloseIconButton />
+   *     </Dialog.Header>
+   *     <Dialog.Body>
+   *       <p>This is the dialog content.</p>
+   *     </Dialog.Body>
+   *     <Dialog.Footer>
+   *       <Dialog.Close asChild>
+   *         <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+   *       </Dialog.Close>
+   *       <Button type="button" appearance="filled" intent="neutral">Save</Button>
+   *     </Dialog.Footer>
+   *   </Dialog.Content>
+   * </Dialog.Root>
+   * ```
+   *
+   * @example
+   * Full bleed, for content that needs the whole viewport:
+   * ```tsx
+   * <Dialog.Root>
+   *   <Dialog.Trigger asChild>
+   *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+   *   </Dialog.Trigger>
+   *   <Dialog.Content appearance="full-bleed">
+   *     <Dialog.Header>
+   *       <Dialog.Title>Request log</Dialog.Title>
+   *       <Dialog.CloseIconButton />
+   *     </Dialog.Header>
+   *     <Dialog.Body>
+   *       <p>This is the dialog content.</p>
+   *     </Dialog.Body>
+   *     <Dialog.Footer>
+   *       <Dialog.Close asChild>
+   *         <Button type="button" appearance="outlined" intent="neutral">Close</Button>
+   *       </Dialog.Close>
+   *     </Dialog.Footer>
+   *   </Dialog.Content>
+   * </Dialog.Root>
+   * ```
+   */
+  readonly Content: typeof Content;
+  /**
+   * An accessible description to be announced when the dialog is opened.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/dialog#dialogdescription
+   *
+   * @example
+   * ```tsx
+   * <Dialog.Root>
+   *   <Dialog.Trigger asChild>
+   *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+   *   </Dialog.Trigger>
+   *   <Dialog.Content>
+   *     <Dialog.Header>
+   *       <Dialog.Title>Dialog Title</Dialog.Title>
+   *       <Dialog.Description>This is an optional description.</Dialog.Description>
+   *       <Dialog.CloseIconButton />
+   *     </Dialog.Header>
+   *     <Dialog.Body>
+   *       <p>This is the dialog content.</p>
+   *     </Dialog.Body>
+   *     <Dialog.Footer>
+   *       <Dialog.Close asChild>
+   *         <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+   *       </Dialog.Close>
+   *       <Button type="button" appearance="filled" intent="neutral">Save</Button>
+   *     </Dialog.Footer>
+   *   </Dialog.Content>
+   * </Dialog.Root>
+   * ```
+   */
+  readonly Description: typeof Description;
+  /**
+   * Contains the footer content of the dialog, including action buttons.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/dialog#dialogfooter
+   *
+   * @example
+   * ```tsx
+   * <Dialog.Root>
+   *   <Dialog.Trigger asChild>
+   *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+   *   </Dialog.Trigger>
+   *   <Dialog.Content>
+   *     <Dialog.Header>
+   *       <Dialog.Title>Dialog Title</Dialog.Title>
+   *       <Dialog.Description>This is an optional description.</Dialog.Description>
+   *       <Dialog.CloseIconButton />
+   *     </Dialog.Header>
+   *     <Dialog.Body>
+   *       <p>This is the dialog content.</p>
+   *     </Dialog.Body>
+   *     <Dialog.Footer>
+   *       <Dialog.Close asChild>
+   *         <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+   *       </Dialog.Close>
+   *       <Button type="button" appearance="filled" intent="neutral">Save</Button>
+   *     </Dialog.Footer>
+   *   </Dialog.Content>
+   * </Dialog.Root>
+   * ```
+   */
+  readonly Footer: typeof Footer;
+  /**
+   * Contains the header content of the dialog, including the title and close button.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/dialog#dialogheader
+   *
+   * @example
+   * ```tsx
+   * <Dialog.Root>
+   *   <Dialog.Trigger asChild>
+   *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+   *   </Dialog.Trigger>
+   *   <Dialog.Content>
+   *     <Dialog.Header>
+   *       <Dialog.Title>Dialog Title</Dialog.Title>
+   *       <Dialog.Description>This is an optional description.</Dialog.Description>
+   *       <Dialog.CloseIconButton />
+   *     </Dialog.Header>
+   *     <Dialog.Body>
+   *       <p>This is the dialog content.</p>
+   *     </Dialog.Body>
+   *     <Dialog.Footer>
+   *       <Dialog.Close asChild>
+   *         <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+   *       </Dialog.Close>
+   *       <Button type="button" appearance="filled" intent="neutral">Save</Button>
+   *     </Dialog.Footer>
+   *   </Dialog.Content>
+   * </Dialog.Root>
+   * ```
+   */
+  readonly Header: typeof Header;
+  /**
+   * The overlay backdrop for the dialog.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/dialog#api-reference
+   *
+   * @example
+   * ```tsx
+   * <Dialog.Root>
+   *   <Dialog.Trigger asChild>
+   *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+   *   </Dialog.Trigger>
+   *   <Dialog.Portal>
+   *     <Dialog.Overlay />
+   *     <Dialog.Content>
+   *       <Dialog.Header>
+   *         <Dialog.Title>Dialog Title</Dialog.Title>
+   *         <Dialog.Description>This is an optional description.</Dialog.Description>
+   *         <Dialog.CloseIconButton />
+   *       </Dialog.Header>
+   *       <Dialog.Body>
+   *         <p>This is the dialog content.</p>
+   *       </Dialog.Body>
+   *       <Dialog.Footer>
+   *         <Dialog.Close asChild>
+   *           <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+   *         </Dialog.Close>
+   *         <Button type="button" appearance="filled" intent="neutral">Save</Button>
+   *       </Dialog.Footer>
+   *     </Dialog.Content>
+   *   </Dialog.Portal>
+   * </Dialog.Root>
+   * ```
+   */
+  readonly Overlay: typeof Overlay;
+  /**
+   * The portal container for the dialog.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/dialog#api-reference
+   *
+   * @example
+   * ```tsx
+   * <Dialog.Root>
+   *   <Dialog.Trigger asChild>
+   *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+   *   </Dialog.Trigger>
+   *   <Dialog.Portal>
+   *     <Dialog.Overlay />
+   *     <Dialog.Content>
+   *       <Dialog.Header>
+   *         <Dialog.Title>Dialog Title</Dialog.Title>
+   *         <Dialog.Description>This is an optional description.</Dialog.Description>
+   *         <Dialog.CloseIconButton />
+   *       </Dialog.Header>
+   *       <Dialog.Body>
+   *         <p>This is the dialog content.</p>
+   *       </Dialog.Body>
+   *       <Dialog.Footer>
+   *         <Dialog.Close asChild>
+   *           <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+   *         </Dialog.Close>
+   *         <Button type="button" appearance="filled" intent="neutral">Save</Button>
+   *       </Dialog.Footer>
+   *     </Dialog.Content>
+   *   </Dialog.Portal>
+   * </Dialog.Root>
+   * ```
+   */
+  readonly Portal: import("react").FC<import("@radix-ui/react-dialog").DialogPortalProps>;
+  /**
+   * An accessible name to be announced when the dialog is opened.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/dialog#dialogtitle
+   *
+   * @example
+   * ```tsx
+   * <Dialog.Root>
+   *   <Dialog.Trigger asChild>
+   *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+   *   </Dialog.Trigger>
+   *   <Dialog.Content>
+   *     <Dialog.Header>
+   *       <Dialog.Title>Dialog Title</Dialog.Title>
+   *       <Dialog.Description>This is an optional description.</Dialog.Description>
+   *       <Dialog.CloseIconButton />
+   *     </Dialog.Header>
+   *     <Dialog.Body>
+   *       <p>This is the dialog content.</p>
+   *     </Dialog.Body>
+   *     <Dialog.Footer>
+   *       <Dialog.Close asChild>
+   *         <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+   *       </Dialog.Close>
+   *       <Button type="button" appearance="filled" intent="neutral">Save</Button>
+   *     </Dialog.Footer>
+   *   </Dialog.Content>
+   * </Dialog.Root>
+   * ```
+   */
+  readonly Title: typeof Title;
+  /**
+   * A button that opens the dialog.
+   *
+   * @see https://mantle.ngrok.com/components/overlays/dialog#dialogtrigger
+   *
+   * @example
+   * ```tsx
+   * <Dialog.Root>
+   *   <Dialog.Trigger asChild>
+   *     <Button type="button" appearance="filled" intent="neutral">Open Dialog</Button>
+   *   </Dialog.Trigger>
+   *   <Dialog.Content>
+   *     <Dialog.Header>
+   *       <Dialog.Title>Dialog Title</Dialog.Title>
+   *       <Dialog.Description>This is an optional description.</Dialog.Description>
+   *       <Dialog.CloseIconButton />
+   *     </Dialog.Header>
+   *     <Dialog.Body>
+   *       <p>This is the dialog content.</p>
+   *     </Dialog.Body>
+   *     <Dialog.Footer>
+   *       <Dialog.Close asChild>
+   *         <Button type="button" appearance="outlined" intent="neutral">Cancel</Button>
+   *       </Dialog.Close>
+   *       <Button type="button" appearance="filled" intent="neutral">Save</Button>
+   *     </Dialog.Footer>
+   *   </Dialog.Content>
+   * </Dialog.Root>
+   * ```
+   */
+  readonly Trigger: typeof Trigger;
+};
+//#endregion
+export { Dialog as t };