@mateosuarezdev/react-ui 1.0.43 → 1.0.44

package/dist/index.d.ts

@@ -661,7 +661,7 @@ declare interface SelectProps<T> {
     onChange: (value: T) => void;
     idExtractor: (item: T) => string | number;
     labelExtractor: (item: T) => string;
-    descriptionExtractor?: (item: T) => string;
+    descriptionExtractor?: (item: T) => string | undefined;
     classNameExtractor?: (isSelected: boolean) => string;
     customGetter?: (value: any, options: T[]) => T | null | undefined;
     customSetter?: (item: T) => any;

package/dist/index.js

@@ -1187,7 +1187,7 @@ function Bo(e, t) {
   const r = ee(e, t?.in), n = +ze(r, t) - +Ho(r, t);
   return Math.round(n / _r) + 1;
 }
-function I(e, t) {
+function j(e, t) {
   const r = e < 0 ? "-" : "", n = Math.abs(e).toString().padStart(t, "0");
   return r + n;
 }
@@ -1195,16 +1195,16 @@ const ge = {
   // Year
   y(e, t) {
     const r = e.getFullYear(), n = r > 0 ? r : 1 - r;
-    return I(t === "yy" ? n % 100 : n, t.length);
+    return j(t === "yy" ? n % 100 : n, t.length);
   },
   // Month
   M(e, t) {
     const r = e.getMonth();
-    return t === "M" ? String(r + 1) : I(r + 1, 2);
+    return t === "M" ? String(r + 1) : j(r + 1, 2);
   },
   // Day of the month
   d(e, t) {
-    return I(e.getDate(), t.length);
+    return j(e.getDate(), t.length);
   },
   // AM or PM
   a(e, t) {
@@ -1224,26 +1224,26 @@ const ge = {
   },
   // Hour [1-12]
   h(e, t) {
-    return I(e.getHours() % 12 || 12, t.length);
+    return j(e.getHours() % 12 || 12, t.length);
   },
   // Hour [0-23]
   H(e, t) {
-    return I(e.getHours(), t.length);
+    return j(e.getHours(), t.length);
   },
   // Minute
   m(e, t) {
-    return I(e.getMinutes(), t.length);
+    return j(e.getMinutes(), t.length);
   },
   // Second
   s(e, t) {
-    return I(e.getSeconds(), t.length);
+    return j(e.getSeconds(), t.length);
   },
   // Fraction of second
   S(e, t) {
     const r = t.length, n = e.getMilliseconds(), o = Math.trunc(
       n * Math.pow(10, r - 3)
     );
-    return I(o, t.length);
+    return j(o, t.length);
   }
 }, De = {
   midnight: "midnight",
@@ -1284,14 +1284,14 @@ const ge = {
     const o = jr(e, n), a = o > 0 ? o : 1 - o;
     if (t === "YY") {
       const s = a % 100;
-      return I(s, 2);
+      return j(s, 2);
     }
-    return t === "Yo" ? r.ordinalNumber(a, { unit: "year" }) : I(a, t.length);
+    return t === "Yo" ? r.ordinalNumber(a, { unit: "year" }) : j(a, t.length);
   },
   // ISO week-numbering year
   R: function(e, t) {
     const r = Yr(e);
-    return I(r, t.length);
+    return j(r, t.length);
   },
   // Extended year. This is a single number designating the year of this calendar system.
   // The main difference between `y` and `u` localizers are B.C. years:
@@ -1304,7 +1304,7 @@ const ge = {
   // while `uu` pads single digit years to 2 characters and returns other years unchanged.
   u: function(e, t) {
     const r = e.getFullYear();
-    return I(r, t.length);
+    return j(r, t.length);
   },
   // Quarter
   Q: function(e, t, r) {
@@ -1315,7 +1315,7 @@ const ge = {
         return String(n);
       // 01, 02, 03, 04
       case "QQ":
-        return I(n, 2);
+        return j(n, 2);
       // 1st, 2nd, 3rd, 4th
       case "Qo":
         return r.ordinalNumber(n, { unit: "quarter" });
@@ -1349,7 +1349,7 @@ const ge = {
         return String(n);
       // 01, 02, 03, 04
       case "qq":
-        return I(n, 2);
+        return j(n, 2);
       // 1st, 2nd, 3rd, 4th
       case "qo":
         return r.ordinalNumber(n, { unit: "quarter" });
@@ -1411,7 +1411,7 @@ const ge = {
         return String(n + 1);
       // 01, 02, ..., 12
       case "LL":
-        return I(n + 1, 2);
+        return j(n + 1, 2);
       // 1st, 2nd, ..., 12th
       case "Lo":
         return r.ordinalNumber(n + 1, { unit: "month" });
@@ -1436,12 +1436,12 @@ const ge = {
   // Local week of year
   w: function(e, t, r, n) {
     const o = Bo(e, n);
-    return t === "wo" ? r.ordinalNumber(o, { unit: "week" }) : I(o, t.length);
+    return t === "wo" ? r.ordinalNumber(o, { unit: "week" }) : j(o, t.length);
   },
   // ISO week of year
   I: function(e, t, r) {
     const n = zo(e);
-    return t === "Io" ? r.ordinalNumber(n, { unit: "week" }) : I(n, t.length);
+    return t === "Io" ? r.ordinalNumber(n, { unit: "week" }) : j(n, t.length);
   },
   // Day of the month
   d: function(e, t, r) {
@@ -1450,7 +1450,7 @@ const ge = {
   // Day of year
   D: function(e, t, r) {
     const n = jo(e);
-    return t === "Do" ? r.ordinalNumber(n, { unit: "dayOfYear" }) : I(n, t.length);
+    return t === "Do" ? r.ordinalNumber(n, { unit: "dayOfYear" }) : j(n, t.length);
   },
   // Day of week
   E: function(e, t, r) {
@@ -1494,7 +1494,7 @@ const ge = {
         return String(a);
       // Padded numerical value
       case "ee":
-        return I(a, 2);
+        return j(a, 2);
       // 1st, 2nd, ..., 7th
       case "eo":
         return r.ordinalNumber(a, { unit: "day" });
@@ -1533,7 +1533,7 @@ const ge = {
         return String(a);
       // Padded numerical value
       case "cc":
-        return I(a, t.length);
+        return j(a, t.length);
       // 1st, 2nd, ..., 7th
       case "co":
         return r.ordinalNumber(a, { unit: "day" });
@@ -1572,7 +1572,7 @@ const ge = {
         return String(o);
       // 02
       case "ii":
-        return I(o, t.length);
+        return j(o, t.length);
       // 2nd
       case "io":
         return r.ordinalNumber(o, { unit: "day" });
@@ -1700,12 +1700,12 @@ const ge = {
   // Hour [0-11]
   K: function(e, t, r) {
     const n = e.getHours() % 12;
-    return t === "Ko" ? r.ordinalNumber(n, { unit: "hour" }) : I(n, t.length);
+    return t === "Ko" ? r.ordinalNumber(n, { unit: "hour" }) : j(n, t.length);
   },
   // Hour [1-24]
   k: function(e, t, r) {
     let n = e.getHours();
-    return n === 0 && (n = 24), t === "ko" ? r.ordinalNumber(n, { unit: "hour" }) : I(n, t.length);
+    return n === 0 && (n = 24), t === "ko" ? r.ordinalNumber(n, { unit: "hour" }) : j(n, t.length);
   },
   // Minute
   m: function(e, t, r) {
@@ -1800,22 +1800,22 @@ const ge = {
   // Seconds timestamp
   t: function(e, t, r) {
     const n = Math.trunc(+e / 1e3);
-    return I(n, t.length);
+    return j(n, t.length);
   },
   // Milliseconds timestamp
   T: function(e, t, r) {
-    return I(+e, t.length);
+    return j(+e, t.length);
   }
 };
 function lr(e, t = "") {
   const r = e > 0 ? "-" : "+", n = Math.abs(e), o = Math.trunc(n / 60), a = n % 60;
-  return a === 0 ? r + String(o) : r + String(o) + t + I(a, 2);
+  return a === 0 ? r + String(o) : r + String(o) + t + j(a, 2);
 }
 function cr(e, t) {
-  return e % 60 === 0 ? (e > 0 ? "-" : "+") + I(Math.abs(e) / 60, 2) : Ne(e, t);
+  return e % 60 === 0 ? (e > 0 ? "-" : "+") + j(Math.abs(e) / 60, 2) : Ne(e, t);
 }
 function Ne(e, t = "") {
-  const r = e > 0 ? "-" : "+", n = Math.abs(e), o = I(Math.trunc(n / 60), 2), a = I(n % 60, 2);
+  const r = e > 0 ? "-" : "+", n = Math.abs(e), o = j(Math.trunc(n / 60), 2), a = j(n % 60, 2);
   return r + o + t + a;
 }
 const ur = (e, t) => {
@@ -4216,7 +4216,7 @@ const ji = ({
     getPopoverPosition: p,
     open: M,
     toggle: C,
-    close: W
+    close: F
   } = Ht({
     align: "start",
     side: "top",
@@ -4227,11 +4227,11 @@ const ji = ({
     onClose: () => {
       S(!1), v(""), D(-1);
     }
-  }), j = T(
+  }), I = T(
     `multiselect-${Math.random().toString(36).substr(2, 9)}`
   ).current, X = T(
     `label-${Math.random().toString(36).substr(2, 9)}`
-  ).current, F = T(
+  ).current, W = T(
     `error-${Math.random().toString(36).substr(2, 9)}`
   ).current, w = T(
     `listbox-${Math.random().toString(36).substr(2, 9)}`
@@ -4289,7 +4289,7 @@ const ji = ({
           O.preventDefault(), M ? _ >= 0 && _e(Q[_]) : C();
           break;
         case "Escape":
-          O.preventDefault(), W();
+          O.preventDefault(), F();
           break;
         case "ArrowDown":
           if (O.preventDefault(), !M)
@@ -4320,7 +4320,7 @@ const ji = ({
     console.log(`Accessibility announcement: ${O}`);
   };
   Bt($, (O) => {
-    !L.current || !M || !O.target || L.current.contains(O.target) || W();
+    !L.current || !M || !O.target || L.current.contains(O.target) || F();
   });
   const Et = p();
   return /* @__PURE__ */ y("div", { className: N("relative", h), children: [
@@ -4358,7 +4358,7 @@ const ji = ({
           "aria-haspopup": "listbox",
           "aria-owns": w,
           "aria-labelledby": X,
-          "aria-describedby": l ? F : void 0,
+          "aria-describedby": l ? W : void 0,
           onKeyDown: Je,
           tabIndex: b ? -1 : 0,
           children: [
@@ -4366,7 +4366,7 @@ const ji = ({
               "label",
               {
                 id: X,
-                htmlFor: j,
+                htmlFor: I,
                 className: N(
                   "absolute transition-all duration-200 pointer-events-none",
                   "text-base top-4 font-semibold left-3",
@@ -4420,7 +4420,7 @@ const ji = ({
                     "input",
                     {
                       ref: P,
-                      id: j,
+                      id: I,
                       type: "text",
                       className: "flex-grow min-w-[60px] bg-transparent outline-none placeholder:text-sm",
                       value: g,
@@ -4511,7 +4511,7 @@ const ji = ({
     l && /* @__PURE__ */ d(
       "p",
       {
-        id: F,
+        id: W,
         className: "text-red-9 text-xs mt-1",
         "aria-live": "assertive",
         children: l
@@ -4576,46 +4576,46 @@ const ji = ({
       ));
     }),
     []
-  ), k = A((F) => {
+  ), k = A((W) => {
     const { maxScroll: w } = D.current;
-    return F > 0 ? Math.pow(F, 0.8) : F < -w ? -w - Math.pow(-(F + w), 0.8) : F;
+    return W > 0 ? Math.pow(W, 0.8) : W < -w ? -w - Math.pow(-(W + w), 0.8) : W;
   }, []), L = A(() => {
     if (!u || !m.current || !g.current)
       return;
-    const { currentY: F, maxScroll: w } = D.current, V = m.current.offsetHeight, K = Math.max(
+    const { currentY: W, maxScroll: w } = D.current, V = m.current.offsetHeight, K = Math.max(
       30,
       V / (V + w) * V
     ), ie = V - K;
-    let Q = -F / w * ie, oe = 1;
-    F > 0 ? (Q = 0, oe = 1 - F / V, g.current.style.transformOrigin = "top") : F < -w ? (Q = ie, oe = 1 - Math.abs(F + w) / V, g.current.style.transformOrigin = "bottom") : g.current.style.transformOrigin = "top", g.current.style.transform = `translate3d(0, ${Q}px, 0) scaleY(${oe})`, g.current.style.height = `${K}px`;
+    let Q = -W / w * ie, oe = 1;
+    W > 0 ? (Q = 0, oe = 1 - W / V, g.current.style.transformOrigin = "top") : W < -w ? (Q = ie, oe = 1 - Math.abs(W + w) / V, g.current.style.transformOrigin = "bottom") : g.current.style.transformOrigin = "top", g.current.style.transform = `translate3d(0, ${Q}px, 0) scaleY(${oe})`, g.current.style.height = `${K}px`;
   }, [u]), Y = A(
-    (F) => {
-      if (D.current.currentY = F, b.current && (b.current.style.transform = `translate3d(0, ${F}px, 0)`), h.current) {
+    (W) => {
+      if (D.current.currentY = W, b.current && (b.current.style.transform = `translate3d(0, ${W}px, 0)`), h.current) {
         const w = Math.max(
-          F - D.current.refreshThreshold,
+          W - D.current.refreshThreshold,
           -D.current.refreshThreshold
         );
         h.current.style.transform = `translate3d(0, ${w}px, 0)`;
       }
-      f && f(F), L();
+      f && f(W), L();
     },
     [L]
   ), $ = A(
-    (F) => {
+    (W) => {
       const w = D.current;
       w.frameCallback && (te(w.frameCallback), w.frameCallback = null);
-      const V = performance.now(), K = w.currentY, ie = F - K, Q = () => {
+      const V = performance.now(), K = w.currentY, ie = W - K, Q = () => {
         const oe = performance.now() - V, _e = Math.min(oe / l, 1), Ge = 1 - Math.pow(1 - _e, 3), Je = K + ie * Ge;
-        Y(Je), _e >= 1 && (w.frameCallback && (te(w.frameCallback), w.frameCallback = null), Y(F), F === 0 && h.current && (h.current.textContent = "Pull to refresh"));
+        Y(Je), _e >= 1 && (w.frameCallback && (te(w.frameCallback), w.frameCallback = null), Y(W), W === 0 && h.current && (h.current.textContent = "Pull to refresh"));
       };
       w.frameCallback = at.render(Q, !0);
     },
     [Y, l]
   ), p = A(
-    (F) => {
+    (W) => {
       const w = D.current;
       w.frameCallback && (te(w.frameCallback), w.frameCallback = null);
-      let V = F, K = Date.now();
+      let V = W, K = Date.now();
       const ie = () => {
         const Q = Date.now(), oe = Q - K;
         if (K = Q, V *= Math.pow(0.95, oe / 16), w.currentY += V * oe, w.currentY > 0 || w.currentY < -w.maxScroll) {
@@ -4632,14 +4632,14 @@ const ji = ({
     v.current !== null && clearTimeout(v.current), requestAnimationFrame(() => {
       g.current && (g.current.style.opacity = "1");
     });
-    const F = window.requestIdleCallback || ((w) => setTimeout(w, 1e3));
+    const W = window.requestIdleCallback || ((w) => setTimeout(w, 1e3));
     v.current = window.setTimeout(() => {
-      F(() => {
+      W(() => {
         g.current && (g.current.style.opacity = "0"), v.current = null;
       });
     }, 1e3);
   }, [u]), C = A(
-    (F) => {
+    (W) => {
       if (_.current !== null && Date.now() - _.current < 50)
         return;
       _.current = Date.now();
@@ -4647,11 +4647,11 @@ const ji = ({
       w.isScrolling = !0, w.startY = w.currentY, w.lastTimestamp = Date.now(), w.isPullingToRefresh = w.currentY === 0, w.pullDistance = 0, w.frameCallback && (te(w.frameCallback), w.frameCallback = null), M();
     },
     [M]
-  ), W = A(
-    (F) => {
+  ), F = A(
+    (W) => {
       const w = D.current;
       if (!w.isScrolling) return;
-      const V = k(w.startY + F.deltaY);
+      const V = k(w.startY + W.deltaY);
       w.isPullingToRefresh && V < w.startY && (w.isPullingToRefresh = !1), Y(V), a && w.isPullingToRefresh && !E && V > 0 && (w.pullDistance = V, h.current && (h.current.textContent = w.pullDistance > w.refreshThreshold ? "Release to refresh" : "Pull to refresh")), M();
     },
     [
@@ -4661,10 +4661,10 @@ const ji = ({
       M,
       k
     ]
-  ), j = A(
-    (F) => {
+  ), I = A(
+    (W) => {
       const w = D.current;
-      w.isScrolling && (w.isScrolling = !1, a && w.isPullingToRefresh && !E && w.pullDistance > w.refreshThreshold ? X() : w.currentY > 0 || w.currentY < -w.maxScroll ? $(w.currentY > 0 ? 0 : -w.maxScroll) : p(F.velocityY), w.isPullingToRefresh = !1);
+      w.isScrolling && (w.isScrolling = !1, a && w.isPullingToRefresh && !E && w.pullDistance > w.refreshThreshold ? X() : w.currentY > 0 || w.currentY < -w.maxScroll ? $(w.currentY > 0 ? 0 : -w.maxScroll) : p(W.velocityY), w.isPullingToRefresh = !1);
     },
     [a, p, $, E]
   ), X = A(() => {
@@ -4674,7 +4674,7 @@ const ji = ({
   }, [a, $]);
   return B(() => {
     if (!m.current) return;
-    const F = Fr(m.current, {
+    const W = Fr(m.current, {
       name: "page-scroller-gesture",
       //   threshold: 0, due to small miss touches
       // maybe if implementing proper stop propagation
@@ -4684,11 +4684,11 @@ const ji = ({
       passive: !0,
       direction: "y",
       onStart: C,
-      onMove: W,
-      onEnd: j
+      onMove: F,
+      onEnd: I
     });
-    return F.init(), () => F.destroy();
-  }, [C, W, j]), B(() => {
+    return W.init(), () => W.destroy();
+  }, [C, F, I]), B(() => {
     if (m.current)
       return x(), L(), window.addEventListener("resize", x), () => {
         window.removeEventListener("resize", x), v.current !== null && clearTimeout(v.current);
@@ -4823,9 +4823,9 @@ function Ui({
     const { currentY: $, maxScroll: p } = h.current, M = s.current.offsetHeight, C = Math.max(
       30,
       M / (M + p) * M
-    ), W = M - C;
-    let j = -$ / p * W, X = 1;
-    $ > 0 ? (j = 0, X = 1 - $ / M, l.current.style.transformOrigin = "top") : $ < -p ? (j = W, X = 1 - Math.abs($ + p) / M, l.current.style.transformOrigin = "bottom") : l.current.style.transformOrigin = "top", l.current.style.transform = `translate3d(0, ${j}px, 0) scaleY(${X})`, l.current.style.height = `${C}px`;
+    ), F = M - C;
+    let I = -$ / p * F, X = 1;
+    $ > 0 ? (I = 0, X = 1 - $ / M, l.current.style.transformOrigin = "top") : $ < -p ? (I = F, X = 1 - Math.abs($ + p) / M, l.current.style.transformOrigin = "bottom") : l.current.style.transformOrigin = "top", l.current.style.transform = `translate3d(0, ${I}px, 0) scaleY(${X})`, l.current.style.height = `${C}px`;
   }, [t]), S = A(
     ($) => {
       if (h.current.currentY = $, i.current && (i.current.style.transform = `translate3d(0, ${$}px, 0)`), c.current) {
@@ -4842,11 +4842,11 @@ function Ui({
     ($) => {
       const p = h.current;
       p.frameCallback && (te(p.frameCallback), p.frameCallback = null);
-      const M = performance.now(), C = p.currentY, W = $ - C, j = () => {
-        const X = performance.now() - M, F = Math.min(X / n, 1), w = 1 - Math.pow(1 - F, 3), V = C + W * w;
-        S(V), F >= 1 && (p.frameCallback && (te(p.frameCallback), p.frameCallback = null), S($));
+      const M = performance.now(), C = p.currentY, F = $ - C, I = () => {
+        const X = performance.now() - M, W = Math.min(X / n, 1), w = 1 - Math.pow(1 - W, 3), V = C + F * w;
+        S(V), W >= 1 && (p.frameCallback && (te(p.frameCallback), p.frameCallback = null), S($));
       };
-      p.frameCallback = at.render(j, !0);
+      p.frameCallback = at.render(I, !0);
     },
     [S, n]
   ), D = A(
@@ -4854,15 +4854,15 @@ function Ui({
       const p = h.current;
       p.frameCallback && (te(p.frameCallback), p.frameCallback = null);
       let M = $, C = Date.now();
-      const W = () => {
-        const j = Date.now(), X = j - C;
-        if (C = j, M *= Math.pow(0.95, X / 16), p.currentY += M * X, p.currentY > 0 || p.currentY < -p.maxScroll) {
+      const F = () => {
+        const I = Date.now(), X = I - C;
+        if (C = I, M *= Math.pow(0.95, X / 16), p.currentY += M * X, p.currentY > 0 || p.currentY < -p.maxScroll) {
           p.frameCallback && (te(p.frameCallback), p.frameCallback = null), _(p.currentY > 0 ? 0 : -p.maxScroll);
           return;
         }
         S(p.currentY), Math.abs(M) < 0.01 && p.frameCallback && (te(p.frameCallback), p.frameCallback = null);
       };
-      p.frameCallback = at.render(W, !0);
+      p.frameCallback = at.render(F, !0);
     },
     [S, _]
   ), P = A(() => {
@@ -5656,7 +5656,7 @@ function Zs({
         ),
         role: "listbox",
         children: r.map((p, M) => {
-          const C = !!($ && a(p) === a($));
+          const C = !!($ && a(p) === a($)), F = M === g, I = i?.(p);
           return /* @__PURE__ */ y(
             "div",
             {
@@ -5665,7 +5665,7 @@ function Zs({
                 // gap-x-2
                 "first:rounded-t-6 last:rounded-b-6 relative",
                 // !selected && "pl-9",
-                M === g && "bg-base-3 dark-theme:bg-base-4",
+                F && "bg-base-3 dark-theme:bg-base-4",
                 C && "bg-brandfadedbg text-brand",
                 c && c(C)
               ),
@@ -5680,7 +5680,7 @@ function Zs({
                     s(p),
                     " "
                   ] }),
-                  i && /* @__PURE__ */ d("p", { className: "text-xs text-base-11 mt-0.5 line-clamp-2", children: i(p) })
+                  I && /* @__PURE__ */ d("p", { className: "text-xs text-base-11 mt-0.5 line-clamp-2", children: I })
                 ] }),
                 C && /* @__PURE__ */ d(je, { size: 16, className: "shrink-0" })
               ]
@@ -6053,41 +6053,41 @@ const oi = ({
   const k = (C) => {
     if (C.key === "Enter" && u.trim()) {
       C.preventDefault();
-      const W = u.trim();
+      const F = u.trim();
       if (c && n.length >= c) {
         g(`Maximum of ${c} tags allowed`);
         return;
       }
-      if (n.includes(W)) {
+      if (n.includes(F)) {
         g("Tag already exists");
         return;
       }
       if (l) {
-        const j = l(W);
-        if (typeof j == "string") {
-          g(j);
+        const I = l(F);
+        if (typeof I == "string") {
+          g(I);
           return;
-        } else if (j === !1) {
+        } else if (I === !1) {
           g("Invalid tag");
           return;
         }
       }
-      o([...n, W]), f(""), g(null), M(`Added tag ${W}`);
+      o([...n, F]), f(""), g(null), M(`Added tag ${F}`);
     } else if (C.key === "Backspace" && !u && n.length > 0) {
-      const W = n[n.length - 1];
-      o(n.slice(0, -1)), M(`Removed tag ${W}`);
+      const F = n[n.length - 1];
+      o(n.slice(0, -1)), M(`Removed tag ${F}`);
     } else C.key === "ArrowLeft" && u === "" && n.length > 0 && S.current[n.length - 1] && S.current[n.length - 1]?.focus();
-  }, L = (C, W) => {
+  }, L = (C, F) => {
     if (C.key === "Backspace" || C.key === "Delete") {
       C.preventDefault();
-      const j = n[W], X = [...n];
-      X.splice(W, 1), o(X), setTimeout(() => {
+      const I = n[F], X = [...n];
+      X.splice(F, 1), o(X), setTimeout(() => {
         v.current && v.current.focus();
-      }, 0), M(`Removed tag ${j}`);
-    } else C.key === "ArrowRight" ? (C.preventDefault(), W < n.length - 1 ? S.current[W + 1]?.focus() : v.current?.focus()) : C.key === "ArrowLeft" && (C.preventDefault(), W > 0 && S.current[W - 1]?.focus());
-  }, Y = (C, W) => {
-    o(n.filter((j) => j !== C)), setTimeout(() => {
-      W < n.length - 1 ? S.current[W]?.focus() : W > 0 ? S.current[W - 1]?.focus() : v.current?.focus();
+      }, 0), M(`Removed tag ${I}`);
+    } else C.key === "ArrowRight" ? (C.preventDefault(), F < n.length - 1 ? S.current[F + 1]?.focus() : v.current?.focus()) : C.key === "ArrowLeft" && (C.preventDefault(), F > 0 && S.current[F - 1]?.focus());
+  }, Y = (C, F) => {
+    o(n.filter((I) => I !== C)), setTimeout(() => {
+      F < n.length - 1 ? S.current[F]?.focus() : F > 0 ? S.current[F - 1]?.focus() : v.current?.focus();
     }, 0), M(`Removed tag ${C}`);
   }, $ = (C) => {
     f(C.target.value), g(null);
@@ -6158,11 +6158,11 @@ const oi = ({
                   "mt-2.5": t === "floating"
                 }),
                 children: [
-                  n.map((C, W) => /* @__PURE__ */ y(
+                  n.map((C, F) => /* @__PURE__ */ y(
                     "div",
                     {
-                      ref: (j) => {
-                        S.current[W] = j;
+                      ref: (I) => {
+                        S.current[F] = I;
                       },
                       className: N(
                         "line-clamp-1 text-brand rounded-full px-2 text-sm flex items-center",
@@ -6174,7 +6174,7 @@ const oi = ({
                       tabIndex: 0,
                       role: "button",
                       "aria-label": `${C}, press delete or backspace to remove`,
-                      onKeyDown: (j) => L(j, W),
+                      onKeyDown: (I) => L(I, F),
                       children: [
                         C,
                         /* @__PURE__ */ d(
@@ -6182,14 +6182,14 @@ const oi = ({
                           {
                             type: "button",
                             className: "ml-1 text-brand hover:text-brandhover shrink-0",
-                            onClick: () => Y(C, W),
+                            onClick: () => Y(C, F),
                             "aria-label": `Remove ${C} tag`,
                             children: "x"
                           }
                         )
                       ]
                     },
-                    `${C}-${W}`
+                    `${C}-${F}`
                   )),
                   /* @__PURE__ */ d(
                     "input",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mateosuarezdev/react-ui",
-  "version": "1.0.43",
+  "version": "1.0.44",
   "description": "Dynamic React UI library designed to work alongside @mateosuarezdev/react-router",
   "type": "module",
   "main": "./dist/index.cjs",