banhaten 0.1.0

package/registry/components/pagination.tsx

@@ -0,0 +1,543 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+type PaginationType = "numeric" | "simple" | "summary"
+type PaginationVariant = "soft" | "ghost"
+type PaginationPage =
+  | number
+  | "ellipsis"
+  | {
+      type: "page"
+      value: number
+      label?: React.ReactNode
+      ariaLabel?: string
+    }
+  | {
+      type: "ellipsis"
+      label?: React.ReactNode
+      ariaLabel?: string
+    }
+
+type PaginationDirection = "ltr" | "rtl"
+
+const defaultPaginationPages: PaginationPage[] = [1, 2, 3, 4, "ellipsis", 10]
+
+const paginationVariants = cva(
+  [
+    "flex max-w-full items-center",
+    "text-[length:var(--bh-pagination-font-size)]",
+    "leading-[var(--bh-pagination-line-height)]",
+    "tracking-[var(--bh-pagination-letter-spacing)]",
+  ],
+  {
+    variants: {
+      type: {
+        numeric:
+          "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)]",
+        summary:
+          "w-[var(--bh-pagination-simple-width)] justify-between gap-[var(--bh-pagination-root-gap)]",
+      },
+      showCaption: {
+        true: "",
+        false: "justify-center",
+      },
+    },
+    compoundVariants: [
+      {
+        type: ["simple", "summary"],
+        showCaption: false,
+        class: "justify-between",
+      },
+    ],
+    defaultVariants: {
+      type: "numeric",
+      showCaption: true,
+    },
+  }
+)
+
+const paginationControlVariants = cva(
+  [
+    "relative inline-flex h-[var(--bh-pagination-item-size)] shrink-0 items-center justify-center",
+    "whitespace-nowrap rounded-[var(--bh-pagination-radius)]",
+    "text-[color:var(--bh-pagination-control-content)]",
+    "text-[length:var(--bh-pagination-font-size)] font-[var(--bh-pagination-label-font-weight)]",
+    "leading-[var(--bh-pagination-line-height)] tracking-[var(--bh-pagination-letter-spacing)]",
+    "outline-none transition-[background-color,border-color,color,box-shadow]",
+    "focus-visible:shadow-[var(--shadow-pagination-focus)]",
+    "disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)]",
+    "[&_svg]:pointer-events-none [&_svg]:size-[var(--bh-pagination-icon-size)] [&_svg]:shrink-0",
+    "rtl:[&_svg[data-rtl-flip='true']]:-scale-x-100",
+  ],
+  {
+    variants: {
+      variant: {
+        soft:
+          "bg-[var(--bh-pagination-control-soft-bg)] shadow-[var(--shadow-pagination-control)] hover:bg-[var(--bh-pagination-control-soft-hover)] active:bg-[var(--bh-pagination-control-soft-pressed)]",
+        ghost:
+          "bg-[var(--bh-pagination-control-ghost-bg)] hover:bg-[var(--bh-pagination-control-ghost-hover)] active:bg-[var(--bh-pagination-control-ghost-pressed)]",
+      },
+      mode: {
+        icon: "w-[var(--bh-pagination-item-size)] p-0",
+        text:
+          "gap-[var(--bh-pagination-control-text-gap)] px-[var(--bh-pagination-control-text-padding-x)] py-[var(--bh-space-md-8)] rtl:gap-[var(--bh-pagination-control-text-rtl-gap)] rtl:px-[var(--bh-pagination-control-text-rtl-padding-x)]",
+      },
+    },
+    defaultVariants: {
+      variant: "soft",
+      mode: "text",
+    },
+  }
+)
+
+const paginationControlLabelVariants = cva(
+  "min-w-0 whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        soft:
+          "px-[var(--bh-pagination-control-label-padding-x)] rtl:px-[var(--bh-pagination-control-label-rtl-padding-x)]",
+        ghost: "px-[var(--bh-pagination-control-label-rtl-padding-x)]",
+      },
+    },
+    defaultVariants: {
+      variant: "soft",
+    },
+  }
+)
+
+const paginationItemVariants = cva(
+  [
+    "relative inline-flex size-[var(--bh-pagination-item-size)] shrink-0 items-center justify-center",
+    "rounded-[var(--bh-pagination-radius)] border border-transparent text-center",
+    "text-[length:var(--bh-pagination-font-size)] font-[var(--bh-pagination-label-font-weight)]",
+    "leading-[var(--bh-pagination-line-height)] tracking-[var(--bh-pagination-letter-spacing)]",
+    "outline-none transition-[background-color,border-color,color,box-shadow]",
+    "disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)]",
+  ],
+  {
+    variants: {
+      active: {
+        true:
+          "border-[var(--bh-pagination-active-border)] bg-[var(--bh-pagination-active-bg)] text-[var(--bh-pagination-active-content)] shadow-[var(--shadow-pagination-active)]",
+        false:
+          "bg-[var(--bh-pagination-page-bg)] text-[var(--bh-pagination-page-content)] hover:bg-[var(--bh-pagination-page-hover)] active:bg-[var(--bh-pagination-page-pressed)] focus-visible:border-[var(--bh-border-brand-strong)] focus-visible:shadow-[var(--shadow-pagination-focus)]",
+      },
+    },
+    defaultVariants: {
+      active: false,
+    },
+  }
+)
+
+type PaginationProps = Omit<React.ComponentProps<"nav">, "children"> &
+  VariantProps<typeof paginationVariants> & {
+    type?: PaginationType
+    variant?: PaginationVariant
+    page?: number
+    pages?: PaginationPage[]
+    showCaption?: boolean
+    caption?: React.ReactNode
+    summary?: React.ReactNode
+    previousLabel?: React.ReactNode
+    nextLabel?: React.ReactNode
+    previousAriaLabel?: string
+    nextAriaLabel?: string
+    previousDisabled?: boolean
+    nextDisabled?: boolean
+    onPageChange?: (page: number) => void
+  }
+
+const Pagination = React.forwardRef<HTMLElement, PaginationProps>(function Pagination({
+  className,
+  type = "numeric",
+  variant = "soft",
+  page = 2,
+  pages = defaultPaginationPages,
+  showCaption = true,
+  caption,
+  summary,
+  previousLabel,
+  nextLabel,
+  previousAriaLabel,
+  nextAriaLabel,
+  previousDisabled,
+  nextDisabled,
+  onPageChange,
+  "aria-label": ariaLabel,
+  dir,
+  ...props
+}, 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
+
+  return (
+    <nav
+      aria-label={ariaLabel || labels.navigation}
+      data-show-caption={showCaption ? "true" : "false"}
+      data-slot="pagination"
+      data-type={selectedType}
+      data-variant={selectedVariant}
+      dir={dir}
+      ref={ref}
+      className={cn(
+        paginationVariants({
+          type: selectedType,
+          showCaption,
+          className,
+        })
+      )}
+      {...props}
+    >
+      {selectedType === "simple" ? (
+        <>
+          {showCaption ? (
+            <PaginationCaption type="simple">{captionContent}</PaginationCaption>
+          ) : null}
+          <PaginationControls type="actions">
+            <PaginationTextButton
+              ariaLabel={previousAriaLabel || labels.previousAriaLabel}
+              disabled={previousDisabled}
+              label={previousContent}
+              onClick={() => onPageChange?.(Math.max(1, page - 1))}
+              type="previous"
+              variant={selectedVariant}
+            />
+            <PaginationTextButton
+              ariaLabel={nextAriaLabel || labels.nextAriaLabel}
+              disabled={nextDisabled}
+              label={nextContent}
+              onClick={() => onPageChange?.(page + 1)}
+              type="next"
+              variant={selectedVariant}
+            />
+          </PaginationControls>
+        </>
+      ) : null}
+
+      {selectedType === "summary" ? (
+        <>
+          <PaginationTextButton
+            ariaLabel={previousAriaLabel || labels.previousAriaLabel}
+            disabled={previousDisabled}
+            label={previousContent}
+            onClick={() => onPageChange?.(Math.max(1, page - 1))}
+            type="previous"
+            variant={selectedVariant}
+          />
+          <span
+            data-slot="pagination-summary"
+            dir="auto"
+            className="shrink-0 whitespace-nowrap text-[color:var(--bh-pagination-caption-content)] font-[var(--bh-pagination-caption-font-weight)]"
+          >
+            {summaryContent}
+          </span>
+          <PaginationTextButton
+            ariaLabel={nextAriaLabel || labels.nextAriaLabel}
+            disabled={nextDisabled}
+            label={nextContent}
+            onClick={() => onPageChange?.(page + 1)}
+            type="next"
+            variant={selectedVariant}
+          />
+        </>
+      ) : null}
+
+      {selectedType === "numeric" ? (
+        <>
+          {showCaption ? (
+            <PaginationCaption type="numeric">{captionContent}</PaginationCaption>
+          ) : null}
+          <PaginationControls type="numeric">
+            <PaginationIconButton
+              ariaLabel={previousAriaLabel || labels.previousAriaLabel}
+              disabled={previousDisabled}
+              onClick={() => onPageChange?.(Math.max(1, page - 1))}
+              type="previous"
+              variant={selectedVariant}
+            />
+            <div
+              data-slot="pagination-pages"
+              className="flex shrink-0 items-center gap-[var(--bh-pagination-page-gap)]"
+            >
+              {pages.map((item, index) => (
+                <PaginationPageItem
+                  key={getPaginationPageKey(item, index)}
+                  item={item}
+                  page={page}
+                  onPageChange={onPageChange}
+                />
+              ))}
+            </div>
+            <PaginationIconButton
+              ariaLabel={nextAriaLabel || labels.nextAriaLabel}
+              disabled={nextDisabled}
+              onClick={() => onPageChange?.(page + 1)}
+              type="next"
+              variant={selectedVariant}
+            />
+          </PaginationControls>
+        </>
+      ) : null}
+    </nav>
+  )
+})
+
+function PaginationCaption({
+  children,
+  type,
+}: {
+  children: React.ReactNode
+  type: "numeric" | "simple"
+}) {
+  return (
+    <span
+      data-slot="pagination-caption"
+      dir="auto"
+      className={cn(
+        "min-w-0 text-[color:var(--bh-pagination-caption-content)] font-[var(--bh-pagination-caption-font-weight)]",
+        type === "numeric"
+          ? "w-[var(--bh-pagination-caption-width)] shrink-0"
+          : "flex-1"
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+function PaginationControls({
+  children,
+  type,
+}: {
+  children: React.ReactNode
+  type: "actions" | "numeric"
+}) {
+  return (
+    <div
+      data-slot="pagination-controls"
+      className={cn(
+        "flex shrink-0 items-center",
+        type === "numeric"
+          ? "gap-[var(--bh-pagination-control-gap)]"
+          : "gap-[var(--bh-pagination-action-gap)]"
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+function PaginationIconButton({
+  ariaLabel,
+  disabled,
+  onClick,
+  type,
+  variant,
+}: {
+  ariaLabel: string
+  disabled?: boolean
+  onClick?: () => void
+  type: "previous" | "next"
+  variant: PaginationVariant
+}) {
+  return (
+    <button
+      aria-label={ariaLabel}
+      data-slot="pagination-control"
+      disabled={disabled}
+      type="button"
+      className={cn(paginationControlVariants({ variant, mode: "icon" }))}
+      onClick={onClick}
+    >
+      <PaginationArrowIcon type={type} />
+    </button>
+  )
+}
+
+function PaginationTextButton({
+  ariaLabel,
+  disabled,
+  label,
+  onClick,
+  type,
+  variant,
+}: {
+  ariaLabel: string
+  disabled?: boolean
+  label: React.ReactNode
+  onClick?: () => void
+  type: "previous" | "next"
+  variant: PaginationVariant
+}) {
+  return (
+    <button
+      aria-label={ariaLabel}
+      data-slot="pagination-control"
+      disabled={disabled}
+      type="button"
+      className={cn(paginationControlVariants({ variant, mode: "text" }))}
+      onClick={onClick}
+    >
+      {type === "previous" ? <PaginationArrowIcon type="previous" /> : null}
+      <span
+        data-slot="pagination-control-label"
+        dir="auto"
+        className={cn(paginationControlLabelVariants({ variant }))}
+      >
+        {label}
+      </span>
+      {type === "next" ? <PaginationArrowIcon type="next" /> : null}
+    </button>
+  )
+}
+
+function PaginationPageItem({
+  item,
+  page,
+  onPageChange,
+}: {
+  item: PaginationPage
+  page: number
+  onPageChange?: (page: number) => void
+}) {
+  const normalizedItem = normalizePaginationPage(item)
+
+  if (normalizedItem.type === "ellipsis") {
+    return (
+      <span
+        aria-label={normalizedItem.ariaLabel || "More pages"}
+        data-slot="pagination-ellipsis"
+        role="separator"
+        className={cn(paginationItemVariants({ active: false }))}
+      >
+        {normalizedItem.label || "..."}
+      </span>
+    )
+  }
+
+  const isActive = normalizedItem.value === page
+
+  return (
+    <button
+      aria-current={isActive ? "page" : undefined}
+      aria-label={normalizedItem.ariaLabel || `Page ${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}
+    </button>
+  )
+}
+
+function PaginationArrowIcon({ type }: { type: "previous" | "next" }) {
+  return (
+    <svg
+      aria-hidden="true"
+      data-rtl-flip="true"
+      data-slot="pagination-icon"
+      fill="none"
+      focusable="false"
+      viewBox="0 0 20 20"
+    >
+      {type === "previous" ? (
+        <path
+          d="M2.357 5.30332L6.48183 9.42807L5.30333 10.6066L0 5.30332L5.30333 0L6.48183 1.17851L2.357 5.30332Z"
+          fill="currentColor"
+          transform="translate(6.666 4.697)"
+        />
+      ) : (
+        <path
+          d="M4.12482 5.30332L0 1.17851L1.17852 0L6.48182 5.30332L1.17852 10.6066L0 9.42807L4.12482 5.30332Z"
+          fill="currentColor"
+          transform="translate(6.852 4.697)"
+        />
+      )}
+    </svg>
+  )
+}
+
+function normalizePaginationPage(item: PaginationPage) {
+  if (item === "ellipsis") {
+    return { type: "ellipsis" as const }
+  }
+
+  if (typeof item === "number") {
+    return { type: "page" as const, value: item }
+  }
+
+  return item
+}
+
+function getPaginationPageKey(item: PaginationPage, index: number) {
+  const normalizedItem = normalizePaginationPage(item)
+
+  if (normalizedItem.type === "page") {
+    return `page-${normalizedItem.value}`
+  }
+
+  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 {
+  Pagination,
+  paginationControlVariants,
+  paginationItemVariants,
+  paginationVariants,
+}
+export type {
+  PaginationPage,
+  PaginationProps,
+  PaginationType,
+  PaginationVariant,
+}