flysoft-react-ui 0.5.2 → 1.0.0

package/dist/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAGA,OAAO,aAAa,CAAC;AA2DrB,iBAAS,GAAG,4CAoBX;AAED,eAAe,GAAG,CAAC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAGA,OAAO,aAAa,CAAC;AAuDrB,iBAAS,GAAG,4CAsBX;AAED,eAAe,GAAG,CAAC"}

package/dist/App.js

@@ -8,20 +8,19 @@ import DocsRouter from "./docs/DocsRouter";
 import { AuthDocs } from "./docs/AuthDocs.tsx/AuthDocs";
 import packageJson from "../package.json";
 function HomeContent() {
-    return (_jsxs(_Fragment, { children: [_jsx(Card, { title: "Empleados", className: "bg-gray-50", children: _jsx(Card, { className: "w-1/2", title: "FALCONE WALTER ALDO", subtitle: "3558-03 - Titular", footer: _jsx(Button, { children: "Ver" }), headerActions: () => [
-                        _jsx(Badge, { variant: "secondary", children: "OSOCNA" }),
-                        _jsx(Badge, { variant: "secondary", children: "B\u00C1SICO" }),
-                    ], children: _jsxs(Collection, { direction: "row", gap: "1rem", wrap: true, children: [_jsx(DataField, { label: "Cuil", value: "20179902711" }), _jsx(DataField, { label: "Doc", value: "17990271" }), _jsx(DataField, { label: "F Nac", value: "23/06/1966" }), _jsx(DataField, { label: "F Alta", value: "01/03/2012" })] }) }) }), _jsx("div", { children: _jsx(AuthDocs, {}) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { title: "Empleados", className: "bg-gray-50", children: _jsx(Card, { className: "w-1/2", title: "FALCONE WALTER ALDO", subtitle: "3558-03 - Titular", footer: _jsx(Button, { children: "Ver" }), headerActions: _jsxs(_Fragment, { children: [_jsx(Badge, { variant: "secondary", children: "OSOCNA" }), _jsx(Badge, { variant: "secondary", children: "B\u00C1SICO" })] }), children: _jsxs(Collection, { direction: "row", gap: "1rem", wrap: true, children: [_jsx(DataField, { label: "Cuil", value: "20179902711" }), _jsx(DataField, { label: "Doc", value: "17990271" }), _jsx(DataField, { label: "F Nac", value: "23/06/1966" }), _jsx(DataField, { label: "F Alta", value: "01/03/2012" })] }) }) }), _jsx("div", { children: _jsx(AuthDocs, {}) })] }));
 }
 function LeftDrawerHeader() {
-    return (_jsx("div", { className: "h-[64px] flex flex-col  justify-center px-4", children: _jsx("h2", { children: _jsx(Link, { to: "/", children: "Flysoft React UI" }) }) }));
+    return (_jsx("div", { className: "h-[64px] flex flex-col  justify-center px-4 bg-gray-300", children: _jsx("h2", { children: _jsx(Link, { to: "/", children: "Flysoft React UI" }) }) }));
 }
 function LeftDrawerFooter() {
-    return (_jsx("div", { className: "px-4", children: _jsxs("span", { children: ["v ", packageJson.version] }) }));
+    return (_jsx("div", { className: "px-4 bg-gray-300", children: _jsxs("span", { children: ["v ", packageJson.version] }) }));
 }
 function App() {
     return (_jsx(AppLayoutProvider, { initialTheme: "light", forceInitialTheme: false, initialNavbar: {
+            navBarLeftNode: _jsx(_Fragment, {}),
             fullWidthNavbar: false,
+            className: "bg-gray-300 pl-0 lg:pl-8",
         }, initialLeftDrawer: {
             headerNode: _jsx(LeftDrawerHeader, {}),
             contentNode: _jsx(DocsMenu, {}),

package/dist/components/form-controls/AutocompleteInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteInput.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/AutocompleteInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,sBAAsB,CAAC,CAAC,GAAG,kBAAkB,EAAE,CAAC,GAAG,MAAM,CACxE,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACtD,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EACL,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,GAC1C,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;IAChC;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAChE;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkqBD,eAAO,MAAM,iBAAiB,EAA6B,CACzD,CAAC,GAAG,kBAAkB,EACtB,CAAC,GAAG,MAAM,EAEV,KAAK,EAAE,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IACpC,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;CAC5C,KACE,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"AutocompleteInput.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/AutocompleteInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,sBAAsB,CAAC,CAAC,GAAG,kBAAkB,EAAE,CAAC,GAAG,MAAM,CACxE,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACtD,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EACL,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,GAC1C,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;IAChC;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAChE;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAguBD,eAAO,MAAM,iBAAiB,EAA6B,CACzD,CAAC,GAAG,kBAAkB,EACtB,CAAC,GAAG,MAAM,EAEV,KAAK,EAAE,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IACpC,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;CAC5C,KACE,KAAK,CAAC,YAAY,CAAC"}

package/dist/components/form-controls/AutocompleteInput.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { createPortal } from "react-dom";
+import { useFormContext } from "react-hook-form";
 import { Input } from "./Input";
+import { normalizeIconClass } from "../utils/iconUtils";
 const AutocompleteInputInner = React.forwardRef(({ options, value, onChange, onSelectOption, noResultsText = "Sin resultados", className = "", getOptionLabel, getOptionValue, getOptionDescription, renderOption, readOnly = false, ...inputProps }, ref) => {
     const [internalValue, setInternalValue] = React.useState(value || "");
     const [displayValue, setDisplayValue] = React.useState("");
@@ -11,6 +13,7 @@ const AutocompleteInputInner = React.forwardRef(({ options, value, onChange, onS
     const containerRef = React.useRef(null);
     const dropdownRef = React.useRef(null);
     const inputRef = React.useRef(null);
+    const hiddenInputRef = React.useRef(null);
     const justClearedRef = React.useRef(false);
     // Detectar si estamos en modo register: si viene 'name' de register, estamos en modo register
     // register siempre pasa 'name', 'onChange', 'onBlur', y 'ref'
@@ -18,6 +21,16 @@ const AutocompleteInputInner = React.forwardRef(({ options, value, onChange, onS
         // Si viene 'name' en inputProps, es porque viene de register
         return "name" in inputProps && inputProps.name !== undefined;
     }, [inputProps]);
+    const fieldName = isRegisterMode && "name" in inputProps
+        ? inputProps.name
+        : undefined;
+    // Obtener setValue del contexto del formulario
+    // Para usar con register, el formulario debe estar dentro de FormProvider
+    // useFormContext debe llamarse incondicionalmente (requisito de React Hooks)
+    // Si no hay FormProvider y se usa en modo register, useFormContext lanzará un error
+    // Para usar sin FormProvider, usar Controller en lugar de register
+    const formContext = useFormContext();
+    const setValue = formContext?.setValue;
     const inputValue = isRegisterMode
         ? displayValue
         : value !== undefined
@@ -53,23 +66,27 @@ const AutocompleteInputInner = React.forwardRef(({ options, value, onChange, onS
     }, [inputValue, options, labelGetter, valueGetter]);
     // Función helper para sincronizar displayValue con el valor del formulario
     const syncDisplayValue = React.useCallback(() => {
-        if (isRegisterMode && inputRef.current) {
-            const formValue = inputRef.current.value;
-            // Si el valor del formulario coincide con algún getOptionValue, mostrar su label
-            const matchingOption = options.find((option) => String(valueGetter(option)) === String(formValue));
-            if (matchingOption) {
-                const label = labelGetter(matchingOption);
-                setDisplayValue(label);
-                return true; // Indica que se encontró y sincronizó un valor
-            }
-            else if (formValue) {
-                // Si hay un valor pero no coincide, mostrarlo tal cual
-                setDisplayValue(formValue);
-                return true;
-            }
-            else {
-                setDisplayValue("");
-                return false; // No hay valor aún
+        if (isRegisterMode) {
+            // En modo register, usamos el hiddenInputRef si existe, sino el inputRef (legacy/fallback)
+            const targetInput = hiddenInputRef.current || inputRef.current;
+            if (targetInput) {
+                const formValue = targetInput.value;
+                // Si el valor del formulario coincide con algún getOptionValue, mostrar su label
+                const matchingOption = options.find((option) => String(valueGetter(option)) === String(formValue));
+                if (matchingOption) {
+                    const label = labelGetter(matchingOption);
+                    setDisplayValue(label);
+                    return true; // Indica que se encontró y sincronizó un valor
+                }
+                else if (formValue) {
+                    // Si hay un valor pero no coincide, mostrarlo tal cual (o buscar por label si fuera el caso)
+                    setDisplayValue(formValue);
+                    return true;
+                }
+                else {
+                    setDisplayValue("");
+                    return false; // No hay valor aún
+                }
             }
         }
         return false;
@@ -82,8 +99,9 @@ const AutocompleteInputInner = React.forwardRef(({ options, value, onChange, onS
             const maxAttempts = 50; // Intentar durante ~5 segundos (50 * 100ms)
             // Función que intenta sincronizar y retorna true si encontró un valor
             const trySync = () => {
-                if (inputRef.current) {
-                    const formValue = inputRef.current.value;
+                const targetInput = hiddenInputRef.current || inputRef.current;
+                if (targetInput) {
+                    const formValue = targetInput.value;
                     if (formValue) {
                         // Hay un valor, intentar sincronizar
                         const matchingOption = options.find((option) => String(valueGetter(option)) === String(formValue));
@@ -125,30 +143,36 @@ const AutocompleteInputInner = React.forwardRef(({ options, value, onChange, onS
             };
         }
     }, [isRegisterMode, options, valueGetter, labelGetter]);
-    // También escuchar cambios en el input nativo para sincronizar cuando cambie
+    // También escuchar cambios en el input (hidden o visible) para sincronizar cuando cambie
     React.useEffect(() => {
-        if (isRegisterMode && inputRef.current) {
-            const input = inputRef.current;
-            // Función para sincronizar cuando el input cambia
-            const handleInputSync = () => {
-                syncDisplayValue();
-            };
-            // Escuchar eventos de input y change
-            input.addEventListener("input", handleInputSync);
-            input.addEventListener("change", handleInputSync);
-            // También usar MutationObserver para detectar cambios en el atributo value
-            const observer = new MutationObserver(() => {
-                syncDisplayValue();
-            });
-            observer.observe(input, {
-                attributes: true,
-                attributeFilter: ["value"],
-            });
-            return () => {
-                input.removeEventListener("input", handleInputSync);
-                input.removeEventListener("change", handleInputSync);
-                observer.disconnect();
-            };
+        if (isRegisterMode) {
+            // Observamos el hiddenInput si estamos en register mode y existe, o el input normal
+            const targetElement = hiddenInputRef.current || inputRef.current;
+            if (targetElement) {
+                // Función para sincronizar cuando el input cambia
+                const handleInputSync = () => {
+                    // Solo sincronizar si es el hidden input o si no tenemos hidden input
+                    if (targetElement === hiddenInputRef.current) {
+                        syncDisplayValue();
+                    }
+                };
+                // Escuchar eventos de input y change (aunque en hidden input no suelen dispararse eventos de usuario)
+                targetElement.addEventListener("input", handleInputSync);
+                targetElement.addEventListener("change", handleInputSync);
+                // También usar MutationObserver para detectar cambios en el atributo value (más fiable para hidden inputs cambiados por JS)
+                const observer = new MutationObserver(() => {
+                    syncDisplayValue();
+                });
+                observer.observe(targetElement, {
+                    attributes: true,
+                    attributeFilter: ["value"],
+                });
+                return () => {
+                    targetElement.removeEventListener("input", handleInputSync);
+                    targetElement.removeEventListener("change", handleInputSync);
+                    observer.disconnect();
+                };
+            }
         }
     }, [isRegisterMode, syncDisplayValue]);
     const handleChange = (event) => {
@@ -178,53 +202,56 @@ const AutocompleteInputInner = React.forwardRef(({ options, value, onChange, onS
         const selectedValue = valueGetter(option);
         const valueString = String(selectedValue ?? "");
         if (isRegisterMode) {
-            // En modo register:
-            // 1. Actualizar el input nativo con el valor (para que react-hook-form lo capture)
-            // 2. Actualizar displayValue con el label (para mostrarlo visualmente)
-            if (inputRef.current) {
-                const nativeInput = inputRef.current;
-                // Actualizar el valor del input directamente usando el setter nativo
-                // Esto evita que React sobrescriba el valor inmediatamente
-                const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
-                if (nativeInputValueSetter) {
-                    nativeInputValueSetter.call(nativeInput, valueString);
-                }
-                else {
-                    // Fallback si el setter no está disponible
-                    nativeInput.value = valueString;
+            // En modo register, setear el valor usando setValue o actualizando el input nativo (hidden)
+            if (setValue && fieldName) {
+                setValue(fieldName, selectedValue, {
+                    shouldValidate: true,
+                    shouldDirty: true,
+                });
+                // Actualizar el input hidden con el ID
+                if (hiddenInputRef.current) {
+                    hiddenInputRef.current.value = valueString;
                 }
-                // IMPORTANTE: Llamar al onChange de register DESPUÉS de actualizar el input
-                // El evento debe tener el input nativo como target con el valor ya actualizado
-                if (onChange) {
-                    // Crear un evento que tenga el input nativo como target
-                    // react-hook-form leerá el valor desde event.target.value
-                    const changeEvent = {
-                        target: nativeInput,
-                        currentTarget: nativeInput,
-                    };
-                    onChange(changeEvent);
+                // Actualizar displayValue con el label para mostrarlo visualmente en el input visible
+                setDisplayValue(label);
+            }
+            else {
+                // Fallback si no hay setValue (raro en registerMode) o para inputs manuales
+                const targetInput = hiddenInputRef.current || inputRef.current;
+                if (targetInput) {
+                    const nativeInput = targetInput;
+                    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+                    if (nativeInputValueSetter) {
+                        nativeInputValueSetter.call(nativeInput, valueString);
+                    }
+                    else {
+                        nativeInput.value = valueString;
+                    }
+                    // Disparar eventos en el input que tiene el ref de register
+                    if (onChange) {
+                        const changeEvent = {
+                            target: nativeInput,
+                            currentTarget: nativeInput,
+                        }; // Cast agresivo necesario
+                        onChange(changeEvent);
+                    }
+                    const inputEvent = new Event("input", {
+                        bubbles: true,
+                        cancelable: true,
+                    });
+                    nativeInput.dispatchEvent(inputEvent);
+                    const changeEventNative = new Event("change", {
+                        bubbles: true,
+                        cancelable: true,
+                    });
+                    nativeInput.dispatchEvent(changeEventNative);
                 }
-                // También disparar eventos nativos para asegurar que todo esté sincronizado
-                // Estos eventos son importantes para la validación y el estado del formulario
-                const inputEvent = new Event("input", {
-                    bubbles: true,
-                    cancelable: true,
-                });
-                nativeInput.dispatchEvent(inputEvent);
-                const changeEventNative = new Event("change", {
-                    bubbles: true,
-                    cancelable: true,
-                });
-                nativeInput.dispatchEvent(changeEventNative);
+                // Y actualizamos visualmente
+                setDisplayValue(label);
             }
-            // Actualizar el displayValue para mostrar el label
-            setDisplayValue(label);
         }
         else {
             // Modo API personalizada - comportamiento original
-            if (value === undefined) {
-                setInternalValue(label);
-            }
             // Pasar el valor devuelto por getOptionValue, no el label
             if (onChange) {
                 onChange(valueString);
@@ -346,11 +373,15 @@ const AutocompleteInputInner = React.forwardRef(({ options, value, onChange, onS
     // Detectar si hay un valor seleccionado
     // Un valor está seleccionado si el value coincide con el getOptionValue de alguna opción
     const hasSelectedValue = React.useMemo(() => {
-        if (isRegisterMode && inputRef.current) {
-            const formValue = inputRef.current.value;
-            if (!formValue)
-                return false;
-            return options.some((option) => String(valueGetter(option)) === String(formValue));
+        if (isRegisterMode) {
+            const targetInput = hiddenInputRef.current || inputRef.current;
+            if (targetInput) {
+                const formValue = targetInput.value;
+                if (!formValue)
+                    return false;
+                return options.some((option) => String(valueGetter(option)) === String(formValue));
+            }
+            return false;
         }
         if (value === undefined || value === null || value === "")
             return false;
@@ -366,9 +397,10 @@ const AutocompleteInputInner = React.forwardRef(({ options, value, onChange, onS
         // Marcar que acabamos de limpiar para prevenir que onFocus abra el diálogo
         justClearedRef.current = true;
         if (isRegisterMode) {
-            // En modo register, limpiar el input nativo y disparar eventos
-            if (inputRef.current) {
-                const nativeInput = inputRef.current;
+            // En modo register, limpiar el input nativo (hidden) y disparar eventos
+            const targetInput = hiddenInputRef.current || inputRef.current;
+            if (targetInput) {
+                const nativeInput = targetInput;
                 const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
                 setter?.call(nativeInput, "");
                 // Disparar eventos para que react-hook-form lo capture
@@ -376,17 +408,17 @@ const AutocompleteInputInner = React.forwardRef(({ options, value, onChange, onS
                 nativeInput.dispatchEvent(inputEvent);
                 const changeEvent = new Event("change", { bubbles: true });
                 nativeInput.dispatchEvent(changeEvent);
+                // Llamar al onChange de register
+                if (onChange) {
+                    const changeEventReact = {
+                        target: nativeInput,
+                        currentTarget: nativeInput,
+                    };
+                    onChange(changeEventReact);
+                }
             }
             // Limpiar el displayValue
             setDisplayValue("");
-            // Llamar al onChange de register
-            if (onChange && inputRef.current) {
-                const changeEvent = {
-                    target: inputRef.current,
-                    currentTarget: inputRef.current,
-                };
-                onChange(changeEvent);
-            }
         }
         else {
             // Modo API personalizada
@@ -420,39 +452,53 @@ const AutocompleteInputInner = React.forwardRef(({ options, value, onChange, onS
         : hasSelectedValue
             ? handleClear
             : inputProps.onIconClick;
-    // Combinar refs: el ref del componente y el ref interno
-    const combinedRef = React.useCallback((node) => {
-        inputRef.current = node;
-        if (typeof ref === "function") {
-            ref(node);
-        }
-        else if (ref) {
-            ref.current = node;
-        }
-        // Cuando el ref se establece en modo register, sincronizar el displayValue
-        // Esto es importante para valores por defecto que vienen del formulario
-        if (isRegisterMode && node) {
-            // Intentar múltiples veces con diferentes delays
-            // react-hook-form puede establecer el valor en diferentes momentos
-            [0, 10, 50, 100, 200, 500].forEach((delay) => {
-                setTimeout(() => {
-                    if (node && inputRef.current === node) {
-                        const formValue = node.value;
-                        if (formValue) {
-                            const matchingOption = options.find((option) => String(valueGetter(option)) === String(formValue));
-                            if (matchingOption) {
-                                setDisplayValue(labelGetter(matchingOption));
-                            }
-                            else {
-                                setDisplayValue(formValue);
+    // Refs separados: uno para el visible y otro para el hidden (registrado)
+    const setHiddenRef = React.useCallback((node) => {
+        hiddenInputRef.current = node;
+        // Solo pasar el ref externo al hidden input en modo register
+        if (isRegisterMode) {
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+            // Sincronización inicial cuando el ref se monta
+            if (node) {
+                [0, 10, 50, 100, 200, 500].forEach((delay) => {
+                    setTimeout(() => {
+                        if (node && hiddenInputRef.current === node) {
+                            const formValue = node.value;
+                            if (formValue) {
+                                const matchingOption = options.find((option) => String(valueGetter(option)) === String(formValue));
+                                if (matchingOption) {
+                                    setDisplayValue(labelGetter(matchingOption));
+                                }
+                                else {
+                                    setDisplayValue(formValue);
+                                }
                             }
                         }
-                    }
-                }, delay);
-            });
+                    }, delay);
+                });
+            }
         }
     }, [ref, isRegisterMode, options, valueGetter, labelGetter]);
-    return (_jsxs("div", { ref: containerRef, className: "relative w-full", children: [_jsx(Input, { ...inputProps, ref: combinedRef, value: inputValue, onChange: handleChange, onFocus: () => {
+    const setVisibleRef = React.useCallback((node) => {
+        inputRef.current = node;
+        // En modo NO register, pasamos el ref al input visible
+        if (!isRegisterMode) {
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }
+    }, [ref, isRegisterMode]);
+    // Separar propiedades para input visible y hidden
+    const { name: nameProp, ...visibleInputProps } = inputProps;
+    return (_jsxs("div", { ref: containerRef, className: "relative w-full", children: [isRegisterMode && (_jsx("input", { type: "hidden", name: nameProp, ref: setHiddenRef, defaultValue: value })), _jsx(Input, { ...visibleInputProps, name: isRegisterMode ? undefined : nameProp, ref: setVisibleRef, value: inputValue, onChange: handleChange, onFocus: () => {
                     if (!readOnly && !justClearedRef.current) {
                         setIsOpen(true);
                     }
@@ -467,7 +513,7 @@ const AutocompleteInputInner = React.forwardRef(({ options, value, onChange, onS
                     dropdownPosition &&
                     isMounted &&
                     bodyElement &&
-                    createPortal(_jsx("div", { ref: dropdownRef, className: "fixed z-[2001] min-w-full w-max rounded-md border border-[var(--color-border-default)] \r\n          bg-[var(--color-bg-default)] shadow-[var(--shadow-lg)] max-h-60 overflow-auto", style: {
+                    createPortal(_jsx("div", { ref: dropdownRef, className: "fixed z-[2001] min-w-full w-max rounded-md border border-[var(--color-border-default)] \n          bg-[var(--color-bg-default)] shadow-[var(--shadow-lg)] max-h-60 overflow-auto", style: {
                             top: `${dropdownPosition.top}px`,
                             left: `${dropdownPosition.left}px`,
                             minWidth: `${dropdownPosition.width}px`,
@@ -475,13 +521,13 @@ const AutocompleteInputInner = React.forwardRef(({ options, value, onChange, onS
                                 const label = labelGetter(option);
                                 const description = descriptionGetter(option);
                                 const anyOption = option;
-                                return (_jsx("li", { className: `px-3 py-2 cursor-pointer flex items-start gap-2 text-sm
+                                return (_jsx("li", { className: `px-3 py-2 cursor-pointer flex items-start gap-2 text-sm
                       ${index === highlightedIndex
                                         ? "bg-[var(--color-primary-soft)] text-[var(--color-primary)]"
                                         : "text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)]"}`, onMouseDown: (event) => {
                                         event.preventDefault();
                                         handleSelect(option);
-                                    }, onMouseEnter: () => setHighlightedIndex(index), children: renderOption ? (renderOption(option)) : (_jsxs(_Fragment, { children: [anyOption.icon && (_jsx("i", { className: `fa ${anyOption.icon} mt-0.5 text-[var(--color-text-muted)] flex-shrink-0` })), _jsxs("div", { className: "flex flex-col min-w-0", children: [_jsx("span", { className: "font-[var(--font-default)] whitespace-nowrap", children: label }), description !== undefined &&
+                                    }, onMouseEnter: () => setHighlightedIndex(index), children: renderOption ? (renderOption(option)) : (_jsxs(_Fragment, { children: [anyOption.icon && (_jsx("i", { className: `${normalizeIconClass(anyOption.icon)} mt-0.5 text-[var(--color-text-muted)] flex-shrink-0` })), _jsxs("div", { className: "flex flex-col min-w-0", children: [_jsx("span", { className: "font-[var(--font-default)] whitespace-nowrap", children: label }), description !== undefined &&
                                                         description !== null && (_jsx("span", { className: "text-xs text-[var(--color-text-secondary)] break-words", children: description }))] })] })) }, String(valueGetter(option) ?? label ?? index)));
                             }) })) : (_jsx("div", { className: "px-3 py-2 text-sm text-[var(--color-text-secondary)]", children: noResultsText })) }), bodyElement));
             })()] }));

package/dist/components/form-controls/Button.d.ts

@@ -2,6 +2,9 @@ import React from "react";
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: "primary" | "outline" | "ghost";
     size?: "sm" | "md" | "lg";
+    color?: "primary" | "secondary" | "success" | "warning" | "danger" | "info";
+    bg?: string;
+    textColor?: string;
     icon?: string;
     iconPosition?: "left" | "right";
     loading?: boolean;

package/dist/components/form-controls/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AASD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAiHxC,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkC1B,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC5E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AASD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwPxC,CAAC"}