@stratakit/structures/dist/Tabs.d.ts

Medium-sized component structures for the Strata design system

import * as AkTab from "@ariakit/react/tab";
import type { BaseProps, FocusableProps } from "@stratakit/foundations/secret-internals";
interface TabsProviderProps extends Pick<AkTab.TabProviderProps, "defaultSelectedId" | "selectedId" | "setSelectedId" | "selectOnMove" | "children"> {
    /** @default false */
    selectOnMove?: AkTab.TabProviderProps["selectOnMove"];
}
/**
 * A set of tabs that can be used to switch between different views.
 *
 * `Tabs` is a compound component with subcomponents exposed for different parts.
 *
 * Example:
 * ```tsx
 * <Tabs.Provider>
 *   <Tabs.TabList>
 *     <Tabs.Tab id="tab-1">Tab 1</Tabs.Tab>
 *     <Tabs.Tab id="tab-2">Tab 2</Tabs.Tab>
 *     <Tabs.Tab id="tab-3">Tab 3</Tabs.Tab>
 *   </Tabs.TabList>
 *
 *   <Tabs.TabPanel tabId="tab-1">Tab 1 content</Tabs.TabPanel>
 *   <Tabs.TabPanel tabId="tab-2">Tab 2 content</Tabs.TabPanel>
 *   <Tabs.TabPanel tabId="tab-3">Tab 3 content</Tabs.TabPanel>
 * </Tabs.Provider>
 * ```
 *
 * The tabs and their panels are connected by matching the `id` prop on the `Tabs.Tab` component with
 * the `tabId` prop on the `Tabs.TabPanel` component.
 *
 * The `Tabs` component automatically manages the selected tab state. The initially selected tab can be set using `defaultSelectedId`.
 * To take full control the selected tab state, use the `selectedId` and `setSelectedId` props together.
 *
 * **Note**: `Tabs` should _not_ be used for navigation; it is only intended for switching smaller views within an existing page.
 */
declare function TabsProvider(props: TabsProviderProps): import("react").JSX.Element;
declare namespace TabsProvider {
    var displayName: string;
}
interface TabListProps extends BaseProps {
    /** @default "neutral" */
    tone?: "neutral" | "accent";
}
/**
 * A simple container for the tab buttons.
 * Should be used as a child of `Tabs.Provider` and consist of the individual `Tabs.Tab` components.
 *
 * Example:
 * ```tsx
 * <Tabs.TabList>
 *   <Tabs.Tab id="tab-1">Tab 1</Tabs.Tab>
 *   <Tabs.Tab id="tab-2">Tab 2</Tabs.Tab>
 *   <Tabs.Tab id="tab-3">Tab 3</Tabs.Tab>
 * </Tabs.TabList>
 * ```
 */
declare const TabList: import("react").ForwardRefExoticComponent<TabListProps & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
interface TabProps extends Omit<FocusableProps<"button">, "id"> {
    /**
     * The globally unique id of the tab. This will be used to identify the tab
     * and connect it to the corresponding `Tabs.TabPanel` via the `tabId`.
     *
     * The `selectedId` state of `Tabs.Provider` will also be based on this id.
     */
    id: string;
}
/**
 * An individual tab button that switches the selected tab panel when clicked.
 *
 * Should be used as a child of `Tabs.TabList` and be paired with a `Tabs.TabPanel`,
 * connected using an id.
 *
 * Example:
 * ```tsx
 * <Tabs.Tab id="tab-1">Tab 1</Tabs.Tab>
 * ```
 *
 * Start and end icons can be added by passing `Icon` as children.
 *
 * ```tsx
 * <Tabs.Tab id="tab-1">
 *   <Icon href={…} />
 *   Tab 1
 *   <Icon href={…} />
 * </Tabs.Tab>
 * ```
 */
declare const Tab: import("react").ForwardRefExoticComponent<TabProps & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
interface TabPanelProps extends FocusableProps<"div">, Pick<AkTab.TabPanelProps, "unmountOnHide" | "focusable">, Required<Pick<AkTab.TabPanelProps, "tabId">> {
}
/**
 * The actual content of a tab, shown when the tab is selected. Should be used as a child of `Tabs.Provider`.
 * The `tabId` prop should match the `id` prop of the corresponding `Tabs.Tab` component.
 *
 * Example:
 * ```tsx
 * <Tabs.TabPanel tabId="tab-1">Tab 1 content</Tabs.TabPanel>
 * ```
 */
declare const TabPanel: import("react").ForwardRefExoticComponent<TabPanelProps & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
export { Tab, TabList, TabPanel, TabsProvider as Provider };