import { ForwardRefComponent } from "../utils/polymorphic.js";
import { ButtonProps } from "../Button/types.js";
import { ResponsiveValue } from "../hooks/useResponsiveValue.js";
import React, { CSSProperties } from "react";

//#region src/Dialog/Dialog.d.ts
/**
 * Props that characterize a button to be rendered into the footer of
 * a Dialog.
 */
type DialogButtonProps = Omit<ButtonProps, 'content'> & {
  /**
   * The variant of Button to use
   */
  buttonType?: 'default' | 'primary' | 'danger' | 'normal';
  /**
   * The Button's inner text
   */
  content: React.ReactNode;
  /**
   * If true, and if this is the only button with autoFocus set to true,
   * focus this button automatically when the dialog appears.
   */
  autoFocus?: boolean;
  /**
   * A reference to the rendered Button’s DOM node, used together with
   * `autoFocus` for `focusTrap`’s `initialFocus`.
   */
  ref?: React.RefObject<HTMLButtonElement | null>;
};
/**
 * Props to customize the rendering of the Dialog.
 */
interface DialogProps {
  'data-component'?: string;
  /**
   * Title of the Dialog. Also serves as the aria-label for this Dialog.
   */
  title?: React.ReactNode;
  /**
   * The Dialog's subtitle. Optional. Rendered below the title in smaller
   * type with less contrast. Also serves as the aria-describedby for this
   * Dialog.
   */
  subtitle?: React.ReactNode;
  /**
   * Provide a custom renderer for the dialog header. This content is
   * rendered directly into the dialog body area, full bleed from edge
   * to edge, top to the start of the body element.
   *
   * Warning: using a custom renderer may violate Primer UX principles.
   */
  renderHeader?: React.FunctionComponent<React.PropsWithChildren<DialogHeaderProps>>;
  /**
   * Provide a custom render function for the dialog body. This content is
   * rendered directly into the dialog body area, full bleed from edge to
   * edge, header to footer.
   *
   * Warning: using a custom renderer may violate Primer UX principles.
   */
  renderBody?: React.FunctionComponent<React.PropsWithChildren<DialogProps>>;
  /**
   * Provide a custom render function for the dialog footer. This content is
   * rendered directly into the dialog footer area, full bleed from edge to
   * edge, end of the body element to bottom.
   *
   * Warning: using a custom renderer may violate Primer UX principles.
   */
  renderFooter?: React.FunctionComponent<React.PropsWithChildren<DialogProps>>;
  /**
   * Specifies the buttons to be rendered in the Dialog footer.
   */
  footerButtons?: DialogButtonProps[];
  /**
   * This method is invoked when a gesture to close the dialog is used (either
   * an Escape key press, clicking the backdrop, or clicking the "X" in the top-right corner). The
   * gesture argument indicates the gesture that was used to close the dialog
   * ('close-button' or 'escape').
   */
  onClose: (gesture: 'close-button' | 'escape') => void;
  /**
   * Default: "dialog". The ARIA role to assign to this dialog.
   * @see https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
   * @see https://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog
   */
  role?: 'dialog' | 'alertdialog';
  /**
   * The width of the dialog.
   * small: 296px
   * medium: 320px
   * large: 480px
   * xlarge: 640px
   *
   * Also accepts any valid CSS width value (e.g. '400px', '80rem').
   */
  width?: DialogWidth;
  /**
   * The height of the dialog.
   * small: 296x480
   * large: 480x640
   * auto: variable based on contents
   */
  height?: DialogHeight;
  /**
   * The position of the dialog
   */
  position?: 'center' | 'left' | 'right' | ResponsiveValue<'left' | 'right' | 'bottom' | 'fullscreen' | 'center'>;
  /**
   * The vertical alignment of the dialog. Only applies when position is 'center' (the default).
   * top: positions the Dialog ~4rem from the top of the screen, horizontally centered
   * center: (default) vertically centers the Dialog on the screen
   * bottom: positions the Dialog near the bottom of the screen, horizontally centered
   */
  align?: 'top' | 'center' | 'bottom';
  /**
   * Return focus to this element when the Dialog closes,
   * instead of the element that had focus immediately before the Dialog opened
   */
  returnFocusRef?: React.RefObject<HTMLElement | null>;
  /**
   * The element to focus when the Dialog opens
   */
  initialFocusRef?: React.RefObject<HTMLElement | null>;
  /**
   * Additional class names to apply to the dialog
   */
  className?: string;
  /**
   * Additional styles to apply to the dialog
   */
  style?: React.CSSProperties;
}
/**
 * Props that are passed to a component that serves as a dialog header
 */
interface DialogHeaderProps extends DialogProps {
  /**
   * ID of the element that will be used as the `aria-labelledby` attribute on the
   * dialog. This ID should be set to the element that renders the dialog's title.
   */
  dialogLabelId: string;
  /**
   * ID of the element that will be used as the `aria-describedby` attribute on the
   * dialog. This ID should be set to the element that renders the dialog's subtitle.
   */
  dialogDescriptionId: string;
}
declare const heightMap: {
  readonly small: "480px";
  readonly large: "640px";
  readonly auto: "auto";
};
declare const widthMap: {
  readonly small: "296px";
  readonly medium: "320px";
  readonly large: "480px";
  readonly xlarge: "640px";
};
type DialogWidth = keyof typeof widthMap | Exclude<CSSProperties['width'], undefined>;
type DialogHeight = keyof typeof heightMap;
declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {
  children?: React.ReactNode | undefined;
} & React.RefAttributes<HTMLDivElement>> & {
  Header: ForwardRefComponent<"div", React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
  Title: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
  Subtitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
  Body: ForwardRefComponent<"div", React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
  Footer: ForwardRefComponent<"div", React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
  Buttons: React.FC<React.PropsWithChildren<{
    buttons: DialogButtonProps[];
  }>>;
  CloseButton: React.FC<React.PropsWithChildren<{
    onClose: () => void;
    onKeyDown?: React.KeyboardEventHandler;
  }>>;
};
//#endregion
export { Dialog, DialogButtonProps, DialogHeaderProps, DialogHeight, DialogProps, DialogWidth };