@codeplex-sac/layout 0.0.5 → 0.0.7

package/lib/barra-lateral/barra-lateral.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { CodeplexInfoUsuario } from '../cabecera/cabecera';
 export interface CodeplexElementoMenuLateral {
     id: string;
-    etiqueta: string;
+    etiqueta: React.ReactNode;
     icono?: React.ReactNode;
     href?: string;
     activo?: boolean;
@@ -10,6 +10,7 @@ export interface CodeplexElementoMenuLateral {
     insignia?: string;
     hijos?: CodeplexElementoMenuLateral[];
     alHacerClick?: () => void;
+    tipo?: 'item' | 'seccion' | 'divisor';
 }
 export interface CodeplexBarraLateralProps {
     elementos: CodeplexElementoMenuLateral[];

package/lib/caja/caja.d.ts

@@ -1,20 +1,63 @@
 import { BoxProps as MuiBoxProps } from '@mui/material';
+export type CodeplexCajaVariante = 'predeterminado' | 'bordeado' | 'sombreado' | 'vidrio' | 'gradiente';
+export type CodeplexCajaValidacion = 'error' | 'exito' | 'advertencia' | 'info';
 export interface CodeplexCajaProps extends MuiBoxProps {
     /**
-     * Acceso directo para hacer que la caja sea un contenedor flexible centrado (vertical y horizontal).
+     * Variante visual de la caja.
+     * - `predeterminado`: Sin estilos especiales.
+     * - `bordeado`: Con borde sutil.
+     * - `sombreado`: Con sombra elevada.
+     * - `vidrio`: Efecto Glassmorphism (requiere fondo detrás).
+     * - `gradiente`: Fondo con degradado sutil.
+     * @default 'predeterminado'
+     */
+    variante?: CodeplexCajaVariante;
+    /**
+     * Estado de validación para dar feedback visual (borde de color).
+     */
+    validacion?: CodeplexCajaValidacion;
+    /**
+     * Centra el contenido vertical y horizontalmente (display: flex).
      */
     centrado?: boolean;
     /**
-     * Acceso directo para establecer width: 100vw y height: 100vh.
+     * Ocupa todo el ancho y alto de la ventana visible (100vw, 100vh).
      */
     pantallaCompleta?: boolean;
     /**
-     * Acceso directo para display: 'flex', flexDirection: 'row'.
+     * Configura flex-direction: row y display: flex.
      */
     flexFila?: boolean;
     /**
-      * Acceso directo para display: 'flex', flexDirection: 'column'.
-      */
+     * Configura flex-direction: column y display: flex.
+     */
     flexColumna?: boolean;
+    /**
+     * Color de fondo personalizado (acepta valores del tema, ej: 'primary.main').
+     */
+    colorFondo?: string;
+    /**
+     * Color de texto personalizado (acepta valores del tema).
+     */
+    colorTexto?: string;
+    /**
+     * Relleno interno (Padding). Shortcut para `p`.
+     */
+    relleno?: MuiBoxProps['p'];
+    /**
+     * Margen externo (Margin). Shortcut para `m`.
+     */
+    margen?: MuiBoxProps['m'];
+    /**
+     * Borde redondeado. Shortcut para `borderRadius`.
+     */
+    redondeado?: MuiBoxProps['borderRadius'];
+    /**
+     * Configuración de interacciones al pasar el mouse.
+     */
+    alFlotar?: {
+        elevar?: boolean;
+        escalar?: boolean;
+    };
 }
-export declare const CodeplexCaja: ({ centrado, pantallaCompleta, flexFila, flexColumna, sx, ...props }: CodeplexCajaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeplexCaja: import('react').ForwardRefExoticComponent<Omit<CodeplexCajaProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/lib/cuadricula/cuadricula.d.ts

@@ -1,35 +1,41 @@
 import { GridProps as MuiGridProps } from '@mui/material';
-import { ElementType } from 'react';
-export interface CodeplexCuadriculaProps extends Omit<MuiGridProps, 'container' | 'item' | 'spacing' | 'direction' | 'wrap'> {
+export type CodeplexCuadriculaDireccion = 'fila' | 'columna' | 'fila-reversa' | 'columna-reversa';
+export type CodeplexCuadriculaEnvoltorio = 'envolver' | 'no-envolver' | 'envolver-reversa';
+export type CodeplexCuadriculaAlineacion = 'inicio' | 'centro' | 'fin' | 'estirar' | 'linea-base';
+export type CodeplexCuadriculaJustificacion = 'inicio' | 'centro' | 'fin' | 'entre' | 'alrededor' | 'uniforme';
+export interface CodeplexCuadriculaProps extends Omit<MuiGridProps, 'container' | 'item' | 'spacing' | 'direction' | 'wrap' | 'alignItems' | 'justifyContent'> {
     /**
-     * Si es true, el componente se comportará como un contenedor de cuadrícula.
+     * Si es true, el componente se comportará como un contenedor de cuadrícula (Grid Container).
      */
     contenedor?: boolean;
     /**
-     * Si es true, el componente se comportará como un elemento de cuadrícula.
+     * Si es true, el componente se comportará como un elemento de cuadrícula (Grid Item).
      */
     elemento?: boolean;
     /**
-     * Define el espacio entre los elementos.
+     * Define el espacio entre los elementos (solo para contenedor).
      */
     espaciado?: MuiGridProps['spacing'];
     /**
-     * Define la dirección del flex-container.
+     * Define la dirección del flex-container (solo para contenedor).
      */
-    direccion?: MuiGridProps['direction'];
+    direccion?: CodeplexCuadriculaDireccion;
     /**
-     * Define si los elementos deben envolverse o no.
+     * Define si los elementos deben envolverse (solo para contenedor).
      */
-    envolver?: MuiGridProps['wrap'];
+    envolver?: CodeplexCuadriculaEnvoltorio;
     /**
-     * Si es true (y contenedor es true), centra los elementos mediante justifyContent="center" y alignItems="center".
+     * Alineación vertical de los elementos (align-items).
      */
-    centrado?: boolean;
+    alineacion?: CodeplexCuadriculaAlineacion;
     /**
-     * El componente utilizado para el nodo raíz.
-     * Puede ser una cadena HTML o un componente.
+     * Alineación horizontal de los elementos (justify-content).
      */
-    component?: ElementType;
+    justificacion?: CodeplexCuadriculaJustificacion;
+    /**
+     * Si es true (y contenedor es true), centra los elementos mediante justificacion="centro" y alineacion="centro".
+     */
+    centrado?: boolean;
     /**
      * Definir el número de columnas (de 1 a 12) para el breakpoint xs.
      */
@@ -46,9 +52,19 @@ export interface CodeplexCuadriculaProps extends Omit<MuiGridProps, 'container'
      * Definir el número de columnas (de 1 a 12) para el breakpoint lg.
      */
     lg?: boolean | number | 'auto';
+    /**
+     * Definir el número de columnas (de 1 a 12) para el breakpoint xl.
+     */
     /**
      * Definir el número de columnas (de 1 a 12) para el breakpoint xl.
      */
     xl?: boolean | number | 'auto';
+    /**
+     * Propiedad unificada para definir el tamaño de la columna (Grid v2).
+     * Puede ser un número (1-12) o un objeto con breakpoints { xs: 12, md: 6 }.
+     */
+    tamano?: number | {
+        [key in 'xs' | 'sm' | 'md' | 'lg' | 'xl']?: boolean | number | 'auto';
+    };
 }
-export declare const CodeplexCuadricula: ({ contenedor, elemento, espaciado, direccion, envolver, centrado, sx, component, ...props }: CodeplexCuadriculaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeplexCuadricula: import('react').ForwardRefExoticComponent<Omit<CodeplexCuadriculaProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/lib/esqueleto/esqueleto.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+import { CodeplexCabeceraProps } from '../cabecera/cabecera';
+import { CodeplexBarraLateralProps } from '../barra-lateral/barra-lateral';
+import { CodeplexPiePaginaProps } from '../pie-pagina/pie-pagina';
+export interface CodeplexEsqueletoProps {
+    /** Elementos del menú lateral */
+    menu: CodeplexBarraLateralProps['elementos'];
+    /** Información del usuario */
+    usuario?: CodeplexBarraLateralProps['usuario'];
+    /** Configuración adicional del sidebar */
+    sidebarProps?: Partial<CodeplexBarraLateralProps>;
+    /** Configuración adicional del header */
+    headerProps?: Partial<CodeplexCabeceraProps>;
+    /** Configuración adicional del footer */
+    footerProps?: Partial<CodeplexPiePaginaProps>;
+    /** Título de la aplicación */
+    titulo?: string;
+    /** Logo de la aplicación */
+    logo?: string;
+    /** Contenido principal */
+    children: React.ReactNode;
+    /** Callback al navegar */
+    alNavegar?: (href: string) => void;
+}
+/**
+ * Componente CodeplexEsqueleto.
+ * Proporciona una estructura de página preconfigurada con Sidebar, Header y Footer.
+ * Gestiona automáticamente el estado de colapsado y los márgenes responsivos.
+ */
+export declare const CodeplexEsqueleto: ({ menu, usuario, sidebarProps, headerProps, footerProps, titulo, logo, children, alNavegar, }: CodeplexEsqueletoProps) => import("react/jsx-runtime").JSX.Element;

package/lib/lista-imagenes/lista-imagenes.d.ts

@@ -3,7 +3,7 @@ export interface CodeplexListaImagenesProps extends Omit<MuiImageListProps, 'col
     columnas?: MuiImageListProps['cols'];
     altoFila?: MuiImageListProps['rowHeight'];
     espacio?: MuiImageListProps['gap'];
-    variante?: MuiImageListProps['variant'];
+    variante?: 'estandar' | 'mosaico' | 'mamposteria' | 'tejido';
 }
 export interface CodeplexElementoListaImagenesProps extends Omit<MuiImageListItemProps, 'cols' | 'rows'> {
     columnas?: MuiImageListItemProps['cols'];

package/lib/pila/pila.d.ts

@@ -1,20 +1,40 @@
 import { StackProps as MuiStackProps } from '@mui/material';
-export interface CodeplexPilaProps extends Omit<MuiStackProps, 'direction' | 'spacing'> {
+export type CodeplexPilaDireccion = 'fila' | 'columna' | 'fila-reversa' | 'columna-reversa';
+export type CodeplexPilaAlineacion = 'inicio' | 'centro' | 'fin' | 'estirar' | 'linea-base';
+export type CodeplexPilaJustificacion = 'inicio' | 'centro' | 'fin' | 'entre' | 'alrededor' | 'uniforme';
+export interface CodeplexPilaProps extends Omit<MuiStackProps, 'direction' | 'spacing' | 'alignItems' | 'justifyContent' | 'divider'> {
     /**
-     * Define la dirección de la pila.
+     * Define la dirección de la pila. Soporta valores responsivos.
+     * @default 'columna'
      */
-    direccion?: MuiStackProps['direction'] | 'fila' | 'columna' | 'fila-reversa' | 'columna-reversa';
+    direccion?: CodeplexPilaDireccion | CodeplexPilaDireccion[] | {
+        [key: string]: CodeplexPilaDireccion;
+    };
     /**
-     * Define el espaciado entre los elementos.
+     * Define el espaciado entre los elementos. Puede ser un número (factor del tema) o string (e.g. '20px').
+     * @default 0
      */
-    espaciado?: MuiStackProps['spacing'];
+    espaciado?: number | string;
     /**
-     * Centra los hijos horizontal y verticalmente.
+     * Alineación transversal de los elementos (align-items).
+     */
+    alineacion?: CodeplexPilaAlineacion;
+    /**
+     * Distribución principal de los elementos (justify-content).
+     */
+    justificacion?: CodeplexPilaJustificacion;
+    /**
+     * Si es verdadero, agrega un divisor predeterminado entre cada elemento.
+     * Si se pasa un elemento React, se usa ese elemento como divisor.
+     */
+    divisor?: boolean | React.ReactNode;
+    /**
+     * Acceso directo para centrar vertical y horizontalmente (alineacion="centro", justificacion="centro").
      */
     centrado?: boolean;
     /**
-     * Aplica justifyContent: 'space-between'
+     * Acceso directo para justificacion="entre" (justify-content: space-between).
      */
     entre?: boolean;
 }
-export declare const CodeplexPila: ({ direccion, espaciado, centrado, entre, sx, alignItems, justifyContent, ...props }: CodeplexPilaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeplexPila: import('react').ForwardRefExoticComponent<Omit<CodeplexPilaProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@codeplex-sac/layout",
-  "version": "0.0.5",
+  "version": "0.0.7",
+  "type": "module",
   "main": "./index.js",
+  "module": "./index.js",
   "types": "./index.d.ts",
   "exports": {
     ".": {
       "types": "./index.d.ts",
-      "import": "./index.mjs",
+      "import": "./index.js",
       "require": "./index.js"
     }
   },