import type React from 'react';
import type { SelectDetail, TabItem } from './types.js';
export interface TabsRef extends HTMLElement {
    /** Focuses the active tab. */
    focus(): void;
    /** Activates the tab at the given index. Fires cx-change. */
    activateTab(index: number): void;
}
/**
 * Pass tabs as the typed `items` array property, not as JSON text.
 * Each item needs `value` and `label`. Tab panel content is rendered via the default slot.
 * Controlled mode: set `activeTab` to a tab value or index.
 * The `onChange` event detail contains the selected tab value.
 *
 * In React, reach the imperative methods through a ref:
 * `const api = useRef<TabsRef>(null)`, pass `ref={api}`, then `api.current?.focus()`.
 * Available: focus(), activateTab().
 *
 * @csspart base, panel, tablist
 */
export interface TabsOwnProps {
    /**
     * Unique identifier for the element.
     * @example 'example-id'
     */
    id?: string;
    /**
     * Visible label text.
     * @example 'Example label'
     */
    label: string;
    /**
     * Typed array of item data objects. Bind as a property; do not stringify it or use children for list items.
     * @example [{ value: 'overview', label: 'Overview' }]
     */
    items?: TabItem[];
    /**
     * ID of the tab to activate on initial render.
     * @example 'example'
     */
    defaultTab?: string;
    /**
     * Visual style variant. Allowed values: `underline`, `enclosed`, `pill`.
     * @example 'underline'
     */
    variant?: 'underline' | 'enclosed' | 'pill';
    /**
     * Layout orientation (horizontal or vertical). Allowed values: `horizontal`, `vertical`.
     * @example 'horizontal'
     */
    orientation?: 'horizontal' | 'vertical';
    /**
     * Tab bar width preset. Allowed values: `auto`, `full`.
     * @example 'auto'
     */
    width?: 'auto' | 'full';
    /**
     * Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`.
     * @example 'xs'
     */
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    /**
     * Controlled active tab. Set to a tab value or index to switch tabs without re-render. Updates on user interaction.
     * @example 'example'
     */
    activeTab?: string;
    /**
     * Fires when the committed component value or state changes. Detail: `SelectDetail`.
     * @example (event) => console.log(event.detail.value)
     */
    onChange?: (event: CustomEvent<SelectDetail>) => void;
    /** CSS class applied to the Custom Element host.
     * @example 'my-component'
     */
    className?: string;
    /** Inline styles applied to the Custom Element host.
     * @example { marginTop: 8 }
     */
    style?: React.CSSProperties;
}
/**
 * Props for `<Tabs>`: the component's own API plus every standard DOM
 * attribute and native React event handler, forwarded verbatim to the
 * `<cx-tabs>` host — `id`, `data-*`, `aria-*`, `title`, `tabIndex`,
 * `slot`, `onMouseEnter`, and the rest. Own props always win over a
 * same-named DOM attribute.
 */
export type TabsProps = TabsOwnProps & Omit<React.HTMLAttributes<HTMLElement>, keyof TabsOwnProps | 'children' | 'dangerouslySetInnerHTML'>;
export declare const Tabs: React.ForwardRefExoticComponent<TabsOwnProps & Omit<React.HTMLAttributes<HTMLElement>, "children" | "dangerouslySetInnerHTML" | keyof TabsOwnProps> & React.RefAttributes<TabsRef>>;