@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.5

package/src/themes/navigation.ts

@@ -0,0 +1,238 @@
+/**
+ * Navigation Theme System
+ * Provides comprehensive navigation layout and style variations
+ */
+
+export interface NavigationThemeConfig {
+  layout: NavigationLayout;
+  style: NavigationStyle;
+  behavior: NavigationBehavior;
+  responsive: NavigationResponsive;
+  animations: NavigationAnimations;
+  spacing: NavigationSpacing;
+  colors: NavigationColors;
+  typography: NavigationTypography;
+  breakpoints: NavigationBreakpoints;
+}
+
+export type NavigationLayout = 'horizontal' | 'vertical' | 'sidebar' | 'tabs' | 'breadcrumb' | 'pagination';
+
+export type NavigationStyle = 'minimal' | 'standard' | 'enhanced' | 'enterprise' | 'creative';
+
+export type NavigationBehavior = 'static' | 'sticky' | 'floating' | 'overlay' | 'collapsible';
+
+export type NavigationResponsive = 'mobile-first' | 'desktop-first' | 'adaptive';
+
+export interface NavigationAnimations {
+  duration: NavigationDuration;
+  easing: NavigationEasing;
+  stagger: NavigationStagger;
+  transitions: NavigationTransitions;
+}
+
+export interface NavigationDuration {
+  fast: string;
+  normal: string;
+  slow: string;
+  instant: string;
+}
+
+export interface NavigationEasing {
+  linear: string;
+  ease: string;
+  easeIn: string;
+  easeOut: string;
+  easeInOut: string;
+  bounce: string;
+  elastic: string;
+}
+
+export interface NavigationStagger {
+  enabled: boolean;
+  delay: string;
+  direction: 'forward' | 'reverse' | 'random';
+}
+
+export interface NavigationTransitions {
+  enter: string;
+  exit: string;
+  move: string;
+  resize: string;
+}
+
+export interface NavigationSpacing {
+  container: string;
+  item: string;
+  group: string;
+  divider: string;
+  icon: string;
+  text: string;
+  padding: NavigationPadding;
+  margin: NavigationMargin;
+}
+
+export interface NavigationPadding {
+  horizontal: string;
+  vertical: string;
+  top: string;
+  right: string;
+  bottom: string;
+  left: string;
+}
+
+export interface NavigationMargin {
+  horizontal: string;
+  vertical: string;
+  top: string;
+  right: string;
+  bottom: string;
+  left: string;
+}
+
+export interface NavigationColors {
+  background: NavigationColorVariants;
+  text: NavigationColorVariants;
+  border: NavigationColorVariants;
+  accent: NavigationColorVariants;
+  hover: NavigationColorVariants;
+  active: NavigationColorVariants;
+  disabled: NavigationColorVariants;
+  focus: NavigationColorVariants;
+}
+
+export interface NavigationColorVariants {
+  primary: string;
+  secondary: string;
+  tertiary: string;
+  light: string;
+  dark: string;
+  contrast: string;
+}
+
+export interface NavigationTypography {
+  fontFamily: string;
+  fontSize: NavigationFontSizes;
+  fontWeight: NavigationFontWeights;
+  lineHeight: NavigationLineHeights;
+  letterSpacing: NavigationLetterSpacing;
+}
+
+export interface NavigationFontSizes {
+  xs: string;
+  sm: string;
+  base: string;
+  lg: string;
+  xl: string;
+  '2xl': string;
+}
+
+export interface NavigationFontWeights {
+  light: string;
+  normal: string;
+  medium: string;
+  semibold: string;
+  bold: string;
+}
+
+export interface NavigationLineHeights {
+  tight: string;
+  normal: string;
+  relaxed: string;
+  loose: string;
+}
+
+export interface NavigationLetterSpacing {
+  tight: string;
+  normal: string;
+  wide: string;
+  wider: string;
+}
+
+export interface NavigationBreakpoints {
+  mobile: string;
+  tablet: string;
+  desktop: string;
+  wide: string;
+  ultra: string;
+}
+
+// Navigation Component Configurations
+export interface NavigationComponentConfig {
+  type: NavigationLayout;
+  variant: NavigationStyle;
+  size: 'sm' | 'md' | 'lg' | 'xl';
+  fullWidth: boolean;
+  centered: boolean;
+  justified: boolean;
+  stacked: boolean;
+}
+
+// Navigation Item Configuration
+export interface NavigationItemConfig {
+  id: string;
+  label: string;
+  href?: string;
+  icon?: string;
+  badge?: NavigationBadge;
+  children?: NavigationItemConfig[];
+  disabled?: boolean;
+  hidden?: boolean;
+  active?: boolean;
+}
+
+export interface NavigationBadge {
+  text: string;
+  variant: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+  size: 'sm' | 'md' | 'lg';
+}
+
+// Navigation State Management
+export interface NavigationState {
+  isOpen: boolean;
+  isCollapsed: boolean;
+  activeItem: string | null;
+  hoveredItem: string | null;
+  focusedItem: string | null;
+  expandedItems: string[];
+}
+
+// Navigation Events
+export interface NavigationEvents {
+  onItemClick: (item: NavigationItemConfig) => void;
+  onItemHover: (item: NavigationItemConfig) => void;
+  onItemFocus: (item: NavigationItemConfig) => void;
+  onToggle: (isOpen: boolean) => void;
+  onCollapse: (isCollapsed: boolean) => void;
+}
+
+// Navigation Accessibility
+export interface NavigationAccessibility {
+  ariaLabel: string;
+  ariaExpanded: boolean;
+  ariaHidden: boolean;
+  role: string;
+  tabIndex: number;
+  keyboardNavigation: boolean;
+  screenReaderSupport: boolean;
+}
+
+// Navigation Performance
+export interface NavigationPerformance {
+  lazyLoading: boolean;
+  virtualization: boolean;
+  debounceDelay: number;
+  throttleDelay: number;
+  cacheSize: number;
+}
+
+// Navigation Theme Presets
+export interface NavigationThemePreset {
+  name: string;
+  description: string;
+  config: NavigationThemeConfig;
+  preview: string;
+  tags: string[];
+  category: NavigationStyle;
+}
+
+