@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
81 lines (80 loc) • 4.31 kB
TypeScript
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 = string> {
value: Value;
label: React.ReactNode;
disabled?: boolean;
}
export interface SegmentedControlProps<Value extends Primitive = string> extends BoxProps, StylesApiProps<SegmentedControlFactory>, ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {
/** Data based on which controls are rendered */
data: (Value | SegmentedControlItem<Value>)[];
/** 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: <Value extends Primitive = string>(props: SegmentedControlProps<Value>) => React.JSX.Element | null;
}>;
export declare const SegmentedControl: (<Value extends Primitive = string>(props: SegmentedControlProps<Value>) => React.JSX.Element | null) & import("../..").ThemeExtend<{
props: SegmentedControlProps;
ref: HTMLDivElement;
stylesNames: SegmentedControlStylesNames;
vars: SegmentedControlCssVariables;
signature: <Value extends Primitive = string>(props: SegmentedControlProps<Value>) => React.JSX.Element | null;
}> & import("../..").ComponentClasses<{
props: SegmentedControlProps;
ref: HTMLDivElement;
stylesNames: SegmentedControlStylesNames;
vars: SegmentedControlCssVariables;
signature: <Value extends Primitive = string>(props: SegmentedControlProps<Value>) => React.JSX.Element | null;
}> & Record<string, never> & {
varsResolver: import("../..").VarsResolver<{
props: SegmentedControlProps;
ref: HTMLDivElement;
stylesNames: SegmentedControlStylesNames;
vars: SegmentedControlCssVariables;
signature: <Value extends Primitive = string>(props: SegmentedControlProps<Value>) => React.JSX.Element | null;
}>;
} & import("../..").FactoryComponentWithProps<{
props: SegmentedControlProps;
ref: HTMLDivElement;
stylesNames: SegmentedControlStylesNames;
vars: SegmentedControlCssVariables;
signature: <Value extends Primitive = string>(props: SegmentedControlProps<Value>) => React.JSX.Element | null;
}> & {
displayName?: string;
};