flysoft-react-ui 0.4.0 → 0.5.2

package/dist/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAUA,OAAO,aAAa,CAAC;AAoCrB,iBAAS,GAAG,4CAkBX;AAED,eAAe,GAAG,CAAC"}
+{"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"}

package/dist/App.js

@@ -1,15 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { AppLayout, Badge, Button, Card, Collection, DataField, } from "./components";
+import { Badge, Button, Card, Collection, DataField } from "./components";
 import { Routes, Route, Link } from "react-router-dom";
-import { ThemeProvider } from "./index";
+import { AppLayoutProvider } from "./index";
 import "./index.css";
 import { DocsMenu } from "./docs/DocsMenu";
 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: _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, {}) })] }));
+    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, {}) })] }));
+}
+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" }) }) }));
+}
+function LeftDrawerFooter() {
+    return (_jsx("div", { className: "px-4", children: _jsxs("span", { children: ["v ", packageJson.version] }) }));
 }
 function App() {
-    return (_jsx(ThemeProvider, { initialTheme: "light", forceInitialTheme: false, children: _jsx(AppLayout, { navBarDrawer: _jsx("h2", { children: _jsx(Link, { to: "/", children: "Flysoft React UI" }) }), leftDrawer: _jsx(DocsMenu, {}), children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(HomeContent, {}) }), _jsx(Route, { path: "/docs/*", element: _jsx(DocsRouter, {}) })] }) }) }));
+    return (_jsx(AppLayoutProvider, { initialTheme: "light", forceInitialTheme: false, initialNavbar: {
+            fullWidthNavbar: false,
+        }, initialLeftDrawer: {
+            headerNode: _jsx(LeftDrawerHeader, {}),
+            contentNode: _jsx(DocsMenu, {}),
+            footerNode: _jsx(LeftDrawerFooter, {}),
+        }, children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(HomeContent, {}) }), _jsx(Route, { path: "/docs/*", element: _jsx(DocsRouter, {}) })] }) }));
 }
 export default App;

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

@@ -6,13 +6,14 @@ export interface AutocompleteOption {
     description?: string | number;
     icon?: string;
 }
-export interface AutocompleteInputProps<T = AutocompleteOption, K = string> extends Omit<InputProps, "onChange" | "value"> {
+export interface AutocompleteInputProps<T = AutocompleteOption, K = string> extends Omit<InputProps, "onChange" | "value" | "ref"> {
     options: T[];
     value?: string;
     /**
      * Valor de texto del input (controlado)
+     * Puede ser un ChangeEventHandler (de register) o una función que recibe string (API personalizada)
      */
-    onChange?: (value: string) => void;
+    onChange?: React.ChangeEventHandler<HTMLInputElement> | ((value: string) => void);
     /**
      * Callback al seleccionar una opción. Devuelve el item completo (T) y el valor mapeado (K)
      */
@@ -34,6 +35,13 @@ export interface AutocompleteInputProps<T = AutocompleteOption, K = string> exte
      * Renderizado personalizado de cada opción. Si se define, se ignora el render por defecto.
      */
     renderOption?: (item: T) => React.ReactNode;
+    /**
+     * Si es true, el input será de solo lectura. No se podrá modificar ni desplegar las opciones.
+     * Por defecto es false.
+     */
+    readOnly?: boolean;
 }
-export declare const AutocompleteInput: <T = AutocompleteOption, K = string>({ options, value, onChange, onSelectOption, noResultsText, className, getOptionLabel, getOptionValue, getOptionDescription, renderOption, ...inputProps }: AutocompleteInputProps<T, K>) => import("react/jsx-runtime").JSX.Element;
+export declare const AutocompleteInput: <T = AutocompleteOption, K = string>(props: AutocompleteInputProps<T, K> & {
+    ref?: React.ForwardedRef<HTMLInputElement>;
+}) => React.ReactElement;
 //# sourceMappingURL=AutocompleteInput.d.ts.map

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;AAE1B,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,CAAC;IAC9C,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;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;CAC7C;AAED,eAAO,MAAM,iBAAiB,GAAI,CAAC,GAAG,kBAAkB,EAAE,CAAC,GAAG,MAAM,EAAE,2JAYnE,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,4CAoM9B,CAAC"}
+{"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"}

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

@@ -1,12 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
+import { createPortal } from "react-dom";
 import { Input } from "./Input";
-export const AutocompleteInput = ({ options, value, onChange, onSelectOption, noResultsText = "Sin resultados", className = "", getOptionLabel, getOptionValue, getOptionDescription, renderOption, ...inputProps }) => {
+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("");
     const [isOpen, setIsOpen] = React.useState(false);
     const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
+    const [dropdownPosition, setDropdownPosition] = React.useState(null);
     const containerRef = React.useRef(null);
-    const inputValue = value !== undefined ? value : internalValue;
+    const dropdownRef = React.useRef(null);
+    const inputRef = 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'
+    const isRegisterMode = React.useMemo(() => {
+        // Si viene 'name' en inputProps, es porque viene de register
+        return "name" in inputProps && inputProps.name !== undefined;
+    }, [inputProps]);
+    const inputValue = isRegisterMode
+        ? displayValue
+        : value !== undefined
+            ? value
+            : internalValue;
     const labelGetter = React.useCallback((item) => {
         if (getOptionLabel)
             return getOptionLabel(item);
@@ -35,26 +51,191 @@ export const AutocompleteInput = ({ options, value, onChange, onSelectOption, no
             return label.includes(search) || optionValue.includes(search);
         });
     }, [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
+            }
+        }
+        return false;
+    }, [isRegisterMode, options, valueGetter, labelGetter]);
+    // Sincronizar displayValue con el valor del formulario en modo register
+    // Usar un intervalo que se ejecute hasta que encuentre el valor o hasta un máximo de intentos
+    React.useEffect(() => {
+        if (isRegisterMode) {
+            let attempts = 0;
+            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;
+                    if (formValue) {
+                        // Hay un valor, intentar sincronizar
+                        const matchingOption = options.find((option) => String(valueGetter(option)) === String(formValue));
+                        if (matchingOption) {
+                            const label = labelGetter(matchingOption);
+                            setDisplayValue(label);
+                            return true; // Valor encontrado y sincronizado
+                        }
+                        else {
+                            setDisplayValue(formValue);
+                            return true; // Valor encontrado pero no coincide con opciones
+                        }
+                    }
+                }
+                return false; // No hay valor aún
+            };
+            // Intentar inmediatamente
+            if (trySync()) {
+                return; // Ya encontramos el valor
+            }
+            // Si no encontramos el valor, usar un intervalo para seguir intentando
+            const intervalId = window.setInterval(() => {
+                attempts++;
+                if (trySync() || attempts >= maxAttempts) {
+                    clearInterval(intervalId);
+                }
+            }, 100); // Intentar cada 100ms
+            // También usar timeouts como fallback
+            const timeouts = [];
+            [0, 50, 100, 200, 500, 1000].forEach((delay) => {
+                const timeoutId = window.setTimeout(() => {
+                    trySync();
+                }, delay);
+                timeouts.push(timeoutId);
+            });
+            return () => {
+                clearInterval(intervalId);
+                timeouts.forEach(clearTimeout);
+            };
+        }
+    }, [isRegisterMode, options, valueGetter, labelGetter]);
+    // También escuchar cambios en el input nativo 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();
+            };
+        }
+    }, [isRegisterMode, syncDisplayValue]);
     const handleChange = (event) => {
+        if (readOnly)
+            return;
         const newValue = event.target.value;
-        if (value === undefined) {
-            setInternalValue(newValue);
+        if (isRegisterMode) {
+            // En modo register, actualizar el displayValue para mostrar lo que el usuario escribe
+            setDisplayValue(newValue);
+        }
+        else {
+            // Modo API personalizada
+            if (value === undefined) {
+                setInternalValue(newValue);
+            }
+            if (onChange) {
+                onChange(newValue);
+            }
         }
-        onChange?.(newValue);
         setIsOpen(true);
         setHighlightedIndex(-1);
     };
     const handleSelect = (option) => {
+        if (readOnly)
+            return;
         const label = labelGetter(option);
         const selectedValue = valueGetter(option);
-        if (value === undefined) {
-            setInternalValue(label);
+        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;
+                }
+                // 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);
+                }
+                // 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);
+            }
+            // 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);
+            }
         }
-        onChange?.(label);
         onSelectOption?.(option, selectedValue);
         setIsOpen(false);
     };
     const handleKeyDown = (event) => {
+        if (readOnly)
+            return;
         if (!isOpen && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
             setIsOpen(true);
             return;
@@ -70,44 +251,242 @@ export const AutocompleteInput = ({ options, value, onChange, onSelectOption, no
             setHighlightedIndex((prev) => prev > 0 ? prev - 1 : filteredOptions.length - 1);
         }
         else if (event.key === "Enter") {
-            if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
+            // Si hay una opción resaltada, seleccionarla
+            if (highlightedIndex >= 0 &&
+                highlightedIndex < filteredOptions.length) {
                 event.preventDefault();
                 handleSelect(filteredOptions[highlightedIndex]);
             }
+            else if (isOpen && filteredOptions.length > 0) {
+                // Si no hay opción resaltada pero hay opciones disponibles, seleccionar la primera
+                event.preventDefault();
+                handleSelect(filteredOptions[0]);
+            }
         }
         else if (event.key === "Escape") {
             setIsOpen(false);
         }
     };
     React.useEffect(() => {
+        if (!isOpen)
+            return;
         const handleClickOutside = (event) => {
-            if (containerRef.current &&
-                !containerRef.current.contains(event.target)) {
+            const target = event.target;
+            const isClickInsideContainer = containerRef.current?.contains(target);
+            const isClickInsideDropdown = dropdownRef.current?.contains(target);
+            if (!isClickInsideContainer && !isClickInsideDropdown) {
                 setIsOpen(false);
             }
         };
-        document.addEventListener("mousedown", handleClickOutside);
+        // Pequeño delay para asegurar que el portal esté montado
+        const timer = setTimeout(() => {
+            document.addEventListener("mousedown", handleClickOutside);
+        }, 0);
         return () => {
+            clearTimeout(timer);
             document.removeEventListener("mousedown", handleClickOutside);
         };
-    }, []);
+    }, [isOpen]);
+    React.useEffect(() => {
+        if (!isRegisterMode) {
+            // Solo para modo API personalizada
+            if (value !== undefined) {
+                // Si el value es el resultado de getOptionValue, buscar la opción correspondiente
+                // y mostrar su label. Si no se encuentra, mostrar el value tal cual.
+                const matchingOption = options.find((option) => String(valueGetter(option)) === String(value));
+                if (matchingOption) {
+                    setInternalValue(labelGetter(matchingOption));
+                }
+                else {
+                    setInternalValue(value);
+                }
+            }
+            else {
+                // Resetear el estado interno cuando value es undefined (por ejemplo, después de un reset)
+                setInternalValue("");
+            }
+        }
+    }, [value, options, valueGetter, labelGetter, isRegisterMode]);
+    const showDropdown = !readOnly && isOpen && (filteredOptions.length > 0 || noResultsText);
+    // Verificar que estamos en el navegador
+    // Inicializar isMounted de forma síncrona si es posible
+    const [isMounted, setIsMounted] = React.useState(() => {
+        return typeof document !== "undefined" && !!document.body;
+    });
     React.useEffect(() => {
-        if (value !== undefined) {
-            setInternalValue(value);
-        }
-    }, [value]);
-    const showDropdown = isOpen && (filteredOptions.length > 0 || noResultsText);
-    return (_jsxs("div", { ref: containerRef, className: "relative w-full", children: [_jsx(Input, { ...inputProps, value: inputValue, onChange: handleChange, onFocus: () => setIsOpen(true), onKeyDown: handleKeyDown, className: className, autoComplete: "off" }), showDropdown && (_jsx("div", { className: "absolute z-20 mt-1 w-full rounded-md border border-[var(--color-border-default)] \r\n          bg-[var(--color-bg-default)] shadow-[var(--shadow-lg)] max-h-60 overflow-auto", children: filteredOptions.length > 0 ? (_jsx("ul", { className: "py-1", children: filteredOptions.map((option, index) => {
-                        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
+        if (!isMounted && typeof document !== "undefined" && document.body) {
+            setIsMounted(true);
+        }
+    }, [isMounted]);
+    // Actualizar posición del dropdown cuando se abre
+    React.useEffect(() => {
+        if (showDropdown && containerRef.current && isMounted) {
+            const updatePosition = () => {
+                const rect = containerRef.current?.getBoundingClientRect();
+                if (rect) {
+                    setDropdownPosition({
+                        top: rect.bottom + window.scrollY + 4,
+                        left: rect.left + window.scrollX,
+                        width: rect.width,
+                    });
+                }
+            };
+            updatePosition();
+            window.addEventListener("scroll", updatePosition, true);
+            window.addEventListener("resize", updatePosition);
+            return () => {
+                window.removeEventListener("scroll", updatePosition, true);
+                window.removeEventListener("resize", updatePosition);
+            };
+        }
+        else {
+            setDropdownPosition(null);
+        }
+    }, [showDropdown, isMounted]);
+    // 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 (value === undefined || value === null || value === "")
+            return false;
+        // Verificar si el value coincide con el getOptionValue de alguna opción
+        return options.some((option) => String(valueGetter(option)) === String(value));
+    }, [value, options, valueGetter, isRegisterMode]);
+    // Función para limpiar el valor
+    const handleClear = React.useCallback((event) => {
+        if (readOnly)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        // 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;
+                const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+                setter?.call(nativeInput, "");
+                // Disparar eventos para que react-hook-form lo capture
+                const inputEvent = new Event("input", { bubbles: true });
+                nativeInput.dispatchEvent(inputEvent);
+                const changeEvent = new Event("change", { bubbles: true });
+                nativeInput.dispatchEvent(changeEvent);
+            }
+            // 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
+            if (value === undefined) {
+                setInternalValue("");
+            }
+            if (onChange) {
+                onChange("");
+            }
+        }
+        setIsOpen(false);
+        // Resetear el flag después de un pequeño delay para permitir que otros eventos se procesen
+        setTimeout(() => {
+            justClearedRef.current = false;
+        }, 100);
+    }, [value, onChange, isRegisterMode, readOnly]);
+    // Determinar qué ícono mostrar: si hay valor seleccionado, mostrar "X", sino usar el ícono original
+    // Si está en readOnly, no mostrar el ícono de limpiar ni permitir clicks
+    const displayIcon = readOnly
+        ? inputProps.icon
+        : hasSelectedValue
+            ? "fa-times"
+            : inputProps.icon;
+    const displayIconPosition = readOnly
+        ? inputProps.iconPosition || "left"
+        : hasSelectedValue
+            ? "right"
+            : inputProps.iconPosition || "left";
+    const displayOnIconClick = readOnly
+        ? undefined
+        : 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);
+                            }
+                        }
+                    }
+                }, 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: () => {
+                    if (!readOnly && !justClearedRef.current) {
+                        setIsOpen(true);
+                    }
+                }, onKeyDown: handleKeyDown, className: className, icon: displayIcon, iconPosition: displayIconPosition, onIconClick: displayOnIconClick, readOnly: readOnly }), (() => {
+                // Verificar de forma segura que document.body existe y es válido
+                const bodyElement = typeof document !== "undefined" &&
+                    document.body &&
+                    document.body instanceof HTMLElement
+                    ? document.body
+                    : null;
+                return (showDropdown &&
+                    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: {
+                            top: `${dropdownPosition.top}px`,
+                            left: `${dropdownPosition.left}px`,
+                            minWidth: `${dropdownPosition.width}px`,
+                        }, children: filteredOptions.length > 0 ? (_jsx("ul", { className: "py-1", children: filteredOptions.map((option, index) => {
+                                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
                       ${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)]` })), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "font-[var(--font-default)]", children: label }), description !== undefined &&
-                                                description !== null && (_jsx("span", { className: "text-xs text-[var(--color-text-secondary)]", children: description }))] })] })) }, String(valueGetter(option) ?? label ?? index)));
-                    }) })) : (_jsx("div", { className: "px-3 py-2 text-sm text-[var(--color-text-secondary)]", children: noResultsText })) }))] }));
-};
+                                        ? "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 &&
+                                                        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));
+            })()] }));
+});
+// Asignar displayName antes del cast genérico
+AutocompleteInputInner.displayName = "AutocompleteInput";
+// Exportar con el cast genérico
+export const AutocompleteInput = AutocompleteInputInner;

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

@@ -33,7 +33,7 @@ export const Button = ({ variant = "primary", size = "md", icon, iconPosition =
         if (!icon)
             return null;
         const iconClasses = size === "sm" ? "w-4 h-4" : size === "md" ? "w-5 h-5" : "w-6 h-6";
-        return (_jsx("i", { className: `fa ${icon} ${iconClasses} ${children ? (iconPosition === "right" ? "ml-2" : "mr-2") : ""}` }));
+        return (_jsx("i", { className: `fa ${icon} ${iconClasses} ${children ? (iconPosition === "right" ? "ml-2" : "mr-2") : ""} mt-0.5` }));
     };
     const rippleColor = variant === "primary" ? "rgba(255, 255, 255, 0.45)" : "rgba(0, 0, 0, 0.15)";
     const handleClick = (event) => {

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

@@ -0,0 +1,14 @@
+import React from "react";
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    label?: string;
+    labelPosition?: "left" | "right";
+    error?: string;
+    size?: "sm" | "md" | "lg";
+    /**
+     * Si es true, el checkbox será de solo lectura. No se podrá modificar pero se verá igual visualmente.
+     * Por defecto es false.
+     */
+    readOnly?: boolean;
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,MAAM,CAChB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,wFAsIpB,CAAC"}