import { FocusEvent, ForwardedRef, KeyboardEvent, RefCallback } from 'react'; import { SegmentedControlItem } from './segmented-control.types'; /** * CSS transform and width values used to position the sliding thumb or focus * indicator absolutely over a specific segment element. */ interface IndicatorStyle { /** CSS `translateX` value derived from the segment's `offsetLeft`. */ transform: string; /** Pixel width derived from the segment's `offsetWidth`. */ width: string; } /** Parameters accepted by the `useSegmentedControl` hook. */ interface UseSegmentedControlParameters { /** Initial selected value for uncontrolled usage. */ defaultValue?: string; /** When `true`, all interaction is suppressed. */ disabled: boolean; /** Ordered list of segment descriptors. */ items: SegmentedControlItem[]; /** Base name for the hidden radio inputs; auto-generated when omitted. */ name?: string; /** Callback fired when the selected value changes. */ onChange?: (value: string) => void; /** When `true`, the selected value is displayed but cannot be changed. */ readOnly: boolean; /** Forwarded ref from the `SegmentedControl` component. */ ref: ForwardedRef; /** Currently selected value for controlled usage. */ value?: string; } /** Values returned by `useSegmentedControl` for consumption by `SegmentedControl`. */ interface UseSegmentedControlReturn { /** Style for the focus-ring indicator, or `null` when no segment is focused. */ focusIndicatorStyle: IndicatorStyle | null; /** Capture-phase blur handler that clears the focused index when focus leaves the control. */ handleBlur: (event: FocusEvent) => void; /** Capture-phase focus handler that tracks which segment item currently has focus. */ handleFocus: (event: FocusEvent) => void; /** Keyboard handler supporting arrow navigation, Home/End, and Space/Enter activation. */ handleKeyDown: (event: KeyboardEvent) => void; /** Selects a segment by value, guarded by disabled and read-only checks. */ handleSelect: (value: string, isItemDisabled: boolean) => void; /** When `true`, suppresses the thumb CSS transition to prevent an unwanted initial animation. */ isThumbTransitionDisabled: boolean; /** Merged ref combining the forwarded ref and the internal root ref. */ mergedRef: null | RefCallback; /** Resolved `name` attribute shared by all hidden radio inputs in the group. */ resolvedName: string | undefined; /** The currently selected segment value. */ selectedValue: string | undefined; /** Stable callback to register or clear a segment element ref by its array index. */ setItemRef: (index: number, element: HTMLDivElement | null) => void; /** Index of the segment that should receive `tabIndex={0}` for roving-tabindex navigation. */ tabbableIndex: number; /** Style for the selected-item thumb indicator, or `null` when nothing is selected. */ thumbStyle: IndicatorStyle | null; } /** * Encapsulates all state and event-handling logic for the `SegmentedControl` * component, including: * - Controlled/uncontrolled value management via `useControlledValue` * - Roving-tabindex keyboard navigation * - Animated thumb and focus-ring indicator positioning via synchronous DOM * measurements in a layout effect * - `ResizeObserver`-based indicator recalculation on container resize */ declare const useSegmentedControl: (parameters: UseSegmentedControlParameters) => UseSegmentedControlReturn; export default useSegmentedControl;