@kaspersky/components/src/segmented-button/types.d.ts

Kaspersky Design System UI Kit

import { ReactNode } from 'react';
import { Size, Theme } from '../../design-system/types/index.js';
import { ToViewProps, TestingProps } from '../../helpers/typesHelpers.js';
import { Focus } from '../../design-system/tokens/focus.js';
export declare type SegmentedButtonToViewProps<T> = ToViewProps<T, SegmentedButtonCssConfig, SegmentedButtonThemeProps>;
export declare type SegmentedButtonSize = `${Extract<Size, Size.Medium | Size.Large>}`;
export declare type SegmentedButtonSizeConfig = {
    padding?: string;
    height?: string;
    borderRadius?: string;
    minWidth?: string;
};
export declare type SegmentedButtonMode = 'grey' | 'red' | 'orange' | 'yellow' | 'grass' | 'emerald' | 'marengo' | 'marina' | 'purple' | 'violet';
declare type StateProps = {
    background?: string;
    color?: string;
    border?: string;
};
declare type CheckedUncheckedProps = {
    normal?: StateProps;
    hover?: StateProps;
    active?: StateProps;
    disabled?: StateProps;
};
export declare type SegmentedButtonColorConfig = Focus & {
    checked?: CheckedUncheckedProps;
    unchecked?: CheckedUncheckedProps;
};
export declare type SegmentedButtonCssConfig = SegmentedButtonSizeConfig & SegmentedButtonColorConfig;
export declare type SegmentedButtonThemeProps = {
    /** Default color mode of checked state */
    mode?: SegmentedButtonMode;
    /** Size */
    size?: SegmentedButtonSize;
    /** Custom theme */
    theme?: Theme;
};
export declare type SegmentedButtonType = 'checkbox' | 'radio';
export declare type SegmentedButtonItemClickFunc = (handledValue: string, selectedValues: string[]) => void;
export declare type SegmentedButtonProps = {
    /** Checkbox or radio behavior */
    type?: SegmentedButtonType;
    /** Is disabled */
    disabled?: boolean;
    /** Array of options */
    items: SegmentedButtonOption[];
    /** Controlled array value of selected options */
    value: string[];
    /** Handler */
    onChange: (value: string[]) => void;
    /** Custom class name of the container */
    className?: string;
} & SegmentedButtonThemeProps & TestingProps;
export declare type SegmentedButtonOption = {
    value: string;
    text?: ReactNode;
    className?: string;
    disabled?: boolean;
    mode?: SegmentedButtonMode;
    componentsBefore?: ReactNode[];
    componentsAfter?: ReactNode[];
    testId?: string;
};
export declare type SegmentedButtonOptionMapped = SegmentedButtonOption & {
    id: string;
};
export declare type SegmentedButtonItemProps = SegmentedButtonOptionMapped & {
    type: SegmentedButtonType;
    name?: string;
    selectedValues: string[];
    onChange: SegmentedButtonItemClickFunc;
} & Omit<SegmentedButtonThemeProps, 'mode'>;
export declare type SegmentedButtonItemViewProps = SegmentedButtonToViewProps<SegmentedButtonItemProps>;
export {};