package.dist.index.d.ts Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of toggle-group Show documentation
Core logic for the toggle widget implemented as a state machine
The newest version!
import * as _zag_js_anatomy from '@zag-js/anatomy';
import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, Orientation, NormalizeProps } from '@zag-js/types';
export { Orientation } from '@zag-js/types';
import * as _zag_js_core from '@zag-js/core';
import { Machine, StateMachine } from '@zag-js/core';

declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "item">;

interface ValueChangeDetails {
    value: string[];
}
type ElementIds = Partial<{
    root: string;
    item(value: string): string;
}>;
interface PublicContext extends DirectionProperty, CommonProperties {
    /**
     * The ids of the elements in the toggle. Useful for composition.
     */
    ids?: ElementIds | undefined;
    /**
     * Whether the toggle is disabled.
     */
    disabled?: boolean | undefined;
    /**
     * The values of the toggles in the group.
     */
    value: string[];
    /**
     * Function to call when the toggle is clicked.
     */
    onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
    /**
     * Whether to loop focus inside the toggle group.
     * @default true
     */
    loopFocus: boolean;
    /**
     *  Whether to use roving tab index to manage focus.
     * @default true
     */
    rovingFocus?: boolean | undefined;
    /**
     * The orientation of the toggle group.
     * @default "horizontal"
     */
    orientation: Orientation;
    /**
     * Whether to allow multiple toggles to be selected.
     */
    multiple?: boolean | undefined;
}
type UserDefinedContext = RequiredBy;
type ComputedContext = Readonly<{
    currentLoopFocus: boolean;
}>;
interface PrivateContext {
}
interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
}
interface MachineState {
    value: "idle" | "focused";
}
type State = StateMachine.State;
type Send = StateMachine.Send;
type Service = Machine;
interface ItemProps {
    value: string;
    disabled?: boolean | undefined;
}
interface ItemState {
    /**
     * The underlying id of the item.
     */
    id: string;
    /**
     * Whether the toggle item is disabled.
     */
    disabled: boolean;
    /**
     * Whether the toggle item is pressed.
     */
    pressed: boolean;
    /**
     * Whether the toggle item is focused.
     */
    focused: boolean;
}
interface MachineApi {
    /**
     * The value of the toggle group.
     */
    value: string[];
    /**
     * Function to set the value of the toggle group.
     */
    setValue: (values: string[]) => void;
    /**
     * Returns the state of the toggle item.
     */
    getItemState(props: ItemProps): ItemState;
    getRootProps(): T["element"];
    getItemProps(props: ItemProps): T["button"];
}

declare function connect(state: State, send: Send, normalize: NormalizeProps): MachineApi;

declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine;

declare const props: ("value" | "dir" | "id" | "getRootNode" | "multiple" | "disabled" | "orientation" | "ids" | "onValueChange" | "loopFocus" | "rovingFocus")[];
declare const splitProps: >(props: Props) => [Partial, Omit];
declare const itemProps: (keyof ItemProps)[];
declare const splitItemProps: (props: Props) => [ItemProps, Omit];

export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type ItemProps, type ItemState, type Service, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };