prometeo-design-system 4.3.6 → 4.4.1

package/dist/SelectSearch.es.js

@@ -4,19 +4,19 @@ import { useState as A, useRef as E, useEffect as b, useMemo as ee, useCallback
 import Z from "./Select.es.js";
 function re(e) {
   const {
-    options: C,
+    options: O,
     fetcher: d,
-    asyncMode: _ = "fetch_in_open",
-    disabled: w = !1,
-    debounceDelay: P = 500,
+    asyncMode: w = "fetch_in_open",
+    disabled: _ = !1,
+    debounceDelay: M = 500,
     minCharacters: T = 3,
     optionLabel: h,
     optionValue: c,
     controlledValue: f,
-    isOpen: F,
+    isOpen: P,
     inputRef: p,
     name: I
-  } = e || {}, M = C ? C.filter((n) => n != null) : [], [V, g] = A(M || []), [D, k] = A(M || []), [s, N] = A(""), [W, v] = A(!1), [J, U] = A(!1), o = E(null), O = E(null), m = E(!1), S = E(d), L = e?.multiple === !0 || !1, j = E(L ? [] : void 0), [a, y] = A(L ? [] : void 0);
+  } = e || {}, F = O ? O.filter((n) => n != null) : [], [V, g] = A(F || []), [D, k] = A(F || []), [s, N] = A(""), [W, C] = A(!1), [J, U] = A(!1), o = E(null), v = E(null), m = E(!1), S = E(d), L = e?.multiple === !0 || !1, j = E(L ? [] : void 0), [a, y] = A(L ? [] : void 0);
   b(() => {
     S.current = d;
   }, [d]), b(() => {
@@ -54,28 +54,28 @@ function re(e) {
       t && t();
     };
   }, [e?.subscribeOpenChange]);
-  const G = F !== void 0 ? F : J;
+  const G = P !== void 0 ? P : J;
   b(() => {
-    if (!w && S.current && _ === "fetch_on_type") {
+    if (!_ && S.current && w === "fetch_on_type") {
       if (!s || s === "" || s.length < T) {
-        o.current && clearTimeout(o.current), v(!1);
+        o.current && clearTimeout(o.current), C(!1);
         return;
       }
-      const n = B(q, P);
-      v(!0), n.then((t) => {
+      const n = B(q, M);
+      C(!0), n.then((t) => {
         const l = z(t);
         g(l);
       }).finally(() => {
-        v(!1), e?.onFetchingEnd?.();
+        C(!1), e?.onFetchingEnd?.();
       });
     }
-  }, [_, s, w, P, B, T]), b(() => {
-    if (!w)
+  }, [w, s, _, M, B, T]), b(() => {
+    if (!_)
       if (G) {
-        if (e?.onOpen?.(), _ === "fetch_in_open") {
+        if (e?.onOpen?.(), w === "fetch_in_open") {
           if (!S.current)
             return;
-          v(!0), q().then((n) => {
+          C(!0), q().then((n) => {
             const t = z(n);
             g(() => {
               const l = t.filter((r) => {
@@ -85,12 +85,12 @@ function re(e) {
               return L && a.length > 0 ? [...$(a, l), ...a] : l;
             });
           }).finally(() => {
-            v(!1), e?.onFetchingEnd?.();
+            C(!1), e?.onFetchingEnd?.();
           });
         }
       } else
         e?.onClose?.();
-  }, [G, _, w]);
+  }, [G, w, _]);
   const H = (n, t) => n?.filter((l) => {
     if (h)
       return i(l, h)?.toLowerCase().includes(t.toLowerCase());
@@ -129,9 +129,9 @@ function re(e) {
     }
   }) || [], Q = (n) => {
     const t = typeof p == "function" ? p() : p;
-    n.target === t?.current && (O.current && clearTimeout(O.current), m.current || (m.current = !0, e?.onTypeStart?.()), O.current = setTimeout(() => {
+    n.target === t?.current && (v.current && clearTimeout(v.current), m.current || (m.current = !0, e?.onTypeStart?.()), v.current = setTimeout(() => {
       m.current = !1;
-    }, P));
+    }, M));
   };
   b(() => {
     if (s === "")
@@ -173,18 +173,18 @@ function re(e) {
   };
 }
 const he = (e) => {
-  const C = E(null), { asyncMode: d = "fetch_in_open" } = e, _ = (o, O, m) => {
+  const O = E(null), { asyncMode: d = "fetch_in_open" } = e, w = (o, v, m) => {
     const S = {
       options: o.options,
       fetcher: o.fetcher,
-      asyncMode: O,
+      asyncMode: v,
       debounceDelay: o.debounceDelay,
       minCharacters: o.minCharacters,
       disabled: o.disabled,
       optionValue: o.optionValue,
       optionLabel: o.optionLabel,
       onFetchingStart: () => {
-        O === "fetch_on_type" && m.current?.open();
+        m.current?.open();
       },
       onTypeStart: () => {
         !o?.fetcher && m.current?.open();
@@ -204,29 +204,29 @@ const he = (e) => {
       controlledValue: o.value,
       onChange: o.onChange
     };
-  }, { inputValue: w, setInputValue: P, filteredOptions: T, isLoading: h, value: c, onOptionClick: f, cleanInputValue: F, cleanOptions: p, clearValue: I } = re(_(e, d, C));
+  }, { inputValue: _, setInputValue: M, filteredOptions: T, isLoading: h, value: c, onOptionClick: f, cleanInputValue: P, cleanOptions: p, clearValue: I } = re(w(e, d, O));
   b(() => {
-    !e.controls || !C.current || (e.controls.current = {
-      ...C.current,
+    !e.controls || !O.current || (e.controls.current = {
+      ...O.current,
       cleanOptions: () => {
         p();
       }
     });
   }, [e.controls, p]);
-  const M = ne(
+  const F = ne(
     () => d === "fetch_on_type" ? h : !1,
     [d, h]
   ), V = ee(() => e.multiple ? c.map((o) => i(o, e.optionValue)) : c ? i(c, e.optionValue) : void 0, [c, e.optionValue, e.multiple]), g = (o) => {
-    const O = T.find((m) => i(m, e.optionValue) === o.id);
-    O && f(O);
-  }, { displayMode: D = e.multiple ? "chips" : "compact", dropdownOptions: k, overflow: s = "scroll", onChange: N, onClear: W, ...v } = e.selectComponentProps || {}, J = {
-    controledSearchValue: w,
-    onSearchValueChange: d === "fetch_on_type" ? P : void 0,
+    const v = T.find((m) => i(m, e.optionValue) === o.id);
+    v && f(v);
+  }, { displayMode: D = e.multiple ? "chips" : "compact", dropdownOptions: k, overflow: s = "scroll", onChange: N, onClear: W, ...C } = e.selectComponentProps || {}, J = {
+    controledSearchValue: _,
+    onSearchValueChange: d === "fetch_on_type" ? M : void 0,
     onSearchClear: d === "fetch_on_type" ? () => {
-      F(), p();
+      P(), p();
     } : void 0,
     inputSearchPlaceholder: e.inputSearchPlaceholder,
-    isLoading: M(),
+    isLoading: F(),
     focusSearchInputOnOpen: !0,
     ...k || {}
   }, U = () => {
@@ -240,7 +240,7 @@ const he = (e) => {
       name: e.name,
       overflow: s,
       placeholder: e.placeholder,
-      ...v,
+      ...C,
       onClear: e?.selectComponentProps?.onClear && U,
       multiple: !0,
       value: V,
@@ -252,7 +252,7 @@ const he = (e) => {
       renderSelection: e.renderSelection,
       onOptionClick: g,
       displayMode: D,
-      controls: C,
+      controls: O,
       emptyMessage: "Use el buscador para obtener las opciones disponibles",
       dropdownOptions: J,
       isLoading: d === "fetch_in_open" ? h : !1
@@ -261,7 +261,7 @@ const he = (e) => {
     Z,
     {
       disabled: e.disabled,
-      ...v,
+      ...C,
       placeholder: e.placeholder,
       onClear: U,
       className: e.className,
@@ -277,7 +277,7 @@ const he = (e) => {
       renderSelection: e.renderSelection,
       onOptionClick: g,
       displayMode: "compact",
-      controls: C,
+      controls: O,
       emptyMessage: "Use el buscador para obtener las opciones disponibles",
       dropdownOptions: J,
       isLoading: d === "fetch_in_open" ? h : !1

package/dist/{TabLinks-DxqprStp.js → TabLinks-BjGwvqR9.js}

@@ -1,59 +1,59 @@
-import { j as o } from "./jsx-runtime-GkKLlHH4.js";
-import { motion as v } from "framer-motion";
-import { memo as I, isValidElement as z } from "react";
+import { j as n } from "./jsx-runtime-GkKLlHH4.js";
+import { motion as I } from "framer-motion";
+import { memo as $, useId as w, useRef as z, useEffect as E, isValidElement as L } from "react";
 import { c as d } from "./cn-B6yFEsav.js";
-import $ from "./PlainTooltip.es.js";
-const w = /* @__PURE__ */ Symbol.for("react.memo"), E = (e, a, l) => {
+import M from "./PlainTooltip.es.js";
+const R = /* @__PURE__ */ Symbol.for("react.memo"), S = (e, a, o) => {
   if (!e)
     return null;
   if (typeof e == "function") {
     const i = e;
-    return /* @__PURE__ */ o.jsx(i, { size: l, className: a });
+    return /* @__PURE__ */ n.jsx(i, { size: o, className: a });
   }
   if (typeof e == "object") {
-    if (z(e))
+    if (L(e))
       return e;
-    if ("$$typeof" in e && e.$$typeof === w) {
+    if ("$$typeof" in e && e.$$typeof === R) {
       const i = e;
-      return /* @__PURE__ */ o.jsx(i, { size: l, className: a });
+      return /* @__PURE__ */ n.jsx(i, { size: o, className: a });
     }
   }
   return e;
 };
-function j({
+function v({
   items: e,
   activeTab: a,
-  onTabChange: l,
+  onTabChange: o,
   className: i,
-  tabClassName: n,
+  tabClassName: l,
   activeTabClassName: s,
-  indicatorClassName: f,
+  indicatorClassName: b,
   animated: r = !0,
   renderTab: u
 }) {
-  const b = (t) => {
-    t.disabled || l?.(t.id, t);
-  };
-  return /* @__PURE__ */ o.jsx(
+  const p = (t) => {
+    t.disabled || o?.(t.id, t);
+  }, x = w();
+  return /* @__PURE__ */ n.jsx(
     "div",
     {
       className: d(
-        "flex flex-row justify-around items-end relative border-b border-neutral-strong-default w-full md:justify-start md:px-10 md:gap-5",
+        "flex flex-row justify-around items-end relative border-b border-neutral-strong-default w-full md:justify-start md:px-10 md:gap-5 overflow-hidden",
         i
       ),
       role: "tablist",
       children: e?.map((t) => {
-        const c = a === t.id, m = () => b(t), { iconPosition: p = "top", iconSize: x = 24 } = t;
-        return u ? /* @__PURE__ */ o.jsx("div", { children: u(t, c, m, t.onIconClick, t.onIconHover, t.iconTooltipTitle, t.iconTooltipProps, t.iconSize) }, t.id) : /* @__PURE__ */ o.jsx(
-          L,
+        const c = a === t.id, f = () => p(t), { iconPosition: h = "top", iconSize: m = 24 } = t;
+        return u ? /* @__PURE__ */ n.jsx("div", { children: u(t, c, f, t.onIconClick, t.onIconHover, t.iconTooltipTitle, t.iconTooltipProps, t.iconSize) }, t.id) : /* @__PURE__ */ n.jsx(
+          H,
           {
             id: t.id,
             title: t.title,
             icon: t.icon,
-            iconPosition: p,
-            onClick: m,
+            iconPosition: h,
+            onClick: f,
             disabled: t.disabled,
-            className: n,
+            className: l,
             isActive: c,
             activeClassName: s,
             animated: r,
@@ -61,37 +61,43 @@ function j({
             onIconClick: t.onIconClick,
             iconTooltipTitle: t.iconTooltipTitle,
             iconTooltipProps: t.iconTooltipProps,
-            iconSize: x,
-            indicatorClassName: f
-          }
+            iconSize: m,
+            indicatorClassName: b,
+            layoutId: x
+          },
+          t.id
         );
       })
     }
   );
 }
-j.displayName = "TabLinks";
-const W = I(j, (e, a) => {
+v.displayName = "TabLinks";
+const D = $(v, (e, a) => {
   if (e.activeTab !== a.activeTab || e.className !== a.className || e.tabClassName !== a.tabClassName || e.activeTabClassName !== a.activeTabClassName || e.indicatorClassName !== a.indicatorClassName || e.animated !== a.animated || e.onTabChange !== a.onTabChange || e.renderTab !== a.renderTab || e.items.length !== a.items.length)
     return !1;
-  for (let l = 0; l < e.items.length; l++) {
-    const i = e.items[l], n = a.items[l];
-    if (i.id !== n.id || i.title !== n.title || i.disabled !== n.disabled || i.description !== n.description)
+  for (let o = 0; o < e.items.length; o++) {
+    const i = e.items[o], l = a.items[o];
+    if (i.id !== l.id || i.title !== l.title || i.disabled !== l.disabled || i.description !== l.description)
       return !1;
   }
   return !0;
-}), L = ({ id: e, title: a, icon: l, iconPosition: i = "top", onClick: n, disabled: s = !1, className: f, isActive: r = !1, activeClassName: u, animated: b = !0, onIconHover: t, onIconClick: c, iconTooltipTitle: m, iconTooltipProps: p, iconSize: x = 20, indicatorClassName: k }) => {
-  const C = (h, y, T, N, g) => T ? /* @__PURE__ */ o.jsx($, { title: T, ...N, children: /* @__PURE__ */ o.jsx("div", { onMouseEnter: y, onClick: g, children: h }) }) : /* @__PURE__ */ o.jsx("div", { onMouseEnter: y, onClick: g, children: h });
-  return /* @__PURE__ */ o.jsxs(
+}), H = ({ id: e, title: a, icon: o, iconPosition: i = "top", onClick: l, disabled: s = !1, className: b, isActive: r, activeClassName: u, onIconHover: p, onIconClick: x, iconTooltipTitle: t, iconTooltipProps: c, iconSize: f = 20, indicatorClassName: h, layoutId: m }) => {
+  const y = z(!0);
+  E(() => {
+    y.current && (y.current = !1);
+  }, []);
+  const C = (T, g, j, N, k) => j ? /* @__PURE__ */ n.jsx(M, { title: j, ...N, children: /* @__PURE__ */ n.jsx("div", { onMouseEnter: g, onClick: k, children: T }) }) : /* @__PURE__ */ n.jsx("div", { onMouseEnter: g, onClick: k, children: T });
+  return /* @__PURE__ */ n.jsxs(
     "button",
     {
-      onClick: n,
+      onClick: l,
       disabled: s,
       className: d(
         "group/tablink-item",
         "relative flex flex-col pb-[14px] justify-center items-center h-max px-4 font-medium focus:outline-none transition-colors pt-[14px]",
         s && "hover:text-primary-default-default cursor-pointer",
         s && "opacity-50 cursor-default",
-        f,
+        b,
         r && u
       ),
       tabIndex: s ? -1 : 0,
@@ -99,12 +105,12 @@ const W = I(j, (e, a) => {
       role: "tab",
       "aria-selected": r,
       children: [
-        /* @__PURE__ */ o.jsxs("div", { className: d(
+        /* @__PURE__ */ n.jsxs("div", { className: d(
           "flex items-center gap-0.5",
           i === "left" && "flex-row-reverse",
           i === "top" ? "flex-col-reverse" : "gap-1"
         ), children: [
-          /* @__PURE__ */ o.jsx(
+          /* @__PURE__ */ n.jsx(
             "label",
             {
               className: d(
@@ -115,33 +121,34 @@ const W = I(j, (e, a) => {
               children: a
             }
           ),
-          C(E(l, d(
+          C(S(o, d(
             "transition-all duration-300 ease-in-out group-hover/tablink-item:text-neutral-medium-hover ",
             r ? "text-primary-default-default prometeo-fonts-title-medium group-hover/tablink-item:text-primary-default-default" : "text-neutral-medium-default prometeo-fonts-body-large"
-          ), x), t, m, p, c)
+          ), f), p, t, c, x)
         ] }),
-        r && b && /* @__PURE__ */ o.jsx(
-          v.div,
+        r ? /* @__PURE__ */ n.jsx(
+          I.div,
           {
-            layoutId: "tab-indicator",
+            layoutId: m ? `tab-indicator-${m}` : "tab-indicator",
+            id: `tab-indicator-${e}`,
+            initial: y.current ? !1 : void 0,
             className: d(
-              "absolute -bottom-px left-1/2 -translate-x-1/2  h-[4px] rounded-t-xl bg-primary-default-default z-0 w-[calc(100%-32px)]",
-              k
+              "absolute bottom-0 left-1/2 -translate-x-1/2 h-[4px] rounded-t-xl bg-primary-default-default z-10 w-[calc(100%-32px)]",
+              h
             ),
             transition: {
               type: "spring",
               stiffness: 250,
               damping: 17
-            },
-            "aria-hidden": "true"
+            }
           }
-        )
+        ) : null
       ]
     },
-    e
+    `tablink-${e}`
   );
 };
 export {
-  W as T,
-  L as a
+  D as T,
+  H as a
 };

package/dist/TabLinks.es.js

@@ -1,4 +1,4 @@
-import { T as f } from "./TabLinks-DxqprStp.js";
+import { T as f } from "./TabLinks-BjGwvqR9.js";
 export {
   f as default
 };