flysoft-react-ui 0.5.3 → 1.0.0

package/dist/contexts/{ListCrudContext.js → CrudContext.js}

@@ -3,23 +3,32 @@ import { createContext, useContext, useEffect, useMemo, useRef, useState, useCal
 import { useSearchParams } from "react-router-dom";
 import { Pagination, } from "../components/form-controls/Pagination";
 import { useAsyncRequest } from "../hooks/useAsyncRequest";
-const createListCrudContext = () => {
+const createCrudContext = () => {
     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 = [], }) {
+export const CrudContext = createCrudContext();
+export function CrudProvider({ children, getPromise, getItemPromise, postPromise, putPromise, deletePromise, limit = 15, pageParam = "pagina", urlParams = [], singleItemId, extraData: extraDataProp, }) {
+    const [extraData, setExtraData] = useState(extraDataProp);
     const [list, setList] = useState(undefined);
+    const [item, setItem] = 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 getPromiseExecute = getPromise
+        ? typeof getPromise === "function"
+            ? getPromise
+            : getPromise.execute
+        : undefined;
+    const getPromiseSuccessMessage = getPromise && typeof getPromise === "object"
+        ? getPromise.successMessage
+        : undefined;
+    const getPromiseErrorMessage = getPromise && typeof getPromise === "object"
+        ? getPromise.errorMessage
+        : undefined;
     const postPromiseExecute = postPromise
         ? typeof postPromise === "function"
             ? postPromise
@@ -53,6 +62,17 @@ export function ListCrudProvider({ children, getPromise, postPromise, putPromise
     const deletePromiseErrorMessage = deletePromise && typeof deletePromise === "object"
         ? deletePromise.errorMessage
         : undefined;
+    const getItemPromiseExecute = getItemPromise
+        ? typeof getItemPromise === "function"
+            ? getItemPromise
+            : getItemPromise.execute
+        : undefined;
+    const getItemPromiseSuccessMessage = getItemPromise && typeof getItemPromise === "object"
+        ? getItemPromise.successMessage
+        : undefined;
+    const getItemPromiseErrorMessage = getItemPromise && typeof getItemPromise === "object"
+        ? getItemPromise.errorMessage
+        : undefined;
     const getPromiseRef = useRef(getPromiseExecute);
     // Hooks para manejar las peticiones asíncronas con mensajes opcionales
     const fetchDataAsync = useAsyncRequest({
@@ -71,6 +91,10 @@ export function ListCrudProvider({ children, getPromise, postPromise, putPromise
         successMessage: deletePromiseSuccessMessage,
         errorMessage: deletePromiseErrorMessage,
     });
+    const fetchItemAsync = useAsyncRequest({
+        successMessage: getItemPromiseSuccessMessage,
+        errorMessage: getItemPromiseErrorMessage,
+    });
     // El isLoading del contexto usa el hook de fetchData
     const isLoading = fetchDataAsync.isLoading;
     // Actualizar la referencia cuando cambie getPromise
@@ -99,11 +123,11 @@ export function ListCrudProvider({ children, getPromise, postPromise, putPromise
     }, [searchParams, pageParam, urlParams, limit]);
     // Función para obtener los datos
     const fetchData = useCallback(async (params) => {
+        if (!getPromiseExecute) {
+            return;
+        }
         // 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);
         });
@@ -132,7 +156,7 @@ export function ListCrudProvider({ children, getPromise, postPromise, putPromise
                 setTotal(0);
             }
         }
-    }, [getUrlParams, limit, fetchDataAsync]);
+    }, [getUrlParams, limit, fetchDataAsync, getPromiseExecute]);
     // Ref para almacenar los valores anteriores de urlParams
     const prevUrlParamsValuesRef = useRef({});
     // Memoizar los valores actuales de los urlParams
@@ -145,6 +169,24 @@ export function ListCrudProvider({ children, getPromise, postPromise, putPromise
     }, [searchParams, urlParams]);
     // Memoizar los parámetros de URL para evitar re-renders innecesarios
     const urlParamsKey = useMemo(() => urlParams.join(","), [urlParams]);
+    // Memoizar solo los parámetros relevantes de la URL (urlParams + pageParam)
+    // para que el useEffect solo se ejecute cuando cambien estos parámetros
+    const relevantParamsKey = useMemo(() => {
+        const relevantParams = {};
+        // Agregar pageParam si existe
+        const pageValue = searchParams.get(pageParam);
+        if (pageValue) {
+            relevantParams[pageParam] = pageValue;
+        }
+        // Agregar urlParams si existen
+        urlParams.forEach((paramName) => {
+            const paramValue = searchParams.get(paramName);
+            if (paramValue !== null) {
+                relevantParams[paramName] = paramValue;
+            }
+        });
+        return JSON.stringify(relevantParams);
+    }, [searchParams, pageParam, urlParams]);
     // Memoizar los parámetros actuales para exponerlos
     const currentParams = useMemo(() => getUrlParams(), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -153,10 +195,28 @@ export function ListCrudProvider({ children, getPromise, postPromise, putPromise
     const fetchItemsExecute = useCallback(async (params) => {
         await fetchData(params);
     }, [fetchData]);
+    // Función para obtener un item individual
+    const fetchItemExecute = useCallback(async (params) => {
+        if (!getItemPromiseExecute) {
+            throw new Error("getItemPromise is not defined. Please provide getItemPromise to CrudProvider.");
+        }
+        // Si no se pasan parámetros, usar singleItemId si está disponible
+        const finalParams = params !== undefined ? params : singleItemId;
+        if (finalParams === undefined) {
+            throw new Error("No parameters provided and singleItemId is not defined. Please provide parameters or set singleItemId in CrudProvider.");
+        }
+        const result = await fetchItemAsync.execute(async () => {
+            return await getItemPromiseExecute(finalParams);
+        });
+        if (result !== undefined) {
+            setItem(result);
+        }
+        return result;
+    }, [getItemPromiseExecute, fetchItemAsync, singleItemId]);
     // 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.");
+            throw new Error("postPromise is not defined. Please provide postPromise to CrudProvider.");
         }
         return await createItemAsync.execute(async () => {
             return await postPromiseExecute(item);
@@ -165,7 +225,7 @@ export function ListCrudProvider({ children, getPromise, postPromise, putPromise
     // 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.");
+            throw new Error("putPromise is not defined. Please provide putPromise to CrudProvider.");
         }
         return await updateItemAsync.execute(async () => {
             return await putPromiseExecute(item);
@@ -174,7 +234,7 @@ export function ListCrudProvider({ children, getPromise, postPromise, putPromise
     // 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.");
+            throw new Error("deletePromise is not defined. Please provide deletePromise to CrudProvider.");
         }
         await deleteItemAsync.execute(async () => {
             await deletePromiseExecute(item);
@@ -205,17 +265,31 @@ export function ListCrudProvider({ children, getPromise, postPromise, putPromise
         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 para ejecutar fetchData cuando cambian los parámetros relevantes o getPromise
     useEffect(() => {
-        // Usar un pequeño delay para agrupar múltiples cambios rápidos en el mismo tick
+        if (!getPromiseExecute) {
+            return;
+        }
         const timeoutId = setTimeout(() => {
             fetchData();
         }, 0);
         return () => clearTimeout(timeoutId);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getPromiseExecute, searchParams, pageParam, urlParamsKey]);
+    }, [relevantParamsKey, getPromiseExecute]);
+    // useEffect para obtener el item individual cuando cambie singleItemId
+    useEffect(() => {
+        if (singleItemId !== undefined && getItemPromiseExecute) {
+            fetchItemExecute(singleItemId);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [singleItemId]);
+    // Sincronizar extraDataProp con el estado local
+    useEffect(() => {
+        setExtraData(extraDataProp);
+    }, [extraDataProp]);
     const value = {
         list,
+        item,
         page,
         pages,
         total,
@@ -226,6 +300,10 @@ export function ListCrudProvider({ children, getPromise, postPromise, putPromise
             execute: fetchItemsExecute,
             isLoading: fetchDataAsync.isLoading,
         },
+        fetchItem: {
+            execute: fetchItemExecute,
+            isLoading: fetchItemAsync.isLoading,
+        },
         createItem: {
             execute: createItemExecute,
             isLoading: createItemAsync.isLoading,
@@ -239,15 +317,17 @@ export function ListCrudProvider({ children, getPromise, postPromise, putPromise
             isLoading: deleteItemAsync.isLoading,
         },
         pagination: (_jsx(Pagination, { page: page, pages: pages, total: total, fieldName: pageParam, isLoading: isLoading })),
+        extraData,
+        setExtraData,
     };
-    return (_jsx(ListCrudContext.Provider, { value: value, children: children }));
+    return _jsx(CrudContext.Provider, { value: value, children: children });
 }
-// Hook to use ListCrud context
+// Hook to use Crud context
 // eslint-disable-next-line react-refresh/only-export-components
-export function useListCrud() {
-    const context = useContext(ListCrudContext);
+export function useCrud() {
+    const context = useContext(CrudContext);
     if (context === undefined) {
-        throw new Error("useListCrud must be used within a ListCrudProvider");
+        throw new Error("useCrud must be used within a CrudProvider");
     }
     return context;
 }

package/dist/contexts/index.d.ts

@@ -4,8 +4,8 @@ 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 { CrudProvider, CrudContext, useCrud } from "./CrudContext";
+export type { CrudContextType } from "./CrudContext";
 export { AppLayoutProvider, useAppLayout, useAppLayoutContext } from "./AppLayoutContext";
 export type { AppLayoutContextType, NavbarInterface, LeftDrawerInterface, } from "./AppLayoutContext";
 export { SnackbarProvider, useSnackbar } from "./SnackbarContext";

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;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"}
+{"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,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD,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,8 +5,8 @@ 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";
+// Crud system exports
+export { CrudProvider, CrudContext, useCrud } from "./CrudContext";
 // AppLayout system exports
 export { AppLayoutProvider, useAppLayout, useAppLayoutContext } from "./AppLayoutContext";
 // Snackbar system exports

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

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

package/dist/docs/DialogDocs.js

@@ -7,6 +7,6 @@ const DialogDocs = () => {
     const [isOpenConfirm, setIsOpenConfirm] = useState(false);
     const [isOpenNoOverlay, setIsOpenNoOverlay] = useState(false);
     const [isOpenCustom, setIsOpenCustom] = useState(false);
-    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Dialog - 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: "Uso b\u00E1sico" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El componente Dialog muestra un modal centrado con overlay. Se controla mediante la prop ", _jsx("code", { children: "isOpen" }), " y se cierra con", " ", _jsx("code", { children: "onClose" }), "."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-window-maximize", onClick: () => setIsOpenBasic(true), children: "Abrir Dialog B\u00E1sico" }), _jsx(Dialog, { isOpen: isOpenBasic, title: "Dialog B\u00E1sico", dialogBody: _jsxs("div", { className: "space-y-3", children: [_jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Este es un ejemplo de dialog b\u00E1sico. Puedes incluir cualquier contenido en el ", _jsx("code", { children: "dialogBody" }), "."] }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "El dialog se puede cerrar haciendo clic en el overlay, en el bot\u00F3n de cerrar (X), o presionando la tecla Escape." })] }), dialogActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => setIsOpenBasic(false), children: "Cancelar" }), _jsx(Button, { variant: "primary", onClick: () => setIsOpenBasic(false), children: "Aceptar" })] }), onClose: () => setIsOpenBasic(false) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Dialog con formulario" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo de dialog que contiene un formulario completo con campos de entrada." }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-edit", onClick: () => setIsOpenForm(true), children: "Abrir Dialog con Formulario" }), _jsx(Dialog, { isOpen: isOpenForm, title: "Editar Usuario", dialogBody: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Ingresa el nombre", icon: "fa-user" }), _jsx(Input, { label: "Email", type: "email", placeholder: "usuario@ejemplo.com", icon: "fa-envelope" }), _jsx(Input, { label: "Tel\u00E9fono", type: "tel", placeholder: "+34 600 000 000", icon: "fa-phone" })] }), dialogActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", icon: "fa-times", onClick: () => setIsOpenForm(false), children: "Cancelar" }), _jsx(Button, { variant: "primary", icon: "fa-save", onClick: () => setIsOpenForm(false), children: "Guardar Cambios" })] }), onClose: () => setIsOpenForm(false) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Dialog de confirmaci\u00F3n" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo de dialog usado para confirmar una acci\u00F3n importante." }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-trash", onClick: () => setIsOpenConfirm(true), children: "Eliminar Item" }), _jsx(Dialog, { isOpen: isOpenConfirm, title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-exclamation-triangle text-[var(--color-danger)]" }), _jsx("span", { children: "Confirmar Eliminaci\u00F3n" })] }), dialogBody: _jsxs("div", { className: "space-y-3", children: [_jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "\u00BFEst\u00E1s seguro de que deseas eliminar este elemento? Esta acci\u00F3n no se puede deshacer." }), _jsx("div", { className: "flex gap-2", children: _jsx(Badge, { variant: "danger", icon: "fa-exclamation-circle", children: "Acci\u00F3n irreversible" }) })] }), dialogActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", icon: "fa-times", onClick: () => setIsOpenConfirm(false), children: "Cancelar" }), _jsx(Button, { variant: "primary", icon: "fa-trash", onClick: () => setIsOpenConfirm(false), children: "Eliminar" })] }), onClose: () => setIsOpenConfirm(false) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Dialog sin cerrar al hacer clic en overlay" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando ", _jsxs("code", { children: ["closeOnOverlayClick=", false] }), " el dialog solo se puede cerrar mediante el bot\u00F3n de cerrar, los botones de acci\u00F3n, o la tecla Escape."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-lock", onClick: () => setIsOpenNoOverlay(true), children: "Abrir Dialog (sin cerrar en overlay)" }), _jsx(Dialog, { isOpen: isOpenNoOverlay, title: "Dialog Protegido", dialogBody: _jsxs("div", { className: "space-y-3", children: [_jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este dialog no se cierra al hacer clic en el overlay. Debes usar el bot\u00F3n de cerrar o los botones de acci\u00F3n." }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "\u00DAtil para formularios importantes donde no quieres que el usuario cierre accidentalmente el dialog." })] }), dialogActions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => setIsOpenNoOverlay(false), children: "Cancelar" }), _jsx(Button, { variant: "primary", onClick: () => setIsOpenNoOverlay(false), children: "Continuar" })] }), onClose: () => setIsOpenNoOverlay(false), closeOnOverlayClick: false })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Dialog con t\u00EDtulo personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El prop ", _jsx("code", { children: "title" }), " acepta un ReactNode, permitiendo incluir iconos, badges u otros componentes."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-star", onClick: () => setIsOpenCustom(true), children: "Abrir Dialog Personalizado" }), _jsx(Dialog, { isOpen: isOpenCustom, title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-info-circle text-[var(--color-primary)]" }), _jsx("span", { children: "Informaci\u00F3n Importante" }), _jsx(Badge, { variant: "info", size: "sm", children: "Nuevo" })] }), dialogBody: _jsxs("div", { className: "space-y-3", children: [_jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este dialog muestra c\u00F3mo puedes personalizar el t\u00EDtulo usando ReactNode, incluyendo iconos y badges." }), _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsx("i", { className: "fal fa-lightbulb mr-2" }), "Puedes usar cualquier componente React en el t\u00EDtulo, body y acciones."] }) })] }), dialogActions: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-bookmark", onClick: () => setIsOpenCustom(false), children: "Guardar para despu\u00E9s" }), _jsx(Button, { variant: "primary", icon: "fa-check", onClick: () => setIsOpenCustom(false), children: "Entendido" })] }), onClose: () => setIsOpenCustom(false) })] })] }), _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: "Overlay con blur:" }), " El overlay tiene un efecto de desenfoque (backdrop-blur) para mejor enfoque visual"] }), _jsxs("li", { children: [_jsx("strong", { children: "Cierre m\u00FAltiple:" }), " Se puede cerrar haciendo clic en el overlay, en el bot\u00F3n X, en los botones de acci\u00F3n, o presionando Escape"] }), _jsxs("li", { children: [_jsx("strong", { children: "Prevenci\u00F3n de scroll:" }), " Cuando el dialog est\u00E1 abierto, se previene el scroll del body"] }), _jsxs("li", { children: [_jsx("strong", { children: "Responsive:" }), " El dialog se adapta a diferentes tama\u00F1os de pantalla con padding adecuado"] }), _jsxs("li", { children: [_jsx("strong", { children: "Accesibilidad:" }), " Incluye atributos ARIA para mejor accesibilidad"] }), _jsxs("li", { children: [_jsx("strong", { children: "Contenido flexible:" }), " El body tiene scroll autom\u00E1tico si el contenido es muy largo"] })] }) }) })] })] }) }) }));
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "Dialog - 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: "Uso b\u00E1sico" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El componente Dialog muestra un modal centrado con overlay. Se controla mediante la prop ", _jsx("code", { children: "isOpen" }), " y se cierra con", " ", _jsx("code", { children: "onClose" }), ". El contenido se pasa como ", _jsx("code", { children: "children" }), "."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-window-maximize", onClick: () => setIsOpenBasic(true), children: "Abrir Dialog B\u00E1sico" }), _jsx(Dialog, { isOpen: isOpenBasic, title: "Dialog B\u00E1sico", footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => setIsOpenBasic(false), children: "Cancelar" }), _jsx(Button, { variant: "primary", onClick: () => setIsOpenBasic(false), children: "Aceptar" })] }), onClose: () => setIsOpenBasic(false), children: _jsxs("div", { className: "space-y-3", children: [_jsxs("p", { style: { color: "var(--flysoft-text-secondary)" }, children: ["Este es un ejemplo de dialog b\u00E1sico. Puedes incluir cualquier contenido como ", _jsx("code", { children: "children" }), "."] }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "El dialog se puede cerrar haciendo clic en el overlay, en el bot\u00F3n de cerrar (X), o presionando la tecla Escape." })] }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Dialog con formulario" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo de dialog que contiene un formulario completo con campos de entrada." }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-edit", onClick: () => setIsOpenForm(true), children: "Abrir Dialog con Formulario" }), _jsx(Dialog, { isOpen: isOpenForm, title: "Editar Usuario", footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", icon: "fa-times", onClick: () => setIsOpenForm(false), children: "Cancelar" }), _jsx(Button, { variant: "primary", icon: "fa-save", onClick: () => setIsOpenForm(false), children: "Guardar Cambios" })] }), onClose: () => setIsOpenForm(false), children: _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Ingresa el nombre", icon: "fa-user" }), _jsx(Input, { label: "Email", type: "email", placeholder: "usuario@ejemplo.com", icon: "fa-envelope" }), _jsx(Input, { label: "Tel\u00E9fono", type: "tel", placeholder: "+34 600 000 000", icon: "fa-phone" })] }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Dialog de confirmaci\u00F3n" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Ejemplo de dialog usado para confirmar una acci\u00F3n importante." }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-trash", onClick: () => setIsOpenConfirm(true), children: "Eliminar Item" }), _jsx(Dialog, { isOpen: isOpenConfirm, title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-exclamation-triangle text-[var(--color-danger)]" }), _jsx("span", { children: "Confirmar Eliminaci\u00F3n" })] }), footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", icon: "fa-times", onClick: () => setIsOpenConfirm(false), children: "Cancelar" }), _jsx(Button, { variant: "primary", icon: "fa-trash", onClick: () => setIsOpenConfirm(false), children: "Eliminar" })] }), onClose: () => setIsOpenConfirm(false), children: _jsxs("div", { className: "space-y-3", children: [_jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "\u00BFEst\u00E1s seguro de que deseas eliminar este elemento? Esta acci\u00F3n no se puede deshacer." }), _jsx("div", { className: "flex gap-2", children: _jsx(Badge, { variant: "danger", icon: "fa-exclamation-circle", children: "Acci\u00F3n irreversible" }) })] }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Dialog sin cerrar al hacer clic en overlay" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Usando ", _jsxs("code", { children: ["closeOnOverlayClick=", false] }), " el dialog solo se puede cerrar mediante el bot\u00F3n de cerrar, los botones de acci\u00F3n, o la tecla Escape."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-lock", onClick: () => setIsOpenNoOverlay(true), children: "Abrir Dialog (sin cerrar en overlay)" }), _jsx(Dialog, { isOpen: isOpenNoOverlay, title: "Dialog Protegido", footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => setIsOpenNoOverlay(false), children: "Cancelar" }), _jsx(Button, { variant: "primary", onClick: () => setIsOpenNoOverlay(false), children: "Continuar" })] }), onClose: () => setIsOpenNoOverlay(false), closeOnOverlayClick: false, children: _jsxs("div", { className: "space-y-3", children: [_jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este dialog no se cierra al hacer clic en el overlay. Debes usar el bot\u00F3n de cerrar o los botones de acci\u00F3n." }), _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "\u00DAtil para formularios importantes donde no quieres que el usuario cierre accidentalmente el dialog." })] }) })] })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Dialog con t\u00EDtulo personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["El prop ", _jsx("code", { children: "title" }), " acepta un ReactNode, permitiendo incluir iconos, badges u otros componentes."] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Button, { variant: "primary", icon: "fa-star", onClick: () => setIsOpenCustom(true), children: "Abrir Dialog Personalizado" }), _jsx(Dialog, { isOpen: isOpenCustom, title: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("i", { className: "fal fa-info-circle text-[var(--color-primary)]" }), _jsx("span", { children: "Informaci\u00F3n Importante" }), _jsx(Badge, { variant: "info", size: "sm", children: "Nuevo" })] }), footer: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", icon: "fa-bookmark", onClick: () => setIsOpenCustom(false), children: "Guardar para despu\u00E9s" }), _jsx(Button, { variant: "primary", icon: "fa-check", onClick: () => setIsOpenCustom(false), children: "Entendido" })] }), onClose: () => setIsOpenCustom(false), children: _jsxs("div", { className: "space-y-3", children: [_jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Este dialog muestra c\u00F3mo puedes personalizar el t\u00EDtulo usando ReactNode, incluyendo iconos y badges." }), _jsx("div", { className: "p-3 bg-[var(--color-bg-default)] border border-[var(--color-border-default)] rounded", children: _jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: [_jsx("i", { className: "fal fa-lightbulb mr-2" }), "Puedes usar cualquier componente React en el t\u00EDtulo, children y acciones."] }) })] }) })] })] }), _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: "Overlay con blur:" }), " El overlay tiene un efecto de desenfoque (backdrop-blur) para mejor enfoque visual"] }), _jsxs("li", { children: [_jsx("strong", { children: "Cierre m\u00FAltiple:" }), " Se puede cerrar haciendo clic en el overlay, en el bot\u00F3n X, en los botones de acci\u00F3n, o presionando Escape"] }), _jsxs("li", { children: [_jsx("strong", { children: "Prevenci\u00F3n de scroll:" }), " Cuando el dialog est\u00E1 abierto, se previene el scroll del body"] }), _jsxs("li", { children: [_jsx("strong", { children: "Responsive:" }), " El dialog se adapta a diferentes tama\u00F1os de pantalla con padding adecuado"] }), _jsxs("li", { children: [_jsx("strong", { children: "Accesibilidad:" }), " Incluye atributos ARIA para mejor accesibilidad"] }), _jsxs("li", { children: [_jsx("strong", { children: "Contenido flexible:" }), " El body tiene scroll autom\u00E1tico si el contenido es muy largo"] })] }) }) })] })] }) }) }));
 };
 export default DialogDocs;

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

@@ -1 +1 @@
-{"version":3,"file":"DocsMenu.d.ts","sourceRoot":"","sources":["../../src/docs/DocsMenu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CAyRpB,CAAC"}
+{"version":3,"file":"DocsMenu.d.ts","sourceRoot":"","sources":["../../src/docs/DocsMenu.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CA2SpB,CAAC"}

package/dist/docs/DocsMenu.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Accordion, LinkButton } from "../index";
 export const DocsMenu = () => {
-    return (_jsxs("div", { className: "space-y-2 p-4 bg-gray-100 h-full", children: [_jsx(Accordion, { title: "Form Controls", icon: "fa-edit", defaultOpen: true, children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/button", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Button" }), _jsx(LinkButton, { to: "/docs/linkbutton", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "LinkButton" }), _jsx(LinkButton, { to: "/docs/input", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Input" }), _jsx(LinkButton, { to: "/docs/autocomplete-input", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "AutocompleteInput" }), _jsx(LinkButton, { to: "/docs/search-select-input", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "SearchSelectInput" }), _jsx(LinkButton, { to: "/docs/datepicker", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DatePicker" }), _jsx(LinkButton, { to: "/docs/dateinput", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DateInput" }), _jsx(LinkButton, { to: "/docs/checkbox", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Checkbox" }), _jsx(LinkButton, { to: "/docs/radiobuttongroup", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "RadioButtonGroup" }), _jsx(LinkButton, { to: "/docs/pagination", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Pagination" })] }) }), _jsx(Accordion, { title: "Layout", icon: "fa-th-large", children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/card", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Card" }), _jsx(LinkButton, { to: "/docs/datafield", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DataField" }), _jsx(LinkButton, { to: "/docs/tabsgroup", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "TabsGroup" }), _jsx(LinkButton, { to: "/docs/datatable", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DataTable" }), _jsx(LinkButton, { to: "/docs/accordion", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Accordion" })] }) }), _jsx(Accordion, { title: "Utils", icon: "fa-tools", children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/badge", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Badge" }), _jsx(LinkButton, { to: "/docs/avatar", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Avatar" }), _jsx(LinkButton, { to: "/docs/roadmap", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "RoadMap" }), _jsx(LinkButton, { to: "/docs/dialog", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Dialog" }), _jsx(LinkButton, { to: "/docs/loader", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Loader" }), _jsx(LinkButton, { to: "/docs/dropdownmenu", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DropdownMenu" }), _jsx(LinkButton, { to: "/docs/filter", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Filter" }), _jsx(LinkButton, { to: "/docs/snackbar", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Snackbar" }), _jsx(LinkButton, { to: "/docs/theme", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "ThemeSwitcher" })] }) }), _jsx(Accordion, { title: "Contexts", icon: "fa-database", children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/auth", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "AuthContext" }), _jsx(LinkButton, { to: "/docs/listcrud", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "ListCrudContext" })] }) }), _jsx(Accordion, { title: "Otros", icon: "fa-folder", children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/example-form", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Formulario de Ejemplo" }), _jsx(LinkButton, { to: "/docs/admin", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Admin (Mock Services)" })] }) })] }));
+    return (_jsxs("div", { className: "space-y-2 p-4 bg-gray-100 h-full", children: [_jsx(Accordion, { title: "Form Controls", icon: "fa-edit", defaultOpen: true, children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/button", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Button" }), _jsx(LinkButton, { to: "/docs/linkbutton", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "LinkButton" }), _jsx(LinkButton, { to: "/docs/input", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Input" }), _jsx(LinkButton, { to: "/docs/autocomplete-input", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "AutocompleteInput" }), _jsx(LinkButton, { to: "/docs/search-select-input", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "SearchSelectInput" }), _jsx(LinkButton, { to: "/docs/datepicker", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DatePicker" }), _jsx(LinkButton, { to: "/docs/dateinput", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DateInput" }), _jsx(LinkButton, { to: "/docs/checkbox", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Checkbox" }), _jsx(LinkButton, { to: "/docs/radiobuttongroup", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "RadioButtonGroup" }), _jsx(LinkButton, { to: "/docs/pagination", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Pagination" })] }) }), _jsx(Accordion, { title: "Layout", icon: "fa-th-large", children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/card", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Card" }), _jsx(LinkButton, { to: "/docs/datafield", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DataField" }), _jsx(LinkButton, { to: "/docs/tabsgroup", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "TabsGroup" }), _jsx(LinkButton, { to: "/docs/datatable", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DataTable" }), _jsx(LinkButton, { to: "/docs/accordion", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Accordion" }), _jsx(LinkButton, { to: "/docs/menu", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Menu" }), _jsx(LinkButton, { to: "/docs/dropdownmenu", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DropdownMenu" }), _jsx(LinkButton, { to: "/docs/dropdownpanel", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "DropdownPanel" }), _jsx(LinkButton, { to: "/docs/filter", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Filter" })] }) }), _jsx(Accordion, { title: "Utils", icon: "fa-tools", children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/badge", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Badge" }), _jsx(LinkButton, { to: "/docs/avatar", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Avatar" }), _jsx(LinkButton, { to: "/docs/roadmap", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "RoadMap" }), _jsx(LinkButton, { to: "/docs/dialog", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Dialog" }), _jsx(LinkButton, { to: "/docs/loader", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Loader" }), _jsx(LinkButton, { to: "/docs/snackbar", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Snackbar" }), _jsx(LinkButton, { to: "/docs/theme", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "ThemeSwitcher" })] }) }), _jsx(Accordion, { title: "Contexts", icon: "fa-database", children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/auth", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "AuthContext" }), _jsx(LinkButton, { to: "/docs/listcrud", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "CrudContext" })] }) }), _jsx(Accordion, { title: "Otros", icon: "fa-folder", children: _jsxs("div", { className: "space-y-2", children: [_jsx(LinkButton, { to: "/docs/example-form", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Formulario de Ejemplo" }), _jsx(LinkButton, { to: "/docs/admin", variant: "ghost", size: "sm", className: "w-full justify-start", color: "secondary", children: "Admin (Mock Services)" })] }) })] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"DocsRouter.d.ts","sourceRoot":"","sources":["../../src/docs/DocsRouter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA+B1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAkC9B,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"DocsRouter.d.ts","sourceRoot":"","sources":["../../src/docs/DocsRouter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiC1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAqC9B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/docs/DocsRouter.js

@@ -20,16 +20,18 @@ import PaginationDocs from "./PaginationDocs";
 import LoaderDocs from "./LoaderDocs";
 import DataTableDocs from "./DataTableDocs";
 import DropdownMenuDocs from "./DropdownMenuDocs";
+import DropdownPanelDocs from "./DropdownPanelDocs";
 import FilterDocs from "./FilterDocs";
 import { AuthDocs } from "./AuthDocs.tsx/AuthDocs";
 import { ListCrudDocs } from "./ListCrudDocs.tsx/ListCrudDocs";
 import ExampleFormDocs from "./ExampleFormDocs";
 import CheckboxDocs from "./CheckboxDocs";
 import RadioButtonGroupDocs from "./RadioButtonGroupDocs";
+import MenuDocs from "./MenuDocs";
 import SnackbarDocs from "./SnackbarDocs";
 import AccordionDocs from "./AccordionDocs";
 import DocAdmin from "./DocAdmin";
 export const DocsRouter = () => {
-    return (_jsxs(Routes, { children: [_jsx(Route, { path: "", element: _jsx(Navigate, { to: "button", replace: true }) }), _jsx(Route, { path: "button", element: _jsx(ButtonDocs, {}) }), _jsx(Route, { path: "linkbutton", element: _jsx(LinkButtonDocs, {}) }), _jsx(Route, { path: "badge", element: _jsx(BadgeDocs, {}) }), _jsx(Route, { path: "avatar", element: _jsx(AvatarDocs, {}) }), _jsx(Route, { path: "roadmap", element: _jsx(RoadMapDocs, {}) }), _jsx(Route, { path: "card", element: _jsx(CardDocs, {}) }), _jsx(Route, { path: "input", element: _jsx(InputDocs, {}) }), _jsx(Route, { path: "autocomplete-input", element: _jsx(AutocompleteInputDocs, {}) }), _jsx(Route, { path: "search-select-input", element: _jsx(SearchSelectInputDocs, {}) }), _jsx(Route, { path: "datepicker", element: _jsx(DatePickerDocs, {}) }), _jsx(Route, { path: "dateinput", element: _jsx(DateInputDocs, {}) }), _jsx(Route, { path: "checkbox", element: _jsx(CheckboxDocs, {}) }), _jsx(Route, { path: "radiobuttongroup", element: _jsx(RadioButtonGroupDocs, {}) }), _jsx(Route, { path: "theme", element: _jsx(ThemeSwitcherDocs, {}) }), _jsx(Route, { path: "datafield", element: _jsx(DataFieldDocs, {}) }), _jsx(Route, { path: "tabsgroup", element: _jsx(TabsGroupDocs, {}) }), _jsx(Route, { path: "dialog", element: _jsx(DialogDocs, {}) }), _jsx(Route, { path: "pagination", element: _jsx(PaginationDocs, {}) }), _jsx(Route, { path: "loader", element: _jsx(LoaderDocs, {}) }), _jsx(Route, { path: "datatable", element: _jsx(DataTableDocs, {}) }), _jsx(Route, { path: "dropdownmenu", element: _jsx(DropdownMenuDocs, {}) }), _jsx(Route, { path: "filter", element: _jsx(FilterDocs, {}) }), _jsx(Route, { path: "auth", element: _jsx(AuthDocs, {}) }), _jsx(Route, { path: "listcrud", element: _jsx(ListCrudDocs, {}) }), _jsx(Route, { path: "example-form", element: _jsx(ExampleFormDocs, {}) }), _jsx(Route, { path: "snackbar", element: _jsx(SnackbarDocs, {}) }), _jsx(Route, { path: "accordion", element: _jsx(AccordionDocs, {}) }), _jsx(Route, { path: "admin", element: _jsx(DocAdmin, {}) })] }));
+    return (_jsxs(Routes, { children: [_jsx(Route, { path: "", element: _jsx(Navigate, { to: "button", replace: true }) }), _jsx(Route, { path: "button", element: _jsx(ButtonDocs, {}) }), _jsx(Route, { path: "linkbutton", element: _jsx(LinkButtonDocs, {}) }), _jsx(Route, { path: "badge", element: _jsx(BadgeDocs, {}) }), _jsx(Route, { path: "avatar", element: _jsx(AvatarDocs, {}) }), _jsx(Route, { path: "roadmap", element: _jsx(RoadMapDocs, {}) }), _jsx(Route, { path: "card", element: _jsx(CardDocs, {}) }), _jsx(Route, { path: "input", element: _jsx(InputDocs, {}) }), _jsx(Route, { path: "autocomplete-input", element: _jsx(AutocompleteInputDocs, {}) }), _jsx(Route, { path: "search-select-input", element: _jsx(SearchSelectInputDocs, {}) }), _jsx(Route, { path: "datepicker", element: _jsx(DatePickerDocs, {}) }), _jsx(Route, { path: "dateinput", element: _jsx(DateInputDocs, {}) }), _jsx(Route, { path: "checkbox", element: _jsx(CheckboxDocs, {}) }), _jsx(Route, { path: "radiobuttongroup", element: _jsx(RadioButtonGroupDocs, {}) }), _jsx(Route, { path: "theme", element: _jsx(ThemeSwitcherDocs, {}) }), _jsx(Route, { path: "datafield", element: _jsx(DataFieldDocs, {}) }), _jsx(Route, { path: "tabsgroup", element: _jsx(TabsGroupDocs, {}) }), _jsx(Route, { path: "dialog", element: _jsx(DialogDocs, {}) }), _jsx(Route, { path: "pagination", element: _jsx(PaginationDocs, {}) }), _jsx(Route, { path: "loader", element: _jsx(LoaderDocs, {}) }), _jsx(Route, { path: "datatable", element: _jsx(DataTableDocs, {}) }), _jsx(Route, { path: "dropdownmenu", element: _jsx(DropdownMenuDocs, {}) }), _jsx(Route, { path: "dropdownpanel", element: _jsx(DropdownPanelDocs, {}) }), _jsx(Route, { path: "filter", element: _jsx(FilterDocs, {}) }), _jsx(Route, { path: "auth", element: _jsx(AuthDocs, {}) }), _jsx(Route, { path: "listcrud/empresa/:id", element: _jsx(ListCrudDocs, {}) }), _jsx(Route, { path: "listcrud", element: _jsx(ListCrudDocs, {}) }), _jsx(Route, { path: "example-form", element: _jsx(ExampleFormDocs, {}) }), _jsx(Route, { path: "menu", element: _jsx(MenuDocs, {}) }), _jsx(Route, { path: "snackbar", element: _jsx(SnackbarDocs, {}) }), _jsx(Route, { path: "accordion", element: _jsx(AccordionDocs, {}) }), _jsx(Route, { path: "admin", element: _jsx(DocAdmin, {}) })] }));
 };
 export default DocsRouter;

package/dist/docs/DropdownPanelDocs.d.ts

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

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

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

package/dist/docs/DropdownPanelDocs.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Card, DropdownPanel, Button } from "../index";
+const DropdownPanelDocs = () => {
+    return (_jsx("div", { className: "max-w-5xl mx-auto space-y-8", children: _jsx(Card, { title: "DropdownPanel - Panel Flotante Gen\u00E9rico", 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: "Uso b\u00E1sico" }), _jsx("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "El componente DropdownPanel muestra un panel flotante con contenido arbitrario (children). A diferencia de DropdownMenu, no maneja una lista de opciones, sino que renderiza lo que le pases." }), _jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(DropdownPanel, { children: _jsxs("div", { className: "p-4 w-64", children: [_jsx("h4", { className: "font-bold mb-2", children: "Contenido del panel" }), _jsx("p", { className: "text-sm", children: "Aqu\u00ED puedes poner cualquier cosa: texto, im\u00E1genes, componentes, formularios, etc." })] }) }), _jsx("div", { className: "text-sm text-[var(--flysoft-text-secondary)]", children: "<- Click en los tres puntos para ver el panel" })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Con renderNode personalizado" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Puedes personalizar el disparador (trigger) usando la prop", " ", _jsx("code", { children: "renderNode" }), "."] }), _jsx("div", { className: "space-y-4", children: _jsx(DropdownPanel, { renderNode: _jsx(Button, { variant: "primary", icon: "fa-filter", children: "Filtros Avanzados" }), children: _jsxs("div", { className: "p-4 w-80 space-y-4", children: [_jsx("h4", { className: "font-bold border-b pb-2", children: "Configuraci\u00F3n de Filtros" }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm mb-1", children: "Buscar por nombre" }), _jsx("input", { type: "text", className: "w-full p-2 border rounded", placeholder: "Escribe..." })] }), _jsx("div", { className: "flex justify-end pt-2", children: _jsx(Button, { variant: "primary", size: "sm", children: "Aplicar" }) })] }) }) })] }), _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: "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 a mostrar dentro del panel flotante." })] }), _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: "renderNode" }), _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: "Elemento personalizado que activa el panel. Si no se proporciona, se muestra un bot\u00F3n ghost con tres puntos." })] })] })] }) })] })] }) }) }));
+};
+export default DropdownPanelDocs;

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

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

package/dist/docs/FilterDocs.js

@@ -107,6 +107,24 @@ const FilterDocs = () => {
                                                     paramName: "ejemplo2",
                                                     label: "Ejemplo 2",
                                                 },
-                                            ] }), _jsxs("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: "Query parameters actuales:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: searchParams.toString() || "ninguno" })] }), _jsx("p", { className: "text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: "\uD83D\uDCA1 Configura los filtros en el dialog y observa c\u00F3mo la URL no cambia hasta que hagas clic en \"Aplicar filtros\"." })] })] }) })] })] }) }) }));
+                                            ] }), _jsxs("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: "Query parameters actuales:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: searchParams.toString() || "ninguno" })] }), _jsx("p", { className: "text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: "\uD83D\uDCA1 Configura los filtros en el dialog y observa c\u00F3mo la URL no cambia hasta que hagas clic en \"Aplicar filtros\"." })] })] }) })] }), _jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Search y FiltersDialog Combinados" }), _jsxs("p", { className: "mb-4 text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Una disposici\u00F3n com\u00FAn es tener una b\u00FAsqueda r\u00E1pida a la izquierda y filtros avanzados a la derecha. Esto se logra f\u00E1cilmente con un contenedor flex y ", _jsx("code", { children: "justify-between" }), "."] }), _jsx(Card, { title: "Barra de herramientas combinada", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs(Collection, { direction: "row", children: [_jsx(Filter, { paramName: "busquedaGlobal", label: "Buscar...", filterType: "search", inputWidth: "300px" }), _jsx(Filter, { paramName: "filtroFecha", label: "Fecha", filterType: "date", inputWidth: "300px", hideEmpty: true }), _jsx(Filter, { paramName: "filtroEstado", label: "Estado", filterType: "autocomplete", inputWidth: "300px", hideEmpty: true, options: [
+                                                                { label: "Activo", value: "active" },
+                                                                { label: "Inactivo", value: "inactive" },
+                                                            ] })] }), _jsx(FiltersDialog, { filters: [
+                                                        {
+                                                            filterType: "date",
+                                                            paramName: "filtroFecha",
+                                                            label: "Fecha",
+                                                        },
+                                                        {
+                                                            filterType: "autocomplete",
+                                                            paramName: "filtroEstado",
+                                                            label: "Estado",
+                                                            options: [
+                                                                { label: "Activo", value: "active" },
+                                                                { label: "Inactivo", value: "inactive" },
+                                                            ],
+                                                        },
+                                                    ] })] }), _jsxs("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: "Query parameters actuales:" }), " ", _jsx("span", { style: { color: "var(--flysoft-text-secondary)" }, children: searchParams.toString() || "ninguno" })] }), _jsx("p", { className: "text-xs mt-2", style: { color: "var(--flysoft-text-secondary)" }, children: "\uD83D\uDCA1 Prueba escribir en el buscador (aplica inmediato) y luego usar los filtros avanzados (aplica al aceptar). Ambos coexisten en la URL." })] })] }) })] })] }) }) }));
 };
 export default FilterDocs;

package/dist/docs/ListCrudDocs.tsx/ListCrudDocs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListCrudDocs.d.ts","sourceRoot":"","sources":["../../../src/docs/ListCrudDocs.tsx/ListCrudDocs.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY,+CA6CxB,CAAC"}
+{"version":3,"file":"ListCrudDocs.d.ts","sourceRoot":"","sources":["../../../src/docs/ListCrudDocs.tsx/ListCrudDocs.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,YAAY,+CA6ExB,CAAC"}

package/dist/docs/ListCrudDocs.tsx/ListCrudDocs.js

@@ -1,29 +1,41 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { useAppLayout } from "../../contexts";
-import { ListCrudProvider } from "../../contexts/ListCrudContext";
+import { CrudProvider } from "../../contexts/CrudContext";
 import { empresaService, personaService, } from "../docMockServices";
 import { ListCrudDocsContentPersonas } from "./ListCrudDocsContentPersonas";
-import { Collection } from "../../components";
+import { Collection, TabPanel, TabsGroup } from "../../components";
 import { ListCrudDocsContentEmpresas } from "./ListCrudDocsContentEmpresas";
+import { useParams } from "react-router-dom";
+import { ListCrudDocsContentEmpresaSingle } from "./ListCrudDocsContentEmpresaSingle";
 export const ListCrudDocs = () => {
     const { listarPaginados, eliminar, editar, agregar } = personaService;
-    const { listarPaginados: listarPaginadosEmpresa } = empresaService;
+    const { listarPaginados: listarPaginadosEmpresa, buscarPorId, editar: editarEmpresa, eliminar: eliminarEmpresa, } = empresaService;
     const { setNavBarLeftNode } = useAppLayout();
     useEffect(() => {
-        setNavBarLeftNode(_jsx("h3", { className: "text-2xl font-semibold", children: "ListCrudContext" }));
+        setNavBarLeftNode(_jsx("h3", { className: "text-2xl font-semibold", children: "CrudContext" }));
         return () => {
             setNavBarLeftNode(_jsx(_Fragment, {}));
         };
     }, [setNavBarLeftNode]);
-    return (_jsxs(Collection, { children: [_jsx(ListCrudProvider, { getPromise: listarPaginados, postPromise: {
-                    execute: (persona) => agregar(persona),
-                    successMessage: "Persona agregada correctamente",
-                }, putPromise: {
-                    execute: (persona) => editar(persona.id, persona),
-                    successMessage: "Cambios guardados",
-                }, deletePromise: {
-                    execute: eliminar,
-                    successMessage: "Persona eliminada correctamente",
-                }, urlParams: ["filtro", "idEmpresa"], children: _jsx(ListCrudDocsContentPersonas, {}) }), _jsx(ListCrudProvider, { getPromise: listarPaginadosEmpresa, urlParams: ["filtroEmpresa", "idEmpresaEmpresa"], children: _jsx(ListCrudDocsContentEmpresas, {}) })] }));
+    const { id } = useParams();
+    return (_jsx(Collection, { children: _jsxs(TabsGroup, { tabs: [
+                { id: "personas", label: "Personas" },
+                { id: "empresas", label: "Empresas" },
+            ], paramName: "tab", children: [_jsx(TabPanel, { tabId: "personas", children: _jsx(CrudProvider, { getPromise: listarPaginados, postPromise: {
+                            execute: agregar,
+                            successMessage: "Persona agregada correctamente",
+                        }, putPromise: {
+                            execute: (persona) => editar(persona.id, persona),
+                            successMessage: "Cambios guardados",
+                        }, deletePromise: {
+                            execute: eliminar,
+                            successMessage: "Persona eliminada correctamente",
+                        }, urlParams: ["filtro", "idEmpresa"], children: _jsx(ListCrudDocsContentPersonas, {}) }) }), _jsx(TabPanel, { tabId: "empresas", children: _jsx(CrudProvider, { getPromise: listarPaginadosEmpresa, putPromise: {
+                            execute: (empresa) => editarEmpresa(empresa.id, empresa),
+                            successMessage: "Cambios guardados",
+                        }, deletePromise: {
+                            execute: eliminarEmpresa,
+                            successMessage: "Persona eliminada correctamente",
+                        }, getItemPromise: (params) => buscarPorId(params?.toString() || ""), pageParam: "paginaEmpresa", urlParams: ["filtroEmpresa", "idEmpresaEmpresa"], singleItemId: id, children: id ? (_jsx(ListCrudDocsContentEmpresaSingle, {})) : (_jsx(ListCrudDocsContentEmpresas, {})) }) })] }) }));
 };

package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresaPersonas.d.ts

@@ -0,0 +1,2 @@
+export declare const ListCrudDocsContentEmpresaPersonas: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ListCrudDocsContentEmpresaPersonas.d.ts.map

package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresaPersonas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListCrudDocsContentEmpresaPersonas.d.ts","sourceRoot":"","sources":["../../../src/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresaPersonas.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,kCAAkC,+CAsG9C,CAAC"}

package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresaPersonas.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Card, DataTable, Dialog, Loader } from "../../components";
+import { useCrud } from "../../contexts";
+import { ListCrudDocsContentEmpresasPersonasEditDialog } from "./ListCrudDocsContentEmpresasPersonasEditDialog";
+export const ListCrudDocsContentEmpresaPersonas = () => {
+    const { list, fetchItems, deleteItem } = useCrud();
+    const [isOpenEditDialog, setIsOpenEditDialog] = useState(false);
+    const [isOpenEliminarDialog, setIsOpenEliminarDialog] = useState(false);
+    const [selectedPersonaEmpresa, setSelectedPersonaEmpresa] = useState();
+    const onEditPersonaEmpresa = (personaEmpresa) => {
+        setSelectedPersonaEmpresa(personaEmpresa);
+        setIsOpenEditDialog(true);
+    };
+    const onEliminarPersonaEmpresa = (personaEmpresa) => {
+        setSelectedPersonaEmpresa(personaEmpresa);
+        setIsOpenEliminarDialog(true);
+    };
+    const onDeletePersonaSubmit = async () => {
+        await deleteItem.execute(selectedPersonaEmpresa);
+        setIsOpenEliminarDialog(false);
+        await fetchItems.execute();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { title: "Personas", headerActions: _jsx(Button, { icon: "fa-plus", onClick: () => onEditPersonaEmpresa(undefined), children: "Agregar Persona" }), alwaysDisplayHeaderActions: true, children: _jsx(DataTable, { isLoading: fetchItems.isLoading, columns: [
+                        { header: "Nombre", value: (row) => row.persona.nombre },
+                        { header: "Cargo", value: (row) => row.cargo },
+                        {
+                            actions: (row) => [
+                                _jsx(Button, { icon: "fa-edit", onClick: () => onEditPersonaEmpresa(row), variant: "ghost", children: " Editar " }),
+                                _jsx(Button, { icon: "fa-trash", onClick: () => onEliminarPersonaEmpresa(row), variant: "ghost", children: " Eliminar " })
+                            ]
+                        }
+                    ], rows: list || [] }) }), isOpenEditDialog && (_jsx(ListCrudDocsContentEmpresasPersonasEditDialog, { isOpen: isOpenEditDialog, onClose: () => setIsOpenEditDialog(false), personaEmpresa: selectedPersonaEmpresa, personasEnEmpresa: list || [] })), isOpenEliminarDialog && (_jsxs(Dialog, { isOpen: isOpenEliminarDialog, title: "Eliminar Persona", onClose: () => setIsOpenEliminarDialog(false), footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => setIsOpenEliminarDialog(false), disabled: deleteItem.isLoading, children: "Cancelar" }), _jsx(Button, { onClick: onDeletePersonaSubmit, disabled: deleteItem.isLoading, children: "Eliminar" })] }), children: [_jsx("p", { children: "\u00BFEst\u00E1s seguro de querer eliminar esta persona?" }), _jsx(Loader, { isLoading: deleteItem.isLoading })] }))] }));
+};

package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresaSingle.d.ts

@@ -0,0 +1,2 @@
+export declare const ListCrudDocsContentEmpresaSingle: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ListCrudDocsContentEmpresaSingle.d.ts.map

package/dist/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresaSingle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListCrudDocsContentEmpresaSingle.d.ts","sourceRoot":"","sources":["../../../src/docs/ListCrudDocs.tsx/ListCrudDocsContentEmpresaSingle.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,gCAAgC,+CAgK5C,CAAC"}