@motor-hero/ui-kit 0.24.0 → 0.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motor-hero/ui-kit",
-  "version": "0.24.0",
+  "version": "0.25.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,6 +1,6 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover"
 import { Command as CommandPrimitive } from "cmdk"
-import { Check, ChevronsUpDown, Loader2, Search } from "lucide-react"
+import { Check, ChevronsUpDown, Loader2, Plus, Search } from "lucide-react"
 import * as React from "react"
 import { Drawer as DrawerPrimitive } from "vaul"
 import { useInfiniteScrollSentinel } from "../hooks/use-infinite-scroll-sentinel"
@@ -40,6 +40,12 @@ export interface ComboboxProps {
   /** Modo servidor: rótulo do valor já selecionado que pode não estar na
    *  página carregada (ex.: formulário de edição). */
   selectedOption?: ComboboxOption
+  /** Permite confirmar o texto digitado como valor, mesmo fora da lista
+   *  (ex.: unidade de medida com texto livre). Mostra uma linha "criar" no
+   *  topo e exibe o valor personalizado no gatilho. */
+  creatable?: boolean
+  /** Rótulo da linha de criação. Padrão: `Usar "<texto>"`. */
+  formatCreateLabel?: (search: string) => string
 }
 
 /**
@@ -73,14 +79,41 @@ export function Combobox({
   loading,
   hasMore,
   selectedOption,
+  creatable,
+  formatCreateLabel,
 }: ComboboxProps) {
   const [open, setOpen] = React.useState(false)
+  const [search, setSearch] = React.useState("")
   const isDesktop = useIsDesktop()
   const isServer = onSearchChange !== undefined
   const selected =
     selectedOption?.value === value
       ? selectedOption
-      : options.find((option) => option.value === value)
+      : (options.find((option) => option.value === value) ??
+        (creatable && value ? { value, label: value } : undefined))
+
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next)
+    if (!next) setSearch("")
+  }
+
+  const handleSelect = (next: string) => {
+    onChange(next)
+    handleOpenChange(false)
+  }
+
+  const handleSearchChange = (next: string) => {
+    setSearch(next)
+    onSearchChange?.(next)
+  }
+
+  const trimmedSearch = search.trim()
+  const showCreate =
+    !!creatable &&
+    trimmedSearch.length > 0 &&
+    !options.some(
+      (option) => option.value.toLowerCase() === trimmedSearch.toLowerCase(),
+    )
   const { listRef, sentinelRef } = useInfiniteScrollSentinel({
     enabled: isServer && !!hasMore,
     loading,
@@ -117,7 +150,9 @@ export function Combobox({
         <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
         <CommandPrimitive.Input
           placeholder={searchPlaceholder}
-          onValueChange={isServer ? onSearchChange : undefined}
+          onValueChange={
+            isServer || creatable ? handleSearchChange : undefined
+          }
           className="flex h-11 w-full bg-transparent py-2 text-base outline-none placeholder:text-muted-foreground sm:h-9 sm:text-sm"
         />
       </div>
@@ -125,11 +160,26 @@ export function Combobox({
         ref={listRef}
         className="max-h-[50vh] overflow-y-auto overflow-x-hidden p-1 sm:max-h-60"
       >
-        {!isServer && (
+        {!isServer && !showCreate && (
           <CommandPrimitive.Empty className="py-6 text-center text-sm text-muted-foreground">
             {emptyMessage}
           </CommandPrimitive.Empty>
         )}
+        {showCreate && (
+          <CommandPrimitive.Item
+            // cmdk pontua pelo `value`; igualar à busca mantém a linha sempre no topo.
+            value={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"
+          >
+            <Plus className="h-4 w-4 shrink-0" />
+            <span className="truncate">
+              {(formatCreateLabel ?? ((text) => `Usar "${text}"`))(
+                trimmedSearch,
+              )}
+            </span>
+          </CommandPrimitive.Item>
+        )}
         {options.map((option) => (
           <CommandPrimitive.Item
             key={option.value}
@@ -137,10 +187,7 @@ export function Combobox({
             // o servidor já filtrou, então usamos o id (único, evita colisão de labels).
             value={isServer ? option.value : option.label}
             disabled={option.disabled}
-            onSelect={() => {
-              onChange(option.value)
-              setOpen(false)
-            }}
+            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"
           >
             <Check
@@ -171,7 +218,7 @@ export function Combobox({
 
   if (isDesktop) {
     return (
-      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+      <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>
         <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
         <PopoverPrimitive.Portal>
           <PopoverPrimitive.Content
@@ -188,7 +235,7 @@ export function Combobox({
   }
 
   return (
-    <DrawerPrimitive.Root open={open} onOpenChange={setOpen}>
+    <DrawerPrimitive.Root open={open} onOpenChange={handleOpenChange}>
       <DrawerPrimitive.Trigger asChild>{trigger}</DrawerPrimitive.Trigger>
       <DrawerPrimitive.Portal>
         <DrawerPrimitive.Overlay className="fixed inset-0 z-50 bg-black/80" />