@motor-hero/ui-kit 0.46.0 → 0.47.0

package/package.json

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

package/src/components/base-dialog.tsx

@@ -58,10 +58,27 @@ export interface BaseDialogProps {
 
 /**
  * Standardized, responsive dialog shell:
- * - mobile: bottom sheet (full width, up to 92vh tall)
- * - desktop: centered dialog (up to 90vh 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 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,
  * which would otherwise make the rest of the page unclickable.
@@ -113,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>
       )}
@@ -153,9 +170,13 @@ export function BaseDialog({
             document.body.style.pointerEvents = ""
           }}
           className={cn(
-            "fixed z-50 flex max-h-[92vh] 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-[92vh] 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/combobox.tsx

@@ -178,7 +178,7 @@ export function Combobox({
 			</div>
 			<CommandPrimitive.List
 				ref={listRef}
-				className="max-h-[50vh] overflow-y-auto overflow-x-hidden p-1 sm:max-h-60"
+				className="max-h-[50dvh] overflow-y-auto overflow-x-hidden p-1 sm:max-h-60"
 			>
 				{!isServer && !showCreate && (
 					<CommandPrimitive.Empty className="py-6 text-center text-sm text-muted-foreground">
@@ -260,7 +260,7 @@ export function Combobox({
 			<DrawerPrimitive.Trigger asChild>{trigger}</DrawerPrimitive.Trigger>
 			<DrawerPrimitive.Portal>
 				<DrawerPrimitive.Overlay className="fixed inset-0 z-50 bg-black/80" />
-				<DrawerPrimitive.Content className="fixed inset-x-0 bottom-0 z-50 mt-24 flex max-h-[85vh] flex-col rounded-t-2xl border bg-popover text-popover-foreground outline-none">
+				<DrawerPrimitive.Content className="fixed inset-x-0 bottom-0 z-50 mt-24 flex max-h-[85dvh] flex-col rounded-t-2xl border bg-popover text-popover-foreground outline-none">
 					<DrawerPrimitive.Title className="sr-only">
 						{placeholder}
 					</DrawerPrimitive.Title>

package/src/components/date-picker.tsx

@@ -351,7 +351,7 @@ function DatePickerImpl({
           onInteractOutside={(event) => {
             if (triggerRef.current?.contains(event.target as Node)) event.preventDefault()
           }}
-          className="fixed inset-x-0 bottom-0 z-50 mt-24 flex max-h-[85vh] flex-col rounded-t-2xl border bg-popover text-popover-foreground outline-none"
+          className="fixed inset-x-0 bottom-0 z-50 mt-24 flex max-h-[85dvh] flex-col rounded-t-2xl border bg-popover text-popover-foreground outline-none"
         >
           <DrawerPrimitive.Title className="sr-only">
             {withTime ? "Selecione a data e o horário" : "Selecione a data"}

package/src/components/filter-toolbar.tsx

@@ -147,7 +147,7 @@ export function FilterPopover({
 			<DrawerPrimitive.Trigger asChild>{trigger}</DrawerPrimitive.Trigger>
 			<DrawerPrimitive.Portal>
 				<DrawerPrimitive.Overlay className="fixed inset-0 z-50 bg-black/80" />
-				<DrawerPrimitive.Content className="fixed inset-x-0 bottom-0 z-50 mt-24 flex max-h-[85vh] flex-col rounded-t-2xl border bg-popover text-popover-foreground outline-none">
+				<DrawerPrimitive.Content className="fixed inset-x-0 bottom-0 z-50 mt-24 flex max-h-[85dvh] flex-col rounded-t-2xl border bg-popover text-popover-foreground outline-none">
 					<DrawerPrimitive.Title className="sr-only">
 						{title ?? label}
 					</DrawerPrimitive.Title>

package/src/components/multi-combobox.tsx

@@ -180,7 +180,7 @@ export function MultiCombobox({
       </div>
       <CommandPrimitive.List
         ref={listRef}
-        className="max-h-[50vh] overflow-y-auto overflow-x-hidden p-1 sm:max-h-60"
+        className="max-h-[50dvh] overflow-y-auto overflow-x-hidden p-1 sm:max-h-60"
       >
         {!isServer && (
           <CommandPrimitive.Empty className="py-6 text-center text-sm text-muted-foreground">
@@ -248,7 +248,7 @@ export function MultiCombobox({
       </DrawerPrimitive.Trigger>
       <DrawerPrimitive.Portal>
         <DrawerPrimitive.Overlay className="fixed inset-0 z-50 bg-black/80" />
-        <DrawerPrimitive.Content className="fixed inset-x-0 bottom-0 z-50 mt-24 flex max-h-[85vh] flex-col rounded-t-2xl border bg-popover text-popover-foreground outline-none">
+        <DrawerPrimitive.Content className="fixed inset-x-0 bottom-0 z-50 mt-24 flex max-h-[85dvh] flex-col rounded-t-2xl border bg-popover text-popover-foreground outline-none">
           <DrawerPrimitive.Title className="sr-only">
             {placeholder}
           </DrawerPrimitive.Title>

package/src/components/pagination.tsx

@@ -30,7 +30,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">