@motor-hero/ui-kit 0.49.0 → 0.51.0

package/package.json

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

package/src/components/combobox.tsx

@@ -14,6 +14,10 @@ export interface ComboboxOption {
 	/** Optional leading decoration rendered before the label (icon, colored
 	 * dot) — purely visual, doesn't affect filtering/matching. */
 	icon?: React.ReactNode;
+	/** Linha secundária abaixo do rótulo na lista (ex.: e-mail de uma pessoa,
+	 * para separar homônimos). No gatilho vira o `title`. Entra na busca do
+	 * modo cliente. */
+	description?: string;
 }
 
 export interface ComboboxProps {
@@ -209,6 +213,7 @@ export function Combobox({
 						// cliente: cmdk filtra pelo `value`, então usamos o label; servidor:
 						// o servidor já filtrou, então usamos o id (único, evita colisão de labels).
 						value={isServer ? option.value : option.label}
+						keywords={option.description ? [option.description] : undefined}
 						disabled={option.disabled}
 						onSelect={() => handleSelect(option.value)}
 						className="relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-2.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 sm:py-1.5"
@@ -220,7 +225,7 @@ export function Combobox({
 							)}
 						/>
 						{option.icon}
-						<span className="truncate">{option.label}</span>
+						<OptionText option={option} />
 					</CommandPrimitive.Item>
 				))}
 				{isServer && !loading && options.length === 0 && (
@@ -274,3 +279,19 @@ export function Combobox({
 		</DrawerPrimitive.Root>
 	);
 }
+
+export function OptionText({ option }: { option: ComboboxOption }) {
+	if (!option.description)
+		return <span className="truncate">{option.label}</span>;
+	return (
+		<span className="flex min-w-0 flex-col">
+			<span className="truncate">{option.label}</span>
+			<span
+				title={option.description}
+				className="truncate text-xs text-muted-foreground"
+			>
+				{option.description}
+			</span>
+		</span>
+	);
+}

package/src/components/multi-combobox.tsx

@@ -6,7 +6,7 @@ import { Drawer as DrawerPrimitive } from "vaul"
 import { useInfiniteScrollSentinel } from "../hooks/use-infinite-scroll-sentinel"
 import { useIsDesktop } from "../hooks/use-is-desktop"
 import { cn } from "../lib/utils"
-import type { ComboboxOption } from "./combobox"
+import { type ComboboxOption, OptionText } from "./combobox"
 
 export interface MultiComboboxProps {
   options: ComboboxOption[]
@@ -101,6 +101,15 @@ export function MultiCombobox({
     .map((v) => byValue.get(v) ?? labelCache.current.get(v))
     .filter((option): option is ComboboxOption => option !== undefined)
 
+  // Chips homônimos não se distinguem só pelo rótulo: esses ganham a descrição.
+  const labelCounts = new Map<string, number>()
+  for (const option of selected)
+    labelCounts.set(option.label, (labelCounts.get(option.label) ?? 0) + 1)
+  const chipLabel = (option: ComboboxOption) =>
+    option.description && (labelCounts.get(option.label) ?? 0) > 1
+      ? `${option.label} · ${option.description}`
+      : option.label
+
   const { listRef, sentinelRef } = useInfiniteScrollSentinel({
     enabled: isServer && !!hasMore,
     loading,
@@ -146,9 +155,10 @@ export function MultiCombobox({
         selected.map((option) => (
           <span
             key={option.value}
+            title={option.description}
             className="inline-flex items-center gap-1 rounded bg-secondary px-1.5 py-0.5 text-xs text-secondary-foreground"
           >
-            {option.label}
+            {chipLabel(option)}
             <button
               type="button"
               tabIndex={-1}
@@ -195,6 +205,7 @@ export function MultiCombobox({
           <CommandPrimitive.Item
             key={option.value}
             value={isServer ? option.value : option.label}
+            keywords={option.description ? [option.description] : undefined}
             disabled={option.disabled}
             onSelect={() => toggleValue(option.value)}
             className="relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-2.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 sm:py-1.5"
@@ -205,7 +216,7 @@ export function MultiCombobox({
                 value.includes(option.value) ? "opacity-100" : "opacity-0",
               )}
             />
-            <span className="truncate">{option.label}</span>
+            <OptionText option={option} />
           </CommandPrimitive.Item>
         ))}
         {isServer && !loading && options.length === 0 && (

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