@envisiongroup/porygon 0.1.0-rc.1

package/dist/react-components/fields/EFWTagPicker/EFWTagPicker.d.ts

@@ -0,0 +1,8 @@
+import { EFWTagPickerProps } from './EFWTagPicker.types';
+
+/**
+ * @description Componente de campo selector de etiquetas que permite seleccionar múltiples opciones de una lista.
+ * @param {EFWTagPickerProps} props - Propiedades del componente EFWTagPickerProps
+ * @returns {JSX.Element | null} - Retorna el componente de campo selector o null si está oculto
+ */
+export declare const EFWTagPicker: (props: EFWTagPickerProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/react-components/fields/EFWTagPicker/EFWTagPicker.js

@@ -0,0 +1,230 @@
+import { jsx as t, Fragment as ae, jsxs as j } from "react/jsx-runtime";
+import { useRef as y, useState as p, useCallback as u, useEffect as N } from "react";
+import { makeStyles as se, tokens as s, useTagPickerFilter as ie, TagPickerOption as R, Avatar as le, Spinner as ce, mergeClasses as de, TagPicker as pe, TagPickerControl as ue, TagPickerGroup as ge, Tag as fe, TagPickerInput as me, Button as he, TagPickerList as be, Text as Ce } from "@fluentui/react-components";
+import { CollectionsEmpty20Regular as ke, Eraser20Regular as Oe } from "@fluentui/react-icons";
+const ye = se({
+  efwTagPickerControl: {
+    "& [disabled]": {
+      backgroundColor: s.colorNeutralBackground3,
+      color: s.colorNeutralForeground2,
+      "&::placeholder": {
+        color: "transparent"
+      }
+    },
+    // Afectar el span que contiene el input disabled
+    "&:has([disabled])": {
+      backgroundColor: s.colorNeutralBackground3,
+      "& button": {
+        borderBottomColor: s.colorNeutralStrokeDisabled,
+        borderTopColor: s.colorNeutralStrokeDisabled,
+        borderLeftColor: s.colorNeutralStrokeDisabled,
+        borderRightColor: s.colorNeutralStrokeDisabled,
+        paddingRight: "5px",
+        "& .fui-Tag__dismissIcon": {
+          display: "none"
+          //visibility: 'hidden'
+        }
+      }
+    }
+  },
+  efwTagPickerControlError: {
+    backgroundColor: s.colorPaletteRedBackground1,
+    "::after": {
+      borderBottomColor: s.colorPaletteRedBorder2,
+      borderBottomStyle: "solid",
+      borderBottomWidth: "2px"
+    }
+  }
+}), ve = (D) => {
+  const {
+    placeholder: F = "Selecciona una opción",
+    noMatchesMessage: I = "No se encontraron coincidencias",
+    loadingMessage: V = "Buscando información...",
+    className: _ = "",
+    minQueryLength: g = 0,
+    options: n = [],
+    hidden: q = !1,
+    disabled: w = !1,
+    editable: Q = !0,
+    selectedOptions: l = [],
+    //values: initialSelectedOptions = [],
+    noPopover: W = !1,
+    tagSize: G = "medium",
+    tagShape: J = "rounded",
+    tagAppearance: H = "brand",
+    onChange: k,
+    beforeRenderOptions: f,
+    multiple: E = !0,
+    validationState: L = "none",
+    validationMessage: U,
+    setParentComponentState: S
+  } = D, X = y(L), Y = y(U), [a, A] = p(""), [c, T] = p(l.map((e) => e.key)), [m, x] = p(l), [i, h] = p([]), [Z, P] = p(!1), [b, O] = p(!1), d = y(), v = y(
+    Object.fromEntries(l.map((e) => [e.key, e]))
+  ), M = ye(), $ = u((e) => (m.find((r) => r.key === e) || v.current[e])?.text || e, [m]);
+  N(() => {
+    T(l.map((e) => e.key)), x(l);
+  }, [l]), N(() => {
+    typeof n == "function" && a.length < g && b && O(!1);
+  }, [a, g, n, b]), N(() => b ? (d.current?.abort(), d.current = new AbortController(), (async () => {
+    if (typeof n != "function") {
+      const o = f ? f(n) : n;
+      h(o);
+      return;
+    }
+    S?.(X.current, Y.current);
+    try {
+      P(!0), h([]);
+      const o = await n(a, { signal: d.current.signal }), r = f ? f(o) : o;
+      h(r);
+    } catch (o) {
+      d.current?.signal.aborted || (console.error("Error loading options:", o), h([]), S?.("error", JSON.stringify(o)));
+    } finally {
+      d.current?.signal.aborted || P(!1);
+    }
+  })(), () => d.current?.abort()) : void 0, [b, n, a, f, S, g]);
+  const K = u(() => {
+    T([]), x([]), k?.([]);
+  }, [k]), ee = u((e, o) => {
+    if (o.open && typeof n == "function" && a.length < g) {
+      O(!1);
+      return;
+    }
+    o.open && typeof n == "function" && (P(!0), h([])), O(o.open);
+  }, [n, a, g]), oe = u((e, o) => {
+    if (o.value === "no-matches") return;
+    let r;
+    E ? r = o.selectedOptions : (r = o.selectedOptions.slice(-1), O(!1)), T(r), A("");
+    const z = r.map((C) => {
+      const B = i.find((ne) => ne.key === C) || v.current[C];
+      return B && (v.current[C] = B), B || { key: C, text: C };
+    });
+    x(z), k?.(z);
+  }, [i, k, E]), te = ie({
+    // La consulta actual ingresada por el usuario para filtrar opciones.
+    query: a,
+    // Lista de claves (como strings) de las opciones disponibles, obtenidas de 'availableOptions'.
+    options: i.map((e) => e.key.toString()),
+    // Elemento a mostrar cuando no hay opciones disponibles.
+    noOptionsElement: Z ? (
+      // Si está cargando ('isLoading' es true), muestra un spinner pequeño.
+      /* @__PURE__ */ t(
+        ce,
+        {
+          style: { height: "30px" },
+          size: "extra-tiny",
+          appearance: "primary",
+          label: {
+            size: "small",
+            children: V
+            // Mensaje como "Buscando información...".
+          }
+        }
+      )
+    ) : (
+      // Si no está cargando y no hay opciones, muestra un mensaje de "sin coincidencias".
+      /* @__PURE__ */ t(
+        R,
+        {
+          value: "no-matches",
+          media: /* @__PURE__ */ t(ke, {}),
+          children: I
+        }
+      )
+    ),
+    /**
+     * Función para renderizar una opción individual en la lista.
+     * @param {string} optionKey - Clave de la opción a renderizar.
+     * @returns {JSX.Element} - Elemento JSX que representa la opción.
+     */
+    renderOption: u((e) => {
+      const o = i.find((r) => r.key === e);
+      return o ? /* @__PURE__ */ t(
+        R,
+        {
+          secondaryContent: o.secondaryContent || "",
+          media: /* @__PURE__ */ t(le, { shape: "square", "aria-hidden": !0, name: o.text, color: "colorful" }),
+          value: o.key,
+          children: o.text
+        },
+        o.key
+      ) : (
+        // Si no se encuentra la opción, renderiza una versión básica con solo la clave.
+        /* @__PURE__ */ t(R, { value: e, children: e }, e)
+      );
+    }, [i]),
+    // Dependencia: se recrea si 'availableOptions' cambia.
+    /**
+     * Función de filtrado para determinar qué opciones mostrar.
+     * @param {string} optionKey - Clave de la opción a evaluar.
+     * @returns {boolean} - True si la opción debe mostrarse, false si no.
+     */
+    filter: u((e) => {
+      const o = i.find((r) => r.key === e);
+      return o ? !c.includes(e) && o.text.toLowerCase().includes(a.toLowerCase()) : !1;
+    }, [i, c, a])
+  });
+  if (q) return null;
+  const re = de(
+    _,
+    M.efwTagPickerControl,
+    L === "error" && M.efwTagPickerControlError
+  );
+  return /* @__PURE__ */ t(ae, { children: Q ? /* @__PURE__ */ j(
+    pe,
+    {
+      open: b,
+      size: G,
+      disabled: w,
+      onOptionSelect: oe,
+      onOpenChange: ee,
+      selectedOptions: c,
+      noPopover: W,
+      children: [
+        /* @__PURE__ */ j(
+          ue,
+          {
+            className: re,
+            secondaryAction: !w && c.length ? /* @__PURE__ */ t(
+              he,
+              {
+                appearance: "transparent",
+                size: "small",
+                shape: "rounded",
+                onClick: K,
+                icon: /* @__PURE__ */ t(Oe, {}),
+                iconPosition: "before"
+              }
+            ) : void 0,
+            children: [
+              /* @__PURE__ */ t(ge, { "aria-label": "Selected items", children: c.map((e) => /* @__PURE__ */ t(
+                fe,
+                {
+                  style: { paddingTop: "0px", paddingBottom: "0px" },
+                  shape: J,
+                  appearance: H,
+                  value: e,
+                  children: $(e)
+                },
+                e
+              )) }),
+              /* @__PURE__ */ t(
+                me,
+                {
+                  placeholder: c.length ? "" : F,
+                  autoComplete: "off",
+                  "aria-label": "Select items",
+                  value: a,
+                  onChange: (e) => A(e.target.value)
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(be, { children: te })
+      ]
+    }
+  ) : /* @__PURE__ */ t(Ce, { style: m.length ? void 0 : { opacity: 0.7 }, children: m.length ? m.map((e) => e.text).join(", ") : "Sin datos disponibles" }) });
+};
+export {
+  ve as EFWTagPicker
+};

package/dist/react-components/fields/EFWTagPicker/EFWTagPicker.types.d.ts

@@ -0,0 +1,136 @@
+import { EFWFieldChildrenProps } from '../EFWField/EFWField.types';
+
+/**
+ * Representa un objeto de datos genérico que puede contener propiedades de tipo string,
+ * number o arrays de otros objetos IItem.
+ *
+ * @interface IItem
+ * @property {string | number | IItem[]} [key] - Propiedades dinámicas que pueden ser strings, números o arrays de objetos IItem
+ */
+type IItem = {
+    [key: string]: string | number | IItem[];
+};
+/**
+ * Función callback que se ejecuta cuando cambian las opciones seleccionadas en el TagPicker.
+ *
+ * @callback EFWTagPickerOnChange
+ * @param {EFWTagPickerOption[]} selectedOptions - Array de opciones actualmente seleccionadas
+ * @param {string} [displayValue] - Valor de visualización opcional
+ * @returns {void}
+ */
+export type EFWTagPickerOnChange = (selectedOptions: EFWTagPickerOption[], displayValue?: string) => void;
+/**
+ * Define la estructura de cada opción en el TagPicker.
+ * Contiene la información necesaria para mostrar y gestionar una opción seleccionable.
+ *
+ * @interface EFWTagPickerOption
+ * @property {string} key - Identificador único de la opción
+ * @property {string} text - Texto principal que se muestra para la opción
+ * @property {string} [secondaryContent] - Texto secundario opcional para mostrar información adicional
+ * @property {IItem} [item] - Objeto de datos personalizado asociado con esta opción
+ */
+export interface EFWTagPickerOption {
+    key: string;
+    text: string;
+    secondaryContent?: string;
+    item?: IItem;
+}
+/**
+ * Alias para EFWTagPickerOption que representa el valor de una opción seleccionada.
+ * Se utiliza para mantener consistencia en la nomenclatura del componente.
+ */
+export type EFWTagPickerValue = EFWTagPickerOption;
+/**
+ * Función para cargar opciones de manera asíncrona basada en una consulta de búsqueda.
+ * Permite implementar funcionalidad de búsqueda dinámica y carga bajo demanda.
+ *
+ * @callback AsyncOptionsLoader
+ * @param {string} query - Texto de búsqueda para filtrar opciones
+ * @param {Object} [options] - Opciones adicionales para la carga
+ * @param {AbortSignal} [options.signal] - Señal para cancelar la petición si es necesario
+ * @returns {Promise<EFWTagPickerOption[]>} Promesa que resuelve a un array de opciones que coinciden con la búsqueda
+ */
+export type AsyncOptionsLoader = (query: string, options?: {
+    signal: AbortSignal;
+}) => Promise<EFWTagPickerOption[]>;
+/**
+ * Propiedades del componente EFWTagPicker.
+ * Extiende EFWFieldChildrenProps para heredar propiedades comunes de campos de formulario.
+ *
+ * @interface EFWTagPickerProps
+ * @extends EFWFieldChildrenProps
+ */
+export interface EFWTagPickerProps extends EFWFieldChildrenProps {
+    /**
+     * Mensaje personalizado a mostrar cuando no hay resultados coincidentes con la búsqueda
+     * @default "No se encontraron coincidencias"
+     */
+    noMatchesMessage?: string;
+    /**
+     * Mensaje personalizado a mostrar durante la carga asíncrona de opciones
+     * @default "Buscando información..."
+     */
+    loadingMessage?: string;
+    /**
+     * Texto de marcador de posición que se muestra cuando el campo está vacío
+     * @default "Selecciona una opción"
+     */
+    placeholder?: string;
+    /**
+     * Determina si el componente permite edición o solo muestra los valores seleccionados
+     * @default true
+     */
+    editable?: boolean;
+    /**
+     * Clases CSS adicionales para personalizar el estilo visual del componente
+     * @default ""
+     */
+    className?: string;
+    /**
+     * Habilita la selección múltiple (true) o limita a selección única (false)
+     * @default true
+     */
+    multiple?: boolean;
+    /**
+     * Deshabilita el uso del popover flotante para mostrar las opciones
+     * @default false
+     */
+    noPopover?: boolean;
+    /**
+     * Define la forma visual de las etiquetas: redondeadas o circulares
+     * @default "rounded"
+     */
+    tagShape?: "rounded" | "circular";
+    /**
+     * Define el estilo de apariencia de las etiquetas: relleno, contorno o marca
+     * @default "brand"
+     */
+    tagAppearance?: "filled" | "outline" | "brand";
+    /**
+     * Define el tamaño visual de las etiquetas seleccionadas
+     * @default "medium"
+     */
+    tagSize?: "medium" | "large" | 'extra-large';
+    /**
+     * Longitud mínima de caracteres requerida antes de ejecutar búsqueda asíncrona
+     * @default 0
+     */
+    minQueryLength?: number;
+    /**
+     * Lista estática de opciones o función asíncrona para cargar opciones dinámicamente
+     * @default []
+     */
+    options: EFWTagPickerOption[] | AsyncOptionsLoader;
+    /**
+     * Array de opciones actualmente seleccionadas en el componente
+     * @default []
+     */
+    selectedOptions?: EFWTagPickerOption[];
+    /** Función callback ejecutada cuando cambian las opciones seleccionadas */
+    onChange?: EFWTagPickerOnChange;
+    /** Función para transformar o procesar las opciones antes de renderizarlas */
+    beforeRenderOptions?: (options: EFWTagPickerOption[]) => EFWTagPickerOption[];
+    /** Función para establecer el estado de error y mostrar mensajes de validación */
+    setError?: (hasError: boolean, message?: string) => void;
+}
+export {};

package/dist/react-components/fields/EFWTagPicker/index.d.ts

@@ -0,0 +1,2 @@
+export { EFWTagPicker } from './EFWTagPicker';
+export type { EFWTagPickerProps, AsyncOptionsLoader, EFWTagPickerOption, EFWTagPickerOnChange, EFWTagPickerValue } from './EFWTagPicker.types';

package/dist/react-components/fields/EFWTagPicker/index.js

@@ -0,0 +1,4 @@
+import { EFWTagPicker as o } from "./EFWTagPicker.js";
+export {
+  o as EFWTagPicker
+};

package/dist/react-components/fields/EFWTagPickerField/EFWTagPickerField.d.ts

@@ -0,0 +1,3 @@
+import { EFWTagPickerFieldProps } from './EFWTagPickerField.types';
+
+export declare const EFWTagPickerField: (props: EFWTagPickerFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/react-components/fields/EFWTagPickerField/EFWTagPickerField.js

@@ -0,0 +1,72 @@
+import { jsx as a } from "react/jsx-runtime";
+import { EFWField as v } from "../EFWField/EFWField.js";
+import { EFWTagPicker as L } from "../EFWTagPicker/EFWTagPicker.js";
+const j = (n) => {
+  const {
+    title: i,
+    // description,
+    infoLabel: o,
+    hint: t,
+    style: l = {},
+    required: r = !1,
+    placeholder: d = "Selecciona una opción",
+    noMatchesMessage: s = "No se encontraron coincidencias",
+    loadingMessage: c = "Buscando información...",
+    validationState: g = "none",
+    validationMessage: h = "",
+    minQueryLength: p = 0,
+    options: m = [],
+    selectedOptions: f = [],
+    editable: e = !0,
+    disabled: u = !1,
+    hidden: b = !1,
+    noPopover: F = !1,
+    multiple: C = !1,
+    tagSize: E = "medium",
+    tagShape: M = "rounded",
+    tagAppearance: P = "brand",
+    onChange: S,
+    beforeRenderOptions: W,
+    onValidationChange: _
+  } = n;
+  return /* @__PURE__ */ a(
+    v,
+    {
+      hint: t,
+      style: l,
+      title: i,
+      infoLabel: o,
+      weightLabel: e ? "regular" : "semibold",
+      required: r,
+      validationState: g,
+      validationMessage: h,
+      onValidationChange: _,
+      hidden: b,
+      children: /* @__PURE__ */ a(
+        L,
+        {
+          editable: e,
+          noMatchesMessage: s,
+          loadingMessage: c,
+          placeholder: d,
+          selectedOptions: f,
+          minQueryLength: p,
+          options: m,
+          onChange: (k = []) => {
+            S?.(k, "[EFWTagPickerField]: __handleChange__");
+          },
+          beforeRenderOptions: W,
+          disabled: u,
+          noPopover: F,
+          tagSize: E,
+          tagShape: M,
+          tagAppearance: P,
+          multiple: C
+        }
+      )
+    }
+  );
+};
+export {
+  j as EFWTagPickerField
+};

package/dist/react-components/fields/EFWTagPickerField/EFWTagPickerField.types.d.ts

@@ -0,0 +1,8 @@
+import { EFWFieldProps } from '../EFWField/EFWField.types';
+import { EFWTagPickerOption, EFWTagPickerProps, EFWTagPickerValue, EFWTagPickerOnChange } from '../EFWTagPicker';
+
+export type EFWTagPickerFieldValue = EFWTagPickerValue;
+export type EFWTagPickerFieldOnChange = EFWTagPickerOnChange;
+export type EFWTagPickerFieldOption = EFWTagPickerOption;
+export interface EFWTagPickerFieldProps extends Omit<EFWFieldProps, 'children'>, EFWTagPickerProps {
+}

package/dist/react-components/fields/EFWTagPickerField/EFWTagPickerField.utils.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/react-components/fields/EFWTagPickerField/index.d.ts

@@ -0,0 +1,2 @@
+export { EFWTagPickerField } from './EFWTagPickerField';
+export type { EFWTagPickerFieldProps, EFWTagPickerFieldValue, EFWTagPickerFieldOption, EFWTagPickerFieldOnChange } from './EFWTagPickerField.types';

package/dist/react-components/fields/EFWTagPickerField/index.js

@@ -0,0 +1,4 @@
+import { EFWTagPickerField as i } from "./EFWTagPickerField.js";
+export {
+  i as EFWTagPickerField
+};

package/dist/react-components/fields/EFWTextArea/EFWTextArea.d.ts

@@ -0,0 +1,3 @@
+import { EFWTextAreaProps } from './EFWTextArea.types';
+
+export declare const EFWTextArea: (props: EFWTextAreaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/react-components/fields/EFWTextArea/EFWTextArea.js

@@ -0,0 +1,103 @@
+import { jsx as x, Fragment as H } from "react/jsx-runtime";
+import { makeStyles as B, tokens as l, mergeClasses as D, Textarea as F, Text as I } from "@fluentui/react-components";
+import { useId as K, useRef as v, useState as P, useCallback as s, useEffect as j, useLayoutEffect as L } from "react";
+const $ = B({
+  efwTextArea: {
+    "& textarea": {
+      maxHeight: "none",
+      "&[disabled]": {
+        backgroundColor: l.colorNeutralBackground3,
+        color: l.colorNeutralForeground3
+      }
+    },
+    // Afectar el span que contiene el textarea disabled
+    "&:has([disabled])": {
+      backgroundColor: l.colorNeutralBackground3
+    }
+  },
+  efwTextAreaError: {
+    backgroundColor: l.colorPaletteRedBackground1
+    // '& textarea': {
+    // 	maxHeight: 'none',
+    // 	backgroundColor: "var(--colorPaletteRedBackground1)",
+    // },
+    // '.fui-Textarea': {
+    // 	backgroundColor: "var(--colorPaletteRedBackground1)",
+    // 	borderBottom: "2px solid var(--colorPaletteRedBorder2) !important"
+    // },
+    // '& textarea::after': {
+    // 	borderBottom: "2px solid var(--colorPaletteRedBorder2) !important"
+    // }
+  }
+}), G = (k) => {
+  const {
+    value: o = "",
+    onKeyDown: g,
+    onChange: r,
+    editable: b = !0,
+    disabled: T = !1,
+    autoComplete: w = "off",
+    className: S = "",
+    placeholder: N,
+    maxLength: c = 250,
+    size: V,
+    validationState: z = "none",
+    setParentComponentState: i,
+    autoResize: u = !0
+    // Nuevo prop con valor por defecto true
+  } = k, h = $(), m = K(), d = v(o || ""), f = v(null), [t, p] = P(o || ""), C = s(() => {
+    if (!u || !f.current) return;
+    const e = f.current;
+    e.style.height = "auto", e.style.height = `${e.scrollHeight}px`;
+  }, [u]), n = s((e) => {
+    e.length > c ? i?.("error", `Por favor introduzca menos de ${c} caracteres.`) : i?.("none", "");
+  }, [c, i]);
+  j(() => {
+    if (o !== d.current) {
+      const e = o || "";
+      n(e), p(e), d.current = e, r?.(e, e);
+    }
+  }, [o, n, r]), L(() => {
+    C();
+  }, [t, C]);
+  const A = s((e, y) => {
+    if (typeof y.value == "string") {
+      const a = y.value || "";
+      n(a), p(a), d.current = a, r?.(a, a);
+    }
+  }, [n, r]), E = s((e) => {
+    g?.(e, t);
+  }, [g, t]), R = D(
+    S,
+    h.efwTextArea,
+    z === "error" && h.efwTextAreaError
+  );
+  return /* @__PURE__ */ x(H, { children: b ? /* @__PURE__ */ x(
+    F,
+    {
+      ref: f,
+      className: R,
+      id: m,
+      name: m,
+      placeholder: N,
+      disabled: T,
+      value: t,
+      autoComplete: w,
+      autoCorrect: "off",
+      autoCapitalize: "off",
+      spellCheck: "false",
+      onChange: A,
+      onKeyDown: E,
+      size: V,
+      style: {
+        resize: u ? "none" : "vertical",
+        overflow: "hidden",
+        minHeight: "40px"
+        // Altura mínima para mantener usabilidad
+      }
+    }
+  ) : /* @__PURE__ */ x(I, { style: t ? void 0 : { opacity: 0.7 }, children: t || "Sin datos disponibles" }) });
+};
+export {
+  G as EFWTextArea
+};

package/dist/react-components/fields/EFWTextArea/EFWTextArea.types.d.ts

@@ -0,0 +1,79 @@
+import { EFWFieldChildrenProps } from '../EFWField/EFWField.types';
+
+/**
+ * Representa el valor que puede contener un componente EFWTextArea
+ */
+export type EFWTextAreaValue = string | null;
+/**
+ * Propiedades del componente EFWTextArea
+ */
+export interface EFWTextAreaProps extends Partial<EFWFieldChildrenProps> {
+    /**
+     * Contenido a mostrar antes del textarea
+     */
+    contentBefore?: string;
+    /**
+     * Contenido a mostrar después del textarea
+     */
+    contentAfter?: string;
+    /**
+     * Configuración de autocompletado del navegador
+     * @default "off"
+     */
+    autoComplete?: 'on' | 'off';
+    /**
+     * Valor inicial o controlado del textarea
+     * @default ""
+     */
+    value?: EFWTextAreaValue;
+    /**
+     * Tamaño visual del textarea
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Clases CSS adicionales para personalizar el estilo
+     * @default ""
+     */
+    className?: string;
+    /**
+     * Texto de marcador de posición que se muestra cuando el textarea está vacío
+     */
+    placeholder?: string;
+    /**
+     * Patrón de formato a aplicar al texto (actualmente no implementado)
+     */
+    formatPattern?: string;
+    /**
+     * Determina si el textarea es editable o de solo lectura
+     * @default true
+     */
+    editable?: boolean;
+    /**
+     * Longitud máxima de caracteres permitidos en el textarea
+     * @default 250
+     */
+    maxLength?: number;
+    /**
+     * Habilita el redimensionamiento automático de altura basado en el contenido
+     * @default true
+     */
+    autoResize?: true;
+    /**
+     * Función personalizada para formatear el valor del textarea
+     * @param value - El valor actual del textarea
+     * @returns El valor formateado
+     */
+    formatFunction?: (value: EFWTextAreaValue) => EFWTextAreaValue;
+    /**
+     * Callback que se ejecuta cuando el valor del textarea cambia
+     * @param value - El nuevo valor del textarea
+     * @param displayValue - El valor formateado para mostrar (opcional)
+     */
+    onChange?: (value: EFWTextAreaValue, displayValue?: string) => void;
+    /**
+     * Callback que se ejecuta cuando se presiona una tecla en el textarea
+     * @param event - El evento de teclado de React
+     * @param currentValue - El valor actual del textarea en el momento del evento
+     */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>, currentValue: string) => void;
+}

package/dist/react-components/fields/EFWTextArea/EFWTextArea.utils.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/react-components/fields/EFWTextArea/index.d.ts

@@ -0,0 +1,2 @@
+export { EFWTextArea } from './EFWTextArea';
+export type { EFWTextAreaProps, EFWTextAreaValue } from './EFWTextArea.types';