Tab Navigation

/**
 * Context provider for tab coordination and accessibility
 * @param props - Component props including value and children
 * @returns Context provider component
 */
function TabContext(props: TabContextProps): JSX.Element;

interface TabContextProps {
  /** Child components, typically TabList and TabPanel elements */
  children?: React.ReactNode;
  /** Currently selected tab value - must match Tab and TabPanel value props */
  value: string | number;
}

import React from 'react';
import { TabContext, TabList, TabPanel } from '@mui/lab';
import { Tab } from '@mui/material';

function MyTabs() {
  const [value, setValue] = React.useState('1');

  return (
    <TabContext value={value}>
      <TabList onChange={(event, newValue) => setValue(newValue)}>
        <Tab label="Tab 1" value="1" />
        <Tab label="Tab 2" value="2" />
      </TabList>
      <TabPanel value="1">Panel 1 Content</TabPanel>
      <TabPanel value="2">Panel 2 Content</TabPanel>
    </TabContext>
  );
}

/**
 * Enhanced Tabs component with automatic ARIA management
 * @param props - Extended Material-UI Tabs props
 * @returns Enhanced tabs component
 */
function TabList(props: TabListProps): JSX.Element;

interface TabListProps extends Omit<TabsProps, 'children' | 'value'> {
  /** List of Tab components */
  children?: React.ReactNode;
}

// Inherited from Material-UI TabsProps
interface TabsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
  /** Callback fired when tab is changed */
  onChange?: (event: React.SyntheticEvent, value: any) => void;
  /** Orientation of the tabs */
  orientation?: 'horizontal' | 'vertical';
  /** Determines how scrollable tabs should be handled */
  scrollButtons?: 'auto' | false | true;
  /** Tab selection indicator style */
  indicatorColor?: 'primary' | 'secondary';
  /** Tab text color */
  textColor?: 'inherit' | 'primary' | 'secondary';
  /** Tab variant style */
  variant?: 'standard' | 'scrollable' | 'fullWidth';
  /** Allow scroll on the left side */
  allowScrollButtonsMobile?: boolean;
  /** Component for the scroll buttons */
  ScrollButtonComponent?: React.ElementType;
  /** Properties applied to the scroll buttons */
  scrollButtonsHideMobile?: boolean;
}

import { TabContext, TabList } from '@mui/lab';
import { Tab, Box } from '@mui/material';

function VerticalTabs() {
  const [value, setValue] = React.useState('1');

  return (
    <TabContext value={value}>
      <Box sx={{ flexGrow: 1, display: 'flex' }}>
        <TabList 
          orientation="vertical"
          onChange={(event, newValue) => setValue(newValue)}
          sx={{ borderRight: 1, borderColor: 'divider' }}
        >
          <Tab label="Item One" value="1" />
          <Tab label="Item Two" value="2" />
          <Tab label="Item Three" value="3" />
        </TabList>
        {/* TabPanels would go here */}
      </Box>
    </TabContext>
  );
}

/**
 * Content container for individual tab panels
 * @param props - Component props with value matching
 * @returns Tab panel content container
 */
function TabPanel(props: TabPanelProps): JSX.Element;

interface TabPanelProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
  /** Content to display when this panel is active */
  children?: React.ReactNode;
  /** CSS classes for styling customization */
  classes?: Partial<TabPanelClasses>;
  /** System prop for styling */
  sx?: SxProps<Theme>;
  /** Value that must match TabContext value to show this panel */
  value: string | number;
  /** Keep panel content mounted in DOM when not active (default: false) */
  keepMounted?: boolean;
}

interface TabPanelClasses {
  /** Class applied to the root element */
  root: string;
}

import { TabContext, TabList, TabPanel } from '@mui/lab';
import { Tab, Typography } from '@mui/material';

function TabsWithContent() {
  const [value, setValue] = React.useState('1');

  return (
    <TabContext value={value}>
      <TabList onChange={(event, newValue) => setValue(newValue)}>
        <Tab label="Overview" value="1" />
        <Tab label="Details" value="2" />
      </TabList>
      
      <TabPanel value="1" keepMounted={false}>
        <Typography>Overview content goes here</Typography>
      </TabPanel>
      
      <TabPanel value="2" sx={{ padding: 2 }}>
        <Typography>Detailed information content</Typography>
      </TabPanel>
    </TabContext>
  );
}

/**
 * Hook to consume TabContext within components
 * @returns Tab context value or null if outside provider
 */
function useTabContext(): TabContextValue | null;

interface TabContextValue {
  /** ID prefix for generating ARIA IDs */
  idPrefix: string;
  /** Current tab value */
  value: string;
}

/**
 * Generate ARIA ID for tab panel
 * @param context - Tab context value
 * @param tabValue - Value of the tab
 * @returns Generated panel ID
 */
function getPanelId(context: TabContextValue, tabValue: string): string;

/**
 * Generate ARIA ID for tab
 * @param context - Tab context value  
 * @param tabValue - Value of the tab
 * @returns Generated tab ID
 */
function getTabId(context: TabContextValue, tabValue: string): string;

// Available CSS classes for TabPanel
const tabPanelClasses: {
  root: string;
};