@altimateai/ui-components 0.0.60 → 0.0.61-beta.1

package/dist/TagsInput.js

@@ -3561,21 +3561,21 @@ const Jf = ({
   getLabelForValue: s
 }) => {
   if (r)
-    return /* @__PURE__ */ c.jsx("span", { className: "al-truncate", children: t });
+    return /* @__PURE__ */ c.jsx("div", { className: "al-truncate", children: t });
   if (!e) {
     const p = n ? s(n) : void 0;
-    return /* @__PURE__ */ c.jsx("span", { className: "al-truncate", children: p || t || "Select item" });
+    return /* @__PURE__ */ c.jsx("div", { className: "al-truncate", children: p || t || "Select item" });
   }
   const i = o ? Array.isArray(n) ? n : n ? [n] : [] : a;
   if (i.length === 0)
-    return /* @__PURE__ */ c.jsx("span", { className: "al-truncate", children: t || "All Items" });
+    return /* @__PURE__ */ c.jsx("div", { className: "al-truncate", children: t || "All Items" });
   if (i.length === 1)
-    return /* @__PURE__ */ c.jsx("span", { className: "al-truncate", children: s(i[0]) });
+    return /* @__PURE__ */ c.jsx("div", { className: "al-truncate", children: s(i[0]) });
   const u = i.slice(0, 2).map((p) => s(p)), d = i.length - 2, f = i.map((p) => s(p));
   return /* @__PURE__ */ c.jsxs("div", { className: "al-flex al-items-center al-gap-none al-min-w-0", children: [
     u.map((p, g) => /* @__PURE__ */ c.jsxs(c.Fragment, { children: [
       /* @__PURE__ */ c.jsx(
-        "span",
+        "div",
         {
           className: O("al-truncate al-inline-block", g === 0 ? "" : "al-ml-1"),
           style: { maxWidth: "150px" },
@@ -3753,7 +3753,7 @@ const Jf = ({
             value: A,
             placeholder: o || "Search...",
             debounceMs: 300,
-            className: s == null ? void 0 : s.className,
+            className: `!al-h-10 ${s == null ? void 0 : s.className}`,
             id: i ? `${i}-combobox` : "default-combobox",
             role: "combobox",
             "aria-expanded": K,
@@ -3787,7 +3787,7 @@ const Jf = ({
         id: i ? `${i}-combobox` : "default-combobox",
         ...s,
         className: O(
-          "al-w-56 al-flex al-items-center al-justify-between al-py-3 al-px-2",
+          "al-w-56 !al-h-10 al-flex al-items-center al-justify-between al-py-3 al-px-2",
           s == null ? void 0 : s.className
         ),
         children: [
@@ -3815,7 +3815,13 @@ const Jf = ({
       Un,
       {
         ..._,
-        className: O("!al-w-56 !al-p-0", _ == null ? void 0 : _.className),
+        className: O(
+          "!al-p-0",
+          // to match width of trigger
+          // https://github.com/shadcn-ui/ui/issues/3045#issuecomment-2773835617
+          "!al-w-[var(--radix-popover-trigger-width)]",
+          _ == null ? void 0 : _.className
+        ),
         id: `${i}-combobox-content`,
         onWheel: (A) => {
           A.stopPropagation();
@@ -3854,7 +3860,14 @@ const Jf = ({
                       onMouseEnter: () => he(A),
                       onMouseLeave: Le,
                       children: /* @__PURE__ */ c.jsxs("div", { className: "al-flex al-items-center al-gap-2 al-w-full", children: [
-                        d ? ve.includes(A.value) ? /* @__PURE__ */ c.jsx(ec, { className: "al-mr-2 al-size-4 al-text-primary", role: "checkbox", "aria-checked": "true" }) : /* @__PURE__ */ c.jsx(sc, { className: "al-mr-2 al-size-4 al-text-muted-foreground" }) : /* @__PURE__ */ c.jsx(
+                        d ? ve.includes(A.value) ? /* @__PURE__ */ c.jsx(
+                          ec,
+                          {
+                            className: "al-mr-2 al-size-4 al-text-primary",
+                            role: "checkbox",
+                            "aria-checked": "true"
+                          }
+                        ) : /* @__PURE__ */ c.jsx(sc, { className: "al-mr-2 al-size-4 al-text-muted-foreground" }) : /* @__PURE__ */ c.jsx(
                           Ji,
                           {
                             className: O(

package/dist/storybook/Combobox.stories.tsx

@@ -159,14 +159,16 @@ export const ComboboxMultiSelectExample: StoryFn = () => {
         <p className="al-text-sm al-text-muted-foreground">
           Changes are applied immediately when selecting/deselecting options
         </p>
-        <Combobox
-          options={options}
-          value={selectedValues}
-          placeholder="Select frameworks..."
-          multiSelect={true}
-          buttonProps={{ className: "al-w-[250px]" }}
-          onChange={handleMultiSelectChange}
-        />
+        <div className="al-w-40">
+          <Combobox
+            options={options}
+            value={selectedValues}
+            placeholder="Select frameworks..."
+            multiSelect={true}
+            buttonProps={{ className: "al-w-full" }}
+            onChange={handleMultiSelectChange}
+          />
+        </div>
         <div className="al-text-sm">
           Selected: {selectedValues.length > 0 ? selectedValues.join(", ") : "None"}
         </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altimateai/ui-components",
-  "version": "0.0.60",
+  "version": "0.0.61-beta.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AltimateAI/altimate-components.git"