@motor-hero/ui-kit 0.29.0 → 0.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motor-hero/ui-kit",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "Componentes React reutilizáveis para o ecossistema MotorHero — shadcn/ui + Tailwind CSS v4",
   "author": "MotorHero",
   "license": "UNLICENSED",

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,
       )}
     >