@motor-hero/ui-kit 0.48.1 → 0.50.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motor-hero/ui-kit",
-  "version": "0.48.1",
+  "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/app-shell.tsx

@@ -28,6 +28,14 @@ export interface AppShellProps {
   sidebarFooter?: ReactNode | ((collapsed: boolean) => ReactNode)
   /** Above the header, full width of the content column — `UpdateBanner` goes here. */
   banner?: ReactNode
+  /**
+   * Merged into the sidebar (desktop and mobile drawer), e.g.
+   * `bg-sidebar text-sidebar-foreground border-sidebar-border`. Inner dividers
+   * follow the sidebar's border color.
+   */
+  sidebarClassName?: string
+  /** Merged into the top header bar. */
+  headerClassName?: string
   children: ReactNode
 }
 
@@ -47,6 +55,8 @@ export function AppShell({
   defaultCollapsed = false,
   sidebarFooter,
   banner,
+  sidebarClassName,
+  headerClassName,
   children,
 }: AppShellProps) {
   const [collapsed, setCollapsed] = useState(defaultCollapsed)
@@ -68,24 +78,29 @@ export function AppShell({
     <div className="flex h-screen overflow-hidden bg-background">
       {/* Desktop sidebar */}
       <aside
+        data-slot="sidebar"
         className={cn(
           "hidden shrink-0 flex-col border-r bg-card transition-all duration-300 md:flex",
           collapsed ? "w-16" : "w-60",
+          sidebarClassName,
         )}
       >
-        <div className="flex h-14 shrink-0 items-center border-b px-4">
+        <div className="flex h-14 shrink-0 items-center border-b border-inherit px-4" data-slot="sidebar-brand">
           {collapsed ? (brandCollapsed ?? brand) : brand}
         </div>
-        <div className="flex-1 overflow-y-auto px-2 py-4">{nav(collapsed)}</div>
+        <div className="flex-1 overflow-y-auto px-2 py-4" data-slot="sidebar-content">
+          {nav(collapsed)}
+        </div>
         {sidebarFooter && (
-          <div className="border-t px-3 py-2" data-slot="sidebar-footer">
+          <div className="border-t border-inherit px-3 py-2" data-slot="sidebar-footer">
             {typeof sidebarFooter === "function" ? sidebarFooter(collapsed) : sidebarFooter}
           </div>
         )}
         {collapsible && (
-          <div className="border-t p-2">
+          <div className="border-t border-inherit p-2">
             <button
               type="button"
+              data-slot="sidebar-toggle"
               onClick={() => setCollapsed((v) => !v)}
               className="flex w-full items-center justify-center rounded-md px-2 py-2 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
               aria-label={collapsed ? "Expandir menu" : "Recolher menu"}
@@ -106,21 +121,30 @@ export function AppShell({
       >
         <div className="absolute inset-0 bg-black/50" />
         <div
+          data-slot="sidebar-drawer"
           className={cn(
             "absolute left-0 top-0 flex h-full w-64 flex-col border-r bg-card transition-transform duration-300",
             mobileOpen ? "translate-x-0" : "-translate-x-full",
+            sidebarClassName,
           )}
           onClick={(e) => e.stopPropagation()}
         >
-          <div className="flex h-14 shrink-0 items-center border-b px-4">{brand}</div>
-          <div className="flex-1 overflow-y-auto px-2 py-4">{nav(false, () => setMobileOpen(false))}</div>
+          <div className="flex h-14 shrink-0 items-center border-b border-inherit px-4" data-slot="sidebar-brand">
+            {brand}
+          </div>
+          <div className="flex-1 overflow-y-auto px-2 py-4" data-slot="sidebar-content">
+            {nav(false, () => setMobileOpen(false))}
+          </div>
         </div>
       </div>
 
       {/* Main column */}
       <div className="flex flex-1 flex-col overflow-hidden">
         {banner}
-        <header className="flex h-14 shrink-0 items-center gap-2 border-b bg-background px-4">
+        <header
+          data-slot="header"
+          className={cn("flex h-14 shrink-0 items-center gap-2 border-b bg-background px-4", headerClassName)}
+        >
           <button
             type="button"
             onClick={() => setMobileOpen(true)}

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>
+  )
+}