import React from "react";
import type { WarpTabs, WarpTabsChangeEvent } from "./tabs.js";
export { Tab } from "../tab/react.js";
export { TabPanel } from "../tab-panel/react.js";
/**
 * Tabs are used to organize content by grouping similar information on the same page.
 *
 * To avoid hydration errors always provide IDs to both the Tab and TabPanel components,
 * and set the active tab panel to the first tab panel ID on the Tabs component.
 *
 * [Warp component reference](https://warp-ds.github.io/docs/components/tabs/frameworks/elements)
 *
 * @example
 * ```tsx
 * <Tabs active="panel1" onChange={(e) => e.detail.panelId}>
 * 	<Tab id="tab1" htmlFor="panel1">First</Tab>
 * 	<Tab id="tab2" htmlFor="panel2">Second</Tab>
 * 	<Tab id="tab3" htmlFor="panel3">Third</Tab>
 * 	<TabPanel id="panel1"><p>First panel content</p></TabPanel>
 * 	<TabPanel id="panel2"><p>Second panel content</p></TabPanel>
 * 	<TabPanel id="panel3"><p>Third panel content</p></TabPanel>
 * </Tabs>
 * ```
 */
export declare const Tabs: React.ForwardRefExoticComponent<Omit<Omit<React.HTMLAttributes<WarpTabs>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "updated" | "firstUpdated" | "render" | "renderOptions" | "onChange" | "active" | "tabs" | "activeTab"> & {
    onChange?: ((e: WarpTabsChangeEvent) => void) | undefined;
    onchange?: ((e: WarpTabsChangeEvent) => void) | undefined;
} & Partial<Omit<WarpTabs, keyof HTMLElement>> & React.RefAttributes<WarpTabs>, "ref"> & {
    /** The ID for the active tab is required to avoid hydration issues */
    active: string;
} & React.RefAttributes<WarpTabs>>;