@primer/react
Version:
An implementation of GitHub's Primer Design System using React
58 lines • 1.95 kB
TypeScript
import React, { type FC, type PropsWithChildren } from 'react';
import type { IconProps } from '@primer/octicons-react';
import type { FCWithSlotMarker } from '../../utils/types';
export type UnderlinePanelsProps = {
/**
* Tabs (UnderlinePanels.Tab) and panels (UnderlinePanels.Panel) to render
*/
children: React.ReactNode;
/**
* Accessible name for the tab list
*/
'aria-label'?: React.AriaAttributes['aria-label'];
/**
* ID of the element containing the name for the tab list
*/
'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
/**
* Custom string to use when generating the IDs of tabs and `aria-labelledby` for the panels
*/
id?: string;
/**
* Loading state for all counters. It displays loading animation for individual counters until all are resolved. It is needed to prevent multiple layout shift.
*/
loadingCounters?: boolean;
/**
* Class name for custom styling
*/
className?: string;
/**
* Element type for the tab container
*/
as?: React.ElementType;
};
export type TabProps = PropsWithChildren<{
/**
* Whether this is the selected tab
*/
'aria-selected'?: boolean;
/**
* Callback that will trigger both on click selection and keyboard selection.
*/
onSelect?: (event: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
/**
* Content of CounterLabel rendered after tab text label
*/
counter?: number | string;
/**
* Icon rendered before the tab text label
*/
icon?: FC<IconProps>;
}>;
export type PanelProps = React.HTMLAttributes<HTMLDivElement>;
declare const _default: React.FC<UnderlinePanelsProps> & import("../..").SlotMarker & {
Panel: FCWithSlotMarker<PanelProps>;
Tab: FCWithSlotMarker<TabProps>;
};
export default _default;
//# sourceMappingURL=UnderlinePanels.d.ts.map