import { ClassValue, HTMLComponentProps, StyledComponentProps } from "../../types/shared.js";
import { DialogSlots } from "./dialog-variants.js";
import { ComponentType } from "react";
import { DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogOverlayProps, DialogPortalProps, DialogProps, DialogTitleProps } from "@radix-ui/react-dialog";

//#region src/components/dialog/types.d.ts

/**
 * Class names for different slots in the dialog component.
 * Allows customizing styles for specific parts of the dialog.
 */
type DialogClassNames = Partial<Record<DialogSlots, ClassValue>>;
/**
 * Props for the dialog close button component.
 * Allows customizing the close button appearance and behavior.
 *
 * @example
 * ```tsx
 * <DialogClose className="absolute top-4 right-4">X</DialogClose>
 * ```
 */
interface DialogCloseProps$1 extends StyledComponentProps<DialogCloseProps> {
  /**
   * Custom component to use instead of the default close button.
   * Useful for using a custom icon or button component.
   */
  component?: ComponentType<DialogCloseProps>;
}
/**
 * Props for the dialog content component.
 * The main container that holds the dialog's content.
 */
interface DialogContentProps$1 extends StyledComponentProps<DialogContentProps> {
  /**
   * Custom component to use instead of the default content wrapper.
   * Allows complete customization of the content container.
   */
  component?: ComponentType<DialogContentProps>;
}
/**
 * Props for the dialog description component.
 * Accessible description text for screen readers.
 */
interface DialogDescriptionProps$1 extends StyledComponentProps<DialogDescriptionProps> {
  /**
   * Custom component to use instead of the default description element.
   * Useful for rendering description with custom styling or structure.
   */
  component?: ComponentType<DialogDescriptionProps>;
}
/**
 * Props for the dialog footer component.
 * Container for action buttons (OK, Cancel, etc).
 *
 * @example
 * ```tsx
 * <DialogFooter>
 *   <Button onClick={onCancel}>Cancel</Button>
 *   <Button onClick={onConfirm}>Confirm</Button>
 * </DialogFooter>
 * ```
 */
interface DialogFooterProps extends HTMLComponentProps<'footer'> {}
/**
 * Props for the dialog header component.
 * Container for the dialog title and optional close button.
 *
 * @example
 * ```tsx
 * <DialogHeader>
 *   <DialogTitle>Delete Item</DialogTitle>
 *   <DialogClose />
 * </DialogHeader>
 * ```
 */
interface DialogHeaderProps extends HTMLComponentProps<'header'> {}
/**
 * Props for the dialog overlay component.
 * The background overlay that appears behind the dialog.
 */
interface DialogOverlayProps$1 extends StyledComponentProps<DialogOverlayProps> {
  /**
   * Custom component to use instead of the default overlay element.
   * Allows complete customization of the overlay appearance.
   */
  component?: ComponentType<DialogOverlayProps>;
}
/**
 * Props for the dialog title component.
 * The heading text displayed at the top of the dialog.
 */
interface DialogTitleProps$1 extends StyledComponentProps<DialogTitleProps> {
  /**
   * Custom component to use instead of the default title element.
   * Useful for using custom heading levels or styled components.
   */
  component?: ComponentType<DialogTitleProps>;
}
/**
 * Props for the main Dialog component.
 * A modal dialog with header, content, and footer sections.
 *
 * @template T - Type of content props, defaults to DialogContentProps
 *
 * @example
 * ```tsx
 * <Dialog
 *   trigger={<Button>Open Dialog</Button>}
 *   title="Confirm Action"
 *   description="Are you sure you want to delete?"
 *   footer={
 *     <div>
 *       <Button>Cancel</Button>
 *       <Button>Delete</Button>
 *     </div>
 *   }
 * >
 *   <p>This action cannot be undone.</p>
 * </Dialog>
 * ```
 */
interface DialogProps$1<T extends DialogContentProps$1 = DialogContentProps$1> extends StyledComponentProps<DialogProps> {
  /**
   * Custom class names for different dialog UI slots.
   */
  classNames?: DialogClassNames;
  /**
   * Custom component to render the dialog content.
   * Allows replacing the default content wrapper with a custom implementation.
   */
  contentComponent?: ComponentType<T>;
  /**
   * Props to pass to the content component.
   */
  contentProps?: T;
  /**
   * Description text displayed in the dialog.
   * Provides context or additional information about the dialog action.
   */
  description?: React.ReactNode;
  /**
   * Footer content, typically containing action buttons.
   * Appears at the bottom of the dialog.
   */
  footer?: React.ReactNode;
  /**
   * Title text displayed at the top of the dialog.
   * Should clearly indicate the purpose of the dialog.
   */
  title?: React.ReactNode;
  /**
   * Element that triggers the dialog to open.
   * Typically a button, but can be any interactive element.
   */
  trigger?: React.ReactNode;
}
//#endregion
export { DialogClassNames, DialogCloseProps$1 as DialogCloseProps, DialogContentProps$1 as DialogContentProps, DialogDescriptionProps$1 as DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogOverlayProps$1 as DialogOverlayProps, DialogPortalProps, DialogProps$1 as DialogProps, DialogTitleProps$1 as DialogTitleProps };