@motor-hero/ui-kit 0.49.0 → 0.50.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motor-hero/ui-kit",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "Componentes React reutilizáveis para o ecossistema MotorHero — shadcn/ui + Tailwind CSS v4",
   "author": "MotorHero",
   "license": "UNLICENSED",

package/src/components/pagination.tsx

@@ -1,10 +1,10 @@
-export interface PaginationProps {
+import { useId, useState } from "react"
+
+interface PaginationBaseProps {
   page: number
   onPageChange: (page: number) => void
   hasNextPage: boolean
   hasPreviousPage: boolean
-  /** Total de páginas. Quando informado, o rótulo vira "Página {page} de {totalPages}". */
-  totalPages?: number
   /** Exibe o seletor de itens por página. Use com `pageSize`, `onPageSizeChange` e `pageSizeOptions`. */
   showPageSizeSelector?: boolean
   pageSize?: number
@@ -13,6 +13,20 @@ export interface PaginationProps {
   className?: string
 }
 
+type PageJumpProps =
+  | {
+      /** Total de páginas. Quando informado, o rótulo vira "Página {page} de {totalPages}". */
+      totalPages?: number
+      showPageJump?: false
+    }
+  | {
+      totalPages: number
+      /** Torna o número da página editável para pular direto a uma página. Exige `totalPages`. */
+      showPageJump: true
+    }
+
+export type PaginationProps = PaginationBaseProps & PageJumpProps
+
 // `max-sm:h-10`: alvo de toque de 40px no celular; o desktop segue em 32px.
 const navButtonClass =
   "inline-flex h-8 max-sm:h-10 items-center justify-center rounded-md border border-input bg-background px-3 text-xs font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer disabled:pointer-events-none disabled:opacity-50"
@@ -23,6 +37,7 @@ export function Pagination({
   hasNextPage,
   hasPreviousPage,
   totalPages,
+  showPageJump = false,
   showPageSizeSelector = false,
   pageSize,
   onPageSizeChange,
@@ -64,10 +79,14 @@ export function Pagination({
         >
           Anterior
         </button>
-        <span className="text-sm text-muted-foreground">
-          Página {page}
-          {totalPages ? ` de ${totalPages}` : ""}
-        </span>
+        {showPageJump && totalPages !== undefined ? (
+          <PageJumpInput page={page} totalPages={totalPages} onPageChange={onPageChange} />
+        ) : (
+          <span className="text-sm text-muted-foreground">
+            Página {page}
+            {totalPages ? ` de ${totalPages}` : ""}
+          </span>
+        )}
         <button
           type="button"
           onClick={() => onPageChange(page + 1)}
@@ -80,3 +99,56 @@ export function Pagination({
     </div>
   )
 }
+
+interface PageJumpInputProps {
+  page: number
+  totalPages: number
+  onPageChange: (page: number) => void
+}
+
+function PageJumpInput({ page, totalPages, onPageChange }: PageJumpInputProps) {
+  const inputId = useId()
+  // `null` = sem edição em andamento; o campo mostra a página atual.
+  const [draft, setDraft] = useState<string | null>(null)
+  const [prevPage, setPrevPage] = useState(page)
+  if (page !== prevPage) {
+    setPrevPage(page)
+    setDraft(null)
+  }
+
+  // Enter e blur confirmam; valores fora do intervalo são ajustados em silêncio.
+  const commit = () => {
+    if (draft === null) return
+    setDraft(null)
+    if (draft === "") return
+    const target = Math.max(1, Math.min(Number(draft), totalPages))
+    if (target !== page) onPageChange(target)
+  }
+
+  return (
+    <span className="flex items-center gap-1.5 whitespace-nowrap text-sm text-muted-foreground">
+      <label htmlFor={inputId} className="max-sm:sr-only">
+        Página
+      </label>
+      <input
+        id={inputId}
+        type="text"
+        inputMode="numeric"
+        enterKeyHint="go"
+        autoComplete="off"
+        aria-label="Ir para a página"
+        value={draft ?? String(page)}
+        onChange={(e) => setDraft(e.target.value.replace(/\D/g, ""))}
+        onFocus={(e) => e.target.select()}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") commit()
+          else if (e.key === "Escape") setDraft(null)
+        }}
+        style={{ width: `${String(totalPages).length + 3}ch` }}
+        className="h-8 max-sm:h-10 rounded-md border border-input bg-background px-1.5 text-center text-xs font-medium tabular-nums text-foreground shadow-sm transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+      />
+      <span>de {totalPages}</span>
+    </span>
+  )
+}