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

package/dist/TagsInput.js

@@ -226,42 +226,42 @@ const Zi = [["path", { d: "M5 12l5 5l10 -10", key: "svg-0" }]], Ji = st("outline
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Qi = [["path", { d: "M9 11l3 3l8 -8", key: "svg-0" }], ["path", { d: "M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9", key: "svg-1" }]], ec = st("outline", "checkbox", "Checkbox", Qi);
+const Qi = [["path", { d: "M6 9l6 6l6 -6", key: "svg-0" }]], ec = st("outline", "chevron-down", "ChevronDown", Qi);
 /**
  * @license @tabler/icons-react v3.34.1 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const tc = [["path", { d: "M6 9l6 6l6 -6", key: "svg-0" }]], rc = st("outline", "chevron-down", "ChevronDown", tc);
+const tc = [["path", { d: "M9 6l6 6l-6 6", key: "svg-0" }]], Kn = st("outline", "chevron-right", "ChevronRight", tc);
 /**
  * @license @tabler/icons-react v3.34.1 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const nc = [["path", { d: "M9 6l6 6l-6 6", key: "svg-0" }]], Kn = st("outline", "chevron-right", "ChevronRight", nc);
+const rc = [["path", { d: "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0", key: "svg-0" }], ["path", { d: "M21 21l-6 -6", key: "svg-1" }]], Ma = st("outline", "search", "Search", rc);
 /**
  * @license @tabler/icons-react v3.34.1 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ac = [["path", { d: "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0", key: "svg-0" }], ["path", { d: "M21 21l-6 -6", key: "svg-1" }]], Ma = st("outline", "search", "Search", ac);
+const nc = [["path", { d: "M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z", key: "svg-0" }]], ac = st("outline", "square", "Square", nc);
 /**
  * @license @tabler/icons-react v3.34.1 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const oc = [["path", { d: "M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z", key: "svg-0" }]], sc = st("outline", "square", "Square", oc);
+const oc = [["path", { d: "M18 6l-12 12", key: "svg-0" }], ["path", { d: "M6 6l12 12", key: "svg-1" }]], an = st("outline", "x", "X", oc);
 /**
  * @license @tabler/icons-react v3.34.1 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const lc = [["path", { d: "M18 6l-12 12", key: "svg-0" }], ["path", { d: "M6 6l12 12", key: "svg-1" }]], an = st("outline", "x", "X", lc), og = Zr, sg = va, lg = ar, ic = Jr, Da = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ c.jsx(
+const sc = [["path", { d: "M18.333 2c1.96 0 3.56 1.537 3.662 3.472l.005 .195v12.666c0 1.96 -1.537 3.56 -3.472 3.662l-.195 .005h-12.666a3.667 3.667 0 0 1 -3.662 -3.472l-.005 -.195v-12.666c0 -1.96 1.537 -3.56 3.472 -3.662l.195 -.005h12.666zm-2.626 7.293a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z", key: "svg-0" }]], lc = st("filled", "square-check-filled", "SquareCheckFilled", sc), og = Zr, sg = va, lg = ar, ic = Jr, Da = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ c.jsx(
   or,
   {
     className: O(
@@ -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: [
@@ -3804,7 +3804,7 @@ const Jf = ({
               getLabelForValue: h
             }
           ) }),
-          (_ == null ? void 0 : _.side) === "right" ? /* @__PURE__ */ c.jsx(Kn, { className: "al-ml-2 al-size-4 al-shrink-0 al-opacity-50" }) : /* @__PURE__ */ c.jsx(rc, { className: "al-mr-2 al-size-4 al-shrink-0 al-opacity-50" })
+          (_ == null ? void 0 : _.side) === "right" ? /* @__PURE__ */ c.jsx(Kn, { className: "al-ml-2 al-size-4 al-shrink-0 al-opacity-50" }) : /* @__PURE__ */ c.jsx(ec, { className: "al-mr-2 al-size-4 al-shrink-0 al-opacity-50" })
         ]
       }
     );
@@ -3815,7 +3815,14 @@ const Jf = ({
       Un,
       {
         ..._,
-        className: O("!al-w-56 !al-p-0", _ == null ? void 0 : _.className),
+        className: O(
+          "!al-p-0",
+          "al-min-w-56",
+          // 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 +3861,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(
+                          lc,
+                          {
+                            className: "al-mr-2 al-size-4 al-text-primary",
+                            role: "checkbox",
+                            "aria-checked": "true"
+                          }
+                        ) : /* @__PURE__ */ c.jsx(ac, { 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.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AltimateAI/altimate-components.git"