button.js

const Button = defineComponent(({
    id,
    label = '',
    width = 100,
    height = 40,
    color = gray,
    hoverColor = lightGray,
    pressedColor = darkGray,
    fontSize = 16,
    textColor = black,
    onClick,
    ...props
}, children) => {
    const [isHovered, setHovered] = useState(false);
    const [isPressed, setPressed] = useState(false);

    function resolveColor() {
        if (isPressed) return pressedColor;
        if (isHovered) return hoverColor;
        return color;
    }

    // outer element
    element({
        id,
        width,
        height,
        color: resolveColor(),
        borderRadius: 4,
        textAlign: 'center',
        cursor: 'pointer',
        childAlignment: { x: 'center', y: 'center' },
        onMouseEnter: () => { print("onMouseEnter"); setHovered(true); },
        onMouseLeave: () => { print("onMouseLeave"); setHovered(false); },
        onMouseDown: () => { print("onMouseDown"); setPressed(true); },
        onMouseUp: () => { print("onMouseUp"); setPressed(false); },
        onClick: (evt) => { if (typeof onClick === 'function') onClick(evt); },
        ...props
    },
        // center text label
        () => Text(label, { fontSize, textColor }),
        // any nested children
        ...children
    );
});

function render() {
    const row1 = () => Row({ id: 'r1', childGap: 20, },
        () => Button({ id: 'btn11', label: 'One', color: blue, textColor: white, onClick: () => console.log('One clicked') }),
        () => Button({ id: 'btn12', label: 'Two', color: red, textColor: white, onClick: () => console.log('Two clicked') }),
        () => Button({ id: 'btn13', label: 'Three', color: green, onClick: () => console.log('Three clicked') }),
    );

    const row2 = () => Row({ id: 'r2', childGap: 20, },
        () => Button({ id: 'btn21', label: 'Submit', color: green, textColor: white, onClick: () => console.log('Submit clicked') }),
        () => Button({ id: 'btn22', label: 'Cancel', color: red, textColor: white, onClick: () => console.log('Cancel clicked') }),
    );

    Column({ id: 'main', width: 'grow', height: 'grow', color: white, childGap: 20, childAlignment: { x: 'center', y: 'center' } },
        [row1, row2]
    );
}