@motor-hero/ui-kit 0.29.0 → 0.31.0

package/package.json

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

@@ -37,6 +37,11 @@ export interface BaseDialogProps {
    * modal so the bottom-sheet behaves. Pass explicitly to override.
    */
   modal?: boolean
+  /**
+   * Applies backdrop-blur to the overlay behind the dialog.
+   * Defaults to true; pass false to keep the plain scrim.
+   */
+  blurBackdrop?: boolean
   /**
    * Advanced: wraps the dialog's inner content (header + body + footer) inside
    * Content. Used by FormDialog to inject a <form>. Defaults to identity.
@@ -64,6 +69,7 @@ export function BaseDialog({
   size = "lg",
   className,
   modal,
+  blurBackdrop = true,
   contentWrapper = (content) => content,
 }: BaseDialogProps) {
   const isDesktop = useIsDesktop()
@@ -106,10 +112,29 @@ export function BaseDialog({
     </>
   )
 
+  const isModal = modal ?? !isDesktop
+
   return (
-    <Dialog.Root open={open} onOpenChange={onOpenChange} modal={modal ?? !isDesktop}>
+    <Dialog.Root open={open} onOpenChange={onOpenChange} modal={isModal}>
       <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" />
+        {isModal ? (
+          <Dialog.Overlay
+            className={cn(
+              "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",
+              blurBackdrop && "backdrop-blur-sm",
+            )}
+          />
+        ) : (
+          // Radix skips Dialog.Overlay when non-modal, so the backdrop is
+          // rendered by hand; pointer-events-none keeps outside interactions
+          // working (the reason the dialog is non-modal on desktop).
+          blurBackdrop && (
+            <div
+              aria-hidden
+              className="pointer-events-none fixed inset-0 z-50 bg-black/80 backdrop-blur-sm animate-in fade-in-0"
+            />
+          )
+        )}
         <Dialog.Content
           onCloseAutoFocus={() => {
             document.body.style.pointerEvents = ""

package/src/components/color-picker.tsx

@@ -1,5 +1,5 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover"
-import { ChevronsUpDown } from "lucide-react"
+import { ChevronsUpDown, X } from "lucide-react"
 import * as React from "react"
 import { HexColorInput, HexColorPicker } from "react-colorful"
 import { cn } from "../lib/utils"
@@ -10,6 +10,11 @@ export interface ColorPickerProps {
   onChange: (value: string) => void
   /** Trigger text shown when no color is set. */
   placeholder?: string
+  /**
+   * Show a clear (×) affordance when a color is set — emits `onChange("")`
+   * so the field can fall back to its default. On by default.
+   */
+  clearable?: boolean
   disabled?: boolean
   id?: string
   className?: string
@@ -29,6 +34,7 @@ export function ColorPicker({
   value,
   onChange,
   placeholder = "Selecionar cor",
+  clearable = true,
   disabled,
   id,
   className,
@@ -37,6 +43,14 @@ export function ColorPicker({
 }: ColorPickerProps) {
   const [open, setOpen] = React.useState(false)
   const color = value || ""
+  const showClear = clearable && !!color && !disabled
+
+  const clear = (event: React.SyntheticEvent) => {
+    // Inside the popover trigger — don't let the click also toggle it open.
+    event.stopPropagation()
+    event.preventDefault()
+    onChange("")
+  }
 
   return (
     <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
@@ -48,7 +62,7 @@ export function ColorPicker({
           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",
+            "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 hover:border-ring/60 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,
           )}
         >
@@ -72,7 +86,25 @@ export function ColorPicker({
               {color || placeholder}
             </span>
           </span>
-          <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+          <span className="flex shrink-0 items-center gap-1">
+            {showClear && (
+              // Not a <button> — nesting one inside the trigger button is
+              // invalid HTML.
+              <span
+                role="button"
+                tabIndex={0}
+                aria-label="Limpar cor"
+                onClick={clear}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter" || event.key === " ") clear(event)
+                }}
+                className="rounded p-0.5 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <X className="h-3.5 w-3.5" />
+              </span>
+            )}
+            <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+          </span>
         </button>
       </PopoverPrimitive.Trigger>
       <PopoverPrimitive.Portal>

package/src/components/combobox.tsx

@@ -130,7 +130,7 @@ export function Combobox({
       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",
+        "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 hover:border-ring/60 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,
       )}
     >

package/src/components/multi-combobox.tsx

@@ -116,7 +116,7 @@ export function MultiCombobox({
         }
       }}
       className={cn(
-        "flex min-h-9 w-full cursor-pointer flex-wrap items-center gap-1 rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive",
+        "flex min-h-9 w-full cursor-pointer flex-wrap items-center gap-1 rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm transition-colors hover:border-ring/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive",
         className,
       )}
     >