flysoft-react-ui 1.2.3 → 1.2.5

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

@@ -1,336 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useMemo, useRef, useCallback, useEffect, } from "react";
-import { useFormContext } from "react-hook-form";
-import { Input } from "./Input";
-import { Button } from "./Button";
-import { Dialog, Loader } from "../utils";
-import { normalizeIconClass } from "../utils/iconUtils";
-const SearchSelectInputInner = React.forwardRef(function SearchSelectInput({ value, onChange, onSearchPromiseFn, onSingleSearchPromiseFn, onSelectOption, dialogTitle = "Seleccione una opción", icon = "fa-search", iconPosition = "right", noResultsText = "Sin resultados", getOptionLabel, getOptionValue, getOptionDescription, renderOption, label, readOnly = false, ...inputProps }, ref) {
-    const [inputText, setInputText] = useState("");
-    const [dialogInputText, setDialogInputText] = useState("");
-    const [isDialogOpen, setIsDialogOpen] = useState(false);
-    const [options, setOptions] = useState([]);
-    const [isLoading, setIsLoading] = useState(false);
-    const [hasSearched, setHasSearched] = useState(false);
-    const inputRef = useRef(null);
-    const dialogInputRef = useRef(null);
-    const justClearedRef = useRef(false);
-    // Detectar modo register
-    const isRegisterMode = useMemo(() => {
-        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;
-    // Combinar refs
-    const combinedRef = useCallback((node) => {
-        inputRef.current = node;
-        if (typeof ref === "function") {
-            ref(node);
-        }
-        else if (ref) {
-            ref.current = node;
-        }
-    }, [ref]);
-    const valueGetter = useCallback((item) => {
-        if (getOptionValue)
-            return getOptionValue(item);
-        return item["value"];
-    }, [getOptionValue]);
-    const labelGetter = useCallback((item) => {
-        if (getOptionLabel)
-            return getOptionLabel(item);
-        return item["label"];
-    }, [getOptionLabel]);
-    const descriptionGetter = useCallback((item) => {
-        if (getOptionDescription)
-            return getOptionDescription(item);
-        return item["description"];
-    }, [getOptionDescription]);
-    const handleSearch = async (text) => {
-        setIsLoading(true);
-        setHasSearched(true);
-        const options = await onSearchPromiseFn(text);
-        if (options instanceof Array) {
-            setOptions(options);
-        }
-        else {
-            setOptions(options.list);
-        }
-        setIsLoading(false);
-    };
-    const handleSelect = (option) => {
-        const selectedValue = valueGetter(option);
-        setIsDialogOpen(false);
-        // En modo register, setear el valor usando setValue o actualizando el input nativo
-        if (isRegisterMode) {
-            if (setValue && fieldName) {
-                setValue(fieldName, selectedValue, {
-                    shouldValidate: true,
-                    shouldDirty: true,
-                });
-            }
-            else if (inputRef.current) {
-                const nativeInput = inputRef.current;
-                const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
-                if (nativeInputValueSetter) {
-                    nativeInputValueSetter.call(nativeInput, String(selectedValue ?? ""));
-                }
-                else {
-                    nativeInput.value = String(selectedValue ?? "");
-                }
-                if (onChange) {
-                    const changeEvent = {
-                        target: nativeInput,
-                        currentTarget: nativeInput,
-                    };
-                    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);
-            }
-        }
-        else {
-            onChange?.(selectedValue);
-        }
-        onSelectOption?.(option, selectedValue);
-        setInputText(labelGetter(option));
-        setDialogInputText("");
-        setOptions([]);
-        setHasSearched(false);
-    };
-    // Función para sincronizar inputText con un valor
-    const syncInputText = useCallback((currentValue) => {
-        if (currentValue === undefined ||
-            currentValue === null ||
-            currentValue === "") {
-            setInputText("");
-            return;
-        }
-        // Si currentValue es un objeto (T) y tenemos getOptionLabel, usar directamente
-        if (typeof currentValue === "object" &&
-            getOptionLabel &&
-            !getOptionValue) {
-            try {
-                const label = getOptionLabel(currentValue);
-                setInputText(label);
-                return;
-            }
-            catch {
-                // Si falla, continuar con la búsqueda normal
-            }
-        }
-        // Normalizar el value: si es un objeto (T), extraer el valor usando valueGetter
-        let valueToSearch = currentValue;
-        if (typeof currentValue === "object" && getOptionValue) {
-            // Si currentValue es un objeto y tenemos getOptionValue, extraer el valor
-            try {
-                valueToSearch = getOptionValue(currentValue);
-            }
-            catch {
-                // Si falla, no podemos usar onSingleSearchPromiseFn con un objeto
-                // Intentar mostrar el label directamente si está disponible
-                if (getOptionLabel) {
-                    try {
-                        setInputText(getOptionLabel(currentValue));
-                        return;
-                    }
-                    catch {
-                        setInputText(String(currentValue));
-                        return;
-                    }
-                }
-                setInputText(String(currentValue));
-                return;
-            }
-        }
-        // Buscar en las opciones actuales
-        const matchingOption = options.find((opt) => valueGetter(opt) === valueToSearch ||
-            valueGetter(opt) === currentValue);
-        if (matchingOption) {
-            setInputText(labelGetter(matchingOption));
-            return;
-        }
-        // Si no se encuentra en las opciones actuales, usar onSingleSearchPromiseFn
-        if (onSingleSearchPromiseFn &&
-            valueToSearch !== undefined &&
-            valueToSearch !== null) {
-            onSingleSearchPromiseFn(valueToSearch)
-                .then((foundOption) => {
-                if (foundOption) {
-                    setInputText(labelGetter(foundOption));
-                    // Agregar la opción a las opciones disponibles si no está ya
-                    setOptions((prev) => {
-                        if (!prev.find((opt) => valueGetter(opt) === valueGetter(foundOption))) {
-                            return [...prev, foundOption];
-                        }
-                        return prev;
-                    });
-                }
-                else {
-                    // Si no se encuentra, mostrar el valor como string
-                    setInputText(String(valueToSearch));
-                }
-            })
-                .catch((error) => {
-                console.error("Error al buscar opción individual:", error);
-                setInputText(String(valueToSearch));
-            });
-        }
-        else {
-            // Si no hay onSingleSearchPromiseFn, mostrar el valor como string
-            setInputText(String(valueToSearch));
-        }
-    }, [
-        options,
-        getOptionValue,
-        getOptionLabel,
-        onSingleSearchPromiseFn,
-        valueGetter,
-        labelGetter,
-    ]);
-    // Sincronizar inputText cuando cambia el value (modo controlado)
-    useEffect(() => {
-        if (!isRegisterMode) {
-            syncInputText(value);
-        }
-    }, [value, isRegisterMode, syncInputText]);
-    // Sincronizar inputText cuando cambia el valor del formulario (modo register)
-    useEffect(() => {
-        if (isRegisterMode && formContext && fieldName) {
-            // Sincronizar inicialmente
-            const formValue = formContext.watch(fieldName);
-            syncInputText(formValue);
-            // Suscribirse a cambios del formulario
-            const subscription = formContext.watch((_data, { name }) => {
-                // Solo sincronizar cuando cambia el campo específico
-                if (name === fieldName) {
-                    const currentFormValue = formContext.watch(fieldName);
-                    syncInputText(currentFormValue);
-                }
-            });
-            return () => subscription.unsubscribe();
-        }
-    }, [isRegisterMode, formContext, fieldName, syncInputText]);
-    // Hacer blur en el input del dialog cuando se abre
-    useEffect(() => {
-        if (isDialogOpen) {
-            // El Dialog renderiza condicionalmente, así que necesitamos esperar a que el input esté montado
-            // Usar requestAnimationFrame doble para asegurar que el DOM esté completamente renderizado
-            const timeoutId = setTimeout(() => {
-                requestAnimationFrame(() => {
-                    dialogInputRef.current?.focus();
-                });
-            }, 50);
-            return () => clearTimeout(timeoutId);
-        }
-    }, [isDialogOpen]);
-    const getDialogBody = () => {
-        return (_jsxs("div", { children: [_jsx("div", { className: "mb-2", children: _jsx(Input, { ref: dialogInputRef, value: dialogInputText, onChange: (e) => setDialogInputText(e.target.value), icon: icon, iconPosition: iconPosition, onIconClick: () => handleSearch(dialogInputText), onKeyDown: (e) => {
-                            if (e.key === "Enter") {
-                                e.preventDefault();
-                                handleSearch(dialogInputText);
-                            }
-                        } }) }), _jsx("div", { children: _jsx(Loader, { isLoading: isLoading, children: !hasSearched || options.length > 0 ? (_jsx("ul", { className: "space-y-1 max-h-96 overflow-y-auto list-none pl-0 m-0", children: options.map((option, index) => {
-                                const label = labelGetter(option);
-                                const description = descriptionGetter(option);
-                                const anyOption = option;
-                                return (_jsx("li", { className: "px-3 py-2 cursor-pointer rounded-md flex items-start gap-2 text-sm\r\n                        text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] transition-colors", onClick: () => handleSelect(option), children: renderOption ? (renderOption(option)) : (_jsxs(_Fragment, { children: [anyOption.icon && (_jsx("i", { className: `${normalizeIconClass(anyOption.icon)} mt-0.5 text-[var(--color-text-muted)]` })), _jsxs("div", { className: "flex flex-col flex-1", 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-8 text-center text-sm text-[var(--color-text-secondary)]", children: noResultsText })) }) })] }));
-    };
-    // Detectar si hay un valor seleccionado
-    const hasValue = inputText !== "" && inputText !== undefined && inputText !== null;
-    // Función para limpiar el valor y abrir el dialog
-    const handleIconClick = useCallback((event) => {
-        if (readOnly)
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        if (hasValue) {
-            // Si hay valor, limpiarlo
-            // Marcar que acabamos de limpiar para prevenir que onFocus abra el diálogo
-            justClearedRef.current = true;
-            if (isRegisterMode) {
-                if (setValue && fieldName) {
-                    setValue(fieldName, undefined, {
-                        shouldValidate: true,
-                        shouldDirty: true,
-                    });
-                }
-                else if (inputRef.current) {
-                    const nativeInput = inputRef.current;
-                    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
-                    if (nativeInputValueSetter) {
-                        nativeInputValueSetter.call(nativeInput, "");
-                    }
-                    else {
-                        nativeInput.value = "";
-                    }
-                    if (onChange) {
-                        const changeEvent = {
-                            target: nativeInput,
-                            currentTarget: nativeInput,
-                        };
-                        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);
-                }
-            }
-            else {
-                onChange?.(undefined);
-            }
-            setInputText("");
-            setIsDialogOpen(false);
-            // Resetear el flag después de un pequeño delay para permitir que otros eventos se procesen
-            setTimeout(() => {
-                justClearedRef.current = false;
-            }, 100);
-        }
-        else {
-            // Si no hay valor, abrir el dialog
-            setIsDialogOpen(true);
-        }
-    }, [hasValue, isRegisterMode, setValue, fieldName, onChange, readOnly]);
-    // Determinar qué ícono mostrar: si hay valor, mostrar "fa-times", sino el ícono original
-    // Si está en readOnly, no mostrar ningún ícono
-    const displayIcon = readOnly ? undefined : hasValue ? "fa-times" : icon;
-    const displayIconPosition = readOnly ? undefined : iconPosition;
-    const displayOnIconClick = readOnly ? undefined : handleIconClick;
-    return (_jsxs(_Fragment, { children: [_jsx(Input, { ...inputProps, ref: combinedRef, label: label, value: inputText, onChange: (e) => {
-                    if (readOnly)
-                        return;
-                    setInputText(e.target.value);
-                }, onFocus: () => {
-                    if (!readOnly && !justClearedRef.current) {
-                        setIsDialogOpen(true);
-                    }
-                }, icon: displayIcon, iconPosition: displayIconPosition, onIconClick: displayOnIconClick, readOnly: readOnly }), !readOnly && (_jsx(Dialog, { isOpen: isDialogOpen, title: dialogTitle, footer: _jsx(Button, { variant: "outline", onClick: () => setIsDialogOpen(false), children: "Cerrar" }), onClose: () => setIsDialogOpen(false), children: getDialogBody() }))] }));
-});
-SearchSelectInputInner.displayName = "SearchSelectInput";
-// Exportar con el cast genérico para permitir uso como <SearchSelectInput<T, K>>
-export const SearchSelectInput = SearchSelectInputInner;

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

@@ -1,11 +0,0 @@
-export { Button } from "./Button";
-export { LinkButton } from "./LinkButton";
-export { Input } from "./Input";
-export { AutocompleteInput } from "./AutocompleteInput";
-export { SearchSelectInput } from "./SearchSelectInput-OLD";
-export { DatePicker } from "./DatePicker";
-export { DateInput } from "./DateInput";
-export { Pagination } from "./Pagination";
-export { Checkbox } from "./Checkbox";
-export { RadioButtonGroup } from "./RadioButtonGroup";
-export { CurrencyInput } from "./CurrencyInput";

package/dist/components/index.js

@@ -1,7 +0,0 @@
-// Form Controls
-export * from "./form-controls";
-// Layout Components
-export * from "./layout";
-// Utility Components
-export * from "./utils";
-export { ThemeSwitcher } from "./ThemeSwitcher";

package/dist/components/layout/Accordion.js

@@ -1,67 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect } from "react";
-import { normalizeIconClass } from "../utils/iconUtils";
-export const Accordion = ({ title, children, icon, rightNode, defaultOpen = false, className = "", variant = "default", onToggle, }) => {
-    const [isOpen, setIsOpen] = useState(defaultOpen);
-    const [contentHeight, setContentHeight] = useState(0);
-    const contentRef = useRef(null);
-    // Separar clases de background del className
-    const classArray = className.trim().split(/\s+/).filter(Boolean);
-    const bgClasses = [];
-    const otherClasses = [];
-    classArray.forEach((cls) => {
-        // Detectar clases de background (bg-*, bg-gradient-*, bg-[...])
-        if (cls.startsWith("bg-") || cls.startsWith("bg-gradient-")) {
-            bgClasses.push(cls);
-        }
-        else {
-            otherClasses.push(cls);
-        }
-    });
-    const backgroundClass = bgClasses.length > 0 ? bgClasses.join(" ") : "bg-[var(--color-bg-default)]";
-    const baseClasses = `
-    ${backgroundClass} rounded-lg border
-    font-[var(--font-default)]
-  `;
-    const variantClasses = {
-        default: `border-[var(--color-border-default)]`,
-        elevated: `border-[var(--color-border-default)] shadow-[var(--shadow-lg)]`,
-        outlined: `border-[var(--color-gray-300)]`,
-    };
-    const classes = `${baseClasses} ${variantClasses[variant]} ${otherClasses.join(" ")}`;
-    useEffect(() => {
-        if (contentRef.current) {
-            if (isOpen) {
-                // Usar requestAnimationFrame para asegurar que el DOM esté actualizado
-                requestAnimationFrame(() => {
-                    if (contentRef.current) {
-                        setContentHeight(contentRef.current.scrollHeight);
-                    }
-                });
-            }
-            else {
-                setContentHeight(0);
-            }
-        }
-    }, [isOpen, children]);
-    // Inicializar altura si está abierto por defecto
-    useEffect(() => {
-        if (defaultOpen && contentRef.current) {
-            requestAnimationFrame(() => {
-                if (contentRef.current) {
-                    setContentHeight(contentRef.current.scrollHeight);
-                }
-            });
-        }
-    }, [defaultOpen]);
-    const handleToggle = () => {
-        const newIsOpen = !isOpen;
-        setIsOpen(newIsOpen);
-        if (onToggle) {
-            onToggle(newIsOpen);
-        }
-    };
-    return (_jsxs("div", { className: `${classes} overflow-hidden`, children: [_jsxs("button", { onClick: handleToggle, className: "w-full flex items-center justify-between px-4 py-3 flysoft-button-reset bg-transparent border-none hover:bg-black/5 dark:hover:bg-white/5 transition-colors cursor-pointer", "aria-expanded": isOpen, children: [_jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [icon && (_jsx("i", { className: `${normalizeIconClass(icon)} text-[var(--color-text-secondary)] flex-shrink-0` })), _jsx("span", { className: "text-left font-medium text-[var(--color-text-primary)] truncate", children: title })] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [rightNode && (_jsx("div", { className: "flex items-center", onClick: (e) => e.stopPropagation(), children: rightNode })), _jsx("i", { className: `${normalizeIconClass(`fa-chevron-${isOpen ? "up" : "down"}`)} text-[var(--color-text-secondary)] transition-all duration-200 flex-shrink-0` })] })] }), _jsx("div", { ref: contentRef, className: "overflow-hidden transition-all duration-300 ease-in-out", style: {
-                    maxHeight: `${contentHeight}px`,
-                }, children: _jsx("div", { className: "px-4 py-3 text-[var(--color-text-primary)]", children: children }) })] }));
-};

package/dist/components/layout/AppLayout.js

@@ -1,230 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useRef } from "react";
-import { useBreakpoint } from "../../hooks";
-import { useElementScroll } from "../../hooks/useElementScroll";
-import { Button } from "../form-controls";
-export const AppLayout = ({ navbar, leftDrawer, contentFooter, children, className = "", }) => {
-    // Extract values from interfaces
-    const navBarLeftNode = navbar?.navBarLeftNode;
-    const navBarRightNode = navbar?.navBarRightNode;
-    const fullWidthNavbar = navbar?.fullWidthNavbar ?? true;
-    const navbarHeight = navbar?.height ?? "64px";
-    const navbarClassName = navbar?.className || "";
-    const leftDrawerHeader = leftDrawer?.headerNode;
-    const leftDrawerContent = leftDrawer?.contentNode;
-    const leftDrawerFooter = leftDrawer?.footerNode;
-    const leftDrawerClassName = leftDrawer?.className || "";
-    const leftDrawerWidth = leftDrawer?.width;
-    const { isMobile, isTablet } = useBreakpoint();
-    const contentRef = useRef(null);
-    const { scrollY, scrollDirection } = useElementScroll(contentRef);
-    const [isMobileDrawerOpen, setIsMobileDrawerOpen] = useState(false);
-    const [isNavbarVisible, setIsNavbarVisible] = useState(true);
-    const isNavbarVisibleRef = useRef(isNavbarVisible);
-    const isTransitioningRef = useRef(false);
-    const lastScrollYRef = useRef(0);
-    // Determinar si hay algún contenido en el drawer izquierdo
-    const hasLeftDrawerContent = leftDrawerHeader || leftDrawerContent || leftDrawerFooter;
-    const shouldShowMobileDrawer = isMobile || isTablet;
-    const shouldShowDesktopDrawer = !shouldShowMobileDrawer && hasLeftDrawerContent;
-    // Determinar si debemos mostrar el navbar
-    // Se muestra si hay navBarLeftNode o navBarRightNode o si estamos en móvil/tablet con contenido en el drawer
-    const shouldShowNavbar = navBarLeftNode ||
-        navBarRightNode ||
-        (shouldShowMobileDrawer && hasLeftDrawerContent);
-    // Mantener el ref sincronizado con el estado
-    React.useEffect(() => {
-        isNavbarVisibleRef.current = isNavbarVisible;
-        // Marcar que estamos en transición por 350ms (duración de la transición + margen)
-        isTransitioningRef.current = true;
-        const timer = setTimeout(() => {
-            isTransitioningRef.current = false;
-        }, 350);
-        return () => clearTimeout(timer);
-    }, [isNavbarVisible]);
-    // Controlar visibilidad del navbar basado en scroll con histeresis mejorada
-    React.useEffect(() => {
-        // Ignorar cambios durante transiciones o cambios muy pequeños de scroll
-        if (isTransitioningRef.current) {
-            return;
-        }
-        const SCROLL_DELTA_THRESHOLD = 5; // Mínimo cambio de scroll para considerar
-        const scrollDelta = Math.abs(scrollY - lastScrollYRef.current);
-        // Ignorar cambios muy pequeños que pueden ser causados por el cambio de padding
-        if (scrollDelta < SCROLL_DELTA_THRESHOLD && lastScrollYRef.current > 0) {
-            return;
-        }
-        const SHOW_THRESHOLD = 80;
-        const HIDE_THRESHOLD = 120;
-        // Verificar si estamos cerca del final del scroll (margen de error de 10px)
-        const element = contentRef.current;
-        const isNearBottom = element
-            ? Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) < 10
-            : false;
-        let shouldBeVisible;
-        if (scrollY < SHOW_THRESHOLD) {
-            // Siempre mostrar navbar cerca del top
-            shouldBeVisible = true;
-        }
-        else if (scrollDirection === "down" &&
-            scrollY > HIDE_THRESHOLD &&
-            !isNearBottom) {
-            // Ocultar navbar al hacer scroll hacia abajo, excepto si estamos cerca del final
-            shouldBeVisible = false;
-        }
-        else if (scrollDirection === "up" && scrollY > SHOW_THRESHOLD) {
-            // Mostrar navbar al hacer scroll hacia arriba
-            shouldBeVisible = true;
-        }
-        else if (isNearBottom && scrollDirection === "down") {
-            // Si estamos en el final y scrolleamos hacia abajo, mantener el estado actual
-            return;
-        }
-        else {
-            // No cambiar el estado si scrollDirection es null o no se cumple ninguna condición
-            return;
-        }
-        // Solo actualizar el estado si hay un cambio real
-        if (shouldBeVisible !== isNavbarVisibleRef.current) {
-            lastScrollYRef.current = scrollY;
-            setIsNavbarVisible(shouldBeVisible);
-        }
-        else {
-            // Actualizar la referencia del scroll incluso si no cambiamos la visibilidad
-            lastScrollYRef.current = scrollY;
-        }
-    }, [scrollDirection, scrollY]);
-    const handleMobileDrawerToggle = () => {
-        setIsMobileDrawerOpen(!isMobileDrawerOpen);
-    };
-    const handleOverlayClick = () => {
-        setIsMobileDrawerOpen(false);
-    };
-    // Clases base del layout
-    const layoutClasses = `
-    flex flex-col w-full ${navbar?.navBarLeftNode || navbar?.navBarRightNode || leftDrawer?.contentNode || leftDrawer?.headerNode || leftDrawer?.footerNode ? "h-screen overflow-hidden" : "h-auto"}
-    font-[var(--font-default)]
-    ${className}
-  `;
-    // Clases del navbar
-    const navbarClasses = `${fullWidthNavbar
-        ? `z-[1000] fixed top-0 left-0 right-0 overflow-hidden`
-        : `relative z-[1000] overflow-hidden`} ${navbarClassName}`.trim();
-    // Estilos inline para la transformación
-    // Cuando fullWidthNavbar es false, solo usamos height para ocultar (sin transform)
-    // Cuando fullWidthNavbar es true, usamos transform para ocultar (manteniendo height)
-    const navbarStyle = fullWidthNavbar
-        ? {
-            transform: isNavbarVisible ? "translateY(0)" : "translateY(-100%)",
-            transition: "transform 100ms ease-in",
-            willChange: "transform",
-            height: navbarHeight, // Override any height classes in className
-        }
-        : {
-            height: isNavbarVisible ? navbarHeight : "0",
-            minHeight: isNavbarVisible ? navbarHeight : "0",
-            maxHeight: isNavbarVisible ? navbarHeight : "0",
-            transition: "height 100ms ease-in, min-height 100ms ease-in, max-height 100ms ease-in",
-            overflow: "hidden",
-        };
-    const navbarContentClasses = `flex items-center justify-between gap-2`;
-    // Style for navbar content with dynamic height
-    // When fullWidthNavbar is false and hidden, set height to 0 to not occupy space
-    // When fullWidthNavbar is true, always maintain height to prevent layout shifts
-    const navbarContentStyle = {
-        height: fullWidthNavbar || isNavbarVisible ? navbarHeight : "0",
-        maxHeight: fullWidthNavbar || isNavbarVisible ? navbarHeight : "0",
-        overflow: "hidden",
-        transition: "height 100ms ease-in, max-height 100ms ease-in",
-        opacity: isNavbarVisible || fullWidthNavbar ? 1 : 0,
-    };
-    const navbarLeftClasses = `flex items-center gap-2`;
-    const navbarRightClasses = `flex items-center gap-2`;
-    // Clases del contenido principal
-    const mainClasses = `flex flex-1 overflow-hidden transition-all duration-100 ease-in`;
-    // Style for main content with dynamic navbar height padding
-    // No padding here anymore, it's handled by individual elements
-    const mainStyle = {};
-    // Style for the main content area (actual scrollable area)
-    // When fullWidthNavbar is true, we need top padding to avoid being covered by fixed navbar
-    const contentStyle = fullWidthNavbar && shouldShowNavbar && isNavbarVisible
-        ? { paddingTop: navbarHeight }
-        : {};
-    // Clases del drawer izquierdo (contenedor principal)
-    // width se aplica como estilo inline para tener prioridad sobre className
-    const leftDrawerClasses = `
-    ${leftDrawerWidth ? "" : "w-64"} bg-[var(--color-bg-default)]
-    flex-shrink-0 flex flex-col
-    transition-all duration-100 ease-in
-    ${leftDrawerClassName}
-  `
-        .trim()
-        .replace(/\s+/g, " ");
-    // Style for left drawer with dynamic height and positioning
-    const leftDrawerStyle = {
-        ...(leftDrawerWidth ? { width: leftDrawerWidth } : {}),
-        height: "100%", // Siempre 100% para evitar huecos en la parte superior
-    };
-    if (fullWidthNavbar) {
-        // Si el navbar es fullwidth, el drawer mide 100% y usamos padding para que el contenido
-        // no quede debajo del navbar fixed.
-        leftDrawerStyle.paddingTop =
-            shouldShowNavbar && isNavbarVisible ? navbarHeight : "0px";
-        leftDrawerStyle.transition = "padding-top 100ms ease-in";
-    }
-    else {
-        // Si no es fullwidth, el drawer está al lado del navbar.
-        // No necesitamos marginTop ni height dinámico porque ya está en un flex-row
-        // y queremos que ocupe siempre todo el alto desde el borde superior.
-        leftDrawerStyle.marginTop = "0px";
-        leftDrawerStyle.transition = "padding-top 100ms ease-in";
-    }
-    // Clases del contenedor que incluye drawer y contenido (cuando fullWidthNavbar es false)
-    const contentWrapperClasses = fullWidthNavbar
-        ? ""
-        : `flex flex-row flex-1 overflow-hidden`;
-    // Clases del contenedor que incluye navbar y main (cuando fullWidthNavbar es false)
-    const drawerAndContentClasses = fullWidthNavbar
-        ? ""
-        : `flex flex-col flex-1 overflow-hidden`;
-    // Style for drawer and content wrapper with dynamic navbar height padding
-    const drawerAndContentStyle = !fullWidthNavbar && shouldShowNavbar && isNavbarVisible
-        ? { paddingTop: 0 }
-        : {};
-    // Clases del header del drawer (fijo arriba)
-    const leftDrawerHeaderClasses = `
-    flex-shrink-0
-  `;
-    // Clases del contenido del drawer (scrolleable sin scrollbar visible)
-    const leftDrawerContentClasses = `
-    flex-1 overflow-y-auto scrollbar-hide
-  `;
-    // Clases del footer del drawer (fijo abajo)
-    const leftDrawerFooterClasses = `
-    flex-shrink-0
-  `;
-    const contentClasses = `
-    flex-1 overflow-y-auto flex flex-col
-  `;
-    // Clases del overlay móvil
-    const overlayClasses = `
-    fixed inset-0 bg-black/50 backdrop-blur-sm z-[1998]
-  `;
-    // Clases del drawer móvil
-    const mobileDrawerBaseClasses = `
-    fixed top-0 left-0 h-screen w-64 max-w-[80vw]
-    bg-[var(--color-bg-default)] shadow-[var(--shadow-xl)]
-    transform -translate-x-full transition-transform duration-100 ease-in
-    z-[1999] flex flex-col
-    ${leftDrawerClassName}
-  `
-        .trim()
-        .replace(/\s+/g, " ");
-    // Style for mobile drawer with dynamic width
-    const mobileDrawerStyle = leftDrawerWidth ? { width: leftDrawerWidth } : {};
-    const mobileDrawerOpenClasses = `translate-x-0`;
-    const mobileDrawerContentClasses = `
-    flex-1 overflow-y-auto scrollbar-hide
-  `;
-    return (_jsxs("div", { className: layoutClasses, children: [fullWidthNavbar ? (_jsxs(_Fragment, { children: [shouldShowNavbar && (_jsx("nav", { className: navbarClasses, style: navbarStyle, children: _jsxs("div", { className: navbarContentClasses, style: navbarContentStyle, children: [_jsxs("div", { className: navbarLeftClasses, children: [shouldShowMobileDrawer && hasLeftDrawerContent && (_jsx("div", { className: "pr-4 lg:px-4 md:px-3", children: _jsx(Button, { variant: "ghost", icon: "fa-bars", onClick: handleMobileDrawerToggle, "aria-label": "Abrir men\u00FA" }) })), navBarLeftNode && (_jsx("div", { children: typeof navBarLeftNode === "string" ? (_jsx("span", { children: navBarLeftNode })) : (navBarLeftNode) }))] }), navBarRightNode && (_jsx("div", { className: navbarRightClasses, children: typeof navBarRightNode === "string" ? (_jsx("span", { children: navBarRightNode })) : (navBarRightNode) }))] }) })), _jsxs("div", { className: mainClasses, style: mainStyle, children: [shouldShowDesktopDrawer && (_jsxs("aside", { className: leftDrawerClasses, style: leftDrawerStyle, children: [leftDrawerHeader && (_jsx("div", { className: leftDrawerHeaderClasses, children: leftDrawerHeader })), leftDrawerContent && (_jsx("div", { className: leftDrawerContentClasses, children: leftDrawerContent })), leftDrawerFooter && (_jsx("div", { className: leftDrawerFooterClasses, children: leftDrawerFooter }))] })), _jsxs("main", { ref: contentRef, className: contentClasses, style: contentStyle, children: [_jsx("div", { className: "flex-1", children: children }), contentFooter && _jsx("div", { role: "contentinfo", children: contentFooter })] })] })] })) : (_jsx(_Fragment, { children: _jsxs("div", { className: contentWrapperClasses, children: [shouldShowDesktopDrawer && (_jsxs("aside", { className: leftDrawerClasses, style: leftDrawerStyle, children: [leftDrawerHeader && (_jsx("div", { className: leftDrawerHeaderClasses, children: leftDrawerHeader })), leftDrawerContent && (_jsx("div", { className: leftDrawerContentClasses, children: leftDrawerContent })), leftDrawerFooter && (_jsx("div", { className: leftDrawerFooterClasses, children: leftDrawerFooter }))] })), _jsxs("div", { className: drawerAndContentClasses, style: drawerAndContentStyle, children: [shouldShowNavbar && (_jsx("nav", { className: navbarClasses, style: navbarStyle, children: _jsxs("div", { className: navbarContentClasses, style: navbarContentStyle, children: [_jsxs("div", { className: navbarLeftClasses, children: [shouldShowMobileDrawer && hasLeftDrawerContent && (_jsx("div", { className: "pr-4 px-2", children: _jsx(Button, { variant: "ghost", icon: "fa-bars", onClick: handleMobileDrawerToggle, "aria-label": "Abrir men\u00FA" }) })), navBarLeftNode && (_jsx("div", { children: typeof navBarLeftNode === "string" ? (_jsx("span", { children: navBarLeftNode })) : (navBarLeftNode) }))] }), navBarRightNode && (_jsx("div", { className: navbarRightClasses, children: typeof navBarRightNode === "string" ? (_jsx("span", { children: navBarRightNode })) : (navBarRightNode) }))] }) })), _jsxs("main", { ref: contentRef, className: contentClasses, style: contentStyle, children: [_jsx("div", { className: "flex-1", children: children }), contentFooter && _jsx("div", { role: "contentinfo", children: contentFooter })] })] })] }) })), shouldShowMobileDrawer && hasLeftDrawerContent && isMobileDrawerOpen && (_jsx("div", { className: overlayClasses, onClick: handleOverlayClick })), shouldShowMobileDrawer && hasLeftDrawerContent && (_jsxs("aside", { className: `${mobileDrawerBaseClasses} ${isMobileDrawerOpen ? mobileDrawerOpenClasses : ""}`, style: mobileDrawerStyle, children: [_jsxs("div", { className: "flex-shrink-0 flex items-center justify-between", children: [leftDrawerHeader ? (_jsx("div", { className: "flex-1", children: leftDrawerHeader })) : (_jsx("div", { className: "flex-1" })), _jsx("div", { className: "absolute top-3 right-2", children: _jsx(Button, { variant: "ghost", icon: "fa-times", onClick: handleMobileDrawerToggle, "aria-label": "Cerrar men\u00FA" }) })] }), leftDrawerContent && (_jsx("div", { className: mobileDrawerContentClasses, children: leftDrawerContent })), leftDrawerFooter && (_jsx("div", { className: "flex-shrink-0", children: leftDrawerFooter }))] }))] }));
-};