@ngrok/mantle 0.79.3 → 0.80.0

package/dist/alert-dialog.d.ts

@@ -1,8 +1,8 @@
-import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
 import { t as SvgAttributes } from "./types-D1RY5Tcj.js";
 import { t as ButtonIntent } from "./intents-DdSKSj1c.js";
-import { n as ButtonAppearance, r as ButtonProps } from "./button-DcXOWUYo.js";
-import { t as Root$1 } from "./primitive-C64-m48O.js";
+import { n as ButtonAppearance, r as ButtonProps } from "./button-BPMwa2jN.js";
+import { a as Root$1, n as Content$1, o as Title$1, r as Description$1, s as Trigger$1, t as Close$1 } from "./primitive-CJRIlrLz.js";
 import { ComponentProps, ReactNode } from "react";
 //#region src/components/alert-dialog/alert-dialog.d.ts
 declare const intents: readonly ["info", "danger"];
@@ -57,6 +57,304 @@ type AlertDialogProps = ComponentProps<typeof Root$1> & {
  * ```
  */
 declare function Root({ intent, ...props }: AlertDialogProps): import("react").JSX.Element;
+/**
+ * A button that opens the Alert Dialog.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogtrigger
+ *
+ * @example
+ * ```tsx
+ * <AlertDialog.Root intent="danger">
+ *   <AlertDialog.Trigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">
+ *       Show Danger Alert Dialog
+ *     </Button>
+ *   </AlertDialog.Trigger>
+ *   <AlertDialog.Content>
+ *     <AlertDialog.Icon />
+ *     <AlertDialog.Body>
+ *       <AlertDialog.Header>
+ *         <AlertDialog.Title>
+ *           Are you absolutely sure?
+ *         </AlertDialog.Title>
+ *         <AlertDialog.Description>
+ *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+ *         </AlertDialog.Description>
+ *       </AlertDialog.Header>
+ *       <AlertDialog.Footer>
+ *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+ *         <AlertDialog.Action type="button">
+ *           Continue
+ *         </AlertDialog.Action>
+ *       </AlertDialog.Footer>
+ *     </AlertDialog.Body>
+ *   </AlertDialog.Content>
+ * </AlertDialog.Root>
+ * ```
+ */
+declare const Trigger: {
+  ({ ref, ...props }: ComponentProps<typeof Trigger$1>): import("react").JSX.Element;
+  displayName: string;
+};
+type AlertDialogContentProps = ComponentProps<typeof Content$1> & {
+  /**
+   * 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}`;
+};
+/**
+ * The popover alert dialog container.
+ *
+ * Renders on top of the overlay and is centered in the viewport.
+ *
+ * `AlertDialog.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.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogcontent
+ *
+ * @example
+ * ```tsx
+ * <AlertDialog.Root intent="danger">
+ *   <AlertDialog.Trigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">
+ *       Show Danger Alert Dialog
+ *     </Button>
+ *   </AlertDialog.Trigger>
+ *   <AlertDialog.Content>
+ *     <AlertDialog.Icon />
+ *     <AlertDialog.Body>
+ *       <AlertDialog.Header>
+ *         <AlertDialog.Title>
+ *           Are you absolutely sure?
+ *         </AlertDialog.Title>
+ *         <AlertDialog.Description>
+ *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+ *         </AlertDialog.Description>
+ *       </AlertDialog.Header>
+ *       <AlertDialog.Footer>
+ *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+ *         <AlertDialog.Action type="button">
+ *           Continue
+ *         </AlertDialog.Action>
+ *       </AlertDialog.Footer>
+ *     </AlertDialog.Body>
+ *   </AlertDialog.Content>
+ * </AlertDialog.Root>
+ * ```
+ */
+declare const Content: {
+  ({ className, preferredWidth, ref, ...props }: AlertDialogContentProps): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * Contains the main content of the alert dialog.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogbody
+ *
+ * @example
+ * ```tsx
+ * <AlertDialog.Root intent="danger">
+ *   <AlertDialog.Trigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">
+ *       Show Danger Alert Dialog
+ *     </Button>
+ *   </AlertDialog.Trigger>
+ *   <AlertDialog.Content>
+ *     <AlertDialog.Icon />
+ *     <AlertDialog.Body>
+ *       <AlertDialog.Header>
+ *         <AlertDialog.Title>
+ *           Are you absolutely sure?
+ *         </AlertDialog.Title>
+ *         <AlertDialog.Description>
+ *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+ *         </AlertDialog.Description>
+ *       </AlertDialog.Header>
+ *       <AlertDialog.Footer>
+ *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+ *         <AlertDialog.Action type="button">
+ *           Continue
+ *         </AlertDialog.Action>
+ *       </AlertDialog.Footer>
+ *     </AlertDialog.Body>
+ *   </AlertDialog.Content>
+ * </AlertDialog.Root>
+ * ```
+ */
+declare const Body: {
+  ({ asChild, className, ref, ...props }: ComponentProps<"div"> & WithAsChild): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * Contains the header content of the dialog, including the title and description.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogheader
+ *
+ * @example
+ * ```tsx
+ * <AlertDialog.Root intent="danger">
+ *   <AlertDialog.Trigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">
+ *       Show Danger Alert Dialog
+ *     </Button>
+ *   </AlertDialog.Trigger>
+ *   <AlertDialog.Content>
+ *     <AlertDialog.Icon />
+ *     <AlertDialog.Body>
+ *       <AlertDialog.Header>
+ *         <AlertDialog.Title>
+ *           Are you absolutely sure?
+ *         </AlertDialog.Title>
+ *         <AlertDialog.Description>
+ *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+ *         </AlertDialog.Description>
+ *       </AlertDialog.Header>
+ *       <AlertDialog.Footer>
+ *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+ *         <AlertDialog.Action type="button">
+ *           Continue
+ *         </AlertDialog.Action>
+ *       </AlertDialog.Footer>
+ *     </AlertDialog.Body>
+ *   </AlertDialog.Content>
+ * </AlertDialog.Root>
+ * ```
+ */
+declare const Header: {
+  ({ asChild, className, ref, ...props }: ComponentProps<"div"> & WithAsChild): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * Contains the footer content of the dialog, including the action and cancel buttons.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogfooter
+ *
+ * @example
+ * ```tsx
+ * <AlertDialog.Root intent="danger">
+ *   <AlertDialog.Trigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">
+ *       Show Danger Alert Dialog
+ *     </Button>
+ *   </AlertDialog.Trigger>
+ *   <AlertDialog.Content>
+ *     <AlertDialog.Icon />
+ *     <AlertDialog.Body>
+ *       <AlertDialog.Header>
+ *         <AlertDialog.Title>
+ *           Are you absolutely sure?
+ *         </AlertDialog.Title>
+ *         <AlertDialog.Description>
+ *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+ *         </AlertDialog.Description>
+ *       </AlertDialog.Header>
+ *       <AlertDialog.Footer>
+ *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+ *         <AlertDialog.Action type="button">
+ *           Continue
+ *         </AlertDialog.Action>
+ *       </AlertDialog.Footer>
+ *     </AlertDialog.Body>
+ *   </AlertDialog.Content>
+ * </AlertDialog.Root>
+ * ```
+ */
+declare const Footer: {
+  ({ asChild, className, ref, ...props }: ComponentProps<"div"> & WithAsChild): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * 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/overlays/alert-dialog#alertdialogtitle
+ *
+ * @example
+ * ```tsx
+ * <AlertDialog.Root intent="danger">
+ *   <AlertDialog.Trigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">
+ *       Show Danger Alert Dialog
+ *     </Button>
+ *   </AlertDialog.Trigger>
+ *   <AlertDialog.Content>
+ *     <AlertDialog.Icon />
+ *     <AlertDialog.Body>
+ *       <AlertDialog.Header>
+ *         <AlertDialog.Title>
+ *           Are you absolutely sure?
+ *         </AlertDialog.Title>
+ *         <AlertDialog.Description>
+ *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+ *         </AlertDialog.Description>
+ *       </AlertDialog.Header>
+ *       <AlertDialog.Footer>
+ *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+ *         <AlertDialog.Action type="button">
+ *           Continue
+ *         </AlertDialog.Action>
+ *       </AlertDialog.Footer>
+ *     </AlertDialog.Body>
+ *   </AlertDialog.Content>
+ * </AlertDialog.Root>
+ * ```
+ */
+declare const Title: {
+  ({ className, ref, ...props }: ComponentProps<typeof Title$1>): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * 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.
+ *
+ * Alternatively, you can provide `aria-describedby` to `AlertDialogContent` and
+ * exclude this component.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogdescription
+ *
+ * @example
+ * ```tsx
+ * <AlertDialog.Root intent="danger">
+ *   <AlertDialog.Trigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">
+ *       Show Danger Alert Dialog
+ *     </Button>
+ *   </AlertDialog.Trigger>
+ *   <AlertDialog.Content>
+ *     <AlertDialog.Icon />
+ *     <AlertDialog.Body>
+ *       <AlertDialog.Header>
+ *         <AlertDialog.Title>
+ *           Are you absolutely sure?
+ *         </AlertDialog.Title>
+ *         <AlertDialog.Description>
+ *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+ *         </AlertDialog.Description>
+ *       </AlertDialog.Header>
+ *       <AlertDialog.Footer>
+ *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+ *         <AlertDialog.Action type="button">
+ *           Continue
+ *         </AlertDialog.Action>
+ *       </AlertDialog.Footer>
+ *     </AlertDialog.Body>
+ *   </AlertDialog.Content>
+ * </AlertDialog.Root>
+ * ```
+ */
+declare const Description: {
+  ({ className, ref, ...props }: ComponentProps<typeof Description$1>): import("react").JSX.Element;
+  displayName: string;
+};
 type AlertDialogActionProps = Omit<ButtonProps, "appearance" | "intent"> & {
   /**
    * The visual style of the action button. Optional here — `AlertDialog.Action`
@@ -69,12 +367,57 @@ type AlertDialogActionProps = Omit<ButtonProps, "appearance" | "intent"> & {
   /**
    * The tone of the action button. Optional here — when omitted,
    * `AlertDialog.Action` derives the tone from the parent `AlertDialog.Root`'s
-   * `intent` (`"danger"` → `"danger"`, `"info"` → `"accent"`), so the Action
-   * carries the dialog's tone the same way its icon does. A passed value
-   * always wins over the context-derived tone.
+   * `intent` (`"danger"` → `"danger"`, `"info"` → `"neutral"`). A passed
+   * value always wins over the context-derived tone.
    */
   intent?: ButtonIntent;
 };
+/**
+ * A button that confirms the Alert Dialog action.
+ * Will default to appearance="filled", with a tone derived from the `AlertDialog`'s
+ * intent: danger dialogs get a danger button, info dialogs get a neutral one.
+ * 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/overlays/alert-dialog#alertdialogaction
+ *
+ * @example
+ * ```tsx
+ * <AlertDialog.Root intent="danger">
+ *   <AlertDialog.Trigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">
+ *       Show Danger Alert Dialog
+ *     </Button>
+ *   </AlertDialog.Trigger>
+ *   <AlertDialog.Content>
+ *     <AlertDialog.Icon />
+ *     <AlertDialog.Body>
+ *       <AlertDialog.Header>
+ *         <AlertDialog.Title>
+ *           Are you absolutely sure?
+ *         </AlertDialog.Title>
+ *         <AlertDialog.Description>
+ *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+ *         </AlertDialog.Description>
+ *       </AlertDialog.Header>
+ *       <AlertDialog.Footer>
+ *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+ *         <AlertDialog.Action type="button">
+ *           Continue
+ *         </AlertDialog.Action>
+ *       </AlertDialog.Footer>
+ *     </AlertDialog.Body>
+ *   </AlertDialog.Content>
+ * </AlertDialog.Root>
+ * ```
+ */
+declare const Action: {
+  ({ appearance, intent, ref, ...props }: AlertDialogActionProps): import("react").JSX.Element;
+  displayName: string;
+};
 type AlertDialogCancelProps = Omit<ButtonProps, "appearance" | "intent"> & {
   /**
    * The visual style of the cancel button. Optional here — `AlertDialog.Cancel`
@@ -92,9 +435,143 @@ type AlertDialogCancelProps = Omit<ButtonProps, "appearance" | "intent"> & {
    */
   intent?: ButtonIntent;
 };
+/**
+ * A button that closes the dialog and cancels the action.
+ * Will default to appearance="outlined" and intent="neutral".
+ *
+ * This button should be distinguished visually from AlertDialogAction buttons.
+ *
+ * Composes around the mantle Button component.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogcancel
+ *
+ * @example
+ * ```tsx
+ * <AlertDialog.Root intent="danger">
+ *   <AlertDialog.Trigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">
+ *       Show Danger Alert Dialog
+ *     </Button>
+ *   </AlertDialog.Trigger>
+ *   <AlertDialog.Content>
+ *     <AlertDialog.Icon />
+ *     <AlertDialog.Body>
+ *       <AlertDialog.Header>
+ *         <AlertDialog.Title>
+ *           Are you absolutely sure?
+ *         </AlertDialog.Title>
+ *         <AlertDialog.Description>
+ *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+ *         </AlertDialog.Description>
+ *       </AlertDialog.Header>
+ *       <AlertDialog.Footer>
+ *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+ *         <AlertDialog.Action type="button">
+ *           Continue
+ *         </AlertDialog.Action>
+ *       </AlertDialog.Footer>
+ *     </AlertDialog.Body>
+ *   </AlertDialog.Content>
+ * </AlertDialog.Root>
+ * ```
+ */
+declare const Cancel: {
+  ({ appearance, className, intent, ref, ...props }: AlertDialogCancelProps): import("react").JSX.Element;
+  displayName: string;
+};
 type AlertDialogIconProps = Omit<SvgAttributes, "children"> & {
   svg?: ReactNode;
 };
+/**
+ * An icon that visually represents the intent of the AlertDialog.
+ *
+ * Defaults to a warning icon for danger intent and an info icon for info
+ * intent with the appropriate color.
+ *
+ * Can be overridden with a custom icon using the `svg` prop.
+ *
+ * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogicon
+ *
+ * @example
+ * ```tsx
+ * <AlertDialog.Root intent="danger">
+ *   <AlertDialog.Trigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">
+ *       Show Danger Alert Dialog
+ *     </Button>
+ *   </AlertDialog.Trigger>
+ *   <AlertDialog.Content>
+ *     <AlertDialog.Icon />
+ *     <AlertDialog.Body>
+ *       <AlertDialog.Header>
+ *         <AlertDialog.Title>
+ *           Are you absolutely sure?
+ *         </AlertDialog.Title>
+ *         <AlertDialog.Description>
+ *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+ *         </AlertDialog.Description>
+ *       </AlertDialog.Header>
+ *       <AlertDialog.Footer>
+ *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+ *         <AlertDialog.Action type="button">
+ *           Continue
+ *         </AlertDialog.Action>
+ *       </AlertDialog.Footer>
+ *     </AlertDialog.Body>
+ *   </AlertDialog.Content>
+ * </AlertDialog.Root>
+ * ```
+ */
+declare const Icon: {
+  ({ className, ref, svg, ...props }: AlertDialogIconProps): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * A button that closes the Alert Dialog. (Unstyled)
+ *
+ * `AlertDialog.Cancel` already closes the dialog by default. Reach for
+ * `AlertDialog.Close` when you need to attach close behavior to a custom
+ * element (typically wrapping `AlertDialog.Action` with `asChild` so the
+ * action both performs the operation and dismisses the dialog).
+ *
+ * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogclose
+ *
+ * @example
+ * ```tsx
+ * <AlertDialog.Root intent="danger">
+ *   <AlertDialog.Trigger asChild>
+ *     <Button type="button" appearance="outlined" intent="neutral">
+ *       Show Danger Alert Dialog
+ *     </Button>
+ *   </AlertDialog.Trigger>
+ *   <AlertDialog.Content>
+ *     <AlertDialog.Icon />
+ *     <AlertDialog.Body>
+ *       <AlertDialog.Header>
+ *         <AlertDialog.Title>
+ *           Are you absolutely sure?
+ *         </AlertDialog.Title>
+ *         <AlertDialog.Description>
+ *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+ *         </AlertDialog.Description>
+ *       </AlertDialog.Header>
+ *       <AlertDialog.Footer>
+ *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+ *         <AlertDialog.Close asChild>
+ *           <AlertDialog.Action type="button" onClick={() => doThing()}>
+ *             Do thing and close
+ *           </AlertDialog.Action>
+ *         </AlertDialog.Close>
+ *       </AlertDialog.Footer>
+ *     </AlertDialog.Body>
+ *   </AlertDialog.Content>
+ * </AlertDialog.Root>
+ * ```
+ */
+declare const Close: {
+  ({ ref, ...props }: ComponentProps<typeof Close$1>): import("react").JSX.Element;
+  displayName: string;
+};
 /**
  * A modal dialog that interrupts the user with important content and expects a
  * response. Use AlertDialog for destructive or irreversible confirmations
@@ -205,9 +682,8 @@ declare const AlertDialog: {
    * A button that confirms the Alert Dialog action. Defaults to
    * `appearance="filled"`, with a tone derived from the parent
    * `AlertDialog.Root`'s intent: danger dialogs get a danger button, info
-   * dialogs get an accent one — the Action carries the dialog's tone the
-   * same way its icon does. Does not close the dialog by default — wrap
-   * with `AlertDialog.Close asChild` if the action should also dismiss.
+   * dialogs get a neutral one. Does not close the dialog by default — wrap with
+   * `AlertDialog.Close asChild` if the action should also dismiss.
    *
    * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogaction
    *
@@ -241,7 +717,7 @@ declare const AlertDialog: {
    * </AlertDialog.Root>
    * ```
    */
-  readonly Action: import("react").ForwardRefExoticComponent<Omit<AlertDialogActionProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  readonly Action: typeof Action;
   /**
    * Contains the main content of the alert dialog. Wraps the header and footer
    * inside `AlertDialog.Content` next to `AlertDialog.Icon`.
@@ -278,7 +754,7 @@ declare const AlertDialog: {
    * </AlertDialog.Root>
    * ```
    */
-  readonly Body: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Body: typeof Body;
   /**
    * A button that closes the dialog and cancels the action. Defaults to
    * `appearance="outlined"` and `intent="neutral"` so it visually
@@ -316,7 +792,7 @@ declare const AlertDialog: {
    * </AlertDialog.Root>
    * ```
    */
-  readonly Cancel: import("react").ForwardRefExoticComponent<Omit<AlertDialogCancelProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  readonly Cancel: typeof Cancel;
   /**
    * A button that closes the Alert Dialog. (Unstyled) Typically wrapped
    * around `AlertDialog.Action` with `asChild` so the action both performs
@@ -356,7 +832,7 @@ declare const AlertDialog: {
    * </AlertDialog.Root>
    * ```
    */
-  readonly Close: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  readonly Close: typeof Close;
   /**
    * The popover alert dialog container. Renders on top of the overlay,
    * centered in the viewport.
@@ -397,17 +873,7 @@ declare const AlertDialog: {
    * </AlertDialog.Root>
    * ```
    */
-  readonly Content: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("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}`;
-  } & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Content: typeof Content;
   /**
    * An accessible description to be announced when the dialog is opened.
    * Renders as a `div` by default; can be changed via the `asChild` prop.
@@ -444,7 +910,7 @@ declare const AlertDialog: {
    * </AlertDialog.Root>
    * ```
    */
-  readonly Description: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Description: typeof Description;
   /**
    * Contains the footer content of the dialog, including the action and
    * cancel buttons.
@@ -481,7 +947,7 @@ declare const AlertDialog: {
    * </AlertDialog.Root>
    * ```
    */
-  readonly Footer: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Footer: typeof Footer;
   /**
    * Contains the header content of the dialog, including the title and
    * description.
@@ -518,7 +984,7 @@ declare const AlertDialog: {
    * </AlertDialog.Root>
    * ```
    */
-  readonly Header: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  readonly Header: typeof Header;
   /**
    * An icon that visually represents the intent of the AlertDialog.
    * Defaults to a warning icon for `danger` and an info icon for `info`. Can
@@ -556,7 +1022,7 @@ declare const AlertDialog: {
    * </AlertDialog.Root>
    * ```
    */
-  readonly Icon: import("react").ForwardRefExoticComponent<Omit<AlertDialogIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+  readonly Icon: typeof Icon;
   /**
    * An accessible name to be announced when the dialog is opened.
    * Alternatively, provide `aria-label` or `aria-labelledby` to
@@ -594,7 +1060,7 @@ declare const AlertDialog: {
    * </AlertDialog.Root>
    * ```
    */
-  readonly Title: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+  readonly Title: typeof Title;
   /**
    * A button that opens the Alert Dialog.
    *
@@ -630,7 +1096,7 @@ declare const AlertDialog: {
    * </AlertDialog.Root>
    * ```
    */
-  readonly Trigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  readonly Trigger: typeof Trigger;
 };
 //#endregion
 export { AlertDialog };

package/dist/alert-dialog.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./svg-only-DDx6FtJd.js";import{t as n}from"./slot-DmPrjM7N.js";import{t as r}from"./button-ClC60Nzg.js";import{a as i,c as a,i as o,n as s,o as c,r as l,s as u,t as d}from"./primitive-IKruV2iB.js";import{createContext as f,forwardRef as p,useContext as m,useMemo as h}from"react";import g from"tiny-invariant";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{InfoIcon as y}from"@phosphor-icons/react/Info";import{WarningIcon as b}from"@phosphor-icons/react/Warning";const x=f(null);function S(){let e=m(x);return g(e,`AlertDialog child component used outside of AlertDialog parent!`),e}function C({intent:e,...t}){let n=h(()=>({intent:e}),[e]);return _(x.Provider,{value:n,children:_(c,{...t})})}C.displayName=`AlertDialog`;const w=p(({...e},t)=>_(a,{ref:t,"data-slot":`alert-dialog-trigger`,...e}));w.displayName=`AlertDialogTrigger`;const T=i;T.displayName=`AlertDialogPortal`;const E=p(({className:t,...n},r)=>_(o,{"data-slot":`alert-dialog-overlay`,className:e(`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs`,t),...n,ref:r}));E.displayName=`AlertDialogOverlay`;const D=p(({className:t,preferredWidth:n=`max-w-md`,...r},i)=>v(T,{children:[_(E,{}),_(`div`,{className:`fixed inset-4 z-50 flex items-center justify-center`,children:_(s,{"data-slot":`alert-dialog-content`,"data-mantle-modal-content":!0,ref:i,className:e(`flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start`,`outline-hidden focus-within:outline-hidden`,`p-6`,`border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200`,`data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95`,n,t),...r})})]}));D.displayName=`AlertDialogContent`;const O=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{"data-slot":`alert-dialog-body`,className:e(`flex-1 space-y-4`,r),ref:a,...i}));O.displayName=`AlertDialogBody`;const k=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{"data-slot":`alert-dialog-header`,className:e(`flex flex-col space-y-2 text-center sm:text-start`,r),ref:a,...i}));k.displayName=`AlertDialogHeader`;const A=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{"data-slot":`alert-dialog-footer`,className:e(`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2`,r),ref:a,...i}));A.displayName=`AlertDialogFooter`;const j=p(({className:t,...n},r)=>_(u,{ref:r,"data-slot":`alert-dialog-title`,className:e(`text-strong text-center text-lg font-medium sm:text-start`,t),...n}));j.displayName=`AlertDialogTitle`;const M=p(({className:t,...n},r)=>_(l,{ref:r,"data-slot":`alert-dialog-description`,className:e(`text-body text-center text-sm font-normal sm:text-start`,t),...n}));M.displayName=`AlertDialogDescription`;const N={danger:`danger`,info:`accent`},P=p(({appearance:e=`filled`,intent:t,...n},i)=>{let a=S(),o=N[a.intent];return _(r,{appearance:e,"data-slot":`alert-dialog-action`,intent:t??o,ref:i,...n})});P.displayName=`AlertDialogAction`;const F=p(({appearance:t=`outlined`,className:n,intent:i=`neutral`,...a},o)=>_(d,{asChild:!0,children:_(r,{appearance:t,"data-slot":`alert-dialog-cancel`,className:e(`mt-2 sm:mt-0`,n),intent:i,ref:o,...a})}));F.displayName=`AlertDialogCancel`;const I={danger:_(b,{}),info:_(y,{})},L={danger:`text-danger-600`,info:`text-accent-600`},R=p(({className:n,svg:r,...i},a)=>{let o=S(),s=L[o.intent],c=I[o.intent];return _(t,{ref:a,"data-slot":`alert-dialog-icon`,className:e(`size-12 sm:size-7`,s,n),svg:r??c,...i})});R.displayName=`AlertDialogIcon`;const z=p(({...e},t)=>_(d,{ref:t,"data-slot":`alert-dialog-close`,...e}));z.displayName=`AlertDialogClose`;const B={Root:C,Action:P,Body:O,Cancel:F,Close:z,Content:D,Description:M,Footer:A,Header:k,Icon:R,Title:j,Trigger:w};export{B as AlertDialog};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./svg-only-d-nMCfAI.js";import{t as n}from"./slot-CDk0Bb9z.js";import{t as r}from"./button-5WsvzIQ6.js";import{a as i,c as a,i as o,n as s,o as c,r as l,s as u,t as d}from"./primitive-DCPHJsRs.js";import{createContext as f,useContext as p,useMemo as m}from"react";import h from"tiny-invariant";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{InfoIcon as v}from"@phosphor-icons/react/Info";import{WarningIcon as y}from"@phosphor-icons/react/Warning";const b=f(null);function x(){let e=p(b);return h(e,`AlertDialog child component used outside of AlertDialog parent!`),e}function S({intent:e,...t}){let n=m(()=>({intent:e}),[e]);return g(b.Provider,{value:n,children:g(c,{...t})})}S.displayName=`AlertDialog`;const C=({ref:e,...t})=>g(a,{ref:e,"data-slot":`alert-dialog-trigger`,...t});C.displayName=`AlertDialogTrigger`;const w=i;w.displayName=`AlertDialogPortal`;const T=({className:t,ref:n,...r})=>g(o,{"data-slot":`alert-dialog-overlay`,className:e(`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs`,t),...r,ref:n}),E=({className:t,preferredWidth:n=`max-w-md`,ref:r,...i})=>_(w,{children:[g(T,{}),g(`div`,{className:`fixed inset-4 z-50 flex items-center justify-center`,children:g(s,{"data-slot":`alert-dialog-content`,"data-mantle-modal-content":!0,ref:r,className:e(`flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start`,`outline-hidden focus-within:outline-hidden`,`p-6`,`border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200`,`data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95`,n,t),...i})})]});E.displayName=`AlertDialogContent`;const D=({asChild:t=!1,className:r,ref:i,...a})=>g(t?n:`div`,{"data-slot":`alert-dialog-body`,className:e(`flex-1 space-y-4`,r),ref:i,...a});D.displayName=`AlertDialogBody`;const O=({asChild:t=!1,className:r,ref:i,...a})=>g(t?n:`div`,{"data-slot":`alert-dialog-header`,className:e(`flex flex-col space-y-2 text-center sm:text-start`,r),ref:i,...a});O.displayName=`AlertDialogHeader`;const k=({asChild:t=!1,className:r,ref:i,...a})=>g(t?n:`div`,{"data-slot":`alert-dialog-footer`,className:e(`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2`,r),ref:i,...a});k.displayName=`AlertDialogFooter`;const A=({className:t,ref:n,...r})=>g(u,{ref:n,"data-slot":`alert-dialog-title`,className:e(`text-strong text-center text-lg font-medium sm:text-start`,t),...r});A.displayName=`AlertDialogTitle`;const j=({className:t,ref:n,...r})=>g(l,{ref:n,"data-slot":`alert-dialog-description`,className:e(`text-body text-center text-sm font-normal sm:text-start`,t),...r});j.displayName=`AlertDialogDescription`;const M={danger:`danger`,info:`neutral`},N=({appearance:e=`filled`,intent:t,ref:n,...i})=>{let a=x(),o=M[a.intent];return g(r,{appearance:e,"data-slot":`alert-dialog-action`,intent:t??o,ref:n,...i})};N.displayName=`AlertDialogAction`;const P=({appearance:t=`outlined`,className:n,intent:i=`neutral`,ref:a,...o})=>g(d,{asChild:!0,children:g(r,{appearance:t,"data-slot":`alert-dialog-cancel`,className:e(`mt-2 sm:mt-0`,n),intent:i,ref:a,...o})});P.displayName=`AlertDialogCancel`;const F={danger:g(y,{}),info:g(v,{})},I={danger:`text-danger-600`,info:`text-accent-600`},L=({className:n,ref:r,svg:i,...a})=>{let o=x(),s=I[o.intent],c=F[o.intent];return g(t,{ref:r,"data-slot":`alert-dialog-icon`,className:e(`size-12 sm:size-7`,s,n),svg:i??c,...a})};L.displayName=`AlertDialogIcon`;const R=({ref:e,...t})=>g(d,{ref:e,"data-slot":`alert-dialog-close`,...t});R.displayName=`AlertDialogClose`;const z={Root:S,Action:N,Body:D,Cancel:P,Close:R,Content:E,Description:j,Footer:k,Header:O,Icon:L,Title:A,Trigger:C};export{z as AlertDialog};