@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.7 → 0.2.8

package/dist/components/ui/navigation/types.js

@@ -0,0 +1,298 @@
+/**
+ * Advanced Navigation Components - Type Definitions
+ * Provides comprehensive type definitions for all navigation components
+ */
+
+import { ReactNode } from 'react';
+
+// ============================================================================
+// COMMON NAVIGATION TYPES
+// ============================================================================
+
+export interface NavigationBaseProps {
+  className?;
+  'data-testid'?;
+  theme?;
+}
+
+export interface NavigationItem {
+  id;
+  label;
+  href?;
+  icon?;
+  disabled?;
+  active?;
+  children?];
+  onClick?) => void;
+  badge?;
+  description?;
+}
+
+export interface NavigationGroup {
+  id;
+  title?;
+  items];
+  divider?;
+}
+
+// ============================================================================
+// BREADCRUMB COMPONENT TYPES
+// ============================================================================
+
+export interface BreadcrumbProps extends NavigationBaseProps {
+  items];
+  separator?;
+  maxItems?;
+  showHome?;
+  homeIcon?;
+  onItemClick?) => void;
+  truncate?;
+  responsive?;
+}
+
+export interface BreadcrumbItem {
+  id;
+  label;
+  href?;
+  icon?;
+  onClick?) => void;
+  disabled?;
+}
+
+// ============================================================================
+// PAGINATION COMPONENT TYPES
+// ============================================================================
+
+export interface PaginationProps extends NavigationBaseProps {
+  currentPage;
+  totalPages;
+  totalItems?;
+  itemsPerPage?;
+  showFirstLast?;
+  showPrevNext?;
+  showPageNumbers?;
+  maxPageNumbers?;
+  size?;
+  variant?;
+  onPageChange) => void;
+  onItemsPerPageChange?) => void;
+  itemsPerPageOptions?];
+  showItemsPerPage?;
+  showTotal?;
+  totalLabel?;
+  disabled?;
+  loading?;
+}
+
+export interface PaginationItem {
+  type;
+  page?;
+  disabled?;
+  active?;
+  label;
+  onClick?) => void;
+}
+
+// ============================================================================
+// TABS COMPONENT TYPES
+// ============================================================================
+
+export interface TabsProps extends NavigationBaseProps {
+  tabs];
+  activeTab?;
+  defaultActiveTab?;
+  onTabChange?) => void;
+  variant?;
+  size?;
+  orientation?;
+  fullWidth?;
+  centered?;
+  disabled?;
+  loading?;
+  closable?;
+  onTabClose?) => void;
+  addable?;
+  onTabAdd?) => void;
+  draggable?;
+  onTabsReorder?]) => void;
+}
+
+export interface TabItem {
+  id;
+  label;
+  content;
+  icon?;
+  disabled?;
+  closable?;
+  badge?;
+  description?;
+}
+
+// ============================================================================
+// STEPPER COMPONENT TYPES
+// ============================================================================
+
+export interface StepperProps extends NavigationBaseProps {
+  steps];
+  currentStep?;
+  defaultCurrentStep?;
+  onStepChange?) => void;
+  variant?;
+  size?;
+  showStepNumbers?;
+  showStepLabels?;
+  showStepDescriptions?;
+  showStepIcons?;
+  allowStepClick?;
+  allowStepNavigation?;
+  showProgress?;
+  showStepStatus?;
+  onStepComplete?) => void;
+  onStepError?) => void;
+  onFinish?) => void;
+  onCancel?) => void;
+}
+
+export interface StepItem {
+  id;
+  label;
+  description?;
+  icon?;
+  status?;
+  disabled?;
+  required?;
+  validation?) => boolean | Promise<boolean>;
+  content?;
+  actions?];
+}
+
+export interface StepAction {
+  label;
+  variant?;
+  onClick) => void;
+  disabled?;
+  loading?;
+}
+
+// ============================================================================
+// MENU COMPONENT TYPES
+// ============================================================================
+
+export interface MenuProps extends NavigationBaseProps {
+  items];
+  groups?];
+  variant?;
+  size?;
+  orientation?;
+  trigger?;
+  placement?;
+  offset?;
+  showArrow?;
+  fullWidth?;
+  disabled?;
+  loading?;
+  searchable?;
+  onSearch?) => void;
+  filterable?;
+  onFilter?) => void;
+  selectable?;
+  multiSelect?;
+  selectedItems?];
+  onSelectionChange?]) => void;
+}
+
+// ============================================================================
+// SIDEBAR COMPONENT TYPES
+// ============================================================================
+
+export interface SidebarProps extends NavigationBaseProps {
+  items];
+  groups?];
+  variant?;
+  size?;
+  position?;
+  collapsed?;
+  defaultCollapsed?;
+  onCollapseChange?) => void;
+  collapsible?;
+  showToggle?;
+  toggleIcon?;
+  header?;
+  footer?;
+  overlay?;
+  overlayCloseOnClick?;
+  overlayCloseOnEscape?;
+  overlayCloseOnOutsideClick?;
+  responsive?;
+  breakpoint?;
+  onItemClick?) => void;
+  onGroupToggle?, expanded) => void;
+  expandedGroups?];
+  defaultExpandedGroups?];
+  showGroupIcons?;
+  showItemIcons?;
+  showItemBadges?;
+  showItemDescriptions?;
+  sticky?;
+  zIndex?;
+}
+
+// ============================================================================
+// NAVIGATION STATE TYPES
+// ============================================================================
+
+export interface NavigationState {
+  activeItem?;
+  expandedGroups];
+  collapsed;
+  searchQuery;
+  filterValue;
+  selectedItems];
+}
+
+export interface NavigationContextValue {
+  state;
+  dispatch;
+  theme;
+}
+
+ payload}
+  | { type; payload}
+  | { type; payload}
+  | { type; payload}
+  | { type; payload}
+  | { type; payload] }
+  | { type};
+
+// ============================================================================
+// NAVIGATION UTILITY TYPES
+// ============================================================================
+
+export interface NavigationBreakpoint {
+  sm;
+  md;
+  lg;
+  xl;
+}
+
+export interface NavigationSpacing {
+  xs;
+  sm;
+  md;
+  lg;
+  xl;
+}
+
+export interface NavigationAnimation {
+  duration;
+  easing;
+  delay?;
+}
+
+export interface NavigationAccessibility {
+  ariaLabel?;
+  ariaDescribedBy?;
+  ariaLabelledBy?;
+  role?;
+  tabIndex?;
+}

package/dist/components/ui/overlay/backdrop.d.ts

@@ -0,0 +1,79 @@
+export interface BackdropProps {
+  isVisible: boolean;
+  onClick?: () => void;
+  className?: string;
+  blur?: boolean;
+  opacity?: number;
+  zIndex?: number;
+  children?: React.ReactNode;
+  theme?: 'light' | 'dark' | 'primary' | 'success' | 'warning' | 'error';
+  animation?: boolean;
+}
+
+export const Backdrop: React.FC<BackdropProps> = ({
+  isVisible,
+  onClick,
+  className = '',
+  blur = false,
+  opacity = 0.5,
+  zIndex = 1000,
+  children,
+  theme = 'dark',
+  animation = true
+}) => {
+  if (!isVisible) {
+    return null;
+  }
+
+  const handleClick = (event: React.MouseEvent) => {
+    // Only trigger onClick if clicking directly on the backdrop
+    if (event.target === event.currentTarget && onClick) {
+      onClick();
+    }
+  };
+
+  // Convert opacity to nearest 10% for CSS class
+  const getOpacityClass = () => {
+    const rounded = Math.round(opacity * 10) * 10;
+    return `backdrop__container--opacity-${rounded}`;
+  };
+
+  const getZIndexClass = () => {
+    if (zIndex >= 1040) return 'backdrop__container--z-toast';
+    if (zIndex >= 1030) return 'backdrop__container--z-tooltip';
+    if (zIndex >= 1020) return 'backdrop__container--z-popover';
+    if (zIndex >= 1010) return 'backdrop__container--z-dropdown';
+    return 'backdrop__container--z-modal';
+  };
+
+  const containerClasses = [
+    'backdrop__container',
+    blur ? 'backdrop__container--blur' : '',
+    theme ? `backdrop__container--theme-${theme}` : '',
+    getOpacityClass(),
+    getZIndexClass(),
+    animation ? 'backdrop__container--enter' : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div
+      className={containerClasses}
+      style={{
+        '--backdrop-z-index': zIndex,
+        '--backdrop-opacity': opacity
+      } as React.CSSProperties}
+      onClick={handleClick}
+      role="presentation"
+      aria-hidden="true"
+    >
+      {children && (
+        <div className="backdrop__content">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Backdrop;

package/dist/components/ui/overlay/backdrop.esm.js

@@ -0,0 +1,80 @@
+import React from 'react';
+
+export interface BackdropProps {
+  isVisible;
+  onClick?) => void;
+  className?;
+  blur?;
+  opacity?;
+  zIndex?;
+  children?;
+  theme?;
+  animation?;
+}
+
+export const Backdrop= ({
+  isVisible,
+  onClick,
+  className = '',
+  blur = false,
+  opacity = 0.5,
+  zIndex = 1000,
+  children,
+  theme = 'dark',
+  animation = true
+}) => {
+  if (!isVisible) {
+    return null;
+  }
+
+  const handleClick = (event) => {
+    // Only trigger onClick if clicking directly on the backdrop
+    if (event.target === event.currentTarget && onClick) {
+      onClick();
+    }
+  };
+
+  // Convert opacity to nearest 10% for CSS class
+  const getOpacityClass = () => {
+    const rounded = Math.round(opacity * 10) * 10;
+    return `backdrop__container--opacity-${rounded}`;
+  };
+
+  const getZIndexClass = () => {
+    if (zIndex >= 1040) return 'backdrop__container--z-toast';
+    if (zIndex >= 1030) return 'backdrop__container--z-tooltip';
+    if (zIndex >= 1020) return 'backdrop__container--z-popover';
+    if (zIndex >= 1010) return 'backdrop__container--z-dropdown';
+    return 'backdrop__container--z-modal';
+  };
+
+  const containerClasses = [
+    'backdrop__container',
+    blur ? 'backdrop__container--blur' ,
+    theme ? `backdrop__container--theme-${theme}` ,
+    getOpacityClass(),
+    getZIndexClass(),
+    animation ? 'backdrop__container--enter' ,
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div
+      className={containerClasses}
+      style={{
+        '--backdrop-z-index',
+        '--backdrop-opacity'} as React.CSSProperties}
+      onClick={handleClick}
+      role="presentation"
+      aria-hidden="true"
+    >
+      {children && (
+        <div className="backdrop__content">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Backdrop;

package/dist/components/ui/overlay/backdrop.js

@@ -0,0 +1,80 @@
+import React from 'react';
+
+export interface BackdropProps {
+  isVisible;
+  onClick?) => void;
+  className?;
+  blur?;
+  opacity?;
+  zIndex?;
+  children?;
+  theme?;
+  animation?;
+}
+
+export const Backdrop= ({
+  isVisible,
+  onClick,
+  className = '',
+  blur = false,
+  opacity = 0.5,
+  zIndex = 1000,
+  children,
+  theme = 'dark',
+  animation = true
+}) => {
+  if (!isVisible) {
+    return null;
+  }
+
+  const handleClick = (event) => {
+    // Only trigger onClick if clicking directly on the backdrop
+    if (event.target === event.currentTarget && onClick) {
+      onClick();
+    }
+  };
+
+  // Convert opacity to nearest 10% for CSS class
+  const getOpacityClass = () => {
+    const rounded = Math.round(opacity * 10) * 10;
+    return `backdrop__container--opacity-${rounded}`;
+  };
+
+  const getZIndexClass = () => {
+    if (zIndex >= 1040) return 'backdrop__container--z-toast';
+    if (zIndex >= 1030) return 'backdrop__container--z-tooltip';
+    if (zIndex >= 1020) return 'backdrop__container--z-popover';
+    if (zIndex >= 1010) return 'backdrop__container--z-dropdown';
+    return 'backdrop__container--z-modal';
+  };
+
+  const containerClasses = [
+    'backdrop__container',
+    blur ? 'backdrop__container--blur' ,
+    theme ? `backdrop__container--theme-${theme}` ,
+    getOpacityClass(),
+    getZIndexClass(),
+    animation ? 'backdrop__container--enter' ,
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div
+      className={containerClasses}
+      style={{
+        '--backdrop-z-index',
+        '--backdrop-opacity'} as React.CSSProperties}
+      onClick={handleClick}
+      role="presentation"
+      aria-hidden="true"
+    >
+      {children && (
+        <div className="backdrop__content">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Backdrop;

package/dist/components/ui/overlay/focus-manager.d.ts

@@ -0,0 +1,141 @@
+export interface FocusManagerProps {
+  children: React.ReactNode;
+  isActive: boolean;
+  onFocusChange?: (focused: boolean) => void;
+  trapFocus?: boolean;
+  restoreFocus?: boolean;
+  initialFocus?: React.RefObject<HTMLElement>;
+  className?: string;
+}
+
+export const FocusManager: React.FC<FocusManagerProps> = ({
+  children,
+  isActive,
+  onFocusChange,
+  trapFocus = true,
+  restoreFocus = true,
+  initialFocus,
+  className = ''
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const previousActiveElement = useRef<HTMLElement | null>(null);
+  const focusableElements = useRef<HTMLElement[]>([]);
+
+  // Get all focusable elements within the container
+  const getFocusableElements = useCallback(() => {
+    if (!containerRef.current) return [];
+
+    const selector = [
+      'button:not([disabled])',
+      'input:not([disabled])',
+      'select:not([disabled])',
+      'textarea:not([disabled])',
+      'a[href]',
+      '[tabindex]:not([tabindex="-1"])',
+      '[contenteditable="true"]'
+    ].join(', ');
+
+    return Array.from(containerRef.current.querySelectorAll(selector)) as HTMLElement[];
+  }, []);
+
+  // Store the previously focused element
+  useEffect(() => {
+    if (isActive && restoreFocus) {
+      previousActiveElement.current = document.activeElement as HTMLElement;
+    }
+  }, [isActive, restoreFocus]);
+
+  // Focus management when overlay becomes active
+  useEffect(() => {
+    if (!isActive) return;
+
+    // Get focusable elements
+    focusableElements.current = getFocusableElements();
+
+    if (focusableElements.current.length === 0) return;
+
+    // Set initial focus
+    if (initialFocus?.current) {
+      initialFocus.current.focus();
+    } else {
+      // Focus the first focusable element
+      focusableElements.current[0].focus();
+    }
+
+    onFocusChange?.(true);
+  }, [isActive, initialFocus, onFocusChange, getFocusableElements]);
+
+  // Restore focus when overlay becomes inactive
+  useEffect(() => {
+    if (!isActive && restoreFocus && previousActiveElement.current) {
+      // Use setTimeout to ensure the overlay is fully removed
+      setTimeout(() => {
+        if (previousActiveElement.current && document.contains(previousActiveElement.current)) {
+          previousActiveElement.current.focus();
+        }
+      }, 0);
+
+      onFocusChange?.(false);
+    }
+  }, [isActive, restoreFocus, onFocusChange]);
+
+  // Handle keyboard navigation for focus trapping
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    if (!isActive || !trapFocus || focusableElements.current.length === 0) return;
+
+    const { key, shiftKey } = event;
+
+    if (key === 'Tab') {
+      event.preventDefault();
+
+      const currentIndex = focusableElements.current.findIndex(
+        el => el === document.activeElement
+      );
+
+      let nextIndex: number;
+
+      if (shiftKey) {
+        // Shift + Tab: move backward
+        nextIndex = currentIndex <= 0 
+          ? focusableElements.current.length - 1 
+          : currentIndex - 1;
+      } else {
+        // Tab: move forward
+        nextIndex = currentIndex >= focusableElements.current.length - 1 
+          ? 0 
+          : currentIndex + 1;
+      }
+
+      focusableElements.current[nextIndex]?.focus();
+    }
+  }, [isActive, trapFocus]);
+
+  // Add/remove keyboard event listeners
+  useEffect(() => {
+    if (isActive && trapFocus) {
+      document.addEventListener('keydown', handleKeyDown);
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+  }, [isActive, trapFocus, handleKeyDown]);
+
+  // Update focusable elements when children change
+  useEffect(() => {
+    if (isActive) {
+      focusableElements.current = getFocusableElements();
+    }
+  }, [isActive, getFocusableElements]);
+
+  return (
+    <div 
+      ref={containerRef}
+      className={`focus-manager ${className}`}
+      tabIndex={-1} // Make container focusable for focus management
+    >
+      {children}
+    </div>
+  );
+};
+
+export default FocusManager;