@solid-aria/toggle/dist/index.d.ts

Primitives for building toggle components like checkboxes and switches.

import { InputBase, Validation, FocusableProps, FocusableDOMProps, AriaLabelingProps, AriaValidationProps } from '@solid-aria/types';
import { Accessor, JSX } from 'solid-js';
import { MaybeAccessor } from '@solid-primitives/utils';

interface CreateToggleStateProps {
    /**
     * Whether the element should be selected (uncontrolled).
     */
    defaultSelected?: MaybeAccessor<boolean | undefined>;
    /**
     * Whether the element should be selected (controlled).
     */
    isSelected?: MaybeAccessor<boolean | undefined>;
    /**
     * Whether the element can be selected but not changed by the user.
     */
    isReadOnly?: MaybeAccessor<boolean | undefined>;
    /**
     * Handler that is called when the element's selection state changes.
     */
    onChange?: (isSelected: boolean) => void;
}
interface ToggleState {
    /**
     * Whether the toggle is selected.
     */
    isSelected: Accessor<boolean>;
    /**
     *  Updates selection state.
     */
    setSelected: (isSelected: boolean) => void;
    /**
     * Toggle the selection state.
     */
    toggle: () => void;
}
/**
 * Provides state management for toggle components like checkboxes and switches.
 */
declare function createToggleState(props?: CreateToggleStateProps): ToggleState;

interface AriaToggleProps extends Omit<CreateToggleStateProps, "isReadOnly">, InputBase, Validation, FocusableProps, FocusableDOMProps, AriaLabelingProps, AriaValidationProps {
    /**
     * Identifies the element (or elements) whose contents or presence are controlled by the current element.
     */
    "aria-controls"?: string;
    /**
     * The label for the element.
     */
    children?: JSX.Element;
    /**
     * The value of the input element, used when submitting an HTML form.
     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).
     */
    value?: string;
    /**
     * The name of the input element, used when submitting an HTML form.
     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
     */
    name?: string;
}
interface ToggleAria {
    /**
     * Props to be spread on the input element.
     */
    inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
    /**
     * State for the toggle element, as returned by `createToggleState`.
     */
    state: ToggleState;
}
/**
 * Handles interactions for toggle elements, e.g. Checkboxes and Switches.
 * @param props - Props for the toggle element.
 * @param inputRef - Ref to the HTML input element.
 */
declare function createToggle(props: AriaToggleProps, inputRef: Accessor<HTMLInputElement | undefined>): ToggleAria;

export { AriaToggleProps, CreateToggleStateProps, ToggleAria, ToggleState, createToggle, createToggleState };