@motor-hero/ui-kit 0.37.4 → 0.39.0

package/package.json

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

package/src/components/confirm-dialog.tsx

@@ -63,7 +63,7 @@ export function ConfirmDialog({
             <AlertDialog.Action
               onClick={onConfirm}
               disabled={loading}
-              className={`inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer ${
+              className={`inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer ${
                 variant === "destructive"
                   ? "bg-destructive text-destructive-foreground hover:bg-destructive/90"
                   : "bg-primary text-primary-foreground hover:bg-primary/90"

package/src/components/form-dialog.tsx

@@ -41,7 +41,7 @@ export function FormDialogLayout({
         <button
           type="submit"
           disabled={isSubmitting || isDisabled}
-          className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 cursor-pointer disabled:pointer-events-none disabled:opacity-50"
+          className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 cursor-pointer disabled:pointer-events-none disabled:opacity-50"
         >
           {isSubmitting ? "Salvando..." : submitLabel}
         </button>

package/src/components/responsive-data-view.tsx

@@ -1,30 +1,70 @@
 import type { ReactNode } from "react"
+import { EmptyState } from "./empty-state"
+
+import { cn } from "../lib/utils"
 
 interface ResponsiveDataViewProps {
   table: ReactNode
   cards: ReactNode
   isEmpty: boolean
   isLoading: boolean
+  /**
+   * Dados desatualizados na tela enquanto um refetch está em voo (ex.:
+   * `isPlaceholderData` do TanStack Query). Esmaece e bloqueia a interação
+   * com table/cards; a paginação continua clicável.
+   */
+  isBusy?: boolean
   emptyIcon?: ReactNode
   emptyTitle?: string
   emptyDescription?: string
+  /** CTA do estado vazio — normalmente o mesmo botão "Adicionar X" da página. */
+  emptyAction?: ReactNode
   pagination?: ReactNode
 }
 
 export function ResponsiveDataView({
-  table, cards, isEmpty, isLoading, emptyIcon, emptyTitle = "Nenhum registro encontrado", emptyDescription, pagination,
+  table,
+  cards,
+  isEmpty,
+  isLoading,
+  isBusy = false,
+  emptyIcon,
+  emptyTitle = "Nenhum registro encontrado",
+  emptyDescription,
+  emptyAction,
+  pagination,
 }: ResponsiveDataViewProps) {
+  // Lista vazia mostra só o EmptyState. Antes renderizava a caixa com o
+  // cabeçalho da tabela vazio, o bloco de texto por fora dela e a paginação
+  // desabilitada — três blocos empilhados para zero registro.
+  if (!isLoading && !isBusy && isEmpty) {
+    return (
+      <div className="rounded-md border">
+        <EmptyState
+          icon={emptyIcon}
+          title={emptyTitle}
+          description={emptyDescription}
+          action={emptyAction}
+        />
+      </div>
+    )
+  }
+
+  const busyClass = isBusy && "pointer-events-none opacity-50"
   return (
     <div className="space-y-4">
-      <div className="hidden overflow-x-auto rounded-md border md:block">{table}</div>
-      <div className="md:hidden">{cards}</div>
-      {!isLoading && isEmpty && (
-        <div className="flex flex-col items-center justify-center py-16 text-center">
-          {emptyIcon && <div className="mb-4 text-muted-foreground">{emptyIcon}</div>}
-          <h3 className="text-lg font-semibold tracking-tight">{emptyTitle}</h3>
-          {emptyDescription && <p className="mt-1 max-w-sm text-sm text-muted-foreground">{emptyDescription}</p>}
-        </div>
-      )}
+      <div
+        aria-busy={isBusy}
+        className={cn(
+          "hidden overflow-x-auto rounded-md border transition-opacity md:block",
+          busyClass,
+        )}
+      >
+        {table}
+      </div>
+      <div aria-busy={isBusy} className={cn("transition-opacity md:hidden", busyClass)}>
+        {cards}
+      </div>
       {pagination}
     </div>
   )

package/src/components/status-badge.tsx

@@ -14,29 +14,42 @@ interface StatusBadgeProps {
   children: ReactNode
 }
 
+/**
+ * Cada variante lê os tokens semânticos `--status-*` do app, com fallback para
+ * a paleta Tailwind que o componente já usava. Um app que define os tokens
+ * (ex.: IMMA, de neutros quentes) ganha as cores do seu design system; um app
+ * que não define continua com a aparência de antes — a troca não quebra nenhum
+ * consumidor. Também dispensa `dark:`, já que os tokens de quem os define
+ * mudam sozinhos no escopo `.dark`.
+ */
 const variantClasses: Record<
   StatusBadgeVariant,
   { badge: string; dot: string }
 > = {
   neutral: {
-    badge: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
-    dot: "bg-gray-400",
+    badge:
+      "bg-[var(--status-neutral-surface,#f3f4f6)] text-[var(--status-neutral-text,#374151)]",
+    dot: "bg-[var(--status-neutral,#9ca3af)]",
   },
   info: {
-    badge: "bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-400",
-    dot: "bg-blue-500",
+    badge:
+      "bg-[var(--status-info-surface,#dbeafe)] text-[var(--status-info-text,#1d4ed8)]",
+    dot: "bg-[var(--status-info,#3b82f6)]",
   },
   success: {
-    badge: "bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-400",
-    dot: "bg-green-500",
+    badge:
+      "bg-[var(--status-success-surface,#dcfce7)] text-[var(--status-success-text,#15803d)]",
+    dot: "bg-[var(--status-success,#22c55e)]",
   },
   danger: {
-    badge: "bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-400",
-    dot: "bg-red-500",
+    badge:
+      "bg-[var(--status-danger-surface,#fee2e2)] text-[var(--status-danger-text,#b91c1c)]",
+    dot: "bg-[var(--status-danger,#ef4444)]",
   },
   warning: {
-    badge: "bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-400",
-    dot: "bg-amber-500",
+    badge:
+      "bg-[var(--status-warning-surface,#fef3c7)] text-[var(--status-warning-text,#b45309)]",
+    dot: "bg-[var(--status-warning,#f59e0b)]",
   },
 }
 

package/src/components/table-skeleton.tsx

@@ -7,10 +7,13 @@ export function TableSkeleton({ rows = 5, columns = 4 }: TableSkeletonProps) {
   return (
     <>
       {Array.from({ length: rows }).map((_, i) => (
+        // p-2/h-4 espelha o TableCell real. Com p-4/h-5 a linha do skeleton
+        // ficava ~16px mais alta que a linha de dados, e a tabela encolhia
+        // visivelmente quando a resposta chegava.
         <tr key={i} className="border-b transition-colors">
           {Array.from({ length: columns }).map((_, j) => (
-            <td key={j} className="p-4 align-middle">
-              <div className="h-5 w-full animate-pulse rounded bg-muted" />
+            <td key={j} className="p-2 align-middle first:pl-4 last:pr-4">
+              <div className="h-4 w-full animate-pulse rounded bg-muted" />
             </td>
           ))}
         </tr>