@motor-hero/ui-kit 0.46.0 → 0.46.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motor-hero/ui-kit",
-  "version": "0.46.0",
+  "version": "0.46.1",
   "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,16 @@ 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 (full width, up to 92dvh tall)
+ * - desktop: centered dialog (up to 92dvh tall)
  * Header and footer stay fixed; only the body scrolls.
  *
+ * 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.
+ *
  * 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.
@@ -153,9 +159,9 @@ export function BaseDialog({
             document.body.style.pointerEvents = ""
           }}
           className={cn(
-            "fixed z-50 flex max-h-[92vh] flex-col bg-background shadow-lg outline-none",
+            "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-[92vh] sm:w-full sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-lg",
+            "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",
             "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>