@kaspersky/components/src/checkbox/types.d.ts

Kaspersky Design System UI Kit

import { FocusEvent, ReactNode, ReactElement } from 'react';
import { Theme } from '../../design-system/types/index.js';
import { CheckboxProps as AntdCheckboxProps, CheckboxGroupProps as AntdCheckboxGroupProps } from 'antd/es/checkbox';
import { FormLabelMode } from '../form-label/types.js';
import { Focus } from '../../design-system/tokens/focus.js';
import { TestingProps, ToViewProps } from '../../helpers/typesHelpers.js';
export declare type CheckboxToViewProps<T> = ToViewProps<T, CheckboxCssConfig, CheckboxThemeProps>;
export declare type StateProps = {
    color?: string;
    bgColor?: string;
    borderColor?: string;
    checkColor?: string;
    checkBgColor?: string;
    iconColor?: string;
};
export declare type CheckboxColorConfig = Focus & {
    normal?: StateProps;
    hover?: StateProps;
    active?: StateProps;
    disabled?: StateProps;
    readonly?: StateProps;
    invalid?: StateProps;
};
export declare type CheckboxSizeConfig = {
    radius?: string;
    height?: string;
};
export declare type CheckboxCssConfig = CheckboxColorConfig & CheckboxSizeConfig;
export declare type CheckboxThemeProps = {
    /** Custom theme */
    theme?: Theme;
};
export declare type CheckboxProps = AntdCheckboxProps & CheckboxThemeProps & TestingProps & {
    /** React children */
    children?: ReactNode;
    /** Custom class name */
    className?: string;
    /** Is readonly */
    readonly?: boolean;
    /** Is invalid */
    invalid?: boolean;
    /** HTML role */
    role?: string;
    /** Called when the checkbox is focused */
    onFocus?: FocusEvent<HTMLElement>;
    /** If form label is required */
    required?: boolean;
    /** Form label tooltip content */
    tooltip?: ReactNode;
    /** Form label mode */
    mode?: FormLabelMode;
};
export declare type CheckboxViewProps = CheckboxToViewProps<CheckboxProps>;
export declare type Option = {
    label: string | ReactElement;
    value: string | number;
    disabled?: boolean;
    readonly?: boolean;
    mode?: FormLabelMode;
    invalid?: boolean;
};
export declare type CheckboxGroupProps = AntdCheckboxGroupProps & CheckboxThemeProps & TestingProps & {
    /** Group options */
    options?: Option[];
    /** Is invalid */
    invalid?: boolean;
    /** Is readonly */
    readonly?: boolean;
    /** Form label mode */
    mode?: FormLabelMode;
    /** Group direction */
    direction?: 'horizontal' | 'vertical';
    /** HTML role */
    role?: string;
    /** Called when the state changes */
    onChange?: (checkedValue: any) => void;
};
/** @deprecated Use CheckboxProps instead */
export declare type ICheckboxProps = CheckboxProps;
/** @deprecated Use CheckboxViewProps instead */
export declare type ICheckboxViewProps = CheckboxViewProps;
/** @deprecated Use CheckboxGroupProps instead */
export declare type ICheckboxGroupProps = CheckboxGroupProps;