flysoft-react-ui 0.5.0 → 0.5.3

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

@@ -0,0 +1,70 @@
+import React from "react";
+import { type InputProps } from "./Input";
+import type { PaginationInterface } from "./Pagination";
+export interface SearchSelectOption {
+    label: string;
+    value?: string;
+    description?: string | number;
+    icon?: string;
+}
+export interface SearchSelectInputProps<T = SearchSelectOption, K = string> extends Omit<InputProps, "onChange" | "value" | "ref"> {
+    value?: T | K | string;
+    /**
+     * Callback cuando cambia el valor del input.
+     * Recibe la opción completa (T) si no hay getOptionValue, o el valor extraído (K) si hay getOptionValue.
+     * También es compatible con react-hook-form: acepta el onChange estándar de HTML.
+     */
+    onChange?: ((value: T | K) => void) | React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Función que realiza la búsqueda y devuelve un Promise con los resultados
+     */
+    onSearchPromiseFn: (text: string) => Promise<Array<T> | PaginationInterface<T>>;
+    /**
+     * Función que busca un elemento individual usando su valor (K).
+     * Se usa cuando hay un valor por defecto que no está presente en las opciones cargadas.
+     * Recibe el valor (K) y devuelve una Promise con el objeto completo (T) o undefined si no se encuentra.
+     */
+    onSingleSearchPromiseFn: (value: K) => Promise<T | undefined>;
+    /**
+     * Callback al seleccionar una opción. Devuelve el item completo (T) y el valor mapeado (K)
+     */
+    onSelectOption?: (option: T, value: K) => void;
+    /**
+     * Título del dialog de selección. Por defecto "Seleccione una opción"
+     */
+    dialogTitle?: string;
+    /**
+     * Posición del botón de búsqueda. Por defecto "right"
+     */
+    icon?: string;
+    iconPosition?: "left" | "right";
+    /**
+     * Texto a mostrar cuando no hay resultados
+     */
+    noResultsText?: string;
+    /**
+     * Obtiene el label que se muestra para cada opción. Por defecto usa la propiedad "label".
+     */
+    getOptionLabel?: (item: T) => string;
+    /**
+     * Obtiene el valor que se devuelve al seleccionar una opción. Por defecto usa la propiedad "value".
+     */
+    getOptionValue?: (item: T) => K;
+    /**
+     * Obtiene la descripción opcional para cada opción. Por defecto usa la propiedad "description".
+     */
+    getOptionDescription?: (item: T) => string | number | undefined;
+    /**
+     * 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 abrir el diálogo de selección.
+     * Por defecto es false.
+     */
+    readOnly?: boolean;
+}
+export declare const SearchSelectInput: <T = SearchSelectOption, K = string>(props: SearchSelectInputProps<T, K> & {
+    ref?: React.ForwardedRef<HTMLInputElement>;
+}) => React.ReactElement;
+//# sourceMappingURL=SearchSelectInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchSelectInput.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/SearchSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAEf,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAKxD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AACD,MAAM,WAAW,sBAAsB,CAAC,CAAC,GAAG,kBAAkB,EAAE,CAAC,GAAG,MAAM,CACxE,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO,GAAG,KAAK,CAAC;IACtD,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EACL,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,GACxB,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC/C;;OAEG;IACH,iBAAiB,EAAE,CACjB,IAAI,EAAE,MAAM,KACT,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;IAChD;;;;OAIG;IACH,uBAAuB,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;IAC9D;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,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;AAwfD,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/SearchSelectInput.js

@@ -0,0 +1,336 @@
+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", children: _jsx("ul", { className: "space-y-1 max-h-96 overflow-y-auto", 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, dialogBody: getDialogBody(), dialogActions: _jsx(Button, { variant: "outline", onClick: () => setIsDialogOpen(false), children: "Cerrar" }), onClose: () => setIsDialogOpen(false) }))] }));
+});
+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.d.ts

@@ -1,13 +1,21 @@
 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 type { ButtonProps } from "./Button";
+export type { LinkButtonProps } from "./LinkButton";
 export type { InputProps } from "./Input";
 export type { AutocompleteInputProps, AutocompleteOption, } from "./AutocompleteInput";
+export type { SearchSelectInputProps, SearchSelectOption, } from "./SearchSelectInput-OLD";
 export type { DatePickerProps } from "./DatePicker";
 export type { DateInputProps, DateInputFormat } from "./DateInput";
-export type { PaginationProps, PaginationInterface, } from "./Pagination";
+export type { PaginationProps, PaginationInterface } from "./Pagination";
+export type { CheckboxProps } from "./Checkbox";
+export type { RadioButtonGroupProps, RadioOption } from "./RadioButtonGroup";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EACV,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnE,YAAY,EACV,eAAe,EACf,mBAAmB,GACpB,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EACV,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EACV,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACzE,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}

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

@@ -1,6 +1,10 @@
 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";

package/dist/components/layout/Accordion.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface AccordionProps {
+    title: string | React.ReactNode;
+    children: React.ReactNode;
+    icon?: string;
+    rightNode?: React.ReactNode;
+    defaultOpen?: boolean;
+    className?: string;
+    variant?: "default" | "elevated" | "outlined";
+    onToggle?: (isOpen: boolean) => void;
+}
+export declare const Accordion: React.FC<AccordionProps>;
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/components/layout/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAgI9C,CAAC"}

package/dist/components/layout/Accordion.js

@@ -0,0 +1,67 @@
+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 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.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
+import type { NavbarInterface, LeftDrawerInterface } from "../../contexts/AppLayoutContext";
 export interface AppLayoutProps {
-    navBarDrawer?: React.ReactNode;
-    leftDrawer?: React.ReactNode;
+    navbar?: NavbarInterface;
+    leftDrawer?: LeftDrawerInterface;
     children: React.ReactNode;
     className?: string;
 }

package/dist/components/layout/AppLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppLayout.d.ts","sourceRoot":"","sources":["../../../src/components/layout/AppLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAKhD,MAAM,WAAW,cAAc;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAyN9C,CAAC"}
+{"version":3,"file":"AppLayout.d.ts","sourceRoot":"","sources":["../../../src/components/layout/AppLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACpB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAmd9C,CAAC"}