@primer/react-brand/lib/Tabs/Tabs.d.ts

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

import React, { ReactNode, HTMLAttributes } from 'react';
import { BaseProps } from '../component-helpers';
import { AnimationVariants } from '../animation';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tabs/base.css';
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/tabs/colors-with-modes.css';
/**
 * Accessible label for the entire tabs component, used by screen readers to describe the tab group.
 * Note: Only use one of `aria-label` or `aria-labelled` by. Not both or neither.
 */
type LabelOrLabelledBy = {
    'aria-label': string;
    'aria-labelledby'?: never;
} | {
    'aria-labelledby': string;
    'aria-label'?: never;
};
export type TabsProps = {
    /**
     * Visual style variant of the tabs. Affects the appearance and styling theme.
     */
    variant?: 'default' | 'accent' | 'underline';
    /**
     * Horizontal alignment of the tab navigation. Defaults to 'start'.
     */
    align?: 'start' | 'center';
    /**
     * Named children to be rendered as tab items and panels.
     */
    children: ReactNode;
    /**
     * Sets the default active tab. "0" (first tab) by default.
     */
    defaultActiveTab?: string;
    /**
     * Callback function triggered when the active tab changes. Receives the new active tab identifier.
     */
    onChange?: (activeTab: string) => void;
    /**
     * Additional CSS class names to apply to the tabs container for custom styling.
     */
    className?: string;
    /**
     * @param internalAccessibleLabels - Customizable labels for screen readers to improve accessibility. These are applied internally using the aria-label attribute.
     * @param internalAccessibleLabels.controlsNext - Label for the "next tab" control button, used by screen readers. Default is "Next tab".
     * @param internalAccessibleLabels.controlsPrev - Label for the "previous tab" control button, used by screen readers. Default is "Previous tab".
     */
    internalAccessibleLabels?: {
        controlsNext: string;
        controlsPrev: string;
    };
} & LabelOrLabelledBy & BaseProps<HTMLDivElement> & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'aria-label' | 'aria-labelledby'>;
export type TabsItemProps = {
    children: ReactNode;
    className?: string;
    isActive?: boolean;
    variant?: 'default' | 'accent';
    /**
     * ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes
     * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility
     * relationships between tabs and panels.
     * @see https://primer.style/brand/components/Tabs/#custom-panels
     */
    id?: string;
} & Omit<React.ComponentPropsWithoutRef<'button'>, 'id'>;
export type TabsPanelProps = {
    children: ReactNode;
    className?: string;
    animation?: (typeof AnimationVariants)[number] | false;
    hidden?: boolean;
    /**
     * ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes
     * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility
     * relationships between tabs and panels.
     * @see https://primer.style/brand/components/Tabs/#custom-panels
     */
    id?: string;
} & Omit<React.HTMLAttributes<HTMLDivElement>, 'id'>;
/**
 * Use Tabs to display a list of tabs with associated content panels.
 * @see https://primer.style/brand/components/Tabs
 */
export declare const Tabs: React.ForwardRefExoticComponent<(Omit<{
    /**
     * Visual style variant of the tabs. Affects the appearance and styling theme.
     */
    variant?: "default" | "accent" | "underline";
    /**
     * Horizontal alignment of the tab navigation. Defaults to 'start'.
     */
    align?: "start" | "center";
    /**
     * Named children to be rendered as tab items and panels.
     */
    children: ReactNode;
    /**
     * Sets the default active tab. "0" (first tab) by default.
     */
    defaultActiveTab?: string;
    /**
     * Callback function triggered when the active tab changes. Receives the new active tab identifier.
     */
    onChange?: (activeTab: string) => void;
    /**
     * Additional CSS class names to apply to the tabs container for custom styling.
     */
    className?: string;
    /**
     * @param internalAccessibleLabels - Customizable labels for screen readers to improve accessibility. These are applied internally using the aria-label attribute.
     * @param internalAccessibleLabels.controlsNext - Label for the "next tab" control button, used by screen readers. Default is "Next tab".
     * @param internalAccessibleLabels.controlsPrev - Label for the "previous tab" control button, used by screen readers. Default is "Previous tab".
     */
    internalAccessibleLabels?: {
        controlsNext: string;
        controlsPrev: string;
    };
} & {
    'aria-label': string;
    'aria-labelledby'?: never;
} & BaseProps<HTMLDivElement> & Omit<React.HTMLAttributes<HTMLDivElement>, "aria-label" | "aria-labelledby" | "onChange">, "ref"> | Omit<{
    /**
     * Visual style variant of the tabs. Affects the appearance and styling theme.
     */
    variant?: "default" | "accent" | "underline";
    /**
     * Horizontal alignment of the tab navigation. Defaults to 'start'.
     */
    align?: "start" | "center";
    /**
     * Named children to be rendered as tab items and panels.
     */
    children: ReactNode;
    /**
     * Sets the default active tab. "0" (first tab) by default.
     */
    defaultActiveTab?: string;
    /**
     * Callback function triggered when the active tab changes. Receives the new active tab identifier.
     */
    onChange?: (activeTab: string) => void;
    /**
     * Additional CSS class names to apply to the tabs container for custom styling.
     */
    className?: string;
    /**
     * @param internalAccessibleLabels - Customizable labels for screen readers to improve accessibility. These are applied internally using the aria-label attribute.
     * @param internalAccessibleLabels.controlsNext - Label for the "next tab" control button, used by screen readers. Default is "Next tab".
     * @param internalAccessibleLabels.controlsPrev - Label for the "previous tab" control button, used by screen readers. Default is "Previous tab".
     */
    internalAccessibleLabels?: {
        controlsNext: string;
        controlsPrev: string;
    };
} & {
    'aria-labelledby': string;
    'aria-label'?: never;
} & BaseProps<HTMLDivElement> & Omit<React.HTMLAttributes<HTMLDivElement>, "aria-label" | "aria-labelledby" | "onChange">, "ref">) & React.RefAttributes<HTMLDivElement>> & {
    Item: React.ForwardRefExoticComponent<{
        children: ReactNode;
        className?: string;
        isActive?: boolean;
        variant?: "default" | "accent";
        /**
         * ⚠️ WARNING: Setting a custom id will override the automatically generated ARIA attributes
         * (aria-controls, aria-labelledby). You will need to manually implement proper accessibility
         * relationships between tabs and panels.
         * @see https://primer.style/brand/components/Tabs/#custom-panels
         */
        id?: string;
    } & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "id"> & React.RefAttributes<HTMLButtonElement>>;
    Panel: React.NamedExoticComponent<TabsPanelProps>;
    testIds: {
        root: string;
        readonly tab: string;
        readonly panel: string;
        readonly indicators: string;
    };
};
export {};