/** * HomePage Design System Constants * * This file defines the design tokens for consistent spacing, animations, * and component dimensions across the HomePage and its child components. * * Following Material Design principles and mobile-first responsive design. */ /** Max unread notifications shown in the home bell quick panel. */ export declare const HOME_BELL_NOTIFICATION_LIMIT = 3; /** * Spacing Scale - Based on 4px grid system * All spacing values should be multiples of 4 for consistency */ export declare const SPACING: { readonly xs: 4; readonly sm: 8; readonly md: 16; readonly lg: 24; readonly xl: 32; readonly xxl: 48; }; /** * Animation Durations (in milliseconds) * Based on Material Design motion guidelines */ export declare const ANIMATION_DURATION: { readonly fast: 150; readonly normal: 300; readonly slow: 500; readonly enter: 225; readonly exit: 195; }; /** * Animation Easing Functions * Material Design standard easing curves */ export declare const ANIMATION_EASING: { readonly standard: "cubic-bezier(0.4, 0, 0.2, 1)"; readonly decelerate: "cubic-bezier(0.0, 0, 0.2, 1)"; readonly accelerate: "cubic-bezier(0.4, 0, 1, 1)"; readonly sharp: "cubic-bezier(0.4, 0, 0.6, 1)"; readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)"; }; /** * Component Heights * Responsive heights for major UI components */ /** * Defines standard heights for various UI components on the HomePage, supporting responsive design. * * @remarks * The `COMPONENT_HEIGHTS` object provides pixel or viewport-based height values for different components, * with breakpoints for extra-small (`xs`), small (`sm`), and medium (`md`) screens where applicable. * This ensures consistent layout and spacing across devices. * * @property topBar - Heights (in pixels) for the TopBar component in its collapsed state. * - Example: On a small screen (`sm`), the TopBar height is 64px. * @property topBarExpanded - Heights (in pixels) for the TopBar when expanded (e.g., showing QuickActions). * - Example: On a medium screen (`md`), the expanded TopBar height is 220px. * @property quickActionsCompact - Heights (in pixels) for the QuickActionsBar in compact mode. * - Example: On an extra-small screen (`xs`), the QuickActionsBar height is 60px. * @property bottomNav - Height (in pixels) for the bottom navigation bar, following Material Design standards. * - Example: The bottom navigation is always 56px tall, regardless of screen size. * @property featuredCard - Minimum heights (in pixels) for the featured event card. * - Example: On a small screen (`sm`), the featured card has a minimum height of 220px. */ export declare const COMPONENT_HEIGHTS: { readonly topBar: { readonly xs: 56; readonly sm: 64; readonly md: 72; }; readonly topBarExpanded: { readonly xs: 180; readonly sm: 200; readonly md: 220; }; readonly quickActionsCompact: { readonly xs: 60; readonly sm: 64; }; readonly bottomNav: 56; readonly featuredCard: { readonly xs: 200; readonly sm: 220; readonly md: 240; }; }; /** * Scroll Behavior Constants */ export declare const SCROLL_CONFIG: { readonly collapseThreshold: 100; readonly scrollToTopThreshold: 300; readonly scrollDebounce: 16; }; /** * Touch Interaction Constants */ export declare const TOUCH_CONFIG: { readonly minTouchTarget: 48; readonly longPressDuration: 400; readonly swipeThreshold: 50; readonly swipeVelocity: 0.3; }; /** * Helper Functions */ /** * Get the TopBar expanded height based on QuickActionsBar layout state * @param layout - Current layout of QuickActionsBar ("grid" or "horizontal") * @returns Responsive height object with dynamic xs value * @remarks * The xs breakpoint height varies based on layout: * - Horizontal layout: 120px (more compact) * - Grid layout: 170px (needs more vertical space) * Larger breakpoints (sm, md) remain constant regardless of layout. */ export declare const getTopBarExpandedHeight: (layout?: "grid" | "horizontal") => { xs: number; sm: number; md: number; }; /** * Get the appropriate TopBar height based on expansion state * @param isExpanded - Whether the TopBar is expanded * @returns Responsive height object */ export declare const getTopBarHeight: (isExpanded: boolean) => { readonly xs: 56; readonly sm: 64; readonly md: 72; } | { readonly xs: 180; readonly sm: 200; readonly md: 220; }; /** * Create a responsive spacing object * @param xs - Mobile spacing * @param sm - Tablet spacing (optional) * @param md - Desktop spacing (optional) * @returns Responsive spacing object */ export declare const getResponsiveSpacing: (xs: number, sm?: number, md?: number) => { xs: number; sm?: number; md?: number; }; /** * Calculate content padding top based on TopBar state * This accounts for the TopBar height plus QuickActions (if expanded) * or compact QuickActions (if collapsed) * * @param isExpanded - Whether the TopBar is expanded with full QuickActions * @param layout - Current layout of QuickActionsBar (affects expanded height) * @param additionalOffset - Additional offset in pixels for spacing * @returns Responsive padding top values */ export declare const getContentPaddingTop: (isExpanded: boolean, layout?: "grid" | "horizontal", additionalOffset?: number) => { xs: number; sm: number; md: number; }; /** * Type exports for TypeScript usage */ export type SpacingKey = keyof typeof SPACING; export type AnimationDuration = keyof typeof ANIMATION_DURATION; export type AnimationEasing = keyof typeof ANIMATION_EASING; /** * HomePage Section Configurations * * Defines the structure and metadata for each major section of the HomePage. * Used with SectionHeader component to provide consistent section labeling. */ export declare const HOME_SECTIONS: { readonly WELCOME: { readonly id: "welcome"; readonly title: "Bem-vindo"; readonly icon: "Waving Hand"; readonly showDivider: false; }; readonly WEEKLY_TASKS: { readonly id: "weekly-tasks"; readonly title: "Tarefas da semana"; readonly subtitle: "Pequenas ações para usar o que a casa já tem no sistema"; readonly icon: "TaskAlt"; readonly showDivider: false; }; readonly PROGRESS: { readonly id: "progress"; readonly title: "Seu Progresso"; readonly subtitle: "Acompanhe seu desenvolvimento e conquistas"; readonly icon: "TrendingUp"; readonly actionLabel: "Ver Tudo"; readonly showDivider: false; }; readonly ATTENDANCE: { readonly id: "attendance"; readonly title: "Presença do Período"; readonly subtitle: "Confirmação e presença real dos médiuns"; readonly icon: "TrendingUp"; readonly actionLabel: "Ver médiuns"; readonly showDivider: false; }; readonly CALENDAR: { readonly id: "calendar"; readonly title: "Próximas Atividades"; readonly subtitle: "Seus eventos e compromissos"; readonly icon: "CalendarMonth"; readonly actionLabel: "Ver Calendário"; readonly showDivider: false; }; readonly SPIRITUALITY: { readonly id: "spirituality"; readonly title: "Espiritualidade"; readonly subtitle: "Fase lunar e rituais recomendados"; readonly icon: "AutoAwesome"; readonly showDivider: false; }; readonly HIGHLIGHTS: { readonly id: "highlights"; readonly title: "Em Destaque"; readonly subtitle: "Próximos eventos do terreiro"; readonly icon: "Star"; readonly showDivider: false; }; }; /** * Type for section IDs */ export type SectionId = keyof typeof HOME_SECTIONS; /** * Helper to get section config by ID */ export declare const getSectionConfig: (sectionId: SectionId) => { readonly id: "welcome"; readonly title: "Bem-vindo"; readonly icon: "Waving Hand"; readonly showDivider: false; } | { readonly id: "weekly-tasks"; readonly title: "Tarefas da semana"; readonly subtitle: "Pequenas ações para usar o que a casa já tem no sistema"; readonly icon: "TaskAlt"; readonly showDivider: false; } | { readonly id: "progress"; readonly title: "Seu Progresso"; readonly subtitle: "Acompanhe seu desenvolvimento e conquistas"; readonly icon: "TrendingUp"; readonly actionLabel: "Ver Tudo"; readonly showDivider: false; } | { readonly id: "attendance"; readonly title: "Presença do Período"; readonly subtitle: "Confirmação e presença real dos médiuns"; readonly icon: "TrendingUp"; readonly actionLabel: "Ver médiuns"; readonly showDivider: false; } | { readonly id: "calendar"; readonly title: "Próximas Atividades"; readonly subtitle: "Seus eventos e compromissos"; readonly icon: "CalendarMonth"; readonly actionLabel: "Ver Calendário"; readonly showDivider: false; } | { readonly id: "spirituality"; readonly title: "Espiritualidade"; readonly subtitle: "Fase lunar e rituais recomendados"; readonly icon: "AutoAwesome"; readonly showDivider: false; } | { readonly id: "highlights"; readonly title: "Em Destaque"; readonly subtitle: "Próximos eventos do terreiro"; readonly icon: "Star"; readonly showDivider: false; };