import { ComponentPropsWithoutRef } from 'react'; import { SegmentedControlSegmentProps } from './SegmentedControlSegment'; import { LayoutUtilProps } from '../Label'; import { Size } from '../../types'; /** * Context props for SegmentedControl internal state management */ export type SegmentedControlContextProps = { /** * Currently selected segment value */ current?: SegmentedControlSegmentProps["value"]; /** * Function to set the current segment */ setCurrent?: (value: SegmentedControlSegmentProps["value"]) => void; /** * Change handler for the segmented control */ onChange?: SegmentedControlProps["onChange"]; /** * Name attribute for radio inputs */ name?: string; }; /** * Base props for SegmentedControl component * @extends Omit, "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "onChange"> * @extends LayoutUtilProps */ type BaseSegmentedControlProps = Omit, "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "onChange"> & LayoutUtilProps & { /** * 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; export declare const SegmentedControlContext: import('react').Context; /** * 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 * * @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; } & import('react').RefAttributes>; }; export default SegmentedControl;