ui-ingredients/dist/toggle/create-toggle.svelte.js

Headless component library for Svelte powered by zag

import { ariaAttr, dataAttr } from '@zag-js/dom-query';
import { reflect } from '@zag-js/svelte';
import { parts } from './toggle-anatomy.js';
export function createToggle(props) {
    let pressed = $state(props.pressed ?? false);
    function setPressed(value) {
        props.onPressedChange?.({ pressed: value });
        pressed = value;
    }
    function getRootProps() {
        return {
            disabled: props.disabled,
            onclick() {
                if (props.disabled)
                    return;
                setPressed(!pressed);
            },
            'aria-pressed': ariaAttr(pressed),
            'data-state': pressed ? 'on' : 'off',
            'data-pressed': dataAttr(pressed),
            'data-disabled': dataAttr(props.disabled),
            ...parts.root.attrs,
        };
    }
    $effect(() => {
        pressed = props.pressed ?? false;
    });
    return reflect(() => ({
        pressed,
        setPressed,
        getRootProps,
    }));
}