@motor-hero/ui-kit 0.24.0 → 0.25.1

package/dist/index.js

@@ -615,7 +615,7 @@ PasswordInput.displayName = "PasswordInput";
 // src/components/combobox.tsx
 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 React6 from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 
@@ -688,12 +688,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,
@@ -731,7 +750,7 @@ function Combobox({
             CommandPrimitive.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"
             }
           )
@@ -742,16 +761,27 @@ function Combobox({
             ref: listRef,
             className: "max-h-[50vh] overflow-y-auto overflow-x-hidden p-1 sm:max-h-60",
             children: [
-              !isServer && /* @__PURE__ */ jsx16(CommandPrimitive.Empty, { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }),
+              !isServer && !showCreate && /* @__PURE__ */ jsx16(CommandPrimitive.Empty, { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }),
+              showCreate && /* @__PURE__ */ jsxs14(
+                CommandPrimitive.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__ */ jsx16(Plus, { className: "h-4 w-4 shrink-0" }),
+                    /* @__PURE__ */ jsx16("span", { className: "truncate", children: (formatCreateLabel ?? ((text) => `Usar "${text}"`))(
+                      trimmedSearch
+                    ) })
+                  ]
+                }
+              ),
               options.map((option) => /* @__PURE__ */ jsxs14(
                 CommandPrimitive.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__ */ jsx16(
@@ -778,7 +808,7 @@ function Combobox({
     }
   );
   if (isDesktop) {
-    return /* @__PURE__ */ jsxs14(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children: [
+    return /* @__PURE__ */ jsxs14(PopoverPrimitive.Root, { open, onOpenChange: handleOpenChange, children: [
       /* @__PURE__ */ jsx16(PopoverPrimitive.Trigger, { asChild: true, children: trigger }),
       /* @__PURE__ */ jsx16(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx16(
         PopoverPrimitive.Content,
@@ -792,7 +822,7 @@ function Combobox({
       ) })
     ] });
   }
-  return /* @__PURE__ */ jsxs14(DrawerPrimitive.Root, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxs14(DrawerPrimitive.Root, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsx16(DrawerPrimitive.Trigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ jsxs14(DrawerPrimitive.Portal, { children: [
       /* @__PURE__ */ jsx16(DrawerPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-black/80" }),
@@ -1004,7 +1034,7 @@ function ColorPicker({
 }) {
   const [open, setOpen] = React8.useState(false);
   const color = value || "";
-  return /* @__PURE__ */ jsxs16(PopoverPrimitive3.Root, { open, onOpenChange: setOpen, modal: true, children: [
+  return /* @__PURE__ */ jsxs16(PopoverPrimitive3.Root, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx18(PopoverPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs16(
       "button",
       {