@ngrok/mantle 0.32.3 → 0.40.1

package/dist/dialog.d.ts

@@ -1,7 +1,7 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ComponentProps } from 'react';
 import * as _radix_ui_react_dialog from '@radix-ui/react-dialog';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { a as IconButtonProps } from './icon-button-D4BTvC7F.js';
 import { R as Root } from './primitive-BUbUB7RS.js';
 import 'class-variance-authority/types';
@@ -10,290 +10,400 @@ import './variant-props-oDo2u-We.js';
 import 'class-variance-authority';
 import './deep-non-nullable-SmpSvoSd.js';
 
+type CloseIconButtonProps = Partial<Omit<IconButtonProps, "icon">>;
 /**
  * A window overlaid on either the primary window or another dialog window.
- * The root stateful component for the Dialog.
- *
- * @see https://mantle.ngrok.com/components/dialog#api-dialog
- *
- * @example
- * ```tsx
- * <Dialog>
- *   <DialogTrigger asChild>
- *     <Button type="button" appearance="outlined">
- *       Open Dialog
- *     </Button>
- *   </DialogTrigger>
- *   <DialogContent>
- *     <DialogHeader>
- *       <DialogTitle>Dialog Title</DialogTitle>
- *       <DialogCloseIconButton />
- *     </DialogHeader>
- *     <DialogBody>
- *       <p>This is the dialog content.</p>
- *     </DialogBody>
- *     <DialogFooter>
- *       <Button type="button" appearance="outlined">
- *         Cancel
- *       </Button>
- *       <Button type="button" appearance="filled">
- *         Save
- *       </Button>
- *     </DialogFooter>
- *   </DialogContent>
- * </Dialog>
- * ```
- */
-declare const Dialog: typeof Root;
-/**
- * A button that opens the dialog.
  *
- * @see https://mantle.ngrok.com/components/dialog#api-dialog-trigger
+ * @see https://mantle.ngrok.com/components/dialog
  *
  * @example
  * ```tsx
- * <Dialog>
- *   <DialogTrigger asChild>
+ * <Dialog.Root>
+ *   <Dialog.Trigger asChild>
  *     <Button type="button" appearance="outlined">
  *       Open Dialog
  *     </Button>
- *   </DialogTrigger>
- *   <DialogContent>
- *     <DialogHeader>
- *       <DialogTitle>Dialog Title</DialogTitle>
- *     </DialogHeader>
- *     <DialogBody>
+ *   </Dialog.Trigger>
+ *   <Dialog.Content>
+ *     <Dialog.Header>
+ *       <Dialog.Title>Dialog Title</Dialog.Title>
+ *       <Dialog.CloseIconButton />
+ *     </Dialog.Header>
+ *     <Dialog.Body>
  *       <p>This is the dialog content.</p>
- *     </DialogBody>
- *   </DialogContent>
- * </Dialog>
- * ```
- */
-declare const DialogTrigger: react.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
-declare const DialogPortal: react.FC<_radix_ui_react_dialog.DialogPortalProps>;
-declare const DialogClose: react.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
-declare const DialogOverlay: react.ForwardRefExoticComponent<Omit<_radix_ui_react_dialog.DialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-/**
- * The container for the dialog content.
- * Renders on top of the overlay and is centered in the viewport.
- *
- * @see https://mantle.ngrok.com/components/dialog#api-dialog-content
- *
- * @example
- * ```tsx
- * <Dialog>
- *   <DialogTrigger asChild>
- *     <Button type="button" appearance="outlined">
- *       Open Dialog
- *     </Button>
- *   </DialogTrigger>
- *   <DialogContent>
- *     <DialogHeader>
- *       <DialogTitle>Dialog Title</DialogTitle>
- *       <DialogCloseIconButton />
- *     </DialogHeader>
- *     <DialogBody>
- *       <p>This is the dialog content.</p>
- *     </DialogBody>
- *     <DialogFooter>
+ *     </Dialog.Body>
+ *     <Dialog.Footer>
  *       <Button type="button" appearance="outlined">
  *         Cancel
  *       </Button>
  *       <Button type="button" appearance="filled">
  *         Save
  *       </Button>
- *     </DialogFooter>
- *   </DialogContent>
- * </Dialog>
+ *     </Dialog.Footer>
+ *   </Dialog.Content>
+ * </Dialog.Root>
  * ```
  */
-declare const DialogContent: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog.DialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & {
+declare const Dialog: {
     /**
-     * The preferred width of the `DialogContent` as a tailwind `max-w-` class.
+     * A window overlaid on either the primary window or another dialog window.
+     * The root stateful component for the Dialog.
      *
-     * By default, a `Dialog`'s content width is responsive with a default
-     * preferred width: the maximum width of the `DialogContent`
+     * @see https://mantle.ngrok.com/components/dialog#api-dialog
      *
-     * @default `max-w-lg`
+     * @example
+     * ```tsx
+     * <Dialog.Root>
+     *   <Dialog.Trigger asChild>
+     *     <Button type="button" appearance="outlined">
+     *       Open Dialog
+     *     </Button>
+     *   </Dialog.Trigger>
+     *   <Dialog.Content>
+     *     <Dialog.Header>
+     *       <Dialog.Title>Dialog Title</Dialog.Title>
+     *       <Dialog.CloseIconButton />
+     *     </Dialog.Header>
+     *     <Dialog.Body>
+     *       <p>This is the dialog content.</p>
+     *     </Dialog.Body>
+     *     <Dialog.Footer>
+     *       <Button type="button" appearance="outlined">
+     *         Cancel
+     *       </Button>
+     *       <Button type="button" appearance="filled">
+     *         Save
+     *       </Button>
+     *     </Dialog.Footer>
+     *   </Dialog.Content>
+     * </Dialog.Root>
+     * ```
      */
-    preferredWidth?: `max-w-${string}`;
-} & react.RefAttributes<HTMLDivElement>>;
-/**
- * Contains the header content of the dialog, including the title and close button.
- *
- * @see https://mantle.ngrok.com/components/dialog#api-dialog-header
- *
- * @example
- * ```tsx
- * <Dialog>
- *   <DialogTrigger asChild>
- *     <Button type="button" appearance="outlined">
- *       Open Dialog
- *     </Button>
- *   </DialogTrigger>
- *   <DialogContent>
- *     <DialogHeader>
- *       <DialogTitle>Dialog Title</DialogTitle>
- *       <DialogCloseIconButton />
- *     </DialogHeader>
- *     <DialogBody>
- *       <p>This is the dialog content.</p>
- *     </DialogBody>
- *   </DialogContent>
- * </Dialog>
- * ```
- */
-declare const DialogHeader: {
-    ({ className, children, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-type DialogCloseIconButtonProps = Partial<Omit<IconButtonProps, "icon">>;
-/**
- * An icon button that closes the dialog when clicked.
- *
- * @see https://mantle.ngrok.com/components/dialog#api-dialog-close-icon-button
- *
- * @example
- * ```tsx
- * <Dialog>
- *   <DialogTrigger asChild>
- *     <Button type="button" appearance="outlined">
- *       Open Dialog
- *     </Button>
- *   </DialogTrigger>
- *   <DialogContent>
- *     <DialogHeader>
- *       <DialogTitle>Dialog Title</DialogTitle>
- *       <DialogCloseIconButton />
- *     </DialogHeader>
- *     <DialogBody>
- *       <p>This is the dialog content.</p>
- *     </DialogBody>
- *   </DialogContent>
- * </Dialog>
- * ```
- */
-declare const DialogCloseIconButton: {
-    ({ size, type, label, appearance, ...props }: DialogCloseIconButtonProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-/**
- * Contains the main content of the dialog.
- *
- * @see https://mantle.ngrok.com/components/dialog#api-dialog-body
- *
- * @example
- * ```tsx
- * <Dialog>
- *   <DialogTrigger asChild>
- *     <Button type="button" appearance="outlined">
- *       Open Dialog
- *     </Button>
- *   </DialogTrigger>
- *   <DialogContent>
- *     <DialogHeader>
- *       <DialogTitle>Dialog Title</DialogTitle>
- *     </DialogHeader>
- *     <DialogBody>
- *       <p>This is the dialog content.</p>
- *     </DialogBody>
- *   </DialogContent>
- * </Dialog>
- * ```
- */
-declare const DialogBody: {
-    ({ className, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-/**
- * Contains the footer content of the dialog, including action buttons.
- *
- * @see https://mantle.ngrok.com/components/dialog#api-dialog-footer
- *
- * @example
- * ```tsx
- * <Dialog>
- *   <DialogTrigger asChild>
- *     <Button type="button" appearance="outlined">
- *       Open Dialog
- *     </Button>
- *   </DialogTrigger>
- *   <DialogContent>
- *     <DialogHeader>
- *       <DialogTitle>Dialog Title</DialogTitle>
- *     </DialogHeader>
- *     <DialogBody>
- *       <p>This is the dialog content.</p>
- *     </DialogBody>
- *     <DialogFooter>
- *       <Button type="button" appearance="outlined">
- *         Cancel
- *       </Button>
- *       <Button type="button" appearance="filled">
- *         Save
- *       </Button>
- *     </DialogFooter>
- *   </DialogContent>
- * </Dialog>
- * ```
- */
-declare const DialogFooter: {
-    ({ className, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-    displayName: string;
+    readonly Root: typeof Root;
+    /**
+     * Contains the main content of the dialog.
+     *
+     * @see https://mantle.ngrok.com/components/dialog#api-dialog-body
+     *
+     * @example
+     * ```tsx
+     * <Dialog.Root>
+     *   <Dialog.Trigger asChild>
+     *     <Button type="button" appearance="outlined">
+     *       Open Dialog
+     *     </Button>
+     *   </Dialog.Trigger>
+     *   <Dialog.Content>
+     *     <Dialog.Header>
+     *       <Dialog.Title>Dialog Title</Dialog.Title>
+     *     </Dialog.Header>
+     *     <Dialog.Body>
+     *       <p>This is the dialog content.</p>
+     *     </Dialog.Body>
+     *   </Dialog.Content>
+     * </Dialog.Root>
+     * ```
+     */
+    readonly Body: {
+        ({ className, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+    /**
+     * A button that closes the dialog when clicked.
+     *
+     * @see https://mantle.ngrok.com/components/dialog#api-dialog-close
+     *
+     * @example
+     * ```tsx
+     * <Dialog.Root>
+     *   <Dialog.Trigger asChild>
+     *     <Button type="button">Open Dialog</Button>
+     *   </Dialog.Trigger>
+     *   <Dialog.Content>
+     *     <Dialog.Header>
+     *       <Dialog.Title>Confirm Action</Dialog.Title>
+     *     </Dialog.Header>
+     *     <Dialog.Body>
+     *       <Text>Are you sure you want to proceed?</Text>
+     *     </Dialog.Body>
+     *     <Dialog.Footer>
+     *       <Dialog.Close asChild>
+     *         <Button type="button" appearance="outlined">Cancel</Button>
+     *       </Dialog.Close>
+     *       <Button type="submit">Confirm</Button>
+     *     </Dialog.Footer>
+     *   </Dialog.Content>
+     * </Dialog.Root>
+     * ```
+     */
+    readonly Close: react.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+    /**
+     * An icon button that closes the dialog when clicked.
+     *
+     * @see https://mantle.ngrok.com/components/dialog#api-dialog-close-icon-button
+     *
+     * @example
+     * ```tsx
+     * <Dialog.Root>
+     *   <Dialog.Trigger asChild>
+     *     <Button type="button" appearance="outlined">
+     *       Open Dialog
+     *     </Button>
+     *   </Dialog.Trigger>
+     *   <Dialog.Content>
+     *     <Dialog.Header>
+     *       <Dialog.Title>Dialog Title</Dialog.Title>
+     *       <Dialog.CloseIconButton />
+     *     </Dialog.Header>
+     *     <Dialog.Body>
+     *       <p>This is the dialog content.</p>
+     *     </Dialog.Body>
+     *   </Dialog.Content>
+     * </Dialog.Root>
+     * ```
+     */
+    readonly CloseIconButton: {
+        ({ size, type, label, appearance, ...props }: CloseIconButtonProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+    /**
+     * The container for the dialog content.
+     * Renders on top of the overlay and is centered in the viewport.
+     *
+     * @see https://mantle.ngrok.com/components/dialog#api-dialog-content
+     *
+     * @example
+     * ```tsx
+     * <Dialog.Root>
+     *   <Dialog.Trigger asChild>
+     *     <Button type="button" appearance="outlined">
+     *       Open Dialog
+     *     </Button>
+     *   </Dialog.Trigger>
+     *   <Dialog.Content>
+     *     <Dialog.Header>
+     *       <Dialog.Title>Dialog Title</Dialog.Title>
+     *       <Dialog.CloseIconButton />
+     *     </Dialog.Header>
+     *     <Dialog.Body>
+     *       <p>This is the dialog content.</p>
+     *     </Dialog.Body>
+     *     <Dialog.Footer>
+     *       <Button type="button" appearance="outlined">
+     *         Cancel
+     *       </Button>
+     *       <Button type="button" appearance="filled">
+     *         Save
+     *       </Button>
+     *     </Dialog.Footer>
+     *   </Dialog.Content>
+     * </Dialog.Root>
+     * ```
+     */
+    readonly Content: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog.DialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & {
+        /**
+         * The preferred width of the `Dialog.Content` as a tailwind `max-w-` class.
+         *
+         * By default, a `Dialog`'s content width is responsive with a default
+         * preferred width: the maximum width of the `Dialog.Content`
+         *
+         * @default `max-w-lg`
+         */
+        preferredWidth?: `max-w-${string}`;
+    } & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * An accessible description to be announced when the dialog is opened.
+     *
+     * @see https://mantle.ngrok.com/components/dialog#api-dialog-description
+     *
+     * @example
+     * ```tsx
+     * <Dialog.Root>
+     *   <Dialog.Trigger asChild>
+     *     <Button type="button" appearance="outlined">
+     *       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.Header>
+     *     <Dialog.Body>
+     *       <p>This is the dialog content.</p>
+     *     </Dialog.Body>
+     *   </Dialog.Content>
+     * </Dialog.Root>
+     * ```
+     */
+    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 action buttons.
+     *
+     * @see https://mantle.ngrok.com/components/dialog#api-dialog-footer
+     *
+     * @example
+     * ```tsx
+     * <Dialog.Root>
+     *   <Dialog.Trigger asChild>
+     *     <Button type="button" appearance="outlined">
+     *       Open Dialog
+     *     </Button>
+     *   </Dialog.Trigger>
+     *   <Dialog.Content>
+     *     <Dialog.Header>
+     *       <Dialog.Title>Dialog Title</Dialog.Title>
+     *     </Dialog.Header>
+     *     <Dialog.Body>
+     *       <p>This is the dialog content.</p>
+     *     </Dialog.Body>
+     *     <Dialog.Footer>
+     *       <Button type="button" appearance="outlined">
+     *         Cancel
+     *       </Button>
+     *       <Button type="button" appearance="filled">
+     *         Save
+     *       </Button>
+     *     </Dialog.Footer>
+     *   </Dialog.Content>
+     * </Dialog.Root>
+     * ```
+     */
+    readonly Footer: {
+        ({ className, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+    /**
+     * Contains the header content of the dialog, including the title and close button.
+     *
+     * @see https://mantle.ngrok.com/components/dialog#api-dialog-header
+     *
+     * @example
+     * ```tsx
+     * <Dialog.Root>
+     *   <Dialog.Trigger asChild>
+     *     <Button type="button" appearance="outlined">
+     *       Open Dialog
+     *     </Button>
+     *   </Dialog.Trigger>
+     *   <Dialog.Content>
+     *     <Dialog.Header>
+     *       <Dialog.Title>Dialog Title</Dialog.Title>
+     *       <Dialog.CloseIconButton />
+     *     </Dialog.Header>
+     *     <Dialog.Body>
+     *       <p>This is the dialog content.</p>
+     *     </Dialog.Body>
+     *   </Dialog.Content>
+     * </Dialog.Root>
+     * ```
+     */
+    readonly Header: {
+        ({ className, children, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+    /**
+     * The overlay backdrop for the dialog.
+     *
+     * @see https://mantle.ngrok.com/components/dialog#api-dialog-overlay
+     *
+     * @example
+     * ```tsx
+     * <Dialog.Root>
+     *   <Dialog.Portal>
+     *     <Dialog.Overlay />
+     *     <Dialog.Content>
+     *       <Dialog.Header>
+     *         <Dialog.Title>Dialog Title</Dialog.Title>
+     *       </Dialog.Header>
+     *       <Dialog.Body>
+     *         <Text>Dialog content here.</Text>
+     *       </Dialog.Body>
+     *     </Dialog.Content>
+     *   </Dialog.Portal>
+     * </Dialog.Root>
+     * ```
+     */
+    readonly Overlay: react.ForwardRefExoticComponent<Omit<_radix_ui_react_dialog.DialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * The portal container for the dialog.
+     *
+     * @see https://mantle.ngrok.com/components/dialog#api-dialog-portal
+     *
+     * @example
+     * ```tsx
+     * <Dialog.Root>
+     *   <Dialog.Trigger asChild>
+     *     <Button type="button">Open Dialog</Button>
+     *   </Dialog.Trigger>
+     *   <Dialog.Portal>
+     *     <Dialog.Overlay />
+     *     <Dialog.Content>
+     *       <Dialog.Header>
+     *         <Dialog.Title>Portal Dialog</Dialog.Title>
+     *       </Dialog.Header>
+     *       <Dialog.Body>
+     *         <Text>This dialog is rendered in a portal.</Text>
+     *       </Dialog.Body>
+     *     </Dialog.Content>
+     *   </Dialog.Portal>
+     * </Dialog.Root>
+     * ```
+     */
+    readonly Portal: react.FC<_radix_ui_react_dialog.DialogPortalProps>;
+    /**
+     * An accessible name to be announced when the dialog is opened.
+     *
+     * @see https://mantle.ngrok.com/components/dialog#api-dialog-title
+     *
+     * @example
+     * ```tsx
+     * <Dialog.Root>
+     *   <Dialog.Trigger asChild>
+     *     <Button type="button" appearance="outlined">
+     *       Open Dialog
+     *     </Button>
+     *   </Dialog.Trigger>
+     *   <Dialog.Content>
+     *     <Dialog.Header>
+     *       <Dialog.Title>Dialog Title</Dialog.Title>
+     *       <Dialog.CloseIconButton />
+     *     </Dialog.Header>
+     *     <Dialog.Body>
+     *       <p>This is the dialog content.</p>
+     *     </Dialog.Body>
+     *   </Dialog.Content>
+     * </Dialog.Root>
+     * ```
+     */
+    readonly Title: react.ForwardRefExoticComponent<Omit<_radix_ui_react_dialog.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+    /**
+     * A button that opens the dialog.
+     *
+     * @see https://mantle.ngrok.com/components/dialog#api-dialog-trigger
+     *
+     * @example
+     * ```tsx
+     * <Dialog.Root>
+     *   <Dialog.Trigger asChild>
+     *     <Button type="button" appearance="outlined">
+     *       Open Dialog
+     *     </Button>
+     *   </Dialog.Trigger>
+     *   <Dialog.Content>
+     *     <Dialog.Header>
+     *       <Dialog.Title>Dialog Title</Dialog.Title>
+     *     </Dialog.Header>
+     *     <Dialog.Body>
+     *       <p>This is the dialog content.</p>
+     *     </Dialog.Body>
+     *   </Dialog.Content>
+     * </Dialog.Root>
+     * ```
+     */
+    readonly Trigger: react.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 };
-/**
- * An accessible name to be announced when the dialog is opened.
- *
- * @see https://mantle.ngrok.com/components/dialog#api-dialog-title
- *
- * @example
- * ```tsx
- * <Dialog>
- *   <DialogTrigger asChild>
- *     <Button type="button" appearance="outlined">
- *       Open Dialog
- *     </Button>
- *   </DialogTrigger>
- *   <DialogContent>
- *     <DialogHeader>
- *       <DialogTitle>Dialog Title</DialogTitle>
- *       <DialogCloseIconButton />
- *     </DialogHeader>
- *     <DialogBody>
- *       <p>This is the dialog content.</p>
- *     </DialogBody>
- *   </DialogContent>
- * </Dialog>
- * ```
- */
-declare const DialogTitle: 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.
- *
- * @see https://mantle.ngrok.com/components/dialog#api-dialog-description
- *
- * @example
- * ```tsx
- * <Dialog>
- *   <DialogTrigger asChild>
- *     <Button type="button" appearance="outlined">
- *       Open Dialog
- *     </Button>
- *   </DialogTrigger>
- *   <DialogContent>
- *     <DialogHeader>
- *       <DialogTitle>Dialog Title</DialogTitle>
- *       <DialogDescription>
- *         This is an optional description.
- *       </DialogDescription>
- *     </DialogHeader>
- *     <DialogBody>
- *       <p>This is the dialog content.</p>
- *     </DialogBody>
- *   </DialogContent>
- * </Dialog>
- * ```
- */
-declare const DialogDescription: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
 
-export { Dialog, DialogBody, DialogClose, DialogCloseIconButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
+export { Dialog };