@motor-hero/ui-kit 0.46.0 → 0.47.0

package/dist/components/base-dialog.d.ts

@@ -49,10 +49,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.

package/dist/components/base-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-dialog.d.ts","sourceRoot":"","sources":["../../src/components/base-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,QAAA,MAAM,WAAW;;;;;;;;;;;CAWP,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,WAAW,CAAA;AAErD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,SAAS,CAAA;CACnD;AAED;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,IAAW,EACX,SAAS,EACT,KAAK,EACL,YAAmB,EACnB,iBAAiB,EACjB,cAAqC,GACtC,EAAE,eAAe,qBAuFjB"}
+{"version":3,"file":"base-dialog.d.ts","sourceRoot":"","sources":["../../src/components/base-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,QAAA,MAAM,WAAW;;;;;;;;;;;CAWP,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,WAAW,CAAA;AAErD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,SAAS,CAAA;CACnD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,IAAW,EACX,SAAS,EACT,KAAK,EACL,YAAmB,EACnB,iBAAiB,EACjB,cAAqC,GACtC,EAAE,eAAe,qBA2FjB"}

package/dist/components/pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/components/pagination.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,WAAW,EAAE,OAAO,CAAA;IACpB,eAAe,EAAE,OAAO,CAAA;IACxB,yFAAyF;IACzF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,uGAAuG;IACvG,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAKD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,UAAU,EACV,oBAA4B,EAC5B,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,SAAS,GACV,EAAE,eAAe,+BAgDjB"}
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/components/pagination.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,WAAW,EAAE,OAAO,CAAA;IACpB,eAAe,EAAE,OAAO,CAAA;IACxB,yFAAyF;IACzF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,uGAAuG;IACvG,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAKD,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,UAAU,EACV,oBAA4B,EAC5B,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,SAAS,GACV,EAAE,eAAe,+BAmDjB"}

package/dist/index.cjs

@@ -506,7 +506,7 @@ function BaseDialog({
       )
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto px-6 py-4", children }),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex shrink-0 flex-col-reverse gap-2 border-t px-6 py-3 sm:flex-row sm:justify-end", children: footer })
+    footer && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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", children: footer })
   ] });
   const isModal = modal ?? !isDesktop;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog.Root, { open, onOpenChange, modal: isModal, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Dialog.Portal, { children: [
@@ -542,9 +542,13 @@ 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
@@ -884,7 +888,7 @@ function Combobox({
           import_cmdk.Command.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",
             children: [
               !isServer && !showCreate && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_cmdk.Command.Empty, { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }),
               showCreate && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
@@ -952,7 +956,7 @@ function Combobox({
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_vaul2.Drawer.Trigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_vaul2.Drawer.Portal, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_vaul2.Drawer.Overlay, { className: "fixed inset-0 z-50 bg-black/80" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_vaul2.Drawer.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", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_vaul2.Drawer.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", children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_vaul2.Drawer.Title, { className: "sr-only", children: placeholder }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mx-auto my-3 h-1.5 w-12 shrink-0 rounded-full bg-muted" }),
         command
@@ -1334,7 +1338,7 @@ function DatePickerImpl({
           onInteractOutside: (event) => {
             if (triggerRef.current?.contains(event.target)) 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",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_vaul3.Drawer.Title, { className: "sr-only", children: withTime ? "Selecione a data e o hor\xE1rio" : "Selecione a data" }),
             /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mx-auto my-3 h-1.5 w-12 shrink-0 rounded-full bg-muted" }),
@@ -1459,7 +1463,7 @@ function FilterPopover({
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_vaul4.Drawer.Trigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_vaul4.Drawer.Portal, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_vaul4.Drawer.Overlay, { className: "fixed inset-0 z-50 bg-black/80" }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_vaul4.Drawer.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", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_vaul4.Drawer.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", children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_vaul4.Drawer.Title, { className: "sr-only", children: title ?? label }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "mx-auto my-3 h-1.5 w-12 shrink-0 rounded-full bg-muted" }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "overflow-y-auto p-2", children: content })
@@ -1958,7 +1962,7 @@ function MultiCombobox({
           import_cmdk2.Command.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",
             children: [
               !isServer && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_cmdk2.Command.Empty, { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }),
               options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
@@ -2011,7 +2015,7 @@ function MultiCombobox({
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_vaul5.Drawer.Trigger, { asChild: true, disabled, children: trigger }),
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_vaul5.Drawer.Portal, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_vaul5.Drawer.Overlay, { className: "fixed inset-0 z-50 bg-black/80" }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_vaul5.Drawer.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", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_vaul5.Drawer.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", children: [
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_vaul5.Drawer.Title, { className: "sr-only", children: placeholder }),
         /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mx-auto my-3 h-1.5 w-12 shrink-0 rounded-full bg-muted" }),
         command
@@ -2056,7 +2060,7 @@ function Pagination({
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
-      className: `flex items-center ${showPageSizeSelector ? "justify-between" : "justify-end"} gap-4 ${className ?? ""}`,
+      className: `flex flex-wrap items-center ${showPageSizeSelector ? "justify-between" : "justify-end"} gap-x-4 gap-y-2 ${className ?? ""}`,
       children: [
         showPageSizeSelector && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { htmlFor: "pagination-page-size", className: "text-sm text-muted-foreground", children: "Itens por p\xE1gina" }),