@theguild/components/dist/components/tabs/index.d.mts

import * as react from 'react';
import { ComponentProps } from 'react';
import * as _headlessui_react from '@headlessui/react';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { Tabs as Tabs$1 } from './index.client.mjs';
export { TabsProps } from './index.client.mjs';

/**
 * A built-in component for creating tabbed content, helping organize related information in a
 * compact, interactive layout.
 *
 * @example
 * <Tabs items={['pnpm', 'npm', 'yarn']}>
 *   <Tabs.Tab>**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
 *   <Tabs.Tab>**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
 *   <Tabs.Tab>**Yarn** is a software packaging system.</Tabs.Tab>
 * </Tabs>
 *
 * @usage
 * ```mdx
 * import { Tabs } from '@theguild/components'
 *
 * <Tabs items={['pnpm', 'npm', 'yarn']}>
 *   <Tabs.Tab>**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
 *   <Tabs.Tab>**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
 *   <Tabs.Tab>**Yarn** is a software packaging system.</Tabs.Tab>
 * </Tabs>
 * ```
 *
 * ### Default Selected Index
 *
 * You can use the `defaultIndex` prop to set the default tab index:
 *
 * ```mdx /defaultIndex="1"/
 * import { Tabs } from '@theguild/components'
 *
 * <Tabs items={['pnpm', 'npm', 'yarn']} defaultIndex="1">
 *   ...
 * </Tabs>
 * ```
 *
 * And you will have `npm` as the default tab:
 *
 * <Tabs items={['pnpm', 'npm', 'yarn']} defaultIndex="1">
 *   <Tabs.Tab>**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
 *   <Tabs.Tab>**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
 *   <Tabs.Tab>**Yarn** is a software packaging system.</Tabs.Tab>
 * </Tabs>
 */
declare const Tabs: ((props: ComponentProps<typeof Tabs$1>) => react_jsx_runtime.JSX.Element) & {
    Tab: react.FC<_headlessui_react.TabPanelProps>;
};

export { Tabs };