@envisiongroup/porygon 1.0.0-rc.8 → 1.0.0

package/dist/react-components/buttons/EFWButton/EFWButton.js

@@ -1,9 +1,10 @@
-import { jsx as s } from "react/jsx-runtime";
-import * as C from "react";
-import { makeStyles as q, tokens as t, Tooltip as v, Spinner as K, Button as Q } from "@fluentui/react-components";
-import { ErrorCircleRegular as U, CheckmarkRegular as V } from "@fluentui/react-icons";
-import { useEFWButton as X } from "./EFWButton.hooks.js";
-const Y = q({
+import { jsx as c } from "react/jsx-runtime";
+import * as y from "react";
+import { makeStyles as ne, tokens as t, Tooltip as se, Spinner as ae, Button as ie } from "@fluentui/react-components";
+import { ErrorCircleRegular as ce, CheckmarkRegular as le } from "@fluentui/react-icons";
+import { useEFWButton as ue } from "./EFWButton.hooks.js";
+import { useButtonsLocaleText as de } from "../../i18n/PorygonI18nProvider.js";
+const ge = ne({
   /**
    * Estilo para botón no interactivo (estado de carga con deshabilitación).
    * Aplica opacidad reducida y deshabilita eventos de puntero.
@@ -39,126 +40,193 @@ const Y = q({
     "& .ms-Button-icon": {
       color: `${t.colorStatusSuccessForeground1} !important`
     }
+  },
+  /**
+   * Oculta el label cuando el contenedor padre es ≤ 480px.
+   * Requiere que un ancestro tenga `container-type: inline-size`.
+   */
+  collapseLabelXs: {
+    "@container (max-width: 480px)": {
+      padding: "5px",
+      "& .efw-button__label": { display: "none" },
+      "& .fui-Button__icon": { marginRight: 0 },
+      minWidth: "auto"
+    }
+  },
+  /**
+   * Oculta el label cuando el contenedor padre es ≤ 640px.
+   * Requiere que un ancestro tenga `container-type: inline-size`.
+   */
+  collapseLabelSm: {
+    "@container (max-width: 640px)": {
+      padding: "5px",
+      "& .efw-button__label": { display: "none" },
+      "& .fui-Button__icon": { marginRight: 0 },
+      minWidth: "auto"
+    }
+  },
+  /**
+   * Oculta el label cuando el contenedor padre es ≤ 768px.
+   * Requiere que un ancestro tenga `container-type: inline-size`.
+   */
+  collapseLabelMd: {
+    "@container (max-width: 768px)": {
+      padding: "5px",
+      "& .efw-button__label": { display: "none" },
+      "& .fui-Button__icon": { marginRight: 0 },
+      minWidth: "auto"
+    }
+  },
+  /**
+   * Oculta el label cuando el contenedor padre es ≤ 1024px.
+   * Requiere que un ancestro tenga `container-type: inline-size`.
+   */
+  collapseLabelLg: {
+    "@container (max-width: 1024px)": {
+      padding: "5px",
+      "& .efw-button__label": { display: "none" },
+      "& .fui-Button__icon": { marginRight: 0 },
+      minWidth: "auto"
+    }
   }
 });
-function Z(r) {
-  return r instanceof Error ? r : _(r) ? r === void 0 ? new Error("Operación fallida sin detalles (void)") : r.success ? new Error("Operación reportada como exitosa en un error") : r.error instanceof Error ? r.error : new Error(r.error || "Operación fallida sin mensaje") : new Error(String(r) || "Error desconocido");
+function pe(e, r) {
+  return e instanceof Error ? e : fe(e) ? e === void 0 ? new Error(r.operationFailedMessage) : e.success ? new Error(r.operationFailedMessage) : e.error instanceof Error ? e.error : new Error(e.error || r.operationFailedMessage) : new Error(String(e) || r.unknownErrorMessage);
 }
-function _(r) {
-  return r === void 0 ? !0 : typeof r == "object" && r !== null && "success" in r && typeof r.success == "boolean" && (r.error === void 0 || typeof r.error == "string" || r.error instanceof Error);
+function fe(e) {
+  return e === void 0 ? !0 : typeof e == "object" && e !== null && "success" in e && typeof e.success == "boolean" && (e.error === void 0 || typeof e.error == "string" || e.error instanceof Error);
 }
-const L = (r) => {
-  if (!r) return "Ha ocurrido un error";
-  if (r instanceof Error) return r.message;
-  if (typeof r == "string") return r;
-  if (typeof r == "object" && r !== null) {
-    const n = r;
-    if (typeof n.message == "string") return n.message;
-    if (typeof n.error == "string") return n.error;
+const me = (e, r) => {
+  if (!e) return r.defaultErrorMessage;
+  if (e instanceof Error) return e.message || r.defaultErrorMessage;
+  if (typeof e == "string") return e;
+  if (typeof e == "object" && e !== null) {
+    const n = e;
+    if (typeof n.message == "string") return n.message || r.defaultErrorMessage;
+    if (typeof n.error == "string") return n.error || r.defaultErrorMessage;
     try {
-      return JSON.stringify(r);
+      return JSON.stringify(e);
     } catch {
-      return "Error: No es posible parsear error";
+      return r.parseErrorMessage;
     }
   }
-  return String(r) || "Ha ocurrido un error";
-}, sr = ({
-  onClick: r,
-  loadingText: n = "Procesando...",
-  disableOnLoading: u = !0,
-  autoLoading: l = !1,
-  successConfig: $ = {},
-  errorConfig: h = {},
-  tooltips: c,
-  showStatusIcons: d = !0,
-  autoReset: R = !0,
-  children: f,
-  disabled: m,
-  className: F,
-  appearance: P = "secondary",
-  icon: i,
-  ...T
+  return String(e) || r.defaultErrorMessage;
+}, Ee = {}, be = {}, Fe = ({
+  onClick: e,
+  disableOnLoading: r = !0,
+  autoLoading: n = !1,
+  successConfig: I = Ee,
+  errorConfig: U = be,
+  labels: l,
+  tooltips: g,
+  showStatusIcons: E = !0,
+  autoReset: v = !0,
+  collapseLabel: p,
+  children: b,
+  disabled: M,
+  className: X,
+  appearance: Y = "secondary",
+  icon: u,
+  ...z
 }) => {
-  const p = Y(), { onSuccess: x, timeout: w = 2e3, text: O } = $, { onError: W, timeout: G = 2e3, text: D } = h, { currentState: y, isLoading: g, error: H, setLoading: k, stopLoading: S, setSuccess: N, setError: a } = X({
-    onError: W,
-    onSuccess: x,
-    successTimeout: w,
-    errorTimeout: G,
-    autoReset: R
-  }), b = C.useCallback(
+  const s = ge(), d = de().button.labels, _ = d.loadingText, w = d.defaultErrorMessage, F = d.operationFailedMessage, S = d.unknownErrorMessage, T = d.parseErrorMessage, B = l?.loadingText, C = l?.defaultErrorMessage, N = l?.operationFailedMessage, R = l?.unknownErrorMessage, L = l?.parseErrorMessage, a = y.useMemo(() => ({
+    loadingText: B ?? _,
+    defaultErrorMessage: C ?? w,
+    operationFailedMessage: N ?? F,
+    unknownErrorMessage: R ?? S,
+    parseErrorMessage: L ?? T
+  }), [
+    B,
+    C,
+    N,
+    R,
+    L,
+    _,
+    w,
+    F,
+    S,
+    T
+  ]), { onSuccess: A, timeout: J = 2e3, text: q } = I, { onError: H, timeout: K = 2e3, text: Q } = U, { currentState: j, isLoading: x, error: V, setLoading: P, stopLoading: $, setSuccess: W, setError: f } = ue({
+    onError: H,
+    onSuccess: A,
+    successTimeout: J,
+    errorTimeout: K,
+    autoReset: v,
+    fallbackErrorMessage: a.operationFailedMessage
+  }), k = y.useCallback(
     (o) => {
       if (!o)
-        S();
+        $();
       else if (typeof o == "object")
         if (o.success)
-          N();
+          W();
         else {
-          const e = o.error instanceof Error ? o.error : new Error(String(o.error || "Operación fallida"));
-          a(e);
+          const i = o.error instanceof Error ? o.error : new Error(String(o.error || a.operationFailedMessage));
+          f(i);
         }
     },
-    [S, N, a]
-  ), z = C.useCallback(async (o) => {
-    if (!(!r || g || m))
+    [$, W, f, a.operationFailedMessage]
+  ), Z = y.useCallback(async (o) => {
+    if (!(!e || x || M))
       try {
-        const e = r(o);
-        if (e instanceof Promise) {
-          l && k();
-          const E = await e;
-          l && b(E);
+        const i = e(o);
+        if (i instanceof Promise) {
+          n && P();
+          const h = await i;
+          n && k(h);
         } else
-          b(e);
-      } catch (e) {
-        const E = Z(e);
-        a(E);
+          k(i);
+      } catch (i) {
+        const h = pe(i, a);
+        f(h);
       }
-  }, [r, g, m, l, k, b, a]), A = () => {
-    const o = [F].filter(Boolean);
-    switch (y) {
+  }, [e, x, M, n, P, k, f, a]), O = u && p ? p === "sm" ? s.collapseLabelSm : p === "md" ? s.collapseLabelMd : p === "lg" ? s.collapseLabelLg : s.collapseLabelXs : void 0, m = (o) => O ? o ? /* @__PURE__ */ c("span", { className: "efw-button__label", children: o }) : void 0 : o, ee = () => {
+    const o = [X, O].filter(Boolean);
+    switch (j) {
       case "loading":
         return {
-          content: n,
-          icon: d ? /* @__PURE__ */ s(K, { size: "tiny" }) : i,
-          className: u ? [...o, p.buttonNonInteractive].join(" ") : o.join(" "),
-          tooltip: c?.loading
+          content: m(a.loadingText),
+          icon: E ? /* @__PURE__ */ c(ae, { size: "tiny" }) : u,
+          className: r ? [...o, s.buttonNonInteractive].join(" ") : o.join(" "),
+          tooltip: g?.loading
         };
       case "success":
         return {
-          content: O ?? f,
-          icon: d ? /* @__PURE__ */ s(V, {}) : i,
-          className: [...o, p.buttonSuccess].join(" "),
-          tooltip: c?.success
+          content: m(q ?? b),
+          icon: E ? /* @__PURE__ */ c(le, {}) : u,
+          className: [...o, s.buttonSuccess].join(" "),
+          tooltip: g?.success
         };
       case "error":
         return {
-          content: D ?? f,
-          icon: d ? /* @__PURE__ */ s(U, {}) : i,
-          className: [...o, p.buttonError].join(" "),
-          tooltip: c?.error ?? L(H)
+          content: m(Q ?? b),
+          icon: E ? /* @__PURE__ */ c(ce, {}) : u,
+          className: [...o, s.buttonError].join(" "),
+          tooltip: g?.error ?? me(V, a)
         };
       default:
         return {
-          content: f,
-          icon: i,
+          content: m(b),
+          icon: u,
           className: o.join(" "),
-          tooltip: c?.idle
+          tooltip: g?.idle
         };
     }
-  }, { content: I, icon: J, className: M, tooltip: B } = A(), j = /* @__PURE__ */ s(
-    Q,
+  }, { content: oe, icon: re, className: te, tooltip: G } = ee(), D = /* @__PURE__ */ c(
+    ie,
     {
-      ...T,
-      appearance: P,
-      className: M,
-      disabled: m || u && g,
-      disabledFocusable: y === "loading" && u,
-      icon: J,
-      onClick: z,
-      children: I
+      ...z,
+      appearance: Y,
+      className: te,
+      disabled: M || r && x,
+      disabledFocusable: j === "loading" && r,
+      icon: re,
+      onClick: Z,
+      children: oe
     }
   );
-  return B ? /* @__PURE__ */ s(v, { content: B, relationship: "label", children: j }) : j;
+  return G ? /* @__PURE__ */ c(se, { content: G, relationship: "label", children: D }) : D;
 };
 export {
-  sr as EFWButton
+  Fe as EFWButton
 };

package/dist/react-components/buttons/EFWButton/EFWButton.types.d.ts

@@ -108,6 +108,18 @@ export interface TooltipConfig {
     /** Tooltip mostrado cuando ocurrió un error */
     error?: string;
 }
+export interface EFWButtonLabels {
+    /** Texto mostrado cuando el botón está en estado de carga */
+    loadingText?: string;
+    /** Mensaje de error genérico mostrado al usuario */
+    defaultErrorMessage?: string;
+    /** Mensaje usado cuando una operación falla sin mensaje específico */
+    operationFailedMessage?: string;
+    /** Mensaje usado cuando no es posible determinar el error */
+    unknownErrorMessage?: string;
+    /** Mensaje usado cuando no se puede serializar un error de objeto */
+    parseErrorMessage?: string;
+}
 type EFWButtonClickEvent = Parameters<NonNullable<ButtonProps['onClick']>>[0];
 /**
  * Propiedades del componente EFWButton.
@@ -124,7 +136,7 @@ type EFWButtonClickEvent = Parameters<NonNullable<ButtonProps['onClick']>>[0];
  *     await saveData();
  *     return { success: true };
  *   }}
- *   loadingText="Guardando..."
+ *   labels={{ loadingText: "Guardando..." }}
  *   autoLoading={true}
  *   successConfig={{
  *     text: 'Guardado',
@@ -141,11 +153,6 @@ export interface EFWButtonProps extends Omit<ButtonProps, "onClick"> {
      * Puede retornar una Promise o un valor directo con el resultado de la operación.
      */
     onClick?: (event: EFWButtonClickEvent) => Promise<EFWButtonActionResult> | EFWButtonActionResult;
-    /**
-     * Texto personalizado a mostrar durante el estado de carga.
-     * @default "Cargando..."
-     */
-    loadingText?: string;
     /**
      * Desactiva el botón durante el estado de carga para evitar múltiples clics.
      * @default true
@@ -172,6 +179,20 @@ export interface EFWButtonProps extends Omit<ButtonProps, "onClick"> {
      * @default true
      */
     autoReset?: boolean;
+    /**
+     * Oculta el label del botón cuando su contenedor padre es menor al breakpoint,
+     * mostrando solo el icono para optimizar espacio. Usa CSS Container Queries.
+     * Solo aplica cuando el botón tiene la prop `icon` definida.
+     * Requiere que un ancestro tenga `container-type: inline-size`.
+     * - true | "xs": oculta en contenedor ≤ 480px (default)
+     * - "sm": oculta en contenedor ≤ 640px
+     * - "md": oculta en contenedor ≤ 768px
+     * - "lg": oculta en contenedor ≤ 1024px
+     * @default undefined
+     */
+    collapseLabel?: boolean | "xs" | "sm" | "md" | "lg";
+    /** Textos de UI internos del componente para localización. */
+    labels?: EFWButtonLabels;
 }
 /**
  * Interfaz para los métodos expuestos por el hook useEFWButton.
@@ -278,5 +299,10 @@ export interface UseEFWButtonOptions {
      * @default true
      */
     autoReset?: boolean;
+    /**
+     * Mensaje usado cuando una operación falla sin mensaje específico.
+     * @default "Operation failed"
+     */
+    fallbackErrorMessage?: string;
 }
 export {};

package/dist/react-components/buttons/EFWButton/index.d.ts

@@ -1,3 +1,3 @@
 export { EFWButton } from './EFWButton';
 export { useEFWButton } from './EFWButton.hooks';
-export type { EFWButtonProps, EFWButtonHandle, EFWButtonActionResult, UseEFWButtonOptions } from './EFWButton.types';
+export type { EFWButtonProps, EFWButtonHandle, EFWButtonActionResult, UseEFWButtonOptions, EFWButtonLabels } from './EFWButton.types';

package/dist/react-components/buttons/EFWDrawerButton/EFWDrawerButton.d.ts

@@ -28,7 +28,7 @@ import * as React from 'react';
  *     return { success: true };
  *   }}
  *   drawerConfig={{ position: 'end' }}
- *   loadingText="Cargando perfil..."
+ *   labels={{ loadingText: "Cargando perfil..." }}
  * >
  *   Ver perfil
  * </EFWDrawerButton>

package/dist/react-components/buttons/EFWDrawerButton/EFWDrawerButton.types.d.ts

@@ -44,7 +44,7 @@ export type EFWDrawerButtonClickHandler = (event: React.MouseEvent<HTMLButtonEle
  *   },
  *   drawerConfig: { size: 'medium', position: 'end' },
  *   autoOpenDrawer: true,
- *   loadingText: 'Processing...',
+ *   labels: { loadingText: 'Processing...' },
  *   appearance: 'primary',
  * };
  */

package/dist/react-components/buttons/EFWGroupButton/EFWGroupButton.d.ts

@@ -1,65 +1,3 @@
 import { EFWGroupButtonProps } from './EFWGroupButton.types';
 
-/**
- * Componente de grupo de botones que permite renderizar múltiples tipos de botones
- * de Fluent UI, EFWButton y EFWDrawerButton en un contenedor flexible.
- *
- * @template T - Tipo de los parámetros que se pasarán a los manejadores onClick.
- *               Debe extender Record<string, any> para asegurar que sea un objeto.
- *
- * @description
- * Este componente proporciona:
- * - Renderizado unificado de diferentes tipos de botones
- * - Inyección automática de parámetros contextuales a los handlers
- * - Detección inteligente del tipo de botón para manejo especializado
- * - Layout flexible con espaciado personalizable
- * - Soporte para EFWDrawerButton con manejo específico de callbacks del drawer
- *
- * **¿Por qué T extends Record<string, any>?**
- * La restricción asegura que T sea un objeto, lo cual es lógico para parámetros
- * contextuales que típicamente contienen múltiples propiedades (userId, action, etc.)
- *
- * @param props - Propiedades del componente
- * @returns JSX.Element - Contenedor div con los botones renderizados
- *
- * @example
- * ```tsx
- * interface UserActionParams {
- *   userId: string;
- *   action: 'edit' | 'delete' | 'view';
- * }
- *
- * <EFWGroupButton<UserActionParams>
- *   buttons={[
- *     {
- *       component: Button,
- *       props: {
- *         children: 'Edit',
- *         onClick: (event, params) => handleEdit(params.userId)
- *       }
- *     },
- *     {
- *       component: EFWButton,
- *       props: {
- *         children: 'Delete',
- *         onClick: async (event, params) => {
- *           return await deleteUser(params.userId);
- *         }
- *       }
- *     },
- *     {
- *       component: EFWDrawerButton,
- *       props: {
- *         children: 'View Details',
- *         drawerTitle: 'User Details',
- *         drawerBody: <UserDetails />,
- *         drawerOnOpen: (params) => console.log('Opening drawer for:', params.userId)
- *       }
- *     }
- *   ]}
- *   onClickParams={{ userId: '123', action: 'edit' }}
- *   gap="12px"
- * />
- * ```
- */
-export declare const EFWGroupButton: <T extends Record<string, any>>({ buttons, onClickParams, style, gap, className }: EFWGroupButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const EFWGroupButton: <T extends Record<string, any>>({ buttons, onClickParams, style, gap, className, labels, }: EFWGroupButtonProps<T>) => import("react/jsx-runtime").JSX.Element;