Core Tab Interface

/**
 * Main tabs component with forwardRef support
 * @param props - Configuration props for the tabs component
 * @param ref - React ref forwarded to the root div element
 * @returns JSX element containing the complete tabs interface
 */
const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => JSX.Element);

interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
  /** CSS class prefix for styling customization (default: 'rc-tabs') */
  prefixCls?: string;
  /** Additional CSS class names */
  className?: string;
  /** Inline styles for the tabs container */
  style?: React.CSSProperties;
  /** HTML id attribute for the tabs container */
  id?: string;
  
  /** Array of tab configuration objects */
  items?: Tab[];
  
  /** Currently active tab key (controlled mode) */
  activeKey?: string;
  /** Default active tab key (uncontrolled mode) */
  defaultActiveKey?: string;
  
  /** Text direction for RTL support */
  direction?: 'ltr' | 'rtl';
  /** Animation configuration for transitions */
  animated?: boolean | AnimatedConfig;
  /** Position of the tab bar relative to content */
  tabPosition?: TabPosition;
  /** Whether to destroy inactive tab panes (memory optimization) */
  destroyInactiveTabPane?: boolean;
  
  /** Callback fired when active tab changes */
  onChange?: (activeKey: string) => void;
  /** Callback fired when a tab is clicked */
  onTabClick?: (activeKey: string, e: React.KeyboardEvent | React.MouseEvent) => void;
  /** Callback fired when tab bar is scrolled */
  onTabScroll?: OnTabScroll;
  
  /** Custom tab bar rendering function */
  renderTabBar?: RenderTabBar;
  /** Extra content to display in the tab bar */
  tabBarExtraContent?: TabBarExtraContent;
  /** Gap between individual tabs in pixels */
  tabBarGutter?: number;
  /** Styles for the tab bar container */
  tabBarStyle?: React.CSSProperties;
  
  /** Configuration for editable tabs functionality */
  editable?: EditableConfig;
  /** Function to get popup container for dropdowns */
  getPopupContainer?: (node: HTMLElement) => HTMLElement;
  /** CSS class name for popup elements */
  popupClassName?: string;
  
  /** Internationalization configuration */
  locale?: TabsLocale;
  /** More dropdown configuration for overflow tabs */
  more?: MoreProps;
  /** Tab indicator configuration */
  indicator?: {
    size?: GetIndicatorSize;
    align?: 'start' | 'center' | 'end';
  };
}

import Tabs from "rc-tabs";

// Basic tabs
function BasicTabs() {
  return (
    <Tabs
      items={[
        { key: '1', label: 'Home', children: <div>Home content</div> },
        { key: '2', label: 'About', children: <div>About content</div> },
      ]}
      defaultActiveKey="1"
    />
  );
}

// Controlled tabs with custom styling
function ControlledTabs() {
  const [activeKey, setActiveKey] = useState('1');
  
  return (
    <Tabs
      activeKey={activeKey}
      onChange={setActiveKey}
      className="custom-tabs"
      tabPosition="left"
      animated={{ inkBar: true, tabPane: true }}
      items={[
        { key: '1', label: 'Dashboard', children: <Dashboard /> },
        { key: '2', label: 'Settings', children: <Settings /> },
      ]}
    />
  );
}

// RTL support
function RTLTabs() {
  return (
    <Tabs
      direction="rtl"
      items={tabItems}
      locale={{
        dropdownAriaLabel: 'المزيد من علامات التبويب',
        removeAriaLabel: 'إزالة علامة التبويب',
        addAriaLabel: 'إضافة علامة تبويب جديدة',
      }}
    />
  );
}

/**
 * Callback type for tab change events
 * @param activeKey - The key of the newly active tab
 */
type OnChange = (activeKey: string) => void;

/**
 * Callback type for tab click events
 * @param activeKey - The key of the clicked tab
 * @param e - The mouse or keyboard event that triggered the click
 */
type OnTabClick = (activeKey: string, e: React.KeyboardEvent | React.MouseEvent) => void;

/**
 * Callback type for tab scroll events
 * @param info - Information about the scroll direction
 */
type OnTabScroll = (info: { direction: 'left' | 'right' | 'top' | 'bottom' }) => void;

interface TabsLocale {
  /** ARIA label for dropdown menu containing overflow tabs */
  dropdownAriaLabel?: string;
  /** ARIA label for remove tab buttons */
  removeAriaLabel?: string;
  /** ARIA label for add tab button */
  addAriaLabel?: string;
}

/**
 * Mobile detection and responsive behavior
 * - Automatic touch gesture support
 * - Optimized tab sizing for mobile devices
 * - Swipe navigation on touch devices
 * - Responsive overflow handling
 */