Navigation Components

import { NavBar, Dropdown, TabBar, Tabs, SideBar, Steps } from "antd-mobile";

/**
 * Navigation bar component
 * @param props - NavBar configuration
 * @returns React navigation bar element
 */
function NavBar(props: NavBarProps): JSX.Element;

interface NavBarProps {
  /** Back button content */
  back?: React.ReactNode;
  /** Whether to show back icon */
  backIcon?: boolean | React.ReactNode;
  /** Left area content */
  left?: React.ReactNode;
  /** Right area content */
  right?: React.ReactNode;
  /** Back button click handler */
  onBack?: () => void;
  /** Title content (children) */
  children?: React.ReactNode;
} & NativeProps<'--height' | '--border-bottom' | '--background'>;

import { NavBar, Button } from "antd-mobile";

<NavBar
  back="Back"
  right={<Button fill="none">Edit</Button>}
  onBack={() => history.back()}
>
  User Profile
</NavBar>

/**
 * Dropdown component with trigger and content areas
 * @param props - Dropdown configuration
 * @returns React dropdown element
 */
function Dropdown(props: DropdownProps): JSX.Element;

/**
 * Dropdown item component for menu options
 * @param props - DropdownItem configuration
 * @returns React dropdown item element
 */
function DropdownItem(props: DropdownItemProps): JSX.Element;

interface DropdownProps {
  /** Currently active dropdown key */
  activeKey?: string | null;
  /** Default active dropdown key */
  defaultActiveKey?: string | null;
  /** Whether to close when mask is clicked */
  closeOnMaskClick?: boolean;
  /** Whether to close when clicking outside */
  closeOnClickAway?: boolean;
  /** Callback when active key changes */
  onChange?: (key: string | null) => void;
  /** Custom arrow icon */
  arrowIcon?: React.ReactNode;
  /** Portal container for dropdown content */
  getContainer?: () => HTMLElement;
  /** Dropdown items */
  children?: React.ReactNode;
} & NativeProps;

interface DropdownItemProps {
  /** Unique key for the dropdown item */
  key: string;
  /** Item title */
  title: React.ReactNode;
  /** Whether the item is active */
  active?: boolean;
  /** Whether to highlight the item */
  highlight?: boolean;
  /** Whether to force render when closed */
  forceRender?: boolean;
  /** Whether to destroy content when closed */
  destroyOnClose?: boolean;
  /** Click handler */
  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
  /** Custom arrow icon */
  arrowIcon?: React.ReactNode;
  /** Item content */
  children?: React.ReactNode;
} & NativeProps;

interface DropdownRef {
  /** Close the dropdown */
  close(): void;
}

import { Dropdown, Button } from "antd-mobile";

function DropdownExample() {
  return (
    <Dropdown>
      <Dropdown.Item key="sort" title="Sort">
        <div>
          <Button>Name</Button>
          <Button>Date</Button>
          <Button>Size</Button>
        </div>
      </Dropdown.Item>
      <Dropdown.Item key="filter" title="Filter">
        <div>
          <Button>All</Button>
          <Button>Images</Button>
          <Button>Documents</Button>
        </div>
      </Dropdown.Item>
    </Dropdown>
  );
}

/**
 * Bottom tab bar component
 * @param props - TabBar configuration
 * @returns React tab bar element
 */
function TabBar(props: TabBarProps): JSX.Element;

interface TabBarProps {
  /** Current active tab key */
  activeKey?: string;
  /** Default active tab key */
  defaultActiveKey?: string;
  /** Tab change handler */
  onChange?: (key: string) => void;
  /** Tab bar content */
  children?: React.ReactNode;
} & NativeProps<'--background-color'>;

/**
 * Tab bar item component
 * @param props - TabBarItem configuration
 * @returns React tab bar item element
 */
function TabBarItem(props: TabBarItemProps): JSX.Element;

interface TabBarItemProps {
  /** Tab key */
  key?: string;
  /** Tab title */
  title?: React.ReactNode;
  /** Tab icon */
  icon?: React.ReactNode | ((active: boolean) => React.ReactNode);
  /** Badge content */
  badge?: React.ReactNode;
  /** Tab content */
  children?: React.ReactNode;
} & NativeProps;

// Usage through TabBar namespace
declare namespace TabBar {
  const Item: typeof TabBarItem;
}

import { TabBar } from "antd-mobile";

<TabBar activeKey="home" onChange={(key) => setActiveTab(key)}>
  <TabBar.Item
    key="home"
    title="Home"
    icon={<HomeOutline />}
    badge="5"
  />
  <TabBar.Item
    key="messages"
    title="Messages"
    icon={<MessageOutline />}
    badge="99+"
  />
  <TabBar.Item
    key="profile"
    title="Profile"
    icon={<UserOutline />}
  />
</TabBar>

/**
 * Horizontal tabs component
 * @param props - Tabs configuration
 * @returns React tabs element
 */
function Tabs(props: TabsProps): JSX.Element;

interface TabsProps {
  /** Current active tab key */
  activeKey?: string;
  /** Default active tab key */
  defaultActiveKey?: string;
  /** Tab change handler */
  onChange?: (key: string) => void;
  /** Line position */
  activeLineMode?: 'auto' | 'full' | 'fixed';
  /** Tabs direction */
  direction?: 'horizontal' | 'vertical';
  /** Whether tabs stretch to fill container */
  stretch?: boolean;
  /** Tab content */
  children?: React.ReactNode;
} & NativeProps<'--content-padding' | '--tabs-gap' | '--tab-color' | '--active-tab-color' | '--active-line-color' | '--active-line-height' | '--active-line-border-radius'>;

/**
 * Tab pane component
 * @param props - TabPane configuration
 * @returns React tab pane element
 */
function TabPane(props: TabProps): JSX.Element;

interface TabProps {
  /** Tab key */
  key: string;
  /** Tab title */
  title?: React.ReactNode;
  /** Whether tab is disabled */
  disabled?: boolean;
  /** Force render tab content */
  forceRender?: boolean;
  /** Destroy inactive tabs */
  destroyOnHide?: boolean;
  /** Tab content */
  children?: React.ReactNode;
}

// Usage through Tabs namespace
declare namespace Tabs {
  const Tab: typeof TabPane;
}

/**
 * Capsule-style tabs component
 * @param props - CapsuleTabs configuration
 * @returns React capsule tabs element
 */
function CapsuleTabs(props: CapsuleTabsProps): JSX.Element;

interface CapsuleTabsProps {
  /** Current active tab key */
  activeKey?: string;
  /** Default active tab key */
  defaultActiveKey?: string;
  /** Tab change handler */
  onChange?: (key: string) => void;
  /** Tab content */
  children?: React.ReactNode;
} & NativeProps<'--border-radius' | '--background-color' | '--active-color' | '--active-background-color'>;

/**
 * Capsule tab component
 * @param props - CapsuleTab configuration
 * @returns React capsule tab element
 */
function CapsuleTab(props: CapsuleTabProps): JSX.Element;

interface CapsuleTabProps {
  /** Tab key */
  key: string;
  /** Tab title */
  title?: React.ReactNode;
  /** Whether tab is disabled */
  disabled?: boolean;
  /** Tab content */
  children?: React.ReactNode;
}

// Usage through CapsuleTabs namespace
declare namespace CapsuleTabs {
  const Tab: typeof CapsuleTab;
}

/**
 * Large tabs component
 * @param props - JumboTabs configuration
 * @returns React jumbo tabs element
 */
function JumboTabs(props: JumboTabsProps): JSX.Element;

interface JumboTabsProps {
  /** Current active tab key */
  activeKey?: string;
  /** Default active tab key */
  defaultActiveKey?: string;
  /** Tab change handler */
  onChange?: (key: string) => void;
  /** Tab content */
  children?: React.ReactNode;
} & NativeProps<'--border-radius' | '--background-color' | '--active-color' | '--active-background-color' | '--content-padding'>;

/**
 * Jumbo tab component
 * @param props - JumboTab configuration
 * @returns React jumbo tab element
 */
function JumboTab(props: JumboTabProps): JSX.Element;

interface JumboTabProps {
  /** Tab key */
  key: string;
  /** Tab title */
  title?: React.ReactNode;
  /** Tab description */
  description?: React.ReactNode;
  /** Whether tab is disabled */
  disabled?: boolean;
  /** Tab content */
  children?: React.ReactNode;
}

// Usage through JumboTabs namespace
declare namespace JumboTabs {
  const Tab: typeof JumboTab;
}

/**
 * Sidebar navigation component
 * @param props - SideBar configuration
 * @returns React sidebar element
 */
function SideBar(props: SideBarProps): JSX.Element;

interface SideBarProps {
  /** Current active item key */
  activeKey?: string;
  /** Default active item key */
  defaultActiveKey?: string;
  /** Item change handler */
  onChange?: (key: string) => void;
  /** Sidebar content */
  children?: React.ReactNode;
} & NativeProps<'--width' | '--item-border-radius' | '--background-color' | '--item-background-color' | '--item-text-color' | '--active-item-background-color' | '--active-item-text-color' | '--active-item-border-color'>;

/**
 * Sidebar item component
 * @param props - SideBarItem configuration
 * @returns React sidebar item element
 */
function SideBarItem(props: SideBarItemProps): JSX.Element;

interface SideBarItemProps {
  /** Item key */
  key: string;
  /** Item title */
  title?: React.ReactNode;
  /** Whether item is disabled */
  disabled?: boolean;
  /** Badge content */
  badge?: React.ReactNode;
  /** Item content */
  children?: React.ReactNode;
}

// Usage through SideBar namespace
declare namespace SideBar {
  const Item: typeof SideBarItem;
}

/**
 * Page dots indicator component
 * @param props - PageIndicator configuration
 * @returns React page indicator element
 */
function PageIndicator(props: PageIndicatorProps): JSX.Element;

interface PageIndicatorProps {
  /** Total number of pages */
  total: number;
  /** Current active page index */
  current?: number;
  /** Indicator direction */
  direction?: 'horizontal' | 'vertical';
  /** Custom indicator color */
  color?: 'primary' | 'white' | string;
} & NativeProps<'--dot-color' | '--active-dot-color' | '--dot-size' | '--dot-border-radius' | '--dot-spacing'>;

/**
 * Step progress indicator component
 * @param props - Steps configuration
 * @returns React steps element
 */
function Steps(props: StepsProps): JSX.Element;

interface StepsProps {
  /** Current active step */
  current?: number;
  /** Steps direction */
  direction?: 'horizontal' | 'vertical';
  /** Step size */
  size?: 'mini' | 'small';
  /** Steps content */
  children?: React.ReactNode;
} & NativeProps<'--title-font-size' | '--description-font-size' | '--indicator-margin-right' | '--icon-size' | '--dot-size'>;

/**
 * Step item component
 * @param props - Step configuration
 * @returns React step element
 */
function Step(props: StepProps): JSX.Element;

interface StepProps {
  /** Step title */
  title?: React.ReactNode;
  /** Step description */
  description?: React.ReactNode;
  /** Step icon */
  icon?: React.ReactNode;
  /** Step status */
  status?: 'wait' | 'process' | 'finish' | 'error';
}

// Usage through Steps namespace
declare namespace Steps {
  const Step: typeof Step;
}

/**
 * Index navigation bar component
 * @param props - IndexBar configuration
 * @returns React index bar element
 */
function IndexBar(props: IndexBarProps): JSX.Element;

interface IndexBarProps {
  /** Whether index bar is sticky */
  sticky?: boolean;
  /** Sticky offset from top */
  stickyOffsetTop?: number;
  /** Index change handler */
  onChange?: (index: string) => void;
  /** Index bar content */
  children?: React.ReactNode;
} & NativeProps<'--sticky-offset-top' | '--sidebar-width' | '--item-height' | '--sidebar-background' | '--sidebar-text-color' | '--sidebar-active-color'>;

/**
 * Index bar panel component
 * @param props - IndexBarPanel configuration
 * @returns React index bar panel element
 */
function IndexBarPanel(props: IndexBarPanelProps): JSX.Element;

interface IndexBarPanelProps {
  /** Panel index key */
  index: string;
  /** Panel title */
  title?: React.ReactNode;
  /** Brief description */
  brief?: React.ReactNode;
  /** Panel content */
  children?: React.ReactNode;
}

interface IndexBarRef {
  /** Scroll to specific index */
  scrollTo(index: string): void;
}

// Usage through IndexBar namespace
declare namespace IndexBar {
  const Panel: typeof IndexBarPanel;
}

import { 
  NavBar, 
  TabBar, 
  Tabs, 
  Steps, 
  PageIndicator 
} from "antd-mobile";

function NavigationExample() {
  const [activeTab, setActiveTab] = useState('home');
  const [currentStep, setCurrentStep] = useState(1);

  return (
    <div>
      {/* Navigation Bar */}
      <NavBar
        back="Back"
        right={<Button fill="none">More</Button>}
        onBack={() => history.back()}
      >
        Page Title
      </NavBar>

      {/* Horizontal Tabs */}
      <Tabs activeKey="tab1" onChange={setActiveTab}>
        <Tabs.Tab key="tab1" title="Tab 1">
          Content 1
        </Tabs.Tab>
        <Tabs.Tab key="tab2" title="Tab 2">
          Content 2
        </Tabs.Tab>
      </Tabs>

      {/* Step Progress */}
      <Steps current={currentStep}>
        <Steps.Step title="Step 1" description="Complete basic info" />
        <Steps.Step title="Step 2" description="Upload documents" />
        <Steps.Step title="Step 3" description="Review and submit" />
      </Steps>

      {/* Page Indicator */}
      <PageIndicator total={5} current={2} />

      {/* Bottom Tab Bar */}
      <TabBar activeKey={activeTab} onChange={setActiveTab}>
        <TabBar.Item key="home" title="Home" icon={<HomeOutline />} />
        <TabBar.Item key="search" title="Search" icon={<SearchOutline />} />
        <TabBar.Item key="profile" title="Profile" icon={<UserOutline />} />
      </TabBar>
    </div>
  );
}