@primer/react/dist/SegmentedControl/SegmentedControl.d.ts

An implementation of GitHub's Primer Design System using React

import { FCWithSlotMarker } from "../utils/types/Slots.js";
import { ResponsiveValue } from "../hooks/useResponsiveValue.js";
import { SegmentedControlButtonProps } from "./SegmentedControlButton.js";
import { SegmentedControlIconButtonProps } from "./SegmentedControlIconButton.js";
import { WidthOnlyViewportRangeKeys } from "../utils/types/ViewportRangeKeys.js";
import React from "react";

//#region src/SegmentedControl/SegmentedControl.d.ts
type SegmentedControlProps = {
  'aria-label'?: string;
  'aria-labelledby'?: string;
  'aria-describedby'?: string; /** Whether the control fills the width of its parent */
  fullWidth?: boolean | ResponsiveValue<boolean>; /** The handler that gets called when a segment is selected */
  onChange?: (selectedIndex: number) => void; /** The size of the buttons */
  size?: 'small' | 'medium'; /** Configure alternative ways to render the control when it gets rendered in tight spaces */
  variant?: 'default' | Partial<Record<WidthOnlyViewportRangeKeys, 'hideLabels' | 'dropdown' | 'default'>>;
  className?: string;
};
declare const SegmentedControl: React.FC<React.PropsWithChildren<SegmentedControlProps>> & {
  Button: FCWithSlotMarker<React.PropsWithChildren<SegmentedControlButtonProps>>;
  IconButton: FCWithSlotMarker<React.PropsWithChildren<SegmentedControlIconButtonProps>>;
};
//#endregion
export { SegmentedControl, SegmentedControlProps };