/**
 * Tabs Component
 *
 * A flexible tabs component with multiple visual variants.
 *
 * ## Variants
 *
 * Pass `variant` prop to `TabsList`:
 *
 * - **boxed** - Tabs with muted background container (default)
 * - **pill** - Fully rounded tabs with muted background
 * - **bordered** - Transparent background with bottom border indicator
 * - **lifted** - Browser-tab style with active tab lifted above border
 *
 * ## Usage
 *
 * ```tsx
 * // Boxed variant (default)
 * <Tabs defaultValue="tab1">
 *   <TabsList variant="boxed">
 *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
 *   </TabsList>
 * </Tabs>
 *
 * // Bordered variant with counts
 * <Tabs defaultValue="all">
 *   <TabsList variant="bordered">
 *     <TabsTriggerWithCount value="all" count={5} isActive>All</TabsTriggerWithCount>
 *     <TabsTriggerWithCount value="mine" count={3}>Mine</TabsTriggerWithCount>
 *   </TabsList>
 * </Tabs>
 *
 * // With icons
 * <Tabs defaultValue="home">
 *   <TabsList variant="boxed" size="md">
 *     <TabsTrigger value="home" icon={<Home />}>Home</TabsTrigger>
 *     <TabsTrigger value="settings" icon={<Settings />}>Settings</TabsTrigger>
 *   </TabsList>
 * </Tabs>
 *
 * // Pill variant with gradient
 * <Tabs defaultValue="tab1">
 *   <TabsList variant="pill" gradient>
 *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
 *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
 *   </TabsList>
 * </Tabs>
 *
 * // Animated indicator (smooth sliding underline)
 * <Tabs defaultValue="tab1">
 *   <TabsList variant="bordered">
 *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
 *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
 *     <TabsIndicator />
 *   </TabsList>
 * </Tabs>
 * ```
 *
 * @module Tabs
 */
import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
import type { VariantProps } from 'class-variance-authority';
import * as React from 'react';
import { TabsContent, TabsIndicator, tabsListVariants, tabsTriggerVariants } from '../../../ui/tabs.js';
export interface TabsProps extends Omit<TabsPrimitive.Root.Props, 'onValueChange'> {
    /** Controlled active tab value. When provided, component is controlled. */
    value?: string;
    /** Initial active tab for uncontrolled mode */
    defaultValue?: string;
    /** Callback when active tab changes */
    onValueChange?: (value: string) => void;
}
export interface TabsListProps extends TabsPrimitive.List.Props, VariantProps<typeof tabsListVariants> {
    /** Enable gradient styling on active tab (boxed/pill variants only) */
    gradient?: boolean;
}
export interface TabsTriggerProps extends TabsPrimitive.Tab.Props {
    /** Icon element to render in the tab */
    icon?: React.ReactNode;
    /** Position of the icon relative to text */
    iconPosition?: 'start' | 'top';
    /** Show a notification dot indicator */
    dot?: boolean;
    /** Badge element to render after the text (e.g., count or status badge) */
    badge?: React.ReactNode;
}
export type TabsContentProps = TabsPrimitive.Panel.Props;
export type TabsIndicatorProps = TabsPrimitive.Indicator.Props;
export interface TabsTriggerWithCountProps extends TabsTriggerProps {
    /** Count to display in badge */
    count?: number;
    /** Whether this tab is currently active (used for badge styling) */
    isActive?: boolean;
}
declare function TabsRoot({ value: controlledValue, defaultValue, onValueChange, orientation, children, className, ...props }: TabsProps): React.JSX.Element;
declare function TabsList({ className, variant, size, align, borderPosition, gradient, ...props }: TabsListProps): React.JSX.Element;
declare namespace TabsList {
    var displayName: string;
}
declare function TabsTrigger({ className, icon, iconPosition, dot, badge, children, ...props }: TabsTriggerProps): React.JSX.Element;
declare namespace TabsTrigger {
    var displayName: string;
}
/**
 * Extended tab trigger with an optional count badge.
 * Best used with the `bordered` variant for filter-style tabs.
 *
 * @example
 * ```tsx
 * <TabsList variant="bordered">
 *   <TabsTriggerWithCount value="all" count={5} isActive>All Meetings</TabsTriggerWithCount>
 *   <TabsTriggerWithCount value="my" count={4}>My Meetings</TabsTriggerWithCount>
 *   <TabsTriggerWithCount value="shared" count={1}>Shared with me</TabsTriggerWithCount>
 * </TabsList>
 * ```
 */
declare function TabsTriggerWithCount({ children, count, isActive, className, ...props }: TabsTriggerWithCountProps): React.JSX.Element;
declare namespace TabsTriggerWithCount {
    var displayName: string;
}
/**
 * Tabs compound component with dot notation access to sub-components.
 *
 * @example
 * ```tsx
 * <Tabs defaultValue="tab1">
 *   <Tabs.List>
 *     <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
 *     <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
 *   </Tabs.List>
 *   <Tabs.Content value="tab1">Content 1</Tabs.Content>
 *   <Tabs.Content value="tab2">Content 2</Tabs.Content>
 * </Tabs>
 * ```
 */
declare const Tabs: typeof TabsRoot & {
    Root: typeof TabsRoot;
    List: typeof TabsList;
    Trigger: typeof TabsTrigger;
    Content: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").TabsPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
    Indicator: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
    TriggerWithCount: typeof TabsTriggerWithCount;
};
export { Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, TabsTriggerWithCount, tabsListVariants, tabsTriggerVariants, };