flysoft-react-ui 0.5.0 → 0.5.3

package/dist/contexts/AppLayoutContext.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { createContext, useContext, useState, useCallback, } from "react";
+import { ThemeProvider, useTheme } from "./ThemeContext";
+import { AppLayout } from "../components/layout/AppLayout";
+import { SnackbarProvider } from "./SnackbarContext";
+import { SnackbarContainer } from "../components/utils/SnackbarContainer";
+const AppLayoutContext = createContext(undefined);
+// Internal component that uses ThemeContext and provides AppLayoutContext
+const AppLayoutProviderInner = ({ children, initialNavbar, initialLeftDrawer, initialClassName }) => {
+    // Get theme context
+    const themeContext = useTheme();
+    // Layout state - ensure default height is set
+    const [navbar, setNavbar] = useState(() => {
+        const defaultNavbar = { fullWidthNavbar: true, height: "64px" };
+        if (initialNavbar) {
+            return { ...defaultNavbar, ...initialNavbar };
+        }
+        return defaultNavbar;
+    });
+    const [leftDrawer, setLeftDrawer] = useState(initialLeftDrawer || {});
+    const [className, setClassName] = useState(initialClassName || "");
+    // Memoize setters to avoid unnecessary re-renders
+    const handleSetNavbar = useCallback((newNavbar) => {
+        setNavbar(newNavbar);
+    }, []);
+    const handleSetLeftDrawer = useCallback((newLeftDrawer) => {
+        setLeftDrawer(newLeftDrawer);
+    }, []);
+    const handleSetClassName = useCallback((newClassName) => {
+        setClassName(newClassName);
+    }, []);
+    // Setters para actualizar solo los nodos del navbar
+    const handleSetNavBarLeftNode = useCallback((node) => {
+        setNavbar((prev) => {
+            if (!prev) {
+                // Si no hay navbar previo, crear uno nuevo con valores por defecto
+                return {
+                    fullWidthNavbar: true,
+                    height: "64px",
+                    navBarLeftNode: node,
+                };
+            }
+            return {
+                ...prev,
+                navBarLeftNode: node,
+            };
+        });
+    }, []);
+    const handleSetNavbarRightNode = useCallback((node) => {
+        setNavbar((prev) => {
+            if (!prev) {
+                // Si no hay navbar previo, crear uno nuevo con valores por defecto
+                return {
+                    fullWidthNavbar: true,
+                    height: "64px",
+                    navBarRightNode: node,
+                };
+            }
+            return {
+                ...prev,
+                navBarRightNode: node,
+            };
+        });
+    }, []);
+    const value = {
+        // Theme context values
+        ...themeContext,
+        // Layout state
+        navbar,
+        leftDrawer,
+        className,
+        // Layout setters
+        setNavbar: handleSetNavbar,
+        setLeftDrawer: handleSetLeftDrawer,
+        setClassName: handleSetClassName,
+        setNavBarLeftNode: handleSetNavBarLeftNode,
+        setNavbarRightNode: handleSetNavbarRightNode,
+    };
+    return (_jsx(AppLayoutContext.Provider, { value: value, children: _jsx(AppLayout, { navbar: navbar, leftDrawer: leftDrawer, className: className, children: children }) }));
+};
+export const AppLayoutProvider = ({ children, initialTheme = "light", storageKey = "flysoft-theme", forceInitialTheme = false, initialNavbar, initialLeftDrawer, className = "", }) => {
+    return (_jsx(ThemeProvider, { initialTheme: initialTheme, storageKey: storageKey, forceInitialTheme: forceInitialTheme, children: _jsxs(SnackbarProvider, { children: [_jsx(AppLayoutProviderInner, { initialNavbar: initialNavbar, initialLeftDrawer: initialLeftDrawer, initialClassName: className, children: children }), _jsx(SnackbarContainer, { position: "bottom-right" })] }) }));
+};
+// Hook to use AppLayout context
+// eslint-disable-next-line react-refresh/only-export-components
+export const useAppLayout = () => {
+    const context = useContext(AppLayoutContext);
+    if (context === undefined) {
+        throw new Error("useAppLayout must be used within an AppLayoutProvider");
+    }
+    return context;
+};
+// Hook to check if AppLayout context is available
+// eslint-disable-next-line react-refresh/only-export-components
+export const useAppLayoutContext = () => {
+    const context = useContext(AppLayoutContext);
+    return context !== undefined;
+};

package/dist/contexts/ListCrudContext.d.ts

@@ -0,0 +1,50 @@
+import { type ReactNode } from "react";
+import { type PaginationInterface } from "../components/form-controls/Pagination";
+export interface ListCrudContextType<T> {
+    list: Array<T> | undefined;
+    page: number;
+    pages: number;
+    total: number;
+    limit: number;
+    isLoading: boolean;
+    pagination: ReactNode;
+    params: Record<string, any>;
+    fetchItems: {
+        execute: (params?: Record<string, any>) => Promise<void>;
+        isLoading: boolean;
+    };
+    createItem: {
+        execute: (item: T) => Promise<T | undefined | null>;
+        isLoading: boolean;
+    };
+    updateItem: {
+        execute: (item: T) => Promise<T | undefined | null>;
+        isLoading: boolean;
+    };
+    deleteItem: {
+        execute: (item: T) => Promise<void>;
+        isLoading: boolean;
+    };
+}
+export declare const ListCrudContext: import("react").Context<ListCrudContextType<any> | undefined>;
+export interface PromiseWithOptions<TResult, TParams extends any[] = []> {
+    execute: (...params: TParams) => Promise<TResult>;
+    successMessage?: string;
+    errorMessage?: string;
+}
+interface ListCrudProviderProps<T> {
+    children: ReactNode;
+    getPromise: ((params?: Record<string, any>) => Promise<Array<T> | PaginationInterface<T> | undefined>) | PromiseWithOptions<Array<T> | PaginationInterface<T> | undefined, [
+        params?: Record<string, any>
+    ]>;
+    postPromise?: ((item: T) => Promise<T | undefined | null>) | PromiseWithOptions<T | undefined | null, [item: T]>;
+    putPromise?: ((item: T) => Promise<T | undefined | null>) | PromiseWithOptions<T | undefined | null, [item: T]>;
+    deletePromise?: ((item: T) => Promise<void>) | PromiseWithOptions<void, [item: T]>;
+    urlParams?: Array<string>;
+    limit?: number;
+    pageParam?: string;
+}
+export declare function ListCrudProvider<T>({ children, getPromise, postPromise, putPromise, deletePromise, limit, pageParam, urlParams, }: ListCrudProviderProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function useListCrud<T>(): ListCrudContextType<T>;
+export {};
+//# sourceMappingURL=ListCrudContext.d.ts.map

package/dist/contexts/ListCrudContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListCrudContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ListCrudContext.tsx"],"names":[],"mappings":"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"}

package/dist/contexts/ListCrudContext.js

@@ -0,0 +1,253 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useRef, useState, useCallback, } from "react";
+import { useSearchParams } from "react-router-dom";
+import { Pagination, } from "../components/form-controls/Pagination";
+import { useAsyncRequest } from "../hooks/useAsyncRequest";
+const createListCrudContext = () => {
+    return createContext(undefined);
+};
+// Crear el contexto con un tipo genérico por defecto
+// Los usuarios pueden crear su propio contexto con su tipo específico
+export const ListCrudContext = createListCrudContext();
+export function ListCrudProvider({ children, getPromise, postPromise, putPromise, deletePromise, limit = 15, pageParam = "pagina", urlParams = [], }) {
+    const [list, setList] = useState(undefined);
+    const [page, setPage] = useState(1);
+    const [pages, setPages] = useState(1);
+    const [total, setTotal] = useState(0);
+    const [searchParams, setSearchParams] = useSearchParams();
+    const lastFetchParamsRef = useRef("");
+    // Extraer funciones execute y opciones de las promises
+    const getPromiseExecute = typeof getPromise === "function" ? getPromise : getPromise.execute;
+    const getPromiseSuccessMessage = typeof getPromise === "function" ? undefined : getPromise.successMessage;
+    const getPromiseErrorMessage = typeof getPromise === "function" ? undefined : getPromise.errorMessage;
+    const postPromiseExecute = postPromise
+        ? typeof postPromise === "function"
+            ? postPromise
+            : postPromise.execute
+        : undefined;
+    const postPromiseSuccessMessage = postPromise && typeof postPromise === "object"
+        ? postPromise.successMessage
+        : undefined;
+    const postPromiseErrorMessage = postPromise && typeof postPromise === "object"
+        ? postPromise.errorMessage
+        : undefined;
+    const putPromiseExecute = putPromise
+        ? typeof putPromise === "function"
+            ? putPromise
+            : putPromise.execute
+        : undefined;
+    const putPromiseSuccessMessage = putPromise && typeof putPromise === "object"
+        ? putPromise.successMessage
+        : undefined;
+    const putPromiseErrorMessage = putPromise && typeof putPromise === "object"
+        ? putPromise.errorMessage
+        : undefined;
+    const deletePromiseExecute = deletePromise
+        ? typeof deletePromise === "function"
+            ? deletePromise
+            : deletePromise.execute
+        : undefined;
+    const deletePromiseSuccessMessage = deletePromise && typeof deletePromise === "object"
+        ? deletePromise.successMessage
+        : undefined;
+    const deletePromiseErrorMessage = deletePromise && typeof deletePromise === "object"
+        ? deletePromise.errorMessage
+        : undefined;
+    const getPromiseRef = useRef(getPromiseExecute);
+    // Hooks para manejar las peticiones asíncronas con mensajes opcionales
+    const fetchDataAsync = useAsyncRequest({
+        successMessage: getPromiseSuccessMessage,
+        errorMessage: getPromiseErrorMessage,
+    });
+    const createItemAsync = useAsyncRequest({
+        successMessage: postPromiseSuccessMessage,
+        errorMessage: postPromiseErrorMessage,
+    });
+    const updateItemAsync = useAsyncRequest({
+        successMessage: putPromiseSuccessMessage,
+        errorMessage: putPromiseErrorMessage,
+    });
+    const deleteItemAsync = useAsyncRequest({
+        successMessage: deletePromiseSuccessMessage,
+        errorMessage: deletePromiseErrorMessage,
+    });
+    // El isLoading del contexto usa el hook de fetchData
+    const isLoading = fetchDataAsync.isLoading;
+    // Actualizar la referencia cuando cambie getPromise
+    useEffect(() => {
+        getPromiseRef.current = getPromiseExecute;
+    }, [getPromiseExecute]);
+    // Función para obtener los parámetros de la URL
+    const getUrlParams = useCallback(() => {
+        const params = { limit };
+        // Agregar pageParam si existe en la URL
+        const pageValue = searchParams.get(pageParam);
+        if (pageValue) {
+            const parsedPage = parseInt(pageValue, 10);
+            if (!isNaN(parsedPage)) {
+                params[pageParam] = parsedPage;
+            }
+        }
+        // Agregar urlParams si existen en la URL
+        urlParams.forEach((paramName) => {
+            const paramValue = searchParams.get(paramName);
+            if (paramValue !== null) {
+                params[paramName] = paramValue;
+            }
+        });
+        return params;
+    }, [searchParams, pageParam, urlParams, limit]);
+    // Función para obtener los datos
+    const fetchData = useCallback(async (params) => {
+        // Obtener los parámetros que se van a usar
+        const requestParams = params || getUrlParams();
+        // Crear una clave única para estos parámetros
+        const paramsKey = JSON.stringify(requestParams);
+        lastFetchParamsRef.current = paramsKey;
+        const result = await fetchDataAsync.execute(async () => {
+            return await getPromiseRef.current(requestParams);
+        });
+        // Solo procesar el resultado si no es undefined (undefined significa error)
+        if (result !== undefined) {
+            if (result && typeof result === "object" && "list" in result) {
+                // Es un PaginationInterface
+                const { list, page, pages, total } = result;
+                setList(list);
+                setPage(page);
+                setPages(pages);
+                setTotal(total);
+            }
+            else if (Array.isArray(result)) {
+                // Es un array simple
+                setList(result);
+                setPage(1);
+                setTotal(result.length);
+                setPages(Math.ceil(result.length / limit));
+            }
+            else {
+                // Resultado null
+                setList(undefined);
+                setPage(1);
+                setPages(1);
+                setTotal(0);
+            }
+        }
+    }, [getUrlParams, limit, fetchDataAsync]);
+    // Ref para almacenar los valores anteriores de urlParams
+    const prevUrlParamsValuesRef = useRef({});
+    // Memoizar los valores actuales de los urlParams
+    const urlParamsValues = useMemo(() => {
+        const values = {};
+        urlParams.forEach((paramName) => {
+            values[paramName] = searchParams.get(paramName);
+        });
+        return values;
+    }, [searchParams, urlParams]);
+    // Memoizar los parámetros de URL para evitar re-renders innecesarios
+    const urlParamsKey = useMemo(() => urlParams.join(","), [urlParams]);
+    // Memoizar los parámetros actuales para exponerlos
+    const currentParams = useMemo(() => getUrlParams(), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [searchParams, pageParam, urlParamsKey, limit, urlParams]);
+    // Función para recargar los datos
+    const fetchItemsExecute = useCallback(async (params) => {
+        await fetchData(params);
+    }, [fetchData]);
+    // Función para crear un item
+    const createItemExecute = useCallback(async (item) => {
+        if (!postPromiseExecute) {
+            throw new Error("postPromise is not defined. Please provide postPromise to ListCrudProvider.");
+        }
+        return await createItemAsync.execute(async () => {
+            return await postPromiseExecute(item);
+        });
+    }, [postPromiseExecute, createItemAsync]);
+    // Función para actualizar un item
+    const updateItemExecute = useCallback(async (item) => {
+        if (!putPromiseExecute) {
+            throw new Error("putPromise is not defined. Please provide putPromise to ListCrudProvider.");
+        }
+        return await updateItemAsync.execute(async () => {
+            return await putPromiseExecute(item);
+        });
+    }, [putPromiseExecute, updateItemAsync]);
+    // Función para eliminar un item
+    const deleteItemExecute = useCallback(async (item) => {
+        if (!deletePromiseExecute) {
+            throw new Error("deletePromise is not defined. Please provide deletePromise to ListCrudProvider.");
+        }
+        await deleteItemAsync.execute(async () => {
+            await deletePromiseExecute(item);
+        });
+    }, [deletePromiseExecute, deleteItemAsync]);
+    // useEffect para resetear pageParam a 1 cuando cambien los urlParams
+    useEffect(() => {
+        // Verificar si hay algún urlParam definido
+        if (urlParams.length === 0) {
+            prevUrlParamsValuesRef.current = {};
+            return;
+        }
+        // Comparar valores actuales con los anteriores
+        const prevValues = prevUrlParamsValuesRef.current;
+        const hasChanged = urlParams.some((paramName) => prevValues[paramName] !== urlParamsValues[paramName]);
+        // Si los urlParams cambiaron, resetear pageParam a 1
+        if (hasChanged) {
+            const currentPage = searchParams.get(pageParam);
+            if (currentPage && currentPage !== "1") {
+                const newSearchParams = new URLSearchParams(searchParams);
+                newSearchParams.set(pageParam, "1");
+                setSearchParams(newSearchParams, { replace: true });
+                // No hacer fetchData aquí, se hará cuando cambien los searchParams
+                return;
+            }
+        }
+        // Actualizar los valores anteriores
+        prevUrlParamsValuesRef.current = { ...urlParamsValues };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [JSON.stringify(urlParamsValues), pageParam, urlParamsKey]);
+    // useEffect consolidado para escuchar cambios que requieren recargar datos
+    useEffect(() => {
+        // Usar un pequeño delay para agrupar múltiples cambios rápidos en el mismo tick
+        const timeoutId = setTimeout(() => {
+            fetchData();
+        }, 0);
+        return () => clearTimeout(timeoutId);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [getPromiseExecute, searchParams, pageParam, urlParamsKey]);
+    const value = {
+        list,
+        page,
+        pages,
+        total,
+        limit,
+        isLoading,
+        params: currentParams,
+        fetchItems: {
+            execute: fetchItemsExecute,
+            isLoading: fetchDataAsync.isLoading,
+        },
+        createItem: {
+            execute: createItemExecute,
+            isLoading: createItemAsync.isLoading,
+        },
+        updateItem: {
+            execute: updateItemExecute,
+            isLoading: updateItemAsync.isLoading,
+        },
+        deleteItem: {
+            execute: deleteItemExecute,
+            isLoading: deleteItemAsync.isLoading,
+        },
+        pagination: (_jsx(Pagination, { page: page, pages: pages, total: total, fieldName: pageParam, isLoading: isLoading })),
+    };
+    return (_jsx(ListCrudContext.Provider, { value: value, children: children }));
+}
+// Hook to use ListCrud context
+// eslint-disable-next-line react-refresh/only-export-components
+export function useListCrud() {
+    const context = useContext(ListCrudContext);
+    if (context === undefined) {
+        throw new Error("useListCrud must be used within a ListCrudProvider");
+    }
+    return context;
+}

package/dist/contexts/SnackbarContext.d.ts

@@ -0,0 +1,26 @@
+import React, { type ReactNode } from "react";
+export type SnackbarVariant = "primary" | "secondary" | "success" | "warning" | "danger" | "info";
+export interface SnackbarMessage {
+    id: string;
+    message: string;
+    variant: SnackbarVariant;
+    duration?: number;
+    icon?: string;
+    iconLabel?: string;
+}
+export interface SnackbarContextType {
+    showSnackbar: (message: string, variant?: SnackbarVariant, options?: {
+        duration?: number;
+        icon?: string;
+        iconLabel?: string;
+    }) => void;
+    removeSnackbar: (id: string) => void;
+    snackbars: SnackbarMessage[];
+}
+interface SnackbarProviderProps {
+    children: ReactNode;
+}
+export declare const SnackbarProvider: React.FC<SnackbarProviderProps>;
+export declare const useSnackbar: () => SnackbarContextType;
+export {};
+//# sourceMappingURL=SnackbarContext.d.ts.map

package/dist/contexts/SnackbarContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarContext.d.ts","sourceRoot":"","sources":["../../src/contexts/SnackbarContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAElG,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,eAAe,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,EAAE,OAAO,CAAC,EAAE;QACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,KAAK,IAAI,CAAC;IACX,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,EAAE,eAAe,EAAE,CAAC;CAC9B;AAID,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA0C5D,CAAC;AAEF,eAAO,MAAM,WAAW,QAAO,mBAM9B,CAAC"}

package/dist/contexts/SnackbarContext.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useState, useCallback, } from "react";
+const SnackbarContext = createContext(undefined);
+export const SnackbarProvider = ({ children, }) => {
+    const [snackbars, setSnackbars] = useState([]);
+    const showSnackbar = useCallback((message, variant = "info", options) => {
+        const id = `snackbar-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+        const newSnackbar = {
+            id,
+            message,
+            variant,
+            duration: options?.duration ?? 3000,
+            icon: options?.icon,
+            iconLabel: options?.iconLabel,
+        };
+        setSnackbars((prev) => [...prev, newSnackbar]);
+    }, []);
+    const removeSnackbar = useCallback((id) => {
+        setSnackbars((prev) => prev.filter((snackbar) => snackbar.id !== id));
+    }, []);
+    const value = {
+        showSnackbar,
+        removeSnackbar,
+        snackbars,
+    };
+    return (_jsx(SnackbarContext.Provider, { value: value, children: children }));
+};
+export const useSnackbar = () => {
+    const context = useContext(SnackbarContext);
+    if (context === undefined) {
+        throw new Error("useSnackbar must be used within a SnackbarProvider");
+    }
+    return context;
+};

package/dist/contexts/index.d.ts

@@ -4,4 +4,10 @@ export type { Theme, ThemeContextType, ThemeOverride } from "./types";
 export { lightTheme, darkTheme, blueTheme, greenTheme, defaultTheme, themes, } from "./presets";
 export { AuthProvider, AuthContext } from "./AuthContext";
 export type { AuthContextType, AuthContextUserInterface, AuthTokenInterface, } from "./AuthContext";
+export { ListCrudProvider, ListCrudContext, useListCrud } from "./ListCrudContext";
+export type { ListCrudContextType } from "./ListCrudContext";
+export { AppLayoutProvider, useAppLayout, useAppLayoutContext } from "./AppLayoutContext";
+export type { AppLayoutContextType, NavbarInterface, LeftDrawerInterface, } from "./AppLayoutContext";
+export { SnackbarProvider, useSnackbar } from "./SnackbarContext";
+export type { SnackbarContextType, SnackbarMessage, SnackbarVariant, } from "./SnackbarContext";
 //# sourceMappingURL=index.d.ts.map

package/dist/contexts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EACL,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AAGnC,YAAY,EAAE,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGtE,OAAO,EACL,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,YAAY,EACZ,MAAM,GACP,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC1D,YAAY,EACV,eAAe,EACf,wBAAwB,EACxB,kBAAkB,GACnB,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EACL,gBAAgB,EAChB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AAGnC,YAAY,EAAE,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGtE,OAAO,EACL,UAAU,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,YAAY,EACZ,MAAM,GACP,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC1D,YAAY,EACV,eAAe,EACf,wBAAwB,EACxB,kBAAkB,GACnB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACnF,YAAY,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAG7D,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC1F,YAAY,EACV,oBAAoB,EACpB,eAAe,EACf,mBAAmB,GACpB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAClE,YAAY,EACV,mBAAmB,EACnB,eAAe,EACf,eAAe,GAChB,MAAM,mBAAmB,CAAC"}

package/dist/contexts/index.js

@@ -5,3 +5,9 @@ export { useThemeOverride, useTemporaryOverride, } from "../hooks/useThemeOverri
 export { lightTheme, darkTheme, blueTheme, greenTheme, defaultTheme, themes, } from "./presets";
 // Auth system exports
 export { AuthProvider, AuthContext } from "./AuthContext";
+// ListCrud system exports
+export { ListCrudProvider, ListCrudContext, useListCrud } from "./ListCrudContext";
+// AppLayout system exports
+export { AppLayoutProvider, useAppLayout, useAppLayoutContext } from "./AppLayoutContext";
+// Snackbar system exports
+export { SnackbarProvider, useSnackbar } from "./SnackbarContext";

package/dist/contexts/presets.js

@@ -191,9 +191,9 @@ export const blueTheme = {
         textDisabled: "#94a3b8",
     },
     shadows: {
-        sm: "0 1px 2px 0 rgb(30 64 175 / 0.05)",
-        md: "0 4px 6px -1px rgb(30 64 175 / 0.1), 0 2px 4px -2px rgb(30 64 175 / 0.1)",
-        lg: "0 10px 15px -3px rgb(30 64 175 / 0.1), 0 4px 6px -4px rgb(30 64 175 / 0.1)",
+        sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+        lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
     },
     radius: {
         sm: "0.375rem",
@@ -263,9 +263,9 @@ export const greenTheme = {
         textDisabled: "#9ca3af",
     },
     shadows: {
-        sm: "0 1px 2px 0 rgb(5 150 105 / 0.05)",
-        md: "0 4px 6px -1px rgb(5 150 105 / 0.1), 0 2px 4px -2px rgb(5 150 105 / 0.1)",
-        lg: "0 10px 15px -3px rgb(5 150 105 / 0.1), 0 4px 6px -4px rgb(5 150 105 / 0.1)",
+        sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+        lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
     },
     radius: {
         sm: "0.375rem",

package/dist/docs/AccordionDocs.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const AccordionDocs: React.FC;
+export default AccordionDocs;
+//# sourceMappingURL=AccordionDocs.d.ts.map

package/dist/docs/AccordionDocs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionDocs.d.ts","sourceRoot":"","sources":["../../src/docs/AccordionDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAwuB1B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/docs/AccordionDocs.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Accordion, Card, Badge, Input } from "../index";
+const AccordionDocs = () => {
+    const [openAccordions, setOpenAccordions] = useState(new Set());
+    const handleToggle = (id, isOpen) => {
+        const newSet = new Set(openAccordions);
+        if (isOpen) {
+            newSet.add(id);
+        }
+        else {
+            newSet.delete(id);
+        }
+        setOpenAccordions(newSet);
+    };
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Accordion - Variantes y Ejemplos", children: _jsxs("div", { className: "space-y-10", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Variantes" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente Accordion soporta tres variantes visuales: default, elevated (con sombra) y outlined (con borde destacado)." }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { variant: "default", title: "Default", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con variante por defecto." }) }), _jsx(Accordion, { variant: "elevated", title: "Elevated", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con sombra elevada." }) }), _jsx(Accordion, { variant: "outlined", title: "Outlined", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con borde destacado." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso b\u00E1sico" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente Accordion permite mostrar contenido colapsable con una animaci\u00F3n suave de expandir/contraer. Haz clic en el header para abrir o cerrar el contenido." }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: "Informaci\u00F3n General", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este es un accordion b\u00E1sico sin icono ni elementos adicionales. El contenido se muestra cuando el accordion est\u00E1 abierto y se oculta con una animaci\u00F3n suave cuando est\u00E1 cerrado." }) }), _jsx(Accordion, { title: "Detalles del Producto", defaultOpen: true, children: _jsxs("div", { className: "space-y-2", children: [_jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Este accordion est\u00E1 abierto por defecto usando la propiedad", " ", _jsx("code", { className: "px-1 py-0.5 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded text-xs", children: "defaultOpen" }), "."] }), _jsxs("ul", { className: "list-disc list-inside space-y-1 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsx("li", { children: "Caracter\u00EDstica 1: Descripci\u00F3n detallada" }), _jsx("li", { children: "Caracter\u00EDstica 2: M\u00E1s informaci\u00F3n" }), _jsx("li", { children: "Caracter\u00EDstica 3: Detalles adicionales" })] })] }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con icono" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes agregar un icono FontAwesome 5 del lado izquierdo del t\u00EDtulo usando la propiedad ", _jsx("code", { children: "icon" }), "."] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: "Configuraci\u00F3n", icon: "fa-cog", children: _jsxs("div", { className: "space-y-2", children: [_jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este accordion tiene un icono de configuraci\u00F3n en el lado izquierdo." }), _jsx(Input, { label: "Nombre", placeholder: "Ingresa un nombre" }), _jsx(Input, { label: "Email", type: "email", placeholder: "correo@ejemplo.com" })] }) }), _jsx(Accordion, { title: "Informaci\u00F3n de Usuario", icon: "fa-user", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con icono de usuario. Los iconos ayudan a identificar visualmente el tipo de contenido." }) }), _jsx(Accordion, { title: "Notificaciones", icon: "fa-bell", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con icono de notificaciones. Puedes usar cualquier icono de FontAwesome 5." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con rightNode" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["La propiedad ", _jsx("code", { children: "rightNode" }), " permite agregar contenido personalizado del lado derecho, antes del chevron. \u00DAtil para badges, botones peque\u00F1os, contadores, etc."] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: "Mensajes", icon: "fa-envelope", rightNode: _jsx(Badge, { variant: "info", children: "3" }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este accordion muestra un badge con el n\u00FAmero de mensajes no le\u00EDdos en el lado derecho." }) }), _jsx(Accordion, { title: "Tareas Pendientes", icon: "fa-tasks", rightNode: _jsx(Badge, { variant: "warning", children: "5" }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con badge de tareas pendientes. El rightNode puede contener cualquier ReactNode." }) }), _jsx(Accordion, { title: "Configuraci\u00F3n Avanzada", icon: "fa-sliders-h", rightNode: _jsxs("div", { className: "flex items-center gap-2 px-2 py-1 text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] cursor-pointer rounded transition-colors", onClick: (e) => {
+                                                e.stopPropagation();
+                                                console.log("Editar configuración");
+                                            }, children: [_jsx("i", { className: "fal fa-edit" }), _jsx("span", { children: "Editar" })] }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este accordion incluye un elemento de acci\u00F3n en el rightNode, permitiendo acciones r\u00E1pidas sin abrir el accordion. Nota: No uses componentes Button dentro de rightNode ya que causar\u00EDa un error de anidaci\u00F3n de botones." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con callback onToggle" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["La propiedad ", _jsx("code", { children: "onToggle" }), " permite ejecutar una funci\u00F3n cuando el accordion se abre o cierra. \u00DAtil para sincronizar estado externo o realizar acciones al cambiar el estado."] }), _jsxs("div", { className: "space-y-3", children: [openAccordions.size > 0 && (_jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm", children: [_jsx("span", { className: "font-semibold", children: "Accordions abiertos:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: Array.from(openAccordions).join(", ") || "Ninguno" })] }) })), _jsx(Accordion, { title: "Secci\u00F3n 1", icon: "fa-folder", onToggle: (isOpen) => handleToggle("seccion1", isOpen), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este accordion notifica cuando se abre o cierra mediante el callback onToggle." }) }), _jsx(Accordion, { title: "Secci\u00F3n 2", icon: "fa-folder", onToggle: (isOpen) => handleToggle("seccion2", isOpen), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Otro accordion que tambi\u00E9n notifica su estado mediante onToggle." }) }), _jsx(Accordion, { title: "Secci\u00F3n 3", icon: "fa-folder", onToggle: (isOpen) => handleToggle("seccion3", isOpen), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Un tercer accordion para demostrar el seguimiento de m\u00FAltiples accordions." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplo completo con m\u00FAltiples accordions" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo pr\u00E1ctico usando m\u00FAltiples accordions para organizar informaci\u00F3n en secciones colapsables." }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: "Informaci\u00F3n Personal", icon: "fa-user-circle", rightNode: _jsx(Badge, { variant: "success", children: "Completo" }), children: _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Nombre", placeholder: "Juan", icon: "fa-user" }), _jsx(Input, { label: "Apellido", placeholder: "P\u00E9rez", icon: "fa-user" }), _jsx(Input, { label: "Fecha de Nacimiento", type: "date", icon: "fa-calendar" })] }) }), _jsx(Accordion, { title: "Informaci\u00F3n de Contacto", icon: "fa-address-book", rightNode: _jsx(Badge, { variant: "warning", children: "Pendiente" }), children: _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Email", type: "email", placeholder: "juan@ejemplo.com", icon: "fa-envelope" }), _jsx(Input, { label: "Tel\u00E9fono", type: "tel", placeholder: "+34 600 000 000", icon: "fa-phone" })] }) }), _jsx(Accordion, { title: "Configuraci\u00F3n de Seguridad", icon: "fa-shield-alt", rightNode: _jsx(Badge, { variant: "info", children: "Recomendado" }), children: _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { label: "Contrase\u00F1a Actual", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", icon: "fa-lock" }), _jsx(Input, { label: "Nueva Contrase\u00F1a", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", icon: "fa-key" })] }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Background Personalizado" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente detecta autom\u00E1ticamente las clases de background (bg-*) desde la prop className y las aplica al background del accordion. Las dem\u00E1s clases se aplican normalmente al contenedor." }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: "Accordion con bg-blue-50", className: "bg-blue-50", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con background personalizado usando clases de Tailwind." }) }), _jsx(Accordion, { title: "Accordion con bg-gradient", className: "bg-gradient-to-br from-purple-100 to-pink-100", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Accordion con gradiente personalizado." }) }), _jsx(Accordion, { title: "Accordion con bg y otras clases", className: "bg-green-50", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Puedes combinar clases de background con otras clases de Tailwind." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Title como ReactNode" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El t\u00EDtulo puede ser un ReactNode, permitiendo incluir contenido personalizado como badges, iconos adicionales, o cualquier otro componente." }), _jsxs("div", { className: "space-y-3", children: [_jsx(Accordion, { title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: "Proyecto Importante" }), _jsx(Badge, { variant: "danger", size: "sm", children: "Urgente" })] }), icon: "fa-project-diagram", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este accordion tiene un t\u00EDtulo personalizado con un badge integrado." }) }), _jsx(Accordion, { title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-star text-yellow-500" }), _jsx("span", { children: "Favoritos" })] }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "T\u00EDtulo personalizado con un icono de estrella integrado." }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Caracter\u00EDsticas" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("ul", { className: "list-disc list-inside space-y-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsxs("li", { children: [_jsx("strong", { children: "Animaci\u00F3n suave:" }), " El contenido se expande y contrae con una animaci\u00F3n CSS de 300ms."] }), _jsxs("li", { children: [_jsx("strong", { children: "Icono opcional:" }), " Soporta iconos FontAwesome 5 del lado izquierdo del t\u00EDtulo."] }), _jsxs("li", { children: [_jsx("strong", { children: "RightNode:" }), " Permite agregar contenido personalizado (badges, botones, etc.) del lado derecho antes del chevron."] }), _jsxs("li", { children: [_jsx("strong", { children: "Estado controlado:" }), " Soporta estado controlado mediante ", _jsx("code", { children: "defaultOpen" }), " y", " ", _jsx("code", { children: "onToggle" }), "."] }), _jsxs("li", { children: [_jsx("strong", { children: "Title flexible:" }), " El t\u00EDtulo puede ser un string o un ReactNode, permitiendo contenido personalizado."] }), _jsxs("li", { children: [_jsx("strong", { children: "Accesibilidad:" }), " Incluye atributos ARIA para mejor accesibilidad."] }), _jsxs("li", { children: [_jsx("strong", { children: "Chevron din\u00E1mico:" }), " El chevron cambia autom\u00E1ticamente entre arriba (abierto) y abajo (cerrado)."] }), _jsxs("li", { children: [_jsx("strong", { children: "Variantes:" }), " Soporta tres variantes: default, elevated (con sombra) y outlined (con borde destacado)."] }), _jsxs("li", { children: [_jsx("strong", { children: "Background personalizado:" }), " El componente detecta autom\u00E1ticamente las clases de background (bg-*) y las aplica correctamente."] })] }) }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Props" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Prop" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Tipo" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Requerido" }), _jsx("th", { className: "px-4 py-2 text-left text-sm font-semibold", style: { color: "var(--flysoft-text-primary)" }, children: "Descripci\u00F3n" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "title" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string | ReactNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "S\u00ED" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "T\u00EDtulo del accordion. Puede ser un string o un ReactNode." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "children" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "ReactNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "S\u00ED" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido que se muestra cuando el accordion est\u00E1 abierto." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "icon" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Clase de icono FontAwesome 5 (ej: \"fa-user\", \"fa-cog\") que se muestra del lado izquierdo del t\u00EDtulo." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "rightNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "ReactNode" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Contenido personalizado que se muestra del lado derecho, antes del chevron. \u00DAtil para badges, botones, contadores, etc." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "defaultOpen" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "boolean" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Si es true, el accordion estar\u00E1 abierto por defecto. Por defecto es false." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "onToggle" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "(isOpen: boolean) => void" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Callback que se ejecuta cuando el accordion se abre o cierra. Recibe un boolean indicando si est\u00E1 abierto (true) o cerrado (false)." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "variant" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "\"default\" | \"elevated\" | \"outlined\"" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Variante visual del accordion. Por defecto es \"default\"." })] }), _jsxs("tr", { className: "border-b border-[var(--color-border-default)]", children: [_jsx("td", { className: "px-4 py-2 text-sm font-mono", style: { color: "var(--flysoft-text-primary)" }, children: "className" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "string" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "No" }), _jsx("td", { className: "px-4 py-2 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Clases CSS adicionales. Las clases de background (bg-*) se aplican autom\u00E1ticamente al background del accordion." })] })] })] }) })] })] }) }) }));
+};
+export default AccordionDocs;