flysoft-react-ui 0.4.0 → 0.5.2

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,29 @@
+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>;
+    refetch: (params?: Record<string, any>) => Promise<void>;
+    createItem: (item: T) => Promise<T | undefined>;
+    deleteItem: (item: T) => Promise<void>;
+}
+export declare const ListCrudContext: import("react").Context<ListCrudContextType<any> | undefined>;
+interface ListCrudProviderProps<T> {
+    children: ReactNode;
+    getPromise: (params?: Record<string, any>) => Promise<Array<T> | PaginationInterface<T> | undefined>;
+    postPromise?: (item: T) => Promise<T | undefined>;
+    deletePromise?: (item: T) => Promise<void>;
+    urlParams?: Array<string>;
+    limit?: number;
+    pageParam?: string;
+}
+export declare function ListCrudProvider<T>({ children, getPromise, postPromise, 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":"AAAA,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,wCAAwC,CAAC;AAGhD,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,SAAS,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;IAChD,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACxC;AAQD,eAAO,MAAM,eAAe,+DAA+B,CAAC;AAE5D,UAAU,qBAAqB,CAAC,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,EAAE,CACV,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KACzB,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;IAC5D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;IAClD,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAClC,QAAQ,EACR,UAAU,EACV,WAAW,EACX,aAAa,EACb,KAAU,EACV,SAAoB,EACpB,SAAc,GACf,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAwP1B;AAID,wBAAgB,WAAW,CAAC,CAAC,KAAK,mBAAmB,CAAC,CAAC,CAAC,CAMvD"}

package/dist/contexts/ListCrudContext.js

@@ -0,0 +1,209 @@
+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, 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 getPromiseRef = useRef(getPromise);
+    const [searchParams, setSearchParams] = useSearchParams();
+    const lastFetchParamsRef = useRef("");
+    // Hooks para manejar las peticiones asíncronas
+    // fetchDataAsync sin mensaje para cargas automáticas
+    const fetchDataAsync = useAsyncRequest();
+    // fetchDataAsyncManual con mensaje para refetch manual
+    const fetchDataAsyncManual = useAsyncRequest({
+        successMessage: "Datos cargados correctamente",
+    });
+    const createItemAsync = useAsyncRequest();
+    const deleteItemAsync = useAsyncRequest();
+    // El isLoading del contexto combina ambos hooks de fetchData
+    const isLoading = fetchDataAsync.isLoading || fetchDataAsyncManual.isLoading;
+    // Actualizar la referencia cuando cambie getPromise
+    useEffect(() => {
+        getPromiseRef.current = getPromise;
+    }, [getPromise]);
+    // 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, showSuccessMessage = false) => {
+        const asyncRequest = showSuccessMessage
+            ? fetchDataAsyncManual
+            : fetchDataAsync;
+        // 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,
+            showSuccessMessage,
+        });
+        // Evitar ejecuciones duplicadas con los mismos parámetros
+        if (!showSuccessMessage && lastFetchParamsRef.current === paramsKey) {
+            console.log("Skipping duplicate fetchData call");
+            return;
+        }
+        lastFetchParamsRef.current = paramsKey;
+        console.log("fetchData called", {
+            showSuccessMessage,
+            isLoading: asyncRequest.isLoading,
+            params: requestParams,
+        });
+        const result = await asyncRequest.execute(async () => {
+            console.log("Executing promise with params:", requestParams);
+            const promiseResult = await getPromiseRef.current(requestParams);
+            console.log("Promise result:", promiseResult);
+            return promiseResult;
+        });
+        console.log("fetchData result:", result);
+        // 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);
+            }
+        }
+        else {
+            console.log("Result is undefined, not processing");
+        }
+    }, [getUrlParams, limit, fetchDataAsync, fetchDataAsyncManual]);
+    // 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 refetch = useCallback(async (params) => {
+        await fetchData(params, true); // Mostrar mensaje de éxito en refetch manual
+    }, [fetchData]);
+    // Función para crear un item
+    const createItem = useCallback(async (item) => {
+        if (!postPromise) {
+            throw new Error("postPromise is not defined. Please provide postPromise to ListCrudProvider.");
+        }
+        return await createItemAsync.execute(async () => {
+            return await postPromise(item);
+        });
+    }, [postPromise, createItemAsync]);
+    // Función para eliminar un item
+    const deleteItem = useCallback(async (item) => {
+        if (!deletePromise) {
+            throw new Error("deletePromise is not defined. Please provide deletePromise to ListCrudProvider.");
+        }
+        await deleteItemAsync.execute(async () => {
+            await deletePromise(item);
+        });
+    }, [deletePromise, 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
+    }, [getPromise, searchParams, pageParam, urlParamsKey]);
+    const value = {
+        list,
+        page,
+        pages,
+        total,
+        limit,
+        isLoading,
+        params: currentParams,
+        refetch,
+        createItem,
+        deleteItem,
+        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/AuthDocs.tsx/AuthDocsContent.js

@@ -16,7 +16,9 @@ export const AuthDocsContent = () => {
         return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { children: _jsx("div", { className: "flex items-center justify-center py-8", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("i", { className: "fa fa-spinner fa-spin text-[var(--color-primary)] text-xl" }), _jsx("span", { className: "text-[var(--color-text-secondary)]", children: "Iniciando sesi\u00F3n..." })] }) }) })] }));
     }
     if (isAuthenticated && user) {
-        return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { title: "Sesi\u00F3n Activa", subtitle: "Informaci\u00F3n del usuario autenticado", headerActions: _jsx(Badge, { variant: "success", icon: "fa-check-circle", iconPosition: "left", children: "Autenticado" }), children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(DataField, { label: "ID de Usuario", value: user.id }), _jsx(DataField, { label: "Nombre", value: user.name || "No disponible" })] }), user.aditionalData && (_jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--color-border-default)]", children: [_jsx("h4", { className: "text-sm font-semibold text-[var(--color-text-primary)] mb-3", children: "Datos Adicionales" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [user.aditionalData.role && (_jsx(DataField, { label: "Rol", value: _jsx(Badge, { variant: "primary", icon: "fa-user-shield", children: user.aditionalData.role }) })), user.aditionalData.email && (_jsx(DataField, { label: "Email", value: user.aditionalData.email })), user.aditionalData.createdAt && (_jsx(DataField, { label: "Fecha de Creaci\u00F3n", value: new Date(user.aditionalData.createdAt).toLocaleString() })), user.aditionalData.permissions && (_jsx(DataField, { label: "Permisos", value: _jsx("div", { className: "flex flex-wrap gap-2", children: user.aditionalData.permissions.map((permission, index) => (_jsx(Badge, { variant: "info", size: "sm", icon: "fa-key", children: permission }, index))) }) }))] })] })), user.token && (_jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--color-border-default)]", children: [_jsx("h4", { className: "text-sm font-semibold text-[var(--color-text-primary)] mb-3", children: "Informaci\u00F3n del Token" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(DataField, { label: "Tipo de Token", value: _jsx(Badge, { variant: "secondary", icon: "fa-tag", children: user.token.tokenType || "Bearer" }) }), user.token.expires && (_jsx(DataField, { label: "Expira", value: new Date(user.token.expires).toLocaleString() })), user.token.accessToken && (_jsx(DataField, { label: "Access Token", value: _jsxs("code", { className: "text-xs bg-[var(--color-bg-secondary)] px-2 py-1 rounded break-all", children: [user.token.accessToken.substring(0, 30), "..."] }) }))] })] })), _jsx("div", { className: "mt-6 pt-4 border-t border-[var(--color-border-default)]", children: _jsx(Button, { variant: "outline", icon: "fa-sign-out-alt", iconPosition: "left", onClick: handleLogout, className: "w-full md:w-auto", children: "Cerrar Sesi\u00F3n" }) })] }) })] }));
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { title: "Sesi\u00F3n Activa", subtitle: "Informaci\u00F3n del usuario autenticado", headerActions: () => [
+                        _jsx(Badge, { variant: "success", icon: "fa-check-circle", iconPosition: "left", children: "Autenticado" }),
+                    ], children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(DataField, { label: "ID de Usuario", value: user.id }), _jsx(DataField, { label: "Nombre", value: user.name || "No disponible" })] }), user.aditionalData && (_jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--color-border-default)]", children: [_jsx("h4", { className: "text-sm font-semibold text-[var(--color-text-primary)] mb-3", children: "Datos Adicionales" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [user.aditionalData.role && (_jsx(DataField, { label: "Rol", value: _jsx(Badge, { variant: "primary", icon: "fa-user-shield", children: user.aditionalData.role }) })), user.aditionalData.email && (_jsx(DataField, { label: "Email", value: user.aditionalData.email })), user.aditionalData.createdAt && (_jsx(DataField, { label: "Fecha de Creaci\u00F3n", value: new Date(user.aditionalData.createdAt).toLocaleString() })), user.aditionalData.permissions && (_jsx(DataField, { label: "Permisos", value: _jsx("div", { className: "flex flex-wrap gap-2", children: user.aditionalData.permissions.map((permission, index) => (_jsx(Badge, { variant: "info", size: "sm", icon: "fa-key", children: permission }, index))) }) }))] })] })), user.token && (_jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--color-border-default)]", children: [_jsx("h4", { className: "text-sm font-semibold text-[var(--color-text-primary)] mb-3", children: "Informaci\u00F3n del Token" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(DataField, { label: "Tipo de Token", value: _jsx(Badge, { variant: "secondary", icon: "fa-tag", children: user.token.tokenType || "Bearer" }) }), user.token.expires && (_jsx(DataField, { label: "Expira", value: new Date(user.token.expires).toLocaleString() })), user.token.accessToken && (_jsx(DataField, { label: "Access Token", value: _jsxs("code", { className: "text-xs bg-[var(--color-bg-secondary)] px-2 py-1 rounded break-all", children: [user.token.accessToken.substring(0, 30), "..."] }) }))] })] })), _jsx("div", { className: "mt-6 pt-4 border-t border-[var(--color-border-default)]", children: _jsx(Button, { variant: "outline", icon: "fa-sign-out-alt", iconPosition: "left", onClick: handleLogout, className: "w-full md:w-auto", children: "Cerrar Sesi\u00F3n" }) })] }) })] }));
     }
     return (_jsxs("div", { className: "space-y-4", children: [_jsx(InterfacesDocumentation, {}), _jsx(Card, { title: "Autenticaci\u00F3n", subtitle: "Inicia sesi\u00F3n para ver el AuthContext en acci\u00F3n", children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "bg-[var(--color-info-light)] border border-[var(--color-info)] rounded-lg p-4", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("i", { className: "fa fa-info-circle text-[var(--color-info)] mt-1" }), _jsx("div", { className: "flex-1", children: _jsxs("p", { className: "text-sm text-[var(--color-text-primary)]", children: ["Esta es una demostraci\u00F3n del", " ", _jsx("code", { className: "text-xs bg-white/50 px-1 rounded", children: "AuthContext" }), " ", "usando un servicio mock. Haz clic en el bot\u00F3n para simular un inicio de sesi\u00F3n."] }) })] }) }), _jsx("div", { className: "flex justify-center pt-4", children: _jsx(Button, { variant: "primary", size: "lg", icon: "fa-sign-in-alt", iconPosition: "left", onClick: handleLogin, children: "Iniciar Sesi\u00F3n" }) })] }) })] }));
 };

package/dist/docs/AvatarDocs.d.ts

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

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

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

package/dist/docs/AvatarDocs.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Avatar, Card } from "../index";
+const AvatarDocs = () => {
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Avatar - Iniciales e Im\u00E1genes", children: _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Uso B\u00E1sico con Iniciales" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "John Doe" }), _jsx(Avatar, { text: "Jane Smith" }), _jsx(Avatar, { text: "Mar\u00EDa Garc\u00EDa" }), _jsx(Avatar, { text: "Pedro" }), _jsx(Avatar, { text: "Ana Mar\u00EDa L\u00F3pez" })] }), _jsx("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente muestra las iniciales del texto. Si hay una sola palabra, muestra la primera letra. Si hay m\u00FAltiples palabras, muestra la primera letra de la primera palabra y la primera letra de la \u00FAltima palabra." })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Avatar, { text: "Small", size: "sm" }), _jsx("span", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: "sm" })] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Avatar, { text: "Medium", size: "md" }), _jsx("span", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: "md (default)" })] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Avatar, { text: "Large", size: "lg" }), _jsx("span", { className: "text-xs", style: { color: "var(--flysoft-text-secondary)" }, children: "lg" })] })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa la propiedad ", _jsx("code", { children: "size" }), " para cambiar el tama\u00F1o del avatar. Los tama\u00F1os disponibles son: ", _jsx("code", { children: "sm" }), ", ", _jsx("code", { children: "md" }), " (por defecto), y ", _jsx("code", { children: "lg" }), "."] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con Im\u00E1genes" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "Usuario con Imagen", image: "https://i.pravatar.cc/150?img=1" }), _jsx(Avatar, { text: "Otra Imagen", image: "https://i.pravatar.cc/150?img=12" }), _jsx(Avatar, { text: "Tercera Imagen", image: "https://i.pravatar.cc/150?img=33" })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cuando se proporciona una imagen mediante la propiedad ", _jsx("code", { children: "image" }), ", el avatar muestra la imagen en lugar de las iniciales. Si la imagen falla al cargar, autom\u00E1ticamente se mostrar\u00E1n las iniciales como fallback."] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Colores Personalizados" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Colores Hexadecimales" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "Azul", bgColor: "#3b82f6", textColor: "#ffffff" }), _jsx(Avatar, { text: "Verde", bgColor: "#10b981", textColor: "#ffffff" }), _jsx(Avatar, { text: "Rojo", bgColor: "#ef4444", textColor: "#ffffff" }), _jsx(Avatar, { text: "Amarillo", bgColor: "#f59e0b", textColor: "#000000" }), _jsx(Avatar, { text: "P\u00FArpura", bgColor: "#8b5cf6", textColor: "#ffffff" }), _jsx(Avatar, { text: "Rosa", bgColor: "#ec4899", textColor: "#ffffff" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Colores RGB" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "RGB", bgColor: "rgb(59, 130, 246)", textColor: "rgb(255, 255, 255)" }), _jsx(Avatar, { text: "RGBA", bgColor: "rgba(16, 185, 129, 0.9)", textColor: "rgb(255, 255, 255)" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Nombres de Colores" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "Gray-800", bgColor: "gray-800", textColor: "white" }), _jsx(Avatar, { text: "Gray-700", bgColor: "gray-700", textColor: "white" }), _jsx(Avatar, { text: "Gray-500", bgColor: "gray-500", textColor: "white" })] })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa las propiedades ", _jsx("code", { children: "bgColor" }), " y ", _jsx("code", { children: "textColor" }), " para personalizar los colores. Puedes usar valores hexadecimales (ej:", " ", _jsx("code", { children: "#3b82f6" }), "), RGB (ej: ", _jsx("code", { children: "rgb(59, 130, 246)" }), "), o nombres de colores comunes (ej: ", _jsx("code", { children: "white" }), ", ", _jsx("code", { children: "black" }), ",", _jsx("code", { children: "gray-600" }), "). Por defecto, el fondo es ", _jsx("code", { children: "gray-600" }), " y el texto es ", _jsx("code", { children: "white" }), "."] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Ejemplos Pr\u00E1cticos" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Lista de Usuarios" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Avatar, { text: "Juan P\u00E9rez", bgColor: "#3b82f6" }), _jsx("span", { style: { color: "var(--flysoft-text-primary)" }, children: "Juan P\u00E9rez" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Avatar, { text: "Mar\u00EDa Gonz\u00E1lez", bgColor: "#10b981" }), _jsx("span", { style: { color: "var(--flysoft-text-primary)" }, children: "Mar\u00EDa Gonz\u00E1lez" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Avatar, { text: "Carlos Rodr\u00EDguez", image: "https://i.pravatar.cc/150?img=5" }), _jsx("span", { style: { color: "var(--flysoft-text-primary)" }, children: "Carlos Rodr\u00EDguez" })] })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Diferentes Tama\u00F1os con Colores" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "SM", size: "sm", bgColor: "#8b5cf6" }), _jsx(Avatar, { text: "MD", size: "md", bgColor: "#ec4899" }), _jsx(Avatar, { text: "LG", size: "lg", bgColor: "#f59e0b" })] })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Atributo Title" }), _jsxs("div", { className: "flex flex-wrap gap-4 items-center", children: [_jsx(Avatar, { text: "Pasa el mouse aqu\u00ED" }), _jsx(Avatar, { text: "John Doe", bgColor: "#3b82f6" }), _jsx(Avatar, { text: "Usuario con Imagen", image: "https://i.pravatar.cc/150?img=8" })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["El componente siempre incluye un atributo ", _jsx("code", { children: "title" }), " con el texto completo. Pasa el mouse sobre cualquier avatar para ver el tooltip."] })] })] }) }) }));
+};
+export default AvatarDocs;

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

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

package/dist/docs/BadgeDocs.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import React, { useState } from "react";
 import { Badge, Card } from "../index";
 const BadgeDocs = () => {
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Badge - Variantes y Estados", children: _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Variantes" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4", children: [_jsx(Badge, { variant: "primary", children: "Primario" }), _jsx(Badge, { variant: "secondary", children: "Secundario" }), _jsx(Badge, { variant: "success", icon: "fa-check-circle", children: "\u00C9xito" }), _jsx(Badge, { variant: "warning", icon: "fa-exclamation-triangle", children: "Advertencia" }), _jsx(Badge, { variant: "danger", icon: "fa-times-circle", children: "Error" }), _jsx(Badge, { variant: "info", icon: "fa-info-circle", children: "Informaci\u00F3n" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(Badge, { size: "sm", icon: "fa-circle", iconLabel: "Indicador peque\u00F1o", children: "Peque\u00F1o" }), _jsx(Badge, { size: "md", icon: "fa-circle", children: "Mediano" }), _jsx(Badge, { size: "lg", icon: "fa-circle", children: "Grande" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00CDconos y dise\u00F1o" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsx(Badge, { icon: "fa-bell", rounded: true, children: "Notificaci\u00F3n" }), _jsx(Badge, { icon: "fa-arrow-right", iconPosition: "right", children: "Acci\u00F3n" }), _jsx(Badge, { icon: "fa-shield-alt", iconLabel: "Estado protegido", children: "Accesible" })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa ", _jsx("code", { children: "icon" }), " con clases FontAwesome 5 (ej.", " ", _jsx("code", { children: "fa-check" }), ") y combina ", _jsx("code", { children: "rounded" }), " para badges tipo pills."] })] })] }) }) }));
+    const [clickCount, setClickCount] = useState(0);
+    const [iconClickCount, setIconClickCount] = useState(0);
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Badge - Variantes y Estados", children: _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Variantes" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4", children: [_jsx(Badge, { variant: "primary", icon: "fa-star", iconPosition: "right", children: "Primario" }), _jsx(Badge, { variant: "secondary", children: "Secundario" }), _jsx(Badge, { variant: "success", icon: "fa-check-circle", children: "\u00C9xito" }), _jsx(Badge, { variant: "warning", icon: "fa-exclamation-triangle", children: "Advertencia" }), _jsx(Badge, { variant: "danger", icon: "fa-times-circle", children: "Error" }), _jsx(Badge, { variant: "info", icon: "fa-info-circle", children: "Informaci\u00F3n" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Tama\u00F1os" }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(Badge, { size: "sm", icon: "fa-circle", iconLabel: "Indicador peque\u00F1o", children: "Peque\u00F1o" }), _jsx(Badge, { size: "md", icon: "fa-circle", children: "Mediano" }), _jsx(Badge, { size: "lg", icon: "fa-circle", children: "Grande" })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "\u00CDconos y dise\u00F1o" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Iconos a la izquierda (por defecto)" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsx(Badge, { icon: "fa-bell", rounded: true, children: "Notificaci\u00F3n" }), _jsx(Badge, { variant: "primary", icon: "fa-star", children: "Primario" }), _jsx(Badge, { variant: "success", icon: "fa-check-circle", children: "\u00C9xito" }), _jsx(Badge, { icon: "fa-shield-alt", iconLabel: "Estado protegido", children: "Accesible" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Iconos a la derecha (iconPosition=\"right\")" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsx(Badge, { variant: "primary", icon: "fa-star", iconPosition: "right", children: "Primario" }), _jsx(Badge, { variant: "secondary", icon: "fa-circle", iconPosition: "right", children: "Secundario" }), _jsx(Badge, { variant: "success", icon: "fa-check", iconPosition: "right", children: "\u00C9xito" }), _jsx(Badge, { variant: "warning", icon: "fa-exclamation", iconPosition: "right", children: "Advertencia" }), _jsx(Badge, { variant: "danger", icon: "fa-times", iconPosition: "right", children: "Error" }), _jsx(Badge, { variant: "info", icon: "fa-info", iconPosition: "right", children: "Informaci\u00F3n" }), _jsx(Badge, { icon: "fa-arrow-right", iconPosition: "right", rounded: true, children: "Acci\u00F3n" })] })] })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa ", _jsx("code", { children: "icon" }), " con clases FontAwesome 5 (ej.", " ", _jsx("code", { children: "fa-check" }), "). El prop ", _jsx("code", { children: "iconPosition" }), " puede ser ", _jsx("code", { children: "\"left\"" }), " (por defecto) o ", _jsx("code", { children: "\"right\"" }), " para posicionar el icono. Combina ", _jsx("code", { children: "rounded" }), " para badges tipo pills."] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Interactividad con onClick" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Badge sin iconos (todo el badge es clickeable)" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsxs(Badge, { variant: "primary", onClick: () => setClickCount((prev) => prev + 1), children: ["Click aqu\u00ED (", clickCount, ")"] }), _jsx(Badge, { variant: "success", onClick: () => alert("Badge clickeado!"), children: "Alerta" }), _jsx(Badge, { variant: "info", rounded: true, onClick: () => console.log("Badge info clickeado"), children: "Ver en consola" })] }), _jsxs("p", { className: "text-sm mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cuando no hay iconos, el ", _jsx("code", { children: "onClick" }), " afecta a todo el badge y muestra cursor pointer."] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Badge con iconos (solo los iconos son clickeables)" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsxs(Badge, { variant: "warning", icon: "fa-times-circle", onClick: () => setIconClickCount((prev) => prev + 1), children: ["Cerrar (", iconClickCount, ")"] }), _jsx(Badge, { variant: "danger", icon: "fa-trash", iconPosition: "right", onClick: () => alert("Eliminar item"), children: "Eliminar" }), _jsx(Badge, { variant: "info", icon: "fa-edit", rounded: true, onClick: () => console.log("Editar clickeado"), children: "Editar" }), _jsx(Badge, { variant: "success", icon: "fa-check", iconPosition: "right", onClick: () => alert("Aceptar"), children: "Aceptar" })] }), _jsxs("p", { className: "text-sm mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: ["Cuando hay iconos, el ", _jsx("code", { children: "onClick" }), " solo afecta a los iconos (tienen cursor pointer). El texto del badge no es clickeable."] })] })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Background personalizado" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Colores personalizados (hex, rgb, nombres)" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsx(Badge, { bg: "#ff6b6b", textColor: "white", children: "Rojo personalizado" }), _jsx(Badge, { bg: "#4ecdc4", textColor: "white", children: "Turquesa" }), _jsx(Badge, { bg: "#ffe66d", textColor: "#1f2937", children: "Amarillo claro" }), _jsx(Badge, { bg: "rgb(138, 43, 226)", textColor: "white", children: "Violeta RGB" }), _jsx(Badge, { bg: "#95e1d3", textColor: "#1f2937", children: "Verde menta" }), _jsx(Badge, { bg: "#f38181", textColor: "white", children: "Coral" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Con iconos y rounded" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsx(Badge, { bg: "#6c5ce7", textColor: "white", icon: "fa-star", rounded: true, children: "Premium" }), _jsx(Badge, { bg: "#00b894", textColor: "white", icon: "fa-check-circle", iconPosition: "right", children: "Verificado" }), _jsx(Badge, { bg: "#e17055", textColor: "white", icon: "fa-fire", rounded: true, children: "Popular" }), _jsx(Badge, { bg: "#0984e3", textColor: "white", icon: "fa-bolt", iconPosition: "right", rounded: true, children: "R\u00E1pido" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-md font-medium mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Con onClick y background personalizado" }), _jsxs("div", { className: "flex flex-wrap gap-3 items-center", children: [_jsx(Badge, { bg: "#a29bfe", textColor: "white", onClick: () => alert("Badge personalizado clickeado!"), children: "Click aqu\u00ED" }), _jsx(Badge, { bg: "#fd79a8", textColor: "white", icon: "fa-heart", onClick: () => alert("Me gusta!"), rounded: true, children: "Me gusta" }), _jsx(Badge, { bg: "#55efc4", textColor: "#1f2937", icon: "fa-share", iconPosition: "right", onClick: () => console.log("Compartir"), children: "Compartir" })] })] }), _jsxs("p", { className: "text-sm mt-3", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usa ", _jsx("code", { children: "bg" }), " para definir un color de fondo personalizado (hex, rgb, nombres de colores CSS como \"white\", \"black\", o valores Tailwind como \"gray-800\") y ", _jsx("code", { children: "textColor" }), " para personalizar el color del texto. Si no especificas", " ", _jsx("code", { children: "textColor" }), ", se usa gris oscuro por defecto."] })] })] })] }) }) }));
 };
 export default BadgeDocs;

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

@@ -1 +1 @@
-{"version":3,"file":"CardDocs.d.ts","sourceRoot":"","sources":["../../src/docs/CardDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EA+IrB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"CardDocs.d.ts","sourceRoot":"","sources":["../../src/docs/CardDocs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EA2drB,CAAC;AAEF,eAAe,QAAQ,CAAC"}