@ngrok/mantle 0.32.3 → 0.40.0

package/dist/alert-dialog.d.ts

@@ -1,17 +1,17 @@
+import * as _radix_ui_react_dialog from '@radix-ui/react-dialog';
 import { D as DeepNonNullable } from './deep-non-nullable-SmpSvoSd.js';
 import * as class_variance_authority from 'class-variance-authority';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as react from 'react';
 import { ComponentProps, ReactNode } from 'react';
-import * as _radix_ui_react_dialog from '@radix-ui/react-dialog';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { W as WithAsChild } from './as-child-DJ7x3JFV.js';
-import { R as Root } from './primitive-BUbUB7RS.js';
+import { R as Root$1 } from './primitive-BUbUB7RS.js';
 import { S as SvgAttributes } from './types-BuKAGhC-.js';
 
 declare const priorities: readonly ["info", "danger"];
 type Priority = (typeof priorities)[number];
-type AlertDialogProps = ComponentProps<typeof Root> & {
+type AlertDialogProps = ComponentProps<typeof Root$1> & {
     /**
      * Indicates the importance or impact level of the AlertDialog, affecting its
      * color and styling to communicate its purpose to the user.
@@ -27,491 +27,340 @@ type AlertDialogProps = ComponentProps<typeof Root> & {
  *
  * @example
  * ```tsx
- * <AlertDialog priority="danger">
- *   <AlertDialogTrigger asChild>
+ * <AlertDialog.Root priority="danger">
+ *   <AlertDialog.Trigger asChild>
  *     <Button type="button" appearance="outlined">
  *       Show Danger Alert Dialog
  *     </Button>
- *   </AlertDialogTrigger>
- *   <AlertDialogContent>
- *     <AlertDialogIcon />
- *     <AlertDialogBody>
- *       <AlertDialogHeader>
- *         <AlertDialogTitle>
+ *   </AlertDialog.Trigger>
+ *   <AlertDialog.Content>
+ *     <AlertDialog.Icon />
+ *     <AlertDialog.Body>
+ *       <AlertDialog.Header>
+ *         <AlertDialog.Title>
  *           Are you absolutely sure?
- *         </AlertDialogTitle>
- *         <AlertDialogDescription>
+ *         </AlertDialog.Title>
+ *         <AlertDialog.Description>
  *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
- *         </AlertDialogDescription>
- *       </AlertDialogHeader>
- *       <AlertDialogFooter>
- *         <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
- *         <AlertDialogAction type="button">
+ *         </AlertDialog.Description>
+ *       </AlertDialog.Header>
+ *       <AlertDialog.Footer>
+ *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+ *         <AlertDialog.Action type="button">
  *           Continue
- *         </AlertDialogAction>
- *       </AlertDialogFooter>
- *   	</AlertDialogBody>
- *   </AlertDialogContent>
- * </AlertDialog>
+ *         </AlertDialog.Action>
+ *       </AlertDialog.Footer>
+ *     </AlertDialog.Body>
+ *   </AlertDialog.Content>
+ * </AlertDialog.Root>
  * ```
  */
-declare function AlertDialog({ priority, ...props }: AlertDialogProps): react_jsx_runtime.JSX.Element;
-declare namespace AlertDialog {
+declare function Root({ priority, ...props }: AlertDialogProps): react_jsx_runtime.JSX.Element;
+declare namespace Root {
     var displayName: string;
 }
+type AlertDialogIconProps = Omit<SvgAttributes, "children"> & {
+    svg?: ReactNode;
+};
 /**
- * A button that opens the Alert Dialog.
- *
- * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-trigger
- *
- * @example
- * ```tsx
- * <AlertDialog priority="danger">
- *   <AlertDialogTrigger asChild>
- *     <Button type="button" appearance="outlined">
- *       Show Danger Alert Dialog
- *     </Button>
- *   </AlertDialogTrigger>
- *   <AlertDialogContent>
- *     <AlertDialogIcon />
- *     <AlertDialogBody>
- *       <AlertDialogHeader>
- *         <AlertDialogTitle>
- *           Are you absolutely sure?
- *         </AlertDialogTitle>
- *         <AlertDialogDescription>
- *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
- *         </AlertDialogDescription>
- *       </AlertDialogHeader>
- *       <AlertDialogFooter>
- *         <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
- *         <AlertDialogAction type="button">
- *           Continue
- *         </AlertDialogAction>
- *       </AlertDialogFooter>
- *   	</AlertDialogBody>
- *   </AlertDialogContent>
- * </AlertDialog>
- * ```
- */
-declare const AlertDialogTrigger: react.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
-/**
- * The popover alert dialog container.
- *
- * Renders on top of the overlay and is centered in the viewport.
+ * A modal dialog that interrupts the user with important content and expects a
+ * response.
  *
- * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-content
+ * @see https://mantle.ngrok.com/components/alert-dialog
  *
  * @example
  * ```tsx
- * <AlertDialog priority="danger">
- *   <AlertDialogTrigger asChild>
+ * <AlertDialog.Root priority="danger">
+ *   <AlertDialog.Trigger asChild>
  *     <Button type="button" appearance="outlined">
  *       Show Danger Alert Dialog
  *     </Button>
- *   </AlertDialogTrigger>
- *   <AlertDialogContent>
- *     <AlertDialogIcon />
- *     <AlertDialogBody>
- *       <AlertDialogHeader>
- *         <AlertDialogTitle>
+ *   </AlertDialog.Trigger>
+ *   <AlertDialog.Content>
+ *     <AlertDialog.Icon />
+ *     <AlertDialog.Body>
+ *       <AlertDialog.Header>
+ *         <AlertDialog.Title>
  *           Are you absolutely sure?
- *         </AlertDialogTitle>
- *         <AlertDialogDescription>
+ *         </AlertDialog.Title>
+ *         <AlertDialog.Description>
  *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
- *         </AlertDialogDescription>
- *       </AlertDialogHeader>
- *       <AlertDialogFooter>
- *         <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
- *         <AlertDialogAction type="button">
+ *         </AlertDialog.Description>
+ *       </AlertDialog.Header>
+ *       <AlertDialog.Footer>
+ *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+ *         <AlertDialog.Action type="button">
  *           Continue
- *         </AlertDialogAction>
- *       </AlertDialogFooter>
- *   	</AlertDialogBody>
- *   </AlertDialogContent>
- * </AlertDialog>
+ *         </AlertDialog.Action>
+ *       </AlertDialog.Footer>
+ *     </AlertDialog.Body>
+ *   </AlertDialog.Content>
+ * </AlertDialog.Root>
  * ```
  */
-declare const AlertDialogContent: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog.DialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & {
+declare const AlertDialog: {
     /**
-     * The preferred width of the `AlertDialogContent` as a tailwind `max-w-` class.
+     * A modal dialog that interrupts the user with important content and expects a response.
      *
-     * By default, a `AlertDialog`'s content width is responsive with a default
-     * preferred width: the maximum width of the `AlertDialogContent`
+     * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-root
      *
-     * @default `max-w-md`
+     * @example
+     * ```tsx
+     * <AlertDialog.Root priority="danger">
+     *   <AlertDialog.Trigger asChild>
+     *     <Button type="button" appearance="outlined">
+     *       Show Alert Dialog
+     *     </Button>
+     *   </AlertDialog.Trigger>
+     *   <AlertDialog.Content>
+     *     <AlertDialog.Icon />
+     *     <AlertDialog.Body>
+     *       <AlertDialog.Header>
+     *         <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
+     *         <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
+     *       </AlertDialog.Header>
+     *       <AlertDialog.Footer>
+     *         <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+     *         <AlertDialog.Action>Continue</AlertDialog.Action>
+     *       </AlertDialog.Footer>
+     *     </AlertDialog.Body>
+     *   </AlertDialog.Content>
+     * </AlertDialog.Root>
+     * ```
      */
-    preferredWidth?: `max-w-${string}`;
-} & react.RefAttributes<HTMLDivElement>>;
-/**
- * Contains the main content of the alert dialog.
- *
- * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-body
- *
- * @example
- * ```tsx
- * <AlertDialog priority="danger">
- *   <AlertDialogTrigger asChild>
- *     <Button type="button" appearance="outlined">
- *       Show Danger Alert Dialog
- *     </Button>
- *   </AlertDialogTrigger>
- *   <AlertDialogContent>
- *     <AlertDialogIcon />
- *     <AlertDialogBody>
- *       <AlertDialogHeader>
- *         <AlertDialogTitle>
- *           Are you absolutely sure?
- *         </AlertDialogTitle>
- *         <AlertDialogDescription>
- *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
- *         </AlertDialogDescription>
- *       </AlertDialogHeader>
- *       <AlertDialogFooter>
- *         <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
- *         <AlertDialogAction type="button">
- *           Continue
- *         </AlertDialogAction>
- *       </AlertDialogFooter>
- *   	</AlertDialogBody>
- *   </AlertDialogContent>
- * </AlertDialog>
- * ```
- */
-declare const AlertDialogBody: react.ForwardRefExoticComponent<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & react.RefAttributes<HTMLDivElement>>;
-/**
- * Contains the header content of the dialog, including the title and description.
- *
- * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-header
- *
- * @example
- * ```tsx
- * <AlertDialog priority="danger">
- *   <AlertDialogTrigger asChild>
- *     <Button type="button" appearance="outlined">
- *       Show Danger Alert Dialog
- *     </Button>
- *   </AlertDialogTrigger>
- *   <AlertDialogContent>
- *     <AlertDialogIcon />
- *     <AlertDialogBody>
- *       <AlertDialogHeader>
- *         <AlertDialogTitle>
- *           Are you absolutely sure?
- *         </AlertDialogTitle>
- *         <AlertDialogDescription>
- *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
- *         </AlertDialogDescription>
- *       </AlertDialogHeader>
- *       <AlertDialogFooter>
- *         <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
- *         <AlertDialogAction type="button">
- *           Continue
- *         </AlertDialogAction>
- *       </AlertDialogFooter>
- *   	</AlertDialogBody>
- *   </AlertDialogContent>
- * </AlertDialog>
- * ```
- */
-declare const AlertDialogHeader: react.ForwardRefExoticComponent<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & react.RefAttributes<HTMLDivElement>>;
-/**
- * Contains the footer content of the dialog, including the action and cancel buttons.
- *
- * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-footer
- *
- * @example
- * ```tsx
- * <AlertDialog priority="danger">
- *   <AlertDialogTrigger asChild>
- *     <Button type="button" appearance="outlined">
- *       Show Danger Alert Dialog
- *     </Button>
- *   </AlertDialogTrigger>
- *   <AlertDialogContent>
- *     <AlertDialogIcon />
- *     <AlertDialogBody>
- *       <AlertDialogHeader>
- *         <AlertDialogTitle>
- *           Are you absolutely sure?
- *         </AlertDialogTitle>
- *         <AlertDialogDescription>
- *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
- *         </AlertDialogDescription>
- *       </AlertDialogHeader>
- *       <AlertDialogFooter>
- *         <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
- *         <AlertDialogAction type="button">
- *           Continue
- *         </AlertDialogAction>
- *       </AlertDialogFooter>
- *   	</AlertDialogBody>
- *   </AlertDialogContent>
- * </AlertDialog>
- * ```
- */
-declare const AlertDialogFooter: react.ForwardRefExoticComponent<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & react.RefAttributes<HTMLDivElement>>;
-/**
- * An accessible name to be announced when the dialog is opened.
- *
- * Alternatively, you can provide `aria-label` or `aria-labelledby` to
- * `AlertDialogContent` and exclude this component.
- *
- * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-title
- *
- * @example
- * ```tsx
- * <AlertDialog priority="danger">
- *   <AlertDialogTrigger asChild>
- *     <Button type="button" appearance="outlined">
- *       Show Danger Alert Dialog
- *     </Button>
- *   </AlertDialogTrigger>
- *   <AlertDialogContent>
- *     <AlertDialogIcon />
- *     <AlertDialogBody>
- *       <AlertDialogHeader>
- *         <AlertDialogTitle>
- *           Are you absolutely sure?
- *         </AlertDialogTitle>
- *         <AlertDialogDescription>
- *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
- *         </AlertDialogDescription>
- *       </AlertDialogHeader>
- *       <AlertDialogFooter>
- *         <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
- *         <AlertDialogAction type="button">
- *           Continue
- *         </AlertDialogAction>
- *       </AlertDialogFooter>
- *   	</AlertDialogBody>
- *   </AlertDialogContent>
- * </AlertDialog>
- * ```
- */
-declare const AlertDialogTitle: react.ForwardRefExoticComponent<Omit<_radix_ui_react_dialog.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
-/**
- * An accessible description to be announced when the dialog is opened.
- *
- * Alternatively, you can provide `aria-describedby` to `AlertDialogContent` and
- * exclude this component.
- *
- * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-description
- *
- * @example
- * ```tsx
- * <AlertDialog priority="danger">
- *   <AlertDialogTrigger asChild>
- *     <Button type="button" appearance="outlined">
- *       Show Danger Alert Dialog
- *     </Button>
- *   </AlertDialogTrigger>
- *   <AlertDialogContent>
- *     <AlertDialogIcon />
- *     <AlertDialogBody>
- *       <AlertDialogHeader>
- *         <AlertDialogTitle>
- *           Are you absolutely sure?
- *         </AlertDialogTitle>
- *         <AlertDialogDescription>
- *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
- *         </AlertDialogDescription>
- *       </AlertDialogHeader>
- *       <AlertDialogFooter>
- *         <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
- *         <AlertDialogAction type="button">
- *           Continue
- *         </AlertDialogAction>
- *       </AlertDialogFooter>
- *   	</AlertDialogBody>
- *   </AlertDialogContent>
- * </AlertDialog>
- * ```
- */
-declare const AlertDialogDescription: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
-/**
- * A button that confirms the Alert Dialog action.
- * Will default to appearance="filled", as well as the priority color from the `AlertDialog`.
- * Does not close the alert dialog by default.
- *
- * These buttons should be distinguished visually from the AlertDialogCancel button.
- *
- * Composes around the mantle Button component.
- *
- * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-action
- *
- * @example
- * ```tsx
- * <AlertDialog priority="danger">
- *   <AlertDialogTrigger asChild>
- *     <Button type="button" appearance="outlined">
- *       Show Danger Alert Dialog
- *     </Button>
- *   </AlertDialogTrigger>
- *   <AlertDialogContent>
- *     <AlertDialogIcon />
- *     <AlertDialogBody>
- *       <AlertDialogHeader>
- *         <AlertDialogTitle>
- *           Are you absolutely sure?
- *         </AlertDialogTitle>
- *         <AlertDialogDescription>
- *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
- *         </AlertDialogDescription>
- *       </AlertDialogHeader>
- *       <AlertDialogFooter>
- *         <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
- *         <AlertDialogAction type="button">
- *           Continue
- *         </AlertDialogAction>
- *       </AlertDialogFooter>
- *   	</AlertDialogBody>
- *   </AlertDialogContent>
- * </AlertDialog>
- * ```
- */
-declare const AlertDialogAction: react.ForwardRefExoticComponent<(Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
-    appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
-    isLoading?: boolean | null | undefined;
-    priority?: "default" | "danger" | "neutral" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
-    icon?: ReactNode;
-    iconPlacement?: "start" | "end";
-} & {
-    asChild: true;
-    type?: react.ButtonHTMLAttributes<HTMLButtonElement>["type"];
-}, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
-    appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
-    isLoading?: boolean | null | undefined;
-    priority?: "default" | "danger" | "neutral" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
-    icon?: ReactNode;
-    iconPlacement?: "start" | "end";
-} & {
-    asChild?: false | undefined;
-    type: Exclude<react.ButtonHTMLAttributes<HTMLButtonElement>["type"], undefined>;
-}, "ref">) & react.RefAttributes<HTMLButtonElement>>;
-/**
- * A button that closes the dialog and cancels the action.
- * Will default to appearance="outlined" and priority="neutral".
- *
- * This button should be distinguished visually from AlertDialogAction buttons.
- *
- * Composes around the mantle Button component.
- *
- * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-cancel
- *
- * @example
- * ```tsx
- * <AlertDialog priority="danger">
- *   <AlertDialogTrigger asChild>
- *     <Button type="button" appearance="outlined">
- *       Show Danger Alert Dialog
- *     </Button>
- *   </AlertDialogTrigger>
- *   <AlertDialogContent>
- *     <AlertDialogIcon />
- *     <AlertDialogBody>
- *       <AlertDialogHeader>
- *         <AlertDialogTitle>
- *           Are you absolutely sure?
- *         </AlertDialogTitle>
- *         <AlertDialogDescription>
- *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
- *         </AlertDialogDescription>
- *       </AlertDialogHeader>
- *       <AlertDialogFooter>
- *         <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
- *         <AlertDialogAction type="button">
- *           Continue
- *         </AlertDialogAction>
- *       </AlertDialogFooter>
- *   	</AlertDialogBody>
- *   </AlertDialogContent>
- * </AlertDialog>
- * ```
- */
-declare const AlertDialogCancel: react.ForwardRefExoticComponent<(Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
-    appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
-    isLoading?: boolean | null | undefined;
-    priority?: "default" | "danger" | "neutral" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
-    icon?: ReactNode;
-    iconPlacement?: "start" | "end";
-} & {
-    asChild: true;
-    type?: react.ButtonHTMLAttributes<HTMLButtonElement>["type"];
-}, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
-    appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
-    isLoading?: boolean | null | undefined;
-    priority?: "default" | "danger" | "neutral" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
-    icon?: ReactNode;
-    iconPlacement?: "start" | "end";
-} & {
-    asChild?: false | undefined;
-    type: Exclude<react.ButtonHTMLAttributes<HTMLButtonElement>["type"], undefined>;
-}, "ref">) & react.RefAttributes<HTMLButtonElement>>;
-type AlertDialogIconProps = Omit<SvgAttributes, "children"> & {
-    svg?: ReactNode;
+    readonly Root: typeof Root;
+    /**
+     * A button that confirms the Alert Dialog action.
+     *
+     * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-action
+     *
+     * @example
+     * ```tsx
+     * <AlertDialog.Footer>
+     *   <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+     *   <AlertDialog.Action>Continue</AlertDialog.Action>
+     * </AlertDialog.Footer>
+     * ```
+     */
+    readonly Action: react.ForwardRefExoticComponent<(Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
+        appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
+        isLoading?: boolean | null | undefined;
+        priority?: "default" | "danger" | "neutral" | null | undefined;
+    } & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
+        icon?: ReactNode;
+        iconPlacement?: "start" | "end";
+    } & {
+        asChild: true;
+        type?: react.ButtonHTMLAttributes<HTMLButtonElement>["type"];
+    }, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
+        appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
+        isLoading?: boolean | null | undefined;
+        priority?: "default" | "danger" | "neutral" | null | undefined;
+    } & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
+        icon?: ReactNode;
+        iconPlacement?: "start" | "end";
+    } & {
+        asChild?: false | undefined;
+        type: Exclude<react.ButtonHTMLAttributes<HTMLButtonElement>["type"], undefined>;
+    }, "ref">) & react.RefAttributes<HTMLButtonElement>>;
+    /**
+     * Contains the main content of the alert dialog.
+     *
+     * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-body
+     *
+     * @example
+     * ```tsx
+     * <AlertDialog.Content>
+     *   <AlertDialog.Icon />
+     *   <AlertDialog.Body>
+     *     <AlertDialog.Header>
+     *       <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
+     *       <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
+     *     </AlertDialog.Header>
+     *     <AlertDialog.Footer>
+     *       <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+     *       <AlertDialog.Action>Continue</AlertDialog.Action>
+     *     </AlertDialog.Footer>
+     *   </AlertDialog.Body>
+     * </AlertDialog.Content>
+     * ```
+     */
+    readonly Body: react.ForwardRefExoticComponent<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * A button that closes the dialog and cancels the action.
+     *
+     * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-cancel
+     *
+     * @example
+     * ```tsx
+     * <AlertDialog.Footer>
+     *   <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+     *   <AlertDialog.Action>Continue</AlertDialog.Action>
+     * </AlertDialog.Footer>
+     * ```
+     */
+    readonly Cancel: react.ForwardRefExoticComponent<(Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
+        appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
+        isLoading?: boolean | null | undefined;
+        priority?: "default" | "danger" | "neutral" | null | undefined;
+    } & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
+        icon?: ReactNode;
+        iconPlacement?: "start" | "end";
+    } & {
+        asChild: true;
+        type?: react.ButtonHTMLAttributes<HTMLButtonElement>["type"];
+    }, "ref"> | Omit<react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<class_variance_authority.VariantProps<(props?: ({
+        appearance?: "link" | "filled" | "ghost" | "outlined" | null | undefined;
+        isLoading?: boolean | null | undefined;
+        priority?: "default" | "danger" | "neutral" | null | undefined;
+    } & class_variance_authority_types.ClassProp) | undefined) => string>>> & {
+        icon?: ReactNode;
+        iconPlacement?: "start" | "end";
+    } & {
+        asChild?: false | undefined;
+        type: Exclude<react.ButtonHTMLAttributes<HTMLButtonElement>["type"], undefined>;
+    }, "ref">) & react.RefAttributes<HTMLButtonElement>>;
+    /**
+     * A button that closes the Alert Dialog. (Unstyled)
+     *
+     * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-close
+     *
+     * @example
+     * ```tsx
+     * <AlertDialog.Close asChild>
+     *   <AlertDialog.Action
+     *     type="button"
+     *     onClick={() => doThing()}
+     *   >
+     *     Do thing and close
+     *   </AlertDialog.Action>
+     * </AlertDialog.Close>
+     * ```
+     */
+    readonly Close: react.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+    /**
+     * The popover alert dialog container.
+     *
+     * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-content
+     *
+     * @example
+     * ```tsx
+     * <AlertDialog.Content>
+     *   <AlertDialog.Icon />
+     *   <AlertDialog.Body>
+     *     <AlertDialog.Header>
+     *       <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
+     *       <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
+     *     </AlertDialog.Header>
+     *     <AlertDialog.Footer>
+     *       <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+     *       <AlertDialog.Action>Continue</AlertDialog.Action>
+     *     </AlertDialog.Footer>
+     *   </AlertDialog.Body>
+     * </AlertDialog.Content>
+     * ```
+     */
+    readonly Content: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog.DialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & {
+        /**
+         * The preferred width of the `AlertDialogContent` as a tailwind `max-w-` class.
+         *
+         * By default, a `AlertDialog`'s content width is responsive with a default
+         * preferred width: the maximum width of the `AlertDialogContent`
+         *
+         * @default `max-w-md`
+         */
+        preferredWidth?: `max-w-${string}`;
+    } & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * An accessible description to be announced when the dialog is opened.
+     *
+     * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-description
+     *
+     * @example
+     * ```tsx
+     * <AlertDialog.Header>
+     *   <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
+     *   <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
+     * </AlertDialog.Header>
+     * ```
+     */
+    readonly Description: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+    /**
+     * Contains the footer content of the dialog, including the action and cancel buttons.
+     *
+     * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-footer
+     *
+     * @example
+     * ```tsx
+     * <AlertDialog.Footer>
+     *   <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+     *   <AlertDialog.Action>Continue</AlertDialog.Action>
+     * </AlertDialog.Footer>
+     * ```
+     */
+    readonly Footer: react.ForwardRefExoticComponent<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * Contains the header content of the dialog, including the title and description.
+     *
+     * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-header
+     *
+     * @example
+     * ```tsx
+     * <AlertDialog.Header>
+     *   <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
+     *   <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
+     * </AlertDialog.Header>
+     * ```
+     */
+    readonly Header: react.ForwardRefExoticComponent<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * An icon that visually represents the priority of the AlertDialog.
+     *
+     * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-icon
+     *
+     * @example
+     * ```tsx
+     * <AlertDialog.Content>
+     *   <AlertDialog.Icon />
+     *   <AlertDialog.Body>
+     *     <AlertDialog.Header>
+     *       <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
+     *       <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
+     *     </AlertDialog.Header>
+     *   </AlertDialog.Body>
+     * </AlertDialog.Content>
+     * ```
+     */
+    readonly Icon: react.ForwardRefExoticComponent<Omit<AlertDialogIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    /**
+     * An accessible name to be announced when the dialog is opened.
+     *
+     * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-title
+     *
+     * @example
+     * ```tsx
+     * <AlertDialog.Header>
+     *   <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
+     *   <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
+     * </AlertDialog.Header>
+     * ```
+     */
+    readonly Title: react.ForwardRefExoticComponent<Omit<_radix_ui_react_dialog.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+    /**
+     * A button that opens the Alert Dialog.
+     *
+     * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-trigger
+     *
+     * @example
+     * ```tsx
+     * <AlertDialog.Trigger asChild>
+     *   <Button type="button" appearance="outlined">
+     *     Show Alert Dialog
+     *   </Button>
+     * </AlertDialog.Trigger>
+     * ```
+     */
+    readonly Trigger: react.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 };
-/**
- * An icon that visually represents the priority of the AlertDialog.
- *
- * Defaults to a warning icon for danger priority and an info icon for info
- * priority with the appropriate color.
- *
- * Can be overridden with a custom icon using the `svg` prop.
- *
- * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-icon
- *
- * @example
- * ```tsx
- * <AlertDialog priority="danger">
- *   <AlertDialogTrigger asChild>
- *     <Button type="button" appearance="outlined">
- *       Show Danger Alert Dialog
- *     </Button>
- *   </AlertDialogTrigger>
- *   <AlertDialogContent>
- *     <AlertDialogIcon />
- *     <AlertDialogBody>
- *       <AlertDialogHeader>
- *         <AlertDialogTitle>
- *           Are you absolutely sure?
- *         </AlertDialogTitle>
- *         <AlertDialogDescription>
- *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
- *         </AlertDialogDescription>
- *       </AlertDialogHeader>
- *       <AlertDialogFooter>
- *         <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
- *         <AlertDialogAction type="button">
- *           Continue
- *         </AlertDialogAction>
- *       </AlertDialogFooter>
- *   	</AlertDialogBody>
- *   </AlertDialogContent>
- * </AlertDialog>
- * ```
- */
-declare const AlertDialogIcon: react.ForwardRefExoticComponent<Omit<AlertDialogIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
-/**
- * A button that closes the Alert Dialog. (Unstyled)
- *
- * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-close
- *
- * @example
- * ```tsx
- * <AlertDialogClose asChild>
- *   <AlertDialogAction
- *   	type="button"
- *   	onClick={() => doThing()}
- *   >
- *   	Do thing and close
- *   </AlertDialogAction>
- * </AlertDialogClose>
- */
-declare const AlertDialogClose: react.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
 
-export { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogIcon, AlertDialogTitle, AlertDialogTrigger };
+export { AlertDialog };