@styleless-ui/react/Switch/Switch.d.ts

Completely unstyled, headless and accessible React UI components.

import * as React from "react";
import type { Classes, MergeElementProps } from "../typings";
type SwitchClassesMap = Classes<"root" | "label" | "thumb" | "track">;
type ClassesContext = {
    /** The `checked` state of the switch. */
    checked: boolean;
    /** The `disabled` state of the switch. */
    disabled: boolean;
    /** The `:focus-visible` of the switch. */
    focusedVisible: boolean;
};
interface OwnProps {
    /**
     * Map of sub-components and their correlated classNames.
     */
    classes?: ((ctx: ClassesContext) => SwitchClassesMap) | SwitchClassesMap;
    /**
     * The label of the switch.
     */
    label: string | {
        /**
         * The label to use as `aria-label` property.
         */
        screenReaderLabel: string;
    } | {
        /**
         * Identifies the element (or elements) that labels the switch.
         *
         * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby MDN Web Docs} for more information.
         */
        labelledBy: string;
    };
    /**
     * If `true`, the switch will be focused automatically.
     * @default false
     */
    autoFocus?: boolean;
    /**
     * If `true`, the switch will be checked.
     * @default false
     */
    checked?: boolean;
    /**
     * The default state of `checked`. Use when the component is not controlled.
     * @default false
     */
    defaultChecked?: boolean;
    /**
     * If `true`, the switch will be disabled.
     * @default false
     */
    disabled?: boolean;
    /**
     * The Callback is fired when the state changes.
     */
    onChange?: (checkedState: boolean) => void;
    /**
     * The component to be used as the thumb element.
     */
    thumbComponent: React.ReactElement;
    /**
     * The component to be used as the track element.
     */
    trackComponent: React.ReactElement;
    onFocus?: React.FocusEventHandler<HTMLButtonElement>;
    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
    onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement>;
}
export type Props = Omit<MergeElementProps<"button", OwnProps>, "defaultValue" | "className">;
declare const Switch: (props: Props, ref: React.Ref<HTMLButtonElement>) => JSX.Element;
export default Switch;