@motor-hero/ui-kit 0.51.0 → 0.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motor-hero/ui-kit",
-  "version": "0.51.0",
+  "version": "0.52.0",
   "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";
@@ -163,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" />
@@ -173,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">
@@ -194,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"
 					>
@@ -210,10 +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}
-						keywords={option.description ? [option.description] : undefined}
+						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"
@@ -280,6 +284,18 @@ export function Combobox({
 	);
 }
 
+// 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>;

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, OptionText } from "./combobox"
+import {
+  type ComboboxOption,
+  filterByKeywords,
+  OptionText,
+  optionKeywords,
+} from "./combobox"
 
 export interface MultiComboboxProps {
   options: ComboboxOption[]
@@ -182,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">
@@ -204,8 +210,8 @@ export function MultiCombobox({
         {options.map((option) => (
           <CommandPrimitive.Item
             key={option.value}
-            value={isServer ? option.value : option.label}
-            keywords={option.description ? [option.description] : undefined}
+            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"

package/src/components/rating.tsx

@@ -19,9 +19,12 @@ export interface RatingProps {
   "aria-label"?: string
 }
 
+const formatNote = (value: number) =>
+  value.toLocaleString("pt-BR", { maximumFractionDigits: 1 })
+
 function defaultLabel(value: number) {
   return value > 0
-    ? `Avaliação: ${value} de ${MAX_STARS} estrelas`
+    ? `Nota ${formatNote(value)} de ${MAX_STARS}`
     : "Avaliação: sem nota"
 }
 
@@ -43,18 +46,32 @@ export function Rating({
         aria-label={label}
         className={cn("inline-flex items-center gap-0.5", className)}
       >
-        {Array.from({ length: MAX_STARS }, (_, index) => (
-          <Star
-            key={index}
-            aria-hidden
-            className={cn(
-              sizeClasses[size],
-              index < clamped
-                ? "fill-amber-400 text-amber-400"
-                : "text-muted-foreground",
-            )}
-          />
-        ))}
+        {Array.from({ length: MAX_STARS }, (_, index) => {
+          // Média 4,3 pinta 30% da quinta estrela: a fração é a nota, não um arredondamento.
+          const fill = Math.min(1, Math.max(0, clamped - index))
+          return (
+            <span key={index} className="relative inline-flex">
+              <Star
+                aria-hidden
+                className={cn(sizeClasses[size], "text-muted-foreground")}
+              />
+              {fill > 0 && (
+                <span
+                  className="absolute inset-y-0 left-0 overflow-hidden"
+                  style={{ width: `${fill * 100}%` }}
+                >
+                  <Star
+                    aria-hidden
+                    className={cn(
+                      sizeClasses[size],
+                      "max-w-none fill-amber-400 text-amber-400",
+                    )}
+                  />
+                </span>
+              )}
+            </span>
+          )
+        })}
       </div>
     )
   }