@motor-hero/ui-kit 0.47.0 → 0.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motor-hero/ui-kit",
-  "version": "0.47.0",
+  "version": "0.48.0",
   "description": "Componentes React reutilizáveis para o ecossistema MotorHero — shadcn/ui + Tailwind CSS v4",
   "author": "MotorHero",
   "license": "UNLICENSED",
@@ -49,6 +49,7 @@
     "lint": "tsc --noEmit",
     "docs:dev": "vite --config docs/vite.config.ts",
     "docs:build": "vite build --config docs/vite.config.ts",
+    "release": "scripts/release.sh",
     "prepublishOnly": "npm run build",
     "prepare": "husky"
   },

package/src/components/app-shell.tsx

@@ -124,7 +124,7 @@ export function AppShell({
           <button
             type="button"
             onClick={() => setMobileOpen(true)}
-            className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-input bg-background shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground md:hidden"
+            className="inline-flex h-9 w-9 max-sm:h-10 max-sm:w-10 items-center justify-center rounded-md border border-input bg-background shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground md:hidden"
             aria-label="Abrir menu"
           >
             <Menu className="h-4 w-4" />

package/src/components/date-picker.tsx

@@ -269,7 +269,7 @@ function DatePickerImpl({
         aria-haspopup="dialog"
         aria-expanded={open}
         onClick={() => setOpen(!open)}
-        className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground transition-colors hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
+        className="absolute right-1 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground disabled:pointer-events-none disabled:opacity-50"
       >
         {withTime ? <Clock className="h-4 w-4" /> : <CalendarIcon className="h-4 w-4" />}
       </button>

package/src/components/mode-toggle.tsx

@@ -10,7 +10,7 @@ export function ModeToggle() {
       <DropdownMenu.Trigger asChild>
         <button
           type="button"
-          className="relative inline-flex h-9 w-9 items-center justify-center rounded-md border border-input bg-background text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          className="relative inline-flex h-9 w-9 max-sm:h-10 max-sm:w-10 items-center justify-center rounded-md border border-input bg-background text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           aria-label="Alternar tema"
         >
           <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />

package/src/components/pagination.tsx

@@ -13,8 +13,9 @@ export interface PaginationProps {
   className?: string
 }
 
+// `max-sm:h-10`: alvo de toque de 40px no celular; o desktop segue em 32px.
 const navButtonClass =
-  "inline-flex h-8 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"
+  "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"
 
 export function Pagination({
   page,
@@ -44,7 +45,7 @@ export function Pagination({
             id="pagination-page-size"
             value={pageSize}
             onChange={(e) => onPageSizeChange?.(Number(e.target.value))}
-            className="h-8 rounded-md border border-input bg-background px-2 text-xs font-medium shadow-sm transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring cursor-pointer"
+            className="h-8 max-sm:h-10 rounded-md border border-input bg-background px-2 text-xs font-medium shadow-sm transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring cursor-pointer"
           >
             {(pageSizeOptions ?? []).map((size) => (
               <option key={size} value={size}>

package/src/components/password-input.tsx

@@ -25,7 +25,7 @@ export const PasswordInput = React.forwardRef<
         onClick={() => setVisible((prev) => !prev)}
         aria-label={visible ? "Ocultar senha" : "Mostrar senha"}
         tabIndex={-1}
-        className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground transition-colors hover:text-foreground"
+        className="absolute right-1 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground"
       >
         {visible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
       </button>

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

@@ -20,6 +20,24 @@ interface ResponsiveDataViewProps {
   /** CTA do estado vazio — normalmente o mesmo botão "Adicionar X" da página. */
   emptyAction?: ReactNode
   pagination?: ReactNode
+  /**
+   * A partir de qual largura a tabela substitui os cards. Padrão `md`. Use
+   * `lg`/`xl` quando a tabela tem colunas demais para caber ao lado da barra
+   * lateral num tablet — os cards leem melhor do que uma tabela rolando de lado.
+   */
+  breakpoint?: ResponsiveDataViewBreakpoint
+}
+
+export type ResponsiveDataViewBreakpoint = "md" | "lg" | "xl"
+
+// Classes literais: o Tailwind do consumidor só gera o que encontra escrito.
+const BREAKPOINT_CLASSES: Record<
+  ResponsiveDataViewBreakpoint,
+  { table: string; cards: string }
+> = {
+  md: { table: "md:block", cards: "md:hidden" },
+  lg: { table: "lg:block", cards: "lg:hidden" },
+  xl: { table: "xl:block", cards: "xl:hidden" },
 }
 
 export function ResponsiveDataView({
@@ -33,6 +51,7 @@ export function ResponsiveDataView({
   emptyDescription,
   emptyAction,
   pagination,
+  breakpoint = "md",
 }: 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
@@ -51,18 +70,20 @@ export function ResponsiveDataView({
   }
 
   const busyClass = isBusy && "pointer-events-none opacity-50"
+  const visibility = BREAKPOINT_CLASSES[breakpoint]
   return (
     <div className="space-y-4">
       <div
         aria-busy={isBusy}
         className={cn(
-          "hidden overflow-x-auto rounded-md border transition-opacity md:block",
+          "hidden overflow-x-auto rounded-md border transition-opacity",
+          visibility.table,
           busyClass,
         )}
       >
         {table}
       </div>
-      <div aria-busy={isBusy} className={cn("transition-opacity md:hidden", busyClass)}>
+      <div aria-busy={isBusy} className={cn("transition-opacity", visibility.cards, busyClass)}>
         {cards}
       </div>
       {pagination}

package/src/components/row-actions-menu.tsx

@@ -27,8 +27,9 @@ export interface RowActionsMenuProps {
   renderLink?: RenderLink
 }
 
+// 32px no desktop, 40px de alvo de toque no celular.
 const triggerClass =
-  "inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+  "inline-flex h-8 w-8 max-sm:h-10 max-sm:w-10 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
 
 // Desktop: itens compactos do dropdown. Mobile: alvos de toque maiores.
 const itemClass =

package/src/components/user-menu.tsx

@@ -57,7 +57,7 @@ export function UserMenu({
   const trigger = (
     <button
       type="button"
-      className="inline-flex h-9 w-9 items-center justify-center overflow-hidden rounded-full border border-input bg-background text-xs font-semibold shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      className="inline-flex h-9 w-9 max-sm:h-10 max-sm:w-10 items-center justify-center overflow-hidden rounded-full border border-input bg-background text-xs font-semibold shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
       aria-label="Menu do usuário"
       data-testid="user-menu"
     >

package/src/index.ts

@@ -43,7 +43,7 @@ export type { PaginationProps } from "./components/pagination";
 export { Pagination } from "./components/pagination";
 export { PasswordInput } from "./components/password-input";
 export { ProgressBar } from "./components/progress-bar";
-export { ResponsiveDataView } from "./components/responsive-data-view";
+export { ResponsiveDataView, type ResponsiveDataViewBreakpoint } from "./components/responsive-data-view";
 export type {
 	RowAction,
 	RowActionsMenuProps,