its-just-ui/dist/components/Checkbox/Checkbox.d.ts

ITS Just UI - The easiest and best React UI component library. Modern, accessible, and customizable components built with TypeScript and Tailwind CSS. Simple to use, production-ready components for building beautiful user interfaces with ease.

import { default as React } from 'react';

export type CheckboxVariant = 'default' | 'filled' | 'outlined' | 'ghost' | 'toggle' | 'switch' | 'card';
export type CheckboxSize = 'sm' | 'md' | 'lg';
export type CheckboxStatus = 'default' | 'success' | 'warning' | 'error' | 'info';
export type CheckboxTransition = 'none' | 'fade' | 'scale' | 'slide' | 'bounce';
export type CheckboxState = 'unchecked' | 'checked' | 'indeterminate';
export interface CheckboxContextValue {
    isChecked: boolean;
    isIndeterminate: boolean;
    isDisabled: boolean;
    isLoading: boolean;
    isRequired: boolean;
    onChange: (checked: boolean) => void;
    onFocus: () => void;
    onBlur: () => void;
    variant: CheckboxVariant;
    size: CheckboxSize;
    status: CheckboxStatus;
    transition: CheckboxTransition;
    inputId: string;
    labelId?: string;
    descriptionId?: string;
    helperTextId?: string;
    errorTextId?: string;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    backgroundColor?: string;
    checkedBackgroundColor?: string;
    indeterminateBackgroundColor?: string;
    hoverBackgroundColor?: string;
    disabledBackgroundColor?: string;
    checkmarkColor?: string;
    indeterminateColor?: string;
    labelTextColor?: string;
    descriptionTextColor?: string;
    helperTextColor?: string;
    errorTextColor?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    focusRingOffset?: string;
    focusBorderColor?: string;
    focusBackgroundColor?: string;
    boxShadow?: string;
    focusBoxShadow?: string;
    checkedBoxShadow?: string;
    labelFontSize?: string;
    labelTextSize?: string;
    labelFontWeight?: string;
    labelFontFamily?: string;
    descriptionFontSize?: string;
    gap?: string;
    padding?: string;
    paddingX?: string;
    paddingY?: string;
}
export interface CheckboxGroupContextValue {
    value: string[];
    onChange: (value: string[]) => void;
    isDisabled: boolean;
    isRequired: boolean;
    isSelected: (itemValue: string) => boolean;
    isIndeterminate: boolean;
    allSelected: boolean;
    selectAll: () => void;
    selectNone: () => void;
    toggleItem: (itemValue: string) => void;
    variant: CheckboxVariant;
    size: CheckboxSize;
    status: CheckboxStatus;
}
export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
    checked?: boolean;
    defaultChecked?: boolean;
    indeterminate?: boolean;
    onChange?: (checked: boolean) => void;
    loading?: boolean;
    required?: boolean;
    variant?: CheckboxVariant;
    size?: CheckboxSize;
    status?: CheckboxStatus;
    transition?: CheckboxTransition;
    label?: string;
    description?: string;
    helperText?: string;
    errorText?: string;
    renderLabel?: (label: string) => React.ReactNode;
    _renderIcon?: (state: CheckboxState) => React.ReactNode;
    renderDescription?: (description: string) => React.ReactNode;
    renderHelperText?: (text: string) => React.ReactNode;
    renderErrorText?: (text: string) => React.ReactNode;
    _checkIcon?: React.ReactNode;
    _indeterminateIcon?: React.ReactNode;
    _loadingIcon?: React.ReactNode;
    onFocus?: () => void;
    onBlur?: () => void;
    onMouseEnter?: () => void;
    onMouseLeave?: () => void;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    backgroundColor?: string;
    checkedBackgroundColor?: string;
    indeterminateBackgroundColor?: string;
    hoverBackgroundColor?: string;
    disabledBackgroundColor?: string;
    checkmarkColor?: string;
    indeterminateColor?: string;
    labelFontSize?: string;
    labelTextSize?: string;
    labelFontWeight?: string;
    labelFontFamily?: string;
    labelTextColor?: string;
    descriptionFontSize?: string;
    descriptionTextColor?: string;
    helperTextColor?: string;
    errorTextColor?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    focusRingOffset?: string;
    _focusBorderColor?: string;
    _focusBackgroundColor?: string;
    boxShadow?: string;
    focusBoxShadow?: string;
    checkedBoxShadow?: string;
    gap?: string;
    padding?: string;
    paddingX?: string;
    paddingY?: string;
    'aria-label'?: string;
    'aria-describedby'?: string;
}
export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
    children: React.ReactNode;
    value?: string[];
    defaultValue?: string[];
    onChange?: (value: string[]) => void;
    disabled?: boolean;
    required?: boolean;
    variant?: CheckboxVariant;
    size?: CheckboxSize;
    status?: CheckboxStatus;
    label?: string;
    description?: string;
    helperText?: string;
    errorText?: string;
    'aria-label'?: string;
    'aria-describedby'?: string;
}
export interface CheckboxItemProps extends Omit<CheckboxProps, 'checked' | 'onChange'> {
    value: string;
    children?: React.ReactNode;
}
export declare const useCheckbox: () => CheckboxContextValue;
export declare const useCheckboxGroup: () => CheckboxGroupContextValue | null;
export interface CheckboxInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
    variant?: CheckboxVariant;
}
declare const CheckboxInput: React.ForwardRefExoticComponent<CheckboxInputProps & React.RefAttributes<HTMLInputElement>>;
declare const CheckboxCheckIcon: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
declare const CheckboxIndeterminateIcon: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
declare const CheckboxLoadingIcon: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
export interface CheckboxLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
    children: React.ReactNode;
}
declare const CheckboxLabel: React.ForwardRefExoticComponent<CheckboxLabelProps & React.RefAttributes<HTMLLabelElement>>;
export interface CheckboxDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
    children: React.ReactNode;
}
declare const CheckboxDescription: React.ForwardRefExoticComponent<CheckboxDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
export interface CheckboxHelperTextProps extends React.HTMLAttributes<HTMLParagraphElement> {
    children: React.ReactNode;
}
declare const CheckboxHelperText: React.ForwardRefExoticComponent<CheckboxHelperTextProps & React.RefAttributes<HTMLParagraphElement>>;
export interface CheckboxErrorTextProps extends React.HTMLAttributes<HTMLParagraphElement> {
    children: React.ReactNode;
}
declare const CheckboxErrorText: React.ForwardRefExoticComponent<CheckboxErrorTextProps & React.RefAttributes<HTMLParagraphElement>>;
declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
declare const CheckboxItem: React.ForwardRefExoticComponent<CheckboxItemProps & React.RefAttributes<HTMLInputElement>>;
export interface CheckboxSelectAllProps extends Omit<CheckboxProps, 'checked' | 'indeterminate' | 'onChange'> {
    children?: React.ReactNode;
}
declare const CheckboxSelectAll: React.ForwardRefExoticComponent<CheckboxSelectAllProps & React.RefAttributes<HTMLInputElement>>;
interface CheckboxComponent extends React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>> {
    Input: typeof CheckboxInput;
    Label: typeof CheckboxLabel;
    Description: typeof CheckboxDescription;
    HelperText: typeof CheckboxHelperText;
    ErrorText: typeof CheckboxErrorText;
    Group: typeof CheckboxGroup;
    Item: typeof CheckboxItem;
    SelectAll: typeof CheckboxSelectAll;
}
declare const CheckboxCompound: CheckboxComponent;
export { CheckboxCompound as Checkbox, CheckboxInput, CheckboxLabel, CheckboxDescription, CheckboxHelperText, CheckboxErrorText, CheckboxGroup, CheckboxItem, CheckboxSelectAll, CheckboxCheckIcon, CheckboxIndeterminateIcon, CheckboxLoadingIcon, };
export default CheckboxCompound;