@motor-hero/ui-kit 0.50.0 → 0.51.0

package/dist/index.js

@@ -846,6 +846,7 @@ function Combobox({
                 CommandPrimitive.Item,
                 {
                   value: isServer ? option.value : option.label,
+                  keywords: option.description ? [option.description] : void 0,
                   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 +861,7 @@ function Combobox({
                       }
                     ),
                     option.icon,
-                    /* @__PURE__ */ jsx9("span", { className: "truncate", children: option.label })
+                    /* @__PURE__ */ jsx9(OptionText, { option })
                   ]
                 },
                 option.value
@@ -901,6 +902,21 @@ function Combobox({
     ] })
   ] });
 }
+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 +1834,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 +1876,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",
                 {
@@ -1910,6 +1931,7 @@ function MultiCombobox({
                 CommandPrimitive2.Item,
                 {
                   value: isServer ? option.value : option.label,
+                  keywords: option.description ? [option.description] : void 0,
                   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 +1945,7 @@ function MultiCombobox({
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsx21("span", { className: "truncate", children: option.label })
+                    /* @__PURE__ */ jsx21(OptionText, { option })
                   ]
                 },
                 option.value