@motor-hero/ui-kit 0.25.1 → 0.27.0

package/package.json

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

@@ -0,0 +1,126 @@
+import * as Dialog from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+import * as React from "react"
+import type { ReactNode } from "react"
+
+import { useIsDesktop } from "../hooks/use-is-desktop"
+import { cn } from "../lib/utils"
+
+const sizeClasses = {
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-md",
+  lg: "sm:max-w-lg",
+  xl: "sm:max-w-xl",
+  "2xl": "sm:max-w-2xl",
+} as const
+
+export type BaseDialogSize = keyof typeof sizeClasses
+
+export interface BaseDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: string
+  description?: ReactNode
+  children: ReactNode
+  footer?: ReactNode
+  size?: BaseDialogSize
+  className?: string
+  /**
+   * Radix `modal` for the underlying Dialog. Defaults to `!isDesktop`: on
+   * desktop the dialog is non-modal so a Combobox/Select popover (portaled
+   * outside the dialog) can receive focus and keystrokes; on mobile it stays
+   * modal so the bottom-sheet behaves. Pass explicitly to override.
+   */
+  modal?: boolean
+  /**
+   * Advanced: wraps the dialog's inner content (header + body + footer) inside
+   * Content. Used by FormDialog to inject a <form>. Defaults to identity.
+   */
+  contentWrapper?: (content: ReactNode) => ReactNode
+}
+
+/**
+ * Standardized, responsive dialog shell:
+ * - mobile: bottom sheet (full width, up to 92vh tall)
+ * - desktop: centered dialog (up to 90vh tall)
+ * Header and footer stay fixed; only the body scrolls.
+ *
+ * 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.
+ */
+export function BaseDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  size = "lg",
+  className,
+  modal,
+  contentWrapper = (content) => content,
+}: BaseDialogProps) {
+  const isDesktop = useIsDesktop()
+  React.useEffect(() => {
+    if (open) return
+    const id = window.setTimeout(() => {
+      if (document.body.style.pointerEvents === "none") {
+        document.body.style.pointerEvents = ""
+      }
+    }, 0)
+    return () => window.clearTimeout(id)
+  }, [open])
+
+  const body = (
+    <>
+      <div className="flex shrink-0 items-start justify-between gap-4 border-b px-6 py-3">
+        <div className="min-w-0 space-y-1">
+          <Dialog.Title className="text-lg font-semibold leading-none tracking-tight">
+            {title}
+          </Dialog.Title>
+          {description && (
+            <Dialog.Description className="text-sm text-muted-foreground">
+              {description}
+            </Dialog.Description>
+          )}
+        </div>
+        <Dialog.Close
+          className="-mr-1 shrink-0 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          aria-label="Fechar"
+        >
+          <X className="h-5 w-5" />
+        </Dialog.Close>
+      </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">
+          {footer}
+        </div>
+      )}
+    </>
+  )
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange} modal={modal ?? !isDesktop}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <Dialog.Content
+          onCloseAutoFocus={() => {
+            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",
+            "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,
+          )}
+        >
+          {contentWrapper(body)}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}

package/src/components/form-dialog.tsx

@@ -1,9 +1,7 @@
-import * as Dialog from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
 import * as React from "react"
 import type { ReactNode } from "react"
 
-import { cn } from "../lib/utils"
+import { BaseDialog, type BaseDialogProps, type BaseDialogSize } from "./base-dialog"
 
 interface FormDialogLayoutProps {
   title: string
@@ -52,118 +50,32 @@ export function FormDialogLayout({
   )
 }
 
-const sizeClasses = {
-  sm: "sm:max-w-sm",
-  md: "sm:max-w-md",
-  lg: "sm:max-w-lg",
-  xl: "sm:max-w-xl",
-  "2xl": "sm:max-w-2xl",
-} as const
+export type FormDialogSize = BaseDialogSize
 
-export type FormDialogSize = keyof typeof sizeClasses
-
-interface FormDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  title: string
-  description?: ReactNode
-  children: ReactNode
-  footer?: ReactNode
+export interface FormDialogProps extends Omit<BaseDialogProps, "contentWrapper"> {
   /** When provided, the dialog renders a <form> wrapping body + footer. */
   onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void
-  size?: FormDialogSize
-  className?: string
 }
 
 /**
- * Standardized, responsive modal:
- * - mobile: bottom sheet (full width, up to 92vh tall)
- * - desktop: centered dialog (up to 90vh tall)
- * Header and footer stay fixed; only the body scrolls.
- *
- * 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.
+ * Form-oriented specialization of {@link BaseDialog}: when `onSubmit` is
+ * provided, the body and footer are wrapped in a <form> (so footer submit
+ * buttons and Enter trigger submission). Without `onSubmit` it behaves like a
+ * plain BaseDialog.
  */
-export function FormDialog({
-  open,
-  onOpenChange,
-  title,
-  description,
-  children,
-  footer,
-  onSubmit,
-  size = "lg",
-  className,
-}: FormDialogProps) {
-  React.useEffect(() => {
-    if (open) return
-    const id = window.setTimeout(() => {
-      if (document.body.style.pointerEvents === "none") {
-        document.body.style.pointerEvents = ""
-      }
-    }, 0)
-    return () => window.clearTimeout(id)
-  }, [open])
-
-  const body = (
-    <>
-      <div className="flex shrink-0 items-start justify-between gap-4 border-b px-6 py-3">
-        <div className="min-w-0 space-y-1">
-          <Dialog.Title className="text-lg font-semibold leading-none tracking-tight">
-            {title}
-          </Dialog.Title>
-          {description && (
-            <Dialog.Description className="text-sm text-muted-foreground">
-              {description}
-            </Dialog.Description>
-          )}
-        </div>
-        <Dialog.Close
-          className="-mr-1 shrink-0 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          aria-label="Fechar"
-        >
-          <X className="h-5 w-5" />
-        </Dialog.Close>
-      </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">
-          {footer}
-        </div>
-      )}
-    </>
-  )
-
+export function FormDialog({ onSubmit, ...rest }: FormDialogProps) {
   return (
-    <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
-        <Dialog.Content
-          onCloseAutoFocus={() => {
-            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",
-            "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,
-          )}
-        >
-          {onSubmit ? (
-            <form
-              onSubmit={onSubmit}
-              className="flex min-h-0 flex-1 flex-col"
-            >
-              {body}
-            </form>
-          ) : (
-            body
-          )}
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
+    <BaseDialog
+      {...rest}
+      contentWrapper={
+        onSubmit
+          ? (content) => (
+              <form onSubmit={onSubmit} className="flex min-h-0 flex-1 flex-col">
+                {content}
+              </form>
+            )
+          : undefined
+      }
+    />
   )
 }

package/src/index.ts

@@ -19,8 +19,10 @@ export { StatusBadge } from "./components/status-badge"
 export type { StatusBadgeVariant } from "./components/status-badge"
 export { ProgressBar } from "./components/progress-bar"
 export { FormField } from "./components/form-field"
+export { BaseDialog } from "./components/base-dialog"
+export type { BaseDialogProps, BaseDialogSize } from "./components/base-dialog"
 export { FormDialogLayout, FormDialog } from "./components/form-dialog"
-export type { FormDialogSize } from "./components/form-dialog"
+export type { FormDialogProps, FormDialogSize } from "./components/form-dialog"
 export { AuthCard } from "./components/auth-card"
 export { Pagination } from "./components/pagination"
 export { TableSkeleton } from "./components/table-skeleton"