// packages/components/src/angle-picker-control/index.tsx
import clsx from "clsx";
import { forwardRef } from "@wordpress/element";
import { isRTL, __ } from "@wordpress/i18n";
import { Flex, FlexBlock } from "../flex/index.js";
import { Spacer } from "../spacer/index.js";
import NumberControl from "../number-control/index.js";
import InputControlPrefixWrapper from "../input-control/input-prefix-wrapper.js";
import InputControlSuffixWrapper from "../input-control/input-suffix-wrapper.js";
import AngleCircle from "./angle-circle.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function UnforwardedAnglePickerControl(props, ref) {
  const {
    className,
    label = __("Angle"),
    onChange,
    value,
    ...restProps
  } = props;
  const handleOnNumberChange = (unprocessedValue) => {
    if (onChange === void 0) {
      return;
    }
    const inputValue = unprocessedValue !== void 0 && unprocessedValue !== "" ? parseInt(unprocessedValue, 10) : 0;
    onChange(inputValue);
  };
  const classes = clsx("components-angle-picker-control", className);
  const prefixOrSuffixProp = isRTL() ? {
    prefix: /* @__PURE__ */ _jsx(InputControlPrefixWrapper, {
      children: "\xB0"
    })
  } : {
    suffix: /* @__PURE__ */ _jsx(InputControlSuffixWrapper, {
      children: "\xB0"
    })
  };
  return /* @__PURE__ */ _jsxs(Flex, {
    ...restProps,
    ref,
    className: classes,
    gap: 2,
    children: [/* @__PURE__ */ _jsx(FlexBlock, {
      children: /* @__PURE__ */ _jsx(NumberControl, {
        __next40pxDefaultSize: true,
        label,
        className: "components-angle-picker-control__input-field",
        max: 360,
        min: 0,
        onChange: handleOnNumberChange,
        step: "1",
        value,
        spinControls: "none",
        ...prefixOrSuffixProp
      })
    }), /* @__PURE__ */ _jsx(Spacer, {
      marginBottom: "1",
      marginTop: "auto",
      children: /* @__PURE__ */ _jsx(AngleCircle, {
        "aria-hidden": "true",
        value,
        onChange
      })
    })]
  });
}
var AnglePickerControl = forwardRef(UnforwardedAnglePickerControl);
var angle_picker_control_default = AnglePickerControl;
export {
  AnglePickerControl,
  angle_picker_control_default as default
};
//# sourceMappingURL=index.js.map
