import React from 'react';
import { angleLimits, dataHooks } from './AngleInput.constants';
import { classes, st } from './AngleInput.st.css.js';
import { useAngleInput } from './hooks/useAngleInput';
const AngleInput = ({ onChange, onPointerDown, onPointerUp, onFocus, onBlur, dataHook, value, disabled = false, step = 1, }) => {
    const { rootRef, handlePointerDown, handlePointerUp, handlePointerMove, handleInputChange, handleKeyboardEvent, handleFocus, handleBlur, } = useAngleInput({
        onChange,
        onPointerDown,
        onPointerUp,
        onFocus,
        onBlur,
        step,
    });
    return (React.createElement("div", { onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, className: st(classes.root, { disabled }), "data-hook": dataHook, "aria-disabled": disabled, ref: rootRef },
        React.createElement("div", { className: classes.track, "data-hook": dataHooks.track },
            React.createElement("div", { className: st(classes.knobWrapper), "data-hook": dataHooks.knobWrapper, style: {
                    transform: `rotate(${value}deg)`,
                } },
                React.createElement("div", { className: st(classes.knob), "data-hook": dataHooks.knob },
                    React.createElement("input", { type: "range", value: value, className: classes.visuallyHiddenInput, onChange: handleInputChange, onKeyDown: handleKeyboardEvent, onFocus: handleFocus, step: step, onBlur: handleBlur, min: angleLimits.min, max: angleLimits.max, disabled: disabled, "data-hook": dataHooks.input }))),
            React.createElement("div", { className: classes.arm, style: {
                    transform: `rotate(${value}deg)`,
                } }))));
};
AngleInput.displayName = 'AngleInput';
export default AngleInput;
//# sourceMappingURL=AngleInput.js.map