banhaten 0.1.3 → 0.3.0

package/registry/components/pagination.tsx

@@ -3,6 +3,9 @@ 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"
+
+import "./pagination.css"
 
 type PaginationType = "numeric" | "simple" | "summary"
 type PaginationVariant = "soft" | "ghost"
@@ -21,13 +24,50 @@ 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",
+    "ds-pagination flex w-full max-w-full min-w-0 flex-wrap items-center",
     "text-[length:var(--bh-pagination-font-size)]",
     "leading-[var(--bh-pagination-line-height)]",
     "tracking-[var(--bh-pagination-letter-spacing)]",
@@ -36,11 +76,11 @@ const paginationVariants = cva(
     variants: {
       type: {
         numeric:
-          "w-[var(--bh-pagination-numeric-width)] justify-between gap-[var(--bh-pagination-root-gap)]",
+          "max-w-[var(--bh-pagination-numeric-width)] justify-between gap-[var(--bh-pagination-root-gap)]",
         simple:
-          "w-[var(--bh-pagination-simple-width)] justify-between gap-[var(--bh-pagination-root-gap)]",
+          "max-w-[var(--bh-pagination-simple-width)] justify-between gap-[var(--bh-pagination-root-gap)]",
         summary:
-          "w-[var(--bh-pagination-simple-width)] justify-between gap-[var(--bh-pagination-root-gap)]",
+          "max-w-[var(--bh-pagination-simple-width)] justify-between gap-[var(--bh-pagination-root-gap)]",
       },
       showCaption: {
         true: "",
@@ -141,6 +181,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 +200,7 @@ const Pagination = React.forwardRef<HTMLElement, PaginationProps>(function Pagin
   variant = "soft",
   page = 2,
   pages = defaultPaginationPages,
+  messages: messageOverrides,
   showCaption = true,
   caption,
   summary,
@@ -173,24 +215,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 +261,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 +269,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 +283,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 +298,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 +315,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"
@@ -269,19 +323,20 @@ const Pagination = React.forwardRef<HTMLElement, PaginationProps>(function Pagin
             />
             <div
               data-slot="pagination-pages"
-              className="flex shrink-0 items-center gap-[var(--bh-pagination-page-gap)]"
+              className="ds-pagination__pages flex min-w-0 shrink-0 items-center gap-[var(--bh-pagination-page-gap)]"
             >
               {pages.map((item, index) => (
                 <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"
@@ -328,7 +383,7 @@ function PaginationControls({
     <div
       data-slot="pagination-controls"
       className={cn(
-        "flex shrink-0 items-center",
+        "ds-pagination__controls flex max-w-full min-w-0 shrink-0 items-center",
         type === "numeric"
           ? "gap-[var(--bh-pagination-control-gap)]"
           : "gap-[var(--bh-pagination-action-gap)]"
@@ -405,10 +460,12 @@ function PaginationTextButton({
 
 function PaginationPageItem({
   item,
+  messages,
   page,
   onPageChange,
 }: {
   item: PaginationPage
+  messages: PaginationMessages
   page: number
   onPageChange?: (page: number) => void
 }) {
@@ -417,12 +474,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 +489,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 +512,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 +539,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 +548,7 @@ export {
 }
 export type {
   PaginationPage,
+  PaginationMessages,
   PaginationProps,
   PaginationType,
   PaginationVariant,