@motor-hero/ui-kit 0.16.1 → 0.18.0

package/src/components/combobox.tsx

@@ -2,6 +2,8 @@ import * as PopoverPrimitive from "@radix-ui/react-popover"
 import { Command as CommandPrimitive } from "cmdk"
 import { Check, ChevronsUpDown, Search } from "lucide-react"
 import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+import { useIsDesktop } from "../hooks/use-is-desktop"
 import { cn } from "../lib/utils"
 
 export interface ComboboxOption {
@@ -13,9 +15,12 @@ export interface ComboboxOption {
 export interface ComboboxProps {
   options: ComboboxOption[]
   value?: string
-  onChange: (value: string) => void  
-  placeholder?: string  
-  searchPlaceholder?: string  
+  onChange: (value: string) => void
+  /** Texto do gatilho quando nada está selecionado */
+  placeholder?: string
+  /** Placeholder do campo de busca */
+  searchPlaceholder?: string
+  /** Mensagem quando a busca não retorna nada */
   emptyMessage?: string
   disabled?: boolean
   id?: string
@@ -24,6 +29,16 @@ export interface ComboboxProps {
   "aria-describedby"?: string
 }
 
+/**
+ * Select com busca (combobox) acessível e responsivo.
+ *
+ * - Desktop: Popover (modal) + cmdk — o dropdown acompanha a largura do gatilho.
+ * - Mobile: Drawer (bottom sheet) + cmdk — evita os problemas de foco/clique de
+ *   Popover dentro de modal no touch, então a busca funciona no celular.
+ *
+ * Aceita `aria-invalid`/`aria-describedby` (encaminhados pelo FormField em
+ * estado de erro) e fica com a borda vermelha quando inválido.
+ */
 export function Combobox({
   options,
   value,
@@ -38,75 +53,98 @@ export function Combobox({
   "aria-describedby": ariaDescribedby,
 }: ComboboxProps) {
   const [open, setOpen] = React.useState(false)
+  const isDesktop = useIsDesktop()
   const selected = options.find((option) => option.value === value)
 
-  return (
-    <PopoverPrimitive.Root open={open} onOpenChange={setOpen} modal>
-      <PopoverPrimitive.Trigger asChild>
-        <button
-          type="button"
-          id={id}
-          role="combobox"
-          aria-expanded={open}
-          aria-invalid={ariaInvalid}
-          aria-describedby={ariaDescribedby}
-          disabled={disabled}
-          className={cn(
-            "flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive",
-            className,
-          )}
-        >
-          <span
-            className={cn("truncate", !selected && "text-muted-foreground")}
+  const trigger = (
+    <button
+      type="button"
+      id={id}
+      role="combobox"
+      aria-expanded={open}
+      aria-invalid={ariaInvalid}
+      aria-describedby={ariaDescribedby}
+      disabled={disabled}
+      className={cn(
+        "flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive",
+        className,
+      )}
+    >
+      <span className={cn("truncate", !selected && "text-muted-foreground")}>
+        {selected ? selected.label : placeholder}
+      </span>
+      <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+    </button>
+  )
+
+  const command = (
+    <CommandPrimitive className="flex h-full w-full flex-col overflow-hidden">
+      <div className="flex items-center border-b px-3">
+        <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+        <CommandPrimitive.Input
+          placeholder={searchPlaceholder}
+          className="flex h-11 w-full bg-transparent py-2 text-base outline-none placeholder:text-muted-foreground sm:h-9 sm:text-sm"
+        />
+      </div>
+      <CommandPrimitive.List className="max-h-[50vh] overflow-y-auto overflow-x-hidden p-1 sm:max-h-60">
+        <CommandPrimitive.Empty className="py-6 text-center text-sm text-muted-foreground">
+          {emptyMessage}
+        </CommandPrimitive.Empty>
+        {options.map((option) => (
+          <CommandPrimitive.Item
+            key={option.value}
+            value={option.label}
+            disabled={option.disabled}
+            onSelect={() => {
+              onChange(option.value)
+              setOpen(false)
+            }}
+            className="relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-2.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 sm:py-1.5"
+          >
+            <Check
+              className={cn(
+                "h-4 w-4 shrink-0",
+                value === option.value ? "opacity-100" : "opacity-0",
+              )}
+            />
+            <span className="truncate">{option.label}</span>
+          </CommandPrimitive.Item>
+        ))}
+      </CommandPrimitive.List>
+    </CommandPrimitive>
+  )
+
+  if (isDesktop) {
+    return (
+      <PopoverPrimitive.Root open={open} onOpenChange={setOpen} modal>
+        <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
+        <PopoverPrimitive.Portal>
+          <PopoverPrimitive.Content
+            align="start"
+            sideOffset={4}
+            className="z-50 overflow-hidden rounded-md border bg-popover p-0 text-popover-foreground shadow-md"
+            style={{ width: "var(--radix-popover-trigger-width)" }}
           >
-            {selected ? selected.label : placeholder}
-          </span>
-          <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
-        </button>
-      </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Content
-          align="start"
-          sideOffset={4}
-          className="z-50 overflow-hidden rounded-md border bg-popover p-0 text-popover-foreground shadow-md"
-          style={{ width: "var(--radix-popover-trigger-width)" }}
-        >
-          <CommandPrimitive className="flex h-full w-full flex-col overflow-hidden">
-            <div className="flex items-center border-b px-3">
-              <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-              <CommandPrimitive.Input
-                placeholder={searchPlaceholder}
-                className="flex h-9 w-full bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground"
-              />
-            </div>
-            <CommandPrimitive.List className="max-h-60 overflow-y-auto overflow-x-hidden p-1">
-              <CommandPrimitive.Empty className="py-6 text-center text-sm text-muted-foreground">
-                {emptyMessage}
-              </CommandPrimitive.Empty>
-              {options.map((option) => (
-                <CommandPrimitive.Item
-                  key={option.value}
-                  value={option.label}
-                  disabled={option.disabled}
-                  onSelect={() => {
-                    onChange(option.value)
-                    setOpen(false)
-                  }}
-                  className="relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
-                >
-                  <Check
-                    className={cn(
-                      "h-4 w-4 shrink-0",
-                      value === option.value ? "opacity-100" : "opacity-0",
-                    )}
-                  />
-                  <span className="truncate">{option.label}</span>
-                </CommandPrimitive.Item>
-              ))}
-            </CommandPrimitive.List>
-          </CommandPrimitive>
-        </PopoverPrimitive.Content>
-      </PopoverPrimitive.Portal>
-    </PopoverPrimitive.Root>
+            {command}
+          </PopoverPrimitive.Content>
+        </PopoverPrimitive.Portal>
+      </PopoverPrimitive.Root>
+    )
+  }
+
+  return (
+    <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 mt-24 flex max-h-[85vh] flex-col rounded-t-2xl border bg-popover text-popover-foreground outline-none">
+          <DrawerPrimitive.Title className="sr-only">
+            {placeholder}
+          </DrawerPrimitive.Title>
+          <div className="mx-auto my-3 h-1.5 w-12 shrink-0 rounded-full bg-muted" />
+          {command}
+        </DrawerPrimitive.Content>
+      </DrawerPrimitive.Portal>
+    </DrawerPrimitive.Root>
   )
 }

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"