prometeo-design-system 2.5.1 → 2.5.3

package/dist/SegmentedButton.es.js

@@ -3,7 +3,7 @@ import { c as s } from "./cn-B6yFEsav.js";
 import z, { useState as M, useMemo as C, useEffect as L } from "react";
 import { motion as E } from "framer-motion";
 const X = (T) => {
-  const [c, _] = M({}), { size: t = "medium", color: R = "default", options: l, value: p, name: x, onChange: j, icon: y, allowExpand: n = !1, disabled: d = !1 } = T, m = Math.max(l.findIndex((e) => e.value === p), 0), w = l.length, N = 9, b = 26, o = {
+  const [c, _] = M({}), { size: t = "medium", color: R = "default", options: l, value: h, name: x, onChange: j, icon: y, allowExpand: n = !1, disabled: d = !1 } = T, m = Math.max(l.findIndex((e) => e.value === h), 0), w = l.length, N = 9, b = 26, o = {
     small: 120,
     medium: 120,
     large: 120
@@ -17,36 +17,36 @@ const X = (T) => {
     large: { container: "p-6" }
   }, f = {
     default: {
-      switch: "bg-primary-medium-default text-neutral-weak-default ",
+      switch: "bg-primary-medium-default text-neutral-weak-default",
       container: "border-neutral-default-default",
       icon: "text-neutral-weak-default",
-      option: "text-neutral-medium-default"
+      option: "text-neutral-medium-pressed"
     },
     success: {
       switch: "bg-success-medium-default text-neutral-weak-default",
       container: "border-neutral-default-default",
       icon: "text-neutral-weak-default",
-      option: "text-neutral-medium-default"
+      option: "text-neutral-medium-pressed"
     },
     danger: {
       switch: "bg-error-medium-default text-neutral-weak-default",
       container: "border-neutral-default-default",
       icon: "text-neutral-weak-default",
-      option: "text-neutral-medium-default"
+      option: "text-neutral-medium-pressed"
     },
     warning: {
       switch: "bg-warning-medium-default text-neutral-weak-default",
       container: "border-neutral-default-default",
       icon: "text-neutral-weak-default",
-      option: "text-neutral-medium-default"
+      option: "text-neutral-medium-pressed"
     },
     disabled: {
       switch: "bg-primary-medium-disabled text-neutral-strong-disabled",
       container: "border-neutral-default-disabled",
       icon: "text-neutral-strong-disabled",
-      option: "text-neutral-strong-disabled"
+      option: "text-neutral-medium-pressed"
     }
-  }, I = l.find((e) => e.value === p) ?? l[0], g = I.label.length * N + k * 2 + b, W = () => C(() => Object.values(c).reduce((i, r) => i + r, 0) + b, [c]), v = {
+  }, I = l.find((e) => e.value === h) ?? l[0], g = I.label.length * N + k * 2 + b, W = () => C(() => Object.values(c).reduce((i, r) => i + r, 0) + b, [c]), v = {
     small: n ? W() : (w - 1) * a.small + o.small,
     medium: n ? W() : (w - 1) * a.medium + o.medium,
     large: n ? W() : (w - 1) * a.large + o.large
@@ -62,7 +62,7 @@ const X = (T) => {
     if (d) return;
     const e = m === l.length - 1 ? l[0] : l[m + 1];
     j?.(x, e.value);
-  }, h = d ? "disabled" : R;
+  }, p = d ? "disabled" : R;
   return /* @__PURE__ */ u.jsxs(
     "button",
     {
@@ -75,8 +75,8 @@ const X = (T) => {
       },
       className: s(
         S[t].container,
-        f[h].container,
-        "border-[1px]",
+        f[p].container,
+        "border",
         !d && "cursor-pointer",
         "relative"
       ),
@@ -98,7 +98,7 @@ const X = (T) => {
             className: s(
               "absolute top-0 left-0 h-full rounded-[6px] z-30",
               "flex items-center justify-center gap-[2px] p-4",
-              f[h].switch
+              f[p].switch
             ),
             onClick: () => {
               !d && D();
@@ -106,7 +106,7 @@ const X = (T) => {
             children: [
               y && z.cloneElement(y, { className: s(
                 "w-6 h-6 text-neutral-weak-default min-w-6 min-h-6",
-                f[h].icon
+                f[p].icon
               ) }),
               /* @__PURE__ */ u.jsx(
                 "p",
@@ -114,7 +114,7 @@ const X = (T) => {
                   className: s(
                     "prometeo-fonts-label-large ",
                     " overflow-hidden overflow-ellipsis text-nowrap select-none ",
-                    f[h].switch
+                    f[p].switch
                   ),
                   children: I.label
                 }
@@ -130,7 +130,7 @@ const X = (T) => {
               "flex justify-center"
             ),
             children: l?.map((e, i) => {
-              const r = e.value === (p || l[0].value), A = n ? c[i] + b : o[t], P = n ? c[i] : a[t], O = r ? A : P;
+              const r = e.value === (h || l[0].value), A = n ? c[i] + b : o[t], P = n ? c[i] : a[t], O = r ? A : P;
               return /* @__PURE__ */ u.jsx(
                 E.span,
                 {
@@ -164,7 +164,7 @@ const X = (T) => {
                       },
                       className: s(
                         "px-3 place-content-center overflow-hidden text-ellipsis text-wrap prometeo-fonts-label-large  h-full select-none",
-                        f[h].option
+                        f[p].option
                       ),
                       children: e.label
                     }

package/dist/{Select-B32JqJIS.js → Select-C-aLaiJu.js}

@@ -5,7 +5,7 @@ import je, { memo as W, useState as fe, useRef as G, useMemo as Z, useCallback a
 import Be from "./Spinner.es.js";
 import { createPortal as Ke } from "react-dom";
 import { u as Ue } from "./useDragScroll-CHN9OMwn.js";
-import { u as qe, I as Fe } from "./Input-Bhd0bmVq.js";
+import { u as qe, I as Fe } from "./Input-PNwH7rb6.js";
 import Ge from "./CheckBox.es.js";
 import { Skeleton as Ce } from "./Skeleton.es.js";
 const He = (r) => {

package/dist/Select.es.js

@@ -1,4 +1,4 @@
-import { S as f } from "./Select-B32JqJIS.js";
+import { S as f } from "./Select-C-aLaiJu.js";
 export {
   f as default
 };

package/dist/SelectFormik.es.js

@@ -1,6 +1,6 @@
 import { j as m } from "./jsx-runtime-DKDX3adD.js";
 import { useField as c } from "formik";
-import { S as f } from "./Select-B32JqJIS.js";
+import { S as f } from "./Select-C-aLaiJu.js";
 import { useRef as d, useEffect as v } from "react";
 function n(r) {
   return Array.isArray(r) && r.every(

package/dist/SelectSearch.es.js

@@ -1,6 +1,6 @@
-import { j as z } from "./jsx-runtime-DKDX3adD.js";
-import { g as i, S as ee } from "./Select-B32JqJIS.js";
-import { useState as y, useRef as O, useEffect as a, useMemo as G, useCallback as H } from "react";
+import { j as $ } from "./jsx-runtime-DKDX3adD.js";
+import { g as s, S as ee } from "./Select-C-aLaiJu.js";
+import { useState as y, useRef as O, useEffect as a, useMemo as q, useCallback as z } from "react";
 function te(e) {
   const {
     options: f,
@@ -8,15 +8,15 @@ function te(e) {
     fetcher: C,
     asyncMode: g = "fetch_in_open",
     disabled: v = !1,
-    debounceDelay: p = 500,
+    debounceDelay: m = 500,
     minCharacters: S = 3,
-    optionLabel: m,
+    optionLabel: p,
     optionValue: d,
     controlledValue: u,
     isOpen: j,
     inputRef: L,
     name: k
-  } = e || {}, [V, _] = y(f || []), [P, w] = y(f || []), [c, T] = y(""), [M, I] = y(!1), [h, A] = y([]), [N, Q] = y(!1), R = O(null), D = O(null), J = O(!1), x = O(C), F = O([]);
+  } = e || {}, [V, _] = y(f || []), [P, w] = y(f || []), [c, T] = y(""), [M, I] = y(!1), [h, A] = y([]), [G, H] = y(!1), R = O(null), D = O(null), J = O(!1), x = O(C), F = O([]);
   a(() => {
     x.current = C;
   }, [C]), a(() => {
@@ -26,100 +26,100 @@ function te(e) {
   }, [u, h]), a(() => {
     e?.options && (_(e.options), w(e.options));
   }, [e?.options]);
-  const K = G(() => (t, n) => new Promise((r, o) => {
+  const K = q(() => (t, n) => new Promise((r, o) => {
     R.current && clearTimeout(R.current), R.current = setTimeout(() => t(c).then(r).catch(o), n);
-  }), [c]), X = (t) => {
+  }), [c]), Q = (t) => {
     const n = u !== void 0, r = F.current;
     let o;
-    const s = (E) => d ? i(E, d) : i(E, "id");
-    l ? r.some((b) => s(b) === s(t)) ? o = r.filter((b) => s(b) !== s(t)) : o = [...r, t] : o = [t], n ? (F.current = o, e?.onChange?.(o, k)) : (F.current = o, A(o), e?.onChange?.(o, k));
-  }, B = (t) => (e?.onFetchingStart?.(), x.current?.(t) || Promise.resolve([])), U = H((t, n) => t.length === 0 ? n : d ? n.filter((r) => !t.some((o) => i(o, d) === i(r, d))) : n.filter((r) => !t.some((o) => i(o, "id") === i(r, "id"))), [d]);
+    const i = (E) => d ? s(E, d) : s(E, "id");
+    l ? r.some((b) => i(b) === i(t)) ? o = r.filter((b) => i(b) !== i(t)) : o = [...r, t] : o = [t], n ? (F.current = o, e?.onChange?.(o, k)) : (F.current = o, A(o), e?.onChange?.(o, k));
+  }, N = (t) => (e?.onFetchingStart?.(), x.current?.(t) || Promise.resolve([])), B = z((t, n) => t.length === 0 ? n : d ? n.filter((r) => !t.some((o) => s(o, d) === s(r, d))) : n.filter((r) => !t.some((o) => s(o, "id") === s(r, "id"))), [d]);
   a(() => {
     const t = e?.subscribeOpenChange;
     if (!t) return;
     const n = t((r) => {
-      Q(r);
+      H(r);
     });
     return () => {
       n && n();
     };
   }, [e?.subscribeOpenChange]);
-  const W = j !== void 0 ? j : N;
+  const U = j !== void 0 ? j : G;
   a(() => {
     if (!v && x.current && g === "fetch_on_type") {
       if (!c || c === "" || c.length < S) {
         R.current && clearTimeout(R.current), I(!1);
         return;
       }
-      const t = K(B, p);
+      const t = K(N, m);
       I(!0), t.then((n) => {
         _(n);
       }).finally(() => {
         I(!1), e?.onFetchingEnd?.();
       });
     }
-  }, [g, c, v, p, K, S]), a(() => {
-    if (W) {
+  }, [g, c, v, m, K, S]), a(() => {
+    if (U) {
       if (e?.onOpen?.(), g === "fetch_in_open") {
         if (!x.current)
           return;
-        I(!0), B().then((t) => {
-          _(() => h.length > 0 ? [...U(h, t), ...h] : t);
+        I(!0), N().then((t) => {
+          _(() => h.length > 0 ? [...B(h, t), ...h] : t);
         }).finally(() => {
           I(!1), e?.onFetchingEnd?.();
         });
       }
     } else
       e?.onClose?.();
-  }, [W, g]);
-  const Y = (t, n) => t.filter((r) => {
-    if (m)
-      return i(r, m).toLowerCase().includes(n.toLowerCase());
+  }, [U, g]);
+  const X = (t, n) => t.filter((r) => {
+    if (p)
+      return s(r, p).toLowerCase().includes(n.toLowerCase());
     switch (typeof r) {
       case "string":
         return r.toLowerCase().includes(n.toLowerCase());
       case "number":
         return r.toString().includes(n);
       case "object":
-        return Object.values(r).some((s) => s.toString().toLowerCase().includes(n.toLowerCase()));
+        return Object.values(r).some((i) => i.toString().toLowerCase().includes(n.toLowerCase()));
       default:
         return !1;
     }
-  }), Z = (t) => t.sort((n, r) => {
-    if (m)
-      return i(n, m) < i(r, m) ? -1 : 1;
+  }), Y = (t) => t.sort((n, r) => {
+    if (p)
+      return s(n, p) < s(r, p) ? -1 : 1;
     {
-      const s = ["label", "name", "value"].find((b) => typeof n == "object" && Object.keys(n).includes(b));
+      const i = ["label", "name", "value"].find((b) => typeof n == "object" && Object.keys(n).includes(b));
       switch (typeof n) {
         case "string":
           return n < r ? -1 : 1;
         case "number":
           return n < r ? -1 : 1;
         case "object":
-          if (s) {
-            const b = i(n, s), $ = i(r, s);
-            return b < $ ? -1 : 1;
+          if (i) {
+            const b = s(n, i), Z = s(r, i);
+            return b < Z ? -1 : 1;
           } else
             return 1;
         default:
           return 1;
       }
     }
-  }), q = (t) => {
+  }), W = (t) => {
     const n = typeof L == "function" ? L() : L;
     t.target === n?.current && (D.current && clearTimeout(D.current), J.current || (J.current = !0, e?.onTypeStart?.()), D.current = setTimeout(() => {
       J.current = !1;
-    }, p));
+    }, m));
   };
   return a(() => {
     if (c === "")
-      w(Z(V));
+      w(Y(V));
     else {
-      const t = U(h, V);
-      w([...Y(t, c), ...h]);
+      const t = B(h, V);
+      w([...X(t, c), ...h]);
     }
-  }, [V]), a(() => (document.addEventListener("keydown", q), () => {
-    document.removeEventListener("keydown", q);
+  }, [V]), a(() => (document.addEventListener("keydown", W), () => {
+    document.removeEventListener("keydown", W);
   }), []), {
     inputValue: c,
     setInputValue: T,
@@ -130,11 +130,11 @@ function te(e) {
     isLoading: M,
     value: h,
     setValue: A,
-    onOptionClick: X
+    onOptionClick: Q
   };
 }
-const ie = (e) => {
-  const f = O(null), { asyncMode: l = "fetch_in_open" } = e, { inputValue: C, setInputValue: g, filteredOptions: v, isLoading: p, value: S, onOptionClick: m, cleanInputValue: d } = te({
+const se = (e) => {
+  const f = O(null), { asyncMode: l = "fetch_in_open" } = e, { inputValue: C, setInputValue: g, filteredOptions: v, isLoading: m, value: S, onOptionClick: p, cleanInputValue: d } = te({
     options: e.options,
     fetcher: e.fetcher,
     asyncMode: l,
@@ -156,9 +156,9 @@ const ie = (e) => {
     subscribeOpenChange: f.current?.subscribeOpenChange,
     onChange: e.onChange,
     name: e.name
-  }), u = G(() => S.map((c) => i(c, e.optionValue)), [S, e.optionValue]), j = H(() => l === "fetch_on_type" ? p : !1, [l, p]), L = (c) => {
-    const T = v.find((M) => i(M, e.optionValue) === c.id);
-    T && m(T);
+  }), u = q(() => S.map((c) => s(c, e.optionValue)), [S, e.optionValue]), j = z(() => l === "fetch_on_type" ? m : !1, [l, m]), L = (c) => {
+    const T = v.find((M) => s(M, e.optionValue) === c.id);
+    T && p(T);
   }, { displayMode: k = "chips", dropdownOptions: V, overflow: _ = "scroll", ...P } = e.selectComponentProps || {}, w = {
     controledSearchValue: C,
     onSearchValueChange: l === "fetch_on_type" ? g : void 0,
@@ -167,9 +167,10 @@ const ie = (e) => {
     isLoading: j(),
     ...V || {}
   };
-  return /* @__PURE__ */ z.jsx("div", { children: /* @__PURE__ */ z.jsx(
+  return /* @__PURE__ */ $.jsx(
     ee,
     {
+      className: e.className,
       name: e.name,
       overflow: _,
       ...P,
@@ -185,10 +186,10 @@ const ie = (e) => {
       controls: f,
       emptyMessage: "Use el buscador para obtener las opciones disponibles",
       dropdownOptions: w,
-      isLoading: l === "fetch_in_open" ? p : !1
+      isLoading: l === "fetch_in_open" ? m : !1
     }
-  ) });
+  );
 };
 export {
-  ie as default
+  se as default
 };

package/dist/components/Drawer/DrawerMobile.d.ts

@@ -1,8 +1,8 @@
 import { default as React } from 'react';
-export interface DrawerMobileProps {
+export interface DrawerMobileProps<TContext = unknown> {
     children?: React.ReactNode;
     defaultOpen?: boolean;
-    onClose?: () => void;
+    onClose?: (context: TContext | null) => void;
     snap?: string | number | null;
     snapPoints?: (string | number)[];
     setSnap?: (snap: string | number) => void;
@@ -12,10 +12,11 @@ export interface DrawerMobileProps {
     modal?: boolean;
     closeOnOverlayClick?: boolean;
 }
-export interface DrawerMobileHandle {
-    open: (snap?: string | number) => void;
+export interface DrawerMobileHandle<TContext = unknown> {
+    open: (snap?: string | number, context?: TContext) => void;
     close: () => void;
     isOpen: boolean;
+    getContext: () => TContext | null;
 }
-declare const DrawerMobile: React.ForwardRefExoticComponent<DrawerMobileProps & React.RefAttributes<DrawerMobileHandle>>;
+declare const DrawerMobile: React.ForwardRefExoticComponent<DrawerMobileProps<any> & React.RefAttributes<DrawerMobileHandle<any>>>;
 export default DrawerMobile;

package/dist/components/Drawer/useDrawerMobile.d.ts

@@ -1,7 +1,8 @@
 import { DrawerMobileHandle } from './DrawerMobile';
-export declare const useDrawerMobile: () => {
+export declare const useDrawerMobile: <TContext = unknown>() => {
     isOpen: () => boolean;
-    open: (snap?: string | number) => void;
+    open: (snap?: string | number, context?: TContext) => void;
     close: () => void;
-    drawerRef: import('react').RefObject<DrawerMobileHandle | null>;
+    drawerRef: import('react').RefObject<DrawerMobileHandle<TContext> | null>;
+    getContext: () => NonNullable<TContext> | null;
 };

package/dist/components/FAB/FAButton.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { ColorVariant, ButtonVariant } from '../Shared/types';
+import { IconComponent } from '../../Icons/Icons';
+export interface FAButtonProps {
+    icon?: IconComponent;
+    label?: string;
+    attachToParent?: boolean;
+    position?: {
+        left?: number | string;
+        top?: number | string;
+        right?: number | string;
+        bottom?: number | string;
+    };
+    color?: ColorVariant;
+    variant?: ButtonVariant;
+    disabled?: boolean;
+    className?: string;
+    onClick: () => void;
+}
+declare const FAButton: React.MemoExoticComponent<(props: FAButtonProps) => import("react/jsx-runtime").JSX.Element>;
+export default FAButton;

package/dist/components/OtpInput/OtpInput.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 export interface OtpInputProps {
     value?: string;
-    onChange?: (value: string) => void;
+    onChange?: (value: string, name?: string) => void;
     onComplete?: (value: string) => void;
     onBlur?: () => void;
     maxLength?: number;
@@ -23,5 +23,8 @@ export interface OtpInputProps {
     name?: string;
     variant?: 'default' | 'error' | 'success';
 }
-declare const OtpInputComponent: ({ value, name, onChange, onComplete, onBlur, maxLength, placeholder, disabled, className, autoFocus, pasteTransformer, errorComponent, hasError, helperComponent, helperAlignment, slotClassName, variant, hideSlotsMiddleSeparator }: OtpInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const OtpInputComponent: {
+    ({ value, name, onChange, onComplete, onBlur, maxLength, placeholder, disabled, className, autoFocus, pasteTransformer, errorComponent, hasError, helperComponent, helperAlignment, slotClassName, variant, hideSlotsMiddleSeparator }: OtpInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default OtpInputComponent;

package/dist/components/SelectSearch/SelectSearch.d.ts

@@ -16,6 +16,7 @@ export interface SelectSearchProps<T> {
     inputSearchPlaceholder?: string;
     labelVariant?: 'static' | 'default';
     disabled?: boolean;
+    className?: string;
     renderOption?: ComponentType<CustomSelectOptionRendererProps<T>>;
     renderSelection?: ComponentType<CustomSelectionDisplayProps<T>>;
     selectComponentProps?: Partial<SelectProps<T>>;

package/dist/exports/FAButton.d.ts

@@ -0,0 +1 @@
+export { default } from '../components/FAB/FAButton';

package/dist/index.d.ts

@@ -37,6 +37,7 @@ export { default as Toast } from './components/Toaster/Toaster';
 export { default as ToastProvider } from './components/Toaster/ToastProvider';
 export { toastpyrion } from './components/Toaster/Toaster';
 export { default as SelectSearch } from './components/SelectSearch/SelectSearch';
+export { default as FAButton } from './components/FAB/FAButton';
 export * from './components/Sidebar';
 export { SecondaryBar } from './components/Sidebar/SecondaryBar/SecondaryBar';
 export { Badge } from './components/Sidebar/components/badge';
@@ -99,4 +100,5 @@ export type { CustomSelectionDisplayProps } from './components/Select/Select';
 export type { CustomSelectOptionRendererProps } from './components/Select/Select';
 export type { SelectOptionType } from './components/Select/Select';
 export type { SelectSearchProps } from './components/SelectSearch/SelectSearch';
+export type { FAButtonProps } from './components/FAB/FAButton';
 export { Icons } from './Icons/Icons';

package/dist/pages/ButtonsPage.d.ts

@@ -0,0 +1,2 @@
+declare const ButtonsPage: () => import("react/jsx-runtime").JSX.Element;
+export default ButtonsPage;

package/dist/pages/OtpPage.d.ts

@@ -0,0 +1,2 @@
+declare const OtpPage: () => import("react/jsx-runtime").JSX.Element;
+export default OtpPage;

package/dist/preview/FABPreview.d.ts

@@ -0,0 +1,2 @@
+declare const FABPreview: () => import("react/jsx-runtime").JSX.Element;
+export default FABPreview;

package/dist/preview/OTPPreview.d.ts

@@ -0,0 +1,2 @@
+declare const OTPPreview: () => import("react/jsx-runtime").JSX.Element;
+export default OTPPreview;

package/dist/preview/SegmentedButtonPreview.d.ts

@@ -0,0 +1,2 @@
+declare const SegmentedButtonPreview: () => import("react/jsx-runtime").JSX.Element;
+export default SegmentedButtonPreview;