banhaten 0.1.3 → 0.2.0

package/registry/components/modal.tsx

@@ -18,10 +18,25 @@ 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)]",
@@ -109,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
@@ -120,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"
@@ -142,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
@@ -198,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}
       >
@@ -278,34 +317,46 @@ const ModalDescription = React.forwardRef<
   )
 })
 
-const ConfirmModalCloseButton = React.forwardRef<
+// 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 ConfirmModalCloseButton(
+>(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>
-      <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} />
     </AlertDialogCancel>
   )
 })
@@ -377,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>
     )
   }
@@ -419,7 +449,7 @@ function ModalFooterCheckbox({
   className,
   defaultChecked,
   disabled,
-  label = defaultModalCheckboxLabel,
+  label = defaultModalMessages.checkboxLabel,
   onCheckedChange,
   ...props
 }: ModalFooterCheckboxProps) {
@@ -491,10 +521,12 @@ function Modal({
   checkboxLabel,
   children,
   className,
-  defaultOpen = true,
+  closeLabel,
+  defaultOpen = false,
   description,
   dir,
   footer,
+  messages: messageOverrides,
   modal = true,
   onOpenChange,
   open,
@@ -510,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}>
@@ -538,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>}
@@ -569,6 +601,7 @@ function ConfirmModal({
   cancelLabel,
   children,
   className,
+  closeLabel,
   closeOnCancel = true,
   closeOnConfirm = true,
   confirmButtonProps,
@@ -577,22 +610,20 @@ function ConfirmModal({
   confirmLoading = false,
   confirmLoadingLabel,
   confirmVariant,
-  defaultOpen = true,
+  defaultOpen = false,
   description,
   dir,
   intent = "danger",
-  modal: _modal = true,
+  messages: messageOverrides,
+  modal = true,
   onCancel,
   onConfirm,
   onEscapeKeyDown,
   onOpenAutoFocus,
   onOpenChange,
-  onInteractOutside: _onInteractOutside,
-  onPointerDownOutside: _onPointerDownOutside,
   open,
   overlayClassName,
   preventEscapeDismiss = false,
-  preventOutsideDismiss: _preventOutsideDismiss = true,
   showCancelButton = true,
   showCloseButton = false,
   showDivider = true,
@@ -604,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, onOpenChange }
-      : { onOpenChange, open }
-  const resolvedTitle = title ?? (isRtl ? defaultRtlConfirmTitle : defaultConfirmTitle)
-  const resolvedDescription =
-    description ?? (isRtl ? defaultRtlConfirmDescription : defaultConfirmDescription)
+      ? { defaultOpen, modal, onOpenChange }
+      : { modal, onOpenChange, open }
+  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,
@@ -663,7 +697,6 @@ function ConfirmModal({
     },
     [onEscapeKeyDown, preventEscapeDismiss]
   )
-
   const handleCancel: React.MouseEventHandler<HTMLButtonElement> = (event) => {
     cancelButtonOnClick?.(event)
     if (!event.defaultPrevented) {
@@ -717,7 +750,8 @@ function ConfirmModal({
         data-intent={intent}
         data-size={size}
         data-slot="confirm-modal"
-        dir={dir}
+        dir={resolvedDirection}
+        ref={directionBoundaryRef}
         className={cn(modalContentVariants({ size, className }))}
         overlayClassName={overlayClassName}
         onEscapeKeyDown={handleEscapeKeyDown}
@@ -730,12 +764,12 @@ function ConfirmModal({
               {intent === "default" ? (
                 <InfoIcon
                   className="size-[var(--bh-space-3xl-16)]"
-                  strokeWidth={2}
+                  strokeWidth="var(--bh-icon-stroke-200)"
                 />
               ) : (
                 <TriangleAlertIcon
                   className="size-[var(--bh-space-3xl-16)]"
-                  strokeWidth={2}
+                  strokeWidth="var(--bh-icon-stroke-200)"
                 />
               )}
             </ModalHeaderIcon>
@@ -746,7 +780,9 @@ function ConfirmModal({
           >
             {resolvedTitle}
           </AlertDialogTitle>
-          {showCloseButton ? <ConfirmModalCloseButton /> : null}
+          {showCloseButton ? (
+            <ConfirmModalCloseButton label={resolvedCloseLabel} />
+          ) : null}
         </ModalHeader>
         <ModalBody>
           {children ?? (
@@ -789,6 +825,8 @@ function getConfirmActionVariant(
 }
 
 export {
+  arabicConfirmModalMessages,
+  arabicModalMessages,
   ConfirmModal,
   Modal,
   ModalActionButton,
@@ -813,6 +851,7 @@ export {
   modalSurfaceVariants,
 }
 export type {
+  ConfirmModalMessages,
   ConfirmModalProps,
   ModalActionButtonProps,
   ModalActionsProps,
@@ -824,6 +863,7 @@ export type {
   ModalHeaderIconProps,
   ModalHeaderProps,
   ModalIntent,
+  ModalMessages,
   ModalOverlayProps,
   ModalProps,
   ModalRootProps,

package/registry/components/native-select.tsx

@@ -163,7 +163,7 @@ const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
           <ChevronDownIcon
             aria-hidden="true"
             className="pointer-events-none absolute end-[var(--bh-select-trigger-padding-x)] top-1/2 size-[var(--bh-space-3xl-16)] -translate-y-1/2 text-[var(--bh-select-trigger-icon-color)]"
-            strokeWidth={2}
+            strokeWidth="var(--bh-icon-stroke-200)"
           />
         </div>
         {shouldRenderHelper ? (
@@ -181,7 +181,7 @@ const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
             <InfoIcon
               aria-hidden="true"
               className="size-[var(--bh-space-3xl-16)] shrink-0"
-              strokeWidth={2}
+              strokeWidth="var(--bh-icon-stroke-200)"
             />
             {helper}
           </p>