@primer/react/dist/experimental/UnderlinePanels/UnderlinePanels.d.ts

An implementation of GitHub's Primer Design System using React

import { FCWithSlotMarker, SlotMarker } from "../../utils/types/Slots.js";
import React, { FC, PropsWithChildren } from "react";
import { IconProps } from "@primer/octicons-react";

//#region src/experimental/UnderlinePanels/UnderlinePanels.d.ts
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;
};
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>;
}>;
type PanelProps = React.HTMLAttributes<HTMLDivElement>;
declare const _default: React.FC<UnderlinePanelsProps> & SlotMarker & {
  Panel: FCWithSlotMarker<PanelProps>;
  Tab: FCWithSlotMarker<TabProps>;
};
//#endregion
export { PanelProps, TabProps, UnderlinePanelsProps, _default as default };