banhaten 0.1.2 → 0.2.0

package/registry/components/modal.tsx

@@ -5,14 +5,38 @@ 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-component-default)]",
@@ -57,6 +81,12 @@ const modalHeaderIconIntentClassNames: Record<ModalIntent, string> = {
     "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
@@ -79,6 +109,7 @@ type ModalHeaderIconProps = React.ComponentProps<"span"> & {
 type ModalCloseButtonProps = React.ComponentProps<"button"> & {
   label?: string
 }
+type ConfirmModalContentProps = AlertDialogContentProps
 type ModalFooterCheckboxProps = Omit<React.ComponentProps<"div">, "children"> & {
   checked?: CheckboxProps["checked"]
   defaultChecked?: CheckboxProps["defaultChecked"]
@@ -93,9 +124,11 @@ type ModalProps = Omit<ModalRootProps, "children"> &
     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
@@ -104,13 +137,14 @@ type ModalProps = Omit<ModalRootProps, "children"> &
     showDivider?: boolean
     showFooter?: boolean
     showIcon?: boolean
-    title?: React.ReactNode
+    title: React.ReactNode
   }
 
 type ConfirmModalProps = Omit<
   ModalProps,
   | "checkboxLabel"
   | "footer"
+  | "messages"
   | "primaryActionLabel"
   | "secondaryActionLabel"
   | "showCheckbox"
@@ -126,38 +160,42 @@ type ConfirmModalProps = Omit<
   confirmLoadingLabel?: React.ReactNode
   confirmVariant?: ModalActionButtonProps["variant"]
   intent?: ModalIntent
+  messages?: Partial<ConfirmModalMessages>
   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 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
@@ -182,16 +220,33 @@ const ModalContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   ModalContentProps
 >(function ModalContent(
-  { children, className, overlayClassName, size, ...props },
+  { 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"
-        ref={ref}
+        dir={resolvedDirection}
+        ref={setContentRef}
         className={cn(modalContentVariants({ size, className }))}
         {...props}
       >
@@ -238,13 +293,10 @@ const ModalTitle = React.forwardRef<
 >(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
-      )}
+        data-slot="modal-title"
+        dir={dir}
+        ref={ref}
+        className={cn(modalTitleClassName, className)}
       {...props}
     />
   )
@@ -256,15 +308,56 @@ const ModalDescription = React.forwardRef<
 >(function ModalDescription({ className, dir = "auto", ...props }, ref) {
   return (
     <DialogPrimitive.Description
-      data-slot="modal-description"
-      dir={dir}
+        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(
-        "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)]",
+        "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>
   )
 })
 
@@ -335,38 +428,17 @@ function ModalHeaderIcon({
       {...props}
     >
       {children ?? (
-        <InfoIcon className="size-[var(--bh-space-3xl-16)]" strokeWidth={2} />
+        <InfoIcon className="size-[var(--bh-space-3xl-16)]" strokeWidth="var(--bh-icon-stroke-200)" />
       )}
     </span>
   )
 }
 
 const ModalCloseButton = React.forwardRef<HTMLButtonElement, ModalCloseButtonProps>(
-  function ModalCloseButton(
-    { children, className, label = "Close modal", type = "button", ...props },
-    ref
-  ) {
+  function ModalCloseButton(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>
+        <ModalCloseButtonSurface ref={ref} {...props} />
       </ModalClose>
     )
   }
@@ -377,7 +449,7 @@ function ModalFooterCheckbox({
   className,
   defaultChecked,
   disabled,
-  label = defaultModalCheckboxLabel,
+  label = defaultModalMessages.checkboxLabel,
   onCheckedChange,
   ...props
 }: ModalFooterCheckboxProps) {
@@ -449,10 +521,12 @@ function Modal({
   checkboxLabel,
   children,
   className,
-  defaultOpen = true,
+  closeLabel,
+  defaultOpen = false,
   description,
   dir,
   footer,
+  messages: messageOverrides,
   modal = true,
   onOpenChange,
   open,
@@ -468,20 +542,20 @@ function Modal({
   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 messages = { ...defaultModalMessages, ...messageOverrides }
+  const resolvedTitle = title
+  const resolvedDescription = description
   const resolvedCheckboxLabel =
-    checkboxLabel ?? (isRtl ? defaultRtlModalCheckboxLabel : defaultModalCheckboxLabel)
+    checkboxLabel ?? messages.checkboxLabel
   const resolvedPrimaryAction =
-    primaryActionLabel ?? (isRtl ? defaultRtlActionLabel : "Action")
+    primaryActionLabel ?? messages.primaryActionLabel
   const resolvedSecondaryAction =
-    secondaryActionLabel ?? (isRtl ? defaultRtlActionLabel : "Action")
+    secondaryActionLabel ?? messages.secondaryActionLabel
+  const resolvedCloseLabel = closeLabel ?? messages.closeLabel
 
   return (
     <ModalRoot {...rootProps}>
@@ -496,7 +570,7 @@ function Modal({
         <ModalHeader>
           {showIcon ? <ModalHeaderIcon /> : null}
           <ModalTitle>{resolvedTitle}</ModalTitle>
-          {showCloseButton ? <ModalCloseButton /> : null}
+          {showCloseButton ? <ModalCloseButton label={resolvedCloseLabel} /> : null}
         </ModalHeader>
         <ModalBody>
           {children ?? <ModalDescription>{resolvedDescription}</ModalDescription>}
@@ -527,6 +601,7 @@ function ConfirmModal({
   cancelLabel,
   children,
   className,
+  closeLabel,
   closeOnCancel = true,
   closeOnConfirm = true,
   confirmButtonProps,
@@ -535,22 +610,20 @@ function ConfirmModal({
   confirmLoading = false,
   confirmLoadingLabel,
   confirmVariant,
-  defaultOpen = true,
+  defaultOpen = false,
   description,
   dir,
   intent = "danger",
+  messages: messageOverrides,
   modal = true,
   onCancel,
   onConfirm,
   onEscapeKeyDown,
-  onInteractOutside,
   onOpenAutoFocus,
   onOpenChange,
-  onPointerDownOutside,
   open,
   overlayClassName,
   preventEscapeDismiss = false,
-  preventOutsideDismiss = true,
   showCancelButton = true,
   showCloseButton = false,
   showDivider = true,
@@ -562,21 +635,24 @@ function ConfirmModal({
 }: ConfirmModalProps) {
   const cancelButtonRef = React.useRef<HTMLButtonElement>(null)
   const confirmButtonRef = React.useRef<HTMLButtonElement>(null)
-  const isRtl = dir === "rtl"
+  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 resolvedTitle = title ?? (isRtl ? defaultRtlConfirmTitle : defaultConfirmTitle)
-  const resolvedDescription =
-    description ?? (isRtl ? defaultRtlConfirmDescription : defaultConfirmDescription)
+  const messages = { ...defaultConfirmModalMessages, ...messageOverrides }
+  const resolvedTitle = title
+  const resolvedDescription = description
   const resolvedCancelLabel =
-    cancelLabel ?? (isRtl ? defaultRtlConfirmCancelLabel : defaultConfirmCancelLabel)
+    cancelLabel ?? messages.cancelLabel
   const resolvedConfirmLabel =
-    confirmLabel ?? (isRtl ? defaultRtlConfirmActionLabel : defaultConfirmActionLabel)
+    confirmLabel ?? messages.confirmLabel
   const resolvedConfirmLoadingLabel =
-    confirmLoadingLabel ??
-    (isRtl ? defaultRtlConfirmLoadingLabel : defaultConfirmLoadingLabel)
+    confirmLoadingLabel ?? messages.confirmLoadingLabel
+  const resolvedCloseLabel = closeLabel ?? messages.closeLabel
   const {
     children: cancelButtonChildren,
     onClick: cancelButtonOnClick,
@@ -592,57 +668,35 @@ function ConfirmModal({
   } = confirmButtonProps ?? {}
   const isConfirmDisabled = confirmDisabled || confirmLoading || confirmButtonDisabled
 
-  const handleOpenAutoFocus: NonNullable<ModalContentProps["onOpenAutoFocus"]> =
-    React.useCallback(
-      (event) => {
-        onOpenAutoFocus?.(event)
-        if (event.defaultPrevented) return
+  const handleOpenAutoFocus: NonNullable<
+    ConfirmModalContentProps["onOpenAutoFocus"]
+  > = React.useCallback(
+    (event) => {
+      onOpenAutoFocus?.(event)
+      if (event.defaultPrevented) return
 
-        const focusTarget = showCancelButton
-          ? cancelButtonRef.current
-          : confirmButtonRef.current
-        if (!focusTarget) return
+      const focusTarget = showCancelButton
+        ? cancelButtonRef.current
+        : confirmButtonRef.current
+      if (!focusTarget) return
 
-        event.preventDefault()
-        focusTarget.focus()
-      },
-      [onOpenAutoFocus, showCancelButton]
-    )
+      event.preventDefault()
+      focusTarget.focus()
+    },
+    [onOpenAutoFocus, showCancelButton]
+  )
 
-  const handlePointerDownOutside: NonNullable<
-    ModalContentProps["onPointerDownOutside"]
+  const handleEscapeKeyDown: NonNullable<
+    ConfirmModalContentProps["onEscapeKeyDown"]
   > = React.useCallback(
     (event) => {
-      onPointerDownOutside?.(event)
-      if (!event.defaultPrevented && preventOutsideDismiss) {
+      onEscapeKeyDown?.(event)
+      if (!event.defaultPrevented && preventEscapeDismiss) {
         event.preventDefault()
       }
     },
-    [onPointerDownOutside, preventOutsideDismiss]
+    [onEscapeKeyDown, preventEscapeDismiss]
   )
-
-  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) {
@@ -691,59 +745,74 @@ function ConfirmModal({
   )
 
   return (
-    <ModalRoot {...rootProps}>
-      <ModalContent
+    <AlertDialog {...rootProps}>
+      <AlertDialogContent
         data-intent={intent}
+        data-size={size}
         data-slot="confirm-modal"
-        dir={dir}
+        dir={resolvedDirection}
+        ref={directionBoundaryRef}
+        className={cn(modalContentVariants({ size, className }))}
         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} />
+                <InfoIcon
+                  className="size-[var(--bh-space-3xl-16)]"
+                  strokeWidth="var(--bh-icon-stroke-200)"
+                />
               ) : (
                 <TriangleAlertIcon
                   className="size-[var(--bh-space-3xl-16)]"
-                  strokeWidth={2}
+                  strokeWidth="var(--bh-icon-stroke-200)"
                 />
               )}
             </ModalHeaderIcon>
           ) : null}
-          <ModalTitle>{resolvedTitle}</ModalTitle>
-          {showCloseButton ? <ModalCloseButton /> : null}
+          <AlertDialogTitle
+            data-slot="modal-title"
+            className={modalTitleClassName}
+          >
+            {resolvedTitle}
+          </AlertDialogTitle>
+          {showCloseButton ? (
+            <ConfirmModalCloseButton label={resolvedCloseLabel} />
+          ) : null}
         </ModalHeader>
         <ModalBody>
-          {children ?? <ModalDescription>{resolvedDescription}</ModalDescription>}
+          {children ?? (
+            <AlertDialogDescription
+              data-slot="modal-description"
+              className={modalDescriptionClassName}
+            >
+              {resolvedDescription}
+            </AlertDialogDescription>
+          )}
         </ModalBody>
         {showDivider ? <ModalDivider /> : null}
         {showFooter ? (
           <ModalFooter>
             <ModalActions>
               {cancelAction && closeOnCancel ? (
-                <ModalClose asChild>{cancelAction}</ModalClose>
+                <AlertDialogCancel asChild>{cancelAction}</AlertDialogCancel>
               ) : (
                 cancelAction
               )}
               {closeOnConfirm ? (
-                <ModalClose asChild>{confirmAction}</ModalClose>
+                <AlertDialogAction asChild>{confirmAction}</AlertDialogAction>
               ) : (
                 confirmAction
               )}
             </ModalActions>
           </ModalFooter>
         ) : null}
-      </ModalContent>
-    </ModalRoot>
+      </AlertDialogContent>
+    </AlertDialog>
   )
 }
 
@@ -756,6 +825,8 @@ function getConfirmActionVariant(
 }
 
 export {
+  arabicConfirmModalMessages,
+  arabicModalMessages,
   ConfirmModal,
   Modal,
   ModalActionButton,
@@ -780,6 +851,7 @@ export {
   modalSurfaceVariants,
 }
 export type {
+  ConfirmModalMessages,
   ConfirmModalProps,
   ModalActionButtonProps,
   ModalActionsProps,
@@ -791,6 +863,7 @@ export type {
   ModalHeaderIconProps,
   ModalHeaderProps,
   ModalIntent,
+  ModalMessages,
   ModalOverlayProps,
   ModalProps,
   ModalRootProps,