banhaten 0.1.0

package/registry/components/modal.tsx

@@ -0,0 +1,799 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { InfoIcon, TriangleAlertIcon, XIcon } from "lucide-react"
+
+import { Button, type ButtonProps } from "@/components/ui/button"
+import { Checkbox, type CheckboxProps } from "@/components/ui/checkbox"
+import { Spinner } from "@/components/ui/spinner"
+import { cn } from "@/lib/utils"
+
+type ModalSize = "sm" | "default" | "lg"
+type ModalIntent = "default" | "warning" | "danger"
+
+const modalSurfaceBaseClassName = [
+  "flex max-h-[calc(100vh-(var(--bh-space-8xl-48)*2))] w-[var(--bh-modal-width)] max-w-[calc(100vw-(var(--bh-space-4xl-20)*2))] flex-col overflow-hidden rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--shadow-modal)] outline-none",
+  "[--bh-modal-border:var(--bh-border-subtle)] [--shadow-modal:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-modal-border),var(--shadow-component-default)]",
+]
+
+const modalSizeVariants = {
+  sm: "[--bh-modal-width:calc(var(--bh-space-19xl-384)+var(--bh-space-8xl-48)+var(--bh-space-md-8))]",
+  default:
+    "[--bh-modal-width:calc(var(--bh-space-19xl-384)+var(--bh-space-12xl-128)+var(--bh-space-8xl-48))]",
+  lg: "[--bh-modal-width:calc(var(--bh-space-19xl-384)+var(--bh-space-16xl-256)+var(--bh-space-9xl-64)-var(--bh-space-xs-4))]",
+} as const
+
+const modalSurfaceVariants = cva(modalSurfaceBaseClassName, {
+  variants: {
+    size: modalSizeVariants,
+  },
+  defaultVariants: {
+    size: "sm",
+  },
+})
+
+const modalContentVariants = cva(
+  [
+    "fixed left-1/2 top-1/2 z-[var(--bh-z-overlay)] -translate-x-1/2 -translate-y-1/2",
+    ...modalSurfaceBaseClassName,
+  ],
+  {
+    variants: {
+      size: modalSizeVariants,
+    },
+    defaultVariants: {
+      size: "sm",
+    },
+  }
+)
+
+const modalHeaderIconIntentClassNames: Record<ModalIntent, string> = {
+  default: "text-[var(--bh-content-subtle)]",
+  danger:
+    "rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-danger-subtle)] text-[var(--bh-content-danger-default)]",
+  warning:
+    "rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-warning-subtle)] text-[var(--bh-content-warning-default)]",
+}
+
+type ModalRootProps = React.ComponentProps<typeof DialogPrimitive.Root>
+type ModalContentProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Content
+> &
+  VariantProps<typeof modalContentVariants> & {
+    overlayClassName?: string
+  }
+type ModalOverlayProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Overlay
+>
+type ModalSurfaceProps = React.ComponentProps<"section"> &
+  VariantProps<typeof modalSurfaceVariants>
+type ModalHeaderProps = React.ComponentProps<"header">
+type ModalBodyProps = React.ComponentProps<"div">
+type ModalFooterProps = React.ComponentProps<"footer">
+type ModalActionsProps = React.ComponentProps<"div">
+type ModalHeaderIconProps = React.ComponentProps<"span"> & {
+  intent?: ModalIntent
+}
+type ModalCloseButtonProps = React.ComponentProps<"button"> & {
+  label?: string
+}
+type ModalFooterCheckboxProps = Omit<React.ComponentProps<"div">, "children"> & {
+  checked?: CheckboxProps["checked"]
+  defaultChecked?: CheckboxProps["defaultChecked"]
+  disabled?: CheckboxProps["disabled"]
+  label?: React.ReactNode
+  onCheckedChange?: CheckboxProps["onCheckedChange"]
+}
+type ModalActionButtonProps = ButtonProps
+
+type ModalProps = Omit<ModalRootProps, "children"> &
+  VariantProps<typeof modalContentVariants> & {
+    checkboxLabel?: React.ReactNode
+    children?: React.ReactNode
+    className?: string
+    description?: React.ReactNode
+    dir?: "ltr" | "rtl"
+    footer?: React.ReactNode
+    overlayClassName?: string
+    primaryActionLabel?: React.ReactNode
+    secondaryActionLabel?: React.ReactNode
+    showCheckbox?: boolean
+    showCloseButton?: boolean
+    showDivider?: boolean
+    showFooter?: boolean
+    showIcon?: boolean
+    title?: React.ReactNode
+  }
+
+type ConfirmModalProps = Omit<
+  ModalProps,
+  | "checkboxLabel"
+  | "footer"
+  | "primaryActionLabel"
+  | "secondaryActionLabel"
+  | "showCheckbox"
+> & {
+  cancelButtonProps?: ModalActionButtonProps
+  cancelLabel?: React.ReactNode
+  closeOnCancel?: boolean
+  closeOnConfirm?: boolean
+  confirmButtonProps?: ModalActionButtonProps
+  confirmDisabled?: boolean
+  confirmLabel?: React.ReactNode
+  confirmLoading?: boolean
+  confirmLoadingLabel?: React.ReactNode
+  confirmVariant?: ModalActionButtonProps["variant"]
+  intent?: ModalIntent
+  onCancel?: React.MouseEventHandler<HTMLButtonElement>
+  onConfirm?: React.MouseEventHandler<HTMLButtonElement>
+  onEscapeKeyDown?: ModalContentProps["onEscapeKeyDown"]
+  onInteractOutside?: ModalContentProps["onInteractOutside"]
+  onOpenAutoFocus?: ModalContentProps["onOpenAutoFocus"]
+  onPointerDownOutside?: ModalContentProps["onPointerDownOutside"]
+  preventEscapeDismiss?: boolean
+  preventOutsideDismiss?: boolean
+  showCancelButton?: boolean
+}
+
+const defaultModalTitle = "Modal Title"
+const defaultModalDescription =
+  "Are you sure you want to proceed with this action? Please review your choices before confirming."
+const defaultModalCheckboxLabel = "Don't show me again"
+const defaultConfirmTitle = "Confirm action"
+const defaultConfirmDescription =
+  "This action may affect saved data. Review the details before confirming."
+const defaultConfirmCancelLabel = "Cancel"
+const defaultConfirmActionLabel = "Confirm"
+const defaultConfirmLoadingLabel = "Confirming"
+const defaultRtlModalTitle = "\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0646\u0645\u0648\u0630\u062c"
+const defaultRtlModalDescription =
+  "\u0647\u0644 \u0623\u0646\u062a \u0645\u062a\u0623\u0643\u062f \u0623\u0646\u0643 \u062a\u0631\u064a\u062f \u0627\u0644\u0645\u062a\u0627\u0628\u0639\u0629 \u0645\u0639 \u0647\u0630\u0627 \u0627\u0644\u0625\u062c\u0631\u0627\u0621\u061f \u064a\u0631\u062c\u0649 \u0645\u0631\u0627\u062c\u0639\u0629 \u062e\u064a\u0627\u0631\u0627\u062a\u0643 \u0642\u0628\u0644 \u0627\u0644\u062a\u0623\u0643\u064a\u062f."
+const defaultRtlModalCheckboxLabel = "\u0627\u0644\u062a\u0633\u0645\u064a\u0629"
+const defaultRtlActionLabel = "\u0627\u0646\u0642\u0631 \u0647\u0646\u0627"
+const defaultRtlConfirmTitle = "\u062a\u0623\u0643\u064a\u062f \u0627\u0644\u0625\u062c\u0631\u0627\u0621"
+const defaultRtlConfirmDescription =
+  "\u0642\u062f \u064a\u0624\u062b\u0631 \u0647\u0630\u0627 \u0627\u0644\u0625\u062c\u0631\u0627\u0621 \u0639\u0644\u0649 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u062d\u0641\u0648\u0638\u0629. \u0631\u0627\u062c\u0639 \u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644 \u0642\u0628\u0644 \u0627\u0644\u062a\u0623\u0643\u064a\u062f."
+const defaultRtlConfirmCancelLabel = "\u0625\u0644\u063a\u0627\u0621"
+const defaultRtlConfirmActionLabel = "\u062a\u0623\u0643\u064a\u062f"
+const defaultRtlConfirmLoadingLabel = "\u062c\u0627\u0631\u064a \u0627\u0644\u062a\u0623\u0643\u064a\u062f"
+
+const ModalRoot = DialogPrimitive.Root
+const ModalTrigger = DialogPrimitive.Trigger
+const ModalPortal = DialogPrimitive.Portal
+const ModalClose = DialogPrimitive.Close
+
+const ModalOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  ModalOverlayProps
+>(function ModalOverlay({ className, ...props }, ref) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="modal-overlay"
+      ref={ref}
+      className={cn("fixed inset-0 z-[var(--bh-z-overlay)] bg-[var(--bh-bg-backdrop)]", className)}
+      {...props}
+    />
+  )
+})
+
+const ModalContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  ModalContentProps
+>(function ModalContent(
+  { children, className, overlayClassName, size, ...props },
+  ref
+) {
+  return (
+    <ModalPortal>
+      <ModalOverlay className={overlayClassName} />
+      <DialogPrimitive.Content
+        data-size={size ?? "sm"}
+        data-slot="modal-content"
+        ref={ref}
+        className={cn(modalContentVariants({ size, className }))}
+        {...props}
+      >
+        {children}
+      </DialogPrimitive.Content>
+    </ModalPortal>
+  )
+})
+
+const ModalSurface = React.forwardRef<HTMLElement, ModalSurfaceProps>(
+  function ModalSurface({ className, size, ...props }, ref) {
+    return (
+      <section
+        data-size={size ?? "sm"}
+        data-slot="modal-surface"
+        ref={ref}
+        className={cn(modalSurfaceVariants({ size, className }))}
+        {...props}
+      />
+    )
+  }
+)
+
+const ModalHeader = React.forwardRef<HTMLElement, ModalHeaderProps>(function ModalHeader({
+  className,
+  ...props
+}, ref) {
+  return (
+    <header
+      data-slot="modal-header"
+      ref={ref}
+      className={cn(
+        "relative flex w-full shrink-0 items-center gap-[var(--bh-space-sm-6)] px-[var(--bh-space-4xl-20)] pb-[var(--bh-space-md-8)] pe-[var(--bh-space-9xl-64)] pt-[var(--bh-space-4xl-20)] text-start",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const ModalTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(function ModalTitle({ className, dir = "auto", ...props }, ref) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="modal-title"
+      dir={dir}
+      ref={ref}
+      className={cn(
+        "min-w-0 flex-1 text-start text-[length:var(--bh-text-heading-sm-semibold-font-size)] font-[var(--bh-text-heading-sm-semibold-font-weight)] leading-[var(--bh-text-heading-sm-semibold-line-height)] tracking-[var(--bh-text-heading-sm-semibold-letter-spacing)] text-[var(--bh-content-default)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const ModalDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(function ModalDescription({ className, dir = "auto", ...props }, ref) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="modal-description"
+      dir={dir}
+      ref={ref}
+      className={cn(
+        "min-w-0 flex-1 text-start text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const ModalBody = React.forwardRef<HTMLDivElement, ModalBodyProps>(function ModalBody({
+  className,
+  ...props
+}, ref) {
+  return (
+    <div
+      data-slot="modal-body"
+      ref={ref}
+      className={cn(
+        "flex w-full shrink-0 items-start px-[var(--bh-space-4xl-20)] pb-[var(--bh-space-4xl-20)] pt-[var(--bh-space-lg-10)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const ModalDivider = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  function ModalDivider({ className, role = "separator", ...props }, ref) {
+    return (
+      <div
+        data-slot="modal-divider"
+        ref={ref}
+        role={role}
+        className={cn("w-full border-t border-[var(--bh-border-subtle)]", className)}
+        {...props}
+      />
+    )
+  }
+)
+
+const ModalFooter = React.forwardRef<HTMLElement, ModalFooterProps>(function ModalFooter({
+  className,
+  ...props
+}, ref) {
+  return (
+    <footer
+      data-slot="modal-footer"
+      ref={ref}
+      className={cn(
+        "flex w-full shrink-0 items-center justify-end gap-[var(--bh-space-lg-10)] px-[var(--bh-space-4xl-20)] py-[var(--bh-space-3xl-16)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+function ModalHeaderIcon({
+  children,
+  className,
+  intent = "default",
+  ...props
+}: ModalHeaderIconProps) {
+  return (
+    <span
+      aria-hidden="true"
+      data-intent={intent}
+      data-slot="modal-header-icon"
+      className={cn(
+        "inline-flex size-[var(--bh-space-5xl-24)] shrink-0 items-center justify-center",
+        modalHeaderIconIntentClassNames[intent],
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <InfoIcon className="size-[var(--bh-space-3xl-16)]" strokeWidth={2} />
+      )}
+    </span>
+  )
+}
+
+const ModalCloseButton = React.forwardRef<HTMLButtonElement, ModalCloseButtonProps>(
+  function ModalCloseButton(
+    { children, className, label = "Close modal", type = "button", ...props },
+    ref
+  ) {
+    return (
+      <ModalClose asChild>
+        <button
+          aria-label={label}
+          data-slot="modal-close"
+          ref={ref}
+          type={type}
+          className={cn(
+            "absolute end-[var(--bh-space-3xl-16)] top-1/2 inline-flex size-[var(--bh-space-6xl-32)] -translate-y-1/2 items-center justify-center rounded-[var(--bh-radius-full)] border-0 bg-transparent p-0 text-[var(--bh-content-subtle)] outline-none transition-[background-color,box-shadow,color] hover:bg-[var(--bh-interactive-ghost-hover)] hover:text-[var(--bh-content-default)] focus-visible:shadow-[var(--shadow-button-focus)]",
+            className
+          )}
+          {...props}
+        >
+          {children ?? (
+            <XIcon
+              aria-hidden="true"
+              className="size-[var(--bh-space-5xl-24)]"
+              strokeWidth={2}
+            />
+          )}
+        </button>
+      </ModalClose>
+    )
+  }
+)
+
+function ModalFooterCheckbox({
+  checked,
+  className,
+  defaultChecked,
+  disabled,
+  label = defaultModalCheckboxLabel,
+  onCheckedChange,
+  ...props
+}: ModalFooterCheckboxProps) {
+  const generatedId = React.useId()
+  const labelId = `${generatedId}-label`
+
+  return (
+    <div
+      data-slot="modal-checkbox"
+      className={cn(
+        "flex min-w-0 flex-1 items-center gap-[var(--bh-space-md-8)] text-start",
+        className
+      )}
+      {...props}
+    >
+      <Checkbox
+        aria-labelledby={labelId}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        disabled={disabled}
+        onCheckedChange={onCheckedChange}
+      />
+      <span
+        data-slot="modal-checkbox-label"
+        dir="auto"
+        id={labelId}
+        className="min-w-0 flex-1 text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-default)]"
+      >
+        {label}
+      </span>
+    </div>
+  )
+}
+
+function ModalActions({ className, ...props }: ModalActionsProps) {
+  return (
+    <div
+      data-slot="modal-actions"
+      className={cn(
+        "flex shrink-0 items-center justify-end gap-[var(--bh-space-xs-4)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const ModalActionButton = React.forwardRef<HTMLButtonElement, ModalActionButtonProps>(
+  function ModalActionButton(
+    { children = "Action", size = "sm", type = "button", variant = "default", ...props },
+    ref
+  ) {
+    return (
+      <Button
+        data-slot="modal-action"
+        ref={ref}
+        size={size}
+        type={type}
+        variant={variant}
+        {...props}
+      >
+        {children}
+      </Button>
+    )
+  }
+)
+
+function Modal({
+  checkboxLabel,
+  children,
+  className,
+  defaultOpen = true,
+  description,
+  dir,
+  footer,
+  modal = true,
+  onOpenChange,
+  open,
+  overlayClassName,
+  primaryActionLabel,
+  secondaryActionLabel,
+  showCheckbox = true,
+  showCloseButton = true,
+  showDivider = true,
+  showFooter = true,
+  showIcon = true,
+  size = "sm",
+  title,
+  ...props
+}: ModalProps) {
+  const isRtl = dir === "rtl"
+  const rootProps =
+    open === undefined
+      ? { defaultOpen, modal, onOpenChange }
+      : { modal, onOpenChange, open }
+  const resolvedTitle = title ?? (isRtl ? defaultRtlModalTitle : defaultModalTitle)
+  const resolvedDescription =
+    description ?? (isRtl ? defaultRtlModalDescription : defaultModalDescription)
+  const resolvedCheckboxLabel =
+    checkboxLabel ?? (isRtl ? defaultRtlModalCheckboxLabel : defaultModalCheckboxLabel)
+  const resolvedPrimaryAction =
+    primaryActionLabel ?? (isRtl ? defaultRtlActionLabel : "Action")
+  const resolvedSecondaryAction =
+    secondaryActionLabel ?? (isRtl ? defaultRtlActionLabel : "Action")
+
+  return (
+    <ModalRoot {...rootProps}>
+      <ModalContent
+        data-slot="modal"
+        dir={dir}
+        overlayClassName={overlayClassName}
+        size={size}
+        className={className}
+        {...props}
+      >
+        <ModalHeader>
+          {showIcon ? <ModalHeaderIcon /> : null}
+          <ModalTitle>{resolvedTitle}</ModalTitle>
+          {showCloseButton ? <ModalCloseButton /> : null}
+        </ModalHeader>
+        <ModalBody>
+          {children ?? <ModalDescription>{resolvedDescription}</ModalDescription>}
+        </ModalBody>
+        {showDivider ? <ModalDivider /> : null}
+        {showFooter ? (
+          footer ?? (
+            <ModalFooter>
+              {showCheckbox ? (
+                <ModalFooterCheckbox label={resolvedCheckboxLabel} />
+              ) : null}
+              <ModalActions>
+                <ModalActionButton variant="soft">
+                  {resolvedSecondaryAction}
+                </ModalActionButton>
+                <ModalActionButton>{resolvedPrimaryAction}</ModalActionButton>
+              </ModalActions>
+            </ModalFooter>
+          )
+        ) : null}
+      </ModalContent>
+    </ModalRoot>
+  )
+}
+
+function ConfirmModal({
+  cancelButtonProps,
+  cancelLabel,
+  children,
+  className,
+  closeOnCancel = true,
+  closeOnConfirm = true,
+  confirmButtonProps,
+  confirmDisabled = false,
+  confirmLabel,
+  confirmLoading = false,
+  confirmLoadingLabel,
+  confirmVariant,
+  defaultOpen = true,
+  description,
+  dir,
+  intent = "danger",
+  modal = true,
+  onCancel,
+  onConfirm,
+  onEscapeKeyDown,
+  onInteractOutside,
+  onOpenAutoFocus,
+  onOpenChange,
+  onPointerDownOutside,
+  open,
+  overlayClassName,
+  preventEscapeDismiss = false,
+  preventOutsideDismiss = true,
+  showCancelButton = true,
+  showCloseButton = false,
+  showDivider = true,
+  showFooter = true,
+  showIcon = true,
+  size = "sm",
+  title,
+  ...props
+}: ConfirmModalProps) {
+  const cancelButtonRef = React.useRef<HTMLButtonElement>(null)
+  const confirmButtonRef = React.useRef<HTMLButtonElement>(null)
+  const isRtl = dir === "rtl"
+  const rootProps =
+    open === undefined
+      ? { defaultOpen, modal, onOpenChange }
+      : { modal, onOpenChange, open }
+  const resolvedTitle = title ?? (isRtl ? defaultRtlConfirmTitle : defaultConfirmTitle)
+  const resolvedDescription =
+    description ?? (isRtl ? defaultRtlConfirmDescription : defaultConfirmDescription)
+  const resolvedCancelLabel =
+    cancelLabel ?? (isRtl ? defaultRtlConfirmCancelLabel : defaultConfirmCancelLabel)
+  const resolvedConfirmLabel =
+    confirmLabel ?? (isRtl ? defaultRtlConfirmActionLabel : defaultConfirmActionLabel)
+  const resolvedConfirmLoadingLabel =
+    confirmLoadingLabel ??
+    (isRtl ? defaultRtlConfirmLoadingLabel : defaultConfirmLoadingLabel)
+  const {
+    children: cancelButtonChildren,
+    onClick: cancelButtonOnClick,
+    variant: cancelButtonVariant = "soft",
+    ...cancelActionProps
+  } = cancelButtonProps ?? {}
+  const {
+    children: confirmButtonChildren,
+    disabled: confirmButtonDisabled,
+    onClick: confirmButtonOnClick,
+    variant: confirmButtonVariant = confirmVariant ?? getConfirmActionVariant(intent),
+    ...confirmActionProps
+  } = confirmButtonProps ?? {}
+  const isConfirmDisabled = confirmDisabled || confirmLoading || confirmButtonDisabled
+
+  const handleOpenAutoFocus: NonNullable<ModalContentProps["onOpenAutoFocus"]> =
+    React.useCallback(
+      (event) => {
+        onOpenAutoFocus?.(event)
+        if (event.defaultPrevented) return
+
+        const focusTarget = showCancelButton
+          ? cancelButtonRef.current
+          : confirmButtonRef.current
+        if (!focusTarget) return
+
+        event.preventDefault()
+        focusTarget.focus()
+      },
+      [onOpenAutoFocus, showCancelButton]
+    )
+
+  const handlePointerDownOutside: NonNullable<
+    ModalContentProps["onPointerDownOutside"]
+  > = React.useCallback(
+    (event) => {
+      onPointerDownOutside?.(event)
+      if (!event.defaultPrevented && preventOutsideDismiss) {
+        event.preventDefault()
+      }
+    },
+    [onPointerDownOutside, preventOutsideDismiss]
+  )
+
+  const handleInteractOutside: NonNullable<ModalContentProps["onInteractOutside"]> =
+    React.useCallback(
+      (event) => {
+        onInteractOutside?.(event)
+        if (!event.defaultPrevented && preventOutsideDismiss) {
+          event.preventDefault()
+        }
+      },
+      [onInteractOutside, preventOutsideDismiss]
+    )
+
+  const handleEscapeKeyDown: NonNullable<ModalContentProps["onEscapeKeyDown"]> =
+    React.useCallback(
+      (event) => {
+        onEscapeKeyDown?.(event)
+        if (!event.defaultPrevented && preventEscapeDismiss) {
+          event.preventDefault()
+        }
+      },
+      [onEscapeKeyDown, preventEscapeDismiss]
+    )
+
+  const handleCancel: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+    cancelButtonOnClick?.(event)
+    if (!event.defaultPrevented) {
+      onCancel?.(event)
+    }
+  }
+
+  const handleConfirm: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+    confirmButtonOnClick?.(event)
+    if (!event.defaultPrevented) {
+      onConfirm?.(event)
+    }
+  }
+
+  const cancelAction = showCancelButton ? (
+    <ModalActionButton
+      ref={cancelButtonRef}
+      variant={cancelButtonVariant}
+      onClick={handleCancel}
+      {...cancelActionProps}
+    >
+      {cancelButtonChildren ?? resolvedCancelLabel}
+    </ModalActionButton>
+  ) : null
+  const confirmAction = (
+    <ModalActionButton
+      aria-busy={confirmLoading || undefined}
+      disabled={isConfirmDisabled}
+      ref={confirmButtonRef}
+      variant={confirmButtonVariant}
+      onClick={handleConfirm}
+      {...confirmActionProps}
+    >
+      {confirmButtonChildren ??
+        (confirmLoading ? (
+          <>
+            <Spinner className="size-[var(--bh-space-3xl-16)]" />
+            <span data-slot="button-label" dir="auto" className="min-w-0 px-[var(--bh-modal-action-label-padding-x)]">
+              {resolvedConfirmLoadingLabel}
+            </span>
+          </>
+        ) : (
+          resolvedConfirmLabel
+        ))}
+    </ModalActionButton>
+  )
+
+  return (
+    <ModalRoot {...rootProps}>
+      <ModalContent
+        data-intent={intent}
+        data-slot="confirm-modal"
+        dir={dir}
+        overlayClassName={overlayClassName}
+        role="alertdialog"
+        size={size}
+        className={className}
+        onEscapeKeyDown={handleEscapeKeyDown}
+        onInteractOutside={handleInteractOutside}
+        onOpenAutoFocus={handleOpenAutoFocus}
+        onPointerDownOutside={handlePointerDownOutside}
+        {...props}
+      >
+        <ModalHeader>
+          {showIcon ? (
+            <ModalHeaderIcon intent={intent}>
+              {intent === "default" ? (
+                <InfoIcon className="size-[var(--bh-space-3xl-16)]" strokeWidth={2} />
+              ) : (
+                <TriangleAlertIcon
+                  className="size-[var(--bh-space-3xl-16)]"
+                  strokeWidth={2}
+                />
+              )}
+            </ModalHeaderIcon>
+          ) : null}
+          <ModalTitle>{resolvedTitle}</ModalTitle>
+          {showCloseButton ? <ModalCloseButton /> : null}
+        </ModalHeader>
+        <ModalBody>
+          {children ?? <ModalDescription>{resolvedDescription}</ModalDescription>}
+        </ModalBody>
+        {showDivider ? <ModalDivider /> : null}
+        {showFooter ? (
+          <ModalFooter>
+            <ModalActions>
+              {cancelAction && closeOnCancel ? (
+                <ModalClose asChild>{cancelAction}</ModalClose>
+              ) : (
+                cancelAction
+              )}
+              {closeOnConfirm ? (
+                <ModalClose asChild>{confirmAction}</ModalClose>
+              ) : (
+                confirmAction
+              )}
+            </ModalActions>
+          </ModalFooter>
+        ) : null}
+      </ModalContent>
+    </ModalRoot>
+  )
+}
+
+function getConfirmActionVariant(
+  intent: ModalIntent
+): ModalActionButtonProps["variant"] {
+  if (intent === "danger") return "danger"
+  if (intent === "warning") return "warning"
+  return "default"
+}
+
+export {
+  ConfirmModal,
+  Modal,
+  ModalActionButton,
+  ModalActions,
+  ModalBody,
+  ModalClose,
+  ModalCloseButton,
+  ModalContent,
+  ModalDescription,
+  ModalDivider,
+  ModalFooter,
+  ModalFooterCheckbox,
+  ModalHeader,
+  ModalHeaderIcon,
+  ModalOverlay,
+  ModalPortal,
+  ModalRoot,
+  ModalSurface,
+  ModalTitle,
+  ModalTrigger,
+  modalContentVariants,
+  modalSurfaceVariants,
+}
+export type {
+  ConfirmModalProps,
+  ModalActionButtonProps,
+  ModalActionsProps,
+  ModalBodyProps,
+  ModalCloseButtonProps,
+  ModalContentProps,
+  ModalFooterCheckboxProps,
+  ModalFooterProps,
+  ModalHeaderIconProps,
+  ModalHeaderProps,
+  ModalIntent,
+  ModalOverlayProps,
+  ModalProps,
+  ModalRootProps,
+  ModalSize,
+  ModalSurfaceProps,
+}