@motor-hero/ui-kit 0.50.0 → 0.51.1

package/package.json

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

package/src/components/combobox.tsx

@@ -1,5 +1,5 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { Command as CommandPrimitive } from "cmdk";
+import { Command as CommandPrimitive, defaultFilter } from "cmdk";
 import { Check, ChevronsUpDown, Loader2, Plus, Search } from "lucide-react";
 import * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
@@ -14,6 +14,10 @@ export interface ComboboxOption {
 	/** Optional leading decoration rendered before the label (icon, colored
 	 * dot) — purely visual, doesn't affect filtering/matching. */
 	icon?: React.ReactNode;
+	/** Linha secundária abaixo do rótulo na lista (ex.: e-mail de uma pessoa,
+	 * para separar homônimos). No gatilho vira o `title`. Entra na busca do
+	 * modo cliente. */
+	description?: string;
 }
 
 export interface ComboboxProps {
@@ -159,7 +163,10 @@ export function Combobox({
 				className,
 			)}
 		>
-			<span className={cn("truncate", !selected && "text-muted-foreground")}>
+			<span
+				title={selected?.description}
+				className={cn("truncate", !selected && "text-muted-foreground")}
+			>
 				{selected ? selected.label : placeholder}
 			</span>
 			<ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
@@ -169,6 +176,7 @@ export function Combobox({
 	const command = (
 		<CommandPrimitive
 			shouldFilter={!isServer}
+			filter={filterByKeywords}
 			className="flex h-full w-full flex-col overflow-hidden"
 		>
 			<div className="flex items-center border-b px-3">
@@ -190,8 +198,10 @@ export function Combobox({
 				)}
 				{showCreate && (
 					<CommandPrimitive.Item
-						// cmdk pontua pelo `value`; igualar à busca mantém a linha sempre no topo.
+						// A busca como `value`, não uma chave fixa: o cmdk só relê as
+						// keywords quando o `value` muda. Keyword igual à busca = sempre no topo.
 						value={trimmedSearch}
+						keywords={[trimmedSearch]}
 						onSelect={() => handleSelect(trimmedSearch)}
 						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 sm:py-1.5"
 					>
@@ -206,9 +216,8 @@ export function Combobox({
 				{options.map((option) => (
 					<CommandPrimitive.Item
 						key={option.value}
-						// cliente: cmdk filtra pelo `value`, então usamos o label; servidor:
-						// o servidor já filtrou, então usamos o id (único, evita colisão de labels).
-						value={isServer ? option.value : option.label}
+						value={option.value}
+						keywords={optionKeywords(option)}
 						disabled={option.disabled}
 						onSelect={() => handleSelect(option.value)}
 						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"
@@ -220,7 +229,7 @@ export function Combobox({
 							)}
 						/>
 						{option.icon}
-						<span className="truncate">{option.label}</span>
+						<OptionText option={option} />
 					</CommandPrimitive.Item>
 				))}
 				{isServer && !loading && options.length === 0 && (
@@ -274,3 +283,31 @@ export function Combobox({
 		</DrawerPrimitive.Root>
 	);
 }
+
+// O `value` do item é o id, único mesmo entre homônimos — rótulo igual como
+// `value` fazia o cmdk tratar duas opções como uma (hover, teclado, seleção).
+// A busca pontua só pelas keywords (rótulo + descrição), nunca pelo id.
+export const filterByKeywords = (
+	_value: string,
+	search: string,
+	keywords: string[] = [],
+) => defaultFilter(keywords.join(" "), search);
+
+export const optionKeywords = (option: ComboboxOption) =>
+	option.description ? [option.label, option.description] : [option.label];
+
+export function OptionText({ option }: { option: ComboboxOption }) {
+	if (!option.description)
+		return <span className="truncate">{option.label}</span>;
+	return (
+		<span className="flex min-w-0 flex-col">
+			<span className="truncate">{option.label}</span>
+			<span
+				title={option.description}
+				className="truncate text-xs text-muted-foreground"
+			>
+				{option.description}
+			</span>
+		</span>
+	);
+}

package/src/components/multi-combobox.tsx

@@ -6,7 +6,12 @@ import { Drawer as DrawerPrimitive } from "vaul"
 import { useInfiniteScrollSentinel } from "../hooks/use-infinite-scroll-sentinel"
 import { useIsDesktop } from "../hooks/use-is-desktop"
 import { cn } from "../lib/utils"
-import type { ComboboxOption } from "./combobox"
+import {
+  type ComboboxOption,
+  filterByKeywords,
+  OptionText,
+  optionKeywords,
+} from "./combobox"
 
 export interface MultiComboboxProps {
   options: ComboboxOption[]
@@ -101,6 +106,15 @@ export function MultiCombobox({
     .map((v) => byValue.get(v) ?? labelCache.current.get(v))
     .filter((option): option is ComboboxOption => option !== undefined)
 
+  // Chips homônimos não se distinguem só pelo rótulo: esses ganham a descrição.
+  const labelCounts = new Map<string, number>()
+  for (const option of selected)
+    labelCounts.set(option.label, (labelCounts.get(option.label) ?? 0) + 1)
+  const chipLabel = (option: ComboboxOption) =>
+    option.description && (labelCounts.get(option.label) ?? 0) > 1
+      ? `${option.label} · ${option.description}`
+      : option.label
+
   const { listRef, sentinelRef } = useInfiniteScrollSentinel({
     enabled: isServer && !!hasMore,
     loading,
@@ -146,9 +160,10 @@ export function MultiCombobox({
         selected.map((option) => (
           <span
             key={option.value}
+            title={option.description}
             className="inline-flex items-center gap-1 rounded bg-secondary px-1.5 py-0.5 text-xs text-secondary-foreground"
           >
-            {option.label}
+            {chipLabel(option)}
             <button
               type="button"
               tabIndex={-1}
@@ -172,6 +187,7 @@ export function MultiCombobox({
   const command = (
     <CommandPrimitive
       shouldFilter={!isServer}
+      filter={filterByKeywords}
       className="flex h-full w-full flex-col overflow-hidden"
     >
       <div className="flex items-center border-b px-3">
@@ -194,7 +210,8 @@ export function MultiCombobox({
         {options.map((option) => (
           <CommandPrimitive.Item
             key={option.value}
-            value={isServer ? option.value : option.label}
+            value={option.value}
+            keywords={optionKeywords(option)}
             disabled={option.disabled}
             onSelect={() => toggleValue(option.value)}
             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"
@@ -205,7 +222,7 @@ export function MultiCombobox({
                 value.includes(option.value) ? "opacity-100" : "opacity-0",
               )}
             />
-            <span className="truncate">{option.label}</span>
+            <OptionText option={option} />
           </CommandPrimitive.Item>
         ))}
         {isServer && !loading && options.length === 0 && (