@buddhacognitivelab/theme-glassmorphic
Version:
Enhanced glassmorphic theme package with dual-mode support, advanced glass effects, interactive UI components, and gesture-based interactions
75 lines (74 loc) • 2.63 kB
TypeScript
/**
* @fileoverview Enhanced Navigation Component - Phase 4
* Dual-mode glassmorphic navigation with advanced theme support
*/
import React from 'react';
import { MotionProps } from 'framer-motion';
export interface NavigationItem {
id: string;
label: string;
href?: string;
icon?: React.ReactNode;
badge?: string | number;
disabled?: boolean;
children?: NavigationItem[];
onClick?: (item: NavigationItem) => void;
}
export interface EnhancedNavigationProps extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps> {
/** Navigation items */
items: NavigationItem[];
/** Active item ID */
activeId?: string;
/** Navigation orientation */
orientation?: 'horizontal' | 'vertical';
/** Glass effect intensity */
glassIntensity?: 'subtle' | 'prominent' | 'frosted' | 'crystal' | 'ethereal';
/** Glass depth level */
glassDepth?: 'surface' | 'elevated' | 'floating' | 'modal';
/** Navigation variant */
variant?: 'default' | 'minimal' | 'prominent' | 'glass' | 'floating';
/** Navigation size */
size?: 'sm' | 'md' | 'lg' | 'xl';
/** Enable collapsible navigation */
collapsible?: boolean;
/** Show mobile menu */
showMobileMenu?: boolean;
/** Mobile breakpoint */
mobileBreakpoint?: string;
/** Logo component */
logo?: React.ReactNode;
/** Action components */
actions?: React.ReactNode;
/** Item click handler */
onItemClick?: (item: NavigationItem) => void;
/** Mobile menu toggle handler */
onMobileMenuToggle?: (isOpen: boolean) => void;
/** Enable sticky navigation */
sticky?: boolean;
/** Z-index for sticky navigation */
zIndex?: number;
/** Enable enhanced hover effects */
enhancedHover?: boolean;
/** Enable theme-adaptive styling */
themeAdaptive?: boolean;
/** Custom glass tint override */
glassTint?: string;
/** Enable gradient border */
gradientBorder?: boolean;
/** Animation preset */
animation?: 'none' | 'subtle' | 'smooth' | 'bounce' | 'elastic';
/** Enable backdrop blur */
backdropBlur?: boolean;
/** Navigation position */
position?: 'static' | 'fixed' | 'sticky';
/** Enable auto-hide on scroll */
autoHide?: boolean;
}
/**
* Enhanced Navigation Component
*
* A sophisticated glassmorphic navigation with dual-mode theme support,
* advanced glass effects, and enhanced interactive states.
*/
export declare const EnhancedNavigation: React.ForwardRefExoticComponent<EnhancedNavigationProps & React.RefAttributes<HTMLElement>>;
export default EnhancedNavigation;