banhaten 0.1.2 → 0.2.0

package/registry/components/native-select.tsx

@@ -0,0 +1,205 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { ChevronDownIcon, InfoIcon } from "lucide-react"
+
+import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils"
+
+type NativeSelectSize = "md" | "lg"
+type NativeSelectState = "default" | "filled" | "error" | "disabled"
+type NativeSelectVariant = "default" | "soft"
+
+type NativeSelectOption = {
+  disabled?: boolean
+  label: React.ReactNode
+  value: string
+}
+
+type NativeSelectProps = Omit<
+  React.ComponentProps<"select">,
+  "children" | "className" | "dir" | "size"
+> &
+  VariantProps<typeof nativeSelectControlVariants> & {
+    children?: React.ReactNode
+    className?: string
+    errorMessage?: React.ReactNode
+    hasHelperText?: boolean
+    helperText?: React.ReactNode
+    isOptional?: boolean
+    isRequired?: boolean
+    label?: React.ReactNode
+    options?: NativeSelectOption[]
+    optionalText?: React.ReactNode
+    rootClassName?: string
+    selectClassName?: string
+    state?: NativeSelectState
+    triggerId?: string
+    dir?: "ltr" | "rtl" | "auto"
+  }
+
+const nativeSelectRootVariants = cva(
+  "grid w-[var(--bh-select-width)] max-w-full gap-[var(--bh-select-field-gap)]"
+)
+
+const nativeSelectControlVariants = cva(
+  [
+    "relative grid w-full rounded-[var(--bh-select-trigger-radius)]",
+    "[--bh-select-trigger-border-current:var(--bh-select-trigger-border)] [--shadow-select-trigger:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-current,var(--bh-select-trigger-border)),var(--shadow-component-default)]",
+    "bg-[var(--bh-select-trigger-bg)] shadow-[var(--shadow-select-trigger)] transition-[background-color,box-shadow]",
+    "focus-within:[--bh-select-trigger-border-current:var(--bh-select-trigger-border-focus)] focus-within:shadow-[var(--shadow-select-focus-ring)]",
+  ],
+  {
+    variants: {
+      size: {
+        lg: "min-h-[var(--bh-input-lg-height)]",
+        md: "min-h-[var(--bh-input-md-height)]",
+      },
+      state: {
+        default: "",
+        filled: "",
+        error:
+          "[--bh-select-trigger-border-current:var(--bh-select-trigger-border-error)] shadow-[var(--shadow-select-trigger)] focus-within:shadow-[var(--shadow-select-danger-focus-ring)]",
+        disabled:
+          "pointer-events-none bg-[var(--bh-select-trigger-bg-disabled)] shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-select-trigger-border-disabled)]",
+      },
+      variant: {
+        default: "",
+        soft: "bg-[var(--bh-select-trigger-bg-soft)] shadow-none",
+      },
+    },
+    defaultVariants: {
+      size: "lg",
+      state: "default",
+      variant: "default",
+    },
+  }
+)
+
+const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
+  function NativeSelect(
+    {
+      children,
+      className,
+      disabled,
+      errorMessage,
+      hasHelperText,
+      helperText,
+      isOptional = false,
+      isRequired = false,
+      label,
+      options,
+      optionalText,
+      rootClassName,
+      selectClassName,
+      size = "lg",
+      state = "default",
+      triggerId,
+      variant = "default",
+      dir,
+      ...props
+    },
+    ref
+  ) {
+    const generatedId = React.useId()
+    const selectId = triggerId ?? generatedId
+    const helperId = `${selectId}-helper`
+    const visualState = disabled ? "disabled" : state
+    const helper = visualState === "error" ? errorMessage : helperText
+    const shouldRenderHelper = hasHelperText ?? Boolean(helper)
+
+    return (
+      <div
+        data-slot="native-select-root"
+        dir={dir}
+        className={cn(nativeSelectRootVariants({ className: rootClassName }))}
+      >
+        {label ? (
+          <Label
+            htmlFor={selectId}
+            optionalText={optionalText}
+            required={isRequired}
+            data-optional={isOptional ? "true" : undefined}
+          >
+            {label}
+          </Label>
+        ) : null}
+        <div
+          data-slot="native-select-control"
+          className={cn(
+            nativeSelectControlVariants({
+              size,
+              state: visualState,
+              variant,
+              className,
+            })
+          )}
+        >
+          <select
+            aria-describedby={shouldRenderHelper ? helperId : undefined}
+            aria-invalid={visualState === "error" || undefined}
+            data-slot="native-select"
+            disabled={disabled}
+            id={selectId}
+            ref={ref}
+            className={cn(
+              "min-h-[inherit] w-full appearance-none border-0 bg-transparent py-[var(--bh-space-sm-6)] ps-[var(--bh-select-trigger-padding-x)] pe-[var(--bh-space-8xl-48)] 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-default)] outline-none disabled:cursor-not-allowed disabled:text-[var(--bh-content-disabled)]",
+              selectClassName
+            )}
+            {...props}
+          >
+            {options?.map((option) => (
+              <option
+                disabled={option.disabled}
+                key={option.value}
+                value={option.value}
+              >
+                {option.label}
+              </option>
+            ))}
+            {children}
+          </select>
+          <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="var(--bh-icon-stroke-200)"
+          />
+        </div>
+        {shouldRenderHelper ? (
+          <p
+            data-slot="native-select-helper"
+            dir="auto"
+            id={helperId}
+            className={cn(
+              "m-0 inline-flex items-center gap-[var(--bh-space-xs-4)] text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)]",
+              visualState === "error"
+                ? "text-[var(--bh-content-danger-default)]"
+                : "text-[var(--bh-content-subtle)]"
+            )}
+          >
+            <InfoIcon
+              aria-hidden="true"
+              className="size-[var(--bh-space-3xl-16)] shrink-0"
+              strokeWidth="var(--bh-icon-stroke-200)"
+            />
+            {helper}
+          </p>
+        ) : null}
+      </div>
+    )
+  }
+)
+
+export {
+  NativeSelect,
+  nativeSelectControlVariants,
+  nativeSelectRootVariants,
+}
+export type {
+  NativeSelectOption,
+  NativeSelectProps,
+  NativeSelectSize,
+  NativeSelectState,
+  NativeSelectVariant,
+}

package/registry/components/navigation-menu.tsx

@@ -0,0 +1,171 @@
+"use client"
+
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+type NavigationMenuProps = React.ComponentProps<
+  typeof NavigationMenuPrimitive.Root
+>
+type NavigationMenuListProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.List
+>
+type NavigationMenuTriggerProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Trigger
+>
+type NavigationMenuContentProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Content
+>
+type NavigationMenuLinkProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Link
+>
+type NavigationMenuViewportProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Viewport
+>
+type NavigationMenuIndicatorProps = React.ComponentPropsWithoutRef<
+  typeof NavigationMenuPrimitive.Indicator
+>
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  NavigationMenuProps
+>(function NavigationMenu({ className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      ref={ref}
+      className={cn("relative z-[var(--bh-z-raised)] flex max-w-max flex-1 items-center justify-center", className)}
+      {...props}
+    />
+  )
+})
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  NavigationMenuListProps
+>(function NavigationMenuList({ className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      ref={ref}
+      className={cn("group flex flex-1 list-none items-center justify-center gap-[var(--bh-space-xs-4)]", className)}
+      {...props}
+    />
+  )
+})
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  NavigationMenuTriggerProps
+>(function NavigationMenuTrigger({ children, className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      ref={ref}
+      className={cn(
+        "group inline-flex h-[var(--bh-space-7xl-40)] items-center justify-center gap-[var(--bh-space-xs-4)] rounded-[var(--bh-radius-lg-8)] bg-transparent px-[var(--bh-space-xl-12)] text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-default)] outline-none transition-colors hover:bg-[var(--bh-interactive-ghost-hover)] focus:bg-[var(--bh-interactive-ghost-hover)] disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)] data-[state=open]:bg-[var(--bh-interactive-soft-default)]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon
+        aria-hidden="true"
+        className="size-[var(--bh-space-3xl-16)] transition-transform group-data-[state=open]:rotate-180"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+})
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  NavigationMenuContentProps
+>(function NavigationMenuContent({ className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      ref={ref}
+      className={cn(
+        "start-0 top-0 w-full rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-3xl-16)] text-[var(--bh-content-default)] shadow-[var(--shadow-popover)] md:absolute md:w-[var(--bh-space-19xl-384)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const NavigationMenuLink = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Link>,
+  NavigationMenuLinkProps
+>(function NavigationMenuLink({ className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      ref={ref}
+      className={cn(
+        "block rounded-[var(--bh-radius-lg-8)] p-[var(--bh-space-xl-12)] text-start text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-default)] outline-none transition-colors hover:bg-[var(--bh-interactive-ghost-hover)] focus:bg-[var(--bh-interactive-ghost-hover)]",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  NavigationMenuViewportProps
+>(function NavigationMenuViewport({ className, ...props }, ref) {
+  return (
+    <div className="absolute start-0 top-full flex justify-center">
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        ref={ref}
+        className={cn(
+          "origin-top-center relative mt-[var(--bh-space-xs-4)] h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] shadow-[var(--shadow-popover)] md:w-[var(--radix-navigation-menu-viewport-width)]",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  NavigationMenuIndicatorProps
+>(function NavigationMenuIndicator({ className, ...props }, ref) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      ref={ref}
+      className={cn("top-full z-[var(--bh-z-popover)] flex h-[var(--bh-space-lg-10)] items-end justify-center overflow-hidden", className)}
+      {...props}
+    >
+      <div className="relative top-[var(--bh-space-xs-4)] size-[var(--bh-space-lg-10)] rotate-45 rounded-tl-[var(--bh-radius-sm-4)] bg-[var(--bh-bg-raised)] shadow-[var(--shadow-popover)]" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+})
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+}
+export type {
+  NavigationMenuContentProps,
+  NavigationMenuIndicatorProps,
+  NavigationMenuLinkProps,
+  NavigationMenuListProps,
+  NavigationMenuProps,
+  NavigationMenuTriggerProps,
+  NavigationMenuViewportProps,
+}

package/registry/components/pagination.tsx

@@ -3,6 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
+import { useResolvedDirection } from "@/hooks/use-direction"
 
 type PaginationType = "numeric" | "simple" | "summary"
 type PaginationVariant = "soft" | "ghost"
@@ -21,10 +22,47 @@ type PaginationPage =
       ariaLabel?: string
     }
 
-type PaginationDirection = "ltr" | "rtl"
+type PaginationMessages = {
+  caption: React.ReactNode
+  morePagesAriaLabel: string
+  navigation: string
+  next: React.ReactNode
+  nextAriaLabel: string
+  pageAriaLabel: (page: number) => string
+  previous: React.ReactNode
+  previousAriaLabel: string
+  summary: React.ReactNode
+}
 
 const defaultPaginationPages: PaginationPage[] = [1, 2, 3, 4, "ellipsis", 10]
 
+const defaultPaginationMessages: PaginationMessages = {
+  caption: "Showing 1 to 10 of 20 results",
+  morePagesAriaLabel: "More pages",
+  navigation: "Pagination",
+  next: "Next",
+  nextAriaLabel: "Next page",
+  pageAriaLabel: (page) => `Page ${page}`,
+  previous: "Previous",
+  previousAriaLabel: "Previous page",
+  summary: "Page 1 of 10",
+}
+
+const arabicPaginationMessages: PaginationMessages = {
+  caption:
+    "\u0639\u0631\u0636 1 \u0625\u0644\u0649 10 \u0645\u0646 20 \u0646\u062a\u064a\u062c\u0629",
+  morePagesAriaLabel: "\u0635\u0641\u062d\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629",
+  navigation: "\u0627\u0644\u062a\u0631\u0642\u064a\u0645",
+  next: "\u0627\u0644\u062a\u0627\u0644\u064a",
+  nextAriaLabel:
+    "\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u062a\u0627\u0644\u064a\u0629",
+  pageAriaLabel: (page) => `\u0627\u0644\u0635\u0641\u062d\u0629 ${page}`,
+  previous: "\u0627\u0644\u0633\u0627\u0628\u0642",
+  previousAriaLabel:
+    "\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0633\u0627\u0628\u0642\u0629",
+  summary: "\u0627\u0644\u0635\u0641\u062d\u0629 1 \u0645\u0646 10",
+}
+
 const paginationVariants = cva(
   [
     "flex max-w-full items-center",
@@ -141,6 +179,7 @@ type PaginationProps = Omit<React.ComponentProps<"nav">, "children"> &
     variant?: PaginationVariant
     page?: number
     pages?: PaginationPage[]
+    messages?: Partial<PaginationMessages>
     showCaption?: boolean
     caption?: React.ReactNode
     summary?: React.ReactNode
@@ -159,6 +198,7 @@ const Pagination = React.forwardRef<HTMLElement, PaginationProps>(function Pagin
   variant = "soft",
   page = 2,
   pages = defaultPaginationPages,
+  messages: messageOverrides,
   showCaption = true,
   caption,
   summary,
@@ -173,24 +213,36 @@ const Pagination = React.forwardRef<HTMLElement, PaginationProps>(function Pagin
   dir,
   ...props
 }, ref) {
+  const rootRef = React.useRef<HTMLElement | null>(null)
+  const selectedDirection = useResolvedDirection(
+    dir === "ltr" || dir === "rtl" ? dir : undefined,
+    rootRef
+  )
+  const setRootRef = React.useCallback(
+    (node: HTMLElement | null) => {
+      rootRef.current = node
+      if (typeof ref === "function") ref(node)
+      else if (ref) ref.current = node
+    },
+    [ref]
+  )
   const selectedType = type || "numeric"
   const selectedVariant = variant || "soft"
-  const selectedDirection = getPaginationDirection(dir)
-  const labels = getDefaultPaginationLabels(selectedDirection)
-  const captionContent = caption ?? labels.caption
-  const summaryContent = summary ?? labels.summary
-  const previousContent = previousLabel ?? labels.previous
-  const nextContent = nextLabel ?? labels.next
+  const messages = { ...defaultPaginationMessages, ...messageOverrides }
+  const captionContent = caption ?? messages.caption
+  const summaryContent = summary ?? messages.summary
+  const previousContent = previousLabel ?? messages.previous
+  const nextContent = nextLabel ?? messages.next
 
   return (
     <nav
-      aria-label={ariaLabel || labels.navigation}
+      aria-label={ariaLabel ?? messages.navigation}
       data-show-caption={showCaption ? "true" : "false"}
       data-slot="pagination"
       data-type={selectedType}
       data-variant={selectedVariant}
-      dir={dir}
-      ref={ref}
+      dir={selectedDirection}
+      ref={setRootRef}
       className={cn(
         paginationVariants({
           type: selectedType,
@@ -207,7 +259,7 @@ const Pagination = React.forwardRef<HTMLElement, PaginationProps>(function Pagin
           ) : null}
           <PaginationControls type="actions">
             <PaginationTextButton
-              ariaLabel={previousAriaLabel || labels.previousAriaLabel}
+              ariaLabel={previousAriaLabel ?? messages.previousAriaLabel}
               disabled={previousDisabled}
               label={previousContent}
               onClick={() => onPageChange?.(Math.max(1, page - 1))}
@@ -215,7 +267,7 @@ const Pagination = React.forwardRef<HTMLElement, PaginationProps>(function Pagin
               variant={selectedVariant}
             />
             <PaginationTextButton
-              ariaLabel={nextAriaLabel || labels.nextAriaLabel}
+              ariaLabel={nextAriaLabel ?? messages.nextAriaLabel}
               disabled={nextDisabled}
               label={nextContent}
               onClick={() => onPageChange?.(page + 1)}
@@ -229,7 +281,7 @@ const Pagination = React.forwardRef<HTMLElement, PaginationProps>(function Pagin
       {selectedType === "summary" ? (
         <>
           <PaginationTextButton
-            ariaLabel={previousAriaLabel || labels.previousAriaLabel}
+            ariaLabel={previousAriaLabel ?? messages.previousAriaLabel}
             disabled={previousDisabled}
             label={previousContent}
             onClick={() => onPageChange?.(Math.max(1, page - 1))}
@@ -244,7 +296,7 @@ const Pagination = React.forwardRef<HTMLElement, PaginationProps>(function Pagin
             {summaryContent}
           </span>
           <PaginationTextButton
-            ariaLabel={nextAriaLabel || labels.nextAriaLabel}
+            ariaLabel={nextAriaLabel ?? messages.nextAriaLabel}
             disabled={nextDisabled}
             label={nextContent}
             onClick={() => onPageChange?.(page + 1)}
@@ -261,7 +313,7 @@ const Pagination = React.forwardRef<HTMLElement, PaginationProps>(function Pagin
           ) : null}
           <PaginationControls type="numeric">
             <PaginationIconButton
-              ariaLabel={previousAriaLabel || labels.previousAriaLabel}
+              ariaLabel={previousAriaLabel ?? messages.previousAriaLabel}
               disabled={previousDisabled}
               onClick={() => onPageChange?.(Math.max(1, page - 1))}
               type="previous"
@@ -275,13 +327,14 @@ const Pagination = React.forwardRef<HTMLElement, PaginationProps>(function Pagin
                 <PaginationPageItem
                   key={getPaginationPageKey(item, index)}
                   item={item}
+                  messages={messages}
                   page={page}
                   onPageChange={onPageChange}
                 />
               ))}
             </div>
             <PaginationIconButton
-              ariaLabel={nextAriaLabel || labels.nextAriaLabel}
+              ariaLabel={nextAriaLabel ?? messages.nextAriaLabel}
               disabled={nextDisabled}
               onClick={() => onPageChange?.(page + 1)}
               type="next"
@@ -405,10 +458,12 @@ function PaginationTextButton({
 
 function PaginationPageItem({
   item,
+  messages,
   page,
   onPageChange,
 }: {
   item: PaginationPage
+  messages: PaginationMessages
   page: number
   onPageChange?: (page: number) => void
 }) {
@@ -417,12 +472,12 @@ function PaginationPageItem({
   if (normalizedItem.type === "ellipsis") {
     return (
       <span
-        aria-label={normalizedItem.ariaLabel || "More pages"}
+        aria-label={normalizedItem.ariaLabel ?? messages.morePagesAriaLabel}
         data-slot="pagination-ellipsis"
         role="separator"
         className={cn(paginationItemVariants({ active: false }))}
       >
-        {normalizedItem.label || "..."}
+        {normalizedItem.label ?? "..."}
       </span>
     )
   }
@@ -432,14 +487,16 @@ function PaginationPageItem({
   return (
     <button
       aria-current={isActive ? "page" : undefined}
-      aria-label={normalizedItem.ariaLabel || `Page ${normalizedItem.value}`}
+      aria-label={
+        normalizedItem.ariaLabel ?? messages.pageAriaLabel(normalizedItem.value)
+      }
       data-page={normalizedItem.value}
       data-slot="pagination-page"
       type="button"
       className={cn(paginationItemVariants({ active: isActive }))}
       onClick={() => onPageChange?.(normalizedItem.value)}
     >
-      {normalizedItem.label || normalizedItem.value}
+      {normalizedItem.label ?? normalizedItem.value}
     </button>
   )
 }
@@ -453,7 +510,7 @@ function PaginationArrowIcon({ type }: { type: "previous" | "next" }) {
       data-rtl-flip="true"
       data-slot="pagination-icon"
       focusable="false"
-      strokeWidth={2.25}
+      strokeWidth="var(--bh-icon-stroke-225)"
     />
   )
 }
@@ -480,44 +537,8 @@ function getPaginationPageKey(item: PaginationPage, index: number) {
   return `ellipsis-${index}`
 }
 
-function getPaginationDirection(
-  dir: React.HTMLAttributes<HTMLElement>["dir"]
-): PaginationDirection {
-  if (dir === "rtl" || dir === "ltr") {
-    return dir
-  }
-
-  return "ltr"
-}
-
-function getDefaultPaginationLabels(direction: PaginationDirection) {
-  if (direction === "rtl") {
-    return {
-      navigation: "\u0627\u0644\u062a\u0631\u0642\u064a\u0645",
-      caption:
-        "\u0639\u0631\u0636 1 \u0625\u0644\u0649 10 \u0645\u0646 20 \u0646\u062a\u064a\u062c\u0629",
-      summary: "\u0627\u0644\u0635\u0641\u062d\u0629 1 \u0645\u0646 10",
-      previous: "\u0645\u0639\u0627\u064a\u0646\u0629",
-      next: "\u0627\u0644\u062a\u0627\u0644\u064a",
-      previousAriaLabel:
-        "\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0633\u0627\u0628\u0642\u0629",
-      nextAriaLabel:
-        "\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u062a\u0627\u0644\u064a\u0629",
-    }
-  }
-
-  return {
-    navigation: "Pagination",
-    caption: "Showing 1 to 10 of 20 results",
-    summary: "Page 1 of 10",
-    previous: "Previous",
-    next: "Next",
-    previousAriaLabel: "Previous page",
-    nextAriaLabel: "Next page",
-  }
-}
-
 export {
+  arabicPaginationMessages,
   Pagination,
   paginationControlVariants,
   paginationItemVariants,
@@ -525,6 +546,7 @@ export {
 }
 export type {
   PaginationPage,
+  PaginationMessages,
   PaginationProps,
   PaginationType,
   PaginationVariant,