import React from "react";
/**
 * Size options for the Tabs component
 * @example
 * <Tabs size="sm"> - Smaller tabs with reduced padding
 * <Tabs size="md"> - Default medium-sized tabs
 */
export type TabsSize = "sm" | "md";
/**
 * Orientation options for the Tabs component
 * @note Currently only horizontal orientation is supported
 * @example
 * <Tabs orientation="horizontal"> - Horizontal tab layout (default)
 */
export type TabsOrientation = "horizontal";
/**
 * Main Tabs component props following the compound component pattern
 * @example
 * ```tsx
 * // Controlled mode
 * <Tabs value={activeTab} onValueChange={setActiveTab} size="md">
 *   <Tabs.List>
 *     <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
 *     <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
 *   </Tabs.List>
 *   <Tabs.Body value="tab1">Content 1</Tabs.Body>
 *   <Tabs.Body value="tab2">Content 2</Tabs.Body>
 * </Tabs>
 *
 * // Uncontrolled mode
 * <Tabs defaultValue="tab1">
 *   // ... same structure
 * </Tabs>
 * ```
 */
export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
    /** The currently selected value (controlled mode) - when provided, component is controlled */
    value?: string;
    /** The default selected value (uncontrolled mode) - used when value is not provided */
    defaultValue?: string;
    /** Function called when selection changes - receives the new active tab value */
    onValueChange?: (value: string) => void;
    /** Orientation of the tabs (currently only horizontal is supported) */
    orientation?: TabsOrientation;
    /** Size variant for all tab triggers within this tabs instance */
    size?: TabsSize;
    /** Whether all tabs are disabled - individual triggers can also be disabled */
    disabled?: boolean;
    /** Children components - typically Tabs.List and Tabs.Body components */
    children?: React.ReactNode;
    /**
     * Force dark mode styling for the component. Use when placing the component
     * on a dark background while the page is in light mode. This applies the
     * 'dark' class to the container, making text, borders, and other elements
     * use light colors for visibility.
     * @default false
     */
    darkMode?: boolean;
}
/**
 * TabsList component props - container for tab trigger buttons
 * @example
 * ```tsx
 * <Tabs.List className="custom-list-styles">
 *   <Tabs.Trigger value="profile">Profile</Tabs.Trigger>
 *   <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
 * </Tabs.List>
 * ```
 */
export interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
    /** Children TabsTrigger components - should only contain Tabs.Trigger elements */
    children?: React.ReactNode;
}
/**
 * TabsTrigger component props - individual tab button/header
 * Supports optional Framer Motion animations and comprehensive accessibility
 * @example
 * ```tsx
 * <Tabs.Trigger value="profile" disabled={false}>
 *   <UserIcon className="w-4 h-4" />
 *   Profile
 * </Tabs.Trigger>
 *
 * // Icon-only trigger (should include aria-label)
 * <Tabs.Trigger value="settings" aria-label="Settings tab">
 *   <CogIcon className="w-4 h-4" />
 * </Tabs.Trigger>
 * ```
 */
export interface TabsTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
    /** The unique value identifier for this tab - used to associate with corresponding content */
    value: string;
    /** Whether this specific tab trigger is disabled (overrides parent tabs disabled state) */
    disabled?: boolean;
    /** Content to display in the tab trigger - text, icons, or combination */
    children?: React.ReactNode;
    /** Accessibility label - strongly recommended for icon-only tabs */
    'aria-label'?: string;
}
/**
 * TabsBody component props - content panel for each tab
 * @example
 * ```tsx
 * <Tabs.Body value="profile">
 *   <UserProfile data={profileData} />
 * </Tabs.Body>
 *
 * // Force mount content for performance or state preservation
 * <Tabs.Body value="settings" forceMount>
 *   <SettingsForm /> // Form state preserved when tab is inactive
 * </Tabs.Body>
 * ```
 */
export interface TabsBodyProps extends React.HTMLAttributes<HTMLDivElement> {
    /** The value that corresponds to a TabsTrigger value - determines when content is shown */
    value: string;
    /** Whether to keep content mounted in DOM when inactive (useful for preserving form state) */
    forceMount?: boolean;
    /** Content to display when this tab is active */
    children?: React.ReactNode;
}
/**
 * Internal context value for Tabs compound components
 * Provides shared state and configuration to child components
 * @internal - This interface is used internally and not intended for external use
 */
export interface TabsContextValue {
    /** Currently active tab value */
    value: string;
    /** Handler to change the active tab */
    onValueChange: (value: string) => void;
    /** Layout orientation for all tabs */
    orientation: TabsOrientation;
    /** Size variant applied to all triggers */
    size: TabsSize;
    /** Whether all tabs are disabled */
    disabled: boolean;
    /** Register a tab trigger's position for underline animation */
    registerTrigger: (value: string, element: HTMLButtonElement) => void;
    /** Unregister a tab trigger when it unmounts */
    unregisterTrigger: (value: string) => void;
}
