prometeo-design-system 4.4.0 → 4.4.3

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-BjGwvqR9.js → TabLinks-DnoWdrdk.js}

@@ -1,21 +1,21 @@
-import { j as n } from "./jsx-runtime-GkKLlHH4.js";
+import { j as i } 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 M from "./PlainTooltip.es.js";
-const R = /* @__PURE__ */ Symbol.for("react.memo"), S = (e, a, o) => {
+const R = /* @__PURE__ */ Symbol.for("react.memo"), S = (e, a, n) => {
   if (!e)
     return null;
   if (typeof e == "function") {
-    const i = e;
-    return /* @__PURE__ */ n.jsx(i, { size: o, className: a });
+    const o = e;
+    return /* @__PURE__ */ i.jsx(o, { size: n, className: a });
   }
   if (typeof e == "object") {
     if (L(e))
       return e;
     if ("$$typeof" in e && e.$$typeof === R) {
-      const i = e;
-      return /* @__PURE__ */ n.jsx(i, { size: o, className: a });
+      const o = e;
+      return /* @__PURE__ */ i.jsx(o, { size: n, className: a });
     }
   }
   return e;
@@ -23,28 +23,28 @@ const R = /* @__PURE__ */ Symbol.for("react.memo"), S = (e, a, o) => {
 function v({
   items: e,
   activeTab: a,
-  onTabChange: o,
-  className: i,
-  tabClassName: l,
+  onTabChange: n,
+  className: o,
+  tabClassName: r,
   activeTabClassName: s,
   indicatorClassName: b,
-  animated: r = !0,
+  animated: l = !0,
   renderTab: u
 }) {
-  const p = (t) => {
-    t.disabled || o?.(t.id, t);
-  }, x = w();
-  return /* @__PURE__ */ n.jsx(
+  const x = (t) => {
+    t.disabled || n?.(t.id, t);
+  }, p = w();
+  return /* @__PURE__ */ i.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 overflow-hidden",
-        i
+        "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-x-auto prometeo-scrollbar-none",
+        o
       ),
       role: "tablist",
       children: e?.map((t) => {
-        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(
+        const c = a === t.id, f = () => x(t), { iconPosition: h = "top", iconSize: m = 24 } = t;
+        return u ? /* @__PURE__ */ i.jsx("div", { children: u(t, c, f, t.onIconClick, t.onIconHover, t.iconTooltipTitle, t.iconTooltipProps, t.iconSize) }, t.id) : /* @__PURE__ */ i.jsx(
           H,
           {
             id: t.id,
@@ -53,17 +53,17 @@ function v({
             iconPosition: h,
             onClick: f,
             disabled: t.disabled,
-            className: l,
+            className: r,
             isActive: c,
             activeClassName: s,
-            animated: r,
+            animated: l,
             onIconHover: t.onIconHover,
             onIconClick: t.onIconClick,
             iconTooltipTitle: t.iconTooltipTitle,
             iconTooltipProps: t.iconTooltipProps,
             iconSize: m,
             indicatorClassName: b,
-            layoutId: x
+            layoutId: p
           },
           t.id
         );
@@ -75,22 +75,22 @@ 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 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)
+  for (let n = 0; n < e.items.length; n++) {
+    const o = e.items[n], r = a.items[n];
+    if (o.id !== r.id || o.title !== r.title || o.disabled !== r.disabled || o.description !== r.description)
       return !1;
   }
   return !0;
-}), 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 }) => {
+}), H = ({ id: e, title: a, icon: n, iconPosition: o = "top", onClick: r, disabled: s = !1, className: b, isActive: l, activeClassName: u, onIconHover: x, onIconClick: p, 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(
+  const C = (T, g, j, N, k) => j ? /* @__PURE__ */ i.jsx(M, { title: j, ...N, children: /* @__PURE__ */ i.jsx("div", { onMouseEnter: g, onClick: k, children: T }) }) : /* @__PURE__ */ i.jsx("div", { onMouseEnter: g, onClick: k, children: T });
+  return /* @__PURE__ */ i.jsxs(
     "button",
     {
-      onClick: l,
+      onClick: r,
       disabled: s,
       className: d(
         "group/tablink-item",
@@ -98,35 +98,35 @@ const D = $(v, (e, a) => {
         s && "hover:text-primary-default-default cursor-pointer",
         s && "opacity-50 cursor-default",
         b,
-        r && u
+        l && u
       ),
       tabIndex: s ? -1 : 0,
       "aria-label": a,
       role: "tab",
-      "aria-selected": r,
+      "aria-selected": l,
       children: [
-        /* @__PURE__ */ n.jsxs("div", { className: d(
+        /* @__PURE__ */ i.jsxs("div", { className: d(
           "flex items-center gap-0.5",
-          i === "left" && "flex-row-reverse",
-          i === "top" ? "flex-col-reverse" : "gap-1"
+          o === "left" && "flex-row-reverse",
+          o === "top" ? "flex-col-reverse" : "gap-1"
         ), children: [
-          /* @__PURE__ */ n.jsx(
+          /* @__PURE__ */ i.jsx(
             "label",
             {
               className: d(
                 "transition-all duration-300 ease-in-out relative z-10 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 cursor-pointer",
-                "leading-6! line-clamp-1"
+                l ? "text-primary-default-default prometeo-fonts-title-medium group-hover/tablink-item:text-primary-default-default" : "text-neutral-medium-default prometeo-fonts-body-large cursor-pointer",
+                "leading-6! min-w-max"
               ),
               children: a
             }
           ),
-          C(S(o, d(
+          C(S(n, 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"
-          ), f), p, t, c, x)
+            l ? "text-primary-default-default prometeo-fonts-title-medium group-hover/tablink-item:text-primary-default-default" : "text-neutral-medium-default prometeo-fonts-body-large"
+          ), f), x, t, c, p)
         ] }),
-        r ? /* @__PURE__ */ n.jsx(
+        l ? /* @__PURE__ */ i.jsx(
           I.div,
           {
             layoutId: m ? `tab-indicator-${m}` : "tab-indicator",

package/dist/TabLinks.es.js

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

package/dist/components/CheckBox/CheckBox.d.ts

@@ -6,6 +6,7 @@ export type CheckBoxProps = {
 interface ICheckBox extends CheckBoxProps {
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     value?: string;
+    checked?: boolean;
 }
 declare const _default: import('react').NamedExoticComponent<Omit<ICheckBox, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
 export default _default;

package/dist/components/Header/Header.d.ts

@@ -6,6 +6,7 @@ export interface IHeader {
     subtitle?: string;
     subtitleClassName?: string;
     titleClassName?: string;
+    mainActionSlot?: ReactNode | (() => ReactNode);
 }
-declare const _default: import('react').MemoExoticComponent<({ title, subtitle, children, className, subtitleClassName, titleClassName }: IHeader) => import("react/jsx-runtime").JSX.Element>;
-export default _default;
+declare const Header: import('react').MemoExoticComponent<({ title, subtitle, children, className, subtitleClassName, titleClassName, mainActionSlot }: IHeader) => import("react/jsx-runtime").JSX.Element>;
+export default Header;

package/dist/components/Input/Input.d.ts

@@ -1,5 +1,5 @@
 export type InputVariant = "default" | "error" | "success";
-export type InputSize = "small" | "medium" | "large";
+export type InputSize = "xsmall" | "small" | "medium" | "large";
 export type LabelVariant = "default" | "static";
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
     label: string;
@@ -31,5 +31,5 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onClickIcon?: (event: React.MouseEvent) => void;
 }
-declare const _default: import('react').NamedExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
-export default _default;
+declare const Input: import('react').NamedExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
+export default Input;

package/dist/components/Shared/Chip.d.ts

@@ -1,6 +1,6 @@
 import { ComponentVariant } from './types';
-type ChipProps = {
-    id: string | number;
+export type ChipProps = {
+    id?: string | number;
     label: string;
     onRemove?: (optionId: string | number) => void;
     className?: string;

package/dist/exports/Chip.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../components/Shared/Chip';
+export type { ChipProps } from '../components/Shared/Chip';

package/dist/prometeo-design-system.es.js

@@ -21,7 +21,7 @@ import { D as ne } from "./DatePicker-QuBgR5DQ.js";
 import { RecurrentDatePicker as me } from "./RecurrentDatePicker.es.js";
 import { RecurrentDatePickerRRule as ie } from "./RecurrentDatePickerRRule.es.js";
 import { Table as ce, TableBody as be, TableCaption as De, TableCell as ve, TableFooter as Te, TableHead as ge, TableHeader as ke, TableRow as he } from "./Table.es.js";
-import { T as Ce } from "./TabLinks-BjGwvqR9.js";
+import { T as Ce } from "./TabLinks-DnoWdrdk.js";
 import { default as Ee } from "./TextArea.es.js";
 import { default as Re } from "./Tooltip.es.js";
 import { default as Se } from "./Skeleton.es.js";