pixelon 0.3.25 → 0.3.27

package/dist/components/organisms/lumi/Calendar/utils/dateUtils(1).d.ts

@@ -0,0 +1,140 @@
+/**
+ * Utilidades para manejo de fechas en el Calendar
+ */
+export declare const DAYS_IN_WEEK = 7;
+export declare const HOURS_IN_DAY = 24;
+export declare const MINUTES_IN_HOUR = 60;
+export declare const MS_IN_MINUTE: number;
+export declare const MS_IN_HOUR: number;
+export declare const MS_IN_DAY: number;
+/**
+ * Formatea una hora en formato HH:MM
+ */
+export declare const formatTime: (hour: number, minute?: number) => string;
+/**
+ * Formatea una fecha según el locale
+ */
+export declare const formatDate: (date: Date, locale?: string, options?: Intl.DateTimeFormatOptions) => string;
+/**
+ * Obtiene el nombre del mes
+ */
+export declare const getMonthName: (date: Date, locale?: string, format?: "long" | "short") => string;
+/**
+ * Obtiene el nombre del día
+ */
+export declare const getDayName: (date: Date, locale?: string, format?: "long" | "short" | "narrow") => string;
+/**
+ * Obtiene los nombres de los días de la semana
+ */
+export declare const getWeekDayNames: (locale?: string, firstDayOfWeek?: 0 | 1, format?: "long" | "short" | "narrow") => string[];
+/**
+ * Obtiene el inicio del día (00:00:00)
+ */
+export declare const startOfDay: (date: Date) => Date;
+/**
+ * Obtiene el fin del día (23:59:59)
+ */
+export declare const endOfDay: (date: Date) => Date;
+/**
+ * Obtiene el inicio de la semana
+ */
+export declare const startOfWeek: (date: Date, firstDayOfWeek?: 0 | 1) => Date;
+/**
+ * Obtiene el fin de la semana
+ */
+export declare const endOfWeek: (date: Date, firstDayOfWeek?: 0 | 1) => Date;
+/**
+ * Obtiene el inicio del mes
+ */
+export declare const startOfMonth: (date: Date) => Date;
+/**
+ * Obtiene el fin del mes
+ */
+export declare const endOfMonth: (date: Date) => Date;
+/**
+ * Obtiene el inicio del año
+ */
+export declare const startOfYear: (date: Date) => Date;
+/**
+ * Obtiene el fin del año
+ */
+export declare const endOfYear: (date: Date) => Date;
+/**
+ * Añade días a una fecha
+ */
+export declare const addDays: (date: Date, days: number) => Date;
+/**
+ * Añade semanas a una fecha
+ */
+export declare const addWeeks: (date: Date, weeks: number) => Date;
+/**
+ * Añade meses a una fecha
+ */
+export declare const addMonths: (date: Date, months: number) => Date;
+/**
+ * Añade años a una fecha
+ */
+export declare const addYears: (date: Date, years: number) => Date;
+/**
+ * Comprueba si dos fechas son el mismo día
+ */
+export declare const isSameDay: (date1: Date, date2: Date) => boolean;
+/**
+ * Comprueba si dos fechas son el mismo mes
+ */
+export declare const isSameMonth: (date1: Date, date2: Date) => boolean;
+/**
+ * Comprueba si una fecha es hoy
+ */
+export declare const isToday: (date: Date) => boolean;
+/**
+ * Comprueba si una fecha está en el pasado
+ */
+export declare const isPast: (date: Date) => boolean;
+/**
+ * Comprueba si una fecha está en el futuro
+ */
+export declare const isFuture: (date: Date) => boolean;
+/**
+ * Comprueba si una fecha está dentro de un rango
+ */
+export declare const isWithinRange: (date: Date, start: Date, end: Date) => boolean;
+/**
+ * Genera los días de una semana
+ */
+export declare const getWeekDays: (date: Date, firstDayOfWeek?: 0 | 1) => Date[];
+/**
+ * Genera los días de un mes (incluyendo días de meses adyacentes para completar semanas)
+ */
+export declare const getMonthDays: (date: Date, firstDayOfWeek?: 0 | 1) => Date[];
+/**
+ * Genera los meses de un año
+ */
+export declare const getYearMonths: (date: Date) => Date[];
+/**
+ * Convierte string o Date a Date
+ */
+export declare const toDate: (value: Date | string) => Date;
+/**
+ * Obtiene la diferencia en minutos entre dos fechas
+ */
+export declare const diffInMinutes: (date1: Date, date2: Date) => number;
+/**
+ * Obtiene la diferencia en horas entre dos fechas
+ */
+export declare const diffInHours: (date1: Date, date2: Date) => number;
+/**
+ * Obtiene la diferencia en días entre dos fechas
+ */
+export declare const diffInDays: (date1: Date, date2: Date) => number;
+/**
+ * Obtiene el rango de fechas según la vista
+ */
+export declare const getViewRange: (date: Date, view: "day" | "week" | "month" | "year", firstDayOfWeek?: 0 | 1) => {
+    start: Date;
+    end: Date;
+};
+/**
+ * Obtiene el título del rango según la vista
+ */
+export declare const getViewTitle: (date: Date, view: "day" | "week" | "month" | "year", locale?: string, firstDayOfWeek?: 0 | 1) => string;

package/dist/components/organisms/lumi/Calendar/utils/dateUtils(2).d.ts

@@ -0,0 +1,140 @@
+/**
+ * Utilidades para manejo de fechas en el Calendar
+ */
+export declare const DAYS_IN_WEEK = 7;
+export declare const HOURS_IN_DAY = 24;
+export declare const MINUTES_IN_HOUR = 60;
+export declare const MS_IN_MINUTE: number;
+export declare const MS_IN_HOUR: number;
+export declare const MS_IN_DAY: number;
+/**
+ * Formatea una hora en formato HH:MM
+ */
+export declare const formatTime: (hour: number, minute?: number) => string;
+/**
+ * Formatea una fecha según el locale
+ */
+export declare const formatDate: (date: Date, locale?: string, options?: Intl.DateTimeFormatOptions) => string;
+/**
+ * Obtiene el nombre del mes
+ */
+export declare const getMonthName: (date: Date, locale?: string, format?: "long" | "short") => string;
+/**
+ * Obtiene el nombre del día
+ */
+export declare const getDayName: (date: Date, locale?: string, format?: "long" | "short" | "narrow") => string;
+/**
+ * Obtiene los nombres de los días de la semana
+ */
+export declare const getWeekDayNames: (locale?: string, firstDayOfWeek?: 0 | 1, format?: "long" | "short" | "narrow") => string[];
+/**
+ * Obtiene el inicio del día (00:00:00)
+ */
+export declare const startOfDay: (date: Date) => Date;
+/**
+ * Obtiene el fin del día (23:59:59)
+ */
+export declare const endOfDay: (date: Date) => Date;
+/**
+ * Obtiene el inicio de la semana
+ */
+export declare const startOfWeek: (date: Date, firstDayOfWeek?: 0 | 1) => Date;
+/**
+ * Obtiene el fin de la semana
+ */
+export declare const endOfWeek: (date: Date, firstDayOfWeek?: 0 | 1) => Date;
+/**
+ * Obtiene el inicio del mes
+ */
+export declare const startOfMonth: (date: Date) => Date;
+/**
+ * Obtiene el fin del mes
+ */
+export declare const endOfMonth: (date: Date) => Date;
+/**
+ * Obtiene el inicio del año
+ */
+export declare const startOfYear: (date: Date) => Date;
+/**
+ * Obtiene el fin del año
+ */
+export declare const endOfYear: (date: Date) => Date;
+/**
+ * Añade días a una fecha
+ */
+export declare const addDays: (date: Date, days: number) => Date;
+/**
+ * Añade semanas a una fecha
+ */
+export declare const addWeeks: (date: Date, weeks: number) => Date;
+/**
+ * Añade meses a una fecha
+ */
+export declare const addMonths: (date: Date, months: number) => Date;
+/**
+ * Añade años a una fecha
+ */
+export declare const addYears: (date: Date, years: number) => Date;
+/**
+ * Comprueba si dos fechas son el mismo día
+ */
+export declare const isSameDay: (date1: Date, date2: Date) => boolean;
+/**
+ * Comprueba si dos fechas son el mismo mes
+ */
+export declare const isSameMonth: (date1: Date, date2: Date) => boolean;
+/**
+ * Comprueba si una fecha es hoy
+ */
+export declare const isToday: (date: Date) => boolean;
+/**
+ * Comprueba si una fecha está en el pasado
+ */
+export declare const isPast: (date: Date) => boolean;
+/**
+ * Comprueba si una fecha está en el futuro
+ */
+export declare const isFuture: (date: Date) => boolean;
+/**
+ * Comprueba si una fecha está dentro de un rango
+ */
+export declare const isWithinRange: (date: Date, start: Date, end: Date) => boolean;
+/**
+ * Genera los días de una semana
+ */
+export declare const getWeekDays: (date: Date, firstDayOfWeek?: 0 | 1) => Date[];
+/**
+ * Genera los días de un mes (incluyendo días de meses adyacentes para completar semanas)
+ */
+export declare const getMonthDays: (date: Date, firstDayOfWeek?: 0 | 1) => Date[];
+/**
+ * Genera los meses de un año
+ */
+export declare const getYearMonths: (date: Date) => Date[];
+/**
+ * Convierte string o Date a Date
+ */
+export declare const toDate: (value: Date | string) => Date;
+/**
+ * Obtiene la diferencia en minutos entre dos fechas
+ */
+export declare const diffInMinutes: (date1: Date, date2: Date) => number;
+/**
+ * Obtiene la diferencia en horas entre dos fechas
+ */
+export declare const diffInHours: (date1: Date, date2: Date) => number;
+/**
+ * Obtiene la diferencia en días entre dos fechas
+ */
+export declare const diffInDays: (date1: Date, date2: Date) => number;
+/**
+ * Obtiene el rango de fechas según la vista
+ */
+export declare const getViewRange: (date: Date, view: "day" | "week" | "month" | "year", firstDayOfWeek?: 0 | 1) => {
+    start: Date;
+    end: Date;
+};
+/**
+ * Obtiene el título del rango según la vista
+ */
+export declare const getViewTitle: (date: Date, view: "day" | "week" | "month" | "year", locale?: string, firstDayOfWeek?: 0 | 1) => string;

package/dist/components/organisms/lumi/Calendar/utils/index(1).d.ts

@@ -0,0 +1,2 @@
+export * from './dateUtils';
+export * from './multiDayUtils';

package/dist/components/organisms/lumi/Calendar/utils/multiDayUtils(1).d.ts

@@ -0,0 +1,73 @@
+/**
+ * Utilidades para manejo de eventos multi-día en el Calendar
+ */
+import type { CalendarEvent } from '../types';
+export interface EventSegment {
+    /** Evento original */
+    event: CalendarEvent;
+    /** Fecha de inicio del segmento */
+    segmentStart: Date;
+    /** Fecha de fin del segmento */
+    segmentEnd: Date;
+    /** ¿Es el primer segmento del evento? */
+    isStart: boolean;
+    /** ¿Es el último segmento del evento? */
+    isEnd: boolean;
+    /** Número de días que abarca este segmento */
+    spanDays: number;
+    /** Índice del día dentro de la semana (0-6) para posicionamiento */
+    startDayIndex?: number;
+}
+export interface MultiDayRow {
+    /** Eventos/segmentos en esta fila */
+    segments: (EventSegment | null)[];
+    /** Índice de la fila (para stacking) */
+    rowIndex: number;
+}
+/**
+ * Detecta si un evento abarca múltiples días
+ */
+export declare const isMultiDayEvent: (event: CalendarEvent) => boolean;
+/**
+ * Obtiene el número de días que abarca un evento
+ */
+export declare const getEventDurationInDays: (event: CalendarEvent) => number;
+/**
+ * Comprueba si un evento ocurre en un día específico
+ */
+export declare const eventOccursOnDay: (event: CalendarEvent, day: Date) => boolean;
+/**
+ * Comprueba si un evento está completamente dentro de un rango
+ */
+export declare const eventWithinRange: (event: CalendarEvent, rangeStart: Date, rangeEnd: Date) => boolean;
+/**
+ * Comprueba si un evento se superpone con un rango
+ */
+export declare const eventOverlapsRange: (event: CalendarEvent, rangeStart: Date, rangeEnd: Date) => boolean;
+/**
+ * Divide un evento multi-día en segmentos por semana
+ * Útil para vista de mes donde los eventos cruzan semanas
+ */
+export declare const splitEventByWeeks: (event: CalendarEvent, weekDays: Date[]) => EventSegment[];
+/**
+ * Obtiene los días que ocupa un evento en un rango dado
+ */
+export declare const getEventDaysInRange: (event: CalendarEvent, rangeStart: Date, rangeEnd: Date) => Date[];
+/**
+ * Organiza eventos multi-día en filas para evitar superposiciones
+ * Retorna un array de filas donde cada fila contiene eventos que no se superponen
+ */
+export declare const layoutMultiDayEvents: (events: CalendarEvent[], weekDays: Date[]) => MultiDayRow[];
+/**
+ * Obtiene eventos de un solo día (no multi-día y no all-day)
+ * Útil para filtrar eventos que se muestran en el timeline
+ */
+export declare const getSingleDayEvents: (events: CalendarEvent[]) => CalendarEvent[];
+/**
+ * Obtiene eventos all-day y multi-día
+ */
+export declare const getAllDayAndMultiDayEvents: (events: CalendarEvent[]) => CalendarEvent[];
+/**
+ * Formatea el rango de fechas de un evento multi-día
+ */
+export declare const formatEventDateRange: (event: CalendarEvent, locale?: string) => string;

package/dist/components/organisms/lumi/Calendar/views/DayView(1).d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { CalendarEvent as CalendarEventType, SlotInfo, EventColorConfig, EventRenderProps } from "../types";
+interface DayViewProps {
+    date: Date;
+    events: CalendarEventType[];
+    dayStartHour: number;
+    dayEndHour: number;
+    slotInterval: 15 | 30 | 60;
+    eventColors?: EventColorConfig;
+    showNowIndicator?: boolean;
+    locale?: string;
+    onEventClick?: (event: CalendarEventType, e: React.MouseEvent) => void;
+    onSlotClick?: (slotInfo: SlotInfo) => void;
+    renderEvent?: (props: EventRenderProps) => React.ReactNode;
+}
+export declare const DayView: React.FC<DayViewProps>;
+export {};

package/dist/components/organisms/lumi/Calendar/views/DayView(2).d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { CalendarEvent as CalendarEventType, SlotInfo, EventColorConfig, EventRenderProps } from "../types";
+interface DayViewProps {
+    date: Date;
+    events: CalendarEventType[];
+    dayStartHour: number;
+    dayEndHour: number;
+    slotInterval: 15 | 30 | 60;
+    eventColors?: EventColorConfig;
+    showNowIndicator?: boolean;
+    locale?: string;
+    onEventClick?: (event: CalendarEventType, e: React.MouseEvent) => void;
+    onSlotClick?: (slotInfo: SlotInfo) => void;
+    renderEvent?: (props: EventRenderProps) => React.ReactNode;
+}
+export declare const DayView: React.FC<DayViewProps>;
+export {};

package/dist/components/organisms/lumi/Calendar/views/MonthView(1).d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { CalendarEvent as CalendarEventType, CalendarLabels, SlotInfo, EventColorConfig } from "../types";
+interface MonthViewProps {
+    date: Date;
+    events: CalendarEventType[];
+    firstDayOfWeek: 0 | 1;
+    nonWorkingDays: number[];
+    maxEventsPerCell: number;
+    eventColors?: EventColorConfig;
+    locale?: string;
+    labels?: CalendarLabels;
+    onEventClick?: (event: CalendarEventType, e: React.MouseEvent) => void;
+    onSlotClick?: (slotInfo: SlotInfo) => void;
+    onDateChange?: (date: Date) => void;
+}
+export declare const MonthView: React.FC<MonthViewProps>;
+export {};

package/dist/components/organisms/lumi/Calendar/views/MonthView(2).d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { CalendarEvent as CalendarEventType, CalendarLabels, SlotInfo, EventColorConfig } from "../types";
+interface MonthViewProps {
+    date: Date;
+    events: CalendarEventType[];
+    firstDayOfWeek: 0 | 1;
+    nonWorkingDays: number[];
+    maxEventsPerCell: number;
+    eventColors?: EventColorConfig;
+    locale?: string;
+    labels?: CalendarLabels;
+    onEventClick?: (event: CalendarEventType, e: React.MouseEvent) => void;
+    onSlotClick?: (slotInfo: SlotInfo) => void;
+    onDateChange?: (date: Date) => void;
+}
+export declare const MonthView: React.FC<MonthViewProps>;
+export {};

package/dist/components/organisms/lumi/Calendar/views/WeekView(1).d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { CalendarEvent as CalendarEventType, SlotInfo, EventColorConfig, EventRenderProps } from '../types';
+interface WeekViewProps {
+    date: Date;
+    events: CalendarEventType[];
+    dayStartHour: number;
+    dayEndHour: number;
+    slotInterval: 15 | 30 | 60;
+    firstDayOfWeek: 0 | 1;
+    nonWorkingDays: number[];
+    eventColors?: EventColorConfig;
+    showNowIndicator?: boolean;
+    locale?: string;
+    onEventClick?: (event: CalendarEventType, e: React.MouseEvent) => void;
+    onSlotClick?: (slotInfo: SlotInfo) => void;
+    renderEvent?: (props: EventRenderProps) => React.ReactNode;
+}
+export declare const WeekView: React.FC<WeekViewProps>;
+export {};

package/dist/components/organisms/lumi/Calendar/views/WeekView(2).d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { CalendarEvent as CalendarEventType, SlotInfo, EventColorConfig, EventRenderProps } from '../types';
+interface WeekViewProps {
+    date: Date;
+    events: CalendarEventType[];
+    dayStartHour: number;
+    dayEndHour: number;
+    slotInterval: 15 | 30 | 60;
+    firstDayOfWeek: 0 | 1;
+    nonWorkingDays: number[];
+    eventColors?: EventColorConfig;
+    showNowIndicator?: boolean;
+    locale?: string;
+    onEventClick?: (event: CalendarEventType, e: React.MouseEvent) => void;
+    onSlotClick?: (slotInfo: SlotInfo) => void;
+    renderEvent?: (props: EventRenderProps) => React.ReactNode;
+}
+export declare const WeekView: React.FC<WeekViewProps>;
+export {};

package/dist/components/organisms/lumi/Calendar/views/YearView(1).d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { CalendarEvent as CalendarEventType } from '../types';
+interface YearViewProps {
+    date: Date;
+    events: CalendarEventType[];
+    firstDayOfWeek: 0 | 1;
+    nonWorkingDays: number[];
+    locale?: string;
+    onDateChange?: (date: Date) => void;
+    onViewChange?: (view: 'month') => void;
+}
+export declare const YearView: React.FC<YearViewProps>;
+export {};

package/dist/components/organisms/lumi/Calendar/views/index(1).d.ts

@@ -0,0 +1,4 @@
+export * from './DayView';
+export * from './WeekView';
+export * from './MonthView';
+export * from './YearView';

package/dist/components/organisms/lumi/Calendar/views/index(2).d.ts

@@ -0,0 +1,4 @@
+export * from './DayView';
+export * from './WeekView';
+export * from './MonthView';
+export * from './YearView';

package/dist/components/organisms/lumi/DashboardNavbar/index(1).d.ts

@@ -0,0 +1,7 @@
+/**
+ * DashboardNavbar - Organismo de navegación superior del Dashboard
+ *
+ * @module DashboardNavbar
+ */
+export { DashboardNavbar } from './DashboardNavbar';
+export type { DashboardNavbarProps } from './types';

package/dist/components/organisms/lumi/DashboardNavbar/types(1).d.ts

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'react';
+import type { BreadcrumbItem } from '../../../molecules/lumi/Breadcrumb/types';
+/**
+ * Props del organismo DashboardNavbar
+ */
+export interface DashboardNavbarProps {
+    /**
+     * Items del breadcrumb para mostrar la navegación
+     */
+    breadcrumbItems?: BreadcrumbItem[];
+    /**
+     * Si muestra el icono de home en el breadcrumb
+     * @default true
+     */
+    showHomeIcon?: boolean;
+    /**
+     * Si muestra el botón de menú hamburguesa
+     * @default true
+     */
+    showMenuButton?: boolean;
+    /**
+     * Callback cuando se hace clic en el botón de menú
+     */
+    onMenuClick?: () => void;
+    /**
+     * Callback cuando se hace clic en un item del breadcrumb
+     */
+    onBreadcrumbClick?: (item: BreadcrumbItem, index: number) => void;
+    /**
+     * Contenido extra a mostrar en el lado derecho del navbar
+     * (ej: botones de acción, perfil de usuario, notificaciones)
+     */
+    navbarExtra?: ReactNode;
+    /**
+     * Altura del navbar en píxeles
+     * @default 64
+     */
+    height?: number;
+    /**
+     * Si el navbar tiene sombra (generalmente cuando hay scroll)
+     * @default false
+     */
+    showShadow?: boolean;
+    /**
+     * Clase CSS adicional
+     */
+    className?: string;
+    /**
+     * Test ID para testing
+     */
+    'data-testid'?: string;
+}

package/dist/components/organisms/lumi/DashboardWorkspace/DashboardWorkspace(1).d.ts

@@ -0,0 +1,23 @@
+import { type FC } from "react";
+import type { DashboardWorkspaceProps } from "./types";
+import "./DashboardWorkspace.scss";
+/**
+ * DashboardWorkspace - Organismo de Lumi
+ *
+ * Área de trabajo principal del Dashboard que incluye:
+ * - Scroll inteligente con altura dinámica
+ * - Botón flotante "volver arriba"
+ * - Integración con useScrollToTop hook
+ * - Responsive total
+ *
+ * @example
+ * ```tsx
+ * <DashboardWorkspace
+ *   navbarHeight={64}
+ *   enableScrollToTop={true}
+ * >
+ *   <YourContent />
+ * </DashboardWorkspace>
+ * ```
+ */
+export declare const DashboardWorkspace: FC<DashboardWorkspaceProps>;

package/dist/components/organisms/lumi/DashboardWorkspace/DashboardWorkspace(2).d.ts

@@ -0,0 +1,23 @@
+import { type FC } from "react";
+import type { DashboardWorkspaceProps } from "./types";
+import "./DashboardWorkspace.scss";
+/**
+ * DashboardWorkspace - Organismo de Lumi
+ *
+ * Área de trabajo principal del Dashboard que incluye:
+ * - Scroll inteligente con altura dinámica
+ * - Botón flotante "volver arriba"
+ * - Integración con useScrollToTop hook
+ * - Responsive total
+ *
+ * @example
+ * ```tsx
+ * <DashboardWorkspace
+ *   navbarHeight={64}
+ *   enableScrollToTop={true}
+ * >
+ *   <YourContent />
+ * </DashboardWorkspace>
+ * ```
+ */
+export declare const DashboardWorkspace: FC<DashboardWorkspaceProps>;

package/dist/components/organisms/lumi/DashboardWorkspace/index(1).d.ts

@@ -0,0 +1,7 @@
+/**
+ * DashboardWorkspace - Organismo de área de trabajo del Dashboard
+ *
+ * @module DashboardWorkspace
+ */
+export { DashboardWorkspace } from './DashboardWorkspace';
+export type { DashboardWorkspaceProps } from './types';

package/dist/components/organisms/lumi/DashboardWorkspace/index(2).d.ts

@@ -0,0 +1,7 @@
+/**
+ * DashboardWorkspace - Organismo de área de trabajo del Dashboard
+ *
+ * @module DashboardWorkspace
+ */
+export { DashboardWorkspace } from './DashboardWorkspace';
+export type { DashboardWorkspaceProps } from './types';