@primer/react-brand/lib/hooks/useTabs.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import { type HTMLAttributes } from 'react';
export type OnTabActivate = (id: string, activeTabRef?: HTMLElement) => void;
export type UseTabsOptions = {
    defaultTab?: string;
    autoActivate?: boolean;
    onTabActivate?: OnTabActivate;
    orientation?: 'horizontal' | 'vertical';
};
export type TabState = {
    activeTab: string | null;
    focusedTab: string | null;
    tabs: Set<string>;
};
export type TabListProps = {
    label?: string;
    labelledBy?: string;
};
export type UseTabs = {
    activeTab: string | null;
    focusedTab: string | null;
    activateTab: (id: string) => void;
    focusTab: (id: string) => void;
    getTabListProps: (props?: TabListProps) => HTMLAttributes<HTMLElement>;
    getTabProps: (id: string, externalRef?: React.Ref<HTMLElement>) => HTMLAttributes<HTMLElement>;
    getTabPanelProps: (id: string) => HTMLAttributes<HTMLElement>;
};
export declare const useTabs: ({ defaultTab, autoActivate, orientation, onTabActivate, }?: UseTabsOptions) => UseTabs;