banhaten 0.3.0 → 0.5.0

package/registry/components/modal.tsx

@@ -1,872 +1,872 @@
-"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 {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogTitle,
-  type AlertDialogContentProps,
-} from "@/components/ui/alert-dialog"
-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"
-import { useResolvedDirection } from "@/hooks/use-direction"
-
-type ModalSize = "sm" | "default" | "lg"
-type ModalIntent = "default" | "warning" | "danger"
-
-type ModalMessages = {
-  checkboxLabel: React.ReactNode
-  closeLabel: string
-  primaryActionLabel: React.ReactNode
-  secondaryActionLabel: React.ReactNode
-}
-
-type ConfirmModalMessages = {
-  cancelLabel: React.ReactNode
-  closeLabel: string
-  confirmLabel: React.ReactNode
-  confirmLoadingLabel: React.ReactNode
-}
-
-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-lg)]",
-]
-
-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)]",
-}
-
-const modalTitleClassName =
-  "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)]"
-
-const modalDescriptionClassName =
-  "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)]"
-
-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 ConfirmModalContentProps = AlertDialogContentProps
-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
-    closeLabel?: string
-    description?: React.ReactNode
-    dir?: "ltr" | "rtl"
-    footer?: React.ReactNode
-    messages?: Partial<ModalMessages>
-    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"
-  | "messages"
-  | "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
-  messages?: Partial<ConfirmModalMessages>
-  onCancel?: React.MouseEventHandler<HTMLButtonElement>
-  onConfirm?: React.MouseEventHandler<HTMLButtonElement>
-  onEscapeKeyDown?: ModalContentProps["onEscapeKeyDown"]
-  onOpenAutoFocus?: ModalContentProps["onOpenAutoFocus"]
-  preventEscapeDismiss?: boolean
-  showCancelButton?: boolean
-}
-
-const defaultModalMessages: ModalMessages = {
-  checkboxLabel: "Don't show me again",
-  closeLabel: "Close modal",
-  primaryActionLabel: "Action",
-  secondaryActionLabel: "Action",
-}
-
-const arabicModalMessages: ModalMessages = {
-  checkboxLabel: "\u0627\u0644\u062a\u0633\u0645\u064a\u0629",
-  closeLabel: "\u0625\u063a\u0644\u0627\u0642 \u0627\u0644\u0646\u0645\u0648\u0630\u062c",
-  primaryActionLabel: "\u0627\u0646\u0642\u0631 \u0647\u0646\u0627",
-  secondaryActionLabel: "\u0627\u0646\u0642\u0631 \u0647\u0646\u0627",
-}
-
-const defaultConfirmModalMessages: ConfirmModalMessages = {
-  cancelLabel: "Cancel",
-  closeLabel: "Close modal",
-  confirmLabel: "Confirm",
-  confirmLoadingLabel: "Confirming",
-}
-
-const arabicConfirmModalMessages: ConfirmModalMessages = {
-  cancelLabel: "\u0625\u0644\u063a\u0627\u0621",
-  closeLabel: "\u0625\u063a\u0644\u0627\u0642 \u0627\u0644\u0646\u0645\u0648\u0630\u062c",
-  confirmLabel: "\u062a\u0623\u0643\u064a\u062f",
-  confirmLoadingLabel: "\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, dir, overlayClassName, size, ...props },
-  ref
-) {
-  const contentRef = React.useRef<
-    React.ElementRef<typeof DialogPrimitive.Content> | null
-  >(null)
-  const resolvedDirection = useResolvedDirection(
-    dir === "ltr" || dir === "rtl" ? dir : undefined,
-    contentRef
-  )
-  const setContentRef = React.useCallback(
-    (node: React.ElementRef<typeof DialogPrimitive.Content> | null) => {
-      contentRef.current = node
-      if (typeof ref === "function") ref(node)
-      else if (ref) ref.current = node
-    },
-    [ref]
-  )
-
-  return (
-    <ModalPortal>
-      <ModalOverlay className={overlayClassName} />
-      <DialogPrimitive.Content
-        data-size={size ?? "sm"}
-        data-slot="modal-content"
-        dir={resolvedDirection}
-        ref={setContentRef}
-        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(modalTitleClassName, 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(modalDescriptionClassName, className)}
-      {...props}
-    />
-  )
-})
-
-// One close affordance, two dismissal wrappers. Dialog uses ModalClose and
-// AlertDialog uses AlertDialogCancel, but the button itself is identical — so
-// an a11y or focus-ring fix here reaches both instead of one.
-const ModalCloseButtonSurface = React.forwardRef<
-  HTMLButtonElement,
-  ModalCloseButtonProps
->(function ModalCloseButtonSurface(
-  { children, className, label = "Close modal", type = "button", ...props },
-  ref
-) {
-  return (
-    <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="var(--bh-icon-stroke-200)"
-        />
-      )}
-    </button>
-  )
-})
-
-const ConfirmModalCloseButton = React.forwardRef<
-  HTMLButtonElement,
-  ModalCloseButtonProps
->(function ConfirmModalCloseButton(props, ref) {
-  return (
-    <AlertDialogCancel asChild>
-      <ModalCloseButtonSurface ref={ref} {...props} />
-    </AlertDialogCancel>
-  )
-})
-
-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="var(--bh-icon-stroke-200)" />
-      )}
-    </span>
-  )
-}
-
-const ModalCloseButton = React.forwardRef<HTMLButtonElement, ModalCloseButtonProps>(
-  function ModalCloseButton(props, ref) {
-    return (
-      <ModalClose asChild>
-        <ModalCloseButtonSurface ref={ref} {...props} />
-      </ModalClose>
-    )
-  }
-)
-
-function ModalFooterCheckbox({
-  checked,
-  className,
-  defaultChecked,
-  disabled,
-  label = defaultModalMessages.checkboxLabel,
-  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,
-  closeLabel,
-  defaultOpen = false,
-  description,
-  dir,
-  footer,
-  messages: messageOverrides,
-  modal = true,
-  onOpenChange,
-  open,
-  overlayClassName,
-  primaryActionLabel,
-  secondaryActionLabel,
-  showCheckbox = true,
-  showCloseButton = true,
-  showDivider = true,
-  showFooter = true,
-  showIcon = true,
-  size = "sm",
-  title,
-  ...props
-}: ModalProps) {
-  const rootProps =
-    open === undefined
-      ? { defaultOpen, modal, onOpenChange }
-      : { modal, onOpenChange, open }
-  const messages = { ...defaultModalMessages, ...messageOverrides }
-  const resolvedTitle = title
-  const resolvedDescription = description
-  const resolvedCheckboxLabel =
-    checkboxLabel ?? messages.checkboxLabel
-  const resolvedPrimaryAction =
-    primaryActionLabel ?? messages.primaryActionLabel
-  const resolvedSecondaryAction =
-    secondaryActionLabel ?? messages.secondaryActionLabel
-  const resolvedCloseLabel = closeLabel ?? messages.closeLabel
-
-  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 label={resolvedCloseLabel} /> : 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,
-  closeLabel,
-  closeOnCancel = true,
-  closeOnConfirm = true,
-  confirmButtonProps,
-  confirmDisabled = false,
-  confirmLabel,
-  confirmLoading = false,
-  confirmLoadingLabel,
-  confirmVariant,
-  defaultOpen = false,
-  description,
-  dir,
-  intent = "danger",
-  messages: messageOverrides,
-  modal = true,
-  onCancel,
-  onConfirm,
-  onEscapeKeyDown,
-  onOpenAutoFocus,
-  onOpenChange,
-  open,
-  overlayClassName,
-  preventEscapeDismiss = false,
-  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 directionBoundaryRef = React.useRef<
-    React.ElementRef<typeof AlertDialogContent> | null
-  >(null)
-  const resolvedDirection = useResolvedDirection(dir, directionBoundaryRef)
-  const rootProps =
-    open === undefined
-      ? { defaultOpen, modal, onOpenChange }
-      : { modal, onOpenChange, open }
-  const messages = { ...defaultConfirmModalMessages, ...messageOverrides }
-  const resolvedTitle = title
-  const resolvedDescription = description
-  const resolvedCancelLabel =
-    cancelLabel ?? messages.cancelLabel
-  const resolvedConfirmLabel =
-    confirmLabel ?? messages.confirmLabel
-  const resolvedConfirmLoadingLabel =
-    confirmLoadingLabel ?? messages.confirmLoadingLabel
-  const resolvedCloseLabel = closeLabel ?? messages.closeLabel
-  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<
-    ConfirmModalContentProps["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 handleEscapeKeyDown: NonNullable<
-    ConfirmModalContentProps["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 (
-    <AlertDialog {...rootProps}>
-      <AlertDialogContent
-        data-intent={intent}
-        data-size={size}
-        data-slot="confirm-modal"
-        dir={resolvedDirection}
-        ref={directionBoundaryRef}
-        className={cn(modalContentVariants({ size, className }))}
-        overlayClassName={overlayClassName}
-        onEscapeKeyDown={handleEscapeKeyDown}
-        onOpenAutoFocus={handleOpenAutoFocus}
-        {...props}
-      >
-        <ModalHeader>
-          {showIcon ? (
-            <ModalHeaderIcon intent={intent}>
-              {intent === "default" ? (
-                <InfoIcon
-                  className="size-[var(--bh-space-3xl-16)]"
-                  strokeWidth="var(--bh-icon-stroke-200)"
-                />
-              ) : (
-                <TriangleAlertIcon
-                  className="size-[var(--bh-space-3xl-16)]"
-                  strokeWidth="var(--bh-icon-stroke-200)"
-                />
-              )}
-            </ModalHeaderIcon>
-          ) : null}
-          <AlertDialogTitle
-            data-slot="modal-title"
-            className={modalTitleClassName}
-          >
-            {resolvedTitle}
-          </AlertDialogTitle>
-          {showCloseButton ? (
-            <ConfirmModalCloseButton label={resolvedCloseLabel} />
-          ) : null}
-        </ModalHeader>
-        <ModalBody>
-          {children ?? (
-            <AlertDialogDescription
-              data-slot="modal-description"
-              className={modalDescriptionClassName}
-            >
-              {resolvedDescription}
-            </AlertDialogDescription>
-          )}
-        </ModalBody>
-        {showDivider ? <ModalDivider /> : null}
-        {showFooter ? (
-          <ModalFooter>
-            <ModalActions>
-              {cancelAction && closeOnCancel ? (
-                <AlertDialogCancel asChild>{cancelAction}</AlertDialogCancel>
-              ) : (
-                cancelAction
-              )}
-              {closeOnConfirm ? (
-                <AlertDialogAction asChild>{confirmAction}</AlertDialogAction>
-              ) : (
-                confirmAction
-              )}
-            </ModalActions>
-          </ModalFooter>
-        ) : null}
-      </AlertDialogContent>
-    </AlertDialog>
-  )
-}
-
-function getConfirmActionVariant(
-  intent: ModalIntent
-): ModalActionButtonProps["variant"] {
-  if (intent === "danger") return "danger"
-  if (intent === "warning") return "warning"
-  return "default"
-}
-
-export {
-  arabicConfirmModalMessages,
-  arabicModalMessages,
-  ConfirmModal,
-  Modal,
-  ModalActionButton,
-  ModalActions,
-  ModalBody,
-  ModalClose,
-  ModalCloseButton,
-  ModalContent,
-  ModalDescription,
-  ModalDivider,
-  ModalFooter,
-  ModalFooterCheckbox,
-  ModalHeader,
-  ModalHeaderIcon,
-  ModalOverlay,
-  ModalPortal,
-  ModalRoot,
-  ModalSurface,
-  ModalTitle,
-  ModalTrigger,
-  modalContentVariants,
-  modalSurfaceVariants,
-}
-export type {
-  ConfirmModalMessages,
-  ConfirmModalProps,
-  ModalActionButtonProps,
-  ModalActionsProps,
-  ModalBodyProps,
-  ModalCloseButtonProps,
-  ModalContentProps,
-  ModalFooterCheckboxProps,
-  ModalFooterProps,
-  ModalHeaderIconProps,
-  ModalHeaderProps,
-  ModalIntent,
-  ModalMessages,
-  ModalOverlayProps,
-  ModalProps,
-  ModalRootProps,
-  ModalSize,
-  ModalSurfaceProps,
-}
+"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 {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+  type AlertDialogContentProps,
+} from "@/components/ui/alert-dialog"
+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"
+import { useResolvedDirection } from "@/hooks/use-direction"
+
+type ModalSize = "sm" | "default" | "lg"
+type ModalIntent = "default" | "warning" | "danger"
+
+type ModalMessages = {
+  checkboxLabel: React.ReactNode
+  closeLabel: string
+  primaryActionLabel: React.ReactNode
+  secondaryActionLabel: React.ReactNode
+}
+
+type ConfirmModalMessages = {
+  cancelLabel: React.ReactNode
+  closeLabel: string
+  confirmLabel: React.ReactNode
+  confirmLoadingLabel: React.ReactNode
+}
+
+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(--elevation-modal)] outline-none",
+  "[--bh-modal-border:var(--bh-border-subtle)] [--elevation-modal:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-modal-border),var(--elevation-06)]",
+]
+
+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)]",
+}
+
+const modalTitleClassName =
+  "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)]"
+
+const modalDescriptionClassName =
+  "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)]"
+
+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 ConfirmModalContentProps = AlertDialogContentProps
+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
+    closeLabel?: string
+    description?: React.ReactNode
+    dir?: "ltr" | "rtl"
+    footer?: React.ReactNode
+    messages?: Partial<ModalMessages>
+    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"
+  | "messages"
+  | "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
+  messages?: Partial<ConfirmModalMessages>
+  onCancel?: React.MouseEventHandler<HTMLButtonElement>
+  onConfirm?: React.MouseEventHandler<HTMLButtonElement>
+  onEscapeKeyDown?: ModalContentProps["onEscapeKeyDown"]
+  onOpenAutoFocus?: ModalContentProps["onOpenAutoFocus"]
+  preventEscapeDismiss?: boolean
+  showCancelButton?: boolean
+}
+
+const defaultModalMessages: ModalMessages = {
+  checkboxLabel: "Don't show me again",
+  closeLabel: "Close modal",
+  primaryActionLabel: "Action",
+  secondaryActionLabel: "Action",
+}
+
+const arabicModalMessages: ModalMessages = {
+  checkboxLabel: "\u0627\u0644\u062a\u0633\u0645\u064a\u0629",
+  closeLabel: "\u0625\u063a\u0644\u0627\u0642 \u0627\u0644\u0646\u0645\u0648\u0630\u062c",
+  primaryActionLabel: "\u0627\u0646\u0642\u0631 \u0647\u0646\u0627",
+  secondaryActionLabel: "\u0627\u0646\u0642\u0631 \u0647\u0646\u0627",
+}
+
+const defaultConfirmModalMessages: ConfirmModalMessages = {
+  cancelLabel: "Cancel",
+  closeLabel: "Close modal",
+  confirmLabel: "Confirm",
+  confirmLoadingLabel: "Confirming",
+}
+
+const arabicConfirmModalMessages: ConfirmModalMessages = {
+  cancelLabel: "\u0625\u0644\u063a\u0627\u0621",
+  closeLabel: "\u0625\u063a\u0644\u0627\u0642 \u0627\u0644\u0646\u0645\u0648\u0630\u062c",
+  confirmLabel: "\u062a\u0623\u0643\u064a\u062f",
+  confirmLoadingLabel: "\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, dir, overlayClassName, size, ...props },
+  ref
+) {
+  const contentRef = React.useRef<
+    React.ElementRef<typeof DialogPrimitive.Content> | null
+  >(null)
+  const resolvedDirection = useResolvedDirection(
+    dir === "ltr" || dir === "rtl" ? dir : undefined,
+    contentRef
+  )
+  const setContentRef = React.useCallback(
+    (node: React.ElementRef<typeof DialogPrimitive.Content> | null) => {
+      contentRef.current = node
+      if (typeof ref === "function") ref(node)
+      else if (ref) ref.current = node
+    },
+    [ref]
+  )
+
+  return (
+    <ModalPortal>
+      <ModalOverlay className={overlayClassName} />
+      <DialogPrimitive.Content
+        data-size={size ?? "sm"}
+        data-slot="modal-content"
+        dir={resolvedDirection}
+        ref={setContentRef}
+        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(modalTitleClassName, 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(modalDescriptionClassName, className)}
+      {...props}
+    />
+  )
+})
+
+// One close affordance, two dismissal wrappers. Dialog uses ModalClose and
+// AlertDialog uses AlertDialogCancel, but the button itself is identical — so
+// an a11y or focus-ring fix here reaches both instead of one.
+const ModalCloseButtonSurface = React.forwardRef<
+  HTMLButtonElement,
+  ModalCloseButtonProps
+>(function ModalCloseButtonSurface(
+  { children, className, label = "Close modal", type = "button", ...props },
+  ref
+) {
+  return (
+    <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(--elevation-button-focus)]",
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <XIcon
+          aria-hidden="true"
+          className="size-[var(--bh-space-5xl-24)]"
+          strokeWidth="var(--bh-icon-stroke-200)"
+        />
+      )}
+    </button>
+  )
+})
+
+const ConfirmModalCloseButton = React.forwardRef<
+  HTMLButtonElement,
+  ModalCloseButtonProps
+>(function ConfirmModalCloseButton(props, ref) {
+  return (
+    <AlertDialogCancel asChild>
+      <ModalCloseButtonSurface ref={ref} {...props} />
+    </AlertDialogCancel>
+  )
+})
+
+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="var(--bh-icon-stroke-200)" />
+      )}
+    </span>
+  )
+}
+
+const ModalCloseButton = React.forwardRef<HTMLButtonElement, ModalCloseButtonProps>(
+  function ModalCloseButton(props, ref) {
+    return (
+      <ModalClose asChild>
+        <ModalCloseButtonSurface ref={ref} {...props} />
+      </ModalClose>
+    )
+  }
+)
+
+function ModalFooterCheckbox({
+  checked,
+  className,
+  defaultChecked,
+  disabled,
+  label = defaultModalMessages.checkboxLabel,
+  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,
+  closeLabel,
+  defaultOpen = false,
+  description,
+  dir,
+  footer,
+  messages: messageOverrides,
+  modal = true,
+  onOpenChange,
+  open,
+  overlayClassName,
+  primaryActionLabel,
+  secondaryActionLabel,
+  showCheckbox = true,
+  showCloseButton = true,
+  showDivider = true,
+  showFooter = true,
+  showIcon = true,
+  size = "sm",
+  title,
+  ...props
+}: ModalProps) {
+  const rootProps =
+    open === undefined
+      ? { defaultOpen, modal, onOpenChange }
+      : { modal, onOpenChange, open }
+  const messages = { ...defaultModalMessages, ...messageOverrides }
+  const resolvedTitle = title
+  const resolvedDescription = description
+  const resolvedCheckboxLabel =
+    checkboxLabel ?? messages.checkboxLabel
+  const resolvedPrimaryAction =
+    primaryActionLabel ?? messages.primaryActionLabel
+  const resolvedSecondaryAction =
+    secondaryActionLabel ?? messages.secondaryActionLabel
+  const resolvedCloseLabel = closeLabel ?? messages.closeLabel
+
+  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 label={resolvedCloseLabel} /> : 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,
+  closeLabel,
+  closeOnCancel = true,
+  closeOnConfirm = true,
+  confirmButtonProps,
+  confirmDisabled = false,
+  confirmLabel,
+  confirmLoading = false,
+  confirmLoadingLabel,
+  confirmVariant,
+  defaultOpen = false,
+  description,
+  dir,
+  intent = "danger",
+  messages: messageOverrides,
+  modal = true,
+  onCancel,
+  onConfirm,
+  onEscapeKeyDown,
+  onOpenAutoFocus,
+  onOpenChange,
+  open,
+  overlayClassName,
+  preventEscapeDismiss = false,
+  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 directionBoundaryRef = React.useRef<
+    React.ElementRef<typeof AlertDialogContent> | null
+  >(null)
+  const resolvedDirection = useResolvedDirection(dir, directionBoundaryRef)
+  const rootProps =
+    open === undefined
+      ? { defaultOpen, modal, onOpenChange }
+      : { modal, onOpenChange, open }
+  const messages = { ...defaultConfirmModalMessages, ...messageOverrides }
+  const resolvedTitle = title
+  const resolvedDescription = description
+  const resolvedCancelLabel =
+    cancelLabel ?? messages.cancelLabel
+  const resolvedConfirmLabel =
+    confirmLabel ?? messages.confirmLabel
+  const resolvedConfirmLoadingLabel =
+    confirmLoadingLabel ?? messages.confirmLoadingLabel
+  const resolvedCloseLabel = closeLabel ?? messages.closeLabel
+  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<
+    ConfirmModalContentProps["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 handleEscapeKeyDown: NonNullable<
+    ConfirmModalContentProps["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 (
+    <AlertDialog {...rootProps}>
+      <AlertDialogContent
+        data-intent={intent}
+        data-size={size}
+        data-slot="confirm-modal"
+        dir={resolvedDirection}
+        ref={directionBoundaryRef}
+        className={cn(modalContentVariants({ size, className }))}
+        overlayClassName={overlayClassName}
+        onEscapeKeyDown={handleEscapeKeyDown}
+        onOpenAutoFocus={handleOpenAutoFocus}
+        {...props}
+      >
+        <ModalHeader>
+          {showIcon ? (
+            <ModalHeaderIcon intent={intent}>
+              {intent === "default" ? (
+                <InfoIcon
+                  className="size-[var(--bh-space-3xl-16)]"
+                  strokeWidth="var(--bh-icon-stroke-200)"
+                />
+              ) : (
+                <TriangleAlertIcon
+                  className="size-[var(--bh-space-3xl-16)]"
+                  strokeWidth="var(--bh-icon-stroke-200)"
+                />
+              )}
+            </ModalHeaderIcon>
+          ) : null}
+          <AlertDialogTitle
+            data-slot="modal-title"
+            className={modalTitleClassName}
+          >
+            {resolvedTitle}
+          </AlertDialogTitle>
+          {showCloseButton ? (
+            <ConfirmModalCloseButton label={resolvedCloseLabel} />
+          ) : null}
+        </ModalHeader>
+        <ModalBody>
+          {children ?? (
+            <AlertDialogDescription
+              data-slot="modal-description"
+              className={modalDescriptionClassName}
+            >
+              {resolvedDescription}
+            </AlertDialogDescription>
+          )}
+        </ModalBody>
+        {showDivider ? <ModalDivider /> : null}
+        {showFooter ? (
+          <ModalFooter>
+            <ModalActions>
+              {cancelAction && closeOnCancel ? (
+                <AlertDialogCancel asChild>{cancelAction}</AlertDialogCancel>
+              ) : (
+                cancelAction
+              )}
+              {closeOnConfirm ? (
+                <AlertDialogAction asChild>{confirmAction}</AlertDialogAction>
+              ) : (
+                confirmAction
+              )}
+            </ModalActions>
+          </ModalFooter>
+        ) : null}
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+
+function getConfirmActionVariant(
+  intent: ModalIntent
+): ModalActionButtonProps["variant"] {
+  if (intent === "danger") return "danger"
+  if (intent === "warning") return "warning"
+  return "default"
+}
+
+export {
+  arabicConfirmModalMessages,
+  arabicModalMessages,
+  ConfirmModal,
+  Modal,
+  ModalActionButton,
+  ModalActions,
+  ModalBody,
+  ModalClose,
+  ModalCloseButton,
+  ModalContent,
+  ModalDescription,
+  ModalDivider,
+  ModalFooter,
+  ModalFooterCheckbox,
+  ModalHeader,
+  ModalHeaderIcon,
+  ModalOverlay,
+  ModalPortal,
+  ModalRoot,
+  ModalSurface,
+  ModalTitle,
+  ModalTrigger,
+  modalContentVariants,
+  modalSurfaceVariants,
+}
+export type {
+  ConfirmModalMessages,
+  ConfirmModalProps,
+  ModalActionButtonProps,
+  ModalActionsProps,
+  ModalBodyProps,
+  ModalCloseButtonProps,
+  ModalContentProps,
+  ModalFooterCheckboxProps,
+  ModalFooterProps,
+  ModalHeaderIconProps,
+  ModalHeaderProps,
+  ModalIntent,
+  ModalMessages,
+  ModalOverlayProps,
+  ModalProps,
+  ModalRootProps,
+  ModalSize,
+  ModalSurfaceProps,
+}