@motor-hero/ui-kit 0.50.0 → 0.51.0

package/package.json

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

package/src/components/combobox.tsx

@@ -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 {
@@ -209,6 +213,7 @@ export function Combobox({
 						// 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}
+						keywords={option.description ? [option.description] : undefined}
 						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 +225,7 @@ export function Combobox({
 							)}
 						/>
 						{option.icon}
-						<span className="truncate">{option.label}</span>
+						<OptionText option={option} />
 					</CommandPrimitive.Item>
 				))}
 				{isServer && !loading && options.length === 0 && (
@@ -274,3 +279,19 @@ export function Combobox({
 		</DrawerPrimitive.Root>
 	);
 }
+
+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,7 @@ 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, OptionText } from "./combobox"
 
 export interface MultiComboboxProps {
   options: ComboboxOption[]
@@ -101,6 +101,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 +155,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}
@@ -195,6 +205,7 @@ export function MultiCombobox({
           <CommandPrimitive.Item
             key={option.value}
             value={isServer ? option.value : option.label}
+            keywords={option.description ? [option.description] : undefined}
             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 +216,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 && (