@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

package/src/components/ui/navigation/subscription-badge.tsx

@@ -0,0 +1,110 @@
+/**
+ * SubscriptionBadge Component
+ * Displays subscription tier with appropriate styling
+ */
+
+'use client'
+
+import * as React from 'react';
+import { SubscriptionBadgeProps } from './user-menu-types.js';
+import { Badge } from '../badge.js';
+
+// Default icons for subscription tiers
+const StarIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    strokeWidth="0"
+  >
+    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+  </svg>
+);
+
+// const CrownIcon = () => (
+//   <svg
+//     width="12"
+//     height="12"
+//     viewBox="0 0 24 24"
+//     fill="currentColor"
+//     strokeWidth="0"
+//   >
+//     <path d="M3 18h18l-2-12-4 6-3-6-3 6-4-6-2 12z"/>
+//   </svg>
+// );
+
+const DiamondIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    strokeWidth="0"
+  >
+    <path d="M6 3h12l4 6-10 12L2 9l4-6z"/>
+  </svg>
+);
+
+export const SubscriptionBadge: React.FC<SubscriptionBadgeProps> = ({
+  subscription,
+  size = 'sm',
+  variant = 'default',
+  showIcon = true,
+  className = ''
+}) => {
+  const getDefaultIcon = () => {
+    switch (subscription.tier) {
+      case 'pro':
+        return <StarIcon />;
+      case 'enterprise':
+        return <DiamondIcon />;
+      case 'free':
+      default:
+        return null;
+    }
+  };
+
+  const getBadgeVariant = () => {
+    switch (subscription.tier) {
+      case 'pro':
+        return 'default' as const;
+      case 'enterprise':
+        return 'secondary' as const;
+      case 'free':
+      default:
+        return 'outline' as const;
+    }
+  };
+
+  const getSizeClass = () => {
+    switch (size) {
+      case 'sm':
+        return 'subscription-badge--sm';
+      case 'lg':
+        return 'subscription-badge--lg';
+      default: // md
+        return 'subscription-badge--md';
+    }
+  };
+
+  const icon = subscription.icon || (showIcon ? getDefaultIcon() : null);
+
+  return (
+    <Badge
+      variant={variant === 'default' ? getBadgeVariant() : variant}
+      className={`subscription-badge ${getSizeClass()} ${className}`}
+    >
+      {icon && (
+        <span className="subscription-badge__icon">
+          {icon}
+        </span>
+      )}
+      <span className="subscription-badge__label">
+        {subscription.label}
+      </span>
+    </Badge>
+  );
+};
+
+export default SubscriptionBadge;

package/src/components/ui/navigation/tabs.tsx

@@ -0,0 +1,207 @@
+/**
+ * Tabs Component
+ * Provides comprehensive tab functionality with theme support and multiple variants
+ */
+
+'use client'
+
+import * as React from 'react';
+import { useState, useCallback, useMemo } from 'react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { TabsProps, TabItem } from './types.js';
+
+// Simple icon components
+const PlusIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+  </svg>
+);
+
+export const Tabs: React.FC<TabsProps> = ({
+  tabs,
+  activeTab,
+  defaultActiveTab,
+  onTabChange,
+  variant = 'default',
+  size = 'md',
+  orientation = 'horizontal',
+  fullWidth = false,
+  centered = false,
+  disabled = false,
+  loading = false,
+  closable = false,
+  onTabClose,
+  addable = false,
+  onTabAdd,
+  // TODO: Implement draggable functionality in future version
+  // draggable = false,
+  // onTabsReorder,
+  className = '',
+  'data-testid': testId = 'tabs',
+}) => {
+  const [internalActiveTab, setInternalActiveTab] = useState<string>(
+    activeTab || defaultActiveTab || (tabs.length > 0 ? tabs[0].id : '')
+  );
+
+  // Use controlled or uncontrolled active tab
+  const currentActiveTab = activeTab !== undefined ? activeTab : internalActiveTab;
+
+  const handleTabChange = useCallback((tabId: string) => {
+    if (disabled || loading) return;
+    
+    if (activeTab === undefined) {
+      setInternalActiveTab(tabId);
+    }
+    
+    if (onTabChange) {
+      onTabChange(tabId);
+    }
+  }, [activeTab, onTabChange, disabled, loading]);
+
+  const handleTabClose = useCallback((tabId: string, event: React.MouseEvent) => {
+    event.stopPropagation();
+    if (onTabClose) {
+      onTabClose(tabId);
+    }
+  }, [onTabClose]);
+
+  const handleTabAdd = useCallback(() => {
+    if (onTabAdd) {
+      onTabAdd();
+    }
+  }, [onTabAdd]);
+
+  // Memoize current tab content
+  const currentTabContent = useMemo(() => {
+    return tabs.find(tab => tab.id === currentActiveTab)?.content || null;
+  }, [tabs, currentActiveTab]);
+
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'sm':
+        return 'tabs__item--small';
+      case 'lg':
+        return 'tabs__item--large';
+      default: // md
+        return 'tabs__item--medium';
+    }
+  };
+
+  const getVariantClasses = (isActive: boolean, isDisabled: boolean) => {
+    if (isDisabled) {
+      return 'tabs__item--disabled';
+    }
+
+    switch (variant) {
+      case 'pills':
+        return isActive ? 'tabs__item--pills tabs__item--active' : 'tabs__item--pills';
+      case 'underline':
+        return isActive ? 'tabs__item--underline tabs__item--active' : 'tabs__item--underline';
+      case 'cards':
+        return isActive ? 'tabs__item--cards tabs__item--active' : 'tabs__item--cards';
+      case 'minimal':
+        return isActive ? 'tabs__item--minimal tabs__item--active' : 'tabs__item--minimal';
+      default: // default
+        return isActive ? 'tabs__item--default tabs__item--active' : 'tabs__item--default';
+    }
+  };
+
+    const getTabListClasses = () => {
+    const baseClasses = 'tabs__list tabs__list--semantic';
+    
+    if (orientation === 'vertical') {
+      return `${baseClasses} tabs__list--vertical`;
+    }
+    
+    if (fullWidth) {
+      return `${baseClasses} tabs__list--full-width`;
+    }
+    
+    if (centered) {
+      return `${baseClasses} tabs__list--centered`;
+    }
+    
+    return baseClasses;
+  };
+
+  const getTabClasses = (tab: TabItem) => {
+    const isActive = tab.id === currentActiveTab;
+    const isDisabled = tab.disabled || disabled;
+    
+    const baseClasses = `tabs__item ${getSizeClasses()} ${getVariantClasses(isActive, isDisabled)}`;
+    
+    if (orientation === 'vertical') {
+      return `${baseClasses} tabs__item--vertical`;
+    }
+
+    if (fullWidth) {
+      return `${baseClasses} tabs__item--full-width`;
+    }
+
+    return baseClasses;
+  };
+
+  if (tabs.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={`tabs ${orientation === 'vertical' ? 'tabs--vertical' : ''} ${className}`} data-testid={testId}>
+      {/* Tab List */}
+      <div className={getTabListClasses()}>
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => handleTabChange(tab.id)}
+            disabled={tab.disabled || disabled}
+            className={getTabClasses(tab)}
+            aria-selected={tab.id === currentActiveTab}
+            aria-controls={`panel-${tab.id}`}
+            role="tab"
+          >
+            {tab.icon && <span className="tabs__item-icon">{tab.icon}</span>}
+            <span className="tabs__item-label">{tab.label}</span>
+            {tab.badge && <span className="tabs__item-badge">{tab.badge}</span>}
+            {closable && tab.closable && (
+                              <button
+                  onClick={(e) => handleTabClose(tab.id, e)}
+                  className="tabs__close-button"
+                  aria-label={`Close ${tab.label} tab`}
+                >
+                  <XMarkIcon className="tabs__close-icon" />
+                </button>
+            )}
+          </button>
+        ))}
+        
+        {addable && (
+          <button
+            onClick={handleTabAdd}
+            disabled={disabled || loading}
+            className={`tabs__add-button ${getSizeClasses()}`}
+            aria-label="Add new tab"
+          >
+            <PlusIcon className="tabs__add-icon" />
+          </button>
+        )}
+      </div>
+
+      {/* Tab Panels */}
+      <div
+        className={`tabs__content ${orientation === 'vertical' ? 'tabs__content--vertical' : ''}`}
+        role="tabpanel"
+        aria-labelledby={`tab-${currentActiveTab}`}
+      >
+        {loading ? (
+          <div className="tabs__loading">
+            <div className="tabs__loading-spinner"></div>
+          </div>
+        ) : (
+          currentTabContent
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Tabs;

package/src/components/ui/navigation/types.ts

@@ -0,0 +1,354 @@
+/**
+ * Advanced Navigation Components - Type Definitions
+ * Provides comprehensive type definitions for all navigation components
+ */
+
+import { ReactNode } from 'react';
+
+// ============================================================================
+// USER MENU EXPORTS
+// ============================================================================
+
+export type {
+  UserMenuProps,
+  UserMenuUser,
+  UserMenuSubscription,
+  UserMenuItem,
+  UserMenuGroup,
+  UserAvatarProps,
+  SubscriptionBadgeProps
+} from './user-menu-types.js';
+
+// ============================================================================
+// COMMON NAVIGATION TYPES
+// ============================================================================
+
+export interface NavigationBaseProps {
+  className?: string;
+  'data-testid'?: string;
+  theme?: 'stan-design' | 'enterprise' | 'harvey';
+}
+
+export interface NavigationItem {
+  id: string;
+  label: string;
+  href?: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  active?: boolean;
+  children?: NavigationItem[];
+  onClick?: () => void;
+  badge?: ReactNode;
+  description?: string;
+}
+
+export interface NavigationGroup {
+  id: string;
+  title?: string;
+  items: NavigationItem[];
+  divider?: boolean;
+}
+
+// ============================================================================
+// BREADCRUMB COMPONENT TYPES
+// ============================================================================
+
+export interface BreadcrumbProps extends NavigationBaseProps {
+  items: BreadcrumbItem[];
+  separator?: ReactNode;
+  maxItems?: number;
+  showHome?: boolean;
+  homeIcon?: ReactNode;
+  onItemClick?: (item: BreadcrumbItem) => void;
+  truncate?: boolean;
+  responsive?: boolean;
+}
+
+export interface BreadcrumbItem {
+  id: string;
+  label: string;
+  href?: string;
+  icon?: ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+}
+
+// ============================================================================
+// PAGINATION COMPONENT TYPES
+// ============================================================================
+
+export interface PaginationProps extends NavigationBaseProps {
+  currentPage: number;
+  totalPages: number;
+  totalItems?: number;
+  itemsPerPage?: number;
+  showFirstLast?: boolean;
+  showPrevNext?: boolean;
+  showPageNumbers?: boolean;
+  maxPageNumbers?: number;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'outlined' | 'minimal';
+  onPageChange: (page: number) => void;
+  onItemsPerPageChange?: (itemsPerPage: number) => void;
+  itemsPerPageOptions?: number[];
+  showItemsPerPage?: boolean;
+  showTotal?: boolean;
+  totalLabel?: string;
+  disabled?: boolean;
+  loading?: boolean;
+}
+
+export interface PaginationItem {
+  type: 'page' | 'ellipsis' | 'previous' | 'next' | 'first' | 'last';
+  page?: number;
+  disabled?: boolean;
+  active?: boolean;
+  label: string;
+  onClick?: () => void;
+}
+
+// ============================================================================
+// TABS COMPONENT TYPES
+// ============================================================================
+
+export interface TabsProps extends NavigationBaseProps {
+  tabs: TabItem[];
+  activeTab?: string;
+  defaultActiveTab?: string;
+  onTabChange?: (tabId: string) => void;
+  variant?: 'default' | 'pills' | 'underline' | 'cards' | 'minimal';
+  size?: 'sm' | 'md' | 'lg';
+  orientation?: 'horizontal' | 'vertical';
+  fullWidth?: boolean;
+  centered?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  closable?: boolean;
+  onTabClose?: (tabId: string) => void;
+  addable?: boolean;
+  onTabAdd?: () => void;
+  draggable?: boolean;
+  onTabsReorder?: (tabs: TabItem[]) => void;
+}
+
+export interface TabItem {
+  id: string;
+  label: string;
+  content: ReactNode;
+  icon?: ReactNode;
+  disabled?: boolean;
+  closable?: boolean;
+  badge?: ReactNode;
+  description?: string;
+}
+
+// ============================================================================
+// STEPPER COMPONENT TYPES
+// ============================================================================
+
+export interface StepperProps extends NavigationBaseProps {
+  steps: StepItem[];
+  currentStep?: number;
+  defaultCurrentStep?: number;
+  onStepChange?: (stepIndex: number) => void;
+  variant?: 'default' | 'vertical' | 'horizontal' | 'wizard';
+  size?: 'sm' | 'md' | 'lg';
+  showStepNumbers?: boolean;
+  showStepLabels?: boolean;
+  showStepDescriptions?: boolean;
+  showStepIcons?: boolean;
+  allowStepClick?: boolean;
+  allowStepNavigation?: boolean;
+  showProgress?: boolean;
+  showStepStatus?: boolean;
+  onStepComplete?: (stepIndex: number) => void;
+  onStepError?: (stepIndex: number) => void;
+  onFinish?: () => void;
+  onCancel?: () => void;
+}
+
+export interface StepItem {
+  id: string;
+  label: string;
+  description?: string;
+  icon?: ReactNode;
+  status?: 'pending' | 'active' | 'completed' | 'error' | 'warning';
+  disabled?: boolean;
+  required?: boolean;
+  validation?: () => boolean | Promise<boolean>;
+  content?: ReactNode;
+  actions?: StepAction[];
+}
+
+export interface StepAction {
+  label: string;
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  onClick: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+}
+
+// ============================================================================
+// MENU COMPONENT TYPES
+// ============================================================================
+
+export interface MenuProps extends NavigationBaseProps {
+  items: NavigationItem[];
+  groups?: NavigationGroup[];
+  variant?: 'default' | 'dropdown' | 'context' | 'command';
+  size?: 'sm' | 'md' | 'lg';
+  orientation?: 'horizontal' | 'vertical';
+  trigger?: 'click' | 'hover' | 'focus';
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  offset?: number;
+  showArrow?: boolean;
+  fullWidth?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  searchable?: boolean;
+  onSearch?: (query: string) => void;
+  filterable?: boolean;
+  onFilter?: (filter: string) => void;
+  selectable?: boolean;
+  multiSelect?: boolean;
+  selectedItems?: string[];
+  onSelectionChange?: (selectedItems: string[]) => void;
+}
+
+// ============================================================================
+// PROGRESSIVE NAVIGATION COMPONENT TYPES (Phase 2 Enhancement)
+// ============================================================================
+
+export interface ProgressiveNavigationProps extends NavigationBaseProps {
+  // Navigation content
+  items?: NavigationItem[];
+  groups?: NavigationGroup[];
+
+  // Logo configuration
+  logo?: React.ReactNode;
+  logoHref?: string;
+
+  // Mobile hamburger configuration
+  hamburgerHeight?: string; // Default: 56px
+  mobileLogoSize?: 'sm' | 'md' | 'lg'; // Default: sm
+  mobileTouchTarget?: string; // Default: 48px
+
+  // Tablet horizontal-compact configuration
+  tabletHeight?: string; // Default: 64px
+  tabletLogoSize?: 'sm' | 'md' | 'lg'; // Default: md
+
+  // Desktop horizontal-full configuration
+  desktopHeight?: string; // Default: 72px
+  desktopLogoSize?: 'sm' | 'md' | 'lg'; // Default: lg
+  showSecondaryActions?: boolean; // Default: true
+  secondaryActions?: React.ReactNode[];
+
+  // Responsive behavior
+  mobileBreakpoint?: string; // Default: 640px (sm)
+  tabletBreakpoint?: string; // Default: 768px (md)
+  desktopBreakpoint?: string; // Default: 1024px (lg)
+
+  // Event handlers
+  onItemClick?: (item: NavigationItem) => void;
+  onLogoClick?: () => void;
+
+  // Accessibility
+  'aria-label'?: string;
+}
+
+// ============================================================================
+// SIDEBAR COMPONENT TYPES
+// ============================================================================
+
+export interface SidebarProps extends NavigationBaseProps {
+  items: NavigationItem[];
+  groups?: NavigationGroup[];
+  variant?: 'default' | 'collapsible' | 'overlay' | 'drawer';
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  position?: 'left' | 'right';
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  onCollapseChange?: (collapsed: boolean) => void;
+  collapsible?: boolean;
+  showToggle?: boolean;
+  toggleIcon?: ReactNode;
+  header?: ReactNode;
+  footer?: ReactNode;
+  overlay?: boolean;
+  overlayCloseOnClick?: boolean;
+  overlayCloseOnEscape?: boolean;
+  overlayCloseOnOutsideClick?: boolean;
+  responsive?: boolean;
+  breakpoint?: 'sm' | 'md' | 'lg' | 'xl';
+  onItemClick?: (item: NavigationItem) => void;
+  onGroupToggle?: (groupId: string, expanded: boolean) => void;
+  expandedGroups?: string[];
+  defaultExpandedGroups?: string[];
+  showGroupIcons?: boolean;
+  showItemIcons?: boolean;
+  showItemBadges?: boolean;
+  showItemDescriptions?: boolean;
+  sticky?: boolean;
+  zIndex?: number;
+}
+
+// ============================================================================
+// NAVIGATION STATE TYPES
+// ============================================================================
+
+export interface NavigationState {
+  activeItem?: string;
+  expandedGroups: string[];
+  collapsed: boolean;
+  searchQuery: string;
+  filterValue: string;
+  selectedItems: string[];
+}
+
+export interface NavigationContextValue {
+  state: NavigationState;
+  dispatch: React.Dispatch<NavigationAction>;
+  theme: string;
+}
+
+export type NavigationAction =
+  | { type: 'SET_ACTIVE_ITEM'; payload: string }
+  | { type: 'TOGGLE_GROUP'; payload: string }
+  | { type: 'SET_COLLAPSED'; payload: boolean }
+  | { type: 'SET_SEARCH_QUERY'; payload: string }
+  | { type: 'SET_FILTER_VALUE'; payload: string }
+  | { type: 'SET_SELECTED_ITEMS'; payload: string[] }
+  | { type: 'RESET_STATE' };
+
+// ============================================================================
+// NAVIGATION UTILITY TYPES
+// ============================================================================
+
+export interface NavigationBreakpoint {
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+}
+
+export interface NavigationSpacing {
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+}
+
+export interface NavigationAnimation {
+  duration: string;
+  easing: string;
+  delay?: string;
+}
+
+export interface NavigationAccessibility {
+  ariaLabel?: string;
+  ariaDescribedBy?: string;
+  ariaLabelledBy?: string;
+  role?: string;
+  tabIndex?: number;
+}