// packages/components/src/color-picker/hex-input.tsx
import { colord } from "colord";
import { __ } from "@wordpress/i18n";
import { InputControl } from "../input-control/index.js";
import { Text } from "../text/index.js";
import { COLORS } from "../utils/colors-values.js";
import InputControlPrefixWrapper from "../input-control/input-prefix-wrapper.js";
import { jsx as _jsx } from "react/jsx-runtime";
var HexInput = ({
  color,
  onChange,
  enableAlpha
}) => {
  const handleChange = (nextValue) => {
    if (!nextValue) {
      return;
    }
    const hexValue = nextValue.startsWith("#") ? nextValue : "#" + nextValue;
    onChange(colord(hexValue));
  };
  const stateReducer = (state, action) => {
    const nativeEvent = action.payload?.event?.nativeEvent;
    if ("insertFromPaste" !== nativeEvent?.inputType) {
      return {
        ...state
      };
    }
    const value = state.value?.startsWith("#") ? state.value.slice(1).toUpperCase() : state.value?.toUpperCase();
    return {
      ...state,
      value
    };
  };
  return /* @__PURE__ */ _jsx(InputControl, {
    prefix: /* @__PURE__ */ _jsx(InputControlPrefixWrapper, {
      children: /* @__PURE__ */ _jsx(Text, {
        color: COLORS.theme.accent,
        lineHeight: 1,
        children: "#"
      })
    }),
    value: color.toHex().slice(1).toUpperCase(),
    onChange: handleChange,
    maxLength: enableAlpha ? 9 : 7,
    label: __("Hex color"),
    hideLabelFromVision: true,
    size: "__unstable-large",
    __unstableStateReducer: stateReducer,
    __unstableInputWidth: "9em"
  });
};
export {
  HexInput
};
//# sourceMappingURL=hex-input.js.map
