@motor-hero/ui-kit 0.17.0 → 0.18.0

package/src/components/row-actions-menu.tsx

@@ -1,6 +1,8 @@
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
 import { MoreVertical } from "lucide-react"
-import type { ReactNode } from "react"
+import { type ReactNode, useState } from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+import { useIsDesktop } from "../hooks/use-is-desktop"
 import { cn } from "../lib/utils"
 import type { RenderLink } from "./types"
 import { defaultRenderLink } from "./types"
@@ -22,8 +24,14 @@ export interface RowActionsMenuProps {
   renderLink?: RenderLink
 }
 
+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"
+
+// Desktop: itens compactos do dropdown. Mobile: alvos de toque maiores.
 const itemClass =
   "flex w-full cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent focus:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+const sheetItemClass =
+  "flex w-full cursor-pointer select-none items-center gap-3 rounded-md px-3 py-3 text-base outline-none transition-colors hover:bg-accent active:bg-accent disabled:pointer-events-none disabled:opacity-50"
 
 export function RowActionsMenu({
   actions,
@@ -32,55 +40,124 @@ export function RowActionsMenu({
   label = "Ações",
   renderLink = defaultRenderLink,
 }: RowActionsMenuProps) {
+  const isDesktop = useIsDesktop()
+  const [open, setOpen] = useState(false)
+
   if (actions.length === 0) return null
 
+  const trigger = (
+    <button
+      type="button"
+      disabled={disabled}
+      aria-label={label}
+      className={triggerClass}
+    >
+      <MoreVertical className="h-4 w-4" />
+    </button>
+  )
+
+  if (isDesktop) {
+    return (
+      <DropdownMenu.Root open={open} onOpenChange={setOpen}>
+        <DropdownMenu.Trigger asChild>{trigger}</DropdownMenu.Trigger>
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content
+            align={align}
+            sideOffset={6}
+            className="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95"
+          >
+            {actions.map((action) => {
+              const cls = cn(
+                itemClass,
+                action.destructive &&
+                  "text-destructive focus:bg-destructive/10",
+              )
+              return action.href ? (
+                <DropdownMenu.Item
+                  key={action.label}
+                  asChild
+                  disabled={action.disabled}
+                >
+                  {renderLink({
+                    href: action.href,
+                    className: cls,
+                    children: (
+                      <>
+                        {action.icon}
+                        {action.label}
+                      </>
+                    ),
+                  })}
+                </DropdownMenu.Item>
+              ) : (
+                <DropdownMenu.Item
+                  key={action.label}
+                  className={cls}
+                  disabled={action.disabled}
+                  onClick={action.onClick}
+                >
+                  {action.icon}
+                  {action.label}
+                </DropdownMenu.Item>
+              )
+            })}
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
+    )
+  }
+
+  // Mobile: action sheet (Drawer)
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger asChild>
-        <button
-          type="button"
-          disabled={disabled}
-          aria-label={label}
-          className="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-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
-        >
-          <MoreVertical className="h-4 w-4" />
-        </button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content
-          align={align}
-          sideOffset={6}
-          className="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95"
-        >
+    <DrawerPrimitive.Root open={open} onOpenChange={setOpen}>
+      <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 flex flex-col rounded-t-2xl border bg-popover p-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] text-popover-foreground outline-none">
+          <DrawerPrimitive.Title className="sr-only">
+            {label}
+          </DrawerPrimitive.Title>
+          <div className="mx-auto my-3 h-1.5 w-12 shrink-0 rounded-full bg-muted" />
           {actions.map((action) => {
-            const cls = cn(itemClass, action.destructive && "text-destructive focus:bg-destructive/10")
+            const cls = cn(
+              sheetItemClass,
+              action.destructive && "text-destructive",
+            )
+            const inner = (
+              <>
+                {action.icon}
+                {action.label}
+              </>
+            )
             return action.href ? (
-              <DropdownMenu.Item key={action.label} asChild disabled={action.disabled}>
+              <span
+                key={action.label}
+                onClick={() => setOpen(false)}
+                onKeyDown={() => setOpen(false)}
+              >
                 {renderLink({
                   href: action.href,
                   className: cls,
-                  children: (
-                    <>
-                      {action.icon}
-                      {action.label}
-                    </>
-                  ),
+                  children: inner,
                 })}
-              </DropdownMenu.Item>
+              </span>
             ) : (
-              <DropdownMenu.Item
+              <button
                 key={action.label}
-                className={cls}
+                type="button"
                 disabled={action.disabled}
-                onClick={action.onClick}
+                className={cls}
+                onClick={() => {
+                  action.onClick?.()
+                  setOpen(false)
+                }}
               >
-                {action.icon}
-                {action.label}
-              </DropdownMenu.Item>
+                {inner}
+              </button>
             )
           })}
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
+        </DrawerPrimitive.Content>
+      </DrawerPrimitive.Portal>
+    </DrawerPrimitive.Root>
   )
 }

package/src/components/user-menu.tsx

@@ -1,6 +1,8 @@
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
 import { LogOut, User } from "lucide-react"
-import type { ReactNode } from "react"
+import { type ReactNode, useState } from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+import { useIsDesktop } from "../hooks/use-is-desktop"
 import { cn } from "../lib/utils"
 import type { RenderLink } from "./types"
 import { defaultRenderLink } from "./types"
@@ -37,6 +39,8 @@ function initials(user?: AppUser): string {
 
 const itemClass =
   "flex w-full cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent focus:bg-accent"
+const sheetItemClass =
+  "flex w-full cursor-pointer select-none items-center gap-3 rounded-md px-3 py-3 text-base outline-none transition-colors hover:bg-accent active:bg-accent"
 
 export function UserMenu({
   user,
@@ -46,71 +50,176 @@ export function UserMenu({
   renderLink = defaultRenderLink,
   align = "end",
 }: UserMenuProps) {
+  const isDesktop = useIsDesktop()
+  const [open, setOpen] = useState(false)
   const label = initials(user)
 
+  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"
+      aria-label="Menu do usuário"
+      data-testid="user-menu"
+    >
+      {user?.avatarUrl ? (
+        <img
+          src={user.avatarUrl}
+          alt={user.name ?? user.email ?? "Avatar"}
+          className="h-full w-full object-cover"
+        />
+      ) : label ? (
+        <span>{label}</span>
+      ) : (
+        <User className="h-4 w-4" />
+      )}
+    </button>
+  )
+
+  const userInfo = (user?.name || user?.email) && (
+    <div className="px-2 py-1.5">
+      {user.name && (
+        <p className="truncate text-sm font-medium">{user.name}</p>
+      )}
+      {user.email && (
+        <p className="truncate text-xs text-muted-foreground">{user.email}</p>
+      )}
+    </div>
+  )
+
+  if (isDesktop) {
+    return (
+      <DropdownMenu.Root open={open} onOpenChange={setOpen}>
+        <DropdownMenu.Trigger asChild>{trigger}</DropdownMenu.Trigger>
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content
+            align={align}
+            sideOffset={6}
+            className="z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95"
+          >
+            {userInfo && (
+              <>
+                {userInfo}
+                <DropdownMenu.Separator className="-mx-1 my-1 h-px bg-border" />
+              </>
+            )}
+
+            {items.map((item) =>
+              item.href ? (
+                <DropdownMenu.Item key={item.label} asChild>
+                  {renderLink({
+                    href: item.href,
+                    className: itemClass,
+                    children: (
+                      <>
+                        {item.icon}
+                        {item.label}
+                      </>
+                    ),
+                  })}
+                </DropdownMenu.Item>
+              ) : (
+                <DropdownMenu.Item
+                  key={item.label}
+                  className={itemClass}
+                  onClick={item.onClick}
+                >
+                  {item.icon}
+                  {item.label}
+                </DropdownMenu.Item>
+              ),
+            )}
+
+            {onLogout && (
+              <>
+                {items.length > 0 && (
+                  <DropdownMenu.Separator className="-mx-1 my-1 h-px bg-border" />
+                )}
+                <DropdownMenu.Item
+                  className={cn(
+                    itemClass,
+                    "text-destructive focus:bg-destructive/10",
+                  )}
+                  onClick={onLogout}
+                >
+                  <LogOut className="h-4 w-4" />
+                  {logoutLabel}
+                </DropdownMenu.Item>
+              </>
+            )}
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
+    )
+  }
+
+  // Mobile: bottom sheet (Drawer)
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger asChild>
-        <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-1 focus-visible:ring-ring"
-          aria-label="Menu do usuário"
-          data-testid="user-menu"
-        >
-          {user?.avatarUrl ? (
-            <img src={user.avatarUrl} alt={user.name ?? user.email ?? "Avatar"} className="h-full w-full object-cover" />
-          ) : label ? (
-            <span>{label}</span>
-          ) : (
-            <User className="h-4 w-4" />
-          )}
-        </button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content
-          align={align}
-          sideOffset={6}
-          className="z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95"
-        >
-          {(user?.name || user?.email) && (
+    <DrawerPrimitive.Root open={open} onOpenChange={setOpen}>
+      <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 flex flex-col rounded-t-2xl border bg-popover p-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] text-popover-foreground outline-none">
+          <DrawerPrimitive.Title className="sr-only">
+            Menu do usuário
+          </DrawerPrimitive.Title>
+          <div className="mx-auto my-3 h-1.5 w-12 shrink-0 rounded-full bg-muted" />
+          {userInfo && (
             <>
-              <div className="px-2 py-1.5">
-                {user.name && <p className="truncate text-sm font-medium">{user.name}</p>}
-                {user.email && <p className="truncate text-xs text-muted-foreground">{user.email}</p>}
-              </div>
-              <DropdownMenu.Separator className="-mx-1 my-1 h-px bg-border" />
+              {userInfo}
+              <div className="-mx-1 my-1 h-px bg-border" />
             </>
           )}
-
           {items.map((item) =>
             item.href ? (
-              <DropdownMenu.Item key={item.label} asChild>
-                {renderLink({ href: item.href, className: itemClass, children: (
-                  <>
-                    {item.icon}
-                    {item.label}
-                  </>
-                ) })}
-              </DropdownMenu.Item>
+              <span
+                key={item.label}
+                onClick={() => setOpen(false)}
+                onKeyDown={() => setOpen(false)}
+              >
+                {renderLink({
+                  href: item.href,
+                  className: sheetItemClass,
+                  children: (
+                    <>
+                      {item.icon}
+                      {item.label}
+                    </>
+                  ),
+                })}
+              </span>
             ) : (
-              <DropdownMenu.Item key={item.label} className={itemClass} onClick={item.onClick}>
+              <button
+                key={item.label}
+                type="button"
+                className={sheetItemClass}
+                onClick={() => {
+                  item.onClick?.()
+                  setOpen(false)
+                }}
+              >
                 {item.icon}
                 {item.label}
-              </DropdownMenu.Item>
+              </button>
             ),
           )}
-
           {onLogout && (
             <>
-              {items.length > 0 && <DropdownMenu.Separator className="-mx-1 my-1 h-px bg-border" />}
-              <DropdownMenu.Item className={cn(itemClass, "text-destructive focus:bg-destructive/10")} onClick={onLogout}>
+              {items.length > 0 && <div className="-mx-1 my-1 h-px bg-border" />}
+              <button
+                type="button"
+                className={cn(sheetItemClass, "text-destructive")}
+                onClick={() => {
+                  onLogout()
+                  setOpen(false)
+                }}
+              >
                 <LogOut className="h-4 w-4" />
                 {logoutLabel}
-              </DropdownMenu.Item>
+              </button>
             </>
           )}
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
+        </DrawerPrimitive.Content>
+      </DrawerPrimitive.Portal>
+    </DrawerPrimitive.Root>
   )
 }

package/src/hooks/use-is-desktop.ts

@@ -0,0 +1,26 @@
+import * as React from "react"
+
+const DESKTOP_QUERY = "(min-width: 640px)"
+
+/**
+ * Retorna `true` no desktop (>= 640px, breakpoint `sm`) e `false` no mobile.
+ * Usado para alternar Popover/DropdownMenu (desktop) por Drawer/bottom sheet
+ * (mobile) em componentes responsivos como Combobox e os menus de ação.
+ */
+export function useIsDesktop(): boolean {
+  const [isDesktop, setIsDesktop] = React.useState(() =>
+    typeof window !== "undefined"
+      ? window.matchMedia(DESKTOP_QUERY).matches
+      : true,
+  )
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(DESKTOP_QUERY)
+    const onChange = () => setIsDesktop(mql.matches)
+    onChange()
+    mql.addEventListener("change", onChange)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return isDesktop
+}

package/src/index.ts

@@ -45,4 +45,5 @@ export { extractApiError } from "./lib/api-error"
 
 // Hooks
 export { useDisclosure } from "./hooks/use-disclosure"
+export { useIsDesktop } from "./hooks/use-is-desktop"
 export { useCustomToast, toast } from "./hooks/use-toast"