@spark-ui/components/dist/checkbox/index.d.ts

Spark (Leboncoin design system) components.

import * as react_jsx_runtime from 'react/jsx-runtime';
import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
import * as class_variance_authority_types from 'class-variance-authority/types';
import { VariantProps } from 'class-variance-authority';

declare const checkboxInputStyles: (props?: ({
    intent?: "main" | "alert" | "error" | "success" | "support" | "accent" | "basic" | "info" | "neutral" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
type CheckboxInputStylesProps = VariantProps<typeof checkboxInputStyles>;

interface CheckboxGroupContextState extends Pick<CheckboxInputStylesProps, 'intent'> {
    /**
     * The id of the checkbox group.
     */
    id: string;
    /**
     * The name of the group. Submitted with its owning form as part of a name/value pair.
     */
    name?: string;
    /**
     * The value of the checkbox group.
     */
    value?: string[];
    /**
     * A set of ids separated by a space used to describe the input component given by a set of messages.
     */
    description?: string;
    /**
     * The validation state of the checkbox group.
     */
    state?: 'error' | 'success' | 'alert';
    /**
     * If true, the checkbox group will be invalid.
     */
    isInvalid?: boolean;
    /**
     * If true, the checkbox group will be required.
     */
    isRequired?: boolean;
    /**
     * Callback used to update or notify the value of the checkbox group.
     */
    onCheckedChange?: (checked: boolean, changed: string) => void;
    /**
     * When true, the label will be placed on the left side of the Checkbox
     */
    reverse?: boolean;
}

type CheckedStatus = boolean | 'indeterminate';
interface CheckboxInputProps extends CheckboxInputStylesProps, Omit<ComponentPropsWithoutRef<'button'>, 'onChange' | 'value' | 'checked' | 'defaultChecked'> {
    /**
     * The checked icon to use.
     */
    icon?: ReactNode;
    /**
     * The indeterminate icon to use.
     */
    indeterminateIcon?: ReactNode;
    /**
     * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.
     */
    defaultChecked?: boolean;
    /**
     * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.
     */
    checked?: CheckedStatus;
    /**
     * When true, prevents the user from interacting with the checkbox.
     */
    disabled?: boolean;
    /**
     * When true, indicates that the user must check the checkbox before the owning form can be submitted.
     */
    required?: boolean;
    /**
     * The name of the checkbox. Submitted with its owning form as part of a name/value pair.
     */
    name?: string;
    /**
     * The value given as data when submitted with a name.
     */
    value?: string;
    /**
     * Event handler called when the checked state of the checkbox changes.
     */
    onCheckedChange?: (checked: boolean) => void;
    ref?: Ref<HTMLButtonElement>;
}

type CheckboxProps = CheckboxInputProps & Pick<CheckboxGroupContextState, 'reverse'> & {
    ref?: Ref<HTMLButtonElement>;
};
declare const Checkbox: {
    ({ id: idProp, className, intent: intentProp, checked: checkedProp, value, disabled, reverse, onCheckedChange, children, ref: forwardedRef, ...others }: CheckboxProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

declare const checkboxGroupStyles: (props?: ({
    orientation?: "horizontal" | "vertical" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
type CheckboxGroupStylesProps = VariantProps<typeof checkboxGroupStyles>;

interface CheckboxGroupProps extends Omit<ComponentPropsWithoutRef<'div'>, 'value' | 'defaultValue' | 'onChange'>, CheckboxGroupStylesProps, Pick<CheckboxGroupContextState, 'intent' | 'name' | 'value' | 'reverse'> {
    /**
     * The initial value of the checkbox group
     */
    defaultValue?: string[];
    /**
     * The callback fired when any children Checkbox is checked or unchecked
     */
    onCheckedChange?: (value: string[]) => void;
    ref?: Ref<HTMLDivElement>;
}
declare const CheckboxGroup: {
    ({ name: nameProp, value: valueProp, defaultValue, className, intent, orientation, onCheckedChange: onCheckedChangeProp, reverse, children, ref, ...others }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

export { Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps };