import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, Primitive, StylesApiProps } from '../../core'; export type SegmentedControlStylesNames = 'root' | 'input' | 'label' | 'control' | 'indicator' | 'innerLabel'; export type SegmentedControlCssVariables = { root: '--sc-radius' | '--sc-color' | '--sc-font-size' | '--sc-padding' | '--sc-shadow' | '--sc-transition-duration' | '--sc-transition-timing-function'; }; export interface SegmentedControlItem { value: Value; label: React.ReactNode; disabled?: boolean; } export interface SegmentedControlProps extends BoxProps, StylesApiProps, ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> { /** Data based on which controls are rendered */ data: (Value | SegmentedControlItem)[]; /** Controlled component value */ value?: Value; /** Uncontrolled component default value */ defaultValue?: Value; /** Called when value changes */ onChange?: (value: Value) => void; /** Determines whether the component is disabled */ disabled?: boolean; /** Name attribute for the radio group. A random name is auto-generated if not provided */ name?: string; /** Determines whether the component should take 100% width of its parent @default false */ fullWidth?: boolean; /** Key of `theme.colors` or any valid CSS color, changes indicator background color. By default, uses white in light mode and dark.5 in dark mode */ color?: MantineColor; /** Controls `font-size`, `padding` and `height` properties @default 'sm' */ size?: MantineSize | (string & {}); /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */ radius?: MantineRadius; /** Indicator `transition-duration` in ms, set `0` to turn off transitions @default 200 */ transitionDuration?: number; /** Indicator `transition-timing-function` property @default ease */ transitionTimingFunction?: string; /** Component orientation @default 'horizontal' */ orientation?: 'vertical' | 'horizontal'; /** If set to `false`, prevents changing the value */ readOnly?: boolean; /** If set, automatically adjusts label text color for optimal contrast against the indicator background color */ autoContrast?: boolean; /** Determines whether there should be borders between items @default true */ withItemsBorders?: boolean; } export type SegmentedControlFactory = Factory<{ props: SegmentedControlProps; ref: HTMLDivElement; stylesNames: SegmentedControlStylesNames; vars: SegmentedControlCssVariables; signature: (props: SegmentedControlProps) => React.JSX.Element | null; }>; export declare const SegmentedControl: ((props: SegmentedControlProps) => React.JSX.Element | null) & import("../..").ThemeExtend<{ props: SegmentedControlProps; ref: HTMLDivElement; stylesNames: SegmentedControlStylesNames; vars: SegmentedControlCssVariables; signature: (props: SegmentedControlProps) => React.JSX.Element | null; }> & import("../..").ComponentClasses<{ props: SegmentedControlProps; ref: HTMLDivElement; stylesNames: SegmentedControlStylesNames; vars: SegmentedControlCssVariables; signature: (props: SegmentedControlProps) => React.JSX.Element | null; }> & Record & { varsResolver: import("../..").VarsResolver<{ props: SegmentedControlProps; ref: HTMLDivElement; stylesNames: SegmentedControlStylesNames; vars: SegmentedControlCssVariables; signature: (props: SegmentedControlProps) => React.JSX.Element | null; }>; } & import("../..").FactoryComponentWithProps<{ props: SegmentedControlProps; ref: HTMLDivElement; stylesNames: SegmentedControlStylesNames; vars: SegmentedControlCssVariables; signature: (props: SegmentedControlProps) => React.JSX.Element | null; }> & { displayName?: string; }; export declare namespace SegmentedControl { type CssVariables = SegmentedControlCssVariables; type Factory = SegmentedControlFactory; type Item = SegmentedControlItem; type Props = SegmentedControlProps; type StylesNames = SegmentedControlStylesNames; }