@motor-hero/ui-kit 0.24.0 → 0.25.1

package/dist/components/combobox.d.ts

@@ -31,6 +31,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;
 }
 /**
  * Select com busca (combobox) acessível e responsivo.
@@ -46,5 +52,5 @@ export interface ComboboxProps {
  * Aceita `aria-invalid`/`aria-describedby` (encaminhados pelo FormField em
  * estado de erro) e fica com a borda vermelha quando inválido.
  */
-export declare function Combobox({ options, value, onChange, placeholder, searchPlaceholder, emptyMessage, disabled, id, className, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, onSearchChange, onLoadMore, loading, hasMore, selectedOption, }: ComboboxProps): React.JSX.Element;
+export declare function Combobox({ options, value, onChange, placeholder, searchPlaceholder, emptyMessage, disabled, id, className, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, onSearchChange, onLoadMore, loading, hasMore, selectedOption, creatable, formatCreateLabel, }: ComboboxProps): React.JSX.Element;
 //# sourceMappingURL=combobox.d.ts.map

package/dist/components/combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;qEACiE;IACjE,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;wDACoD;IACpD,cAAc,CAAC,EAAE,cAAc,CAAA;CAChC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAA4B,EAC5B,iBAA+B,EAC/B,YAA6C,EAC7C,QAAQ,EACR,EAAE,EACF,SAAS,EACT,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,cAAc,EACd,UAAU,EACV,OAAO,EACP,OAAO,EACP,cAAc,GACf,EAAE,aAAa,qBAiIf"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oCAAoC;IACpC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;qEACiE;IACjE,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;wDACoD;IACpD,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B;;yDAEqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAA;CAC/C;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAA4B,EAC5B,iBAA+B,EAC/B,YAA6C,EAC7C,QAAQ,EACR,EAAE,EACF,SAAS,EACT,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,cAAc,EACd,UAAU,EACV,OAAO,EACP,OAAO,EACP,cAAc,EACd,SAAS,EACT,iBAAiB,GAClB,EAAE,aAAa,qBAwKf"}

package/dist/index.cjs

@@ -762,12 +762,31 @@ function Combobox({
   onLoadMore,
   loading,
   hasMore,
-  selectedOption
+  selectedOption,
+  creatable,
+  formatCreateLabel
 }) {
   const [open, setOpen] = React6.useState(false);
+  const [search, setSearch] = React6.useState("");
   const isDesktop = useIsDesktop();
   const isServer = onSearchChange !== void 0;
-  const selected = selectedOption?.value === value ? selectedOption : options.find((option) => option.value === value);
+  const selected = selectedOption?.value === value ? selectedOption : options.find((option) => option.value === value) ?? (creatable && value ? { value, label: value } : void 0);
+  const handleOpenChange = (next) => {
+    setOpen(next);
+    if (!next) setSearch("");
+  };
+  const handleSelect = (next) => {
+    onChange(next);
+    handleOpenChange(false);
+  };
+  const handleSearchChange = (next) => {
+    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,
@@ -805,7 +824,7 @@ function Combobox({
             import_cmdk.Command.Input,
             {
               placeholder: searchPlaceholder,
-              onValueChange: isServer ? onSearchChange : void 0,
+              onValueChange: isServer || creatable ? handleSearchChange : void 0,
               className: "flex h-11 w-full bg-transparent py-2 text-base outline-none placeholder:text-muted-foreground sm:h-9 sm:text-sm"
             }
           )
@@ -816,16 +835,27 @@ function Combobox({
             ref: listRef,
             className: "max-h-[50vh] overflow-y-auto overflow-x-hidden p-1 sm:max-h-60",
             children: [
-              !isServer && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_cmdk.Command.Empty, { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }),
+              !isServer && !showCreate && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_cmdk.Command.Empty, { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }),
+              showCreate && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                import_cmdk.Command.Item,
+                {
+                  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",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.Plus, { className: "h-4 w-4 shrink-0" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "truncate", children: (formatCreateLabel ?? ((text) => `Usar "${text}"`))(
+                      trimmedSearch
+                    ) })
+                  ]
+                }
+              ),
               options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                 import_cmdk.Command.Item,
                 {
                   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",
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -852,7 +882,7 @@ function Combobox({
     }
   );
   if (isDesktop) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(PopoverPrimitive.Root, { open, onOpenChange: handleOpenChange, children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PopoverPrimitive.Trigger, { asChild: true, children: trigger }),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         PopoverPrimitive.Content,
@@ -866,7 +896,7 @@ function Combobox({
       ) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_vaul.Drawer.Root, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_vaul.Drawer.Root, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_vaul.Drawer.Trigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_vaul.Drawer.Portal, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_vaul.Drawer.Overlay, { className: "fixed inset-0 z-50 bg-black/80" }),
@@ -1078,7 +1108,7 @@ function ColorPicker({
 }) {
   const [open, setOpen] = React8.useState(false);
   const color = value || "";
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(PopoverPrimitive3.Root, { open, onOpenChange: setOpen, modal: true, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(PopoverPrimitive3.Root, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "button",
       {