import { ComponentPropsWithoutRef } from 'react'; import { DataTrackingId, LayoutUtilProps, Size } from '../../types'; import { SegmentedControlSegmentProps } from './SegmentedControlSegment'; /** * Base props for SegmentedControl component * @extends Omit, "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "onChange"> * @extends LayoutUtilProps */ type BaseSegmentedControlProps = Omit, "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "onChange"> & LayoutUtilProps & DataTrackingId & { /** * Callback when segment is changed */ onChange?: (value: SegmentedControlSegmentProps["value"]) => void; /** * Size of the segment * @default "medium" */ size?: Extract; /** * Whether to fill available width * @default false */ fill?: boolean; /** * Name attribute for radio inputs * @remarks If empty, it will auto generate one using useId() */ name?: string; /** * The segments to render within the segmented control */ children?: React.ReactNode; }; /** * Props for controlled SegmentedControl */ type ControlledSegmentedControlProps = BaseSegmentedControlProps & { /** * Selected segment (controlled mode) */ selected: SegmentedControlSegmentProps["value"]; defaultSelected?: never; }; /** * Props for uncontrolled SegmentedControl */ type UncontrolledSegmentedControlProps = BaseSegmentedControlProps & { /** * Initial selection (uncontrolled mode) */ defaultSelected: SegmentedControlSegmentProps["value"]; selected?: never; }; /** * Props for the SegmentedControl component */ export type SegmentedControlProps = ControlledSegmentedControlProps | UncontrolledSegmentedControlProps; /** * SegmentedControl component for selecting one option from a group of related choices. * * Features: * - Supports both controlled and uncontrolled modes * - Multiple size variants (small, medium) * - Optional fill width mode * - Smooth animations with motion * - Accessibility support with proper radio group semantics * - Layout utility props for positioning and spacing * - Context-based state management * - Auto-generated or custom name attributes * - Segment support via SegmentedControl.Segment * - Data tracking id support * * @example * * Option 1 * Option 2 * Option 3 * * * @example * * Small * Large * */ export declare const SegmentedControl: import('react').ForwardRefExoticComponent> & { /** * SegmentedControlSegment component for individual segments within a segmented control. * * Features: * - Individual segment with radio input * - Optional icon support * - Animated selection indicator * - Accessibility support with proper ARIA attributes * - Context integration with parent SegmentedControl * - Motion animations with reduced motion support * * @example * * Option 1 * */ Segment: import('react').ForwardRefExoticComponent, HTMLLabelElement>, "ref"> & { icon?: import('..').IconProps["svg"]; value: string; children?: React.ReactNode; } & DataTrackingId & import('react').RefAttributes>; }; export default SegmentedControl;