@motor-hero/ui-kit 0.50.0 → 0.51.1

package/dist/index.js

@@ -681,7 +681,7 @@ function Rating({
 
 // src/components/combobox.tsx
 import * as PopoverPrimitive2 from "@radix-ui/react-popover";
-import { Command as CommandPrimitive } from "cmdk";
+import { Command as CommandPrimitive, defaultFilter } from "cmdk";
 import { Check, ChevronsUpDown as ChevronsUpDown2, Loader2, Plus, Search } from "lucide-react";
 import * as React5 from "react";
 import { Drawer as DrawerPrimitive2 } from "vaul";
@@ -799,7 +799,14 @@ function Combobox({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx9("span", { className: cn("truncate", !selected && "text-muted-foreground"), children: selected ? selected.label : placeholder }),
+        /* @__PURE__ */ jsx9(
+          "span",
+          {
+            title: selected?.description,
+            className: cn("truncate", !selected && "text-muted-foreground"),
+            children: selected ? selected.label : placeholder
+          }
+        ),
         /* @__PURE__ */ jsx9(ChevronsUpDown2, { className: "h-4 w-4 shrink-0 opacity-50" })
       ]
     }
@@ -808,6 +815,7 @@ function Combobox({
     CommandPrimitive,
     {
       shouldFilter: !isServer,
+      filter: filterByKeywords,
       className: "flex h-full w-full flex-col overflow-hidden",
       children: [
         /* @__PURE__ */ jsxs7("div", { className: "flex items-center border-b px-3", children: [
@@ -832,6 +840,7 @@ function Combobox({
                 CommandPrimitive.Item,
                 {
                   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",
                   children: [
@@ -845,7 +854,8 @@ function Combobox({
               options.map((option) => /* @__PURE__ */ jsxs7(
                 CommandPrimitive.Item,
                 {
-                  value: isServer ? option.value : option.label,
+                  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",
@@ -860,7 +870,7 @@ function Combobox({
                       }
                     ),
                     option.icon,
-                    /* @__PURE__ */ jsx9("span", { className: "truncate", children: option.label })
+                    /* @__PURE__ */ jsx9(OptionText, { option })
                   ]
                 },
                 option.value
@@ -901,6 +911,23 @@ function Combobox({
     ] })
   ] });
 }
+var filterByKeywords = (_value, search, keywords = []) => defaultFilter(keywords.join(" "), search);
+var optionKeywords = (option) => option.description ? [option.label, option.description] : [option.label];
+function OptionText({ option }) {
+  if (!option.description)
+    return /* @__PURE__ */ jsx9("span", { className: "truncate", children: option.label });
+  return /* @__PURE__ */ jsxs7("span", { className: "flex min-w-0 flex-col", children: [
+    /* @__PURE__ */ jsx9("span", { className: "truncate", children: option.label }),
+    /* @__PURE__ */ jsx9(
+      "span",
+      {
+        title: option.description,
+        className: "truncate text-xs text-muted-foreground",
+        children: option.description
+      }
+    )
+  ] });
+}
 
 // src/components/confirm-dialog.tsx
 import * as AlertDialog from "@radix-ui/react-alert-dialog";
@@ -1818,6 +1845,10 @@ function MultiCombobox({
     for (const [key, option] of byValue) labelCache.current.set(key, option);
   });
   const selected = value.map((v) => byValue.get(v) ?? labelCache.current.get(v)).filter((option) => option !== void 0);
+  const labelCounts = /* @__PURE__ */ new Map();
+  for (const option of selected)
+    labelCounts.set(option.label, (labelCounts.get(option.label) ?? 0) + 1);
+  const chipLabel = (option) => option.description && (labelCounts.get(option.label) ?? 0) > 1 ? `${option.label} \xB7 ${option.description}` : option.label;
   const { listRef, sentinelRef } = useInfiniteScrollSentinel({
     enabled: isServer && !!hasMore,
     loading,
@@ -1856,9 +1887,10 @@ function MultiCombobox({
         selected.length === 0 ? /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground", children: placeholder }) : selected.map((option) => /* @__PURE__ */ jsxs17(
           "span",
           {
+            title: option.description,
             className: "inline-flex items-center gap-1 rounded bg-secondary px-1.5 py-0.5 text-xs text-secondary-foreground",
             children: [
-              option.label,
+              chipLabel(option),
               /* @__PURE__ */ jsx21(
                 "button",
                 {
@@ -1886,6 +1918,7 @@ function MultiCombobox({
     CommandPrimitive2,
     {
       shouldFilter: !isServer,
+      filter: filterByKeywords,
       className: "flex h-full w-full flex-col overflow-hidden",
       children: [
         /* @__PURE__ */ jsxs17("div", { className: "flex items-center border-b px-3", children: [
@@ -1909,7 +1942,8 @@ function MultiCombobox({
               options.map((option) => /* @__PURE__ */ jsxs17(
                 CommandPrimitive2.Item,
                 {
-                  value: isServer ? option.value : option.label,
+                  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",
@@ -1923,7 +1957,7 @@ function MultiCombobox({
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsx21("span", { className: "truncate", children: option.label })
+                    /* @__PURE__ */ jsx21(OptionText, { option })
                   ]
                 },
                 option.value