import { n as FocusableOptions } from "../focusable-u2sImvln.js";
import { n as CollectionItemOptions } from "../collection-item-DRA-Dc3W.js";
import { n as DisclosureContentOptions } from "../disclosure-content-C02hnFtD.js";
import { TabStore } from "./tab-store.js";
import { Props } from "@ariakit/react-utils";
import { ElementType, RefObject } from "react";
//#region src/tab/tab-panel.d.ts
declare const TagName = "div";
type TagName = typeof TagName;
/**
 * Returns props to create a `TabPanel` component.
 * @see https://ariakit.com/components/tab
 * @example
 * ```jsx
 * const store = useTabStore();
 * const props = useTabPanel({ store });
 * <TabList store={store}>
 *   <Tab>Tab 1</Tab>
 * </TabList>
 * <Role {...props}>Panel 1</Role>
 * ```
 */
declare const useTabPanel: import("@ariakit/react-utils").Hook<"div", TabPanelOptions<"div">>;
/**
 * Renders a tab panel element that's controlled by a
 * [`Tab`](https://ariakit.com/reference/tab) component.
 *
 * If the [`tabId`](https://ariakit.com/reference/tab-panel#tabid) prop isn't
 * provided, the tab panel will automatically associate with a
 * [`Tab`](https://ariakit.com/reference/tab) based on its position in the DOM.
 * Alternatively, you can render a single tab panel with a dynamic
 * [`tabId`](https://ariakit.com/reference/tab-panel#tabid) value pointing to
 * the selected tab.
 * @see https://ariakit.com/components/tab
 * @example
 * ```jsx {6,7}
 * <TabProvider>
 *   <TabList>
 *     <Tab>Tab 1</Tab>
 *     <Tab>Tab 2</Tab>
 *   </TabList>
 *   <TabPanel>Panel 1</TabPanel>
 *   <TabPanel>Panel 2</TabPanel>
 * </TabProvider>
 * ```
 */
declare const TabPanel: (props: TabPanelProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
interface TabPanelOptions<T extends ElementType = TagName> extends FocusableOptions<T>, CollectionItemOptions<T>, Omit<DisclosureContentOptions<T>, "store"> {
  /**
   * Object returned by the
   * [`useTabStore`](https://ariakit.com/reference/use-tab-store) hook. If not
   * provided, the closest
   * [`TabProvider`](https://ariakit.com/reference/tab-provider) component's
   * context will be used.
   */
  store?: TabStore;
  /**
   * The [`id`](https://ariakit.com/reference/tab#id) of the tab controlling
   * this panel. This connection is used to assign the `aria-labelledby`
   * attribute to the tab panel and to determine if the tab panel should be
   * visible.
   *
   * This link is automatically established by matching the order of
   * [`Tab`](https://ariakit.com/reference/tab) and
   * [`TabPanel`](https://ariakit.com/reference/tab-panel) elements in the DOM.
   * If you're rendering a single tab panel, this can be set to a dynamic value
   * that refers to the selected tab.
   *
   * Live examples:
   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)
   * - [Tab with React Router](https://ariakit.com/examples/tab-react-router)
   * - [Animated TabPanel](https://ariakit.com/examples/tab-panel-animated)
   * - [Select with Combobox and
   *   Tabs](https://ariakit.com/examples/select-combobox-tab)
   * - [Command Menu with
   *   Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)
   */
  tabId?: string | null;
  /**
   * Manages the scrolling behavior of the tab panel when it is hidden and then
   * shown again.
   *
   * This is especially useful when using a single tab panel for multiple tabs,
   * where you dynamically change the
   * [`tabId`](https://ariakit.com/reference/tab-panel#tabid) prop and the
   * panel's children, which would otherwise retain the current scroll position
   * when switching tabs.
   *
   * When set to `true`, the component will save the scroll position and restore
   * it when the panel is shown again. When set to `"reset"`, the scroll
   * position will reset to the top when the panel is displayed again.
   *
   * The default scroll element is the tab panel itself. To scroll a different
   * element, use the
   * [`scrollElement`](https://ariakit.com/reference/tab-panel#scrollelement)
   * prop.
   * @default false
   */
  scrollRestoration?: boolean | "reset";
  /**
   * When using the
   * [`scrollRestoration`](https://ariakit.com/reference/tab-panel#scrollrestoration)
   * prop, the tab panel element serves as the default scroll element. You can
   * use this prop to designate a different element for scrolling.
   *
   * If a function is provided, it will be called with the tab panel element as
   * an argument. The function should return the element to scroll.
   * @example
   * ```jsx
   * <TabPanel
   *   scrollRestoration
   *   scrollElement={(panel) => panel.querySelector(".scrollable")}
   * />
   * ```
   */
  scrollElement?: HTMLElement | RefObject<HTMLElement | null> | ((panel: HTMLElement) => HTMLElement | null);
}
type TabPanelProps<T extends ElementType = TagName> = Props<T, TabPanelOptions<T>>;
//#endregion
export { TabPanel, TabPanelOptions, TabPanelProps, useTabPanel };
//# sourceMappingURL=tab-panel.d.ts.map