@motor-hero/ui-kit 0.46.1 → 0.48.0

package/package.json

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

@@ -58,15 +58,26 @@ export interface BaseDialogProps {
 
 /**
  * Standardized, responsive dialog shell:
- * - mobile: bottom sheet (full width, up to 92dvh tall)
+ * - mobile: bottom sheet that can grow to nearly the whole screen
  * - desktop: centered dialog (up to 92dvh tall)
  * Header and footer stay fixed; only the body scrolls.
  *
+ * The mobile ceiling is the screen minus a slim top gap (safe area or
+ * 0.75rem, whichever is larger): a long form gets virtually the whole
+ * screen — the old 92dvh cap wasted ~70px on the one device where height is
+ * scarce — while the rounded top and the sliver of scrim above it keep the
+ * sheet language every other mobile surface in this kit speaks (combobox,
+ * pickers, menus are all `rounded-t-2xl` bottom sheets). An edge-to-edge
+ * square dialog here read as a foreign screen, not a layer of this app.
+ * Short dialogs still hug their content instead of stretching.
+ *
  * Heights use `dvh`, not `vh`: on iOS `vh` is locked to the large viewport
- * (toolbars collapsed), so `92vh` can exceed the visible area by 10-15%. With
- * the sheet anchored to `bottom-0` the overflow leaves through the top, and
- * since the body is the only scrollable child, what goes off-screen is the
- * header - title and close button. Does not reproduce outside real iOS.
+ * (toolbars collapsed), so a `vh` cap can exceed the visible area by
+ * 10-15%. With the sheet anchored to `bottom-0` the overflow leaves
+ * through the top, and since the body is the only scrollable child, what
+ * goes off-screen is the header - title and close button. Does not
+ * reproduce outside real iOS. The footer pads for the home indicator
+ * (`env(safe-area-inset-bottom)`); the top gap already clears the notch.
  *
  * Also fixes the known Radix bug where `body { pointer-events: none }`
  * can persist after closing a dialog that contained a Select/Popover,
@@ -119,7 +130,7 @@ export function BaseDialog({
       </div>
       <div className="min-h-0 flex-1 overflow-y-auto px-6 py-4">{children}</div>
       {footer && (
-        <div className="flex shrink-0 flex-col-reverse gap-2 border-t px-6 py-3 sm:flex-row sm:justify-end">
+        <div className="flex shrink-0 flex-col-reverse gap-2 border-t px-6 py-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] sm:flex-row sm:justify-end">
           {footer}
         </div>
       )}
@@ -159,9 +170,13 @@ export function BaseDialog({
             document.body.style.pointerEvents = ""
           }}
           className={cn(
-            "fixed z-50 flex max-h-[92dvh] flex-col bg-background shadow-lg outline-none",
-            "inset-x-0 bottom-0 rounded-t-2xl",
-            "sm:inset-x-auto sm:bottom-auto sm:left-1/2 sm:top-1/2 sm:max-h-[92dvh] sm:w-full sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-lg",
+            "fixed z-50 flex w-full flex-col bg-background shadow-lg outline-none",
+            "inset-x-0 bottom-0 rounded-t-2xl max-h-[calc(100dvh_-_max(0.75rem,env(safe-area-inset-top)))]",
+            // Entra deslizando de baixo, como os drawers (vaul) do restante do
+            // kit; no desktop os slides sairiam brigando com o translate de
+            // centralização, então ficam restritos ao mobile.
+            "max-sm:slide-in-from-bottom-8 max-sm:slide-out-to-bottom-8",
+            "sm:inset-x-auto sm:bottom-auto sm:left-1/2 sm:top-1/2 sm:max-h-[92dvh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-lg",
             "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
             sizeClasses[size],
             className,

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,
@@ -30,7 +31,10 @@ export function Pagination({
 }: PaginationProps) {
   return (
     <div
-      className={`flex items-center ${showPageSizeSelector ? "justify-between" : "justify-end"} gap-4 ${className ?? ""}`}
+      // Quebra em vez de empurrar: num celular de 360px os dois grupos não
+      // cabem na mesma linha e o "Próximo" saía da área visível, com a lista
+      // inteira rolando de lado atrás dele.
+      className={`flex flex-wrap items-center ${showPageSizeSelector ? "justify-between" : "justify-end"} gap-x-4 gap-y-2 ${className ?? ""}`}
     >
       {showPageSizeSelector && (
         <div className="flex items-center gap-2">
@@ -41,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,