flysoft-react-ui 1.2.4 → 1.2.6

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

@@ -1,220 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { useFormContext } from "react-hook-form";
-export const RadioButtonGroup = React.forwardRef(({ options, value, onChange, labelPosition = "right", size = "md", error, direction = "vertical", gap = "md", className = "", name, disabled, onBlur, readOnly = false, ...props }, ref) => {
-    // useFormContext debe llamarse incondicionalmente (regla de hooks)
-    // Si no hay FormProvider, esto lanzará un error
-    // Para modo controlado sin FormProvider, necesitamos envolver los ejemplos
-    // en un FormProvider mínimo o usar una detección diferente
-    // Por ahora, llamamos useFormContext incondicionalmente
-    const formContext = useFormContext();
-    const setValue = formContext?.setValue;
-    // Detectar si estamos en modo register
-    // Modo register: formContext existe (hay FormProvider) Y name está definido
-    // Modo controlado: no hay formContext (no hay FormProvider) o no hay name
-    // Nota: Si no hay FormProvider, useFormContext lanzará error, pero esto es esperado
-    // cuando se usa register. Para modo controlado, el componente puede funcionar
-    // si simplemente no usamos el contexto cuando no está disponible
-    const isRegisterMode = React.useMemo(() => {
-        // Si no hay formContext, definitivamente es modo controlado
-        if (!formContext)
-            return false;
-        // Si hay formContext pero no hay name, es modo controlado
-        if (!name)
-            return false;
-        // Si hay formContext y name, es modo register
-        return true;
-    }, [formContext, name]);
-    // Usar el valor proporcionado solo en modo controlado (no register)
-    // En modo register, react-hook-form maneja el valor automáticamente
-    const currentValue = !isRegisterMode ? value : undefined;
-    // Input hidden para compatibilidad con react-hook-form
-    const hiddenInputRef = React.useRef(null);
-    // Combinar el ref del forwardRef (de register) con el ref interno del input hidden
-    const combinedRef = React.useCallback((node) => {
-        hiddenInputRef.current = node;
-        if (typeof ref === "function") {
-            ref(node);
-        }
-        else if (ref) {
-            ref.current = node;
-        }
-    }, [ref]);
-    // Obtener el valor actual desde react-hook-form en modo register
-    const watchValue = formContext?.watch(name || "");
-    const actualValue = isRegisterMode
-        ? watchValue !== undefined
-            ? watchValue
-            : currentValue
-        : currentValue;
-    const gapClasses = {
-        sm: "gap-2",
-        md: "gap-3",
-        lg: "gap-4",
-    };
-    const directionClasses = {
-        vertical: "flex-col",
-        horizontal: "flex-row flex-wrap",
-    };
-    const containerClasses = `
-      flex ${directionClasses[direction]} ${gapClasses[gap]}
-      ${className}
-    `;
-    const sizeClasses = {
-        sm: "w-4 h-4",
-        md: "w-5 h-5",
-        lg: "w-6 h-6",
-    };
-    const labelSizeClasses = {
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
-    };
-    const handleOptionClick = (optionValue) => {
-        if (disabled || readOnly)
-            return;
-        const valueString = String(optionValue);
-        if (isRegisterMode && name) {
-            // En modo register, actualizar el input hidden y usar setValue
-            if (hiddenInputRef.current) {
-                const nativeInput = hiddenInputRef.current;
-                const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
-                if (nativeInputValueSetter) {
-                    nativeInputValueSetter.call(nativeInput, valueString);
-                }
-                else {
-                    nativeInput.value = valueString;
-                }
-                // Disparar evento change para react-hook-form
-                const changeEvent = {
-                    target: nativeInput,
-                    currentTarget: nativeInput,
-                };
-                if (onChange) {
-                    // En modo register, siempre usar formato de evento
-                    onChange(changeEvent);
-                }
-                // Disparar eventos nativos
-                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 usar setValue directamente como respaldo
-            if (setValue) {
-                setValue(name, optionValue, {
-                    shouldValidate: true,
-                    shouldDirty: true,
-                    shouldTouch: true,
-                });
-            }
-        }
-        else {
-            // Modo controlado - llamar onChange con valor directo
-            if (onChange) {
-                // Verificar si onChange es una función de valor directo o ChangeEventHandler
-                // Intentar primero como función de valor directo (modo controlado típico)
-                const onChangeAsValueFn = onChange;
-                // Si la función tiene la firma correcta, llamarla directamente
-                if (typeof onChangeAsValueFn === "function") {
-                    onChangeAsValueFn(optionValue);
-                }
-                else {
-                    // Si no, intentar como ChangeEventHandler (por compatibilidad)
-                    const syntheticEvent = {
-                        target: { value: String(optionValue) },
-                        currentTarget: { value: String(optionValue) },
-                    };
-                    onChange(syntheticEvent);
-                }
-            }
-        }
-    };
-    const handleBlur = (event) => {
-        if (onBlur) {
-            if (isRegisterMode && hiddenInputRef.current) {
-                // En modo register, crear un evento de blur para react-hook-form
-                const blurEvent = event ||
-                    {
-                        target: hiddenInputRef.current,
-                        currentTarget: hiddenInputRef.current,
-                    };
-                onBlur(blurEvent);
-            }
-            else {
-                // En modo controlado, llamar como función sin parámetros
-                onBlur();
-            }
-        }
-        // También disparar blur en el input hidden si existe
-        if (hiddenInputRef.current) {
-            hiddenInputRef.current.blur();
-        }
-    };
-    return (_jsxs("div", { className: "w-full", children: [_jsx("input", { ref: combinedRef, type: "hidden", name: name, value: actualValue !== undefined ? String(actualValue) : "", readOnly: true, tabIndex: -1, "aria-hidden": "true" }), _jsx("div", { className: containerClasses, role: "radiogroup", "aria-label": name, "aria-invalid": error ? "true" : "false", "aria-errormessage": error ? `${name}-error` : undefined, ...props, children: options.map((option, index) => {
-                    const optionValue = String(option.value);
-                    const isSelected = actualValue !== undefined && String(actualValue) === optionValue;
-                    // En modo readOnly, las opciones no seleccionadas se ven deshabilitadas
-                    const isDisabled = disabled || option.disabled || (readOnly && !isSelected);
-                    const radioId = `${name || "radio"}-${index}-${option.value}`;
-                    const radioClasses = `
-              ${sizeClasses[size]}
-              rounded-full border-2 transition-all duration-200
-              flex items-center justify-center
-              ${isSelected
-                        ? "border-[var(--color-primary)]"
-                        : "border-[var(--color-border-default)]"}
-              ${isSelected ? "bg-[var(--color-primary)]" : "bg-transparent"}
-              ${isDisabled
-                        ? "opacity-50 cursor-not-allowed"
-                        : "cursor-pointer hover:border-[var(--color-primary)]"}
-              focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-[var(--color-primary)]
-            `;
-                    const labelClasses = `
-              ${labelSizeClasses[size]}
-              font-[var(--font-default)] select-none
-              ${isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
-              text-[var(--color-text-primary)]
-            `;
-                    const optionContainerClasses = `
-              flex items-center
-              ${labelPosition === "left" ? "flex-row-reverse" : "flex-row"}
-              ${gapClasses[gap]}
-            `;
-                    return (_jsxs("div", { className: optionContainerClasses, onClick: () => !isDisabled && handleOptionClick(option.value), onBlur: index === options.length - 1
-                            ? () => {
-                                handleBlur();
-                            }
-                            : undefined, role: "radio", "aria-checked": isSelected, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, onKeyDown: (e) => {
-                            if (isDisabled || readOnly)
-                                return;
-                            if (e.key === "Enter" || e.key === " ") {
-                                e.preventDefault();
-                                handleOptionClick(option.value);
-                            }
-                        }, children: [_jsx("div", { className: radioClasses, children: isSelected && (_jsx("div", { className: "rounded-full bg-white", style: {
-                                        width: size === "sm"
-                                            ? "8px"
-                                            : size === "md"
-                                                ? "10px"
-                                                : "12px",
-                                        height: size === "sm"
-                                            ? "8px"
-                                            : size === "md"
-                                                ? "10px"
-                                                : "12px",
-                                    } })) }), option.label && (_jsx("label", { htmlFor: radioId, className: labelClasses, onClick: (e) => {
-                                    e.preventDefault();
-                                    if (!isDisabled) {
-                                        handleOptionClick(option.value);
-                                    }
-                                }, children: option.label }))] }, radioId));
-                }) }), error && (_jsx("p", { id: name ? `${name}-error` : undefined, className: "mt-1 text-sm text-[var(--color-danger)] font-[var(--font-default)]", children: error }))] }));
-});
-RadioButtonGroup.displayName = "RadioButtonGroup";

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";
-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 }) })] }));
-};