@mp-front/components 0.0.1-next-2 → 0.0.1-next-3

package/dist/layout/header/header.component.d.ts

@@ -0,0 +1,33 @@
+import { ComponentProps } from 'react';
+/**
+ * Componente de encabezado del layout.
+ * Componente compuesto que incluye subcomponentes: LeftSide, Store, User y RightSide.
+ *
+ * @param {ComponentProps<"header">} props - Propiedades estándar de un elemento header
+ * @returns {JSX.Element} Elemento header con estilos sticky y subcomponentes adjuntos
+ *
+ * @example
+ * ```tsx
+ * import { Header } from '@/layout'
+ *
+ * <Header>
+ *   <Header.LeftSide>Logo</Header.LeftSide>
+ *   <Header.RightSide>
+ *     <Header.Store>Tienda 001</Header.Store>
+ *     <Header.User name="Juan" role="Admin" />
+ *   </Header.RightSide>
+ * </Header>
+ * ```
+ */
+declare const Header: {
+    ({ className, ...props }: ComponentProps<"header">): import("react/jsx-runtime").JSX.Element;
+    LeftSide: ({ className, ...props }: ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+    Store: ({ className, children }: import('./header.types').StoreProps) => import("react/jsx-runtime").JSX.Element;
+    User: ({ name, role, imageUrl, items }: import('./header.types').UserProps) => import("react/jsx-runtime").JSX.Element;
+    RightSide: {
+        ({ className, children }: import('./header.types').RightSideProps): import("react/jsx-runtime").JSX.Element;
+        disPlayName: string;
+    };
+};
+export { Header };
+//# sourceMappingURL=header.component.d.ts.map

package/dist/layout/header/header.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.component.d.ts","sourceRoot":"","sources":["../../../src/lib/layout/header/header.component.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAO3C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,MAAM;8BAA6B,cAAc,CAAC,QAAQ,CAAC;;;;;;;;CAUhE,CAAA;AAOD,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/layout/header/header.types.d.ts

@@ -0,0 +1,30 @@
+import { DropdownItem } from '../../components/dropdown/dropdown.types';
+import { ReactNode, ComponentProps } from 'react';
+/**
+ * Propiedades para el componente RightSide del header.
+ */
+export interface RightSideProps extends Pick<ComponentProps<"div">, "className"> {
+    /** Elementos hijos a renderizar con separadores entre ellos */
+    children: ReactNode[];
+}
+/**
+ * Propiedades para el componente Store del header.
+ */
+export interface StoreProps extends Pick<ComponentProps<"div">, "className"> {
+    /** Nombre de la tienda a mostrar */
+    children?: string;
+}
+/**
+ * Propiedades para el componente User del header.
+ */
+export interface UserProps {
+    /** Nombre del usuario */
+    name?: string;
+    /** Rol o cargo del usuario */
+    role?: string;
+    /** URL de la imagen de avatar del usuario */
+    imageUrl?: string;
+    /** Items del menú desplegable del usuario */
+    items?: DropdownItem[];
+}
+//# sourceMappingURL=header.types.d.ts.map

package/dist/layout/header/header.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.types.d.ts","sourceRoot":"","sources":["../../../src/lib/layout/header/header.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAA;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtD;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC;IAChD,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,EAAE,CAAA;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC;IAC1E,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,YAAY,EAAE,CAAA;CACvB"}

package/dist/layout/header/left-side.component.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from 'react';
+/**
+ * Componente del lado izquierdo del header.
+ * Contenedor para elementos como logos o navegación principal.
+ *
+ * @param {ComponentProps<"div">} props - Propiedades estándar de un elemento div
+ * @returns {JSX.Element} Contenedor con estilos para SVG de ancho fijo
+ *
+ * @example
+ * ```tsx
+ * import { LeftSide } from '@/layout/header'
+ *
+ * <LeftSide>
+ *   <Logo />
+ * </LeftSide>
+ * ```
+ */
+export declare const LeftSide: ({ className, ...props }: ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=left-side.component.d.ts.map

package/dist/layout/header/left-side.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"left-side.component.d.ts","sourceRoot":"","sources":["../../../src/lib/layout/header/left-side.component.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAG3C;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,QAAQ,4BAA6B,cAAc,CAAC,KAAK,CAAC,4CAEtE,CAAA"}

package/dist/layout/header/right-side.component.d.ts

@@ -0,0 +1,27 @@
+import { RightSideProps } from './header.types';
+/**
+ * Componente del lado derecho del header.
+ * Renderiza elementos hijos con separadores verticales entre ellos.
+ * Retorna null si el array de hijos está vacío.
+ *
+ * @param {RightSideProps} props - Propiedades del componente
+ * @param {string} [props.className] - Clases CSS adicionales
+ * @param {ReactNode[]} props.children - Array de elementos a renderizar
+ * @returns {JSX.Element | null} Contenedor con elementos separados o null
+ *
+ * @example
+ * ```tsx
+ * import { RightSide } from '@/layout/header'
+ *
+ * <RightSide>
+ *   <Store>Tienda 001</Store>
+ *   <User name="Juan" />
+ * </RightSide>
+ * ```
+ */
+declare const RightSide: {
+    ({ className, children }: RightSideProps): import("react/jsx-runtime").JSX.Element;
+    disPlayName: string;
+};
+export { RightSide };
+//# sourceMappingURL=right-side.component.d.ts.map

package/dist/layout/header/right-side.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"right-side.component.d.ts","sourceRoot":"","sources":["../../../src/lib/layout/header/right-side.component.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAE7D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,SAAS;8BAA6B,cAAc;;CAyBzD,CAAA;AAGD,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/layout/header/store.component.d.ts

@@ -0,0 +1,20 @@
+import { StoreProps } from './header.types';
+/**
+ * Componente de tienda del header.
+ * Muestra el nombre de la tienda actual con un icono.
+ * Retorna null si no se proporciona nombre o está vacío.
+ *
+ * @param {StoreProps} props - Propiedades del componente
+ * @param {string} [props.className] - Clases CSS adicionales
+ * @param {string} [props.children] - Nombre de la tienda
+ * @returns {JSX.Element | null} Información de la tienda o null
+ *
+ * @example
+ * ```tsx
+ * import { Store } from '@/layout/header'
+ *
+ * <Store>Tienda Central 001</Store>
+ * ```
+ */
+export declare const Store: ({ className, children }: StoreProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=store.component.d.ts.map

package/dist/layout/header/store.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.component.d.ts","sourceRoot":"","sources":["../../../src/lib/layout/header/store.component.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAA;AAIzD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK,4BAA6B,UAAU,4CAoBxD,CAAA"}

package/dist/layout/header/user.component.d.ts

@@ -0,0 +1,27 @@
+import { UserProps } from './header.types';
+/**
+ * Componente de usuario del header.
+ * Muestra información del usuario con avatar, nombre, rol y menú desplegable.
+ * Retorna null si no se proporciona nombre o está vacío.
+ *
+ * @param {UserProps} props - Propiedades del componente
+ * @param {string} [props.name] - Nombre del usuario
+ * @param {string} [props.role] - Rol o cargo del usuario
+ * @param {string} [props.imageUrl] - URL de la imagen de avatar
+ * @param {DropdownItem[]} [props.items] - Items del menú desplegable
+ * @returns {JSX.Element | null} Información del usuario con dropdown o null
+ *
+ * @example
+ * ```tsx
+ * import { User } from '@/layout/header'
+ *
+ * <User
+ *   name="Juan Pérez"
+ *   role="Administrador"
+ *   imageUrl="/avatar.jpg"
+ *   items={[{ label: 'Perfil', id: '1' }]}
+ * />
+ * ```
+ */
+export declare const User: ({ name, role, imageUrl, items }: UserProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=user.component.d.ts.map

package/dist/layout/header/user.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"user.component.d.ts","sourceRoot":"","sources":["../../../src/lib/layout/header/user.component.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGxD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,IAAI,oCAAqC,SAAS,4CAuB9D,CAAA"}

package/dist/layout/index.d.ts

@@ -0,0 +1,2 @@
+export { RootLayout } from './root-layout.component';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/layout/root-layout.component.d.ts

@@ -0,0 +1,46 @@
+import { RootLayoutProps } from './root-layout.types';
+/**
+ * Componente de layout raíz.
+ * Componente compuesto que proporciona la estructura principal del layout.
+ * Incluye subcomponentes: Header, Content y Footer.
+ * Soporta estado de carga con overlay mediante Portal.
+ *
+ * @param {RootLayoutProps} props - Propiedades del componente
+ * @param {ReactNode} props.children - Elementos hijos a renderizar
+ * @param {boolean} [props.loading] - Estado de carga que muestra un overlay
+ * @returns {JSX.Element} Contenedor principal del layout con subcomponentes adjuntos
+ *
+ * @example
+ * ```tsx
+ * import { RootLayout } from '@/layout'
+ *
+ * <RootLayout loading={false}>
+ *   <RootLayout.Header>
+ *     <div>Header</div>
+ *   </RootLayout.Header>
+ *   <RootLayout.Content>
+ *     <h1>Contenido</h1>
+ *   </RootLayout.Content>
+ *   <RootLayout.Footer>
+ *     © 2024
+ *   </RootLayout.Footer>
+ * </RootLayout>
+ * ```
+ */
+declare const RootLayout: {
+    ({ children, loading, ...props }: RootLayoutProps): import("react/jsx-runtime").JSX.Element;
+    Header: {
+        ({ className, ...props }: import('react').ComponentProps<"header">): import("react/jsx-runtime").JSX.Element;
+        LeftSide: ({ className, ...props }: import('react').ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+        Store: ({ className, children }: import('./header/header.types').StoreProps) => import("react/jsx-runtime").JSX.Element;
+        User: ({ name, role, imageUrl, items }: import('./header/header.types').UserProps) => import("react/jsx-runtime").JSX.Element;
+        RightSide: {
+            ({ className, children }: import('./header/header.types').RightSideProps): import("react/jsx-runtime").JSX.Element;
+            disPlayName: string;
+        };
+    };
+    Content: ({ className, children, ...props }: import('react').ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ className, ...props }: import('react').ComponentProps<"footer">) => import("react/jsx-runtime").JSX.Element;
+};
+export { RootLayout };
+//# sourceMappingURL=root-layout.component.d.ts.map

package/dist/layout/root-layout.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root-layout.component.d.ts","sourceRoot":"","sources":["../../src/lib/layout/root-layout.component.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAG5D;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,QAAA,MAAM,UAAU;sCAAqC,eAAe;;;;;;;;;;;;;CAanE,CAAA;AAMD,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/layout/root-layout.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { RootLayout } from './root-layout.component';
+declare const meta: Meta<typeof RootLayout>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithoutHeader: Story;
+export declare const WithoutFooter: Story;
+export declare const ContentOnly: Story;
+export declare const CompleteLayout: Story;
+export declare const EmptyLayout: Story;
+//# sourceMappingURL=root-layout.stories.d.ts.map

package/dist/layout/root-layout.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root-layout.stories.d.ts","sourceRoot":"","sources":["../../src/lib/layout/root-layout.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAGpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAajC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAY3B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KASzB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAgB5B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAA"}

package/dist/layout/root-layout.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=root-layout.test.d.ts.map

package/dist/layout/root-layout.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root-layout.test.d.ts","sourceRoot":"","sources":["../../src/lib/layout/root-layout.test.tsx"],"names":[],"mappings":""}

package/dist/layout/root-layout.types.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from 'react';
+/**
+ * Propiedades para el componente RootLayout.
+ * Extiende las propiedades estándar del elemento main.
+ */
+export interface RootLayoutProps extends ComponentProps<"main"> {
+    /** Estado de carga que muestra un overlay sobre el contenido */
+    loading?: boolean;
+}
+//# sourceMappingURL=root-layout.types.d.ts.map

package/dist/layout/root-layout.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root-layout.types.d.ts","sourceRoot":"","sources":["../../src/lib/layout/root-layout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,MAAM,CAAC;IAC7D,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB"}