@pmndrs/uikit-horizon/dist/toggle/index.js

Horizon kit for @pmndrs/uikit based on the Reality Labs Design System (RLDS)

import { Container } from '@pmndrs/uikit';
import { computed, signal } from '@preact/signals-core';
import { theme } from '../theme.js';
export class Toggle extends Container {
    uncontrolledSignal = signal(undefined);
    currentSignal = computed(() => this.properties.value.checked ?? this.uncontrolledSignal.value ?? this.properties.value.defaultChecked);
    handle;
    constructor(inputProperties, initialClasses, config) {
        super(inputProperties, initialClasses, {
            ...config,
            defaultOverrides: {
                cursor: 'pointer',
                flexShrink: 0,
                borderRadius: 1000,
                padding: 2,
                height: 24,
                width: 40,
                justifyContent: computed(() => (this.currentSignal.value ? 'flex-end' : 'flex-start')),
                '*': {
                    backgroundColor: theme.component.toggle.handle.default.value,
                    hover: {
                        backgroundColor: theme.component.toggle.handle.hovered.value,
                    },
                    active: {
                        backgroundColor: theme.component.toggle.handle.pressed.value,
                    },
                    important: {
                        backgroundColor: computed(() => this.currentSignal.value ? theme.component.toggle.handle.selected.value : undefined),
                    },
                },
                backgroundColor: theme.component.toggle.background.default.value,
                hover: {
                    backgroundColor: theme.component.toggle.background.hovered.value,
                },
                active: {
                    backgroundColor: theme.component.toggle.background.pressed.value,
                },
                important: {
                    backgroundColor: computed(() => this.currentSignal.value ? theme.component.toggle.background.selected.value : undefined),
                },
                onClick: () => {
                    if (this.properties.peek().disabled) {
                        return;
                    }
                    const checked = this.currentSignal.peek();
                    if (this.properties.peek().checked == null) {
                        this.uncontrolledSignal.value = !checked;
                    }
                    this.properties.peek().onCheckedChange?.(!checked);
                },
                ...config?.defaultOverrides,
            },
        });
        super.add((this.handle = new Container(undefined, undefined, {
            defaultOverrides: {
                flexShrink: 0,
                width: 20,
                height: 20,
                borderRadius: 1000,
            },
        })));
    }
    dispose() {
        this.handle.dispose();
        super.dispose();
    }
    add() {
        throw new Error(`the Toggle component can not have any children`);
    }
}