@primer/react-brand/esm/river/RiverBreakoutTabs/RiverBreakoutTabs.d.ts

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

import React from 'react';
import { type HeadingProps } from '../..';
import { type IconProps } from '../../Icon';
import { type RiverVisualProps } from '../River/River';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css';
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css';
export type RiverBreakoutTabsProps = React.PropsWithChildren<{
    defaultSelectedIndex?: number;
    selectedIndex?: number;
    onChange?: (selectedIndex: number) => void;
    /**
     * Decorative background rendered behind the visual and persisted across tab
     * changes. Must not contain interactive and remain purely decorative.
     */
    backgroundVisual?: React.ReactNode;
    /**
     * Alignment of media within the visual container when `backgroundVisual` is provided
     */
    imagePosition?: 'center' | 'block-end';
    /**
     * When `true`, the `backgroundVisual` bleeds out to the gridline edges instead of being inset within them
     */
    backgroundVisualFullBleed?: boolean;
}> & Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>;
export type RiverBreakoutTabsItemProps = React.PropsWithChildren<{
    className?: string;
}>;
export type RiverBreakoutTabsA11yHeadingProps = React.PropsWithChildren<{
    as?: 'h2' | 'h3';
    id?: string;
}>;
export type RiverBreakoutTabsHeadingProps = HeadingProps;
export type RiverBreakoutTabsContentProps = React.HTMLAttributes<HTMLDivElement>;
export type RiverBreakoutTabsIconProps = IconProps;
/**
 * Use RiverBreakoutTabs to showcase multiple feature stories within a single immersive surface.
 */
export declare const RiverBreakoutTabs: React.ForwardRefExoticComponent<{
    defaultSelectedIndex?: number;
    selectedIndex?: number;
    onChange?: (selectedIndex: number) => void;
    /**
     * Decorative background rendered behind the visual and persisted across tab
     * changes. Must not contain interactive and remain purely decorative.
     */
    backgroundVisual?: React.ReactNode;
    /**
     * Alignment of media within the visual container when `backgroundVisual` is provided
     */
    imagePosition?: "center" | "block-end";
    /**
     * When `true`, the `backgroundVisual` bleeds out to the gridline edges instead of being inset within them
     */
    backgroundVisualFullBleed?: boolean;
} & {
    children?: React.ReactNode | undefined;
} & Omit<React.HTMLAttributes<HTMLElement>, "onChange"> & React.RefAttributes<HTMLElement>> & {
    A11yHeading: ({ as, children, id }: RiverBreakoutTabsA11yHeadingProps) => import("react/jsx-runtime").JSX.Element;
    Content: ({ children, className, ...props }: RiverBreakoutTabsContentProps) => import("react/jsx-runtime").JSX.Element;
    Heading: ({ as, children, className, size, weight, ...props }: RiverBreakoutTabsHeadingProps) => import("react/jsx-runtime").JSX.Element;
    Icon: ({ color, ...props }: RiverBreakoutTabsIconProps) => import("react/jsx-runtime").JSX.Element;
    Item: ({ children }: RiverBreakoutTabsItemProps) => import("react/jsx-runtime").JSX.Element;
    Visual: React.ForwardRefExoticComponent<Omit<RiverVisualProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
};
//# sourceMappingURL=RiverBreakoutTabs.d.ts.map